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(header): created styles for large devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-20 01:41:29 -03:00
parent abb11283f5
commit 8a9508b06b
4 changed files with 181 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,37 +23,6 @@ body :where(ul, li, ol) {
@return unquote($width);
}
@mixin text-size($size: 100, $fontFamily: 100, $lineHeight: 14px) {
font-size: var(--text-size-#{$size});
font-family: var(--font-family-#{$fontFamily});
line-height: $lineHeight;
}
@mixin text-uppercase($size: 100, $fontFamily: 100, $lineHeight: 14px) {
@include text-size($size, $fontFamily, $lineHeight);
text-transform: uppercase;
}
:root {
--text-size-100: 12px;
--text-size-200: 14px;
--text-size-300: 18px;
--text-size-400: 24px;
--font-family-100: #{$font-family-100};
--font-family-200: #{$font-family-200};
}
@media screen and (min-width: 2500px) {
:root {
--text-size-100: 24px;
--text-size-200: 28px;
--text-size-300: 36px;
--text-size-400: 48px;
}
}
/* prettier-ignore*/
.headerCheckout {
padding: 16px;
border-bottom: 1px solid $clr-common-black;
@ -72,21 +41,25 @@ body :where(ul, li, ol) {
&__wrapper {
justify-content: space-between;
width: 100%;
width: 100%;
}
&__safeBuy {
gap: 8px;
width: 100%;
max-width: 119px;
width: 100%;
max-width: 119px;
}
}
.headerCheckout__safeBuy {
span {
@include text-uppercase("100", "100", 14px);
@include text-size("smaller-200");
@include text-height("smaller", 200);
font-style: normal;
font-weight: normal;
text-transform: uppercase;
}
img {
@ -144,7 +117,8 @@ body :where(ul, li, ol) {
max-width: none;
span {
@include text-size("100", "100", 32.68px);
@include text-size("md-200");
@include text-height("md", 300);
}
img {
@ -155,7 +129,6 @@ body :where(ul, li, ol) {
}
}
/* prettier-ignore*/
.headerCheckout {
.progress-bar {
width: 439px;
@ -171,8 +144,8 @@ body :where(ul, li, ol) {
.progress-list {
justify-content: space-between;
width: 100%;
margin: 0;
width: 100%;
margin: 0;
}
.progress-item,
@ -184,7 +157,8 @@ body :where(ul, li, ol) {
.progress-container {
position: relative;
width: 100%;
width: 100%;
}
.progress-content {
@ -192,7 +166,10 @@ body :where(ul, li, ol) {
}
.progress-item {
@include text-size("100", "200", 14.04px);
@include text-size("smaller-200");
@include text-height("smaller", 100);
font-family: $font-family-200;
&--left,
&--right {
@ -201,9 +178,10 @@ body :where(ul, li, ol) {
.progress-line {
position: absolute;
bottom: 6px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
}
}
@ -239,11 +217,13 @@ body :where(ul, li, ol) {
position: relative;
z-index: 10;
width: $square-size;
height: $square-size;
border: 1px solid $clr-common-black;
border-radius: 100%;
background-color: $clr-common-white;
width: $square-size;
height: $square-size;
border: 1px solid $clr-common-black;
border-radius: 100%;
background-color: $clr-common-white;
&.active {
background-color: $clr-common-black;
@ -262,7 +242,8 @@ body :where(ul, li, ol) {
}
.progress-item {
@include text-size("100", "200", 14.04px);
@include text-size("md-200");
@include text-height("md", 200);
&--left,
&--right {

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

@ -1,110 +1,128 @@
/* _prateleira.scss */
/* prettier-ignore */
.footerCheckout__prateleira {
width: 100%;
margin-top: 43.42px;
min-height: 363px;
padding: 0 8px;
margin-bottom: 54px;
margin: 43.42px 0 54px;
/* slick-prev */
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13.64px;
height: 29.47px;
transform: translateY(-50%);
border: none;
background-color: transparent;
transition: 300ms;
}
}
.footerCheckout__prateleira {
&-title {
width: 100%;
margin-bottom: 20px;
padding: 0 8px;
margin-bottom: 20px;
font-size: 14px;
text-align: center;
font-weight: 400;
font-family: $font-family-200;
text-align: center;
color: $clr-common-black;
}
}
.shelf-item {
.product-item-container {
margin: 0 8px;
}
.footerCheckout__prateleira {
.product-item-container {
margin: 0 8px;
}
.product-item {
&-figure {
width: 100%;
margin-bottom: 20px;
img {
max-width: 100%;
height: auto;
}
}
.product-item {
&-figure {
width: 100%;
margin-bottom: 20px;
&-name {
min-height: 36px;
text-align: center;
font-weight: 400;
font-family: $font-family-100;
font-size: 13px;
text-overflow: ellipsis;
line-height: 17.7px;
}
&-types {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-height: 68px;
}
&-link {
@include btn-primary-blue-white();
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 0;
letter-spacing: 5%;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
line-height: 17.7px;
font-family: $font-family-100;
color: $clr-common-white;
img {
max-width: 100%;
height: auto;
}
}
.product-type-container {
background-color: $clr-primary-blue-500;
border-radius: 8px;
height: 28px;
&-name {
min-height: 36px;
font-weight: 400;
font-size: 13px;
line-height: 17.7px;
font-family: $font-family-100;
text-overflow: ellipsis;
text-align: center;
}
&-types {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-height: 68px;
}
&-link,
.type-name {
@include text-size("xxs");
font-family: $font-family-100;
line-height: 17.7px;
}
&-link {
@include btn-primary-blue-white();
display: flex;
align-items: center;
justify-content: center;
.type-name {
font-weight: 700;
font-size: 13px;
padding: 5px;
line-height: 17.7px;
letter-spacing: 5%;
font-family: $font-family-100;
color: $clr-common-white;
}
width: 100%;
padding: 12px 0;
border-radius: 8px;
font-weight: 700;
letter-spacing: 5;
color: $clr-common-white;
}
}
.product-type-container {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
border-radius: 8px;
background-color: $clr-primary-blue-500;
}
.type-name {
padding: 5px;
font-weight: 700;
letter-spacing: 5;
font-family: $font-family-100;
color: $clr-common-white;
}
@media screen and (min-width: 600px) {
&-title {
font-size: 24px;
line-height: 38px;
@include text-size("md");
line-height: 36px;
}
}
@ -112,9 +130,18 @@
width: fluid(1034px, 1280px);
margin: 43.42px auto 56px;
padding: 0;
}
@media screen and (min-width: 2500px) {
&-title {
@include text-size("xxl");
line-height: 76px;
padding: 0;
}
.product-item-container {
margin: 0 9.965px;
}
}
}

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

@ -12,6 +12,22 @@
text-transform: uppercase;
}
@mixin text-size($size) {
@if map_has_key($text-sizes-100, $size) {
$size: map_get($text-sizes-100, $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)
*/

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

@ -23,10 +23,46 @@ $clr-green-500: #4caf50;
$clr-primary-blue-500: #00c8ff;
$text-sizes-100: (
"smaller-100": 10px,
"smaller-200": 12px,
"xxs": 13px,
"xs": 14px,
"sm": 18px,
"md-100": 20px,
"md-200": 24px,
"lg": 28px,
"xl": 36px,
"xxl": 48px,
) !default;
$text-height: (
"smaller-100": 14.04px,
"smaller-200": 16.34px,
"smaller-300": 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,
);
/* Grid breakpoints */
$grid-breakpoints: (
xxs: 0,
xs: 280,
xs: 280px,
sm: 375px,
md: 600px,
lg: 1025px,