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

🧑‍💻 Enhance flexbox class names

Browse source
This commit is contained in:
Manuel Cillero 2023-10-18 21:53:45 +02:00
parent 0595ecc1e2
commit fc3836593e
3 changed files with 182 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

143
pagetop/src/base/component/flex.rs
View file

@ -22,19 +22,34 @@ impl ToString for Direction {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
Direction::Default => { Direction::Default => {
concat_string!("flex-container flex-row ", BreakPoint::default().to_string()) concat_string!(
"pt-flex__container pt-flex__row ",
BreakPoint::default().to_string()
)
} }
Direction::Row(breakpoint) => { Direction::Row(breakpoint) => {
concat_string!("flex-container flex-row ", breakpoint.to_string()) concat_string!(
"pt-flex__container pt-flex__row ",
breakpoint.to_string()
)
} }
Direction::RowReverse(breakpoint) => { Direction::RowReverse(breakpoint) => {
concat_string!("flex-container flex-row flex-reverse ", breakpoint.to_string()) concat_string!(
"pt-flex__container pt-flex__row pt-flex__reverse ",
breakpoint.to_string()
)
} }
Direction::Column(breakpoint) => { Direction::Column(breakpoint) => {
concat_string!("flex-container flex-col ", breakpoint.to_string()) concat_string!(
"pt-flex__container pt-flex__col ",
breakpoint.to_string()
)
} }
Direction::ColumnReverse(breakpoint) => { Direction::ColumnReverse(breakpoint) => {
concat_string!("flex-container flex-col flex-reverse ", breakpoint.to_string()) concat_string!(
"pt-flex__container pt-flex__col pt-flex__reverse ",
breakpoint.to_string()
)
} }
} }
} }
@ -57,8 +72,8 @@ impl ToString for WrapAlign {
match self { match self {
WrapAlign::Default => "".to_string(), WrapAlign::Default => "".to_string(),
WrapAlign::NoWrap => "flex-nowrap".to_string(), WrapAlign::NoWrap => "flex-nowrap".to_string(),
WrapAlign::Wrap(a) => concat_string!("flex-wrap ", a.to_string()), WrapAlign::Wrap(a) => concat_string!("pt-flex__wrap ", a.to_string()),
WrapAlign::WrapReverse(a) => concat_string!("flex-wrap-reverse ", a.to_string()), WrapAlign::WrapReverse(a) => concat_string!("pt-flex__wrap-reverse ", a.to_string()),
} }
} }
} }
@ -82,12 +97,12 @@ impl ToString for ContentAlign {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ContentAlign::Default => "".to_string(), ContentAlign::Default => "".to_string(),
ContentAlign::Start => "flex-align-start".to_string(), ContentAlign::Start => "pt-flex__align-start".to_string(),
ContentAlign::End => "flex-align-end".to_string(), ContentAlign::End => "pt-flex__align-end".to_string(),
ContentAlign::Center => "flex-align-center".to_string(), ContentAlign::Center => "pt-flex__align-center".to_string(),
ContentAlign::Stretch => "flex-align-stretch".to_string(), ContentAlign::Stretch => "pt-flex__align-stretch".to_string(),
ContentAlign::SpaceBetween => "flex-align-space-between".to_string(), ContentAlign::SpaceBetween => "pt-flex__align-space-between".to_string(),
ContentAlign::SpaceAround => "flex-align-space-around".to_string(), ContentAlign::SpaceAround => "pt-flex__align-space-around".to_string(),
} }
} }
} }
@ -111,12 +126,12 @@ impl ToString for ContentJustify {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ContentJustify::Default => "".to_string(), ContentJustify::Default => "".to_string(),
ContentJustify::Start => "flex-justify-start".to_string(), ContentJustify::Start => "pt-flex__justify-start".to_string(),
ContentJustify::End => "flex-justify-end".to_string(), ContentJustify::End => "pt-flex__justify-end".to_string(),
ContentJustify::Center => "flex-justify-center".to_string(), ContentJustify::Center => "pt-flex__justify-center".to_string(),
ContentJustify::SpaceBetween => "flex-justify-space-between".to_string(), ContentJustify::SpaceBetween => "pt-flex__justify-space-between".to_string(),
ContentJustify::SpaceAround => "flex-justify-space-around".to_string(), ContentJustify::SpaceAround => "pt-flex__justify-space-around".to_string(),
ContentJustify::SpaceEvenly => "flex-justify-space-evenly".to_string(), ContentJustify::SpaceEvenly => "pt-flex__justify-space-evenly".to_string(),
} }
} }
} }
@ -139,11 +154,11 @@ impl ToString for ItemAlign {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ItemAlign::Default => "".to_string(), ItemAlign::Default => "".to_string(),
ItemAlign::Top => "flex-item-top".to_string(), ItemAlign::Top => "pt-flex__item-top".to_string(),
ItemAlign::Bottom => "flex-item-bottom".to_string(), ItemAlign::Bottom => "pt-flex__item-bottom".to_string(),
ItemAlign::Middle => "flex-item-middle".to_string(), ItemAlign::Middle => "pt-flex__item-middle".to_string(),
ItemAlign::Stretch => "flex-item-stretch".to_string(), ItemAlign::Stretch => "pt-flex__item-stretch".to_string(),
ItemAlign::Baseline => "flex-item-baseline".to_string(), ItemAlign::Baseline => "pt-flex__item-baseline".to_string(),
} }
} }
} }
@ -195,15 +210,15 @@ impl ToString for ItemGrow {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ItemGrow::Default => "".to_string(), ItemGrow::Default => "".to_string(),
ItemGrow::Is1 => "flex-grow-1".to_string(), ItemGrow::Is1 => "pt-flex__grow-1".to_string(),
ItemGrow::Is2 => "flex-grow-2".to_string(), ItemGrow::Is2 => "pt-flex__grow-2".to_string(),
ItemGrow::Is3 => "flex-grow-3".to_string(), ItemGrow::Is3 => "pt-flex__grow-3".to_string(),
ItemGrow::Is4 => "flex-grow-4".to_string(), ItemGrow::Is4 => "pt-flex__grow-4".to_string(),
ItemGrow::Is5 => "flex-grow-5".to_string(), ItemGrow::Is5 => "pt-flex__grow-5".to_string(),
ItemGrow::Is6 => "flex-grow-6".to_string(), ItemGrow::Is6 => "pt-flex__grow-6".to_string(),
ItemGrow::Is7 => "flex-grow-7".to_string(), ItemGrow::Is7 => "pt-flex__grow-7".to_string(),
ItemGrow::Is8 => "flex-grow-8".to_string(), ItemGrow::Is8 => "pt-flex__grow-8".to_string(),
ItemGrow::Is9 => "flex-grow-9".to_string(), ItemGrow::Is9 => "pt-flex__grow-9".to_string(),
} }
} }
} }
@ -230,15 +245,15 @@ impl ToString for ItemShrink {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ItemShrink::Default => "".to_string(), ItemShrink::Default => "".to_string(),
ItemShrink::Is1 => "flex-shrink-1".to_string(), ItemShrink::Is1 => "pt-flex__shrink-1".to_string(),
ItemShrink::Is2 => "flex-shrink-2".to_string(), ItemShrink::Is2 => "pt-flex__shrink-2".to_string(),
ItemShrink::Is3 => "flex-shrink-3".to_string(), ItemShrink::Is3 => "pt-flex__shrink-3".to_string(),
ItemShrink::Is4 => "flex-shrink-4".to_string(), ItemShrink::Is4 => "pt-flex__shrink-4".to_string(),
ItemShrink::Is5 => "flex-shrink-5".to_string(), ItemShrink::Is5 => "pt-flex__shrink-5".to_string(),
ItemShrink::Is6 => "flex-shrink-6".to_string(), ItemShrink::Is6 => "pt-flex__shrink-6".to_string(),
ItemShrink::Is7 => "flex-shrink-7".to_string(), ItemShrink::Is7 => "pt-flex__shrink-7".to_string(),
ItemShrink::Is8 => "flex-shrink-8".to_string(), ItemShrink::Is8 => "pt-flex__shrink-8".to_string(),
ItemShrink::Is9 => "flex-shrink-9".to_string(), ItemShrink::Is9 => "pt-flex__shrink-9".to_string(),
} }
} }
} }
@ -267,17 +282,17 @@ impl ToString for ItemSize {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ItemSize::Default => "".to_string(), ItemSize::Default => "".to_string(),
ItemSize::Percent10 => "flex-width-10".to_string(), ItemSize::Percent10 => "pt-flex__width-10".to_string(),
ItemSize::Percent20 => "flex-width-20".to_string(), ItemSize::Percent20 => "pt-flex__width-20".to_string(),
ItemSize::Percent25 => "flex-width-25".to_string(), ItemSize::Percent25 => "pt-flex__width-25".to_string(),
ItemSize::Percent33 => "flex-width-33".to_string(), ItemSize::Percent33 => "pt-flex__width-33".to_string(),
ItemSize::Percent40 => "flex-width-40".to_string(), ItemSize::Percent40 => "pt-flex__width-40".to_string(),
ItemSize::Percent50 => "flex-width-50".to_string(), ItemSize::Percent50 => "pt-flex__width-50".to_string(),
ItemSize::Percent60 => "flex-width-60".to_string(), ItemSize::Percent60 => "pt-flex__width-60".to_string(),
ItemSize::Percent66 => "flex-width-66".to_string(), ItemSize::Percent66 => "pt-flex__width-66".to_string(),
ItemSize::Percent75 => "flex-width-75".to_string(), ItemSize::Percent75 => "pt-flex__width-75".to_string(),
ItemSize::Percent80 => "flex-width-80".to_string(), ItemSize::Percent80 => "pt-flex__width-80".to_string(),
ItemSize::Percent90 => "flex-width-90".to_string(), ItemSize::Percent90 => "pt-flex__width-90".to_string(),
} }
} }
} }
@ -306,17 +321,17 @@ impl ToString for ItemOffset {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
ItemOffset::Default => "".to_string(), ItemOffset::Default => "".to_string(),
ItemOffset::Offset10 => "flex-offset-10".to_string(), ItemOffset::Offset10 => "pt-flex__offset-10".to_string(),
ItemOffset::Offset20 => "flex-offset-20".to_string(), ItemOffset::Offset20 => "pt-flex__offset-20".to_string(),
ItemOffset::Offset25 => "flex-offset-25".to_string(), ItemOffset::Offset25 => "pt-flex__offset-25".to_string(),
ItemOffset::Offset33 => "flex-offset-33".to_string(), ItemOffset::Offset33 => "pt-flex__offset-33".to_string(),
ItemOffset::Offset40 => "flex-offset-40".to_string(), ItemOffset::Offset40 => "pt-flex__offset-40".to_string(),
ItemOffset::Offset50 => "flex-offset-50".to_string(), ItemOffset::Offset50 => "pt-flex__offset-50".to_string(),
ItemOffset::Offset60 => "flex-offset-60".to_string(), ItemOffset::Offset60 => "pt-flex__offset-60".to_string(),
ItemOffset::Offset66 => "flex-offset-66".to_string(), ItemOffset::Offset66 => "pt-flex__offset-66".to_string(),
ItemOffset::Offset75 => "flex-offset-75".to_string(), ItemOffset::Offset75 => "pt-flex__offset-75".to_string(),
ItemOffset::Offset80 => "flex-offset-80".to_string(), ItemOffset::Offset80 => "pt-flex__offset-80".to_string(),
ItemOffset::Offset90 => "flex-offset-90".to_string(), ItemOffset::Offset90 => "pt-flex__offset-90".to_string(),
} }
} }
} }

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

