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(footer/header): created styles for large devices and refactor code, lint-code

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-19 16:18:23 -03:00
parent e20d891aef
commit abb11283f5
2 changed files with 217 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,20 @@
/* prettier-ignore*/
.footerCheckout {
color: $clr-gray-400;
&__wrapper {
border-top: 1px solid $clr-common-black;
padding: 16px 25px 18.88px 8px;
@include mq("md", min) {
padding: 16px 0;
}
}
&__stamps {
order: 0;
margin: 0 0 16px;
margin: 0 0 16px;
}
&__address {
order: 1;
margin: 0 0 16px;
margin: 0 0 16px;
}
&__developedBy {
@ -25,11 +22,12 @@
}
}
/* prettier-ignore*/
.footerCheckout {
.container {
width: 100%;
display: flex;
flex-direction: column;
width: 100%;
&::before,
&::after {
@ -39,12 +37,29 @@
}
.footerCheckout {
@include mq("md", min) {
&__developedBy a,
&__developedBy,
&__wrapper,
&__stamps {
display: flex;
align-items: center;
}
&__wrapper {
justify-content: space-between;
}
}
/* prettier-ignore*/
.footerCheckout {
@include mq("md") {
&__stamps {
width: 34.510595358%;
}
&__wrapper {
padding: 16px 0;
.container {
width: 94.9734%;
margin: 0 auto;
@ -52,22 +67,26 @@
}
}
@include mq("lg", min) {
@include mq("lg") {
.container {
align-items: center;
justify-content: space-between;
flex-direction: row;
}
&__wrapper {
width: 100%;
}
&__address {
order: 0;
margin: 0;
margin: 0;
}
&__stamps {
width: 33.223684211%;
order: 1;
margin: 0;
width: 33.223684211%;
margin: 0;
}
&__developedBy {
@ -75,10 +94,10 @@
}
}
@include mq("xxl", min) {
@include mq("xxl") {
&__address {
span {
font-size: 200%;
font-size: 20px;
}
}
@ -94,29 +113,13 @@
}
}
.footerCheckout {
&__developedBy a,
&__developedBy,
&__wrapper,
&__stamps {
display: flex;
align-items: center;
}
&__wrapper {
justify-content: space-between;
@include mq("lg", min) {
width: 100%;
}
}
}
/* prettier-ignore*/
.footerCheckout {
&__creditList {
width: 100%;
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
&__creditItem,
@ -130,30 +133,32 @@
}
}
/* prettier-ignore*/
.footerCheckout {
&__address {
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 12px;
font-family: $font-family-100;
text-transform: capitalize;
color: $clr-gray-400;
color: $clr-gray-400;
}
}
/* prettier-ignore*/
.footerCheckout {
&__stamps {
&__divider {
background-color: $clr-gray-300;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
width: 1px;
height: 24px;
margin: 0 8px;
background-color: $clr-gray-300;
}
}
}
/* prettier-ignore*/
.footerCheckout {
&__developedBy {
margin: 0;
@ -166,10 +171,10 @@
font-style: normal;
font-weight: normal;
font-size: 10px;
font-family: $font-family-100;
line-height: 12px;
font-family: $font-family-100;
text-decoration: none;
color: $clr-gray-400;
color: $clr-gray-400;
span {
margin-right: 8px;
@ -182,5 +187,3 @@
}
}
}

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

@ -23,6 +23,37 @@ 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;
@ -30,6 +61,7 @@ body :where(ul, li, ol) {
.container {
width: 100%;
height: auto;
margin: 0;
}
&__wrapper,
@ -39,49 +71,53 @@ body :where(ul, li, ol) {
}
&__wrapper {
width: 100%;
justify-content: space-between;
width: 100%;
}
&__safeBuy {
width: fluid(119px, 343px);
max-width: 119px;
gap: 8px;
span {
font: normal normal 12px / 14px $font-family-100;
text-transform: uppercase;
color: $clr-gray-500;
}
img {
width: 12px;
height: 13px;
}
}
&__logo {
width: fluid(155.58px, 343px);
max-width: 155.58px;
height: auto;
img {
width: 100%;
height: 100%;
}
max-width: 119px;
}
}
.headerCheckout__safeBuy {
span {
@include text-uppercase("100", "100", 14px);
font-style: normal;
font-weight: normal;
}
img {
width: 12px;
height: 13px;
}
}
.headerCheckout__logo {
width: fluid(155.58px, 343px);
height: auto;
max-width: 155.58px;
img {
width: 100%;
height: 100%;
}
}
.headerCheckout {
.progress-bar {
display: none;
}
}
.headerCheckout {
@media screen and (min-width: 1025px) {
@include mq("lg") {
padding: 29px 0;
&__wrapper {
width: fluid(992px, 1024px);
width: fluid(1018px, 1280px);
margin: 0 auto;
}
@ -90,13 +126,7 @@ body :where(ul, li, ol) {
}
}
@media screen and (min-width: 1025px) {
&__wrapper {
width: fluid(1018px, 1280px);
}
}
@media screen and (min-width: 2500px) {
@include mq("xxl") {
$width-container: 1988.28px;
&__wrapper {
@ -114,7 +144,7 @@ body :where(ul, li, ol) {
max-width: none;
span {
font: normal normal 24px / 32.68px $font-family-100;
@include text-size("100", "100", 32.68px);
}
img {
@ -125,92 +155,147 @@ body :where(ul, li, ol) {
}
}
/* prettier-ignore*/
.headerCheckout {
.progress-bar {
width: 439px;
}
.progress-list {
.progress-list,
.progress-item,
.progress-container,
.progress-content {
display: flex;
align-items: center;
}
.progress-list {
justify-content: space-between;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
}
.progress-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
.progress-item,
.progress-container,
.progress-content {
flex-direction: column;
justify-content: center;
}
.progress-content,
.progress-container {
display: flex;
align-items: center;
flex-direction: column;
}
.progress-container {
position: relative;
justify-content: center;
.progress-container {
position: relative;
width: 100%;
}
}
.progress-item {
&--left,
&--right {
width: 40%;
.progress-content {
gap: 16px;
}
.progress-line {
position: absolute;
bottom: 6px;
.progress-item {
@include text-size("100", "200", 14.04px);
&--left,
&--right {
width: 40%;
.progress-line {
position: absolute;
bottom: 6px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
}
}
&--left {
.progress-container {
align-items: flex-start;
}
.progress-line {
left: 75%;
transform: translateX(-50%);
}
}
&--center {
width: 90px;
}
&--right {
.progress-container {
align-items: flex-end;
}
.progress-line {
right: 72%;
transform: translateX(50%);
}
}
}
.progress-bullet {
$square-size: 12px;
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;
&.active {
background-color: $clr-common-black;
}
}
}
.headerCheckout {
@include mq("xxl") {
.progress-bar {
width: 1078.86px;
}
.progress-list {
justify-content: initial;
}
.progress-item {
@include text-size("100", "200", 14.04px);
&--left,
&--right {
width: fluid(444px, 1078.86px);
.progress-line {
bottom: 12px;
}
}
&--left {
.progress-container {
align-items: flex-start;
}
.progress-line {
left: 75%;
transform: translateX(-50%);
left: 67%;
}
}
&--center {
width: 90px;
width: auto;
max-width: none;
}
&--right {
.progress-container {
align-items: flex-end;
}
.progress-line {
right: 72%;
transform: translateX(50%);
right: 67%;
}
}
}
.progress-bullet {
width: 12px;
height: 12px;
background-color: $clr-common-white;
position: relative;
border: 1px solid $clr-common-black;
z-index: 10;
border-radius: 100%;
$square-size: 24px;
&.active {
background-color: $clr-common-black;
}
width: $square-size;
height: $square-size;
}
}
}