forked from M3-Academy/m3-academy-template-checkout
feat(checkout): Ajusta carrinho e tela de email em desktop>2500 e tablets
This commit is contained in:
parent
baf5289fc5
commit
79f9b413c2
@ -1,4 +1,8 @@
|
||||
.checkout-container {
|
||||
@include mq(xl, min) {
|
||||
padding-bottom: 167px;
|
||||
}
|
||||
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
font-family: $font-family;
|
||||
@ -39,6 +43,16 @@
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 40px;
|
||||
line-height: 47px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@ -51,16 +65,30 @@
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 40px;
|
||||
line-height: 47px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
@ -78,9 +106,20 @@
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
width: 58.1%;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: fit-content;
|
||||
background: #00c8ff;
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
@ -89,13 +128,30 @@
|
||||
font-family: $font-family;
|
||||
height: 52px;
|
||||
position: initial;
|
||||
text-transform: uppercase;
|
||||
width: 18.7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 12.4%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
width: 16.7%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
@ -106,20 +162,52 @@
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
margin-top: 3px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
margin-top: 24px;
|
||||
margin-top: 47px;
|
||||
padding: 16px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 49px;
|
||||
|
||||
height: 116px;
|
||||
width: 309px;
|
||||
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
margin-top: 58px;
|
||||
width: 37.1%;
|
||||
height: 204px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #000000;
|
||||
margin: 0 0 9px 0;
|
||||
font-weight: 700;
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -131,12 +219,21 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #000000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: #00c8ff;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -145,6 +242,10 @@
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 178px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -960,6 +1061,12 @@ p.client-profile-summary {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.transactions.span5.pull-right {
|
||||
@include mq(xl, min) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
//Pagamento
|
||||
|
||||
label.FormFieldLabel,
|
||||
|
||||
@ -13,18 +13,23 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 3px solid $color-gray3;
|
||||
border: 1px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 27px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
margin: 0px 0 48px 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 0 46px 0 31px;
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
position: relative !important;
|
||||
@ -120,6 +125,15 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.shipping-date {
|
||||
font-size: 0px;
|
||||
padding-right: 38px;
|
||||
@ -127,8 +141,13 @@
|
||||
|
||||
&.shipping-date::after {
|
||||
content: "Frete";
|
||||
font-size: 14px !important;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&.product-price {
|
||||
@ -137,8 +156,13 @@
|
||||
|
||||
&.product-price::after {
|
||||
content: "Unidade";
|
||||
font-size: 14px !important;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&.quantity {
|
||||
@ -165,6 +189,14 @@
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
max-width: 100%;
|
||||
@ -174,6 +206,19 @@
|
||||
height: 72px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 60px;
|
||||
object-fit: cover;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 146px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,6 +229,11 @@
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding-left: 31px;
|
||||
padding-right: 131px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000000;
|
||||
font-style: normal;
|
||||
@ -192,6 +242,17 @@
|
||||
line-height: 14px;
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 92px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken($color-blue, 10);
|
||||
text-decoration: none;
|
||||
@ -218,11 +279,23 @@
|
||||
@include mq(md, max) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
td.product-price {
|
||||
padding: 23px 0 0 0;
|
||||
text-align: initial;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
@ -248,10 +321,25 @@
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.old-product-price-label {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
span.best-price {
|
||||
.new-product-price-label,
|
||||
.new-product-price {
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.quantity {
|
||||
@ -265,12 +353,24 @@
|
||||
min-height: 34px;
|
||||
min-width: 99px;
|
||||
padding: 0;
|
||||
width: max-content !important;
|
||||
width: max-content;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 84px !important;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
min-width: 137px;
|
||||
min-height: 52px;
|
||||
margin-top: 57px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
position: absolute !important;
|
||||
left: 92px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid transparent;
|
||||
@ -287,6 +387,11 @@
|
||||
@include mq(lg, max) {
|
||||
width: 24px !important;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-plus-sign,
|
||||
@ -302,6 +407,12 @@
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,6 +434,10 @@
|
||||
&-price {
|
||||
text-align: initial;
|
||||
padding: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 154px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -353,6 +468,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -372,6 +492,13 @@
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -395,6 +522,10 @@
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 68px;
|
||||
}
|
||||
|
||||
.srp-container {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
@ -402,8 +533,14 @@
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.srp-content {
|
||||
@include mq(md, max) {
|
||||
width: 343px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-main-title {
|
||||
margin: 33px 0 12px;
|
||||
margin: 48px 0 11px;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
@ -413,6 +550,11 @@
|
||||
@include mq(md, max) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
@ -420,6 +562,13 @@
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin: 0px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
width: 552px;
|
||||
max-width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
button.shp-open-options {
|
||||
@ -436,6 +585,16 @@
|
||||
margin: 0;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
padding: 3px 40px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-gray5, 5);
|
||||
}
|
||||
@ -456,7 +615,16 @@
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 543px;
|
||||
}
|
||||
|
||||
.srp-pickup-empty__my-location {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
@ -473,6 +641,17 @@
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
@ -496,17 +675,21 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.gray {
|
||||
color: #979899;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid $color-blue;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 50%;
|
||||
|
||||
@ -518,6 +701,14 @@
|
||||
|
||||
.srp-postal-code {
|
||||
.ship-postalCode {
|
||||
@include mq(xl, min) {
|
||||
width: 260px;
|
||||
|
||||
span.error {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
@ -526,6 +717,11 @@
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -537,6 +733,15 @@
|
||||
height: 36px;
|
||||
padding: 12px 8px;
|
||||
width: 172px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 333px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 215px;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
@ -557,6 +762,20 @@
|
||||
transition: all 0.2s linear;
|
||||
width: 100px;
|
||||
text-transform: uppercase;
|
||||
padding: 8px 11px 9px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 8px 13px 9px;
|
||||
width: 120px;
|
||||
left: 221px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 194px;
|
||||
height: 55px;
|
||||
right: -287px;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
@ -581,6 +800,12 @@
|
||||
color: #000000;
|
||||
margin-top: 4px;
|
||||
text-decoration: underline;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
@ -659,9 +884,18 @@
|
||||
width: 354px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 34.4%;
|
||||
}
|
||||
|
||||
.coupon-data {
|
||||
margin: 20px 0;
|
||||
display: block !important;
|
||||
margin: 48px 0 20px 0;
|
||||
display: block;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 8px 0 10px;
|
||||
}
|
||||
|
||||
#cart-link-coupon-add {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
@ -677,6 +911,11 @@
|
||||
line-height: 14px;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -709,6 +948,11 @@
|
||||
line-height: 14px;
|
||||
color: $color-gray2;
|
||||
cursor: none;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-fields {
|
||||
@ -741,6 +985,19 @@
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 774px;
|
||||
max-width: 774px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 55px;
|
||||
width: 319px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
max-width: 319px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@ -761,7 +1018,16 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 138px;
|
||||
margin-left: 2px;
|
||||
width: 133px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
height: 55px;
|
||||
width: 260px;
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -792,6 +1058,11 @@
|
||||
line-height: 16px;
|
||||
color: $color-black;
|
||||
padding: 10px 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -800,6 +1071,10 @@
|
||||
|
||||
&.monetary {
|
||||
text-align: right;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 153px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -813,6 +1088,12 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-black;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
width: 198px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -829,7 +1110,7 @@
|
||||
padding: 0 16px;
|
||||
width: calc(100% - 32px);
|
||||
float: none;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 43px;
|
||||
}
|
||||
|
||||
@include mq(md, min) {
|
||||
@ -837,6 +1118,10 @@
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 34.4%;
|
||||
}
|
||||
|
||||
.link-choose-more-products-wrapper {
|
||||
display: block;
|
||||
text-align: center;
|
||||
@ -853,6 +1138,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #000000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -866,6 +1156,10 @@
|
||||
transition: ease-in 0.22s all;
|
||||
padding: 12px 19px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#00c8ff, 5);
|
||||
}
|
||||
@ -881,6 +1175,11 @@
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
text-shadow: none;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -891,6 +1190,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 48px;
|
||||
margin-bottom: 54px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
margin-bottom: 68px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -901,5 +1210,15 @@
|
||||
.srp-toggle {
|
||||
margin: 0 0 10px 0 !important;
|
||||
padding: 0;
|
||||
|
||||
&__delivery,
|
||||
&__pickup {
|
||||
color: #000000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,13 +7,32 @@
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 170px 0 104px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 48px !important;
|
||||
line-height: 65px !important;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 18px !important;
|
||||
line-height: 25px !important;
|
||||
margin-bottom: 22px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-links {
|
||||
@include mq(md, max) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.link-choose-products {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
@ -30,13 +49,33 @@
|
||||
width: 28.1%;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
@include mq(xl, min) {
|
||||
width: 29.9%;
|
||||
padding: 15px 19px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 25.7%;
|
||||
padding: 15px 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.link-choose-products::after {
|
||||
content: "CONTINUAR COMPRANDO";
|
||||
font-size: 14px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,6 +43,10 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,6 +77,11 @@ body {
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
|
||||
@ -2,13 +2,17 @@
|
||||
.footerCheckout {
|
||||
border-top: 1px solid black;
|
||||
color: $color-gray2;
|
||||
margin-top: 94px;
|
||||
// margin-top: 94px;
|
||||
|
||||
&__wrapper {
|
||||
width: auto !important;
|
||||
padding: 16px 22px 16px 32px;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 22px 0 16px 8px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 14px 63px 16px 63px;
|
||||
}
|
||||
@ -17,6 +21,12 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: auto;
|
||||
|
||||
@include mq(md, max) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-top: 34px;
|
||||
}
|
||||
}
|
||||
.container::before,
|
||||
::after {
|
||||
@ -35,7 +45,6 @@
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -58,8 +67,10 @@
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
align-self: center;
|
||||
margin-bottom: 12px;
|
||||
position: absolute;
|
||||
align-self: flex-start;
|
||||
top: -7px;
|
||||
width: 342px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
@ -89,6 +100,10 @@
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user