@ -23,8 +23,8 @@ pub struct Item {
impl ComponentTrait for Item { impl ComponentTrait for Item {
fn new() -> Self { fn new() -> Self {
Item::default() Item::default()
.with_item_classes(ClassesOp::SetDefault, "flex-item") .with_item_classes(ClassesOp::SetDefault, "pt-flex__item")
.with_inner_classes(ClassesOp::SetDefault, "flex-item-inner") .with_inner_classes(ClassesOp::SetDefault, "pt-flex__item-inner")
} }
fn handle(&self) -> Handle { fn handle(&self) -> Handle {

202
pagetop/static/base/css/flex.css
View file

@ -1,6 +1,6 @@
/* CONTAINERS */ /* CONTAINERS */
.flex-container { .pt-flex__container {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
@ -9,231 +9,231 @@
width: 100%; width: 100%;
padding: 0 !important; padding: 0 !important;
} }
.flex-row, .pt-flex__row,
.flex-col.bp-no { .pt-flex__col.bp-no {
flex-direction: column; flex-direction: column;
} }
.flex-row.flex-reverse, .pt-flex__row.pt-flex__reverse,
.flex-col.flex-reverse.bp-no { .pt-flex__col.pt-flex__reverse.bp-no {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col, .pt-flex__col,
.flex-row.bp-no { .pt-flex__row.bp-no {
flex-direction: row; flex-direction: row;
} }
.flex-col.flex-reverse, .pt-flex__col.pt-flex__reverse,
.flex-row.flex-reverse.bp-no { .pt-flex__row.pt-flex__reverse.bp-no {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-container.flex-wrap { .pt-flex__wrap {
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.flex-container.flex-wrap-reverse { .pt-flex__wrap-reverse {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
align-content: flex-start; align-content: flex-start;
} }
.flex-container.flex-align-end { .pt-flex__align-end {
align-content: flex-end; align-content: flex-end;
} }
.flex-container.flex-align-center { .pt-flex__align-center {
align-content: center; align-content: center;
} }
.flex-container.flex-align-stretch { .pt-flex__align-stretch {
align-content: stretch; align-content: stretch;
} }
.flex-container.flex-align-space-between { .pt-flex__align-space-between {
align-content: space-between; align-content: space-between;
} }
.flex-container.flex-align-space-around { .pt-flex__align-space-around {
align-content: space-around; align-content: space-around;
} }
.flex-container.flex-justify-end { .pt-flex__justify-end {
justify-content: flex-end; justify-content: flex-end;
} }
.flex-container.flex-justify-center { .pt-flex__justify-center {
justify-content: center; justify-content: center;
} }
.flex-container.flex-justify-space-between { .pt-flex__justify-space-between {
justify-content: space-between; justify-content: space-between;
} }
.flex-container.flex-justify-space-around { .pt-flex__justify-space-around {
justify-content: space-around; justify-content: space-around;
} }
.flex-container.flex-justify-space-evenly { .pt-flex__justify-space-evenly {
justify-content: space-evenly; justify-content: space-evenly;
} }
.flex-container.flex-item-bottom { .pt-flex__container.pt-flex__item-bottom {
align-items: flex-end; align-items: flex-end;
} }
.flex-container.flex-item-middle { .pt-flex__container.pt-flex__item-middle {
align-items: center; align-items: center;
} }
.flex-container.flex-item-stretch { .pt-flex__container.pt-flex__item-stretch {
align-items: stretch; align-items: stretch;
} }
.flex-container.flex-item-baseline { .pt-flex__container.pt-flex__item-baseline {
align-items: baseline; align-items: baseline;
} }
/* ITEMS */ /* ITEMS */
.flex-item { .pt-flex__item {
padding: 0 !important; padding: 0 !important;
} }
.flex-item.flex-grow-1 { .pt-flex__grow-1 {
flex-grow: 1; flex-grow: 1;
} }
.flex-item.flex-grow-2 { .pt-flex__grow-2 {
flex-grow: 2; flex-grow: 2;
} }
.flex-item.flex-grow-3 { .pt-flex__grow-3 {
flex-grow: 3; flex-grow: 3;
} }
.flex-item.flex-grow-4 { .pt-flex__grow-4 {
flex-grow: 4; flex-grow: 4;
} }
.flex-item.flex-grow-5 { .pt-flex__grow-5 {
flex-grow: 5; flex-grow: 5;
} }
.flex-item.flex-grow-6 { .pt-flex__grow-6 {
flex-grow: 6; flex-grow: 6;
} }
.flex-item.flex-grow-7 { .pt-flex__grow-7 {
flex-grow: 7; flex-grow: 7;
} }
.flex-item.flex-grow-8 { .pt-flex__grow-8 {
flex-grow: 8; flex-grow: 8;
} }
.flex-item.flex-grow-9 { .pt-flex__grow-9 {
flex-grow: 9; flex-grow: 9;
} }
.flex-item.flex-shrink-1 { .pt-flex__shrink-1 {
flex-shrink: 1; flex-shrink: 1;
} }
.flex-item.flex-shrink-2 { .pt-flex__shrink-2 {
flex-shrink: 2; flex-shrink: 2;
} }
.flex-item.flex-shrink-3 { .pt-flex__shrink-3 {
flex-shrink: 3; flex-shrink: 3;
} }
.flex-item.flex-shrink-4 { .pt-flex__shrink-4 {
flex-shrink: 4; flex-shrink: 4;
} }
.flex-item.flex-shrink-5 { .pt-flex__shrink-5 {
flex-shrink: 5; flex-shrink: 5;
} }
.flex-item.flex-shrink-6 { .pt-flex__shrink-6 {
flex-shrink: 6; flex-shrink: 6;
} }
.flex-item.flex-shrink-7 { .pt-flex__shrink-7 {
flex-shrink: 7; flex-shrink: 7;
} }
.flex-item.flex-shrink-8 { .pt-flex__shrink-8 {
flex-shrink: 8; flex-shrink: 8;
} }
.flex-item.flex-shrink-9 { .pt-flex__shrink-9 {
flex-shrink: 9; flex-shrink: 9;
} }
.flex-item.flex-width-10 { .pt-flex__width-10 {
flex: 0 0 10%; flex: 0 0 10%;
max-width: 10%; max-width: 10%;
} }
.flex-item.flex-width-20 { .pt-flex__width-20 {
flex: 0 0 20%; flex: 0 0 20%;
max-width: 20%; max-width: 20%;
} }
.flex-item.flex-width-25 { .pt-flex__width-25 {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
} }
.flex-item.flex-width-33 { .pt-flex__width-33 {
flex: 0 0 33.3333%; flex: 0 0 33.3333%;
max-width: 33.3333%; max-width: 33.3333%;
} }
.flex-item.flex-width-40 { .pt-flex__width-40 {
flex: 0 0 40%; flex: 0 0 40%;
max-width: 40%; max-width: 40%;
} }
.flex-item.flex-width-50 { .pt-flex__width-50 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 50%; max-width: 50%;
} }
.flex-item.flex-width-60 { .pt-flex__width-60 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 60%; max-width: 60%;
} }
.flex-item.flex-width-66 { .pt-flex__width-66 {
flex: 0 0 66.6666%; flex: 0 0 66.6666%;
max-width: 66.6666%; max-width: 66.6666%;
} }
.flex-item.flex-width-75 { .pt-flex__width-75 {
flex: 0 0 75%; flex: 0 0 75%;
max-width: 75%; max-width: 75%;
} }
.flex-item.flex-width-80 { .pt-flex__width-80 {
flex: 0 0 80%; flex: 0 0 80%;
max-width: 80%; max-width: 80%;
} }
.flex-item.flex-width-90 { .pt-flex__width-90 {
flex: 0 0 90%; flex: 0 0 90%;
max-width: 90%; max-width: 90%;
} }
.flex-item.flex-offset-10 { .pt-flex__offset-10 {
margin-left: 10%; margin-left: 10%;
} }
.flex-item.flex-offset-20 { .pt-flex__offset-20 {
margin-left: 20%; margin-left: 20%;
} }
.flex-item.flex-offset-25 { .pt-flex__offset-25 {
margin-left: 25%; margin-left: 25%;
} }
.flex-item.flex-offset-33 { .pt-flex__offset-33 {
margin-left: 33.3333%; margin-left: 33.3333%;
} }
.flex-item.flex-offset-40 { .pt-flex__offset-40 {
margin-left: 40%; margin-left: 40%;
} }
.flex-item.flex-offset-50 { .pt-flex__offset-50 {
margin-left: 50%; margin-left: 50%;
} }
.flex-item.flex-offset-60 { .pt-flex__offset-60 {
margin-left: 60%; margin-left: 60%;
} }
.flex-item.flex-offset-66 { .pt-flex__offset-66 {
margin-left: 66.6666%; margin-left: 66.6666%;
} }
.flex-item.flex-offset-75 { .pt-flex__offset-75 {
margin-left: 75%; margin-left: 75%;
} }
.flex-item.flex-offset-80 { .pt-flex__offset-80 {
margin-left: 80%; margin-left: 80%;
} }
.flex-item.flex-offset-90 { .pt-flex__offset-90 {
margin-left: 90%; margin-left: 90%;
} }
.flex-item.flex-item-top { .pt-flex__item.pt-flex__item-top {
align-self: flex-start; align-self: flex-start;
} }
.flex-item.flex-item-bottom { .pt-flex__item.pt-flex__item-bottom {
align-self: flex-end; align-self: flex-end;
} }
.flex-item.flex-item-middle { .pt-flex__item.pt-flex__item-middle {
align-self: center; align-self: center;
} }
.flex-item.flex-item-stretch { .pt-flex__item.pt-flex__item-stretch {
align-self: stretch; align-self: stretch;
} }
.flex-item.flex-item-baseline { .pt-flex__item.pt-flex__item-baseline {
align-self: baseline; align-self: baseline;
} }
@ -241,19 +241,19 @@
/* SM - Applies <= 568px */ /* SM - Applies <= 568px */
@media screen and (max-width: 35.5em) { @media screen and (max-width: 35.5em) {
.flex-row.bp-sm { .pt-flex__row.bp-sm {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-sm { .pt-flex__row.pt-flex__reverse.bp-sm {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-sm { .pt-flex__col.bp-sm {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-sm { .pt-flex__col.pt-flex__reverse.bp-sm {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-sm .flex-item { .pt-flex__col.bp-sm .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -261,19 +261,19 @@
} }
/* MD - Applies <= 768px */ /* MD - Applies <= 768px */
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
.flex-row.bp-md { .pt-flex__row.bp-md {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-md { .pt-flex__row.pt-flex__reverse.bp-md {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-md { .pt-flex__col.bp-md {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-md { .pt-flex__col.pt-flex__reverse.bp-md {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-md .flex-item { .pt-flex__col.bp-md .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -281,19 +281,19 @@
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62em) {
.flex-row.bp-lg { .pt-flex__row.bp-lg {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-lg { .pt-flex__row.pt-flex__reverse.bp-lg {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-lg { .pt-flex__col.bp-lg {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-lg { .pt-flex__col.pt-flex__reverse.bp-lg {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-lg .flex-item { .pt-flex__col.bp-lg .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -301,19 +301,19 @@
} }
/* XL - Applies <= 1280px */ /* XL - Applies <= 1280px */
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
.flex-row.bp-xl { .pt-flex__row.bp-xl {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-xl { .pt-flex__row.pt-flex__reverse.bp-xl {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-xl { .pt-flex__col.bp-xl {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-xl { .pt-flex__col.pt-flex__reverse.bp-xl {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-xl .flex-item { .pt-flex__col.bp-xl .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -321,19 +321,19 @@
} }
/* X2L - Applies <= 1920px */ /* X2L - Applies <= 1920px */
@media screen and (max-width: 120em) { @media screen and (max-width: 120em) {
.flex-row.bp-x2l { .pt-flex__row.bp-x2l {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-x2l { .pt-flex__row.pt-flex__reverse.bp-x2l {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-x2l { .pt-flex__col.bp-x2l {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-x2l { .pt-flex__col.pt-flex__reverse.bp-x2l {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-x2l .flex-item { .pt-flex__col.bp-x2l .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -341,19 +341,19 @@
} }
/* X3L - Applies <= 2560px */ /* X3L - Applies <= 2560px */
@media screen and (max-width: 160em) { @media screen and (max-width: 160em) {
.flex-row.bp-x3l { .pt-flex__row.bp-x3l {
flex-direction: row; flex-direction: row;
} }
.flex-row.flex-reverse.bp-x3l { .pt-flex__row.pt-flex__reverse.bp-x3l {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-col.bp-x3l { .pt-flex__col.bp-x3l {
flex-direction: column; flex-direction: column;
} }
.flex-col.flex-reverse.bp-x3l { .pt-flex__col.pt-flex__reverse.bp-x3l {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.flex-col.bp-x3l .flex-item { .pt-flex__col.bp-x3l .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;