HenriqueSantosSantana/m3-academy-template-checkout-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(checkout-fill): created initial styles in cart more options for small devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-21 11:08:17 -03:00
parent b856181537
commit b5c9339e6c
8 changed files with 598 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -771,6 +771,10 @@
float: none; float: none;
} }
#payment-data {
margin: 0;
}
@media screen and (max-width: 490px) { @media screen and (max-width: 490px) {
.orderform-template-holder .client-profile-data input[type="text"] { .orderform-template-holder .client-profile-data input[type="text"] {
width: 100%; width: 100%;

686
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -1,67 +1,34 @@
.cart-template { .cart-template {
font-family: $font-family-100; font-family: $font-family-100;
@include mq(md, max) { padding: 0;
padding: 0 0;
}
.item-unit-label { .item-unit-label {
display: none; display: none;
} }
.cart {
border: 3px solid $clr-gray-100;
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
@include mq(md, max) { .cart {
margin: 0px 0 25px 0; padding: 16px;
margin: 0 0 25px 0;
border: 1px solid $clr-gray-100;
border-left: none; border-left: none;
border-right: none; border-right: none;
border-radius: 0;
}
}
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
font-family: $font-family-100;
width: 100%;
h2 {
background: $clr-common-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
}
.item-unavailable { box-sizing: border-box;
padding: 0;
&-message {
padding: 8px;
} }
} }
.cart-template {
@media screen and (min-width: 1025px) {
.cart { .cart {
border: 1px solid $clr-gray-300; margin: 0;
border-radius: 5px;
ul li { border: 1px solid $clr-gray-100;
border-top: none;
margin-top: 0;
padding-top: 0;
&:not(:first-child) {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e5e5e5;
}
.shipping-date,
.price {
color: #7d7d7d;
} }
} }
} }
.cart-template {
.cart-fixed {
.summary-template-holder { .summary-template-holder {
border-top: none; border-top: none;
background: $clr-common-white; background: $clr-common-white;
@ -217,8 +184,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 6px auto 0;
max-height: 38px;
max-width: 118px;
padding: 0; padding: 0;
width: max-content !important; width: max-content !important;
@ -243,45 +208,6 @@
width: 24px !important; width: 24px !important;
} }
} }
.icon-plus-sign,
.icon-minus-sign {
&::before {
color: $clr-gray-600;
display: block;
font-weight: 500;
padding: 1px 12px;
}
}
.icon-minus-sign {
&:before {
content: "-";
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
content: "+";
font-size: 14px;
}
}
.item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
top: inherit;
}
@media (max-width: 490px) {
padding: 0;
}
}
} }
.quantity-price, .quantity-price,
@ -345,7 +271,7 @@
padding: 0 16px; padding: 0 16px;
} }
.srp-main-title { /* .srp-main-title {
margin: 32px 0 12px; margin: 32px 0 12px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -356,14 +282,14 @@
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
} } */
.srp-description { /* .srp-description {
color: $clr-gray-400; color: $clr-gray-400;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
} } */
button.shp-open-options { button.shp-open-options {
background-color: $clr-gray-200; background-color: $clr-gray-200;
@ -389,12 +315,6 @@
} }
.srp-data { .srp-data {
width: 280px;
@include mq(cstm, max) {
width: calc(100vw - 32px);
}
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
@include btn-primary-blue-white(); @include btn-primary-blue-white();
@ -419,8 +339,6 @@
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px;
&__wrapper { &__wrapper {
background-color: $clr-common-white; background-color: $clr-common-white;
border-radius: 100px; border-radius: 100px;
@ -453,26 +371,6 @@
.srp-postal-code { .srp-postal-code {
.ship-postalCode { .ship-postalCode {
label {
font-family: $font-family-100;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $clr-gray-600;
margin-bottom: 12px;
}
input {
border: 1px solid $clr-gray-100;
border-radius: 5px;
box-shadow: none;
color: $clr-gray-100;
font-size: 12px;
height: 36px;
padding: 12px 8px;
}
& ~ button { & ~ button {
@include btn-primary-blue-white(); @include btn-primary-blue-white();
@ -734,18 +632,14 @@
display: flex; display: flex;
float: none; float: none;
flex-direction: column; flex-direction: column;
width: 343px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
} }
@include mq(md, min) { @include mq(md, min) {
margin: 0; margin: 0;
padding-bottom: 50px;
} }
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
@ -756,42 +650,24 @@
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 0px;
} }
a {
font-family: $font-family-100;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
}
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
@include btn-primary-blue-black(); @include btn-primary-blue-black();
border-radius: 5px;
display: block; display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px; padding: 12px 19px;
border-radius: 5px;
font-size: 0;
transition: ease-in 0.22s all;
&:hover { &:hover {
background-color: darken($clr-green-500, 5); background-color: darken($clr-green-500, 5);
} }
&:after {
content: "finalizar compra";
font-family: $font-family-100;
font-weight: 500;
font-size: 13px;
color: inherit;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px;
text-shadow: none;
}
} }
} }
} }
@ -803,39 +679,50 @@
#cart-title { #cart-title {
display: flex !important; display: flex !important;
width: 100%; width: 100%;
padding: 0 16px; padding: 0 16px;
text-align: left; text-align: left;
} }
}
.container-cart {
.ship-country { .ship-country {
display: none; display: none;
} }
}
.container-cart {
.cart-template { .cart-template {
.item-quantity-change { .item-quantity-change {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: #00c8ff;
border-radius: 100%; border-radius: 100%;
background: #00c8ff;
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
padding: 0;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 0;
background-color: $clr-common-white; background-color: $clr-common-white;
} }
} }
@ -847,9 +734,11 @@
padding: 0; padding: 0;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2px; width: 2px;
height: 10px; height: 10px;
transform: translate(-50%, -50%);
background-color: $clr-common-white; background-color: $clr-common-white;
} }
@ -867,7 +756,65 @@
} }
} }
} }
}
.container-cart {
.cart-template {
@media (max-width: 490px) {
.item-quantity-change {
padding: 0;
}
}
@media screen and (max-width: 979px) and (min-width: 768px) {
.item-quantity-change {
position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
top: inherit;
}
}
@media screen and (min-width: 2500px) {
.item-quantity-change {
width: 32px;
height: 32px;
.icon-plus-sign {
&::after {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 20px;
background-color: $clr-common-white;
}
&::before {
width: 20px;
height: 4px;
}
}
.icon-minus-sign {
&::before {
width: 20px;
height: 4px;
}
}
}
}
}
}
.container-cart {
.link-coupon-add, .link-coupon-add,
.link-choose-more-products { .link-choose-more-products {
color: $clr-common-black; color: $clr-common-black;
@ -876,7 +823,9 @@
color: $clr-common-black; color: $clr-common-black;
} }
} }
}
.container-cart {
.cart-more-options { .cart-more-options {
padding: 0 16px; padding: 0 16px;
} }
@ -887,6 +836,311 @@
width: 100%; width: 100%;
} }
.srp-container {
max-width: 343px;
margin-bottom: 48.35px;
}
.srp-data {
margin: 0;
}
}
.container-cart {
.cart {
margin-bottom: 48px;
}
.vtex-shipping-preview-0-x-postalCodeForgotten {
gap: 8px;
width: 100%;
margin: 0;
.ship-postalCode {
width: fluid(215px, 343px);
input {
@include font-size("s-200");
width: 100%;
height: 36px;
padding: 12px 8px;
border: 1px solid $clr-gray-450;
border-radius: 5px;
box-shadow: none;
color: $clr-gray-600;
}
}
.srp-pc-input.btn {
width: fluid(120px, 343px);
margin: 6px 0 0;
}
}
}
.container-cart {
.ship-postalCode {
label {
@include font-size("s-200");
line-height: 14.04px;
font-style: normal;
font-weight: normal;
margin-bottom: 2px;
color: $clr-gray-600;
}
}
}
.container-cart {
.cart-template {
.cart-more-options {
float: none;
width: 100%;
padding: 0 16px;
.srp-container {
padding: 0;
}
}
.totalizers {
float: none;
width: 100%;
padding: 0 16px;
margin: 0;
}
.cart-links-bottom {
width: 100%;
padding: 0 16px;
margin: 0;
}
}
}
.container-cart {
.cart-items {
.product-item {
padding: 0;
margin: 0;
.product-price {
margin: 0;
height: 36px;
}
.item-remove {
position: absolute;
top: 0;
right: 0;
transform: translate(20%, -35%);
.icon-remove {
color: #c4c4c4;
}
}
}
}
}
.container-cart {
.cart-template {
.cart-more-options {
#shipping-preview-container {
width: 100%;
max-width: none;
}
}
}
}
.container-cart {
.cart-more-options {
.srp-data,
.srp-toggle {
width: 100%;
}
.srp-toggle {
margin-bottom: 20px;
label {
@include font-size("s-300");
line-height: 19.07px;
}
}
.srp-main-title {
@include font-size("splus-100");
line-height: 32.68px;
font-family: $font-family-100;
margin-bottom: 11px;
color: $clr-common-black;
}
.srp-description {
@include font-size("s-300");
font-weight: 400;
line-height: 18px;
font-family: $font-family-100;
max-width: none;
margin-bottom: 10.65px;
color: $clr-gray-400;
}
}
}
.container-cart {
@media screen and (min-width: 2500px) {
.cart-more-options {
.srp-toggle label {
@include font-size("splus-300");
line-height: 38.13px;
}
.srp-main-title {
@include font-size("sxplus");
line-height: 65px;
}
.srp-description {
@include font-size("splus-300");
line-height: 36px;
}
}
}
}
.container-cart {
.cart-links-bottom {
.link-choose-more-products-wrapper a {
@include font-size("s-200");
line-height: 14.04px;
font-weight: 400;
font-family: $font-family-200;
text-align: center;
}
.btn-place-order-wrapper a {
font-size: 0px;
&::before {
@include font-size("s-300");
content: "Finalizar Compra";
font-weight: 700;
line-height: 19.07px;
font-family: $font-family-100;
letter-spacing: 0.05em;
text-shadow: none;
color: $clr-common-black;
}
}
}
}
.container-cart {
@media screen and (min-width: 2500px) {
.cart-links-bottom {
.link-choose-more-products-wrapper a {
@include font-size("splus-100");
line-height: 28px;
}
.btn-place-order-wrapper a {
&::before {
@include font-size("splus-300");
line-height: 38px;
}
}
}
}
}
.container-cart.container-cart-fill {
@media screen and (min-width: 1025px) {
$width-container: 1018px;
width: fluid($width-container, 1280px);
.cart-template {
display: grid;
grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
354px,
$width-container
);
.cart-template-holder {
grid-area: item;
}
.summary-template-holder {
grid-area: actions;
.row-fluid.summary {
display: grid !important;
grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid(
354px,
$width-container
);
.cart-more-options {
grid-area: options;
padding: 0;
}
.totalizers {
padding: 0;
grid-area: total;
}
}
}
.cart-links-bottom {
grid-area: button;
padding: 0;
}
}
}
}
.container-cart.container-cart-fill {
@media screen and (min-width: 2500px) {
$width-container: 1988.28px;
width: fluid($width-container, 2500px);
.cart-template {
grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
688.35px,
$width-container
);
.summary-template-holder {
.row-fluid.summary {
grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid(
688.35px,
$width-container
);
}
}
}
}
}
//Comecei
/* .container-cart.container-cart-fill {
.cart-template { .cart-template {
th.shipping-date { th.shipping-date {
font-size: 0px; font-size: 0px;
@ -995,10 +1249,6 @@
.cart-template .cart-items th { .cart-template .cart-items th {
vertical-align: top; vertical-align: top;
} }
.cart-template-holder {
padding: 0 16px;
}
} }
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
@ -1095,4 +1345,130 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
} */
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
width: 100% !important;
h2 {
@include font-size("s-400");
line-height: 18.72px;
border: none;
font-weight: 500;
font-family: $font-family-200;
color: #303030;
}
.item-unavailable {
padding: 0;
&-message {
padding: 8px;
}
}
}
.cart-fixed {
@media screen and (min-width: 2500px) {
h2 {
@include font-size("splus-500");
line-height: 37.44px;
}
}
}
.cart-fixed {
.cart {
border: 1px solid $clr-gray-300;
}
}
.cart-fixed {
.cart .cart-items .item {
$width-container: 309px;
display: grid;
grid-template: "product-image product-name space product-price" auto / fluid(
60px,
$width-container
);
align-items: center;
.fn {
overflow: initial;
text-overflow: initial;
white-space: initial;
float: none;
}
.url,
.product-name,
.description {
width: 100%;
}
.url {
grid-area: product-image;
}
.product-name {
grid-area: product-name;
}
}
}
.cart-fixed {
.cart .cart-items {
.item {
.description {
grid-area: product-price;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
height: 100%;
}
margin-top: 0;
padding-top: 0;
border-top: none;
&:not(:first-child) {
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid #e5e5e5;
}
.quantity.badge {
display: none;
}
.shipping-date,
.price {
color: #7d7d7d;
}
}
}
}
.cart-fixed {
@media screen and (min-width: 600px) {
.cart .cart-items .item {
$width-container: 976px;
grid-template:
"product-image product-name space product-price" auto / fluid(
60px,
$width-container
)
fluid(115px, $width-container) auto fluid(62px, $width-container);
}
}
} }

