🚚 Remove 'pt' prefix for clarity and decoupling
This commit is contained in:
parent
e7744cbb93
commit
1dfc789172
24 changed files with 729 additions and 734 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -33,28 +33,28 @@ impl ComponentTrait for Menu {
|
|||
cx.set_param::<bool>(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 {}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -29,10 +29,6 @@ impl ComponentTrait for PoweredBy {
|
|||
}
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
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" {}
|
||||
|
|
|
|||
|
|
@ -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<String> {
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.pt-body__skip {
|
||||
.skip__to_content {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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');
|
||||
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);
|
||||
pt_menu__showChildren(menuNav, menuChildren);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue