From 2a919c9b07824814d72161e2ad126a6521522cb1 Mon Sep 17 00:00:00 2001
From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com>
Date: Sun, 18 Dec 2022 20:56:43 -0300
Subject: [PATCH] feat: checkou style
---
.../icon-radios-input-Active-M3Academy.svg | 3 +
.../svgs/icon-radios-input-M3Academy.svg | 3 +
checkout/src/arquivos/sass/checkout.scss | 6 +-
.../sass/checkout/_checkout-autenticacao.scss | 408 +++++++++++++-----
.../sass/checkout/_checkout-carrinho.scss | 66 ++-
.../sass/checkout/_checkout-pagamento.scss | 192 +++++++++
.../sass/checkout/_checkout-vazio.scss | 77 ++--
.../src/arquivos/sass/utils/_variaveis.scss | 9 +-
8 files changed, 610 insertions(+), 154 deletions(-)
create mode 100644 checkout/src/arquivos/assets/svgs/icon-radios-input-Active-M3Academy.svg
create mode 100644 checkout/src/arquivos/assets/svgs/icon-radios-input-M3Academy.svg
diff --git a/checkout/src/arquivos/assets/svgs/icon-radios-input-Active-M3Academy.svg b/checkout/src/arquivos/assets/svgs/icon-radios-input-Active-M3Academy.svg
new file mode 100644
index 0000000..6b9ff55
--- /dev/null
+++ b/checkout/src/arquivos/assets/svgs/icon-radios-input-Active-M3Academy.svg
@@ -0,0 +1,3 @@
+
diff --git a/checkout/src/arquivos/assets/svgs/icon-radios-input-M3Academy.svg b/checkout/src/arquivos/assets/svgs/icon-radios-input-M3Academy.svg
new file mode 100644
index 0000000..4212b38
--- /dev/null
+++ b/checkout/src/arquivos/assets/svgs/icon-radios-input-M3Academy.svg
@@ -0,0 +1,3 @@
+
diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss
index a9de162..213ed26 100644
--- a/checkout/src/arquivos/sass/checkout.scss
+++ b/checkout/src/arquivos/sass/checkout.scss
@@ -47,6 +47,10 @@ body {
.container-order-form,
.container-cart {
width: 80%;
+
+ @include mq(md, max) {
+ width: 100%;
+ }
}
}
@@ -70,7 +74,7 @@ body {
font-weight: 700;
font-size: 24px;
line-height: 33px;
- margin: 16px 0 17px;
+ margin: 16px 0 17px 17px;
letter-spacing: 1px;
text-transform: uppercase;
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index e0164d8..68cafe3 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -1,5 +1,5 @@
.checkout-container {
- min-height: 410px;
+ box-sizing: border-box;
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
@@ -116,6 +116,10 @@
border-radius: 5px;
width: 400px;
+ @include mq(md, max) {
+ width: 100%;
+ }
+
h3 {
color: $black-padrao;
margin: 0 0 9.5px 0;
@@ -154,21 +158,30 @@
.shipping-data,
.payment-data,
.client-profile-data {
- margin-left: 16px;
+ @include mq(md, max) {
+ width: 100% !important;
+ box-sizing: border-box;
+ }
+
.accordion-group {
- border-radius: 0;
+ border-radius: 8px;
border: 1px solid $color-gray3;
font-family: $font-family;
- padding: 11px;
+ padding: 16px;
.accordion-heading {
span {
- color: #303030;
- margin-bottom: 8px;
+ margin: 8px 0 15px 0px;
padding: 0;
+ height: 19px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: $color-black;
+ font-family: $font-family-secundary;
i::before {
- fill: #303030;
+ display: none;
}
}
@@ -186,6 +199,17 @@
.accordion-inner {
padding: 0;
+ .shipping-summary-info {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .ship-country {
+ display: none;
+ }
/* General configurations */
@@ -193,99 +217,15 @@
display: none;
}
- .client-first-name p {
- margin: 16px 10px 0 0;
- label {
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- font-family: $font-family;
- color: $color-gray2;
- }
-
- select,
- input {
- border-radius: 0;
- border: 1px solid $color-gray9;
- border-radius: 5px;
- box-shadow: none;
- height: 32px;
- width: 100%;
-
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- font-family: $font-family;
- color: $color-gray10;
- }
-
- .help.error {
- color: red;
- }
- }
-
- .box-client-info-pj {
- display: none;
- .link a#is-corporate-client,
- .link a#not-corporate-client {
- color: $color-black;
- font-weight: 500;
- text-decoration: underline;
- }
- }
-
- .state-inscription-box span {
- font-weight: 500;
- }
-
- #opt-in-newsletter {
- width: 18px;
- height: 18px;
- }
-
- .newsletter-text {
- position: relative;
- top: 2px;
- font-weight: 400px;
- line-height: 16px;
- font-size: 12px;
- font-family: $font-family;
- }
-
- .submit {
- margin: 45px 0;
- button {
- border: none;
- border-radius: 8px;
- background: $color-blue-100;
- outline: none;
- transition: all 0.2s linear;
- width: 100%;
-
- font-weight: 700;
- font-size: 14px;
- line-height: 19px;
- letter-spacing: 0.05em;
- text-transform: uppercase;
- font-family: $font-family;
- color: $color-white;
-
- &:hover {
- background: lighten($color-blue-hover, 5);
- }
-
- &:active {
- background: darken($color-blue-hover, 5);
- }
- }
- }
-
- /* Shipping configurations */
-
- .ship-postalCode small a {
- color: #303030;
- font-weight: 500;
- text-decoration: underline;
+ #ship-postalCode {
+ box-sizing: border-box;
+ display: flex;
+ max-width: 100% !important;
+ width: 100%;
+ height: 45px;
+ border: solid 1px $color-gray7;
+ border-radius: 8px;
+ color: $black-padrao;
}
.vtex-omnishipping-1-x-deliveryGroup {
@@ -353,18 +293,280 @@
padding-left: 16px;
}
+ .vtex-omnishipping-1-x-addressFormPart1 {
+ small {
+ margin: 10px 0 25px 0;
+ }
+
+ a {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration: underline;
+ color: $color-black;
+ font-family: $font-family;
+ }
+ }
+
+ // PARTE DE ENTREGA //
+
+ .vtex-omnishipping-1-x-deliveryGroup {
+ .vtex-omnishipping-1-x-shippingSectionTitle {
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray2;
+ font-family: $font-family;
+ margin: 0 0 11px 0;
+ }
+
+ #delivery-packages-options {
+ border: 1px solid $color-gray9;
+ border-radius: 8px;
+ }
+
+ .shp-lean-option {
+ //.vtex-omnishipping-1-x-leanShippingIcon {
+ // width: 12px;
+ // height: 12px;
+ // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy")
+ // no-repeat center center;
+ // flex: none;
+ // margin-right: 8px;
+
+ // .vtex-omnishipping-1-x-svg {
+ // content: url("https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy")
+ // no-repeat center center;
+ // }
+ // }
+
+ .shp-option-text {
+ border-right: 1px solid $color-gray9;
+ flex: auto;
+ .shp-option-text-label {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ color: $color-gray2;
+ font-family: $font-family;
+ }
+
+ .shp-option-text-time span {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray2;
+ font-family: $font-family;
+ }
+ }
+ }
+ .vtex-omnishipping-1-x-optionPrice {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray2;
+ font-family: $font-family;
+ }
+ }
+
+ .vtex-omnishipping-1-x-addressForm {
+ .vtex-omnishipping-1-x-shippingSectionTitle {
+ font-weight: 700;
+ margin-bottom: 11px;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ color: $color-gray2;
+ font-family: $font-family;
+ }
+
+ .vtex-omnishipping-1-x-addressSummary {
+ border: 1px solid $color-gray9;
+ border-radius: 8px;
+ margin-bottom: 0;
+ .address-summary {
+ position: relative;
+ border: 0;
+ margin-bottom: 0;
+ .street {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .neighborhood {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .city {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .state-delimiter {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .state {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ #force-shipping-fields {
+ position: absolute;
+ right: 13px;
+ font-weight: 400;
+ text-decoration: none;
+ text-transform: lowercase;
+ font-size: 12px;
+ line-height: 16px;
+ font-family: $font-family;
+ color: $color-blue-100;
+ margin-left: 24px;
+ }
+ }
+ }
+
+ .vtex-omnishipping-1-x-address {
+ .ship-number {
+ width: 100%;
+ margin-bottom: 15px;
+ label {
+ margin-bottom: 3px;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+ input {
+ box-sizing: border-box;
+ width: 100%;
+ border: 1px solid $color-gray9;
+ border-radius: 8px;
+ height: 35px;
+ }
+ }
+
+ .ship-complement {
+ margin-bottom: 8px;
+ label {
+ margin: 15px 0 3px;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ input {
+ margin-bottom: 8px;
+ box-sizing: border-box;
+ width: 100%;
+ border: 1px solid $color-gray9;
+ border-radius: 8px;
+ height: 35px;
+ }
+ }
+
+ .ship-receiverName {
+ label {
+ margin-bottom: 3px;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0.05em;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ input {
+ box-sizing: border-box;
+ width: 100%;
+ border: 1px solid $color-gray9;
+ border-radius: 8px;
+ height: 35px;
+ }
+ }
+ }
+ }
+
+ .vtex-omnishipping-1-x-submitPaymentButton {
+ margin: 0;
+ button {
+ width: 100%;
+ background-color: $color-blue-100;
+ color: $color-white;
+ font-family: $font-family;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ margin-bottom: 28px;
+ border-radius: 8px;
+
+ &:hover {
+ background-color: $color-blue-hover;
+ }
+
+ &:active {
+ background-color: $color-blue-hover;
+ border: none;
+ }
+ }
+ }
+
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
- background-color: #d8c8ac;
- border: 1px solid #d8c8ac;
+ background-color: $color-white;
+ border: 1px solid $color-black;
+ box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ border-radius: 100px;
+ text-transform: uppercase;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
- text-shadow: 1.3px 1px lighten($color-black, 50);
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ color: $color-roxo;
+ font-family: $font-family;
+ }
+
+ .shp-method-option-text {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-transform: uppercase;
+ color: $color-roxo;
+ font-family: $font-family;
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 3f6a91c..effd14e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -6,7 +6,6 @@
.cart-template {
font-family: $font-family;
- margin: 0 !important;
@include mq(md, max) {
padding: 0 0;
@@ -28,6 +27,29 @@
border-right: none;
border-radius: 0;
}
+
+ @include mq(sm, max) {
+ height: 91px;
+ }
+
+ .cart-items {
+ thead {
+ @include mq(md, max) {
+ .item-remove {
+ display: none;
+ }
+ .product {
+ display: none;
+ }
+ .product-price {
+ display: none;
+ }
+ .quantity {
+ display: none;
+ }
+ }
+ }
+ }
}
.cart-fixed.affix {
@@ -114,6 +136,9 @@
.cart-items {
.product-item {
padding: 16px 0;
+ @include mq(md, max) {
+ margin: 0;
+ }
}
th {
@@ -148,9 +173,8 @@
max-width: 60px !important;
margin: 0 16px 16px 0;
- @include mq(sm, max) {
- height: 72px;
- width: auto;
+ @include mq(sm, min) {
+ margin-top: 16px;
}
}
}
@@ -172,14 +196,14 @@
color: $black-padrao;
transition: ease-in 0.22s all;
+ @include mq(md, max) {
+ margin-left: 24px;
+ }
+
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
}
-
- @media (max-width: 490px) {
- margin-left: 23px;
- }
}
.brand,
@@ -219,10 +243,14 @@
@include mq(md, max) {
min-width: 78px;
}
- @media (max-width: 490px) {
- position: absolute;
- bottom: 0;
- right: 0;
+ @include mq(sm, max) {
+ text-align: right;
+ position: relative;
+ top: -50px;
+ float: right;
+ margin-right: 5px;
+ height: 38px;
+ padding: 0;
}
span.list-price {
@@ -256,8 +284,10 @@
position: relative;
top: 5px;
- @media (max-width: 490px) {
+ @include mq(sm, max) {
margin-left: 84px !important;
+ position: relative;
+ top: -58px;
}
input {
@@ -356,6 +386,11 @@
i {
height: 10px;
width: 10px;
+
+ @include mq(sm, max) {
+ position: relative;
+ top: 6px;
+ }
}
}
@@ -583,9 +618,10 @@
color: red;
font-size: 12px;
position: absolute;
- left: 0;
+ left: 0px;
width: 100%;
- top: 17px;
+ top: 81px;
+ right: 0px;
}
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..48f24dc 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,8 +4,200 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset;
margin-right: 0;
float: right;
+
+ @include mq(md, max) {
+ width: 100%;
+ padding: 0 16px;
+ }
+
+ .cart-fixed {
+ h2 {
+ border: 1px solid $color-gray5;
+ border-radius: 8px 8px 0 0;
+ border-bottom: none;
+ box-sizing: border-box;
+ padding: 24px 0px 34px 17px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 19px;
+ color: $color-black;
+ text-align: start;
+ font-family: $font-family-secundary;
+ }
+
+ .summary-cart-template-holder {
+ .cart {
+ border: 1px solid $color-gray5;
+ border-top: none;
+ width: 100%;
+ height: 60px;
+ border-bottom: none;
+ border-radius: 0;
+ margin-bottom: 0;
+
+ .cart-items {
+ li {
+ position: relative;
+ height: 60px;
+ a img {
+ height: 60px;
+ width: 60px;
+ }
+
+ .product-name {
+ display: flex;
+ align-items: center;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ font-family: $font-family-secundary;
+ color: $black-padrao;
+ }
+
+ .quantity {
+ display: none;
+ }
+
+ .description {
+ .shipping-date {
+ display: none;
+ }
+ .price {
+ position: relative;
+ bottom: 40px;
+ right: 0px;
+
+ @media screen and (min-width: 1440px) and (max-width: 2499px) {
+ bottom: 0;
+ right: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ #go-to-cart-button {
+ border: 1px solid $color-gray5;
+ border-top: none;
+ width: 100%;
+ padding: 0px 17px 10px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: end;
+ margin-top: 19px;
+
+ small {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: right;
+ text-decoration-line: underline;
+ font-family: $font-family;
+ color: $black-padrao;
+ }
+ }
+
+ .summary-template-holder {
+ padding-top: 0;
+ .summary {
+ border: 1px solid $color-gray5;
+ box-sizing: border-box;
+ border-top: none;
+ border-radius: 0 0 8px 8px;
+ .summary-totalizers {
+ .accordion-group {
+ .accordion-body {
+ .accordion-inner {
+ .table {
+ .totalizers-list {
+ .Items {
+ .info {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ box-sizing: border-box;
+ padding: 25px 17px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .monetary {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ box-sizing: border-box;
+ padding: 25px 17px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+ }
+
+ .Discounts {
+ border: 1px solid $color-gray5;
+ border-left: none;
+ border-right: none;
+
+ .info {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ box-sizing: border-box;
+ padding: 25px 17px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+
+ .monetary {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ box-sizing: border-box;
+ padding: 25px 17px;
+ font-family: $font-family;
+ color: $color-gray2;
+ }
+ }
+ }
+
+ tfoot {
+ .info {
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ box-sizing: border-box;
+ padding: 25px 0 8px 17px;
+ font-family: $font-family;
+ color: $color-black;
+ }
+
+ .monetary {
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ box-sizing: border-box;
+ padding: 25px 17px 8px 0;
+ font-family: $font-family;
+ color: $color-black;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
.orderform-template-holder {
width: 66.1132%;
+
+ @include mq(md, max) {
+ width: 100%;
+ padding: 0 16px;
+ margin-bottom: 16px;
+ }
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..1ccd469 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,38 +1,51 @@
.empty-cart {
- font-family: $font-family;
- &-content {
- color: $color-black;
- text-align: center;
+ font-family: $font-family;
+ &-content {
+ color: $color-black;
+ text-align: center;
- @include mq(md, max) {
- padding: 0 16px;
- }
- }
+ @include mq(md, max) {
+ padding: 0 16px;
+ }
+ }
- &-title {
- font-size: 20px;
- }
+ &-title {
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ margin-bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ text-transform: uppercase;
+ color: $black-padrao;
+ font-family: $font-family;
+ }
- &-links {
- .link-choose-products {
- background: $color-black;
- border: none;
- border-radius: 5px;
- transition: ease-in 0.22s all;
- outline: none;
- font-family: $font-family;
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 16px;
- text-align: center;
- letter-spacing: 0.05em;
- color: $color-white;
- text-transform: uppercase;
+ &-message {
+ display: none;
+ }
- &:hover {
- background: lighten($color-black, 5);
- }
- }
- }
+ &-links {
+ display: flex;
+ justify-content: center;
+ .link-choose-products {
+ width: 250px;
+ border-radius: inherit;
+ border: 1px solid $black-padrao;
+ background: $color-white;
+ color: $color-black;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ text-align: center;
+ text-transform: uppercase;
+ font-family: $font-family-secundary;
+
+ &:hover {
+ background: lighten($color-black, 5);
+ }
+ }
+ }
}
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index e20c584..b4dcec8 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -22,6 +22,7 @@ $color-gray7: #c4c4c4;
$color-gray8: #989898;
$color-gray9: #e0e0e0;
$color-gray10: #bdbdbd;
+$color-gray11: #808080;
$color-blue: #4267b2;
$color-blue-100: #00c8ff;
@@ -29,14 +30,16 @@ $color-blue-hover: #01addd;
$color-green: #4caf50;
+$color-roxo: #41115d;
+
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
+ md: 1025px,
+ lg: 2500px,
+ xl: 2501px,
) !default;
$z-index: (
--
2.34.1