diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 3df7e54..dca1b7a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -11,6 +11,13 @@ textarea[class*="span"], } } +//para a lista do #/email +.row-fluid .orderform-template { + @include mq(xxl, min) { + margin-bottom: 90px; + } +} + .checkout-container { .client-pre-email { border-color: $color-gray4; @@ -31,6 +38,11 @@ textarea[class*="span"], color: lighen($color-black, 10); } + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } + @include mq(pg, max) { font-size: 10px; line-height: 12px; @@ -65,6 +77,11 @@ textarea[class*="span"], line-height: 23px; text-transform: uppercase; + @include mq(xxl, min) { + font-size: 40px; + line-height: 47px; + } + @include mq(cstm, max) { font-weight: 400; font-size: 12px; @@ -79,6 +96,11 @@ textarea[class*="span"], line-height: 23px; text-transform: uppercase; + @include mq(xxl, min) { + font-size: 40px; + line-height: 47px; + } + @include mq(cstm, max) { font-weight: 400; font-size: 12px; @@ -112,6 +134,11 @@ textarea[class*="span"], color: $color-black2 !important; } + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } + @media (max-width: 490px) { width: auto; } @@ -133,6 +160,12 @@ textarea[class*="span"], top: 0; cursor: pointer; + @include mq(xxl, min) { + font-size: 28px; + // line-height: 38px; + padding: 12.56px 17.89px; + } + @media (max-width: 490px) { // height: 48px; margin: 0; @@ -145,6 +178,11 @@ textarea[class*="span"], font-weight: 700; font-size: 12px; line-height: 16px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } } @@ -161,6 +199,11 @@ textarea[class*="span"], font-size: 12px; line-height: 16px; margin: 0 0 8px 0; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } ul { @@ -173,12 +216,21 @@ textarea[class*="span"], font-weight: 700; font-size: 12px; line-height: 16px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } i::before { color: $color-blue2; font-size: 1rem; opacity: 1; + + @include mq(xxl, min) { + font-size: 2.063rem; + } } } } @@ -188,6 +240,10 @@ textarea[class*="span"], font-size: 6rem; opacity: 0.5; + @include mq(xxl, min) { + font-size: 7.159rem; + } + @include mq(cstm, max) { font-size: 0; } @@ -195,6 +251,15 @@ textarea[class*="span"], } } + .accordion-heading { + span { + @include mq(xxl, min) { + font-size: 32px; + line-height: 37px; + } + } + } + .client-profile-data { .accordion-heading { span { @@ -206,6 +271,11 @@ textarea[class*="span"], font-weight: 400; font-size: 16px; line-height: 19px; + + @include mq(xxl, min) { + font-size: 32px; + line-height: 37px; + } } } } @@ -281,6 +351,21 @@ textarea[class*="span"], font-size: 0; } + .shp-summary-package-time { + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } + } + + .client-profile-summary, + .client-profile-email span { + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } + } + p { label { font-family: $font-family; @@ -288,40 +373,86 @@ textarea[class*="span"], font-weight: 400; font-size: 14px; line-height: 19px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } select, input { border: 1px solid $color-gray8; border-radius: 5px; + box-sizing: border-box; box-shadow: none; } + #client-email { + width: 100%; + } + + #client-first-name, + #client-last-name, + #client-document, + #client-phone { + // height: 44px; + @include mq(xxl, min) { + width: 273.77px; + } + } + + #opt-in-newsletter { + border-radius: 3px; + border: 1px solid $color-gray11; + + @include mq(xxl, min) { + width: 34.95px; + height: 34.95px; + margin-right: 8.05px; + } + } + #ship-number { @include mq(sm, max) { width: 70px !important; } } + select, input:not([type="checkbox"]) { + height: 44px; .input-xlarge { @media (max-width: 767) { max-width: none !important; } } + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + height: 61px; + } + @include mq(pg, max) { width: 100%; margin-right: 14.5px; } } - #client-phone, - #client-document { - height: 44px; - } + // #client-phone, + // #client-document { + + // } .help.error { color: red; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + white-space: nowrap; + } } } @@ -354,6 +485,11 @@ textarea[class*="span"], transition: all 0.2s linear; cursor: pointer; + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } + &:hover { background: lighten($color-black, 5); } @@ -381,6 +517,11 @@ textarea[class*="span"], font-size: 12px; line-height: 16px; text-decoration-line: underline; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } .vtex-omnishipping-1-x-deliveryGroup { @@ -390,6 +531,11 @@ textarea[class*="span"], font-weight: 700; font-size: 14px; line-height: 19px; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } .shp-lean { @@ -402,6 +548,11 @@ textarea[class*="span"], color: #303030; padding: 8px 12px; + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } + svg path { // fill: #d8c8ac; background: #00c8ff; @@ -416,6 +567,11 @@ textarea[class*="span"], font-size: 12px; line-height: 16px; color: $color-gray2; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } .shp-summary-group-info { @@ -423,13 +579,17 @@ textarea[class*="span"], } .address-summary { - // background: none; + background: none; border-color: $color-gray8; border-radius: 8px; font-weight: 400; font-size: 12px; line-height: 16px; - // padding: 12px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } @include mq(md, max) { background-position: 8px 9px; @@ -445,6 +605,11 @@ textarea[class*="span"], line-height: 16px; color: $color-blue2; text-decoration: none; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } } } @@ -473,6 +638,10 @@ textarea[class*="span"], -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; + @include mq(xxl, min) { + width: 406.48px; + } + span { text-align: center; color: $color-gray10; @@ -482,6 +651,12 @@ textarea[class*="span"], font-size: 14px; line-height: 24px; + @include mq(xxl, min) { + font-size: 28px; + line-height: 24px; + white-space: nowrap; + } + &::selection { color: $color-red2 !important; } @@ -492,6 +667,83 @@ textarea[class*="span"], } } + .steps-view { + @include mq(xxl, min) { + width: 800.25px; + } + + h3 { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + } + + .payment-description { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + + .installments { + p { + span { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + } + } + + .payment-pix-step-number { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + + .payment-pix-step-text { + @include mq(xxl, min) { + font-size: 24px; + line-height: 38px; + } + } + + .sight { + span { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + } + + .span12 { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + + p { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + } + + .span4 { + p { + @include mq(xxl, min) { + font-size: 28px; + line-height: 48px; + } + } + } + .shp-summary-group-price, .shp-summary-package { color: $color-gray4; @@ -499,11 +751,16 @@ textarea[class*="span"], .shp-summary-group-price { padding-right: 16px; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } - .shp-summary-package { - padding-left: 16px; - } + // .shp-summary-package { + // padding-left: 16px; + // } .vtex-omnishipping-1-x-summaryChange { border-color: #303030; @@ -529,9 +786,26 @@ textarea[class*="span"], border: 1px solid $color-black; } + .vtex-omnishipping-1-x-leanShippingTextLabel { + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } + } + .vtex-omnishipping-1-x-deliveryOptionActive { color: $color-black; - // text-shadow: 1.3px 1px lighten($color-black, 50); + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index cfc32df..b284f8d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -35,6 +35,7 @@ body .container-cart { border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; + margin-bottom: 48px; padding: 16px; @include mq(pg, max) { @@ -57,12 +58,18 @@ body .container-cart { padding: 17px 24px; h2 { + display: flex; padding-bottom: 16px; background: $color-white; border: none; color: #303030; font-size: 14px; font-weight: 500; + + @include mq(xxl, min) { + font-size: 32px; + line-height: 37px; + } } .item-unavailable { @@ -90,6 +97,11 @@ body .container-cart { .shipping-date, .price { color: #7d7d7d; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } } } @@ -102,6 +114,11 @@ body .container-cart { #go-to-cart-button a { color: #303030; text-decoration: underline; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 33px; + } } .summary-totalizers { @@ -124,6 +141,11 @@ body .container-cart { &:active { background: darken($color-black, 5); } + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } } @@ -231,6 +253,11 @@ body .container-cart { .product-name { padding-right: 0; + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(pg, max) { padding: 0 0 10px !important; } @@ -376,6 +403,11 @@ body .container-cart { width: 38px; color: $color-gray2; box-shadow: none; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } .icon-plus-sign, @@ -387,7 +419,7 @@ body .container-cart { padding: 1px 12px; @include mq(xxl, min) { - width: 32px; + font-size: 32px; } } } @@ -437,6 +469,7 @@ body .container-cart { @include mq(xxl, min) { font-size: 28px; line-height: 33px; + white-space: nowrap; } } @@ -501,6 +534,10 @@ body .container-cart { .srp-container { padding: 0 0 0 10px; + @include mq(xxl, min) { + max-width: 552px; + } + @include mq(pg, max) { padding: 0 16px; } @@ -535,6 +572,7 @@ body .container-cart { @include mq(xxl, min) { font-size: 28px; line-height: 36px; + max-width: 552px; } } @@ -551,6 +589,12 @@ body .container-cart { padding: 12px 40px; transition: all 0.2s linear; + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + max-width: 552px; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -591,8 +635,8 @@ body .container-cart { text-transform: uppercase; @include mq(xxl, min) { - font-size: 28px !important; - line-height: 36px !important; + font-size: 28px; + line-height: 36px; } &:hover { @@ -632,6 +676,11 @@ body .container-cart { label { width: 50%; + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } + &:active { background-color: #f0f0f0; } @@ -799,6 +848,10 @@ body .container-cart { padding: 0; width: 346px; + @include mq(xxl, min) { + width: 34.4175%; + } + @include mq(pg, max) { width: 100% !important; padding: 0; @@ -820,6 +873,11 @@ body .container-cart { line-height: 14px; color: $color-black2; text-decoration: none; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -931,6 +989,12 @@ body .container-cart { line-height: 16px; color: $color-black; padding: 12px 0; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + white-space: nowrap; + } } &.info { @@ -951,6 +1015,12 @@ body .container-cart { font-size: 18px; line-height: 21px; color: $color-black; + + @include mq(xxl, min) { + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } } } @@ -962,6 +1032,10 @@ body .container-cart { flex-direction: column; width: 343px; + @include mq(xxl, min) { + width: 688.35px; + } + @include mq(pg, max) { padding: 0 16px; width: calc(100% - 32px); @@ -990,6 +1064,11 @@ body .container-cart { font-size: 12px; line-height: 14px; color: $color-black2; + + @include mq(xxl, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -1018,6 +1097,11 @@ body .container-cart { vertical-align: middle; line-height: 19px; text-shadow: none; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 7d1e57f..0974a83 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -19,6 +19,11 @@ text-align: center; text-transform: uppercase; color: $color-black2; + + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } } } @@ -45,6 +50,11 @@ letter-spacing: 0.05em; text-transform: uppercase; transition: ease-in 0.22s all; + + @include mq(xxl, min) { + font-size: 28px; + line-height: 33px; + } } &:hover { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index b43496c..b2097e7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -85,6 +85,11 @@ body { @include mq(md, max) { margin-left: 30px; } + + @include mq(xxl, min) { + font-size: 48px; + line-height: 65px; + } } .dropdown { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index c7642e7..d388267 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -120,7 +120,7 @@ bottom: 50%; left: -949px; z-index: 5; - width: 100%; + width: inherit; } } .slick-next { @@ -136,7 +136,7 @@ no-repeat center; z-index: 5; right: -910px; - width: 100%; + width: inherit; } } .slick-arrow.slick-hidden { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 065826c..072a684 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,6 +23,7 @@ $color-gray7: #c4c4c4; $color-gray8: #e0e0e0; $color-gray9: #808080; $color-gray10: #58595b; +$color-gray11: #828282; $color-blue: #4267b2; $color-blue2: #00c8ff;