feat: Cria telas desktop 4k
This commit is contained in:
parent
d1a2e5f605
commit
e71d4883a2
@ -20,7 +20,6 @@ export default class Email {
|
||||
this.clientProfileData = await waitElement("#client-profile-data");
|
||||
this.orderFormTitle = await waitElement("#orderform-title");
|
||||
this.cartTemplate = await waitElement(".cart-template.mini-cart.span4");
|
||||
this.accordionGroup = await waitElement(".step.accordion-group.client-profile-data.active");
|
||||
}
|
||||
|
||||
addClasses() {
|
||||
@ -31,11 +30,8 @@ export default class Email {
|
||||
|
||||
addDisplayNone() {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/email") {
|
||||
this.accordionGroup.classList.add("display-none");
|
||||
this.cartTemplate.classList.add("display-none");
|
||||
} else {
|
||||
if (this.accordionGroup.classList.contains("display-none"))
|
||||
this.accordionGroup.classList.remove("display-none");
|
||||
if (this.cartTemplate.classList.contains("display-none"))
|
||||
this.cartTemplate.classList.remove("display-none");
|
||||
}
|
||||
|
||||
@ -104,6 +104,10 @@
|
||||
color: $black-400;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 11rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,6 +127,11 @@
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
}
|
||||
|
||||
@ -692,6 +692,13 @@
|
||||
tr {
|
||||
border-color: $gray-300;
|
||||
|
||||
@include mq(4k, min) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
display: none;
|
||||
|
||||
@ -19,6 +19,10 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
max-width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.client-profile-data.filled {
|
||||
max-width: 331px;
|
||||
|
||||
@ -45,6 +49,12 @@
|
||||
height: 20px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
@ -62,6 +72,11 @@
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,6 +104,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $gray-600;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,6 +142,12 @@
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 48px;
|
||||
max-width: 1241px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -207,6 +233,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -218,6 +249,11 @@
|
||||
color: #f15a31;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -291,6 +327,11 @@
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
margin-bottom: 25px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -316,6 +357,11 @@
|
||||
text-transform: uppercase;
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -326,6 +372,11 @@
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: #c4c4c4;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -345,6 +396,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -353,6 +409,12 @@
|
||||
padding: 11px 8px 12px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 8px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
height: 61px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@ -361,6 +423,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -374,6 +441,11 @@
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 11px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingGroupList {
|
||||
@ -394,6 +466,11 @@
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 3px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-svg {
|
||||
display: none;
|
||||
}
|
||||
@ -408,6 +485,18 @@
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.shp-option-text-time {
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -416,6 +505,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -426,6 +520,11 @@
|
||||
height: 12px;
|
||||
background-color: #00c8ff;
|
||||
border-radius: 3px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -439,6 +538,11 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 11px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary {
|
||||
@ -455,6 +559,11 @@
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 21px;
|
||||
@ -466,6 +575,12 @@
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 41px;
|
||||
height: 38px;
|
||||
left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-linkEdit {
|
||||
@ -497,6 +612,11 @@
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -504,6 +624,13 @@
|
||||
max-width: -webkit-fill-available;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
height: 61px;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -524,6 +651,11 @@
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -589,6 +721,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.neighborhood {
|
||||
@ -624,6 +761,10 @@
|
||||
padding: 0;
|
||||
left: 111px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
left: 222px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: " - ";
|
||||
}
|
||||
|
||||
@ -52,6 +52,12 @@
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
margin: 0 255px;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
&.border {
|
||||
border-bottom: 1px solid $black-500;
|
||||
}
|
||||
@ -67,6 +73,10 @@
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
padding: 0 255px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
.form-page.client-pre-email.anim-death.anim-current {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@ -101,6 +111,11 @@
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,29 +129,12 @@
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
@include mq(mobile, max) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span,
|
||||
small {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
font-size: 12px;
|
||||
@ -147,6 +145,15 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 40px;
|
||||
line-height: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -160,6 +167,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 970px;
|
||||
}
|
||||
|
||||
.input-block-level {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
@ -168,6 +179,11 @@
|
||||
color: $black-500;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px 8px 8px 5px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-success {
|
||||
@ -175,12 +191,14 @@
|
||||
background: $blue-500;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-600;
|
||||
}
|
||||
@include mq(mobile, min) {
|
||||
&:hover {
|
||||
background-color: $blue-600;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $blue-500;
|
||||
&:active {
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -189,6 +207,11 @@
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,6 +221,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $red-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -209,23 +237,41 @@
|
||||
padding: 16px 16px 26px;
|
||||
max-width: -webkit-fill-available;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 776px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.unstyled {
|
||||
li {
|
||||
.icon-ok::before {
|
||||
color: $blue-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -253,6 +299,11 @@
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
i {
|
||||
@ -323,6 +374,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-600;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -335,6 +391,12 @@
|
||||
padding: 13px 11px 12px;
|
||||
width: 100%;
|
||||
max-width: -webkit-fill-available;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
height: 61px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -383,6 +445,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -391,6 +458,11 @@
|
||||
width: 12px;
|
||||
border: 1px solid $gray-800;
|
||||
border-radius: 3px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -415,6 +487,11 @@
|
||||
padding: 12px 0 11px 0;
|
||||
text-shadow: none;
|
||||
width: 100%;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -442,6 +519,11 @@
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
@ -454,6 +536,12 @@
|
||||
height: 20px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -463,6 +551,11 @@
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -494,6 +587,11 @@
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-edit-link {
|
||||
@ -507,6 +605,12 @@
|
||||
background-size: contain;
|
||||
border-radius: 0;
|
||||
position: static;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
@ -521,6 +625,11 @@
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -558,6 +667,11 @@
|
||||
margin-bottom: 34px;
|
||||
margin-left: 17px;
|
||||
text-align: left;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
@ -573,6 +687,12 @@
|
||||
|
||||
.url {
|
||||
margin-right: 7px;
|
||||
|
||||
.photo {
|
||||
@include mq(4k, min) {
|
||||
width: 116px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
@ -587,6 +707,12 @@
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
line-height: 16px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
max-width: 227px;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
@ -602,6 +728,11 @@
|
||||
line-height: 16px;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.shipping-date {
|
||||
display: none;
|
||||
}
|
||||
@ -620,6 +751,11 @@
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -647,6 +783,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-700;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -668,6 +809,11 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,6 +38,12 @@
|
||||
margin: 17px 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
padding-left: 258px;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-cart-title {
|
||||
@ -125,6 +131,10 @@
|
||||
.cart-template-holder,
|
||||
.cart-links-bottom {
|
||||
margin: 0 128px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
margin: 0 258px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template-holder {
|
||||
@ -142,6 +152,10 @@
|
||||
padding: 16px 16px 15px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
padding: 16px 31px;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
thead {
|
||||
font-weight: 400;
|
||||
@ -154,6 +168,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
th {
|
||||
padding-bottom: 17px;
|
||||
text-align: left;
|
||||
@ -169,6 +188,11 @@
|
||||
left: 0;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,6 +226,15 @@
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
img {
|
||||
@include mq(4k, min) {
|
||||
height: 146px;
|
||||
min-width: 146px;
|
||||
object-fit: cover;
|
||||
margin-right: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
@ -234,6 +267,11 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-estimate-date,
|
||||
@ -268,6 +306,11 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.best-price,
|
||||
@ -309,11 +352,23 @@
|
||||
width: 35% !important;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
padding: 9px 11px;
|
||||
max-height: -webkit-fill-available;
|
||||
max-width: -webkit-fill-available;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.item-quantity-change {
|
||||
background-color: $blue-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-quantity-change-decrement,
|
||||
@ -347,6 +402,11 @@
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -359,6 +419,10 @@
|
||||
|
||||
.icon-remove::before {
|
||||
color: $gray-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -388,6 +452,11 @@
|
||||
margin: 0 0 48px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
margin: 0 0 0 258px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.srp-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -399,6 +468,11 @@
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
@ -408,6 +482,13 @@
|
||||
line-height: 18px;
|
||||
color: $gray-600;
|
||||
max-width: 276px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
max-width: 552px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-data,
|
||||
@ -417,6 +498,10 @@
|
||||
|
||||
.srp-data {
|
||||
position: relative;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.shp-open-options {
|
||||
@ -426,10 +511,23 @@
|
||||
color: $black-500;
|
||||
background-color: $gray-200;
|
||||
padding: 12px 41px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-toggle {
|
||||
margin-bottom: 0;
|
||||
|
||||
&__delivery,
|
||||
&__pickup {
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ship-country {
|
||||
@ -460,17 +558,31 @@
|
||||
line-height: 16px;
|
||||
width: auto;
|
||||
margin-bottom: 2px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-small {
|
||||
width: 100%;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.help.error {
|
||||
margin: 10px 0 0 5px;
|
||||
left: 12%;
|
||||
top: -12%;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@ -485,6 +597,11 @@
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-500;
|
||||
text-decoration: underline;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -510,6 +627,15 @@
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
height: 55px;
|
||||
min-width: fit-content;
|
||||
padding: 8px 19px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-pickup-empty {
|
||||
@ -534,6 +660,11 @@
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -547,6 +678,11 @@
|
||||
padding: 0 16px 0 17px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
margin: 0 258px 0 0;
|
||||
width: 27%;
|
||||
}
|
||||
|
||||
.coupon-fieldset {
|
||||
.coupon-label {
|
||||
font-weight: 400;
|
||||
@ -555,6 +691,11 @@
|
||||
color: $gray-600;
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
@ -583,6 +724,12 @@
|
||||
border-radius: 5px;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
|
||||
@include mq(4k, min) {
|
||||
max-width: initial;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
@ -608,12 +755,18 @@
|
||||
border-radius: 8px;
|
||||
margin-left: 30px;
|
||||
width: 133px;
|
||||
height: auto;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 260px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-data {
|
||||
display: block !important;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.link-coupon-add {
|
||||
@ -625,12 +778,33 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
@include mq(4k, min) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.totalizers-list {
|
||||
@include mq(4k, min) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.monetary {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 0 10px 0;
|
||||
font-weight: 400;
|
||||
@ -638,6 +812,11 @@
|
||||
line-height: 16px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.Discounts {
|
||||
@ -656,6 +835,15 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-family: $font-family;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.monetary {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -684,6 +872,11 @@
|
||||
line-height: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user