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

develop #1

Merged
SabrinaMiranda merged 24 commits from develop into main 2022-12-19 02:38:03 +00:00
Conversation 0 Commits 24 Files Changed 12 +164 -44
1 changed files with 164 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dd5e07ffab - Show all commits

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

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