manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

🚚 Remove 'pt' prefix for clarity and decoupling

Browse source
This commit is contained in:
Manuel Cillero 2024-03-02 09:16:30 +01:00
parent e7744cbb93
commit 1dfc789172
24 changed files with 729 additions and 734 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/pagetop-bootsier/static/css/styles.css
View file

@ -2,8 +2,8 @@
/* Heading component */ /* Heading component */
.pt-heading__subtitle { .heading__subtitle {
margin-top: calc(-1 * var(--pt-gap-0-35)); margin-top: calc(-1 * var(--val-gap-0-35));
} }
/* Button component */ /* Button component */

66
src/base/component.rs
View file

@ -60,28 +60,28 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum BreakPoint { pub enum BreakPoint {
#[default] #[default]
None, /* Does not apply. Rest initially assume 1 pixel = 0.0625em */ None, /* Does not apply. Rest initially assume 1 pixel = 0.0625rem */
SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5em) */ SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5rem) */
MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48em) */ MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48rem) */
LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62em) */ LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62rem) */
XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80em) */ XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80rem) */
X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90em) */ X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90rem) */
X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120em) */ X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120rem) */
X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160em) */ X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160rem) */
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for BreakPoint { impl ToString for BreakPoint {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
BreakPoint::None => "pt-bp__none", BreakPoint::None => "bp__none",
BreakPoint::SM => "pt-bp__sm", BreakPoint::SM => "bp__sm",
BreakPoint::MD => "pt-bp__md", BreakPoint::MD => "bp__md",
BreakPoint::LG => "pt-bp__lg", BreakPoint::LG => "bp__lg",
BreakPoint::XL => "pt-bp__xl", BreakPoint::XL => "bp__xl",
BreakPoint::X2L => "pt-bp__x2l", BreakPoint::X2L => "bp__x2l",
BreakPoint::X3L => "pt-bp__x3l", BreakPoint::X3L => "bp__x3l",
BreakPoint::X2K => "pt-bp__x2k", BreakPoint::X2K => "bp__x2k",
}) })
} }
} }
@ -105,14 +105,14 @@ pub enum ButtonStyle {
impl ToString for ButtonStyle { impl ToString for ButtonStyle {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ButtonStyle::Default => "pt-button__default", ButtonStyle::Default => "button__default",
ButtonStyle::Info => "pt-button__info", ButtonStyle::Info => "button__info",
ButtonStyle::Success => "pt-button__success", ButtonStyle::Success => "button__success",
ButtonStyle::Warning => "pt-button__warning", ButtonStyle::Warning => "button__warning",
ButtonStyle::Danger => "pt-button__danger", ButtonStyle::Danger => "button__danger",
ButtonStyle::Light => "pt-button__light", ButtonStyle::Light => "button__light",
ButtonStyle::Dark => "pt-button__dark", ButtonStyle::Dark => "button__dark",
ButtonStyle::Link => "pt-button__link", ButtonStyle::Link => "button__link",
}) })
} }
} }
@ -138,16 +138,16 @@ pub enum FontSize {
impl ToString for FontSize { impl ToString for FontSize {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FontSize::ExtraLarge => "pt-fs__x3l", FontSize::ExtraLarge => "fs__x3l",
FontSize::XxLarge => "pt-fs__x2l", FontSize::XxLarge => "fs__x2l",
FontSize::XLarge => "pt-fs__xl", FontSize::XLarge => "fs__xl",
FontSize::Large => "pt-fs__l", FontSize::Large => "fs__l",
FontSize::Medium => "pt-fs__m", FontSize::Medium => "fs__m",
FontSize::Normal => "", FontSize::Normal => "",
FontSize::Small => "pt-fs__s", FontSize::Small => "fs__s",
FontSize::XSmall => "pt-fs__xs", FontSize::XSmall => "fs__xs",
FontSize::XxSmall => "pt-fs__x2s", FontSize::XxSmall => "fs__x2s",
FontSize::ExtraSmall => "pt-fs__x3s", FontSize::ExtraSmall => "fs__x3s",
}) })
} }
} }

6
src/base/component/block.rs
View file

@ -29,7 +29,7 @@ impl ComponentTrait for Block {
} }
fn setup_before_prepare(&mut self, _cx: &mut Context) { 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 { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@ -39,9 +39,9 @@ impl ComponentTrait for Block {
return PrepareMarkup::With(html! { return PrepareMarkup::With(html! {
div id=(id) class=[self.classes().get()] { div id=(id) class=[self.classes().get()] {
@if let Some(title) = self.title().using(cx.langid()) { @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) }
} }
}); });
} }

12
src/base/component/branding.rs
View file

@ -35,19 +35,19 @@ impl ComponentTrait for Branding {
let logo = self.logo().render(cx); let logo = self.logo().render(cx);
let title = L10n::l("site_home").using(cx.langid()); let title = L10n::l("site_home").using(cx.langid());
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class="pt-branding" { div id=[self.id()] class="branding__container" {
div class="pt-branding__wrapper" { div class="branding__inner" {
@if !logo.is_empty() { @if !logo.is_empty() {
div class="pt-branding__logo" { (logo) } div class="branding__logo" { (logo) }
} }
div class="pt-branding__text" { div class="branding__text" {
div class="pt-branding__name" { div class="branding__name" {
a href=(self.frontpage()(cx)) title=[title] rel="home" { a href=(self.frontpage()(cx)) title=[title] rel="home" {
(self.app_name()) (self.app_name())
} }
} }
@if let Some(slogan) = self.slogan().using(cx.langid()) { @if let Some(slogan) = self.slogan().using(cx.langid()) {
div class="pt-branding__slogan" { div class="branding__slogan" {
(slogan) (slogan)
} }
} }

128
src/base/component/flex.rs
View file

@ -22,19 +22,19 @@ impl ToString for Direction {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
Direction::Default => concat_string!( 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!( 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!( 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!( 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!( 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 { match self {
WrapAlign::Default => "".to_owned(), WrapAlign::Default => "".to_owned(),
WrapAlign::NoWrap => "flex-nowrap".to_owned(), WrapAlign::NoWrap => "flex-nowrap".to_owned(),
WrapAlign::Wrap(a) => concat_string!("pt-flex__wrap ", a.to_string()), WrapAlign::Wrap(a) => concat_string!("flex__wrap ", a.to_string()),
WrapAlign::WrapReverse(a) => concat_string!("pt-flex__wrap-reverse ", 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 { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ContentAlign::Default => "", ContentAlign::Default => "",
ContentAlign::Start => "pt-flex__align-start", ContentAlign::Start => "flex__align-start",
ContentAlign::End => "pt-flex__align-end", ContentAlign::End => "flex__align-end",
ContentAlign::Center => "pt-flex__align-center", ContentAlign::Center => "flex__align-center",
ContentAlign::Stretch => "pt-flex__align-stretch", ContentAlign::Stretch => "flex__align-stretch",
ContentAlign::SpaceBetween => "pt-flex__align-space-between", ContentAlign::SpaceBetween => "flex__align-space-between",
ContentAlign::SpaceAround => "pt-flex__align-space-around", ContentAlign::SpaceAround => "flex__align-space-around",
}) })
} }
} }
@ -111,12 +111,12 @@ impl ToString for ContentJustify {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ContentJustify::Default => "", ContentJustify::Default => "",
ContentJustify::Start => "pt-flex__justify-start", ContentJustify::Start => "flex__justify-start",
ContentJustify::End => "pt-flex__justify-end", ContentJustify::End => "flex__justify-end",
ContentJustify::Center => "pt-flex__justify-center", ContentJustify::Center => "flex__justify-center",
ContentJustify::SpaceBetween => "pt-flex__justify-space-between", ContentJustify::SpaceBetween => "flex__justify-space-between",
ContentJustify::SpaceAround => "pt-flex__justify-space-around", ContentJustify::SpaceAround => "flex__justify-space-around",
ContentJustify::SpaceEvenly => "pt-flex__justify-space-evenly", ContentJustify::SpaceEvenly => "flex__justify-space-evenly",
}) })
} }
} }
@ -139,11 +139,11 @@ impl ToString for ItemAlign {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemAlign::Default => "", ItemAlign::Default => "",
ItemAlign::Top => "pt-flex__item-top", ItemAlign::Top => "flex-item__top",
ItemAlign::Bottom => "pt-flex__item-bottom", ItemAlign::Bottom => "flex-item__bottom",
ItemAlign::Middle => "pt-flex__item-middle", ItemAlign::Middle => "flex-item__middle",
ItemAlign::Stretch => "pt-flex__item-stretch", ItemAlign::Stretch => "flex-item__stretch",
ItemAlign::Baseline => "pt-flex__item-baseline", ItemAlign::Baseline => "flex-item__baseline",
}) })
} }
} }
@ -195,15 +195,15 @@ impl ToString for ItemGrow {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemGrow::Default => "", ItemGrow::Default => "",
ItemGrow::Is1 => "pt-flex__grow-1", ItemGrow::Is1 => "flex-item__grow-1",
ItemGrow::Is2 => "pt-flex__grow-2", ItemGrow::Is2 => "flex-item__grow-2",
ItemGrow::Is3 => "pt-flex__grow-3", ItemGrow::Is3 => "flex-item__grow-3",
ItemGrow::Is4 => "pt-flex__grow-4", ItemGrow::Is4 => "flex-item__grow-4",
ItemGrow::Is5 => "pt-flex__grow-5", ItemGrow::Is5 => "flex-item__grow-5",
ItemGrow::Is6 => "pt-flex__grow-6", ItemGrow::Is6 => "flex-item__grow-6",
ItemGrow::Is7 => "pt-flex__grow-7", ItemGrow::Is7 => "flex-item__grow-7",
ItemGrow::Is8 => "pt-flex__grow-8", ItemGrow::Is8 => "flex-item__grow-8",
ItemGrow::Is9 => "pt-flex__grow-9", ItemGrow::Is9 => "flex-item__grow-9",
}) })
} }
} }
@ -230,15 +230,15 @@ impl ToString for ItemShrink {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemShrink::Default => "", ItemShrink::Default => "",
ItemShrink::Is1 => "pt-flex__shrink-1", ItemShrink::Is1 => "flex-item__shrink-1",
ItemShrink::Is2 => "pt-flex__shrink-2", ItemShrink::Is2 => "flex-item__shrink-2",
ItemShrink::Is3 => "pt-flex__shrink-3", ItemShrink::Is3 => "flex-item__shrink-3",
ItemShrink::Is4 => "pt-flex__shrink-4", ItemShrink::Is4 => "flex-item__shrink-4",
ItemShrink::Is5 => "pt-flex__shrink-5", ItemShrink::Is5 => "flex-item__shrink-5",
ItemShrink::Is6 => "pt-flex__shrink-6", ItemShrink::Is6 => "flex-item__shrink-6",
ItemShrink::Is7 => "pt-flex__shrink-7", ItemShrink::Is7 => "flex-item__shrink-7",
ItemShrink::Is8 => "pt-flex__shrink-8", ItemShrink::Is8 => "flex-item__shrink-8",
ItemShrink::Is9 => "pt-flex__shrink-9", ItemShrink::Is9 => "flex-item__shrink-9",
}) })
} }
} }
@ -267,17 +267,17 @@ impl ToString for ItemSize {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemSize::Default => "", ItemSize::Default => "",
ItemSize::Percent10 => "pt-flex__width-10", ItemSize::Percent10 => "flex-item__width-10",
ItemSize::Percent20 => "pt-flex__width-20", ItemSize::Percent20 => "flex-item__width-20",
ItemSize::Percent25 => "pt-flex__width-25", ItemSize::Percent25 => "flex-item__width-25",
ItemSize::Percent33 => "pt-flex__width-33", ItemSize::Percent33 => "flex-item__width-33",
ItemSize::Percent40 => "pt-flex__width-40", ItemSize::Percent40 => "flex-item__width-40",
ItemSize::Percent50 => "pt-flex__width-50", ItemSize::Percent50 => "flex-item__width-50",
ItemSize::Percent60 => "pt-flex__width-60", ItemSize::Percent60 => "flex-item__width-60",
ItemSize::Percent66 => "pt-flex__width-66", ItemSize::Percent66 => "flex-item__width-66",
ItemSize::Percent75 => "pt-flex__width-75", ItemSize::Percent75 => "flex-item__width-75",
ItemSize::Percent80 => "pt-flex__width-80", ItemSize::Percent80 => "flex-item__width-80",
ItemSize::Percent90 => "pt-flex__width-90", ItemSize::Percent90 => "flex-item__width-90",
}) })
} }
} }
@ -306,17 +306,17 @@ impl ToString for ItemOffset {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemOffset::Default => "", ItemOffset::Default => "",
ItemOffset::Offset10 => "pt-flex__offset-10", ItemOffset::Offset10 => "flex-item__offset-10",
ItemOffset::Offset20 => "pt-flex__offset-20", ItemOffset::Offset20 => "flex-item__offset-20",
ItemOffset::Offset25 => "pt-flex__offset-25", ItemOffset::Offset25 => "flex-item__offset-25",
ItemOffset::Offset33 => "pt-flex__offset-33", ItemOffset::Offset33 => "flex-item__offset-33",
ItemOffset::Offset40 => "pt-flex__offset-40", ItemOffset::Offset40 => "flex-item__offset-40",
ItemOffset::Offset50 => "pt-flex__offset-50", ItemOffset::Offset50 => "flex-item__offset-50",
ItemOffset::Offset60 => "pt-flex__offset-60", ItemOffset::Offset60 => "flex-item__offset-60",
ItemOffset::Offset66 => "pt-flex__offset-66", ItemOffset::Offset66 => "flex-item__offset-66",
ItemOffset::Offset75 => "pt-flex__offset-75", ItemOffset::Offset75 => "flex-item__offset-75",
ItemOffset::Offset80 => "pt-flex__offset-80", ItemOffset::Offset80 => "flex-item__offset-80",
ItemOffset::Offset90 => "pt-flex__offset-90", ItemOffset::Offset90 => "flex-item__offset-90",
}) })
} }
} }

