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