SabrinaMiranda/m3-academy-template-checkout-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(entrega retirada-receber): Aplica css desktop

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-17 15:31:38 -03:00
parent 04fb01084c
commit dd5e07ffab
1 changed files with 164 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,10 @@
} }
} }
.onda-v1 .mb6 {
margin-bottom: 0;
}
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
@ -561,55 +565,93 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 100%; width: 280px;
height: 42px;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 19px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase;
padding: 11px 35px;
@include mq(xg, min) {
width: 543px;
height: 60px;
font-size: 28px;
line-height: 38px;
padding: 11px 63px;
}
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: $color-blue3;
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: $color-blue4;
} }
} }
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 20px;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
width: 100%; width: 100%;
font-family: $font-family;
font-style: normal; @include mq(xg, min) {
font-weight: normal; width: 543px;
font-size: 14px; height: 57px;
line-height: 16px; }
text-transform: uppercase;
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black2;
border-radius: 100px; border-radius: 100px;
@include mq(xg, min) {
width: 271px;
height: 57px;
}
} }
.blue { .blue {
color: $color-blue; color: $color-black2;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding: 8px 40px;
@include mq(xg, min) {
font-size: 28px;
line-height: 38px;
}
} }
label { label {
width: 50%; width: 50%;
color: $color-gray6;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
padding: 8px 40px;
@include mq(xg, min) {
font-size: 28px;
line-height: 38px;
}
&:active { &:active {
background-color: #f0f0f0; background-color: #f0f0f0;
@ -618,61 +660,133 @@
} }
.srp-postal-code { .srp-postal-code {
.ship-postalCode { display: flex;
flex-direction: row;
.ship-postalCode,
.ship-country {
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-black2;
margin-bottom: 2px;
@include mq(xg, min) {
font-size: 24px;
line-height: 33px;
}
}
#ship-country {
border: 1px solid $color-gray6;
height: 36px;
width: 172px;
color: $color-black; color: $color-black;
margin-bottom: 12px; font-size: 12px;
line-height: 14px;
padding-left: 15px;
outline: none;
@include mq(xg, min) {
width: 333px;
height: 55px;
font-size: 24px;
line-height: 28px;
}
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray6;
background: $color-white;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3;
font-size: 12px;
height: 36px;
padding: 12px 8px;
width: 172px; width: 172px;
height: 36px;
color: $color-black;
font-family: $font-family-secundary;
font-size: 12px;
line-height: 14px;
padding: 11px 16px;
margin-bottom: 4px;
@include mq(xg, min) {
width: 333px;
height: 55px;
font-size: 24px;
line-height: 28px;
padding: 13px 16px;
margin-bottom: 5px;
}
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue2;
border: none; width: 100px;
border-radius: 5px;
color: $color-white;
font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; border: none;
border-radius: 8px;
color: $color-white;
font-family: $font-family;
font-weight: 700;
font-style: normal;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px;
top: 36px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px;
text-transform: uppercase; text-transform: uppercase;
padding: 8px 11px;
margin-left: 8px;
right: -150px;
top: 82px;
cursor: pointer;
@include mq(xg, min) {
width: 194px;
height: 55px;
font-size: 28px;
line-height: 38px;
padding: 8px 19px;
margin-left: 18px;
right: -410px;
top: 136px;
}
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: $color-blue3;
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: $color-blue4;
} }
} }
small a { small a {
font-family: $font-family; font-size: 0;
&::after {
content: "Não sei meu código postal";
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $color-blue; color: $color-black2;
margin-top: 7px; text-decoration-line: underline;
cursor: pointer;
@include mq(xg, min) {
font-size: 20px;
line-height: 23px;
white-space: nowrap;
}
}
} }
span.help.error { span.help.error {
@ -681,7 +795,13 @@
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px; top: -20px;
@include mq(xg, min) {
font-size: 20px;
white-space: nowrap;
top: -22px;
}
} }
} }
} }