diff --git a/packages/pagetop-bootsier/static/css/styles.css b/packages/pagetop-bootsier/static/css/styles.css index 9f458863..90f3cda9 100644 --- a/packages/pagetop-bootsier/static/css/styles.css +++ b/packages/pagetop-bootsier/static/css/styles.css @@ -2,8 +2,8 @@ /* Heading component */ -.pt-heading__subtitle { - margin-top: calc(-1 * var(--pt-gap-0-35)); +.heading__subtitle { + margin-top: calc(-1 * var(--val-gap-0-35)); } /* Button component */ diff --git a/src/base/component.rs b/src/base/component.rs index 985791b7..fea81681 100644 --- a/src/base/component.rs +++ b/src/base/component.rs @@ -60,28 +60,28 @@ pub(crate) fn add_base_assets(cx: &mut Context) { #[derive(AutoDefault)] pub enum BreakPoint { #[default] - None, /* Does not apply. Rest initially assume 1 pixel = 0.0625em */ - SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5em) */ - MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48em) */ - LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62em) */ - XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80em) */ - X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90em) */ - X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120em) */ - X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160em) */ + None, /* Does not apply. Rest initially assume 1 pixel = 0.0625rem */ + SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5rem) */ + MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48rem) */ + LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62rem) */ + XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80rem) */ + X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90rem) */ + X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120rem) */ + X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160rem) */ } #[rustfmt::skip] impl ToString for BreakPoint { fn to_string(&self) -> String { String::from(match self { - BreakPoint::None => "pt-bp__none", - BreakPoint::SM => "pt-bp__sm", - BreakPoint::MD => "pt-bp__md", - BreakPoint::LG => "pt-bp__lg", - BreakPoint::XL => "pt-bp__xl", - BreakPoint::X2L => "pt-bp__x2l", - BreakPoint::X3L => "pt-bp__x3l", - BreakPoint::X2K => "pt-bp__x2k", + BreakPoint::None => "bp__none", + BreakPoint::SM => "bp__sm", + BreakPoint::MD => "bp__md", + BreakPoint::LG => "bp__lg", + BreakPoint::XL => "bp__xl", + BreakPoint::X2L => "bp__x2l", + BreakPoint::X3L => "bp__x3l", + BreakPoint::X2K => "bp__x2k", }) } } @@ -105,14 +105,14 @@ pub enum ButtonStyle { impl ToString for ButtonStyle { fn to_string(&self) -> String { String::from(match self { - ButtonStyle::Default => "pt-button__default", - ButtonStyle::Info => "pt-button__info", - ButtonStyle::Success => "pt-button__success", - ButtonStyle::Warning => "pt-button__warning", - ButtonStyle::Danger => "pt-button__danger", - ButtonStyle::Light => "pt-button__light", - ButtonStyle::Dark => "pt-button__dark", - ButtonStyle::Link => "pt-button__link", + ButtonStyle::Default => "button__default", + ButtonStyle::Info => "button__info", + ButtonStyle::Success => "button__success", + ButtonStyle::Warning => "button__warning", + ButtonStyle::Danger => "button__danger", + ButtonStyle::Light => "button__light", + ButtonStyle::Dark => "button__dark", + ButtonStyle::Link => "button__link", }) } } @@ -138,16 +138,16 @@ pub enum FontSize { impl ToString for FontSize { fn to_string(&self) -> String { String::from(match self { - FontSize::ExtraLarge => "pt-fs__x3l", - FontSize::XxLarge => "pt-fs__x2l", - FontSize::XLarge => "pt-fs__xl", - FontSize::Large => "pt-fs__l", - FontSize::Medium => "pt-fs__m", + FontSize::ExtraLarge => "fs__x3l", + FontSize::XxLarge => "fs__x2l", + FontSize::XLarge => "fs__xl", + FontSize::Large => "fs__l", + FontSize::Medium => "fs__m", FontSize::Normal => "", - FontSize::Small => "pt-fs__s", - FontSize::XSmall => "pt-fs__xs", - FontSize::XxSmall => "pt-fs__x2s", - FontSize::ExtraSmall => "pt-fs__x3s", + FontSize::Small => "fs__s", + FontSize::XSmall => "fs__xs", + FontSize::XxSmall => "fs__x2s", + FontSize::ExtraSmall => "fs__x3s", }) } } diff --git a/src/base/component/block.rs b/src/base/component/block.rs index e2898899..7dadbd52 100644 --- a/src/base/component/block.rs +++ b/src/base/component/block.rs @@ -29,7 +29,7 @@ impl ComponentTrait for Block { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.prepend_classes("pt-block"); + self.prepend_classes("block__container"); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { @@ -39,9 +39,9 @@ impl ComponentTrait for Block { return PrepareMarkup::With(html! { div id=(id) class=[self.classes().get()] { @if let Some(title) = self.title().using(cx.langid()) { - h2 class="pt-block__title" { (title) } + h2 class="block__title" { (title) } } - div class="pt-block__body" { (block_body) } + div class="block__body" { (block_body) } } }); } diff --git a/src/base/component/branding.rs b/src/base/component/branding.rs index 9ef0f8d6..e97b9217 100644 --- a/src/base/component/branding.rs +++ b/src/base/component/branding.rs @@ -35,19 +35,19 @@ impl ComponentTrait for Branding { let logo = self.logo().render(cx); let title = L10n::l("site_home").using(cx.langid()); PrepareMarkup::With(html! { - div id=[self.id()] class="pt-branding" { - div class="pt-branding__wrapper" { + div id=[self.id()] class="branding__container" { + div class="branding__inner" { @if !logo.is_empty() { - div class="pt-branding__logo" { (logo) } + div class="branding__logo" { (logo) } } - div class="pt-branding__text" { - div class="pt-branding__name" { + div class="branding__text" { + div class="branding__name" { a href=(self.frontpage()(cx)) title=[title] rel="home" { (self.app_name()) } } @if let Some(slogan) = self.slogan().using(cx.langid()) { - div class="pt-branding__slogan" { + div class="branding__slogan" { (slogan) } } diff --git a/src/base/component/flex.rs b/src/base/component/flex.rs index 34c130f6..9bff2959 100644 --- a/src/base/component/flex.rs +++ b/src/base/component/flex.rs @@ -22,19 +22,19 @@ impl ToString for Direction { fn to_string(&self) -> String { match self { Direction::Default => concat_string!( - "pt-flex__container pt-flex__row ", BreakPoint::default().to_string() + "flex__container flex__row ", BreakPoint::default().to_string() ), Direction::Row(breakpoint) => concat_string!( - "pt-flex__container pt-flex__row ", breakpoint.to_string() + "flex__container flex__row ", breakpoint.to_string() ), Direction::RowReverse(breakpoint) => concat_string!( - "pt-flex__container pt-flex__row pt-flex__reverse ", breakpoint.to_string() + "flex__container flex__row flex__reverse ", breakpoint.to_string() ), Direction::Column(breakpoint) => concat_string!( - "pt-flex__container pt-flex__col ", breakpoint.to_string() + "flex__container flex__col ", breakpoint.to_string() ), Direction::ColumnReverse(breakpoint) => concat_string!( - "pt-flex__container pt-flex__col pt-flex__reverse ", breakpoint.to_string() + "flex__container flex__col flex__reverse ", breakpoint.to_string() ), } } @@ -57,8 +57,8 @@ impl ToString for WrapAlign { match self { WrapAlign::Default => "".to_owned(), WrapAlign::NoWrap => "flex-nowrap".to_owned(), - WrapAlign::Wrap(a) => concat_string!("pt-flex__wrap ", a.to_string()), - WrapAlign::WrapReverse(a) => concat_string!("pt-flex__wrap-reverse ", a.to_string()), + WrapAlign::Wrap(a) => concat_string!("flex__wrap ", a.to_string()), + WrapAlign::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()), } } } @@ -82,12 +82,12 @@ impl ToString for ContentAlign { fn to_string(&self) -> String { String::from(match self { ContentAlign::Default => "", - ContentAlign::Start => "pt-flex__align-start", - ContentAlign::End => "pt-flex__align-end", - ContentAlign::Center => "pt-flex__align-center", - ContentAlign::Stretch => "pt-flex__align-stretch", - ContentAlign::SpaceBetween => "pt-flex__align-space-between", - ContentAlign::SpaceAround => "pt-flex__align-space-around", + ContentAlign::Start => "flex__align-start", + ContentAlign::End => "flex__align-end", + ContentAlign::Center => "flex__align-center", + ContentAlign::Stretch => "flex__align-stretch", + ContentAlign::SpaceBetween => "flex__align-space-between", + ContentAlign::SpaceAround => "flex__align-space-around", }) } } @@ -111,12 +111,12 @@ impl ToString for ContentJustify { fn to_string(&self) -> String { String::from(match self { ContentJustify::Default => "", - ContentJustify::Start => "pt-flex__justify-start", - ContentJustify::End => "pt-flex__justify-end", - ContentJustify::Center => "pt-flex__justify-center", - ContentJustify::SpaceBetween => "pt-flex__justify-space-between", - ContentJustify::SpaceAround => "pt-flex__justify-space-around", - ContentJustify::SpaceEvenly => "pt-flex__justify-space-evenly", + ContentJustify::Start => "flex__justify-start", + ContentJustify::End => "flex__justify-end", + ContentJustify::Center => "flex__justify-center", + ContentJustify::SpaceBetween => "flex__justify-space-between", + ContentJustify::SpaceAround => "flex__justify-space-around", + ContentJustify::SpaceEvenly => "flex__justify-space-evenly", }) } } @@ -139,11 +139,11 @@ impl ToString for ItemAlign { fn to_string(&self) -> String { String::from(match self { ItemAlign::Default => "", - ItemAlign::Top => "pt-flex__item-top", - ItemAlign::Bottom => "pt-flex__item-bottom", - ItemAlign::Middle => "pt-flex__item-middle", - ItemAlign::Stretch => "pt-flex__item-stretch", - ItemAlign::Baseline => "pt-flex__item-baseline", + ItemAlign::Top => "flex-item__top", + ItemAlign::Bottom => "flex-item__bottom", + ItemAlign::Middle => "flex-item__middle", + ItemAlign::Stretch => "flex-item__stretch", + ItemAlign::Baseline => "flex-item__baseline", }) } } @@ -195,15 +195,15 @@ impl ToString for ItemGrow { fn to_string(&self) -> String { String::from(match self { ItemGrow::Default => "", - ItemGrow::Is1 => "pt-flex__grow-1", - ItemGrow::Is2 => "pt-flex__grow-2", - ItemGrow::Is3 => "pt-flex__grow-3", - ItemGrow::Is4 => "pt-flex__grow-4", - ItemGrow::Is5 => "pt-flex__grow-5", - ItemGrow::Is6 => "pt-flex__grow-6", - ItemGrow::Is7 => "pt-flex__grow-7", - ItemGrow::Is8 => "pt-flex__grow-8", - ItemGrow::Is9 => "pt-flex__grow-9", + ItemGrow::Is1 => "flex-item__grow-1", + ItemGrow::Is2 => "flex-item__grow-2", + ItemGrow::Is3 => "flex-item__grow-3", + ItemGrow::Is4 => "flex-item__grow-4", + ItemGrow::Is5 => "flex-item__grow-5", + ItemGrow::Is6 => "flex-item__grow-6", + ItemGrow::Is7 => "flex-item__grow-7", + ItemGrow::Is8 => "flex-item__grow-8", + ItemGrow::Is9 => "flex-item__grow-9", }) } } @@ -230,15 +230,15 @@ impl ToString for ItemShrink { fn to_string(&self) -> String { String::from(match self { ItemShrink::Default => "", - ItemShrink::Is1 => "pt-flex__shrink-1", - ItemShrink::Is2 => "pt-flex__shrink-2", - ItemShrink::Is3 => "pt-flex__shrink-3", - ItemShrink::Is4 => "pt-flex__shrink-4", - ItemShrink::Is5 => "pt-flex__shrink-5", - ItemShrink::Is6 => "pt-flex__shrink-6", - ItemShrink::Is7 => "pt-flex__shrink-7", - ItemShrink::Is8 => "pt-flex__shrink-8", - ItemShrink::Is9 => "pt-flex__shrink-9", + ItemShrink::Is1 => "flex-item__shrink-1", + ItemShrink::Is2 => "flex-item__shrink-2", + ItemShrink::Is3 => "flex-item__shrink-3", + ItemShrink::Is4 => "flex-item__shrink-4", + ItemShrink::Is5 => "flex-item__shrink-5", + ItemShrink::Is6 => "flex-item__shrink-6", + ItemShrink::Is7 => "flex-item__shrink-7", + ItemShrink::Is8 => "flex-item__shrink-8", + ItemShrink::Is9 => "flex-item__shrink-9", }) } } @@ -267,17 +267,17 @@ impl ToString for ItemSize { fn to_string(&self) -> String { String::from(match self { ItemSize::Default => "", - ItemSize::Percent10 => "pt-flex__width-10", - ItemSize::Percent20 => "pt-flex__width-20", - ItemSize::Percent25 => "pt-flex__width-25", - ItemSize::Percent33 => "pt-flex__width-33", - ItemSize::Percent40 => "pt-flex__width-40", - ItemSize::Percent50 => "pt-flex__width-50", - ItemSize::Percent60 => "pt-flex__width-60", - ItemSize::Percent66 => "pt-flex__width-66", - ItemSize::Percent75 => "pt-flex__width-75", - ItemSize::Percent80 => "pt-flex__width-80", - ItemSize::Percent90 => "pt-flex__width-90", + ItemSize::Percent10 => "flex-item__width-10", + ItemSize::Percent20 => "flex-item__width-20", + ItemSize::Percent25 => "flex-item__width-25", + ItemSize::Percent33 => "flex-item__width-33", + ItemSize::Percent40 => "flex-item__width-40", + ItemSize::Percent50 => "flex-item__width-50", + ItemSize::Percent60 => "flex-item__width-60", + ItemSize::Percent66 => "flex-item__width-66", + ItemSize::Percent75 => "flex-item__width-75", + ItemSize::Percent80 => "flex-item__width-80", + ItemSize::Percent90 => "flex-item__width-90", }) } } @@ -306,17 +306,17 @@ impl ToString for ItemOffset { fn to_string(&self) -> String { String::from(match self { ItemOffset::Default => "", - ItemOffset::Offset10 => "pt-flex__offset-10", - ItemOffset::Offset20 => "pt-flex__offset-20", - ItemOffset::Offset25 => "pt-flex__offset-25", - ItemOffset::Offset33 => "pt-flex__offset-33", - ItemOffset::Offset40 => "pt-flex__offset-40", - ItemOffset::Offset50 => "pt-flex__offset-50", - ItemOffset::Offset60 => "pt-flex__offset-60", - ItemOffset::Offset66 => "pt-flex__offset-66", - ItemOffset::Offset75 => "pt-flex__offset-75", - ItemOffset::Offset80 => "pt-flex__offset-80", - ItemOffset::Offset90 => "pt-flex__offset-90", + ItemOffset::Offset10 => "flex-item__offset-10", + ItemOffset::Offset20 => "flex-item__offset-20", + ItemOffset::Offset25 => "flex-item__offset-25", + ItemOffset::Offset33 => "flex-item__offset-33", + ItemOffset::Offset40 => "flex-item__offset-40", + ItemOffset::Offset50 => "flex-item__offset-50", + ItemOffset::Offset60 => "flex-item__offset-60", + ItemOffset::Offset66 => "flex-item__offset-66", + ItemOffset::Offset75 => "flex-item__offset-75", + ItemOffset::Offset80 => "flex-item__offset-80", + ItemOffset::Offset90 => "flex-item__offset-90", }) } } diff --git a/src/base/component/flex/item.rs b/src/base/component/flex/item.rs index 2b2c0bae..54a26e29 100644 --- a/src/base/component/flex/item.rs +++ b/src/base/component/flex/item.rs @@ -35,7 +35,7 @@ impl ComponentTrait for Item { fn setup_before_prepare(&mut self, _cx: &mut Context) { self.prepend_classes( [ - "pt-flex__item".to_owned(), + "flex-item__container".to_owned(), self.grow().to_string(), self.shrink().to_string(), self.size().to_string(), @@ -53,7 +53,7 @@ impl ComponentTrait for Item { }; PrepareMarkup::With(html! { div id=[self.id()] class=[self.classes().get()] style=[order] { - div class="inner" { + div class="flex-item__inner" { (self.components().render(cx)) } } diff --git a/src/base/component/heading.rs b/src/base/component/heading.rs index 3dfa4392..bb62ee57 100644 --- a/src/base/component/heading.rs +++ b/src/base/component/heading.rs @@ -27,13 +27,13 @@ pub enum HeadingSize { impl ToString for HeadingSize { fn to_string(&self) -> String { String::from(match self { - HeadingSize::ExtraLarge => "pt-heading__title-x3l", - HeadingSize::XxLarge => "pt-heading__title-x2l", - HeadingSize::XLarge => "pt-heading__title-xl", - HeadingSize::Large => "pt-heading__title-l", - HeadingSize::Medium => "pt-heading__title-m", + HeadingSize::ExtraLarge => "heading__title-x3l", + HeadingSize::XxLarge => "heading__title-x2l", + HeadingSize::XLarge => "heading__title-xl", + HeadingSize::Large => "heading__title-l", + HeadingSize::Medium => "heading__title-m", HeadingSize::Normal => "", - HeadingSize::Subtitle => "pt-heading__subtitle", + HeadingSize::Subtitle => "heading__subtitle", }) } } diff --git a/src/base/component/image.rs b/src/base/component/image.rs index 53a8051e..f073616a 100644 --- a/src/base/component/image.rs +++ b/src/base/component/image.rs @@ -1,7 +1,7 @@ use crate::prelude::*; -const IMG_FLUID: &str = "pt-img__fluid"; -const IMG_FIXED: &str = "pt-img__fixed"; +const IMG_FLUID: &str = "img__fluid"; +const IMG_FIXED: &str = "img__fixed"; #[derive(AutoDefault)] pub enum ImageSize { diff --git a/src/base/component/menu/item.rs b/src/base/component/menu/item.rs index dbe7045d..94c0b951 100644 --- a/src/base/component/menu/item.rs +++ b/src/base/component/menu/item.rs @@ -54,7 +54,7 @@ impl ComponentTrait for Item { match self.item_type() { ItemType::Void => PrepareMarkup::None, ItemType::Label(label) => PrepareMarkup::With(html! { - li class="pt-menu__label" { + li class="menu__label" { span title=[description] { (left_icon) (label.escaped(cx.langid())) @@ -63,7 +63,7 @@ impl ComponentTrait for Item { } }), ItemType::Link(label, path) => PrepareMarkup::With(html! { - li class="pt-menu__link" { + li class="menu__link" { a href=(path(cx)) title=[description] { (left_icon) (label.escaped(cx.langid())) @@ -72,7 +72,7 @@ impl ComponentTrait for Item { } }), ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! { - li class="pt-menu__link" { + li class="menu__link" { a href=(path(cx)) title=[description] target="_blank" { (left_icon) (label.escaped(cx.langid())) @@ -81,28 +81,28 @@ impl ComponentTrait for Item { } }), ItemType::Html(content) => PrepareMarkup::With(html! { - li class="pt-menu__html" { + li class="menu__html" { (content.render(cx)) } }), ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! { - li class="pt-menu__children" { + li class="menu__children" { a href="#" title=[description] { (left_icon) - (label.escaped(cx.langid())) i class="pt-menu__icon bi-chevron-down" {} + (label.escaped(cx.langid())) i class="menu__icon bi-chevron-down" {} } - div class="pt-menu__subs" { + div class="menu__subs" { (submenu.render(cx)) } } }), ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! { - li class="pt-menu__children" { + li class="menu__children" { a href="#" title=[description] { (left_icon) - (label.escaped(cx.langid())) i class="pt-menu__icon bi-chevron-down" {} + (label.escaped(cx.langid())) i class="menu__icon bi-chevron-down" {} } - div class="pt-menu__subs pt-menu__mega" { + div class="menu__subs menu__mega" { (megamenu.render(cx)) } } diff --git a/src/base/component/menu/megamenu.rs b/src/base/component/menu/megamenu.rs index 5fba4cb0..51453974 100644 --- a/src/base/component/menu/megamenu.rs +++ b/src/base/component/menu/megamenu.rs @@ -30,7 +30,7 @@ impl ComponentTrait for Megamenu { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { PrepareMarkup::With(html! { - div id=[self.id()] class="pt-menu__groups" { + div id=[self.id()] class="menu__groups" { (self.groups().render(cx)) } }) diff --git a/src/base/component/menu/menu_main.rs b/src/base/component/menu/menu_main.rs index eecb3bfb..24b49675 100644 --- a/src/base/component/menu/menu_main.rs +++ b/src/base/component/menu/menu_main.rs @@ -33,28 +33,28 @@ impl ComponentTrait for Menu { cx.set_param::(PARAM_BASE_INCLUDE_ICONS, true); PrepareMarkup::With(html! { - 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" { + div id=[self.id()] class="menu__container" { + div class="menu__inner" { + div class="menu__main" { + div class="menu__overlay" {} + nav class="menu__nav" { + div class="menu__header" { + button type="button" class="menu__arrow" { i class="bi-chevron-left" {} } - div class="pt-menu__title" {} - button type="button" class="pt-menu__close" { + div class="menu__title" {} + button type="button" class="menu__close" { i class="bi-x" {} } } - ul class="pt-menu__section" { + ul class="menu__section" { (self.items().render(cx)) } } } button type="button" - class="pt-menu__trigger" + class="menu__trigger" title=[L10n::l("menu_toggle").using(cx.langid())] { span {} span {} span {} diff --git a/src/base/component/menu/submenu.rs b/src/base/component/menu/submenu.rs index 1605a8de..0f1328da 100644 --- a/src/base/component/menu/submenu.rs +++ b/src/base/component/menu/submenu.rs @@ -31,9 +31,9 @@ impl ComponentTrait for Submenu { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { PrepareMarkup::With(html! { - div id=[self.id()] class="pt-menu__items" { + div id=[self.id()] class="menu__items" { @if let Some(title) = self.title().using(cx.langid()) { - h4 class="pt-menu__title" { (title) } + h4 class="menu__title" { (title) } } ul { (self.items().render(cx)) diff --git a/src/base/component/powered_by.rs b/src/base/component/powered_by.rs index 0decd407..8bca4580 100644 --- a/src/base/component/powered_by.rs +++ b/src/base/component/powered_by.rs @@ -29,10 +29,6 @@ impl ComponentTrait for PoweredBy { } } - fn id(&self) -> Option { - Some("pt-poweredby".to_owned()) - } - fn weight(&self) -> Weight { self.weight } @@ -58,11 +54,11 @@ impl ComponentTrait for PoweredBy { }; PrepareMarkup::With(html! { - div id=[self.id()] { + div id=[self.id()] class="poweredby__container" { @if let Some(c) = self.copyright() { - span class="pt-poweredby__copyright" { (c) "." } " " + span class="poweredby__copyright" { (c) "." } " " } - span class="pt-poweredby__pagetop" { (poweredby_pagetop) " " (pagetop_logo) } + span class="poweredby__pagetop" { (poweredby_pagetop) " " (pagetop_logo) } } }) } @@ -110,7 +106,7 @@ impl PoweredBy { fn logo_color(&self, cx: &mut Context) -> Markup { let logo_txt = &L10n::l("pagetop_logo").using(cx.langid()); html! { - span class="pt-poweredby__logo" aria-label=[logo_txt] { + span class="poweredby__logo" aria-label=[logo_txt] { img src="/base/pagetop-logo.svg" alt=[logo_txt] {} } } @@ -120,7 +116,7 @@ impl PoweredBy { let logo_txt = L10n::l("pagetop_logo").using(cx.langid()); let logo_rgb = format!("rgb({},{},{})", r, g, b); html! { - span class="pt-poweredby__logo" aria-label=[logo_txt] { + span class="poweredby__logo" aria-label=[logo_txt] { svg viewBox="0 0 1614 1614" xmlns="http://www.w3.org/2000/svg" role="img" { path fill=(logo_rgb) d="M 1573,357 L 1415,357 C 1400,357 1388,369 1388,383 L 1388,410 1335,410 1335,357 C 1335,167 1181,13 992,13 L 621,13 C 432,13 278,167 278,357 L 278,410 225,410 225,383 C 225,369 213,357 198,357 L 40,357 C 25,357 13,369 13,383 L 13,648 C 13,662 25,674 40,674 L 198,674 C 213,674 225,662 225,648 L 225,621 278,621 278,1256 C 278,1446 432,1600 621,1600 L 992,1600 C 1181,1600 1335,1446 1335,1256 L 1335,621 1388,621 1388,648 C 1388,662 1400,674 1415,674 L 1573,674 C 1588,674 1600,662 1600,648 L 1600,383 C 1600,369 1588,357 1573,357 L 1573,357 1573,357 Z M 66,410 L 172,410 172,621 66,621 66,410 66,410 Z M 1282,357 L 1282,488 C 1247,485 1213,477 1181,464 L 1196,437 C 1203,425 1199,409 1186,401 1174,394 1158,398 1150,411 L 1133,440 C 1105,423 1079,401 1056,376 L 1075,361 C 1087,352 1089,335 1079,324 1070,313 1054,311 1042,320 L 1023,335 C 1000,301 981,263 967,221 L 1011,196 C 1023,189 1028,172 1021,160 1013,147 997,143 984,150 L 953,168 C 945,136 941,102 940,66 L 992,66 C 1152,66 1282,197 1282,357 L 1282,357 1282,357 Z M 621,66 L 674,66 674,225 648,225 C 633,225 621,237 621,251 621,266 633,278 648,278 L 674,278 674,357 648,357 C 633,357 621,369 621,383 621,398 633,410 648,410 L 674,410 674,489 648,489 C 633,489 621,501 621,516 621,530 633,542 648,542 L 664,542 C 651,582 626,623 600,662 583,653 563,648 542,648 469,648 410,707 410,780 410,787 411,794 412,801 388,805 361,806 331,806 L 331,357 C 331,197 461,66 621,66 L 621,66 621,66 Z M 621,780 C 621,824 586,859 542,859 498,859 463,824 463,780 463,736 498,701 542,701 586,701 621,736 621,780 L 621,780 621,780 Z M 225,463 L 278,463 278,569 225,569 225,463 225,463 Z M 992,1547 L 621,1547 C 461,1547 331,1416 331,1256 L 331,859 C 367,859 400,858 431,851 454,888 495,912 542,912 615,912 674,853 674,780 674,747 662,718 642,695 675,645 706,594 720,542 L 780,542 C 795,542 807,530 807,516 807,501 795,489 780,489 L 727,489 727,410 780,410 C 795,410 807,398 807,383 807,369 795,357 780,357 L 727,357 727,278 780,278 C 795,278 807,266 807,251 807,237 795,225 780,225 L 727,225 727,66 887,66 C 889,111 895,155 905,196 L 869,217 C 856,224 852,240 859,253 864,261 873,266 882,266 887,266 891,265 895,263 L 921,248 C 937,291 958,331 983,367 L 938,403 C 926,412 925,429 934,440 939,447 947,450 954,450 960,450 966,448 971,444 L 1016,408 C 1043,438 1074,465 1108,485 L 1084,527 C 1076,539 1081,555 1093,563 1098,565 1102,566 1107,566 1116,566 1125,561 1129,553 L 1155,509 C 1194,527 1237,538 1282,541 L 1282,1256 C 1282,1416 1152,1547 992,1547 L 992,1547 992,1547 Z M 1335,463 L 1388,463 1388,569 1335,569 1335,463 1335,463 Z M 1441,410 L 1547,410 1547,621 1441,621 1441,410 1441,410 Z" {} path fill=(logo_rgb) d="M 1150,1018 L 463,1018 C 448,1018 436,1030 436,1044 L 436,1177 C 436,1348 545,1468 701,1468 L 912,1468 C 1068,1468 1177,1348 1177,1177 L 1177,1044 C 1177,1030 1165,1018 1150,1018 L 1150,1018 1150,1018 Z M 912,1071 L 1018,1071 1018,1124 912,1124 912,1071 912,1071 Z M 489,1071 L 542,1071 542,1124 489,1124 489,1071 489,1071 Z M 701,1415 L 700,1415 C 701,1385 704,1352 718,1343 731,1335 759,1341 795,1359 802,1363 811,1363 818,1359 854,1341 882,1335 895,1343 909,1352 912,1385 913,1415 L 912,1415 701,1415 701,1415 701,1415 Z M 1124,1177 C 1124,1296 1061,1384 966,1408 964,1365 958,1320 922,1298 894,1281 856,1283 807,1306 757,1283 719,1281 691,1298 655,1320 649,1365 647,1408 552,1384 489,1296 489,1177 L 569,1177 C 583,1177 595,1165 595,1150 L 595,1071 859,1071 859,1150 C 859,1165 871,1177 886,1177 L 1044,1177 C 1059,1177 1071,1165 1071,1150 L 1071,1071 1124,1071 1124,1177 1124,1177 1124,1177 Z" {} diff --git a/src/base/component/wrapper.rs b/src/base/component/wrapper.rs index 3e39f782..54c73f12 100644 --- a/src/base/component/wrapper.rs +++ b/src/base/component/wrapper.rs @@ -23,7 +23,7 @@ pub struct Wrapper { impl ComponentTrait for Wrapper { fn new() -> Self { - Wrapper::default().with_classes(ClassesOp::Add, "pt-wrapper") + Wrapper::default().with_classes(ClassesOp::Add, "wrapper__container") } fn id(&self) -> Option { @@ -42,35 +42,35 @@ impl ComponentTrait for Wrapper { match self.wrapper_type() { WrapperType::Container => PrepareMarkup::With(html! { div id=[self.id()] class=[self.classes().get()] { - div class="inner" { + div class="wrapper__inner" { (self.components().render(cx)) } } }), WrapperType::Main => PrepareMarkup::With(html! { main id=[self.id()] class=[self.classes().get()] { - div class="inner" { + div class="wrapper__inner" { (self.components().render(cx)) } } }), WrapperType::Section => PrepareMarkup::With(html! { section id=[self.id()] class=[self.classes().get()] { - div class="inner" { + div class="wrapper__inner" { (self.components().render(cx)) } } }), WrapperType::Header => PrepareMarkup::With(html! { header id=[self.id()] class=[self.classes().get()] { - div class="inner" { + div class="wrapper__inner" { (self.components().render(cx)) } } }), WrapperType::Footer => PrepareMarkup::With(html! { footer id=[self.id()] class=[self.classes().get()] { - div class="inner" { + div class="wrapper__inner" { (self.components().render(cx)) } } @@ -81,25 +81,25 @@ impl ComponentTrait for Wrapper { impl Wrapper { pub fn main() -> Self { - let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-main"); + let mut c = Wrapper::default().with_classes(ClassesOp::Add, "main__container"); c.wrapper_type = WrapperType::Main; c } pub fn section() -> Self { - let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-section"); + let mut c = Wrapper::default().with_classes(ClassesOp::Add, "section__container"); c.wrapper_type = WrapperType::Section; c } pub fn header() -> Self { - let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-header"); + let mut c = Wrapper::default().with_classes(ClassesOp::Add, "header__container"); c.wrapper_type = WrapperType::Header; c } pub fn footer() -> Self { - let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-footer"); + let mut c = Wrapper::default().with_classes(ClassesOp::Add, "footer__container"); c.wrapper_type = WrapperType::Footer; c } diff --git a/src/core/theme/definition.rs b/src/core/theme/definition.rs index ab467fb1..80c910bc 100644 --- a/src/core/theme/definition.rs +++ b/src/core/theme/definition.rs @@ -26,8 +26,8 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { html! {} } else { html! { - div id=[OptionId::new(region_name).get()] class="pt-region" { - div class="pt-region__inner" { + div id=[OptionId::new(region_name).get()] class="region__container" { + div class="region__inner" { (render_region) } } @@ -44,16 +44,16 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { html! { body id=[page.body_id().get()] class=[page.body_classes().get()] { @if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { - div class="pt-body__skip" { + div class="skip__to_content" { a href=(skip_to) { (skip) } } } - div class="pt-body__wrapper" { - div class="pt-body__regions" { + div class="body__container" { + div class="body__inner" { (self.prepare_region(page, "header")) (self.prepare_region(page, "pagetop")) - div class="pt-content" { - div class="pt-content__inner" { + div class="content__container" { + div class="content__inner" { (self.prepare_region(page, "content")) (self.prepare_region(page, "sidebar")) } diff --git a/static/base/css/basic.css b/static/base/css/basic.css index 06a9d968..caccc2c9 100644 --- a/static/base/css/basic.css +++ b/static/base/css/basic.css @@ -1,3 +1,3 @@ -.pt-body__skip { +.skip__to_content { display: none; } diff --git a/static/base/css/buttons.css b/static/base/css/buttons.css index 14ac801a..88b07bee 100644 --- a/static/base/css/buttons.css +++ b/static/base/css/buttons.css @@ -1,115 +1,115 @@ -[class^="pt-button"] { +[class^="button__"] { cursor: pointer; text-align: center; display: inline-block; - color: var(--pt-color--white); + color: var(--val-color--white); background-color: transparent; text-decoration: none; border: 1px solid transparent; - border-radius: var(--pt-border-radius); - padding: var(--pt-gap-0-35) var(--pt-gap-0-75); + border-radius: var(--val-border-radius); + padding: var(--val-gap-0-35) var(--val-gap-0-75); transition: background-color .15s ease-in-out; white-space: nowrap; user-select: none; } -[class^="pt-button"] > span { - margin: 0 var(--pt-gap-0-15); +[class^="button__"] > span { + margin: 0 var(--val-gap-0-15); } -.pt-button__default { - background-color: var(--pt-color--default); +.button__default { + background-color: var(--val-color--default); } -.pt-button__default:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--default-dark); +.button__default:hover { + color: var(--val-color--white); + background-color: var(--val-color--default-dark); } -.pt-button__default:active, -.pt-button__default:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--default-light); +.button__default:active, +.button__default:disabled { + color: var(--val-color--white); + background-color: var(--val-color--default-light); } -.pt-button__info { - background-color: var(--pt-color--info); +.button__info { + background-color: var(--val-color--info); } -.pt-button__info:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--info-dark); +.button__info:hover { + color: var(--val-color--white); + background-color: var(--val-color--info-dark); } -.pt-button__info:active, -.pt-button__info:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--info-light); +.button__info:active, +.button__info:disabled { + color: var(--val-color--white); + background-color: var(--val-color--info-light); } -.pt-button__success { - background-color: var(--pt-color--success); +.button__success { + background-color: var(--val-color--success); } -.pt-button__success:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--success-dark); +.button__success:hover { + color: var(--val-color--white); + background-color: var(--val-color--success-dark); } -.pt-button__success:active, -.pt-button__success:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--success-light); +.button__success:active, +.button__success:disabled { + color: var(--val-color--white); + background-color: var(--val-color--success-light); } -.pt-button__warning { - background-color: var(--pt-color--warning); +.button__warning { + background-color: var(--val-color--warning); } -.pt-button__warning:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--warning-dark); +.button__warning:hover { + color: var(--val-color--white); + background-color: var(--val-color--warning-dark); } -.pt-button__warning:active, -.pt-button__warning:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--warning-light); +.button__warning:active, +.button__warning:disabled { + color: var(--val-color--white); + background-color: var(--val-color--warning-light); } -.pt-button__danger { - background-color: var(--pt-color--danger); +.button__danger { + background-color: var(--val-color--danger); } -.pt-button__danger:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--danger-dark); +.button__danger:hover { + color: var(--val-color--white); + background-color: var(--val-color--danger-dark); } -.pt-button__danger:active, -.pt-button__danger:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--danger-light); +.button__danger:active, +.button__danger:disabled { + color: var(--val-color--white); + background-color: var(--val-color--danger-light); } -.pt-button__light { - color: var(--pt-color--text); - background-color: var(--pt-color--light); +.button__light { + color: var(--val-color--text); + background-color: var(--val-color--light); } -.pt-button__light:hover { - color: var(--pt-color--text); - background-color: var(--pt-color--light-dark); +.button__light:hover { + color: var(--val-color--text); + background-color: var(--val-color--light-dark); } -.pt-button__light:active, -.pt-button__light:disabled { - color: var(--pt-color--text); - background-color: var(--pt-color--light-light); +.button__light:active, +.button__light:disabled { + color: var(--val-color--text); + background-color: var(--val-color--light-light); } -.pt-button__dark { - background-color: var(--pt-color--dark); +.button__dark { + background-color: var(--val-color--dark); } -.pt-button__dark:hover { - color: var(--pt-color--white); - background-color: var(--pt-color--dark-dark); +.button__dark:hover { + color: var(--val-color--white); + background-color: var(--val-color--dark-dark); } -.pt-button__dark:active, -.pt-button__dark:disabled { - color: var(--pt-color--white); - background-color: var(--pt-color--dark-light); +.button__dark:active, +.button__dark:disabled { + color: var(--val-color--white); + background-color: var(--val-color--dark-light); } -.pt-button__link { - color: var(--pt-color--default); +.button__link { + color: var(--val-color--default); } /* @@ -600,93 +600,93 @@ } */ /* -.pt-button__default[disabled],fieldset[disabled] .pt-button__default { +.button__default[disabled],fieldset[disabled] .button__default { background-color: #00d1b2; border-color: #00d1b2; box-shadow: none } -.pt-button__default.is-inverted { +.button__default.is-inverted { background-color: #fff; color: #00d1b2 } -.pt-button__default.is-inverted.is-hovered,.pt-button__default.is-inverted:hover { +.button__default.is-inverted.is-hovered,.button__default.is-inverted:hover { background-color: #f2f2f2 } -.pt-button__default.is-inverted[disabled],fieldset[disabled] .pt-button__default.is-inverted { +.button__default.is-inverted[disabled],fieldset[disabled] .button__default.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #00d1b2 } -.pt-button__default.is-loading::after { +.button__default.is-loading::after { border-color: transparent transparent #fff #fff!important } -.pt-button__default.is-outlined { +.button__default.is-outlined { background-color: transparent; border-color: #00d1b2; color: #00d1b2 } -.pt-button__default.is-outlined.is-focused,.pt-button__default.is-outlined.is-hovered,.pt-button__default.is-outlined:focus,.pt-button__default.is-outlined:hover { +.button__default.is-outlined.is-focused,.button__default.is-outlined.is-hovered,.button__default.is-outlined:focus,.button__default.is-outlined:hover { background-color: #00d1b2; border-color: #00d1b2; color: #fff } -.pt-button__default.is-outlined.is-loading::after { +.button__default.is-outlined.is-loading::after { border-color: transparent transparent #00d1b2 #00d1b2!important } -.pt-button__default.is-outlined.is-loading.is-focused::after,.pt-button__default.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-outlined.is-loading:focus::after,.pt-button__default.is-outlined.is-loading:hover::after { +.button__default.is-outlined.is-loading.is-focused::after,.button__default.is-outlined.is-loading.is-hovered::after,.button__default.is-outlined.is-loading:focus::after,.button__default.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.pt-button__default.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-outlined { +.button__default.is-outlined[disabled],fieldset[disabled] .button__default.is-outlined { background-color: transparent; border-color: #00d1b2; box-shadow: none; color: #00d1b2 } -.pt-button__default.is-inverted.is-outlined { +.button__default.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.pt-button__default.is-inverted.is-outlined.is-focused,.pt-button__default.is-inverted.is-outlined.is-hovered,.pt-button__default.is-inverted.is-outlined:focus,.pt-button__default.is-inverted.is-outlined:hover { +.button__default.is-inverted.is-outlined.is-focused,.button__default.is-inverted.is-outlined.is-hovered,.button__default.is-inverted.is-outlined:focus,.button__default.is-inverted.is-outlined:hover { background-color: #fff; color: #00d1b2 } -.pt-button__default.is-inverted.is-outlined.is-loading.is-focused::after,.pt-button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.pt-button__default.is-inverted.is-outlined.is-loading:focus::after,.pt-button__default.is-inverted.is-outlined.is-loading:hover::after { +.button__default.is-inverted.is-outlined.is-loading.is-focused::after,.button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.button__default.is-inverted.is-outlined.is-loading:focus::after,.button__default.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #00d1b2 #00d1b2!important } -.pt-button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .pt-button__default.is-inverted.is-outlined { +.button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .button__default.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.pt-button__default.is-light { +.button__default.is-light { background-color: #ebfffc; color: #00947e } -.pt-button__default.is-light.is-hovered,.pt-button__default.is-light:hover { +.button__default.is-light.is-hovered,.button__default.is-light:hover { background-color: #defffa; border-color: transparent; color: #00947e } -.pt-button__default.is-light.is-active,.pt-button__default.is-light:active { +.button__default.is-light.is-active,.button__default.is-light:active { background-color: #d1fff8; border-color: transparent; color: #00947e diff --git a/static/base/css/flex.css b/static/base/css/flex.css index f3ddc9c4..c011e1a1 100644 --- a/static/base/css/flex.css +++ b/static/base/css/flex.css @@ -1,6 +1,6 @@ /* CONTAINERS */ -.pt-flex__container { +.flex__container { display: flex; flex-wrap: nowrap; justify-content: flex-start; @@ -9,371 +9,371 @@ width: 100%; padding: 0 !important; } -.pt-flex__row, -.pt-flex__col.pt-bp__none { +.flex__row, +.flex__col.bp__none { flex-direction: column; } -.pt-flex__row.pt-flex__reverse, -.pt-flex__col.pt-flex__reverse.pt-bp__none { +.flex__row.flex__reverse, +.flex__col.flex__reverse.bp__none { flex-direction: column-reverse; } -.pt-flex__col, -.pt-flex__row.pt-bp__none { +.flex__col, +.flex__row.bp__none { flex-direction: row; } -.pt-flex__col.pt-flex__reverse, -.pt-flex__row.pt-flex__reverse.pt-bp__none { +.flex__col.flex__reverse, +.flex__row.flex__reverse.bp__none { flex-direction: row-reverse; } -.pt-flex__wrap { +.flex__wrap { flex-wrap: wrap; align-content: flex-start; } -.pt-flex__wrap-reverse { +.flex__wrap-reverse { flex-wrap: wrap-reverse; align-content: flex-start; } -.pt-flex__align-end { +.flex__align-end { align-content: flex-end; } -.pt-flex__align-center { +.flex__align-center { align-content: center; } -.pt-flex__align-stretch { +.flex__align-stretch { align-content: stretch; } -.pt-flex__align-space-between { +.flex__align-space-between { align-content: space-between; } -.pt-flex__align-space-around { +.flex__align-space-around { align-content: space-around; } -.pt-flex__justify-end { +.flex__justify-end { justify-content: flex-end; } -.pt-flex__justify-center { +.flex__justify-center { justify-content: center; } -.pt-flex__justify-space-between { +.flex__justify-space-between { justify-content: space-between; } -.pt-flex__justify-space-around { +.flex__justify-space-around { justify-content: space-around; } -.pt-flex__justify-space-evenly { +.flex__justify-space-evenly { justify-content: space-evenly; } -.pt-flex__container.pt-flex__item-bottom { +.flex__container.flex-item__bottom { align-items: flex-end; } -.pt-flex__container.pt-flex__item-middle { +.flex__container.flex-item__middle { align-items: center; } -.pt-flex__container.pt-flex__item-stretch { +.flex__container.flex-item__stretch { align-items: stretch; } -.pt-flex__container.pt-flex__item-baseline { +.flex__container.flex-item__baseline { align-items: baseline; } /* ITEMS */ -.pt-flex__item { +.flex-item__container { padding: 0 !important; } -.pt-flex__grow-1 { +.flex-item__grow-1 { flex-grow: 1; } -.pt-flex__grow-2 { +.flex-item__grow-2 { flex-grow: 2; } -.pt-flex__grow-3 { +.flex-item__grow-3 { flex-grow: 3; } -.pt-flex__grow-4 { +.flex-item__grow-4 { flex-grow: 4; } -.pt-flex__grow-5 { +.flex-item__grow-5 { flex-grow: 5; } -.pt-flex__grow-6 { +.flex-item__grow-6 { flex-grow: 6; } -.pt-flex__grow-7 { +.flex-item__grow-7 { flex-grow: 7; } -.pt-flex__grow-8 { +.flex-item__grow-8 { flex-grow: 8; } -.pt-flex__grow-9 { +.flex-item__grow-9 { flex-grow: 9; } -.pt-flex__shrink-1 { +.flex-item__shrink-1 { flex-shrink: 1; } -.pt-flex__shrink-2 { +.flex-item__shrink-2 { flex-shrink: 2; } -.pt-flex__shrink-3 { +.flex-item__shrink-3 { flex-shrink: 3; } -.pt-flex__shrink-4 { +.flex-item__shrink-4 { flex-shrink: 4; } -.pt-flex__shrink-5 { +.flex-item__shrink-5 { flex-shrink: 5; } -.pt-flex__shrink-6 { +.flex-item__shrink-6 { flex-shrink: 6; } -.pt-flex__shrink-7 { +.flex-item__shrink-7 { flex-shrink: 7; } -.pt-flex__shrink-8 { +.flex-item__shrink-8 { flex-shrink: 8; } -.pt-flex__shrink-9 { +.flex-item__shrink-9 { flex-shrink: 9; } -.pt-flex__width-10 { +.flex-item__width-10 { flex: 0 0 10%; max-width: 10%; } -.pt-flex__width-20 { +.flex-item__width-20 { flex: 0 0 20%; max-width: 20%; } -.pt-flex__width-25 { +.flex-item__width-25 { flex: 0 0 25%; max-width: 25%; } -.pt-flex__width-33 { +.flex-item__width-33 { flex: 0 0 33.3333%; max-width: 33.3333%; } -.pt-flex__width-40 { +.flex-item__width-40 { flex: 0 0 40%; max-width: 40%; } -.pt-flex__width-50 { +.flex-item__width-50 { flex: 0 0 60%; max-width: 50%; } -.pt-flex__width-60 { +.flex-item__width-60 { flex: 0 0 60%; max-width: 60%; } -.pt-flex__width-66 { +.flex-item__width-66 { flex: 0 0 66.6666%; max-width: 66.6666%; } -.pt-flex__width-75 { +.flex-item__width-75 { flex: 0 0 75%; max-width: 75%; } -.pt-flex__width-80 { +.flex-item__width-80 { flex: 0 0 80%; max-width: 80%; } -.pt-flex__width-90 { +.flex-item__width-90 { flex: 0 0 90%; max-width: 90%; } -.pt-flex__offset-10 { +.flex-item__offset-10 { margin-left: 10%; } -.pt-flex__offset-20 { +.flex-item__offset-20 { margin-left: 20%; } -.pt-flex__offset-25 { +.flex-item__offset-25 { margin-left: 25%; } -.pt-flex__offset-33 { +.flex-item__offset-33 { margin-left: 33.3333%; } -.pt-flex__offset-40 { +.flex-item__offset-40 { margin-left: 40%; } -.pt-flex__offset-50 { +.flex-item__offset-50 { margin-left: 50%; } -.pt-flex__offset-60 { +.flex-item__offset-60 { margin-left: 60%; } -.pt-flex__offset-66 { +.flex-item__offset-66 { margin-left: 66.6666%; } -.pt-flex__offset-75 { +.flex-item__offset-75 { margin-left: 75%; } -.pt-flex__offset-80 { +.flex-item__offset-80 { margin-left: 80%; } -.pt-flex__offset-90 { +.flex-item__offset-90 { margin-left: 90%; } -.pt-flex__item.pt-flex__item-top { +.flex-item__container.flex-item__top { align-self: flex-start; } -.pt-flex__item.pt-flex__item-bottom { +.flex-item__container.flex-item__bottom { align-self: flex-end; } -.pt-flex__item.pt-flex__item-middle { +.flex-item__container.flex-item__middle { align-self: center; } -.pt-flex__item.pt-flex__item-stretch { +.flex-item__container.flex-item__stretch { align-self: stretch; } -.pt-flex__item.pt-flex__item-baseline { +.flex-item__container.flex-item__baseline { align-self: baseline; } /* BREAKPOINTS */ /* SM - Applies <= 568px */ -@media screen and (max-width: 35.5em) { - .pt-flex__row.pt-bp__sm { +@media screen and (max-width: 35.5rem) { + .flex__row.bp__sm { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__sm { + .flex__row.flex__reverse.bp__sm { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__sm { + .flex__col.bp__sm { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__sm { + .flex__col.flex__reverse.bp__sm { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__sm .pt-flex__item { + .flex__col.bp__sm .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* MD - Applies <= 768px */ -@media screen and (max-width: 48em) { - .pt-flex__row.pt-bp__md { +@media screen and (max-width: 48rem) { + .flex__row.bp__md { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__md { + .flex__row.flex__reverse.bp__md { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__md { + .flex__col.bp__md { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__md { + .flex__col.flex__reverse.bp__md { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__md .pt-flex__item { + .flex__col.bp__md .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* LG - Applies <= 992px */ -@media screen and (max-width: 62em) { - .pt-flex__row.pt-bp__lg { +@media screen and (max-width: 62rem) { + .flex__row.bp__lg { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__lg { + .flex__row.flex__reverse.bp__lg { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__lg { + .flex__col.bp__lg { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__lg { + .flex__col.flex__reverse.bp__lg { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__lg .pt-flex__item { + .flex__col.bp__lg .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* XL - Applies <= 1280px */ -@media screen and (max-width: 80em) { - .pt-flex__row.pt-bp__xl { +@media screen and (max-width: 80rem) { + .flex__row.bp__xl { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__xl { + .flex__row.flex__reverse.bp__xl { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__xl { + .flex__col.bp__xl { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__xl { + .flex__col.flex__reverse.bp__xl { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__xl .pt-flex__item { + .flex__col.bp__xl .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* X2L - Applies <= 1440px */ -@media screen and (max-width: 90em) { - .pt-flex__row.pt-bp__x2l { +@media screen and (max-width: 90rem) { + .flex__row.bp__x2l { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__x2l { + .flex__row.flex__reverse.bp__x2l { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__x2l { + .flex__col.bp__x2l { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__x2l { + .flex__col.flex__reverse.bp__x2l { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__x2l .pt-flex__item { + .flex__col.bp__x2l .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* X3L - Applies <= 1920px */ -@media screen and (max-width: 120em) { - .pt-flex__row.pt-bp__x3l { +@media screen and (max-width: 120rem) { + .flex__row.bp__x3l { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__x3l { + .flex__row.flex__reverse.bp__x3l { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__x3l { + .flex__col.bp__x3l { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__x3l { + .flex__col.flex__reverse.bp__x3l { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__x3l .pt-flex__item { + .flex__col.bp__x3l .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; } } /* X2K - Applies <= 2560px */ -@media screen and (max-width: 120em) { - .pt-flex__row.pt-bp__x2k { +@media screen and (max-width: 120rem) { + .flex__row.bp__x2k { flex-direction: row; } - .pt-flex__row.pt-flex__reverse.pt-bp__x2k { + .flex__row.flex__reverse.bp__x2k { flex-direction: row-reverse; } - .pt-flex__col.pt-bp__x2k { + .flex__col.bp__x2k { flex-direction: column; } - .pt-flex__col.pt-flex__reverse.pt-bp__x2k { + .flex__col.flex__reverse.bp__x2k { flex-direction: column-reverse; } - .pt-flex__col.pt-bp__x2k .pt-flex__item { + .flex__col.bp__x2k .flex-item__container { flex: 1 1 auto; max-width: 100%; margin-left: 0; diff --git a/static/base/css/inception.css b/static/base/css/inception.css index 15a929da..1535bf05 100644 --- a/static/base/css/inception.css +++ b/static/base/css/inception.css @@ -4,12 +4,12 @@ html { body { margin: 0; - font-family: var(--pt-font-family); - font-size: var(--pt-fs--base); - font-weight: var(--pt-fw--base); - line-height: var(--pt-lh--base); - color: var(--pt-color--text); - background-color: var(--pt-color--bg); + font-family: var(--val-font-family); + font-size: var(--val-fs--base); + font-weight: var(--val-fw--base); + line-height: var(--val-lh--base); + color: var(--val-color--text); + background-color: var(--val-color--bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } @@ -18,84 +18,84 @@ body { h1, h2, h3, h4, h5, h6 { margin-top: 0; - margin-bottom: var(--pt-gap-0-35); - font-weight: var(--pt-fw--bold); - line-height: var(--pt-lh--header); + margin-bottom: var(--val-gap-0-35); + font-weight: var(--val-fw--bold); + line-height: var(--val-lh--header); } h1 { - font-size: var(--pt-fs--x3l); + font-size: var(--val-fs--x3l); } h2 { - font-size: var(--pt-fs--x2l); + font-size: var(--val-fs--x2l); } h3 { - font-size: var(--pt-fs--xl); + font-size: var(--val-fs--xl); } h4 { - font-size: var(--pt-fs--l); + font-size: var(--val-fs--l); } h5 { - font-size: var(--pt-fs--m); + font-size: var(--val-fs--m); } h6 { - font-size: var(--pt-fs--base); + font-size: var(--val-fs--base); } /* LG - Applies <= 992px */ -@media screen and (max-width: 62em) { +@media screen and (max-width: 62rem) { h1 { - font-size: calc(var(--pt-fs--l) + 1.25vw); + font-size: calc(var(--val-fs--l) + 1.25vw); } h2 { - font-size: calc(var(--pt-fs--l) + 0.6vw); + font-size: calc(var(--val-fs--l) + 0.6vw); } h3 { - font-size: calc(var(--pt-fs--m) + 0.6vw); + font-size: calc(var(--val-fs--m) + 0.6vw); } h4 { - font-size: calc(var(--pt-fs--m) + 0.3vw); + font-size: calc(var(--val-fs--m) + 0.3vw); } } p { margin-top: 0; - margin-bottom: var(--pt-gap-0-75); + margin-bottom: var(--val-gap-0-75); } a { - color: var(--pt-color--default); + color: var(--val-color--default); transition: color .15s ease-in-out; } a:hover { - color: var(--pt-color--default-dark); + color: var(--val-color--default-dark); } a:active { - color: var(--pt-color--default-light); + color: var(--val-color--default-light); } /* LAYOUT */ -#header > .pt-region__inner, -.pt-content__inner, -#footer > .pt-region__inner { +#header > .region__inner, +.content__inner, +#footer > .region__inner { width: 100%; - max-width: var(--pt-max-width); + max-width: var(--val-max-width); margin: 0 auto; } #header { - background: var(--pt-color--white); + background: var(--val-color--white); } -.pt-content__inner { - background: var(--pt-color--white); +.content__inner { + background: var(--val-color--white); } #footer { - background: linear-gradient(180deg, var(--pt-color--gray-5) 0%, var(--pt-color--gray-10) 100%); + background: linear-gradient(180deg, var(--val-color--gray-5) 0%, var(--val-color--gray-10) 100%); } -#footer > .pt-region__inner { - color: var(--pt-color--gray-65); - background: var(--pt-color--gray-20); - padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap)); +#footer > .region__inner { + color: var(--val-color--gray-65); + background: var(--val-color--gray-20); + padding: calc(3 * var(--val-gap)) 0 calc(12 * var(--val-gap)); } -#footer > .pt-region__inner a { - color: var(--pt-color--white); +#footer > .region__inner a { + color: var(--val-color--white); } diff --git a/static/base/css/looks.css b/static/base/css/looks.css index c2f6c00d..cf3467cf 100644 --- a/static/base/css/looks.css +++ b/static/base/css/looks.css @@ -1,14 +1,14 @@ /* SKIP TO MAIN CONTENT */ -.pt-body__skip { +.skip__to_content { display: flex; justify-content: center; } -.pt-body__skip a { +.skip__to_content a { display: block; - padding: var(--pt-gap-0-5) var(--pt-gap-1-5); - color: var(--pt-color--white); - background-color: var(--pt-color--gray-5); + padding: var(--val-gap-0-5) var(--val-gap-1-5); + color: var(--val-color--white); + background-color: var(--val-color--gray-5); text-decoration: none; outline: 0; position: absolute; @@ -16,55 +16,55 @@ transition: all 0.3s ease-in-out; z-index: 9999; } -.pt-body__skip a:after { +.skip__to_content a:after { content: "\0020 ➔"; } -.pt-body__skip a:focus { +.skip__to_content a:focus { transform: translateY(0%); } /* TYPOGRAPHY */ -.pt-fs__x3l { - font-size: var(--pt-fs--x3l) !important; +.fs__x3l { + font-size: var(--val-fs--x3l) !important; } -.pt-fs__x2l { - font-size: var(--pt-fs--x2l) !important; +.fs__x2l { + font-size: var(--val-fs--x2l) !important; } -.pt-fs__xl { - font-size: var(--pt-fs--xl) !important; +.fs__xl { + font-size: var(--val-fs--xl) !important; } -.pt-fs__l { - font-size: var(--pt-fs--l) !important; +.fs__l { + font-size: var(--val-fs--l) !important; } -.pt-fs__m { - font-size: var(--pt-fs--m) !important; +.fs__m { + font-size: var(--val-fs--m) !important; } -.pt-fs__s { - font-size: var(--pt-fs--s) !important; +.fs__s { + font-size: var(--val-fs--s) !important; } -.pt-fs__xs { - font-size: var(--pt-fs--xs) !important; +.fs__xs { + font-size: var(--val-fs--xs) !important; } -.pt-fs__x2s { - font-size: var(--pt-fs--x2s) !important; +.fs__x2s { + font-size: var(--val-fs--x2s) !important; } -.pt-fs__x3s { - font-size: var(--pt-fs--x3s) !important; +.fs__x3s { + font-size: var(--val-fs--x3s) !important; } /* LG - Applies <= 992px */ -@media screen and (max-width: 62em) { - .pt-fs__x3l { - font-size: calc(var(--pt-fs--l) + 1.25vw) !important; +@media screen and (max-width: 62rem) { + .fs__x3l { + font-size: calc(var(--val-fs--l) + 1.25vw) !important; } - .pt-fs__x2l { - font-size: calc(var(--pt-fs--l) + 0.6vw) !important; + .fs__x2l { + font-size: calc(var(--val-fs--l) + 0.6vw) !important; } - .pt-fs__xl { - font-size: calc(var(--pt-fs--m) + 0.6vw) !important; + .fs__xl { + font-size: calc(var(--val-fs--m) + 0.6vw) !important; } - .pt-fs__l { - font-size: calc(var(--pt-fs--m) + 0.3vw) !important; + .fs__l { + font-size: calc(var(--val-fs--m) + 0.3vw) !important; } } @@ -72,93 +72,93 @@ /* Heading component */ -.pt-heading__title-x3l, -.pt-heading__title-x2l, -.pt-heading__title-xl, -.pt-heading__title-l, -.pt-heading__title-m, -.pt-heading__subtitle { - font-weight: var(--pt-fw--light); +.heading__title-x3l, +.heading__title-x2l, +.heading__title-xl, +.heading__title-l, +.heading__title-m, +.heading__subtitle { + font-weight: var(--val-fw--light); } -.pt-heading__title-x3l { - font-size: calc(var(--pt-fs--x3l) * 2); +.heading__title-x3l { + font-size: calc(var(--val-fs--x3l) * 2); } -.pt-heading__title-x2l { - font-size: calc(var(--pt-fs--x3l) * 1.8); +.heading__title-x2l { + font-size: calc(var(--val-fs--x3l) * 1.8); } -.pt-heading__title-xl { - font-size: calc(var(--pt-fs--x3l) * 1.6); +.heading__title-xl { + font-size: calc(var(--val-fs--x3l) * 1.6); } -.pt-heading__title-l { - font-size: calc(var(--pt-fs--x3l) * 1.4); +.heading__title-l { + font-size: calc(var(--val-fs--x3l) * 1.4); } -.pt-heading__title-m { - font-size: calc(var(--pt-fs--x3l) * 1.2); +.heading__title-m { + font-size: calc(var(--val-fs--x3l) * 1.2); } -.pt-heading__subtitle { - margin-top: calc(-1 * var(--pt-gap-0-5)); +.heading__subtitle { + margin-top: calc(-1 * var(--val-gap-0-5)); } /* LG - Applies <= 992px */ -@media screen and (max-width: 62em) { - .pt-heading__title-x3l { - font-size: calc((var(--pt-fs--x3l) / 1.5) + 4.5vw); +@media screen and (max-width: 62rem) { + .heading__title-x3l { + font-size: calc((var(--val-fs--x3l) / 1.5) + 4.5vw); } - .pt-heading__title-x2l { - font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.9vw); + .heading__title-x2l { + font-size: calc((var(--val-fs--x3l) / 1.6) + 3.9vw); } - .pt-heading__title-xl { - font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.3vw); + .heading__title-xl { + font-size: calc((var(--val-fs--x3l) / 1.6) + 3.3vw); } - .pt-heading__title-l { - font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.7vw); + .heading__title-l { + font-size: calc((var(--val-fs--x3l) / 1.7) + 2.7vw); } - .pt-heading__title-m { - font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.1vw); + .heading__title-m { + font-size: calc((var(--val-fs--x3l) / 1.7) + 2.1vw); } } /* Image component */ -.pt-img__fluid { +.img__fluid { max-width: 100%; height: auto; } /* Branding component */ -.pt-branding__wrapper { +.branding__inner { display: flex; align-items: flex-end; - column-gap: var(--pt-gap-0-75); + column-gap: var(--val-gap-0-75); } -.pt-branding__name { +.branding__name { letter-spacing: 0.02em; - font-size: var(--pt-fs--l); + font-size: var(--val-fs--l); } -.pt-branding__slogan { - font-size: var(--pt-fs--m); +.branding__slogan { + font-size: var(--val-fs--m); } /* SM - Applies <= 568px */ -@media (max-width: 35.5em) { - .pt-branding__logo { +@media (max-width: 35.5rem) { + .branding__logo { display: none; } } /* LG - Applies <= 992px */ -@media (max-width: 62em) { - .pt-branding__slogan { - font-size: var(--pt-fs--base); +@media (max-width: 62rem) { + .branding__slogan { + font-size: var(--val-fs--base); } } /* PoweredBy component */ -#pt-poweredby { +.poweredby__container { text-align: center; } -.pt-poweredby__logo img, -.pt-poweredby__logo svg { +.poweredby__logo img, +.poweredby__logo svg { margin-left: .275em; height: 1.275em; vertical-align: middle; diff --git a/static/base/css/menu.css b/static/base/css/menu.css index a74155e0..be9b2891 100644 --- a/static/base/css/menu.css +++ b/static/base/css/menu.css @@ -1,4 +1,4 @@ -.pt-menu__container { +.menu__container { width: 100%; height: auto; margin: 0; @@ -6,123 +6,123 @@ z-index: 999; border: none; outline: none; - background: var(--pt-menu--color-bg); + background: var(--val-menu--color-bg); } -.pt-menu__wrapper { - margin-right: var(--pt-menu--item-gap); +.menu__inner { + margin-right: var(--val-menu--item-gap); } -.pt-menu__wrapper a, -.pt-menu__wrapper button { +.menu__inner a, +.menu__inner button { cursor: pointer; border: none; background: none; text-decoration: none; } -.pt-menu__nav ul { +.menu__nav ul { margin: 0; padding: 0; } -.pt-menu__nav li { +.menu__nav li { display: inline-block; margin: 0 0 0 1.5rem; - padding: var(--pt-menu--line-padding) 0; - line-height: var(--pt-menu--line-height); + padding: var(--val-menu--line-padding) 0; + line-height: var(--val-menu--line-height); list-style: none; list-style-type: none; } -.pt-menu__nav li.pt-menu__label, -.pt-menu__nav li > a { +.menu__nav li.menu__label, +.menu__nav li > a { position: relative; font-weight: 500; - color: var(--pt-color--text); + color: var(--val-color--text); text-rendering: optimizeLegibility; } -.pt-menu__nav li > a { +.menu__nav li > a { border: none; transition: color 0.3s ease-in-out; } -.pt-menu__nav li:hover > a, -.pt-menu__nav li > a:focus { - color: var(--pt-menu--color-highlight); +.menu__nav li:hover > a, +.menu__nav li > a:focus { + color: var(--val-menu--color-highlight); } -.pt-menu__nav li > a > i.pt-menu__icon { +.menu__nav li > a > i.menu__icon { margin-left: 0.25rem; } -.pt-menu__nav li .pt-menu__subs { +.menu__nav li .menu__subs { position: absolute; max-width: 100%; height: auto; padding: 1rem 2rem; border: none; outline: none; - background: var(--pt-menu--color-bg); - border-radius: var(--pt-menu--border-radius); - border-top: 3px solid var(--pt-menu--color-highlight); + background: var(--val-menu--color-bg); + border-radius: var(--val-menu--border-radius); + border-top: 3px solid var(--val-menu--color-highlight); z-index: 500; opacity: 0; visibility: hidden; - 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(--val-menu--color-border), 0 2px 4px -1px var(--val-menu--color-shadow); transition: all 0.5s ease-in-out; } -.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs, -.pt-menu__nav li.pt-menu__children > a:focus + .pt-menu__subs, -.pt-menu__nav li.pt-menu__children .pt-menu__subs:focus-within { +.menu__nav li.menu__children:hover > .menu__subs, +.menu__nav li.menu__children > a:focus + .menu__subs, +.menu__nav li.menu__children .menu__subs:focus-within { margin-top: 0.4rem; opacity: 1; visibility: visible; } -.pt-menu__nav li .pt-menu__items { - min-width: var(--pt-menu--item-width-min); - max-width: var(--pt-menu--item-width-max); +.menu__nav li .menu__items { + min-width: var(--val-menu--item-width-min); + max-width: var(--val-menu--item-width-max); } -.pt-menu__nav li .pt-menu__items .pt-menu__title { +.menu__nav li .menu__items .menu__title { font-family: inherit; font-size: 1rem; font-weight: 500; margin: 0; - padding: var(--pt-menu--line-padding) 0; - line-height: var(--pt-menu--line-height); + padding: var(--val-menu--line-padding) 0; + line-height: var(--val-menu--line-height); border: none; outline: none; - color: var(--pt-menu--color-highlight); + color: var(--val-menu--color-highlight); text-transform: uppercase; text-rendering: optimizeLegibility; } -.pt-menu__nav li .pt-menu__items li { +.menu__nav li .menu__items li { display: block; margin-left: 0; } -.pt-menu__nav li .pt-menu__mega { +.menu__nav li .menu__mega { left: 50%; transform: translateX(-50%); } -.pt-menu__nav li .pt-menu__groups { +.menu__nav li .menu__groups { display: flex; flex-wrap: nowrap; } -.pt-menu__header, -.pt-menu__trigger { +.menu__header, +.menu__trigger { display: none; } /* Applies <= 992px */ -@media only screen and (max-width: 62em) { - .pt-menu__wrapper { - margin-left: var(--pt-menu--item-gap); +@media only screen and (max-width: 62rem) { + .menu__container { + margin-left: var(--val-menu--item-gap); } - .pt-menu__trigger { + .menu__trigger { cursor: pointer; - width: var(--pt-menu--trigger-width); - height: var(--pt-menu--item-height); + width: var(--val-menu--trigger-width); + height: var(--val-menu--item-height); border: none; outline: none; background: none; @@ -130,54 +130,54 @@ flex-direction: column; justify-content: center; } - .pt-menu__trigger span { + .menu__trigger span { width: 100%; height: 2px; margin: 12.675% 0; - border-radius: var(--pt-border-radius); - background: var(--pt-color--text); + border-radius: var(--val-border-radius); + background: var(--val-color--text); } - .pt-menu__nav { + .menu__nav { position: fixed; top: 0; left: 0; - width: var(--pt-menu--side-width); + width: var(--val-menu--side-width); height: 100%; z-index: 1099; overflow: hidden; - background: var(--pt-menu--color-bg); + background: var(--val-menu--color-bg); transform: translate(-100%); transition: all 0.5s ease-in-out; } - .pt-menu__main .pt-menu__nav.active { + .menu__main .menu__nav.active { transform: translate(0%); } - .pt-menu__nav li { + .menu__nav li { display: block; margin: 0; padding: 0; } - .pt-menu__nav li.pt-menu__label, - .pt-menu__nav li > a { + .menu__nav li.menu__label, + .menu__nav li > a { display: block; - 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); + padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap); + border-bottom: 1px solid var(--val-menu--color-border); } - .pt-menu__nav li ul li.pt-menu__label, - .pt-menu__nav li ul li > a { + .menu__nav li ul li.menu__label, + .menu__nav li ul li > a { border-bottom: 0; } - .pt-menu__nav li > a > i.pt-menu__icon { + .menu__nav li > a > i.menu__icon { position: absolute; - top: var(--pt-menu--line-padding); - right: var(--pt-menu--line-padding); + top: var(--val-menu--line-padding); + right: var(--val-menu--line-padding); font-size: 1.25rem; transform: rotate(-90deg); } - .pt-menu__nav li .pt-menu__subs { + .menu__nav li .menu__subs { position: absolute; display: none; top: 0; @@ -195,65 +195,65 @@ transform: translateX(0%); box-shadow: none; } - .pt-menu__nav li .pt-menu__subs.active { + .menu__nav li .menu__subs.active { display: block; } - .pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs { + .menu__nav li.menu__children:hover > .menu__subs { margin-top: 0; } - .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__nav li .menu__items .menu__title { + padding: var(--val-menu--line-padding) var(--val-menu--item-height) var(--val-menu--line-padding) var(--val-menu--item-gap); } - .pt-menu__nav li .pt-menu__groups { + .menu__nav li .menu__groups { display: block; } - .pt-menu__nav .pt-menu__header { + .menu__nav .menu__header { position: sticky; display: flex; align-items: center; justify-content: space-between; top: 0; - height: var(--pt-menu--item-height); - border-bottom: 1px solid var(--pt-menu--color-border); - background: var(--pt-menu--color-bg); + height: var(--val-menu--item-height); + border-bottom: 1px solid var(--val-menu--color-border); + background: var(--val-menu--color-bg); z-index: 501; } - .pt-menu__nav .pt-menu__header .pt-menu__title { - padding: var(--pt-menu--line-padding); + .menu__nav .menu__header .menu__title { + padding: var(--val-menu--line-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - .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--text); + .menu__nav .menu__header .menu__close, + .menu__nav .menu__header .menu__arrow { + width: var(--val-menu--item-height); + min-width: var(--val-menu--item-height); + height: var(--val-menu--item-height); + line-height: var(--val-menu--item-height); + color: var(--val-color--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } - .pt-menu__nav .pt-menu__header .pt-menu__close { + .menu__nav .menu__header .menu__close { font-size: 2.25rem; - border-left: 1px solid var(--pt-menu--color-border); + border-left: 1px solid var(--val-menu--color-border); } - .pt-menu__nav .pt-menu__header .pt-menu__arrow { + .menu__nav .menu__header .menu__arrow { font-size: 1.25rem; - border-right: 1px solid var(--pt-menu--color-border); + border-right: 1px solid var(--val-menu--color-border); display: none; } - .pt-menu__nav .pt-menu__header.active .pt-menu__arrow { + .menu__nav .menu__header.active .menu__arrow { display: flex; } - .pt-menu__nav .pt-menu__section { + .menu__nav .menu__section { height: 100%; overflow-y: auto; overflow-x: hidden; @@ -261,7 +261,7 @@ margin: 0; } - .pt-menu__overlay { + .menu__overlay { position: fixed; top: 0; left: 0; @@ -273,7 +273,7 @@ background: rgba(0, 0, 0, 0.55); transition: all 0.5s ease-in-out; } - .pt-menu__overlay.active { + .menu__overlay.active { opacity: 1; visibility: visible; } diff --git a/static/base/css/root.css b/static/base/css/root.css index b210b659..8ed95a60 100644 --- a/static/base/css/root.css +++ b/static/base/css/root.css @@ -1,67 +1,67 @@ :root { - --pt-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; - --pt-font-serif: "Lora","georgia",serif; - --pt-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; - --pt-font-family: var(--pt-font-sans); + --val-font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + --val-font-serif: "Lora","georgia",serif; + --val-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; + --val-font-family: var(--val-font-sans); /* Font size */ - --pt-fs--x3l: 2.5rem; - --pt-fs--x2l: 2rem; - --pt-fs--xl: 1.75rem; - --pt-fs--l: 1.5rem; - --pt-fs--m: 1.25rem; - --pt-fs--base: 1rem; - --pt-fs--s: 0.875rem; - --pt-fs--xs: 0.75rem; - --pt-fs--x2s: 0.5625rem; - --pt-fs--x3s: 0.375rem; + --val-fs--x3l: 2.5rem; + --val-fs--x2l: 2rem; + --val-fs--xl: 1.75rem; + --val-fs--l: 1.5rem; + --val-fs--m: 1.25rem; + --val-fs--base: 1rem; + --val-fs--s: 0.875rem; + --val-fs--xs: 0.75rem; + --val-fs--x2s: 0.5625rem; + --val-fs--x3s: 0.375rem; /* Font weight */ - --pt-fw--light: 300; - --pt-fw--base: 400; - --pt-fw--bold: 500; + --val-fw--light: 300; + --val-fw--base: 400; + --val-fw--bold: 500; /* Line height */ - --pt-lh--base: 1.5; - --pt-lh--header: 1.2; + --val-lh--base: 1.5; + --val-lh--header: 1.2; - --pt-max-width: 90rem; + --val-max-width: 90rem; /* - --pt-color-rgb: 33,37,41; - --pt-main--bg-rgb: 255,255,255; - --pt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --val-color-rgb: 33,37,41; + --val-main--bg-rgb: 255,255,255; + --val-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --line-height-base: 1.6875rem; --line-height-s: 1.125rem; --max-bg-color: 98.125rem; */ - --pt-gap: 1.125em; + --val-gap: 1.125rem; /* --content-left: 5.625rem; - --site-header-height-wide: var(--pt-gap10); - --container-padding: var(--pt-gap); + --site-header-height-wide: var(--val-gap10); + --container-padding: var(--val-gap); */ } /* @media (min-width: 75rem) { :root { - --container-padding:var(--pt-gap2); + --container-padding:var(--val-gap2); } } :root { --scrollbar-width: 0px; --grid-col-count: 6; - --grid-gap: var(--pt-gap); + --grid-gap: var(--val-gap); --grid-gap-count: calc(var(--grid-col-count) - 1); - --grid-full-width: calc(100vw - var(--pt-gap2) - var(--scrollbar-width)); + --grid-full-width: calc(100vw - var(--val-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(--pt-gap2); + --grid-gap: var(--val-gap2); } } @@ -73,89 +73,89 @@ @media (min-width: 75rem) { :root { - --grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--pt-gap4)); + --grid-full-width:calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--val-gap4)); } } @media (min-width: 90rem) { :root { - --grid-full-width:calc(var(--max-width) - var(--pt-gap4)); + --grid-full-width:calc(var(--max-width) - var(--val-gap4)); } } */ :root { - --pt-gap-0-15: calc(0.15 * var(--pt-gap)); - --pt-gap-0-25: calc(0.25 * var(--pt-gap)); - --pt-gap-0-35: calc(0.35 * var(--pt-gap)); - --pt-gap-0-5: calc(0.5 * var(--pt-gap)); - --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)); + --val-gap-0-15: calc(0.15 * var(--val-gap)); + --val-gap-0-25: calc(0.25 * var(--val-gap)); + --val-gap-0-35: calc(0.35 * var(--val-gap)); + --val-gap-0-5: calc(0.5 * var(--val-gap)); + --val-gap-0-75: calc(0.75 * var(--val-gap)); + --val-gap-1-5: calc(1.5 * var(--val-gap)); + --val-gap-2: calc(2 * var(--val-gap)); - --pt-color--default-hue: 216; - --pt-color--default-sat: 60%; - --pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%); - --pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%); - --pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%); + --val-color--default-hue: 216; + --val-color--default-sat: 60%; + --val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%); + --val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%); + --val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%); - --pt-color--info-hue: 190; - --pt-color--info-sat: 90%; - --pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%); - --pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%); - --pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%); + --val-color--info-hue: 190; + --val-color--info-sat: 90%; + --val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%); + --val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%); + --val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%); - --pt-color--success-hue: 150; - --pt-color--success-sat: 50%; - --pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%); - --pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%); - --pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%); + --val-color--success-hue: 150; + --val-color--success-sat: 50%; + --val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%); + --val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%); + --val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%); - --pt-color--warning-hue: 44; - --pt-color--warning-sat: 100%; - --pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%); - --pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%); - --pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%); + --val-color--warning-hue: 44; + --val-color--warning-sat: 100%; + --val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%); + --val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%); + --val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%); - --pt-color--danger-hue: 348; - --pt-color--danger-sat: 86%; - --pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%); - --pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%); - --pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%); + --val-color--danger-hue: 348; + --val-color--danger-sat: 86%; + --val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%); + --val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%); + --val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%); - --pt-color--light-hue: 0; - --pt-color--light-sat: 0%; - --pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%); - --pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%); - --pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%); + --val-color--light-hue: 0; + --val-color--light-sat: 0%; + --val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%); + --val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%); + --val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%); - --pt-color--dark-hue: 0; - --pt-color--dark-sat: 0%; - --pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%); - --pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%); - --pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%); + --val-color--dark-hue: 0; + --val-color--dark-sat: 0%; + --val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%); + --val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%); + --val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%); - --pt-color--gray-hue: 201; - --pt-color--gray-sat: 15%; - --pt-color--gray-5: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 5%); - --pt-color--gray-10: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat) ,11%); - --pt-color--gray-20: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat),20%); - --pt-color--gray-45: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 44%); - --pt-color--gray-60: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 57%); - --pt-color--gray-65: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 63%); - --pt-color--gray-70: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 72%); - --pt-color--gray-90: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 88%); - --pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%); - --pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%); + --val-color--gray-hue: 201; + --val-color--gray-sat: 15%; + --val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%); + --val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%); + --val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%); + --val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%); + --val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%); + --val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%); + --val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%); + --val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%); + --val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%); + --val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%); - --pt-color--bg: #fafafa; - --pt-color--text: #212529; - --pt-color--white: #fff; + --val-color--bg: #fafafa; + --val-color--text: #212529; + --val-color--white: #fff; /* @@ -163,31 +163,31 @@ --color-text-neutral-soft: var(--color--gray-45); --color-text-neutral-medium: var(--color--gray-20); --color-text-neutral-loud: var(--color--gray-5); - --color-text-primary-medium: var(--pt-color--default-40); - --color-text-primary-loud: var(--pt-color--default-30); + --color-text-primary-medium: var(--val-color--default-40); + --color-text-primary-loud: var(--val-color--default-30); --color--black: #000; */ /* --color--red: #e33f1e; --color--gold: #fdca40; --color--green: #3fa21c; - --header-height-wide-when-fixed: calc(6 * var(--pt-gap)); + --header-height-wide-when-fixed: calc(6 * var(--val-gap)); --mobile-nav-width: 31.25rem; */ - --pt-border-radius: 0.375rem; + --val-border-radius: 0.375rem; /* Menu component */ - --pt-menu--color-bg: var(--pt-color--bg); - --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; + --val-menu--color-bg: var(--val-color--bg); + --val-menu--color-highlight: #e91e63; + --val-menu--color-border: rgba(0, 0, 0, 0.1); + --val-menu--color-shadow: rgba(0, 0, 0, 0.06); + --val-menu--line-padding: 0.625rem; + --val-menu--line-height: 1.875rem; + --val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height)); + --val-menu--item-width-min: 14rem; + --val-menu--item-width-max: 20rem; + --val-menu--item-gap: 1rem; + --val-menu--border-radius: 0.625rem; + --val-menu--trigger-width: var(--val-menu--item-height); + --val-menu--side-width: 20rem; } diff --git a/static/base/css/welcome.css b/static/base/css/welcome.css index 40644cb7..59bb905d 100644 --- a/static/base/css/welcome.css +++ b/static/base/css/welcome.css @@ -16,11 +16,11 @@ padding-top: 0; } -#welcome [class$="-col-text"] > .inner { +#welcome [class$="-col-text"] > .flex-item__inner { margin: 5% 5% 0; text-align: center; } -#welcome [class$="-col-image"] > .inner { +#welcome [class$="-col-image"] > .flex-item__inner { margin: 1rem 5%; } @@ -28,7 +28,7 @@ text-align: center; margin: 0 5%; } -#welcome .welcome > .inner { +#welcome .welcome > .wrapper__inner { padding: 2rem 1rem; border-radius: 28px; background: url("/base/images/welcome.jpg") center center no-repeat; @@ -36,39 +36,39 @@ background-size: cover; color: #fff; } -#welcome .welcome > .inner > h2 { +#welcome .welcome > .wrapper__inner > h2 { color: #fff; } -#welcome .welcome > .inner > h3 { +#welcome .welcome > .wrapper__inner > h3 { color: #ccc; } -#welcome .promo-col-image > .inner { +#welcome .promo-col-image > .flex-item__inner { padding: 0 5%; } -#welcome .issues-col-image > .inner img { +#welcome .issues-col-image > .flex-item__inner img { border-radius: 40px; } /* BREAKPOINTS */ /* MD - Applies >= 768px */ -@media screen and (min-width: 48em) { - #welcome .promo-col-image > .inner { +@media screen and (min-width: 48rem) { + #welcome .promo-col-image > .flex-item__inner { padding: 0; } #welcome .issues { padding-top: 1.6rem; } - #welcome .issues-col-text > .inner { + #welcome .issues-col-text > .flex-item__inner { text-align: left; } } /* LG - Applies >= 992px */ -@media screen and (min-width: 62em) { - #welcome .hello-col-text > .inner { +@media screen and (min-width: 62rem) { + #welcome .hello-col-text > .flex-item__inner { margin-top: 2rem; text-align: left; } @@ -77,19 +77,19 @@ padding: 0 15% 2rem; } - #welcome .promo-col-text > .inner { + #welcome .promo-col-text > .flex-item__inner { margin-right: 0; text-align: right; } } /* XL - Applies >= 1280px */ -@media screen and (min-width: 80em) { - #welcome .hello-col-text > .inner { +@media screen and (min-width: 80rem) { + #welcome .hello-col-text > .flex-item__inner { margin-top: 4rem; margin-left: 20%; } - #welcome .pagetop-col-text > .inner { + #welcome .pagetop-col-text > .flex-item__inner { text-align: left; } -} \ No newline at end of file +} diff --git a/static/base/js/menu.js b/static/base/js/menu.js index 1ad63de3..c09056d4 100644 --- a/static/base/js/menu.js +++ b/static/base/js/menu.js @@ -1,15 +1,15 @@ -function pt_menu__showChildren(nav, children) { - let submenu = children[0].querySelector('.pt-menu__subs'); +function menu__showChildren(nav, children) { + let submenu = children[0].querySelector('.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('.pt-menu__title').innerHTML = title; - nav.querySelector('.pt-menu__header').classList.add('active'); + nav.querySelector('.menu__title').innerHTML = title; + nav.querySelector('.menu__header').classList.add('active'); } -function pt_menu__hideChildren(nav, children) { - let submenu = children[0].querySelector('.pt-menu__subs'); +function menu__hideChildren(nav, children) { + let submenu = children[0].querySelector('.menu__subs'); submenu.style.animation = 'slideRight 0.5s ease forwards'; setTimeout(() => { submenu.classList.remove('active'); @@ -19,70 +19,69 @@ function pt_menu__hideChildren(nav, children) { children.shift(); if (children.length > 0) { let title = children[0].querySelector('i').parentNode.childNodes[0].textContent; - nav.querySelector('.pt-menu__title').innerHTML = title; + nav.querySelector('.menu__title').innerHTML = title; } else { - nav.querySelector('.pt-menu__header').classList.remove('active'); - nav.querySelector('.pt-menu__title').innerHTML = ''; + nav.querySelector('.menu__header').classList.remove('active'); + nav.querySelector('.menu__title').innerHTML = ''; } } -function pt_menu__toggle(nav, overlay) { +function menu__toggle(nav, overlay) { nav.classList.toggle('active'); overlay.classList.toggle('active'); } -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 => { +function menu__reset(menu, nav) { + nav.querySelector('.menu__header').classList.remove('active'); + nav.querySelector('.menu__title').innerHTML = ''; + menu.querySelectorAll('.menu__subs').forEach(submenu => { submenu.classList.remove('active'); submenu.style.removeProperty("animation"); }); } -document.querySelectorAll('.pt-menu__container').forEach(menu => { +document.querySelectorAll('.menu__container').forEach(menu => { let menuChildren = []; - const menuNav = menu.querySelector('.pt-menu__nav'); - const menuOverlay = menu.querySelector('.pt-menu__overlay'); + const menuNav = menu.querySelector('.menu__nav'); + const menuOverlay = menu.querySelector('.menu__overlay'); - menu.querySelector('.pt-menu__section').addEventListener('click', (e) => { - if (!menuNav.classList.contains('active')) { - return; - } - let target = e.target.closest('.pt-menu__children'); - if (target && target != menuChildren[0]) { - menuChildren.unshift(target); - pt_menu__showChildren(menuNav, menuChildren); + menu.querySelector('.menu__section').addEventListener('click', (e) => { + if (menuNav.classList.contains('active')) { + let target = e.target.closest('.menu__children'); + if (target && target != menuChildren[0]) { + menuChildren.unshift(target); + menu__showChildren(menuNav, menuChildren); + } } }); - menu.querySelector('.pt-menu__arrow').addEventListener('click', () => { - pt_menu__hideChildren(menuNav, menuChildren); + menu.querySelector('.menu__arrow').addEventListener('click', () => { + menu__hideChildren(menuNav, menuChildren); }); - menu.querySelector('.pt-menu__close').addEventListener('click', () => { - pt_menu__toggle(menuNav, menuOverlay); + menu.querySelector('.menu__close').addEventListener('click', () => { + menu__toggle(menuNav, menuOverlay); setTimeout(() => { - pt_menu__reset(menu, menuNav); + menu__reset(menu, menuNav); menuChildren = []; }, 300); }); - menu.querySelector('.pt-menu__trigger').addEventListener('click', () => { - pt_menu__toggle(menuNav, menuOverlay); + menu.querySelector('.menu__trigger').addEventListener('click', () => { + menu__toggle(menuNav, menuOverlay); }); menuOverlay.addEventListener('click', () => { - pt_menu__toggle(menuNav, menuOverlay); + menu__toggle(menuNav, menuOverlay); }); window.onresize = function () { if (this.innerWidth >= 992) { if (menuNav.classList.contains('active')) { - pt_menu__toggle(menuNav, menuOverlay); + menu__toggle(menuNav, menuOverlay); setTimeout(() => { - pt_menu__reset(menu, menuNav); + menu__reset(menu, menuNav); menuChildren = []; }, 300); }