NicollyVieira/m3-academy-template-checkout-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria o header para todas as telas

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2022-12-13 13:58:19 -03:00
parent 6e90473147
commit f3054b0ab4
3 changed files with 114 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,25 @@
/* _header.scss */
.headerCheckout {
margin: 0;
width: 100%;
border-bottom: 1px solid $black-500;
.container {
width: auto !important;
box-sizing: border-box;
width: 79.53125% !important;
margin: 29px auto 29.86px auto;
@include mq(tablet, max) {
width: 100% !important;
padding: 16px !important;
margin: 0;
}
@include mq(desktop4K, min) {
margin: 29px auto;
}
}
&__wrapper {
align-items: center;
display: flex;
@ -10,27 +27,80 @@
}
&__logo {
width: 15.2829%;
@include mq(tablet, max) {
min-width: 119px;
width: 15.6834%;
}
@include mq(celular, max) {
width: 45.3586%;
min-width: auto;
}
@include mq(desktop4K, min) {
width: 19.2161%;
}
img {
height: 52px;
width: auto;
width: 100%;
}
}
&__safeBuy {
span {
align-items: center;
display: flex;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-gray;
width: 11.6896%;
min-width: 119px;
display: flex;
align-items: center;
justify-content: flex-end;
@include mq(tablet, max) {
width: 11.996%;
}
i {
margin-right: 8px;
@include mq(celular, max) {
width: 34.69387%;
min-width: auto;
}
@include mq(desktop4K, min) {
width: 11.834%;
}
img {
width: 10.09%;
height: auto;
@include mq(tablet, max) {
width: 10.085%;
}
@include mq(desktop4K, min) {
width: 12.5255%;
}
}
span {
margin-left: 8px;
font-family: "Open Sans";
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
color: $black-300;
@include mq(desktop4K, min) {
margin-left: 7.9px;
font-size: 24px;
line-height: 33px;
}
}
}
}

34
checkout/src/arquivos/sass/partials/_progressBar.scss
View File

@ -1,6 +1,10 @@
.progress-bar {
width: 439px;
@include mq(tablet, max) {
display: none;
}
@include mq(desktop4K, min) {
width: 1078.86px;
}
@ -12,7 +16,6 @@
display: flex;
justify-content: space-between;
align-items: center;
}
&__li {
@ -38,7 +41,6 @@
&__central {
width: auto;
flex: 1;
}
&__container {
@ -55,14 +57,19 @@
align-items: center;
}
&__title {
font-family: 'Tenor Sans';
font-family: "Tenor Sans";
font-weight: 400;
font-size: 12px;
line-height: 14px;
margin-bottom: 9px;
color: $black-500;
@include mq(desktop4K, min) {
font-size: 24px;
line-height: 28px;
}
}
#progress-bar__circle-1,
@ -73,10 +80,14 @@
border: 1px solid $black-500;
border-radius: 50%;
@include mq(desktop4K, min) {
width: 24px;
height: 24px;
}
&.active {
background-color: $black-500;
}
}
&__line-1,
@ -87,6 +98,10 @@
height: 1px;
border-top: 1px solid $black-500;
@include mq(desktop4K, min) {
bottom: 9px;
}
}
&__line-1 {
@ -94,8 +109,8 @@
width: 95%;
@include mq(desktop4K, min) {
left: 10%;
width: 108.5%;
left: 21%;
width: 96%;
}
}
@ -104,9 +119,8 @@
width: 100%;
@include mq(desktop4K, min) {
right: 9%;
width: 109%;
right: 17%;
width: 100%;
}
}
}

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

@ -21,6 +21,7 @@ $color-green: #4caf50;
/*CORES*/
$black-500: #000;
$black-300: #292929;
/* Grid breakpoints */
$grid-breakpoints: (
@ -29,7 +30,10 @@ $grid-breakpoints: (
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xl: 1200px,
celular: 600px,
tablet: 1025px,
desktop4K: 2500px
) !default;
$z-index: (