forked from M3-Academy/m3-academy-template-checkout
feat(entrega retirada-receber): Aplica css desktop
This commit is contained in:
parent
04fb01084c
commit
dd5e07ffab
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user