20
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -76,8 +76,8 @@
font-size: 0px; font-size: 0px;
&::before { &::before {
@include text-size("sm"); @include font-size("s-200");
@include text-height("xs", 200); line-height: 24.51px;
content: "Seu carrinho está vazio."; content: "Seu carrinho está vazio.";
text-align: center; text-align: center;
@ -95,8 +95,8 @@
padding: 16px 0; padding: 16px 0;
&::before { &::before {
@include text-size("xs"); @include font-size("s-300");
@include text-height("smaller", 200); line-height: 16px;
content: "Continuar Comprando"; content: "Continuar Comprando";
@ -119,8 +119,8 @@
@include mq("xl") { @include mq("xl") {
.empty-cart-title { .empty-cart-title {
&::before { &::before {
@include text-size("md-200"); @include font-size("splus-100");
@include text-height("md", 300); line-height: 32.68px;
} }
} }
} }
@ -130,8 +130,8 @@
&-content { &-content {
.empty-cart-title { .empty-cart-title {
&::before { &::before {
@include text-size("xxl"); @include font-size("sxplus");
@include text-height("xxl", 200); line-height: 65.37px;
} }
} }
} }
@ -142,8 +142,8 @@
max-width: none; max-width: none;
&::before { &::before {
@include text-size("lg"); @include font-size("splus-200");
@include text-height("lg", 100); line-height: 32.76px;
} }
} }
} }