4
src/base/component/flex/item.rs
View file

@ -35,7 +35,7 @@ impl ComponentTrait for Item {
fn setup_before_prepare(&mut self, _cx: &mut Context) { fn setup_before_prepare(&mut self, _cx: &mut Context) {
self.prepend_classes( self.prepend_classes(
[ [
"pt-flex__item".to_owned(), "flex-item__container".to_owned(),
self.grow().to_string(), self.grow().to_string(),
self.shrink().to_string(), self.shrink().to_string(),
self.size().to_string(), self.size().to_string(),
@ -53,7 +53,7 @@ impl ComponentTrait for Item {
}; };
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[order] { div id=[self.id()] class=[self.classes().get()] style=[order] {
div class="inner" { div class="flex-item__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }

12
src/base/component/heading.rs
View file

@ -27,13 +27,13 @@ pub enum HeadingSize {
impl ToString for HeadingSize { impl ToString for HeadingSize {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
HeadingSize::ExtraLarge => "pt-heading__title-x3l", HeadingSize::ExtraLarge => "heading__title-x3l",
HeadingSize::XxLarge => "pt-heading__title-x2l", HeadingSize::XxLarge => "heading__title-x2l",
HeadingSize::XLarge => "pt-heading__title-xl", HeadingSize::XLarge => "heading__title-xl",
HeadingSize::Large => "pt-heading__title-l", HeadingSize::Large => "heading__title-l",
HeadingSize::Medium => "pt-heading__title-m", HeadingSize::Medium => "heading__title-m",
HeadingSize::Normal => "", HeadingSize::Normal => "",
HeadingSize::Subtitle => "pt-heading__subtitle", HeadingSize::Subtitle => "heading__subtitle",
}) })
} }
} }

4
src/base/component/image.rs
View file

@ -1,7 +1,7 @@
use crate::prelude::*; use crate::prelude::*;
const IMG_FLUID: &str = "pt-img__fluid"; const IMG_FLUID: &str = "img__fluid";
const IMG_FIXED: &str = "pt-img__fixed"; const IMG_FIXED: &str = "img__fixed";
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum ImageSize { pub enum ImageSize {

20
src/base/component/menu/item.rs
View file

@ -54,7 +54,7 @@ impl ComponentTrait for Item {
match self.item_type() { match self.item_type() {
ItemType::Void => PrepareMarkup::None, ItemType::Void => PrepareMarkup::None,
ItemType::Label(label) => PrepareMarkup::With(html! { ItemType::Label(label) => PrepareMarkup::With(html! {
li class="pt-menu__label" { li class="menu__label" {
span title=[description] { span title=[description] {
(left_icon) (left_icon)
(label.escaped(cx.langid())) (label.escaped(cx.langid()))
@ -63,7 +63,7 @@ impl ComponentTrait for Item {
} }
}), }),
ItemType::Link(label, path) => PrepareMarkup::With(html! { ItemType::Link(label, path) => PrepareMarkup::With(html! {
li class="pt-menu__link" { li class="menu__link" {
a href=(path(cx)) title=[description] { a href=(path(cx)) title=[description] {
(left_icon) (left_icon)
(label.escaped(cx.langid())) (label.escaped(cx.langid()))
@ -72,7 +72,7 @@ impl ComponentTrait for Item {
} }
}), }),
ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! { ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! {
li class="pt-menu__link" { li class="menu__link" {
a href=(path(cx)) title=[description] target="_blank" { a href=(path(cx)) title=[description] target="_blank" {
(left_icon) (left_icon)
(label.escaped(cx.langid())) (label.escaped(cx.langid()))
@ -81,28 +81,28 @@ impl ComponentTrait for Item {
} }
}), }),
ItemType::Html(content) => PrepareMarkup::With(html! { ItemType::Html(content) => PrepareMarkup::With(html! {
li class="pt-menu__html" { li class="menu__html" {
(content.render(cx)) (content.render(cx))
} }
}), }),
ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! { ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! {
li class="pt-menu__children" { li class="menu__children" {
a href="#" title=[description] { a href="#" title=[description] {
(left_icon) (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)) (submenu.render(cx))
} }
} }
}), }),
ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! { ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
li class="pt-menu__children" { li class="menu__children" {
a href="#" title=[description] { a href="#" title=[description] {
(left_icon) (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)) (megamenu.render(cx))
} }
} }

2
src/base/component/menu/megamenu.rs
View file

@ -30,7 +30,7 @@ impl ComponentTrait for Megamenu {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class="pt-menu__groups" { div id=[self.id()] class="menu__groups" {
(self.groups().render(cx)) (self.groups().render(cx))
} }
}) })

22
src/base/component/menu/menu_main.rs
View file

@ -33,28 +33,28 @@ impl ComponentTrait for Menu {
cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true); cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class="pt-menu__container" { div id=[self.id()] class="menu__container" {
div class="pt-menu__wrapper" { div class="menu__inner" {
div class="pt-menu__main" { div class="menu__main" {
div class="pt-menu__overlay" {} div class="menu__overlay" {}
nav class="pt-menu__nav" { nav class="menu__nav" {
div class="pt-menu__header" { div class="menu__header" {
button type="button" class="pt-menu__arrow" { button type="button" class="menu__arrow" {
i class="bi-chevron-left" {} i class="bi-chevron-left" {}
} }
div class="pt-menu__title" {} div class="menu__title" {}
button type="button" class="pt-menu__close" { button type="button" class="menu__close" {
i class="bi-x" {} i class="bi-x" {}
} }
} }
ul class="pt-menu__section" { ul class="menu__section" {
(self.items().render(cx)) (self.items().render(cx))
} }
} }
} }
button button
type="button" type="button"
class="pt-menu__trigger" class="menu__trigger"
title=[L10n::l("menu_toggle").using(cx.langid())] title=[L10n::l("menu_toggle").using(cx.langid())]
{ {
span {} span {} span {} span {} span {} span {}

4
src/base/component/menu/submenu.rs
View file

@ -31,9 +31,9 @@ impl ComponentTrait for Submenu {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class="pt-menu__items" { div id=[self.id()] class="menu__items" {
@if let Some(title) = self.title().using(cx.langid()) { @if let Some(title) = self.title().using(cx.langid()) {
h4 class="pt-menu__title" { (title) } h4 class="menu__title" { (title) }
} }
ul { ul {
(self.items().render(cx)) (self.items().render(cx))

14
src/base/component/powered_by.rs
View file

@ -29,10 +29,6 @@ impl ComponentTrait for PoweredBy {
} }
} }
fn id(&self) -> Option<String> {
Some("pt-poweredby".to_owned())
}
fn weight(&self) -> Weight { fn weight(&self) -> Weight {
self.weight self.weight
} }
@ -58,11 +54,11 @@ impl ComponentTrait for PoweredBy {
}; };
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] { div id=[self.id()] class="poweredby__container" {
@if let Some(c) = self.copyright() { @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 { fn logo_color(&self, cx: &mut Context) -> Markup {
let logo_txt = &L10n::l("pagetop_logo").using(cx.langid()); let logo_txt = &L10n::l("pagetop_logo").using(cx.langid());
html! { 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] {} 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_txt = L10n::l("pagetop_logo").using(cx.langid());
let logo_rgb = format!("rgb({},{},{})", r, g, b); let logo_rgb = format!("rgb({},{},{})", r, g, b);
html! { 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" { 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 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" {} 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" {}

20
src/base/component/wrapper.rs
View file

@ -23,7 +23,7 @@ pub struct Wrapper {
impl ComponentTrait for Wrapper { impl ComponentTrait for Wrapper {
fn new() -> Self { fn new() -> Self {
Wrapper::default().with_classes(ClassesOp::Add, "pt-wrapper") Wrapper::default().with_classes(ClassesOp::Add, "wrapper__container")
} }
fn id(&self) -> Option<String> { fn id(&self) -> Option<String> {
@ -42,35 +42,35 @@ impl ComponentTrait for Wrapper {
match self.wrapper_type() { match self.wrapper_type() {
WrapperType::Container => PrepareMarkup::With(html! { WrapperType::Container => PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] { div id=[self.id()] class=[self.classes().get()] {
div class="inner" { div class="wrapper__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Main => PrepareMarkup::With(html! { WrapperType::Main => PrepareMarkup::With(html! {
main id=[self.id()] class=[self.classes().get()] { main id=[self.id()] class=[self.classes().get()] {
div class="inner" { div class="wrapper__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Section => PrepareMarkup::With(html! { WrapperType::Section => PrepareMarkup::With(html! {
section id=[self.id()] class=[self.classes().get()] { section id=[self.id()] class=[self.classes().get()] {
div class="inner" { div class="wrapper__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Header => PrepareMarkup::With(html! { WrapperType::Header => PrepareMarkup::With(html! {
header id=[self.id()] class=[self.classes().get()] { header id=[self.id()] class=[self.classes().get()] {
div class="inner" { div class="wrapper__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Footer => PrepareMarkup::With(html! { WrapperType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] { footer id=[self.id()] class=[self.classes().get()] {
div class="inner" { div class="wrapper__inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
@ -81,25 +81,25 @@ impl ComponentTrait for Wrapper {
impl Wrapper { impl Wrapper {
pub fn main() -> Self { 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.wrapper_type = WrapperType::Main;
c c
} }
pub fn section() -> Self { 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.wrapper_type = WrapperType::Section;
c c
} }
pub fn header() -> Self { 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.wrapper_type = WrapperType::Header;
c c
} }
pub fn footer() -> Self { 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.wrapper_type = WrapperType::Footer;
c c
} }

14
src/core/theme/definition.rs
View file

@ -26,8 +26,8 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
html! {} html! {}
} else { } else {
html! { html! {
div id=[OptionId::new(region_name).get()] class="pt-region" { div id=[OptionId::new(region_name).get()] class="region__container" {
div class="pt-region__inner" { div class="region__inner" {
(render_region) (render_region)
} }
} }
@ -44,16 +44,16 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
html! { html! {
body id=[page.body_id().get()] class=[page.body_classes().get()] { body id=[page.body_id().get()] class=[page.body_classes().get()] {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { @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) } a href=(skip_to) { (skip) }
} }
} }
div class="pt-body__wrapper" { div class="body__container" {
div class="pt-body__regions" { div class="body__inner" {
(self.prepare_region(page, "header")) (self.prepare_region(page, "header"))
(self.prepare_region(page, "pagetop")) (self.prepare_region(page, "pagetop"))
div class="pt-content" { div class="content__container" {
div class="pt-content__inner" { div class="content__inner" {
(self.prepare_region(page, "content")) (self.prepare_region(page, "content"))
(self.prepare_region(page, "sidebar")) (self.prepare_region(page, "sidebar"))
} }

2
static/base/css/basic.css
View file

@ -1,3 +1,3 @@
.pt-body__skip { .skip__to_content {
display: none; display: none;
} }

178
static/base/css/buttons.css
View file

@ -1,115 +1,115 @@
[class^="pt-button"] { [class^="button__"] {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
color: var(--pt-color--white); color: var(--val-color--white);
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: var(--pt-border-radius); border-radius: var(--val-border-radius);
padding: var(--pt-gap-0-35) var(--pt-gap-0-75); padding: var(--val-gap-0-35) var(--val-gap-0-75);
transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out;
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
} }
[class^="pt-button"] > span { [class^="button__"] > span {
margin: 0 var(--pt-gap-0-15); margin: 0 var(--val-gap-0-15);
} }
.pt-button__default { .button__default {
background-color: var(--pt-color--default); background-color: var(--val-color--default);
} }
.pt-button__default:hover { .button__default:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--default-dark); background-color: var(--val-color--default-dark);
} }
.pt-button__default:active, .button__default:active,
.pt-button__default:disabled { .button__default:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--default-light); background-color: var(--val-color--default-light);
} }
.pt-button__info { .button__info {
background-color: var(--pt-color--info); background-color: var(--val-color--info);
} }
.pt-button__info:hover { .button__info:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--info-dark); background-color: var(--val-color--info-dark);
} }
.pt-button__info:active, .button__info:active,
.pt-button__info:disabled { .button__info:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--info-light); background-color: var(--val-color--info-light);
} }
.pt-button__success { .button__success {
background-color: var(--pt-color--success); background-color: var(--val-color--success);
} }
.pt-button__success:hover { .button__success:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--success-dark); background-color: var(--val-color--success-dark);
} }
.pt-button__success:active, .button__success:active,
.pt-button__success:disabled { .button__success:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--success-light); background-color: var(--val-color--success-light);
} }
.pt-button__warning { .button__warning {
background-color: var(--pt-color--warning); background-color: var(--val-color--warning);
} }
.pt-button__warning:hover { .button__warning:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--warning-dark); background-color: var(--val-color--warning-dark);
} }
.pt-button__warning:active, .button__warning:active,
.pt-button__warning:disabled { .button__warning:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--warning-light); background-color: var(--val-color--warning-light);
} }
.pt-button__danger { .button__danger {
background-color: var(--pt-color--danger); background-color: var(--val-color--danger);
} }
.pt-button__danger:hover { .button__danger:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--danger-dark); background-color: var(--val-color--danger-dark);
} }
.pt-button__danger:active, .button__danger:active,
.pt-button__danger:disabled { .button__danger:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--danger-light); background-color: var(--val-color--danger-light);
} }
.pt-button__light { .button__light {
color: var(--pt-color--text); color: var(--val-color--text);
background-color: var(--pt-color--light); background-color: var(--val-color--light);
} }
.pt-button__light:hover { .button__light:hover {
color: var(--pt-color--text); color: var(--val-color--text);
background-color: var(--pt-color--light-dark); background-color: var(--val-color--light-dark);
} }
.pt-button__light:active, .button__light:active,
.pt-button__light:disabled { .button__light:disabled {
color: var(--pt-color--text); color: var(--val-color--text);
background-color: var(--pt-color--light-light); background-color: var(--val-color--light-light);
} }
.pt-button__dark { .button__dark {
background-color: var(--pt-color--dark); background-color: var(--val-color--dark);
} }
.pt-button__dark:hover { .button__dark:hover {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--dark-dark); background-color: var(--val-color--dark-dark);
} }
.pt-button__dark:active, .button__dark:active,
.pt-button__dark:disabled { .button__dark:disabled {
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--dark-light); background-color: var(--val-color--dark-light);
} }
.pt-button__link { .button__link {
color: var(--pt-color--default); 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; background-color: #00d1b2;
border-color: #00d1b2; border-color: #00d1b2;
box-shadow: none box-shadow: none
} }
.pt-button__default.is-inverted { .button__default.is-inverted {
background-color: #fff; background-color: #fff;
color: #00d1b2 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 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; background-color: #fff;
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
color: #00d1b2 color: #00d1b2
} }
.pt-button__default.is-loading::after { .button__default.is-loading::after {
border-color: transparent transparent #fff #fff!important border-color: transparent transparent #fff #fff!important
} }
.pt-button__default.is-outlined { .button__default.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #00d1b2; border-color: #00d1b2;
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; background-color: #00d1b2;
border-color: #00d1b2; border-color: #00d1b2;
color: #fff color: #fff
} }
.pt-button__default.is-outlined.is-loading::after { .button__default.is-outlined.is-loading::after {
border-color: transparent transparent #00d1b2 #00d1b2!important 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 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; background-color: transparent;
border-color: #00d1b2; border-color: #00d1b2;
box-shadow: none; box-shadow: none;
color: #00d1b2 color: #00d1b2
} }
.pt-button__default.is-inverted.is-outlined { .button__default.is-inverted.is-outlined {
background-color: transparent; background-color: transparent;
border-color: #fff; border-color: #fff;
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; background-color: #fff;
color: #00d1b2 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 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; background-color: transparent;
border-color: #fff; border-color: #fff;
box-shadow: none; box-shadow: none;
color: #fff color: #fff
} }
.pt-button__default.is-light { .button__default.is-light {
background-color: #ebfffc; background-color: #ebfffc;
color: #00947e 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; background-color: #defffa;
border-color: transparent; border-color: transparent;
color: #00947e 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; background-color: #d1fff8;
border-color: transparent; border-color: transparent;
color: #00947e color: #00947e

226
static/base/css/flex.css
View file

@ -1,6 +1,6 @@
/* CONTAINERS */ /* CONTAINERS */
.pt-flex__container { .flex__container {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
@ -9,371 +9,371 @@
width: 100%; width: 100%;
padding: 0 !important; padding: 0 !important;
} }
.pt-flex__row, .flex__row,
.pt-flex__col.pt-bp__none { .flex__col.bp__none {
flex-direction: column; flex-direction: column;
} }
.pt-flex__row.pt-flex__reverse, .flex__row.flex__reverse,
.pt-flex__col.pt-flex__reverse.pt-bp__none { .flex__col.flex__reverse.bp__none {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col, .flex__col,
.pt-flex__row.pt-bp__none { .flex__row.bp__none {
flex-direction: row; flex-direction: row;
} }
.pt-flex__col.pt-flex__reverse, .flex__col.flex__reverse,
.pt-flex__row.pt-flex__reverse.pt-bp__none { .flex__row.flex__reverse.bp__none {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__wrap { .flex__wrap {
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.pt-flex__wrap-reverse { .flex__wrap-reverse {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
align-content: flex-start; align-content: flex-start;
} }
.pt-flex__align-end { .flex__align-end {
align-content: flex-end; align-content: flex-end;
} }
.pt-flex__align-center { .flex__align-center {
align-content: center; align-content: center;
} }
.pt-flex__align-stretch { .flex__align-stretch {
align-content: stretch; align-content: stretch;
} }
.pt-flex__align-space-between { .flex__align-space-between {
align-content: space-between; align-content: space-between;
} }
.pt-flex__align-space-around { .flex__align-space-around {
align-content: space-around; align-content: space-around;
} }
.pt-flex__justify-end { .flex__justify-end {
justify-content: flex-end; justify-content: flex-end;
} }
.pt-flex__justify-center { .flex__justify-center {
justify-content: center; justify-content: center;
} }
.pt-flex__justify-space-between { .flex__justify-space-between {
justify-content: space-between; justify-content: space-between;
} }
.pt-flex__justify-space-around { .flex__justify-space-around {
justify-content: space-around; justify-content: space-around;
} }
.pt-flex__justify-space-evenly { .flex__justify-space-evenly {
justify-content: space-evenly; justify-content: space-evenly;
} }
.pt-flex__container.pt-flex__item-bottom { .flex__container.flex-item__bottom {
align-items: flex-end; align-items: flex-end;
} }
.pt-flex__container.pt-flex__item-middle { .flex__container.flex-item__middle {
align-items: center; align-items: center;
} }
.pt-flex__container.pt-flex__item-stretch { .flex__container.flex-item__stretch {
align-items: stretch; align-items: stretch;
} }
.pt-flex__container.pt-flex__item-baseline { .flex__container.flex-item__baseline {
align-items: baseline; align-items: baseline;
} }
/* ITEMS */ /* ITEMS */
.pt-flex__item { .flex-item__container {
padding: 0 !important; padding: 0 !important;
} }
.pt-flex__grow-1 { .flex-item__grow-1 {
flex-grow: 1; flex-grow: 1;
} }
.pt-flex__grow-2 { .flex-item__grow-2 {
flex-grow: 2; flex-grow: 2;
} }
.pt-flex__grow-3 { .flex-item__grow-3 {
flex-grow: 3; flex-grow: 3;
} }
.pt-flex__grow-4 { .flex-item__grow-4 {
flex-grow: 4; flex-grow: 4;
} }
.pt-flex__grow-5 { .flex-item__grow-5 {
flex-grow: 5; flex-grow: 5;
} }
.pt-flex__grow-6 { .flex-item__grow-6 {
flex-grow: 6; flex-grow: 6;
} }
.pt-flex__grow-7 { .flex-item__grow-7 {
flex-grow: 7; flex-grow: 7;
} }
.pt-flex__grow-8 { .flex-item__grow-8 {
flex-grow: 8; flex-grow: 8;
} }
.pt-flex__grow-9 { .flex-item__grow-9 {
flex-grow: 9; flex-grow: 9;
} }
.pt-flex__shrink-1 { .flex-item__shrink-1 {
flex-shrink: 1; flex-shrink: 1;
} }
.pt-flex__shrink-2 { .flex-item__shrink-2 {
flex-shrink: 2; flex-shrink: 2;
} }
.pt-flex__shrink-3 { .flex-item__shrink-3 {
flex-shrink: 3; flex-shrink: 3;
} }
.pt-flex__shrink-4 { .flex-item__shrink-4 {
flex-shrink: 4; flex-shrink: 4;
} }
.pt-flex__shrink-5 { .flex-item__shrink-5 {
flex-shrink: 5; flex-shrink: 5;
} }
.pt-flex__shrink-6 { .flex-item__shrink-6 {
flex-shrink: 6; flex-shrink: 6;
} }
.pt-flex__shrink-7 { .flex-item__shrink-7 {
flex-shrink: 7; flex-shrink: 7;
} }
.pt-flex__shrink-8 { .flex-item__shrink-8 {
flex-shrink: 8; flex-shrink: 8;
} }
.pt-flex__shrink-9 { .flex-item__shrink-9 {
flex-shrink: 9; flex-shrink: 9;
} }
.pt-flex__width-10 { .flex-item__width-10 {
flex: 0 0 10%; flex: 0 0 10%;
max-width: 10%; max-width: 10%;
} }
.pt-flex__width-20 { .flex-item__width-20 {
flex: 0 0 20%; flex: 0 0 20%;
max-width: 20%; max-width: 20%;
} }
.pt-flex__width-25 { .flex-item__width-25 {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
} }
.pt-flex__width-33 { .flex-item__width-33 {
flex: 0 0 33.3333%; flex: 0 0 33.3333%;
max-width: 33.3333%; max-width: 33.3333%;
} }
.pt-flex__width-40 { .flex-item__width-40 {
flex: 0 0 40%; flex: 0 0 40%;
max-width: 40%; max-width: 40%;
} }
.pt-flex__width-50 { .flex-item__width-50 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 50%; max-width: 50%;
} }
.pt-flex__width-60 { .flex-item__width-60 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 60%; max-width: 60%;
} }
.pt-flex__width-66 { .flex-item__width-66 {
flex: 0 0 66.6666%; flex: 0 0 66.6666%;
max-width: 66.6666%; max-width: 66.6666%;
} }
.pt-flex__width-75 { .flex-item__width-75 {
flex: 0 0 75%; flex: 0 0 75%;
max-width: 75%; max-width: 75%;
} }
.pt-flex__width-80 { .flex-item__width-80 {
flex: 0 0 80%; flex: 0 0 80%;
max-width: 80%; max-width: 80%;
} }
.pt-flex__width-90 { .flex-item__width-90 {
flex: 0 0 90%; flex: 0 0 90%;
max-width: 90%; max-width: 90%;
} }
.pt-flex__offset-10 { .flex-item__offset-10 {
margin-left: 10%; margin-left: 10%;
} }
.pt-flex__offset-20 { .flex-item__offset-20 {
margin-left: 20%; margin-left: 20%;
} }
.pt-flex__offset-25 { .flex-item__offset-25 {
margin-left: 25%; margin-left: 25%;
} }
.pt-flex__offset-33 { .flex-item__offset-33 {
margin-left: 33.3333%; margin-left: 33.3333%;
} }
.pt-flex__offset-40 { .flex-item__offset-40 {
margin-left: 40%; margin-left: 40%;
} }
.pt-flex__offset-50 { .flex-item__offset-50 {
margin-left: 50%; margin-left: 50%;
} }
.pt-flex__offset-60 { .flex-item__offset-60 {
margin-left: 60%; margin-left: 60%;
} }
.pt-flex__offset-66 { .flex-item__offset-66 {
margin-left: 66.6666%; margin-left: 66.6666%;
} }
.pt-flex__offset-75 { .flex-item__offset-75 {
margin-left: 75%; margin-left: 75%;
} }
.pt-flex__offset-80 { .flex-item__offset-80 {
margin-left: 80%; margin-left: 80%;
} }
.pt-flex__offset-90 { .flex-item__offset-90 {
margin-left: 90%; margin-left: 90%;
} }
.pt-flex__item.pt-flex__item-top { .flex-item__container.flex-item__top {
align-self: flex-start; align-self: flex-start;
} }
.pt-flex__item.pt-flex__item-bottom { .flex-item__container.flex-item__bottom {
align-self: flex-end; align-self: flex-end;
} }
.pt-flex__item.pt-flex__item-middle { .flex-item__container.flex-item__middle {
align-self: center; align-self: center;
} }
.pt-flex__item.pt-flex__item-stretch { .flex-item__container.flex-item__stretch {
align-self: stretch; align-self: stretch;
} }
.pt-flex__item.pt-flex__item-baseline { .flex-item__container.flex-item__baseline {
align-self: baseline; align-self: baseline;
} }
/* BREAKPOINTS */ /* BREAKPOINTS */
/* SM - Applies <= 568px */ /* SM - Applies <= 568px */
@media screen and (max-width: 35.5em) { @media screen and (max-width: 35.5rem) {
.pt-flex__row.pt-bp__sm { .flex__row.bp__sm {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__sm { .flex__row.flex__reverse.bp__sm {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__sm { .flex__col.bp__sm {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__sm { .flex__col.flex__reverse.bp__sm {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__sm .pt-flex__item { .flex__col.bp__sm .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* MD - Applies <= 768px */ /* MD - Applies <= 768px */
@media screen and (max-width: 48em) { @media screen and (max-width: 48rem) {
.pt-flex__row.pt-bp__md { .flex__row.bp__md {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__md { .flex__row.flex__reverse.bp__md {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__md { .flex__col.bp__md {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__md { .flex__col.flex__reverse.bp__md {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__md .pt-flex__item { .flex__col.bp__md .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62rem) {
.pt-flex__row.pt-bp__lg { .flex__row.bp__lg {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__lg { .flex__row.flex__reverse.bp__lg {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__lg { .flex__col.bp__lg {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__lg { .flex__col.flex__reverse.bp__lg {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__lg .pt-flex__item { .flex__col.bp__lg .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* XL - Applies <= 1280px */ /* XL - Applies <= 1280px */
@media screen and (max-width: 80em) { @media screen and (max-width: 80rem) {
.pt-flex__row.pt-bp__xl { .flex__row.bp__xl {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__xl { .flex__row.flex__reverse.bp__xl {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__xl { .flex__col.bp__xl {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__xl { .flex__col.flex__reverse.bp__xl {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__xl .pt-flex__item { .flex__col.bp__xl .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* X2L - Applies <= 1440px */ /* X2L - Applies <= 1440px */
@media screen and (max-width: 90em) { @media screen and (max-width: 90rem) {
.pt-flex__row.pt-bp__x2l { .flex__row.bp__x2l {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__x2l { .flex__row.flex__reverse.bp__x2l {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__x2l { .flex__col.bp__x2l {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__x2l { .flex__col.flex__reverse.bp__x2l {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__x2l .pt-flex__item { .flex__col.bp__x2l .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* X3L - Applies <= 1920px */ /* X3L - Applies <= 1920px */
@media screen and (max-width: 120em) { @media screen and (max-width: 120rem) {
.pt-flex__row.pt-bp__x3l { .flex__row.bp__x3l {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__x3l { .flex__row.flex__reverse.bp__x3l {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__x3l { .flex__col.bp__x3l {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__x3l { .flex__col.flex__reverse.bp__x3l {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__x3l .pt-flex__item { .flex__col.bp__x3l .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* X2K - Applies <= 2560px */ /* X2K - Applies <= 2560px */
@media screen and (max-width: 120em) { @media screen and (max-width: 120rem) {
.pt-flex__row.pt-bp__x2k { .flex__row.bp__x2k {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.pt-bp__x2k { .flex__row.flex__reverse.bp__x2k {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.pt-bp__x2k { .flex__col.bp__x2k {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.pt-bp__x2k { .flex__col.flex__reverse.bp__x2k {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.pt-bp__x2k .pt-flex__item { .flex__col.bp__x2k .flex-item__container {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;

76
static/base/css/inception.css
View file

@ -4,12 +4,12 @@ html {
body { body {
margin: 0; margin: 0;
font-family: var(--pt-font-family); font-family: var(--val-font-family);
font-size: var(--pt-fs--base); font-size: var(--val-fs--base);
font-weight: var(--pt-fw--base); font-weight: var(--val-fw--base);
line-height: var(--pt-lh--base); line-height: var(--val-lh--base);
color: var(--pt-color--text); color: var(--val-color--text);
background-color: var(--pt-color--bg); background-color: var(--val-color--bg);
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -18,84 +18,84 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-top: 0; margin-top: 0;
margin-bottom: var(--pt-gap-0-35); margin-bottom: var(--val-gap-0-35);
font-weight: var(--pt-fw--bold); font-weight: var(--val-fw--bold);
line-height: var(--pt-lh--header); line-height: var(--val-lh--header);
} }
h1 { h1 {
font-size: var(--pt-fs--x3l); font-size: var(--val-fs--x3l);
} }
h2 { h2 {
font-size: var(--pt-fs--x2l); font-size: var(--val-fs--x2l);
} }
h3 { h3 {
font-size: var(--pt-fs--xl); font-size: var(--val-fs--xl);
} }
h4 { h4 {
font-size: var(--pt-fs--l); font-size: var(--val-fs--l);
} }
h5 { h5 {
font-size: var(--pt-fs--m); font-size: var(--val-fs--m);
} }
h6 { h6 {
font-size: var(--pt-fs--base); font-size: var(--val-fs--base);
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62rem) {
h1 { h1 {
font-size: calc(var(--pt-fs--l) + 1.25vw); font-size: calc(var(--val-fs--l) + 1.25vw);
} }
h2 { h2 {
font-size: calc(var(--pt-fs--l) + 0.6vw); font-size: calc(var(--val-fs--l) + 0.6vw);
} }
h3 { h3 {
font-size: calc(var(--pt-fs--m) + 0.6vw); font-size: calc(var(--val-fs--m) + 0.6vw);
} }
h4 { h4 {
font-size: calc(var(--pt-fs--m) + 0.3vw); font-size: calc(var(--val-fs--m) + 0.3vw);
} }
} }
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: var(--pt-gap-0-75); margin-bottom: var(--val-gap-0-75);
} }
a { a {
color: var(--pt-color--default); color: var(--val-color--default);
transition: color .15s ease-in-out; transition: color .15s ease-in-out;
} }
a:hover { a:hover {
color: var(--pt-color--default-dark); color: var(--val-color--default-dark);
} }
a:active { a:active {
color: var(--pt-color--default-light); color: var(--val-color--default-light);
} }
/* LAYOUT */ /* LAYOUT */
#header > .pt-region__inner, #header > .region__inner,
.pt-content__inner, .content__inner,
#footer > .pt-region__inner { #footer > .region__inner {
width: 100%; width: 100%;
max-width: var(--pt-max-width); max-width: var(--val-max-width);
margin: 0 auto; margin: 0 auto;
} }
#header { #header {
background: var(--pt-color--white); background: var(--val-color--white);
} }
.pt-content__inner { .content__inner {
background: var(--pt-color--white); background: var(--val-color--white);
} }
#footer { #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 { #footer > .region__inner {
color: var(--pt-color--gray-65); color: var(--val-color--gray-65);
background: var(--pt-color--gray-20); background: var(--val-color--gray-20);
padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap)); padding: calc(3 * var(--val-gap)) 0 calc(12 * var(--val-gap));
} }
#footer > .pt-region__inner a { #footer > .region__inner a {
color: var(--pt-color--white); color: var(--val-color--white);
} }

158
static/base/css/looks.css
View file

@ -1,14 +1,14 @@
/* SKIP TO MAIN CONTENT */ /* SKIP TO MAIN CONTENT */
.pt-body__skip { .skip__to_content {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.pt-body__skip a { .skip__to_content a {
display: block; display: block;
padding: var(--pt-gap-0-5) var(--pt-gap-1-5); padding: var(--val-gap-0-5) var(--val-gap-1-5);
color: var(--pt-color--white); color: var(--val-color--white);
background-color: var(--pt-color--gray-5); background-color: var(--val-color--gray-5);
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
position: absolute; position: absolute;
@ -16,55 +16,55 @@
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
z-index: 9999; z-index: 9999;
} }
.pt-body__skip a:after { .skip__to_content a:after {
content: "\0020 ➔"; content: "\0020 ➔";
} }
.pt-body__skip a:focus { .skip__to_content a:focus {
transform: translateY(0%); transform: translateY(0%);
} }
/* TYPOGRAPHY */ /* TYPOGRAPHY */
.pt-fs__x3l { .fs__x3l {
font-size: var(--pt-fs--x3l) !important; font-size: var(--val-fs--x3l) !important;
} }
.pt-fs__x2l { .fs__x2l {
font-size: var(--pt-fs--x2l) !important; font-size: var(--val-fs--x2l) !important;
} }
.pt-fs__xl { .fs__xl {
font-size: var(--pt-fs--xl) !important; font-size: var(--val-fs--xl) !important;
} }
.pt-fs__l { .fs__l {
font-size: var(--pt-fs--l) !important; font-size: var(--val-fs--l) !important;
} }
.pt-fs__m { .fs__m {
font-size: var(--pt-fs--m) !important; font-size: var(--val-fs--m) !important;
} }
.pt-fs__s { .fs__s {
font-size: var(--pt-fs--s) !important; font-size: var(--val-fs--s) !important;
} }
.pt-fs__xs { .fs__xs {
font-size: var(--pt-fs--xs) !important; font-size: var(--val-fs--xs) !important;
} }
.pt-fs__x2s { .fs__x2s {
font-size: var(--pt-fs--x2s) !important; font-size: var(--val-fs--x2s) !important;
} }
.pt-fs__x3s { .fs__x3s {
font-size: var(--pt-fs--x3s) !important; font-size: var(--val-fs--x3s) !important;
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62rem) {
.pt-fs__x3l { .fs__x3l {
font-size: calc(var(--pt-fs--l) + 1.25vw) !important; font-size: calc(var(--val-fs--l) + 1.25vw) !important;
} }
.pt-fs__x2l { .fs__x2l {
font-size: calc(var(--pt-fs--l) + 0.6vw) !important; font-size: calc(var(--val-fs--l) + 0.6vw) !important;
} }
.pt-fs__xl { .fs__xl {
font-size: calc(var(--pt-fs--m) + 0.6vw) !important; font-size: calc(var(--val-fs--m) + 0.6vw) !important;
} }
.pt-fs__l { .fs__l {
font-size: calc(var(--pt-fs--m) + 0.3vw) !important; font-size: calc(var(--val-fs--m) + 0.3vw) !important;
} }
} }
@ -72,93 +72,93 @@
/* Heading component */ /* Heading component */
.pt-heading__title-x3l, .heading__title-x3l,
.pt-heading__title-x2l, .heading__title-x2l,
.pt-heading__title-xl, .heading__title-xl,
.pt-heading__title-l, .heading__title-l,
.pt-heading__title-m, .heading__title-m,
.pt-heading__subtitle { .heading__subtitle {
font-weight: var(--pt-fw--light); font-weight: var(--val-fw--light);
} }
.pt-heading__title-x3l { .heading__title-x3l {
font-size: calc(var(--pt-fs--x3l) * 2); font-size: calc(var(--val-fs--x3l) * 2);
} }
.pt-heading__title-x2l { .heading__title-x2l {
font-size: calc(var(--pt-fs--x3l) * 1.8); font-size: calc(var(--val-fs--x3l) * 1.8);
} }
.pt-heading__title-xl { .heading__title-xl {
font-size: calc(var(--pt-fs--x3l) * 1.6); font-size: calc(var(--val-fs--x3l) * 1.6);
} }
.pt-heading__title-l { .heading__title-l {
font-size: calc(var(--pt-fs--x3l) * 1.4); font-size: calc(var(--val-fs--x3l) * 1.4);
} }
.pt-heading__title-m { .heading__title-m {
font-size: calc(var(--pt-fs--x3l) * 1.2); font-size: calc(var(--val-fs--x3l) * 1.2);
} }
.pt-heading__subtitle { .heading__subtitle {
margin-top: calc(-1 * var(--pt-gap-0-5)); margin-top: calc(-1 * var(--val-gap-0-5));
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62rem) {
.pt-heading__title-x3l { .heading__title-x3l {
font-size: calc((var(--pt-fs--x3l) / 1.5) + 4.5vw); font-size: calc((var(--val-fs--x3l) / 1.5) + 4.5vw);
} }
.pt-heading__title-x2l { .heading__title-x2l {
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.9vw); font-size: calc((var(--val-fs--x3l) / 1.6) + 3.9vw);
} }
.pt-heading__title-xl { .heading__title-xl {
font-size: calc((var(--pt-fs--x3l) / 1.6) + 3.3vw); font-size: calc((var(--val-fs--x3l) / 1.6) + 3.3vw);
} }
.pt-heading__title-l { .heading__title-l {
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.7vw); font-size: calc((var(--val-fs--x3l) / 1.7) + 2.7vw);
} }
.pt-heading__title-m { .heading__title-m {
font-size: calc((var(--pt-fs--x3l) / 1.7) + 2.1vw); font-size: calc((var(--val-fs--x3l) / 1.7) + 2.1vw);
} }
} }
/* Image component */ /* Image component */
.pt-img__fluid { .img__fluid {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/* Branding component */ /* Branding component */
.pt-branding__wrapper { .branding__inner {
display: flex; display: flex;
align-items: flex-end; 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; letter-spacing: 0.02em;
font-size: var(--pt-fs--l); font-size: var(--val-fs--l);
} }
.pt-branding__slogan { .branding__slogan {
font-size: var(--pt-fs--m); font-size: var(--val-fs--m);
} }
/* SM - Applies <= 568px */ /* SM - Applies <= 568px */
@media (max-width: 35.5em) { @media (max-width: 35.5rem) {
.pt-branding__logo { .branding__logo {
display: none; display: none;
} }
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media (max-width: 62em) { @media (max-width: 62rem) {
.pt-branding__slogan { .branding__slogan {
font-size: var(--pt-fs--base); font-size: var(--val-fs--base);
} }
} }
/* PoweredBy component */ /* PoweredBy component */
#pt-poweredby { .poweredby__container {
text-align: center; text-align: center;
} }
.pt-poweredby__logo img, .poweredby__logo img,
.pt-poweredby__logo svg { .poweredby__logo svg {
margin-left: .275em; margin-left: .275em;
height: 1.275em; height: 1.275em;
vertical-align: middle; vertical-align: middle;

176
static/base/css/menu.css
View file

@ -1,4 +1,4 @@
.pt-menu__container { .menu__container {
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0; margin: 0;
@ -6,123 +6,123 @@
z-index: 999; z-index: 999;
border: none; border: none;
outline: none; outline: none;
background: var(--pt-menu--color-bg); background: var(--val-menu--color-bg);
} }
.pt-menu__wrapper { .menu__inner {
margin-right: var(--pt-menu--item-gap); margin-right: var(--val-menu--item-gap);
} }
.pt-menu__wrapper a, .menu__inner a,
.pt-menu__wrapper button { .menu__inner button {
cursor: pointer; cursor: pointer;
border: none; border: none;
background: none; background: none;
text-decoration: none; text-decoration: none;
} }
.pt-menu__nav ul { .menu__nav ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.pt-menu__nav li { .menu__nav li {
display: inline-block; display: inline-block;
margin: 0 0 0 1.5rem; margin: 0 0 0 1.5rem;
padding: var(--pt-menu--line-padding) 0; padding: var(--val-menu--line-padding) 0;
line-height: var(--pt-menu--line-height); line-height: var(--val-menu--line-height);
list-style: none; list-style: none;
list-style-type: none; list-style-type: none;
} }
.pt-menu__nav li.pt-menu__label, .menu__nav li.menu__label,
.pt-menu__nav li > a { .menu__nav li > a {
position: relative; position: relative;
font-weight: 500; font-weight: 500;
color: var(--pt-color--text); color: var(--val-color--text);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
.pt-menu__nav li > a { .menu__nav li > a {
border: none; border: none;
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
} }
.pt-menu__nav li:hover > a, .menu__nav li:hover > a,
.pt-menu__nav li > a:focus { .menu__nav li > a:focus {
color: var(--pt-menu--color-highlight); 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; margin-left: 0.25rem;
} }
.pt-menu__nav li .pt-menu__subs { .menu__nav li .menu__subs {
position: absolute; position: absolute;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
padding: 1rem 2rem; padding: 1rem 2rem;
border: none; border: none;
outline: none; outline: none;
background: var(--pt-menu--color-bg); background: var(--val-menu--color-bg);
border-radius: var(--pt-menu--border-radius); border-radius: var(--val-menu--border-radius);
border-top: 3px solid var(--pt-menu--color-highlight); border-top: 3px solid var(--val-menu--color-highlight);
z-index: 500; z-index: 500;
opacity: 0; opacity: 0;
visibility: hidden; 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; transition: all 0.5s ease-in-out;
} }
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs, .menu__nav li.menu__children:hover > .menu__subs,
.pt-menu__nav li.pt-menu__children > a:focus + .pt-menu__subs, .menu__nav li.menu__children > a:focus + .menu__subs,
.pt-menu__nav li.pt-menu__children .pt-menu__subs:focus-within { .menu__nav li.menu__children .menu__subs:focus-within {
margin-top: 0.4rem; margin-top: 0.4rem;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.pt-menu__nav li .pt-menu__items { .menu__nav li .menu__items {
min-width: var(--pt-menu--item-width-min); min-width: var(--val-menu--item-width-min);
max-width: var(--pt-menu--item-width-max); 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-family: inherit;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
padding: var(--pt-menu--line-padding) 0; padding: var(--val-menu--line-padding) 0;
line-height: var(--pt-menu--line-height); line-height: var(--val-menu--line-height);
border: none; border: none;
outline: none; outline: none;
color: var(--pt-menu--color-highlight); color: var(--val-menu--color-highlight);
text-transform: uppercase; text-transform: uppercase;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
.pt-menu__nav li .pt-menu__items li { .menu__nav li .menu__items li {
display: block; display: block;
margin-left: 0; margin-left: 0;
} }
.pt-menu__nav li .pt-menu__mega { .menu__nav li .menu__mega {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
.pt-menu__nav li .pt-menu__groups { .menu__nav li .menu__groups {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.pt-menu__header, .menu__header,
.pt-menu__trigger { .menu__trigger {
display: none; display: none;
} }
/* Applies <= 992px */ /* Applies <= 992px */
@media only screen and (max-width: 62em) { @media only screen and (max-width: 62rem) {
.pt-menu__wrapper { .menu__container {
margin-left: var(--pt-menu--item-gap); margin-left: var(--val-menu--item-gap);
} }
.pt-menu__trigger { .menu__trigger {
cursor: pointer; cursor: pointer;
width: var(--pt-menu--trigger-width); width: var(--val-menu--trigger-width);
height: var(--pt-menu--item-height); height: var(--val-menu--item-height);
border: none; border: none;
outline: none; outline: none;
background: none; background: none;
@ -130,54 +130,54 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.pt-menu__trigger span { .menu__trigger span {
width: 100%; width: 100%;
height: 2px; height: 2px;
margin: 12.675% 0; margin: 12.675% 0;
border-radius: var(--pt-border-radius); border-radius: var(--val-border-radius);
background: var(--pt-color--text); background: var(--val-color--text);
} }
.pt-menu__nav { .menu__nav {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: var(--pt-menu--side-width); width: var(--val-menu--side-width);
height: 100%; height: 100%;
z-index: 1099; z-index: 1099;
overflow: hidden; overflow: hidden;
background: var(--pt-menu--color-bg); background: var(--val-menu--color-bg);
transform: translate(-100%); transform: translate(-100%);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.pt-menu__main .pt-menu__nav.active { .menu__main .menu__nav.active {
transform: translate(0%); transform: translate(0%);
} }
.pt-menu__nav li { .menu__nav li {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.pt-menu__nav li.pt-menu__label, .menu__nav li.menu__label,
.pt-menu__nav li > a { .menu__nav li > a {
display: block; display: block;
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap); 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(--pt-menu--color-border); border-bottom: 1px solid var(--val-menu--color-border);
} }
.pt-menu__nav li ul li.pt-menu__label, .menu__nav li ul li.menu__label,
.pt-menu__nav li ul li > a { .menu__nav li ul li > a {
border-bottom: 0; border-bottom: 0;
} }
.pt-menu__nav li > a > i.pt-menu__icon { .menu__nav li > a > i.menu__icon {
position: absolute; position: absolute;
top: var(--pt-menu--line-padding); top: var(--val-menu--line-padding);
right: var(--pt-menu--line-padding); right: var(--val-menu--line-padding);
font-size: 1.25rem; font-size: 1.25rem;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.pt-menu__nav li .pt-menu__subs { .menu__nav li .menu__subs {
position: absolute; position: absolute;
display: none; display: none;
top: 0; top: 0;
@ -195,65 +195,65 @@
transform: translateX(0%); transform: translateX(0%);
box-shadow: none; box-shadow: none;
} }
.pt-menu__nav li .pt-menu__subs.active { .menu__nav li .menu__subs.active {
display: block; display: block;
} }
.pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs { .menu__nav li.menu__children:hover > .menu__subs {
margin-top: 0; margin-top: 0;
} }
.pt-menu__nav li .pt-menu__items .pt-menu__title { .menu__nav li .menu__items .menu__title {
padding: var(--pt-menu--line-padding) var(--pt-menu--item-height) var(--pt-menu--line-padding) var(--pt-menu--item-gap); 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; display: block;
} }
.pt-menu__nav .pt-menu__header { .menu__nav .menu__header {
position: sticky; position: sticky;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
top: 0; top: 0;
height: var(--pt-menu--item-height); height: var(--val-menu--item-height);
border-bottom: 1px solid var(--pt-menu--color-border); border-bottom: 1px solid var(--val-menu--color-border);
background: var(--pt-menu--color-bg); background: var(--val-menu--color-bg);
z-index: 501; z-index: 501;
} }
.pt-menu__nav .pt-menu__header .pt-menu__title { .menu__nav .menu__header .menu__title {
padding: var(--pt-menu--line-padding); padding: var(--val-menu--line-padding);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.pt-menu__nav .pt-menu__header .pt-menu__close, .menu__nav .menu__header .menu__close,
.pt-menu__nav .pt-menu__header .pt-menu__arrow { .menu__nav .menu__header .menu__arrow {
width: var(--pt-menu--item-height); width: var(--val-menu--item-height);
min-width: var(--pt-menu--item-height); min-width: var(--val-menu--item-height);
height: var(--pt-menu--item-height); height: var(--val-menu--item-height);
line-height: var(--pt-menu--item-height); line-height: var(--val-menu--item-height);
color: var(--pt-color--text); color: var(--val-color--text);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.pt-menu__nav .pt-menu__header .pt-menu__close { .menu__nav .menu__header .menu__close {
font-size: 2.25rem; 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; font-size: 1.25rem;
border-right: 1px solid var(--pt-menu--color-border); border-right: 1px solid var(--val-menu--color-border);
display: none; display: none;
} }
.pt-menu__nav .pt-menu__header.active .pt-menu__arrow { .menu__nav .menu__header.active .menu__arrow {
display: flex; display: flex;
} }
.pt-menu__nav .pt-menu__section { .menu__nav .menu__section {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -261,7 +261,7 @@
margin: 0; margin: 0;
} }
.pt-menu__overlay { .menu__overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -273,7 +273,7 @@
background: rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.55);
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.pt-menu__overlay.active { .menu__overlay.active {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }

212
static/base/css/root.css
View file

@ -1,67 +1,67 @@
:root { :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"; --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";
--pt-font-serif: "Lora","georgia",serif; --val-font-serif: "Lora","georgia",serif;
--pt-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --val-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--pt-font-family: var(--pt-font-sans); --val-font-family: var(--val-font-sans);
/* Font size */ /* Font size */
--pt-fs--x3l: 2.5rem; --val-fs--x3l: 2.5rem;
--pt-fs--x2l: 2rem; --val-fs--x2l: 2rem;
--pt-fs--xl: 1.75rem; --val-fs--xl: 1.75rem;
--pt-fs--l: 1.5rem; --val-fs--l: 1.5rem;
--pt-fs--m: 1.25rem; --val-fs--m: 1.25rem;
--pt-fs--base: 1rem; --val-fs--base: 1rem;
--pt-fs--s: 0.875rem; --val-fs--s: 0.875rem;
--pt-fs--xs: 0.75rem; --val-fs--xs: 0.75rem;
--pt-fs--x2s: 0.5625rem; --val-fs--x2s: 0.5625rem;
--pt-fs--x3s: 0.375rem; --val-fs--x3s: 0.375rem;
/* Font weight */ /* Font weight */
--pt-fw--light: 300; --val-fw--light: 300;
--pt-fw--base: 400; --val-fw--base: 400;
--pt-fw--bold: 500; --val-fw--bold: 500;
/* Line height */ /* Line height */
--pt-lh--base: 1.5; --val-lh--base: 1.5;
--pt-lh--header: 1.2; --val-lh--header: 1.2;
--pt-max-width: 90rem; --val-max-width: 90rem;
/* /*
--pt-color-rgb: 33,37,41; --val-color-rgb: 33,37,41;
--pt-main--bg-rgb: 255,255,255; --val-main--bg-rgb: 255,255,255;
--pt-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --val-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--line-height-base: 1.6875rem; --line-height-base: 1.6875rem;
--line-height-s: 1.125rem; --line-height-s: 1.125rem;
--max-bg-color: 98.125rem; --max-bg-color: 98.125rem;
*/ */
--pt-gap: 1.125em; --val-gap: 1.125rem;
/* /*
--content-left: 5.625rem; --content-left: 5.625rem;
--site-header-height-wide: var(--pt-gap10); --site-header-height-wide: var(--val-gap10);
--container-padding: var(--pt-gap); --container-padding: var(--val-gap);
*/ */
} }
/* /*
@media (min-width: 75rem) { @media (min-width: 75rem) {
:root { :root {
--container-padding:var(--pt-gap2); --container-padding:var(--val-gap2);
} }
} }
:root { :root {
--scrollbar-width: 0px; --scrollbar-width: 0px;
--grid-col-count: 6; --grid-col-count: 6;
--grid-gap: var(--pt-gap); --grid-gap: var(--val-gap);
--grid-gap-count: calc(var(--grid-col-count) - 1); --grid-gap-count: calc(var(--grid-col-count) - 1);
--grid-full-width: calc(100vw - var(--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)); --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
} }
@media (min-width: 43.75rem) { @media (min-width: 43.75rem) {
:root { :root {
--grid-col-count:14; --grid-col-count:14;
--grid-gap: var(--pt-gap2); --grid-gap: var(--val-gap2);
} }
} }
@ -73,89 +73,89 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
:root { :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) { @media (min-width: 90rem) {
:root { :root {
--grid-full-width:calc(var(--max-width) - var(--pt-gap4)); --grid-full-width:calc(var(--max-width) - var(--val-gap4));
} }
} }
*/ */
:root { :root {
--pt-gap-0-15: calc(0.15 * var(--pt-gap)); --val-gap-0-15: calc(0.15 * var(--val-gap));
--pt-gap-0-25: calc(0.25 * var(--pt-gap)); --val-gap-0-25: calc(0.25 * var(--val-gap));
--pt-gap-0-35: calc(0.35 * var(--pt-gap)); --val-gap-0-35: calc(0.35 * var(--val-gap));
--pt-gap-0-5: calc(0.5 * var(--pt-gap)); --val-gap-0-5: calc(0.5 * var(--val-gap));
--pt-gap-0-75: calc(0.75 * var(--pt-gap)); --val-gap-0-75: calc(0.75 * var(--val-gap));
--pt-gap-1-5: calc(1.5 * var(--pt-gap)); --val-gap-1-5: calc(1.5 * var(--val-gap));
--pt-gap-2: calc(2 * var(--pt-gap)); --val-gap-2: calc(2 * var(--val-gap));
--pt-color--default-hue: 216; --val-color--default-hue: 216;
--pt-color--default-sat: 60%; --val-color--default-sat: 60%;
--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%); --val-color--default-light: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 60%);
--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%); --val-color--default-dark: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 40%);
--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%); --val-color--default: hsl(var(--val-color--default-hue), var(--val-color--default-sat), 50%);
--pt-color--info-hue: 190; --val-color--info-hue: 190;
--pt-color--info-sat: 90%; --val-color--info-sat: 90%;
--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%); --val-color--info-light: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 60%);
--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%); --val-color--info-dark: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 40%);
--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%); --val-color--info: hsl(var(--val-color--info-hue), var(--val-color--info-sat), 50%);
--pt-color--success-hue: 150; --val-color--success-hue: 150;
--pt-color--success-sat: 50%; --val-color--success-sat: 50%;
--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%); --val-color--success-light: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 60%);
--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%); --val-color--success-dark: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 40%);
--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%); --val-color--success: hsl(var(--val-color--success-hue), var(--val-color--success-sat), 50%);
--pt-color--warning-hue: 44; --val-color--warning-hue: 44;
--pt-color--warning-sat: 100%; --val-color--warning-sat: 100%;
--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%); --val-color--warning-light: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 60%);
--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%); --val-color--warning-dark: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 48%);
--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%); --val-color--warning: hsl(var(--val-color--warning-hue), var(--val-color--warning-sat), 50%);
--pt-color--danger-hue: 348; --val-color--danger-hue: 348;
--pt-color--danger-sat: 86%; --val-color--danger-sat: 86%;
--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%); --val-color--danger-light: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 60%);
--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%); --val-color--danger-dark: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 40%);
--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%); --val-color--danger: hsl(var(--val-color--danger-hue), var(--val-color--danger-sat), 50%);
--pt-color--light-hue: 0; --val-color--light-hue: 0;
--pt-color--light-sat: 0%; --val-color--light-sat: 0%;
--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%); --val-color--light-light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 98%);
--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%); --val-color--light-dark: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 92%);
--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%); --val-color--light: hsl(var(--val-color--light-hue), var(--val-color--light-sat), 96%);
--pt-color--dark-hue: 0; --val-color--dark-hue: 0;
--pt-color--dark-sat: 0%; --val-color--dark-sat: 0%;
--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%); --val-color--dark-light: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 40%);
--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%); --val-color--dark-dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 8%);
--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%); --val-color--dark: hsl(var(--val-color--dark-hue), var(--val-color--dark-sat), 25%);
--pt-color--gray-hue: 201; --val-color--gray-hue: 201;
--pt-color--gray-sat: 15%; --val-color--gray-sat: 15%;
--pt-color--gray-5: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 5%); --val-color--gray-5: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 5%);
--pt-color--gray-10: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat) ,11%); --val-color--gray-10: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat) ,11%);
--pt-color--gray-20: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat),20%); --val-color--gray-20: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat),20%);
--pt-color--gray-45: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 44%); --val-color--gray-45: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 44%);
--pt-color--gray-60: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 57%); --val-color--gray-60: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 57%);
--pt-color--gray-65: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 63%); --val-color--gray-65: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 63%);
--pt-color--gray-70: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 72%); --val-color--gray-70: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 72%);
--pt-color--gray-90: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 88%); --val-color--gray-90: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 88%);
--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%); --val-color--gray-95: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 93%);
--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%); --val-color--gray-100: hsl(var(--val-color--gray-hue), var(--val-color--gray-sat), 97%);
--pt-color--bg: #fafafa; --val-color--bg: #fafafa;
--pt-color--text: #212529; --val-color--text: #212529;
--pt-color--white: #fff; --val-color--white: #fff;
/* /*
@ -163,31 +163,31 @@
--color-text-neutral-soft: var(--color--gray-45); --color-text-neutral-soft: var(--color--gray-45);
--color-text-neutral-medium: var(--color--gray-20); --color-text-neutral-medium: var(--color--gray-20);
--color-text-neutral-loud: var(--color--gray-5); --color-text-neutral-loud: var(--color--gray-5);
--color-text-primary-medium: var(--pt-color--default-40); --color-text-primary-medium: var(--val-color--default-40);
--color-text-primary-loud: var(--pt-color--default-30); --color-text-primary-loud: var(--val-color--default-30);
--color--black: #000; --color--black: #000;
*/ */
/* /*
--color--red: #e33f1e; --color--red: #e33f1e;
--color--gold: #fdca40; --color--gold: #fdca40;
--color--green: #3fa21c; --color--green: #3fa21c;
--header-height-wide-when-fixed: calc(6 * var(--pt-gap)); --header-height-wide-when-fixed: calc(6 * var(--val-gap));
--mobile-nav-width: 31.25rem; --mobile-nav-width: 31.25rem;
*/ */
--pt-border-radius: 0.375rem; --val-border-radius: 0.375rem;
/* Menu component */ /* Menu component */
--pt-menu--color-bg: var(--pt-color--bg); --val-menu--color-bg: var(--val-color--bg);
--pt-menu--color-highlight: #e91e63; --val-menu--color-highlight: #e91e63;
--pt-menu--color-border: rgba(0, 0, 0, 0.1); --val-menu--color-border: rgba(0, 0, 0, 0.1);
--pt-menu--color-shadow: rgba(0, 0, 0, 0.06); --val-menu--color-shadow: rgba(0, 0, 0, 0.06);
--pt-menu--line-padding: 0.625rem; --val-menu--line-padding: 0.625rem;
--pt-menu--line-height: 1.875rem; --val-menu--line-height: 1.875rem;
--pt-menu--item-height: calc(var(--pt-menu--line-padding) + var(--pt-menu--line-height)); --val-menu--item-height: calc(var(--val-menu--line-padding) + var(--val-menu--line-height));
--pt-menu--item-width-min: 14rem; --val-menu--item-width-min: 14rem;
--pt-menu--item-width-max: 20rem; --val-menu--item-width-max: 20rem;
--pt-menu--item-gap: 1rem; --val-menu--item-gap: 1rem;
--pt-menu--border-radius: 0.625rem; --val-menu--border-radius: 0.625rem;
--pt-menu--trigger-width: var(--pt-menu--item-height); --val-menu--trigger-width: var(--val-menu--item-height);
--pt-menu--side-width: 20rem; --val-menu--side-width: 20rem;
} }

34
static/base/css/welcome.css
View file

@ -16,11 +16,11 @@
padding-top: 0; padding-top: 0;
} }
#welcome [class$="-col-text"] > .inner { #welcome [class$="-col-text"] > .flex-item__inner {
margin: 5% 5% 0; margin: 5% 5% 0;
text-align: center; text-align: center;
} }
#welcome [class$="-col-image"] > .inner { #welcome [class$="-col-image"] > .flex-item__inner {
margin: 1rem 5%; margin: 1rem 5%;
} }
@ -28,7 +28,7 @@
text-align: center; text-align: center;
margin: 0 5%; margin: 0 5%;
} }
#welcome .welcome > .inner { #welcome .welcome > .wrapper__inner {
padding: 2rem 1rem; padding: 2rem 1rem;
border-radius: 28px; border-radius: 28px;
background: url("/base/images/welcome.jpg") center center no-repeat; background: url("/base/images/welcome.jpg") center center no-repeat;
@ -36,39 +36,39 @@
background-size: cover; background-size: cover;
color: #fff; color: #fff;
} }
#welcome .welcome > .inner > h2 { #welcome .welcome > .wrapper__inner > h2 {
color: #fff; color: #fff;
} }
#welcome .welcome > .inner > h3 { #welcome .welcome > .wrapper__inner > h3 {
color: #ccc; color: #ccc;
} }
#welcome .promo-col-image > .inner { #welcome .promo-col-image > .flex-item__inner {
padding: 0 5%; padding: 0 5%;
} }
#welcome .issues-col-image > .inner img { #welcome .issues-col-image > .flex-item__inner img {
border-radius: 40px; border-radius: 40px;
} }
/* BREAKPOINTS */ /* BREAKPOINTS */
/* MD - Applies >= 768px */ /* MD - Applies >= 768px */
@media screen and (min-width: 48em) { @media screen and (min-width: 48rem) {
#welcome .promo-col-image > .inner { #welcome .promo-col-image > .flex-item__inner {
padding: 0; padding: 0;
} }
#welcome .issues { #welcome .issues {
padding-top: 1.6rem; padding-top: 1.6rem;
} }
#welcome .issues-col-text > .inner { #welcome .issues-col-text > .flex-item__inner {
text-align: left; text-align: left;
} }
} }
/* LG - Applies >= 992px */ /* LG - Applies >= 992px */
@media screen and (min-width: 62em) { @media screen and (min-width: 62rem) {
#welcome .hello-col-text > .inner { #welcome .hello-col-text > .flex-item__inner {
margin-top: 2rem; margin-top: 2rem;
text-align: left; text-align: left;
} }
@ -77,19 +77,19 @@
padding: 0 15% 2rem; padding: 0 15% 2rem;
} }
#welcome .promo-col-text > .inner { #welcome .promo-col-text > .flex-item__inner {
margin-right: 0; margin-right: 0;
text-align: right; text-align: right;
} }
} }
/* XL - Applies >= 1280px */ /* XL - Applies >= 1280px */
@media screen and (min-width: 80em) { @media screen and (min-width: 80rem) {
#welcome .hello-col-text > .inner { #welcome .hello-col-text > .flex-item__inner {
margin-top: 4rem; margin-top: 4rem;
margin-left: 20%; margin-left: 20%;
} }
#welcome .pagetop-col-text > .inner { #welcome .pagetop-col-text > .flex-item__inner {
text-align: left; text-align: left;
} }
} }

69
static/base/js/menu.js
View file

@ -1,15 +1,15 @@
function pt_menu__showChildren(nav, children) { function menu__showChildren(nav, children) {
let submenu = children[0].querySelector('.pt-menu__subs'); let submenu = children[0].querySelector('.menu__subs');
submenu.classList.add('active'); submenu.classList.add('active');
submenu.style.animation = 'slideLeft 0.5s ease forwards'; submenu.style.animation = 'slideLeft 0.5s ease forwards';
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent; let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
nav.querySelector('.pt-menu__title').innerHTML = title; nav.querySelector('.menu__title').innerHTML = title;
nav.querySelector('.pt-menu__header').classList.add('active'); nav.querySelector('.menu__header').classList.add('active');
} }
function pt_menu__hideChildren(nav, children) { function menu__hideChildren(nav, children) {
let submenu = children[0].querySelector('.pt-menu__subs'); let submenu = children[0].querySelector('.menu__subs');
submenu.style.animation = 'slideRight 0.5s ease forwards'; submenu.style.animation = 'slideRight 0.5s ease forwards';
setTimeout(() => { setTimeout(() => {
submenu.classList.remove('active'); submenu.classList.remove('active');
@ -19,70 +19,69 @@ function pt_menu__hideChildren(nav, children) {
children.shift(); children.shift();
if (children.length > 0) { if (children.length > 0) {
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent; let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
nav.querySelector('.pt-menu__title').innerHTML = title; nav.querySelector('.menu__title').innerHTML = title;
} else { } else {
nav.querySelector('.pt-menu__header').classList.remove('active'); nav.querySelector('.menu__header').classList.remove('active');
nav.querySelector('.pt-menu__title').innerHTML = ''; nav.querySelector('.menu__title').innerHTML = '';
} }
} }
function pt_menu__toggle(nav, overlay) { function menu__toggle(nav, overlay) {
nav.classList.toggle('active'); nav.classList.toggle('active');
overlay.classList.toggle('active'); overlay.classList.toggle('active');
} }
function pt_menu__reset(menu, nav) { function menu__reset(menu, nav) {
nav.querySelector('.pt-menu__header').classList.remove('active'); nav.querySelector('.menu__header').classList.remove('active');
nav.querySelector('.pt-menu__title').innerHTML = ''; nav.querySelector('.menu__title').innerHTML = '';
menu.querySelectorAll('.pt-menu__subs').forEach(submenu => { menu.querySelectorAll('.menu__subs').forEach(submenu => {
submenu.classList.remove('active'); submenu.classList.remove('active');
submenu.style.removeProperty("animation"); submenu.style.removeProperty("animation");
}); });
} }
document.querySelectorAll('.pt-menu__container').forEach(menu => { document.querySelectorAll('.menu__container').forEach(menu => {
let menuChildren = []; let menuChildren = [];
const menuNav = menu.querySelector('.pt-menu__nav'); const menuNav = menu.querySelector('.menu__nav');
const menuOverlay = menu.querySelector('.pt-menu__overlay'); const menuOverlay = menu.querySelector('.menu__overlay');
menu.querySelector('.pt-menu__section').addEventListener('click', (e) => { menu.querySelector('.menu__section').addEventListener('click', (e) => {
if (!menuNav.classList.contains('active')) { if (menuNav.classList.contains('active')) {
return; let target = e.target.closest('.menu__children');
} if (target && target != menuChildren[0]) {
let target = e.target.closest('.pt-menu__children'); menuChildren.unshift(target);
if (target && target != menuChildren[0]) { menu__showChildren(menuNav, menuChildren);
menuChildren.unshift(target); }
pt_menu__showChildren(menuNav, menuChildren);
} }
}); });
menu.querySelector('.pt-menu__arrow').addEventListener('click', () => { menu.querySelector('.menu__arrow').addEventListener('click', () => {
pt_menu__hideChildren(menuNav, menuChildren); menu__hideChildren(menuNav, menuChildren);
}); });
menu.querySelector('.pt-menu__close').addEventListener('click', () => { menu.querySelector('.menu__close').addEventListener('click', () => {
pt_menu__toggle(menuNav, menuOverlay); menu__toggle(menuNav, menuOverlay);
setTimeout(() => { setTimeout(() => {
pt_menu__reset(menu, menuNav); menu__reset(menu, menuNav);
menuChildren = []; menuChildren = [];
}, 300); }, 300);
}); });
menu.querySelector('.pt-menu__trigger').addEventListener('click', () => { menu.querySelector('.menu__trigger').addEventListener('click', () => {
pt_menu__toggle(menuNav, menuOverlay); menu__toggle(menuNav, menuOverlay);
}); });
menuOverlay.addEventListener('click', () => { menuOverlay.addEventListener('click', () => {
pt_menu__toggle(menuNav, menuOverlay); menu__toggle(menuNav, menuOverlay);
}); });
window.onresize = function () { window.onresize = function () {
if (this.innerWidth >= 992) { if (this.innerWidth >= 992) {
if (menuNav.classList.contains('active')) { if (menuNav.classList.contains('active')) {
pt_menu__toggle(menuNav, menuOverlay); menu__toggle(menuNav, menuOverlay);
setTimeout(() => { setTimeout(() => {
pt_menu__reset(menu, menuNav); menu__reset(menu, menuNav);
menuChildren = []; menuChildren = [];
}, 300); }, 300);
} }