diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index e952cb0..bd00d97 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -178,17 +178,17 @@ .accordion-heading { span { - color: #303030; + color: $color-black2; padding: 0; i::before { - fill: #303030; + fill: $color-black2; } } a { align-items: center; - background-color: #303030; + background-color: $color-black2; border-radius: 8px; border: none; color: $color-white; @@ -273,14 +273,14 @@ /* Shipping configurations */ .ship-postalCode small a { - color: #303030; + color: $color-black2; font-weight: 500; text-decoration: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + color: $color-black2; font-size: 14px; font-weight: 500; } @@ -292,7 +292,7 @@ label { background-color: $color-white; box-shadow: none; - color: #303030; + color: $color-black2; padding: 8px 12px; svg path { @@ -303,7 +303,7 @@ } .delivery-address-title { - color: #303030; + color: $color-black2; font-size: 14px; font-weight: 500; } @@ -316,7 +316,7 @@ background: none; border-color: $color-gray4; border-radius: 0; - color: #303030; + color: $color-black2; padding: 12px; @include mq(md, max) { @@ -324,7 +324,7 @@ } a { - color: #303030; + color: $color-black2; font-weight: 500; text-decoration: underline; } @@ -344,8 +344,8 @@ } .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; + border-color: $color-black2; + color: $color-black2; } .vtex-omnishipping-1-x-deliveryChannelsToggle { @@ -373,6 +373,127 @@ } } + .step.accordion-group { + &.client-profile-data.filled { + padding-bottom: 36px !important; + + .accordion-heading { + font-family: $font-family-secondary; + margin-bottom: 25px !important; + } + } + + &.shipping-data { + padding-bottom: 35px; + margin-bottom: 16px; + + .accordion-heading { + margin-bottom: 25px !important; + } + + .vtex-omnishipping-1-x-SummaryItemGroup { + padding: 0 !important; + + .vtex-omnishipping-1-x-SummaryItemContent { + display: flex; + font-size: 12px; + align-items: flex-end; + padding-left: 3px; + + .shp-summary-group-info { + padding-left: 0 !important; + border: none; + + .shp-summary-group-address { + margin-bottom: 0; + + .address-summary { + padding: 0 0 25px 0; + color: $color-gray2; + + .street { + display: inline-block; + margin-bottom: 10px; + } + + :nth-child(8) { + display: block; + margin-top: 10px; + } + + .line3-delimiter { + display: none; + } + } + } + + .shp-summary-package { + padding-left: 0; + } + + .shp-summary-group-price { + padding: 0; + } + } + } + } + + .link-change-shipping { + display: none; + } + } + } + + .payment-data .accordion-group { + width: auto !important; + + .accordion-heading span { + font-size: 16px; + font-weight: 400; + } + + .payment-group-list-btn { + display: flex; + flex-direction: column; + gap: 12px; + } + + .payment-group-item { + margin-left: 0; + padding: 0; + border: none; + background: none; + + &-text { + border: solid 1px $color-gray12; + border-radius: 6px; + color: $color-gray13; + background: $color-gray14; + height: 50px; + width: 209px; + display: flex; + font-size: 14px; + margin: 0; + padding: 0; + align-items: center; + justify-content: center; + background-image: none !important; + } + + &.active { + .payment-group-item-text { + border-color: $color-orange; + color: $color-orange; + background-color: $color-gray11; + } + } + } + + .steps-view { + width: 363px; + } + } + .shipping-data.active { #shipping-data .accordion-group { padding-bottom: 44px; @@ -494,3 +615,27 @@ } } } + +.box-info { + color: $color-gray2; + + .client-profile-email, + span.name { + margin-bottom: 6px; + } + + span.tel { + display: block; + margin-top: 6px; + } +} + +.icon-user, +.icon-home, +.icon-credit-card { + display: none; +} + +.accordion-heading { + font-family: $font-family-secondary; +} diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b414b7f..4870ff3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -83,7 +83,7 @@ } #go-to-cart-button a { - color: #303030; + color: $color-black2; text-decoration: underline; } @@ -161,6 +161,7 @@ .product-name { padding-right: 0; + width: 300px !important; @include mq(lg, max) { width: 250px; @@ -203,8 +204,22 @@ } } + th.shipping-date { + padding-right: 0; + padding-left: 0; + } + + td.product-price { + bottom: -12px; + flex-direction: column; + width: 104px; + padding-right: 49px; + } + .product-price { - min-width: 100px; + text-align: left; + padding-left: 91px; + min-width: none; @include mq(md, max) { min-width: 78px; } @@ -231,17 +246,23 @@ } td.quantity { + display: flex; + margin-left: 0px; + margin-top: 16px; + padding-right: 0px; + height: 34px; align-items: center; border: 1px solid $color-gray3; border-radius: 8px; box-sizing: border-box; - display: flex; justify-content: center; - margin: 6px auto 0; max-height: 38px; - max-width: 118px; + width: 99px; padding: 0; - width: max-content !important; + + :before { + padding: 0 !important; + } @media (max-width: 490px) { margin-left: 84px !important; @@ -267,6 +288,18 @@ } } + #item-quantity-change-decrement-2621 { + padding-right: 5px; + } + + #item-quantity-change-increment-2621 { + padding-left: 5px; + } + + #item-quantity-2621 { + padding: 0; + } + .icon-plus-sign, .icon-minus-sign { &::before { @@ -312,12 +345,24 @@ } .quantity-price { + padding-left: 67px; font-weight: 400; @include mq(md, max) { display: none; } } + th.quantity, + th.quantity-price, + td.quantity-price { + text-align: left; + } + + td.quantity-price { + padding-right: 0px; + width: fit-content; + } + .item-remove { @media (max-width: 490px) { top: 0; @@ -545,13 +590,13 @@ .srp-result { strong, .srp-items { - color: #303030; + color: $color-black2; font-weight: 400; font-size: 14px; } #deliver-at-text a { - color: #303030; + color: $color-black2; font-size: 16px; font-weight: 500; @@ -563,7 +608,7 @@ .srp-shipping-current-single { border: 1px solid $color-gray4; border-radius: 0; - color: #303030; + color: $color-black2; margin: 16px 0 0; padding: 4px 12px; @@ -582,7 +627,7 @@ .srp-shipping-current-many { &__name { - color: #303030; + color: $color-black2; } &__sla { @@ -604,7 +649,7 @@ &-totalizers { padding: 0; - width: 346px; + width: 362px; .coupon-data { font-family: $font-family-secondary; @@ -638,16 +683,16 @@ } .link-coupon-add { - color: #303030; + color: $color-black2; font-size: 12px; text-decoration: underline; } .coupon-label { - display: flex; - margin-left: 20px; + text-align: left; label { + margin-top: 49px; margin-bottom: 4px; font-family: $font-family-secondary; font-style: normal; @@ -660,6 +705,7 @@ } .coupon-fields { + width: fit-content; margin-bottom: 32px; @include mq(sm, max) { @@ -676,15 +722,15 @@ } input { - border: 2px solid $color-gray5; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; color: $color-gray6; font-size: 12px; height: 34px; + width: 178px; padding: 0 12px; font-family: $font-family-secondary; - max-width: 160px; @include mq(sm, max) { max-width: 100%; @@ -694,8 +740,9 @@ button { background: $color-blue2; + text-shadow: none !important; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-black; font-size: 14px; font-weight: 400; @@ -771,7 +818,6 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; @include mq(md, max) { padding: 0 16px; @@ -815,6 +861,7 @@ font-weight: 700; transition: ease-in 0.22s all; padding: 12px 19px; + width: 316px; &:hover { background-color: darken($color-green, 5); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 6fadb9a..aac6ee9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -10,6 +10,10 @@ body .container-main.container-order-form .orderform-template.active { border-radius: 8px; padding: 24px 0 0 0; + .shipping-date.pull-left { + display: none; + } + .cart { padding: 0 17px 19px 17px; @@ -94,6 +98,22 @@ body .container-main.container-order-form .orderform-template.active { padding: 25px 0 25px 17px; color: $color-gray2; } + + #payment-data-submit { + background-color: $color-green2; + border-radius: 8px; + + .icon-lock { + display: none; + } + + span { + text-transform: uppercase; + font-weight: 700; + letter-spacing: 0.05em; + font-size: 14px; + } + } } .orderform-template-holder { width: 66.1132%; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index cb0d0f8..0dca89f 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,13 +20,20 @@ $color-gray7: #989898; $color-gray8: #ededed; $color-gray9: #e0e0e0; $color-gray10: #808080; +$color-gray11: #f4f5f7; +$color-gray12: #b3b3b3; +$color-gray13: #58595b; +$color-gray14: #fbfbfb; $color-blue: #4267b2; $color-blue2: #00c8ff; $color-red: #ff0000; +$color-orange: #f15a31; + $color-green: #4caf50; +$color-green2: #298541; /* Grid breakpoints */ $grid-breakpoints: (