4
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -108,8 +108,8 @@
&__developedBy { &__developedBy {
span { span {
@include text-size("sm"); font-size: map-get($text-sizes, "s-500");
@include text-height("xs", 200); line-height: 24.51px;
} }
} }
} }

26
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,4 +1,5 @@
/* _header.scss */ /* _header.scss */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -23,6 +24,14 @@ body :where(ul, li, ol) {
@return unquote($width); @return unquote($width);
} }
@mixin font-size($size) {
$content: $text-sizes;
@if map-has-key($content, $size) {
font-size: map-get($content, $size);
}
}
.headerCheckout { .headerCheckout {
padding: 16px; padding: 16px;
border-bottom: 1px solid $clr-common-black; border-bottom: 1px solid $clr-common-black;
@ -54,8 +63,8 @@ body :where(ul, li, ol) {
.headerCheckout__safeBuy { .headerCheckout__safeBuy {
span { span {
@include text-size("smaller-200"); @include font-size("s-200");
@include text-height("smaller", 200); line-height: 16.34px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -117,8 +126,9 @@ body :where(ul, li, ol) {
max-width: none; max-width: none;
span { span {
@include text-size("md-200"); @include font-size("splus-100");
@include text-height("md", 300); line-height: 32.68px;
font-family: $font-family-100;
} }
img { img {
@ -166,8 +176,8 @@ body :where(ul, li, ol) {
} }
.progress-item { .progress-item {
@include text-size("smaller-200"); @include font-size("s-200");
@include text-height("smaller", 100); line-height: 14.04px;
font-family: $font-family-200; font-family: $font-family-200;
@ -242,8 +252,8 @@ body :where(ul, li, ol) {
} }
.progress-item { .progress-item {
@include text-size("md-200"); @include font-size("splus-100");
@include text-height("md", 200); line-height: 28.08px;
&--left, &--left,
&--right { &--right {

17
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -58,9 +58,8 @@
&-name, &-name,
&-link, &-link,
.type-name { .type-name {
@include text-size("xxs"); @include font-size("s-250");
@include text-height("xxs", 100); line-height: 24px;
font-family: $font-family-100; font-family: $font-family-100;
} }
} }
@ -140,15 +139,15 @@
@include mq("md") { @include mq("md") {
&-title { &-title {
@include text-size("md-200"); @include font-size("splus-100");
@include text-height("xl", 100); line-height: 38px;
} }
} }
@include mq("xxl") { @include mq("xxl") {
&-title { &-title {
@include text-size("xxl"); @include font-size("sxplus");
@include text-height("xxl", 300); line-height: 76px;
padding: 0; padding: 0;
} }
@ -157,8 +156,8 @@
&-name, &-name,
&-link, &-link,
.type-name { .type-name {
@include text-size("md-300"); @include font-size("splus-200");
@include text-height("lg", 200); line-height: 35.41px;
font-family: $font-family-100; font-family: $font-family-100;
} }

14
checkout/src/arquivos/sass/utils/_mixin.scss
View File

@ -1,3 +1,5 @@
@use "sass:meta";
@mixin btn-primary-blue-black() { @mixin btn-primary-blue-black() {
border: none; border: none;
color: $clr-common-black; color: $clr-common-black;
@ -13,21 +15,13 @@
} }
@mixin text-size($size) { @mixin text-size($size) {
@if map_has_key($text-sizes-100, $size) { @if map_has_key($text-sizes, $size) {
$size: map_get($text-sizes-100, $size); $size: map_get($text-sizes, $size);
font-size: $size; font-size: $size;
} }
} }
@mixin text-height($type, $height) {
@if map_has_key($text-height, $type + "-" + $height) {
$height: map-get($text-height, $type + "-" + $height);
line-height: $height;
}
}
/** /**
* @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
*/ */

56
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -10,56 +10,34 @@ $clr-common-white: #fff;
$clr-gray-600: #292929; $clr-gray-600: #292929;
$clr-gray-500: #6c6c6c; $clr-gray-500: #6c6c6c;
$clr-gray-450: #c4c4c4;
$clr-gray-400: #7d7d7d; $clr-gray-400: #7d7d7d;
$clr-gray-300: #8d8d8d; $clr-gray-300: #8d8d8d;
$clr-gray-200: #e5e5e5; $clr-gray-200: #e5e5e5;
$clr-gray-100: #f0f0f0; $clr-gray-100: #f0f0f0;
$clr-gray-500: #6c6c6c;
$clr-blue-500: #4267b2; $clr-blue-500: #4267b2;
$clr-green-500: #4caf50; $clr-green-500: #4caf50;
$clr-primary-blue-500: #00c8ff; $clr-primary-blue-500: #00c8ff;
$text-sizes-100: ( /*prettier-ignore*/
"smaller-100": 10px, $text-sizes: (
"smaller-200": 12px, "s-050": 9px,
"xxs": 13px, "s-100": 10px,
"xs": 14px, "s-200": 12px,
"sm": 18px, "s-250": 13px,
"md-100": 20px, "s-300": 14px,
"md-200": 24px, "s-400": 16px,
"md-300": 26px, "s-500": 18px, // MAIN
"lg": 28px, "splus-100": 24px,
"xl": 36px, "splus-200": 26px,
"xxl": 48px, "splus-300": 28px,
) !default; "splus-500": 32px,
"splus-700": 36px,
$text-height: ( "splus-900": 40px,
"smaller-100": 14.04px, "sxplus": 48px,
"smaller-200": 16px,
"smaller-300": 16.34px,
"smaller-400": 16.38px,
"xxs-100": 17.7px,
"xxs-200": 18.72px,
"xxs-300": 19.07px,
"xs-100": 24px,
"xs-200": 24.51px,
"xs-300": 27.24px,
"md-100": 28px,
"md-200": 28.08px,
"md-300": 32.68px,
"lg-100": 32.76px,
"lg-200": 35.41px,
"lg-300": 37.44px,
"xl-100": 38px,
"xl-200": 38.13px,
"xl-300": 46.8px,
"xxl-100": 49.03px,
"xxl-200": 65.37px,
"xxl-300": 76px,
) !default; ) !default;
/* Grid breakpoints */ /* Grid breakpoints */