🧑💻 Enhance class names for easier extension
This commit is contained in:
parent
62951befda
commit
0595ecc1e2
8 changed files with 182 additions and 181 deletions
|
|
@ -55,47 +55,47 @@ impl ComponentTrait for Item {
|
|||
match self.item_type() {
|
||||
ItemType::Void => PrepareMarkup::None,
|
||||
ItemType::Label(label) => PrepareMarkup::With(html! {
|
||||
li class="menu-label" {
|
||||
li class="pt-menu__label" {
|
||||
span title=[description] {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Link(label, path) => PrepareMarkup::With(html! {
|
||||
li class="menu-link" {
|
||||
li class="pt-menu__link" {
|
||||
a href=(path(cx)) title=[description] {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! {
|
||||
li class="menu-link" {
|
||||
li class="pt-menu__link" {
|
||||
a href=(path(cx)) title=[description] target="_blank" {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Html(content) => PrepareMarkup::With(html! {
|
||||
li class="html" {
|
||||
li class="pt-menu__html" {
|
||||
(content.prepare(cx))
|
||||
}
|
||||
}),
|
||||
ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! {
|
||||
li class="menu-children" {
|
||||
li class="pt-menu__children" {
|
||||
a href="#" title=[description] {
|
||||
(label.prepare(cx)) i class="menu-icon bi-chevron-down" {}
|
||||
(label.prepare(cx)) i class="pt-menu__icon bi-chevron-down" {}
|
||||
}
|
||||
div class="menu-subs" {
|
||||
div class="pt-menu__subs" {
|
||||
(submenu.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
|
||||
li class="menu-children" {
|
||||
li class="pt-menu__children" {
|
||||
a href="#" title=[description] {
|
||||
(label.prepare(cx)) i class="menu-icon bi-chevron-down" {}
|
||||
(label.prepare(cx)) i class="pt-menu__icon bi-chevron-down" {}
|
||||
}
|
||||
div class="menu-subs menu-mega" {
|
||||
div class="pt-menu__subs pt-menu__mega" {
|
||||
(megamenu.prepare(cx))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ impl ComponentTrait for Megamenu {
|
|||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-groups" {
|
||||
div id=[self.id()] class="pt-menu__groups" {
|
||||
(self.groups().prepare(cx))
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -46,28 +46,28 @@ impl ComponentTrait for Menu {
|
|||
cx.set_param::<bool>(PARAM_INCLUDE_ICONS, true);
|
||||
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-container" {
|
||||
div class="menu-wrapper" {
|
||||
div class="menu-main" {
|
||||
div class="menu-overlay" {}
|
||||
nav class="menu" {
|
||||
div class="menu-header" {
|
||||
button type="button" class="menu-arrow" {
|
||||
div id=[self.id()] class="pt-menu__container" {
|
||||
div class="pt-menu__wrapper" {
|
||||
div class="pt-menu__main" {
|
||||
div class="pt-menu__overlay" {}
|
||||
nav class="pt-menu__nav" {
|
||||
div class="pt-menu__header" {
|
||||
button type="button" class="pt-menu__arrow" {
|
||||
i class="bi-chevron-left" {}
|
||||
}
|
||||
div class="menu-title" {}
|
||||
button type="button" class="menu-close" {
|
||||
div class="pt-menu__title" {}
|
||||
button type="button" class="pt-menu__close" {
|
||||
i class="bi-x" {}
|
||||
}
|
||||
}
|
||||
ul class="menu-section" {
|
||||
ul class="pt-menu__section" {
|
||||
(self.items().prepare(cx))
|
||||
}
|
||||
}
|
||||
}
|
||||
button
|
||||
type="button"
|
||||
class="menu-trigger"
|
||||
class="pt-menu__trigger"
|
||||
title=[L10n::t("menu_toggle", &LOCALES_PAGETOP).into_string(cx)]
|
||||
{
|
||||
span {} span {} span {}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ impl ComponentTrait for Submenu {
|
|||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-items" {
|
||||
div id=[self.id()] class="pt-menu__items" {
|
||||
@if let Some(title) = self.title().get().into_string(cx) {
|
||||
h4 class="menu-title" { (title) }
|
||||
h4 class="pt-menu__title" { (title) }
|
||||
}
|
||||
ul {
|
||||
(self.items().prepare(cx))
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.menu-container {
|
||||
.pt-menu__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
z-index: 999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--menu--color-background);
|
||||
background: var(--pt-menu--color-bg);
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
margin-right: var(--menu--item-gap);
|
||||
.pt-menu__wrapper {
|
||||
margin-right: var(--pt-menu--item-gap);
|
||||
}
|
||||
.menu-wrapper a,
|
||||
.menu-wrapper button {
|
||||
.pt-menu__wrapper a,
|
||||
.pt-menu__wrapper button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -21,96 +21,96 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-main .menu ul {
|
||||
.pt-menu__nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu-main .menu li {
|
||||
.pt-menu__nav li {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: var(--menu--line-padding) 0;
|
||||
line-height: var(--menu--line-height);
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-label,
|
||||
.menu-main .menu li > a {
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: var(--menu--color-base);
|
||||
color: var(--pt-color);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu-main .menu li > a {
|
||||
.pt-menu__nav li > a {
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-transition: color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.menu-main .menu li:hover > a {
|
||||
color: var(--menu--color-highlight);
|
||||
.pt-menu__nav li:hover > a {
|
||||
color: var(--pt-menu--color-highlight);
|
||||
}
|
||||
.menu-main .menu li > a > i.menu-icon {
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-subs {
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--menu--color-background);
|
||||
border-radius: var(--border-radius);
|
||||
border-top: 3px solid var(--menu--color-highlight);
|
||||
background: var(--pt-menu--color-bg);
|
||||
border-radius: var(--pt-menu--border-radius);
|
||||
border-top: 3px solid var(--pt-menu--color-highlight);
|
||||
z-index: 500;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow);
|
||||
box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow);
|
||||
-webkit-box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow);
|
||||
box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-children:hover > .menu-subs {
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs {
|
||||
margin-top: 0.4rem;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-items {
|
||||
min-width: var(--menu--item-width-min);
|
||||
max-width: var(--menu--item-width-max);
|
||||
.pt-menu__nav li .pt-menu__items {
|
||||
min-width: var(--pt-menu--item-width-min);
|
||||
max-width: var(--pt-menu--item-width-max);
|
||||
}
|
||||
.menu-main .menu li .menu-items .menu-title {
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: var(--menu--line-padding) 0;
|
||||
line-height: var(--menu--line-height);
|
||||
padding: var(--pt-menu--line-padding) 0;
|
||||
line-height: var(--pt-menu--line-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--menu--color-highlight);
|
||||
color: var(--pt-menu--color-highlight);
|
||||
text-transform: uppercase;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu-main .menu li .menu-items li {
|
||||
.pt-menu__nav li .pt-menu__items li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-mega {
|
||||
.pt-menu__nav li .pt-menu__mega {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-groups {
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -118,20 +118,20 @@
|
|||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.menu-header,
|
||||
.menu-trigger {
|
||||
.pt-menu__header,
|
||||
.pt-menu__trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Applies <= 992px */
|
||||
@media only screen and (max-width: 62em) {
|
||||
.menu-wrapper {
|
||||
margin-left: var(--menu--item-gap);
|
||||
.pt-menu__wrapper {
|
||||
margin-left: var(--pt-menu--item-gap);
|
||||
}
|
||||
.menu-trigger {
|
||||
.pt-menu__trigger {
|
||||
cursor: pointer;
|
||||
width: var(--menu--trigger-width);
|
||||
height: var(--menu--item-height);
|
||||
width: var(--pt-menu--trigger-width);
|
||||
height: var(--pt-menu--item-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
|
@ -141,23 +141,23 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu-trigger span {
|
||||
.pt-menu__trigger span {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 12.675% 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--menu--color-base);
|
||||
border-radius: var(--pt-border-radius);
|
||||
background: var(--pt-color);
|
||||
}
|
||||
|
||||
.menu-main .menu {
|
||||
.pt-menu__nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--menu--side-width);
|
||||
width: var(--pt-menu--side-width);
|
||||
height: 100%;
|
||||
z-index: 1099;
|
||||
overflow: hidden;
|
||||
background: var(--menu--color-background);
|
||||
background: var(--pt-menu--color-bg);
|
||||
-webkit-transform: translate(-100%);
|
||||
-ms-transform: translate(-100%);
|
||||
transform: translate(-100%);
|
||||
|
|
@ -165,38 +165,38 @@
|
|||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu-main .menu.active {
|
||||
.pt-menu__main .pt-menu__nav.active {
|
||||
-webkit-transform: translate(0%);
|
||||
-ms-transform: translate(0%);
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.menu-main .menu li {
|
||||
.pt-menu__nav li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu-main .menu li.menu-label,
|
||||
.menu-main .menu li > a {
|
||||
.pt-menu__nav li.pt-menu__label,
|
||||
.pt-menu__nav li > a {
|
||||
display: block;
|
||||
padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap);
|
||||
border-bottom: 1px solid var(--menu--color-border);
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
}
|
||||
.menu-main .menu li ul li.menu-label,
|
||||
.menu-main .menu li ul li > a {
|
||||
.pt-menu__nav li ul li.pt-menu__label,
|
||||
.pt-menu__nav li ul li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.menu-main .menu li > a > i.menu-icon {
|
||||
.pt-menu__nav li > a > i.pt-menu__icon {
|
||||
position: absolute;
|
||||
top: var(--menu--line-padding);
|
||||
right: var(--menu--line-padding);
|
||||
top: var(--pt-menu--line-padding);
|
||||
right: var(--pt-menu--line-padding);
|
||||
font-size: 1.25rem;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-subs {
|
||||
.pt-menu__nav li .pt-menu__subs {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
|
|
@ -217,23 +217,23 @@
|
|||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.menu-main .menu li .menu-subs.active {
|
||||
.pt-menu__nav li .pt-menu__subs.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-children:hover > .menu-subs {
|
||||
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-items .menu-title {
|
||||
padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap);
|
||||
.pt-menu__nav li .pt-menu__items .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-groups {
|
||||
.pt-menu__nav li .pt-menu__groups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-main .menu .menu-header {
|
||||
.pt-menu__nav .pt-menu__header {
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
|
@ -247,24 +247,24 @@
|
|||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
height: var(--menu--item-height);
|
||||
border-bottom: 1px solid var(--menu--color-border);
|
||||
background: var(--menu--color-background);
|
||||
height: var(--pt-menu--item-height);
|
||||
border-bottom: 1px solid var(--pt-menu--color-border);
|
||||
background: var(--pt-menu--color-bg);
|
||||
z-index: 501;
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-title {
|
||||
padding: var(--menu--line-padding);
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__title {
|
||||
padding: var(--pt-menu--line-padding);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-close,
|
||||
.menu-main .menu .menu-header .menu-arrow {
|
||||
width: var(--menu--item-height);
|
||||
min-width: var(--menu--item-height);
|
||||
height: var(--menu--item-height);
|
||||
line-height: var(--menu--item-height);
|
||||
color: var(--menu--color-base);
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close,
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
width: var(--pt-menu--item-height);
|
||||
min-width: var(--pt-menu--item-height);
|
||||
height: var(--pt-menu--item-height);
|
||||
line-height: var(--pt-menu--item-height);
|
||||
color: var(--pt-color);
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -274,20 +274,20 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-close {
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__close {
|
||||
font-size: 2.25rem;
|
||||
border-left: 1px solid var(--menu--color-border);
|
||||
border-left: 1px solid var(--pt-menu--color-border);
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-arrow {
|
||||
.pt-menu__nav .pt-menu__header .pt-menu__arrow {
|
||||
font-size: 1.25rem;
|
||||
border-right: 1px solid var(--menu--color-border);
|
||||
border-right: 1px solid var(--pt-menu--color-border);
|
||||
display: none;
|
||||
}
|
||||
.menu-main .menu .menu-header.active .menu-arrow {
|
||||
.pt-menu__nav .pt-menu__header.active .pt-menu__arrow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-main .menu .menu-section {
|
||||
.pt-menu__nav .pt-menu__section {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
.pt-menu__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu-overlay.active {
|
||||
.pt-menu__overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,33 +16,33 @@
|
|||
--max-width: 84.375rem;
|
||||
--max-bg-color: 98.125rem;
|
||||
*/
|
||||
--sp: 1.125rem;
|
||||
--pt-gap: 1.125rem;
|
||||
/*
|
||||
--content-left: 5.625rem;
|
||||
--site-header-height-wide: var(--sp10);
|
||||
--container-padding: var(--sp);
|
||||
--site-header-height-wide: var(--pt-gap10);
|
||||
--container-padding: var(--pt-gap);
|
||||
*/
|
||||
}
|
||||
/*
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--container-padding:var(--sp2);
|
||||
--container-padding:var(--pt-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--scrollbar-width: 0px;
|
||||
--grid-col-count: 6;
|
||||
--grid-gap: var(--sp);
|
||||
--grid-gap: var(--pt-gap);
|
||||
--grid-gap-count: calc(var(--grid-col-count) - 1);
|
||||
--grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width));
|
||||
--grid-full-width: calc(100vw - var(--pt-gap2) - var(--scrollbar-width));
|
||||
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
:root {
|
||||
--grid-col-count:14;
|
||||
--grid-gap: var(--sp2);
|
||||
--grid-gap: var(--pt-gap2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,37 +54,37 @@
|
|||
|
||||
@media (min-width: 75rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
|
||||
--grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--pt-gap4));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
:root {
|
||||
--grid-full-width:calc(var(--max-width) - var(--sp4));
|
||||
--grid-full-width:calc(var(--max-width) - var(--pt-gap4));
|
||||
}
|
||||
}
|
||||
*/
|
||||
:root {
|
||||
--sp0-25: calc(0.25 * var(--sp));
|
||||
/*
|
||||
--sp0-5: calc(0.5 * var(--sp));
|
||||
--pt-gap-0-25: calc(0.25 * var(--pt-gap));
|
||||
--pt-gap-0-5: calc(0.5 * var(--pt-gap));
|
||||
*/
|
||||
--sp0-75: calc(0.75 * var(--sp));
|
||||
--pt-gap-0-75: calc(0.75 * var(--pt-gap));
|
||||
/*
|
||||
--pt-gap-1-5: calc(1.5 * var(--pt-gap));
|
||||
--pt-gap-2: calc(2 * var(--pt-gap));
|
||||
--pt-gap-2-5: calc(2.5 * var(--pt-gap));
|
||||
--pt-gap-3: calc(3 * var(--pt-gap));
|
||||
--pt-gap-4: calc(4 * var(--pt-gap));
|
||||
--pt-gap-5: calc(5 * var(--pt-gap));
|
||||
--pt-gap-6: calc(6 * var(--pt-gap));
|
||||
--pt-gap-7: calc(7 * var(--pt-gap));
|
||||
--pt-gap-8: calc(8 * var(--pt-gap));
|
||||
--pt-gap-9: calc(9 * var(--pt-gap));
|
||||
--pt-gap-10: calc(10 * var(--pt-gap));
|
||||
--pt-gap-11: calc(11 * var(--pt-gap));
|
||||
--pt-gap-12: calc(12 * var(--pt-gap));
|
||||
/*
|
||||
--sp1: calc(1 * var(--sp));
|
||||
--sp1-5: calc(1.5 * var(--sp));
|
||||
--sp2: calc(2 * var(--sp));
|
||||
--sp2-5: calc(2.5 * var(--sp));
|
||||
--sp3: calc(3 * var(--sp));
|
||||
--sp4: calc(4 * var(--sp));
|
||||
--sp5: calc(5 * var(--sp));
|
||||
--sp6: calc(6 * var(--sp));
|
||||
--sp7: calc(7 * var(--sp));
|
||||
--sp8: calc(8 * var(--sp));
|
||||
--sp9: calc(9 * var(--sp));
|
||||
--sp10: calc(10 * var(--sp));
|
||||
--sp11: calc(11 * var(--sp));
|
||||
--sp12: calc(12 * var(--sp));
|
||||
--color--gray-hue: 201;
|
||||
--color--gray-saturation: 15%;
|
||||
--color--gray-5: hsl(var(--color--gray-hue),var(--color--gray-saturation),5%);
|
||||
|
|
@ -115,22 +115,23 @@
|
|||
--color--red: #e33f1e;
|
||||
--color--gold: #fdca40;
|
||||
--color--green: #3fa21c;
|
||||
--header-height-wide-when-fixed: calc(6 * var(--sp));
|
||||
--header-height-wide-when-fixed: calc(6 * var(--pt-gap));
|
||||
--mobile-nav-width: 31.25rem;
|
||||
*/
|
||||
--border-radius: 0.1875rem;
|
||||
--pt-border-radius: 0.1875rem;
|
||||
|
||||
--menu--color-background: #fafafa;
|
||||
--menu--color-base: #121212;
|
||||
--menu--color-highlight: #e91e63;
|
||||
--menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--menu--line-padding: 0.625rem;
|
||||
--menu--line-height: 1.875rem;
|
||||
--menu--item-height: calc(var(--menu--line-padding) + var(--menu--line-height));
|
||||
--menu--item-width-min: 14rem;
|
||||
--menu--item-width-max: 20rem;
|
||||
--menu--item-gap: 1rem;
|
||||
--menu--trigger-width: var(--menu--item-height);
|
||||
--menu--side-width: 20rem;
|
||||
|
||||
--pt-menu--color-bg: #fafafa;
|
||||
--pt-menu--color-highlight: #e91e63;
|
||||
--pt-menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--pt-menu--line-padding: 0.625rem;
|
||||
--pt-menu--line-height: 1.875rem;
|
||||
--pt-menu--item-height: calc(var(--pt-menu--line-padding) + var(--pt-menu--line-height));
|
||||
--pt-menu--item-width-min: 14rem;
|
||||
--pt-menu--item-width-max: 20rem;
|
||||
--pt-menu--item-gap: 1rem;
|
||||
--pt-menu--border-radius: 0.625rem;
|
||||
--pt-menu--trigger-width: var(--pt-menu--item-height);
|
||||
--pt-menu--side-width: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
.site-branding-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
column-gap: var(--sp0-75);
|
||||
column-gap: var(--pt-gap-0-75);
|
||||
}
|
||||
.site-branding-name {
|
||||
letter-spacing: 0.02em;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
function menuShowChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu-subs');
|
||||
function pt_menu__showChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.pt-menu__subs');
|
||||
submenu.classList.add('active');
|
||||
submenu.style.animation = 'slideLeft 0.5s ease forwards';
|
||||
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.menu-title').innerHTML = title;
|
||||
nav.querySelector('.menu-header').classList.add('active');
|
||||
nav.querySelector('.pt-menu__title').innerHTML = title;
|
||||
nav.querySelector('.pt-menu__header').classList.add('active');
|
||||
}
|
||||
|
||||
function menuHideChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu-subs');
|
||||
function pt_menu__hideChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.pt-menu__subs');
|
||||
submenu.style.animation = 'slideRight 0.5s ease forwards';
|
||||
setTimeout(() => {
|
||||
submenu.classList.remove('active');
|
||||
|
|
@ -19,70 +19,70 @@ function menuHideChildren(nav, children) {
|
|||
children.shift();
|
||||
if (children.length > 0) {
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.menu-title').innerHTML = title;
|
||||
nav.querySelector('.pt-menu__title').innerHTML = title;
|
||||
} else {
|
||||
nav.querySelector('.menu-header').classList.remove('active');
|
||||
nav.querySelector('.menu-title').innerHTML = '';
|
||||
nav.querySelector('.pt-menu__header').classList.remove('active');
|
||||
nav.querySelector('.pt-menu__title').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function menuToggle(nav, overlay) {
|
||||
function pt_menu__toggle(nav, overlay) {
|
||||
nav.classList.toggle('active');
|
||||
overlay.classList.toggle('active');
|
||||
}
|
||||
|
||||
function menuReset(menu, nav) {
|
||||
nav.querySelector('.menu-header').classList.remove('active');
|
||||
nav.querySelector('.menu-title').innerHTML = '';
|
||||
menu.querySelectorAll('.menu-subs').forEach(submenu => {
|
||||
function pt_menu__reset(menu, nav) {
|
||||
nav.querySelector('.pt-menu__header').classList.remove('active');
|
||||
nav.querySelector('.pt-menu__title').innerHTML = '';
|
||||
menu.querySelectorAll('.pt-menu__subs').forEach(submenu => {
|
||||
submenu.classList.remove('active');
|
||||
submenu.style.removeProperty("animation");
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.menu-container').forEach(menu => {
|
||||
document.querySelectorAll('.pt-menu__container').forEach(menu => {
|
||||
|
||||
let menuChildren = [];
|
||||
const menuNav = menu.querySelector('.menu');
|
||||
const menuOverlay = menu.querySelector('.menu-overlay');
|
||||
const menuNav = menu.querySelector('.pt-menu__nav');
|
||||
const menuOverlay = menu.querySelector('.pt-menu__overlay');
|
||||
|
||||
menu.querySelector('.menu-section').addEventListener('click', (e) => {
|
||||
menu.querySelector('.pt-menu__section').addEventListener('click', (e) => {
|
||||
if (!menuNav.classList.contains('active')) {
|
||||
return;
|
||||
}
|
||||
let target = e.target.closest('.menu-children');
|
||||
let target = e.target.closest('.pt-menu__children');
|
||||
if (target && target != menuChildren[0]) {
|
||||
menuChildren.unshift(target);
|
||||
menuShowChildren(menuNav, menuChildren);
|
||||
pt_menu__showChildren(menuNav, menuChildren);
|
||||
}
|
||||
});
|
||||
|
||||
menu.querySelector('.menu-arrow').addEventListener('click', () => {
|
||||
menuHideChildren(menuNav, menuChildren);
|
||||
menu.querySelector('.pt-menu__arrow').addEventListener('click', () => {
|
||||
pt_menu__hideChildren(menuNav, menuChildren);
|
||||
});
|
||||
|
||||
menu.querySelector('.menu-close').addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
menuReset(menu, menuNav);
|
||||
menu.querySelector('.pt-menu__close').addEventListener('click', () => {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
setTimeout(() => {
|
||||
pt_menu__reset(menu, menuNav);
|
||||
menuChildren = [];
|
||||
}, 300);
|
||||
});
|
||||
|
||||
menu.querySelector('.menu-trigger').addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
menu.querySelector('.pt-menu__trigger').addEventListener('click', () => {
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
menuOverlay.addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (this.innerWidth >= 992) {
|
||||
if (menuNav.classList.contains('active')) {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
menuReset(menu, menuNav);
|
||||
pt_menu__toggle(menuNav, menuOverlay);
|
||||
setTimeout(() => {
|
||||
pt_menu__reset(menu, menuNav);
|
||||
menuChildren = [];
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue