Samuel/m3-academy-template-checkout-samuelcondack
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Altera o css do checkout carrinho e autenticação

Browse Source
This commit is contained in:
SamuelCondack 2022-12-12 21:03:18 -03:00
parent db7c6c25a6
commit 85e758b0f5
2 changed files with 67 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -112,8 +112,8 @@
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 8;
border: 1px solid $color-gray4; border: 1px solid #E0E0E0;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
@ -130,10 +130,12 @@
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: white;
border-radius: 8px; color: #00C8FF;
border: none; border: none;
color: $color-white; font-size: 19px;
box-shadow: none;
text-shadow: none;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
@ -157,8 +159,8 @@
select, select,
input { input {
border-radius: 0; border-radius: 8;
border: 1px solid $color-gray4; border: 1px solid #E0E0E0;
box-shadow: none; box-shadow: none;
} }
@ -168,8 +170,10 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
display: none;
color: $color-black; color: $color-black;
font-weight: 500; font-weight: 500;
text-decoration: underline; text-decoration: underline;
@ -181,19 +185,23 @@
} }
button.submit { button.submit {
width: 100%;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $color-black; background: #00C8FF;
margin-top: 8px; margin-top: 8px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
text-transform: uppercase;
font-weight: 700;
margin-top: 45px;
&:hover { &:hover {
background: lighten($color-black, 5); background: lighten(#00C8FF, 5);
} }
&:active { &:active {
background: darken($color-black, 5); background: darken(#00C8FF, 5);
} }
} }

70
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -155,12 +155,13 @@
} }
a { a {
color: $color-blue; color: #000000;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
cursor: default;
&:hover { &:hover {
color: darken($color-blue, 10); color: darken($color-blue, 10);
@ -218,7 +219,7 @@
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
border-radius: 0; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -234,7 +235,7 @@
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3; border: none;
border-radius: 0; border-radius: 0;
border-width: 0 1px; border-width: 0 1px;
display: block; display: block;
@ -253,6 +254,9 @@
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
background-color: #00C8FF;
border: 0.05px solid;
border-radius: 50%;
color: $color-black; color: $color-black;
display: block; display: block;
font-weight: 500; font-weight: 500;
@ -262,17 +266,26 @@
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
align-items: center;
content: "-"; content: "-";
font-size: 16px; color: #f0f0f0;
font-size: 20px;
font-weight: 700;
} }
} }
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
align-items: center;
content: "+"; content: "+";
font-size: 14px; color: #f0f0f0;
font-size: 20px;
font-weight: 700;
} }
} }
.quantity{
border-radius: 8px;
}
.item-quantity-change { .item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) { @media (max-width: 979px) and (min-width: 768px) {
@ -369,6 +382,9 @@
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 12px;
} }
.ship-country{
display: none;
}
button.shp-open-options { button.shp-open-options {
background-color: $color-gray5; background-color: $color-gray5;
@ -405,7 +421,7 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: #00C8FF;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -419,11 +435,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten(#00C8FF, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken(#00C8FF, 5);
} }
} }
} }
@ -444,12 +460,12 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid #000000;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: #000000;
} }
label { label {
@ -589,6 +605,10 @@
} }
} }
} }
#cart-shipping-calculate{
background-color: #00C8FF;
border-radius: 8px;
}
&-totalizers { &-totalizers {
padding: 0; padding: 0;
@ -630,7 +650,7 @@
} }
.coupon-label label { .coupon-label label {
margin-bottom: 12px; text-align: left;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -664,7 +684,7 @@
font-size: 12px; font-size: 12px;
height: 34px; height: 34px;
padding: 0 12px; padding: 0 12px;
max-width: 160px; width: 204px;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -673,10 +693,10 @@
} }
button { button {
background: $color-black; background: #00C8FF;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: #000000;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
@ -691,11 +711,11 @@
} }
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten(#00C8FF, 5);
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: darken(#00C8FF, 5);
} }
} }
} }
@ -734,7 +754,7 @@
td.info, td.info,
td.monetary { td.monetary {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 21px; line-height: 21px;
color: $color-black; color: $color-black;
@ -743,7 +763,9 @@
} }
} }
} }
.btn{
text-shadow: none !important;
}
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -779,28 +801,30 @@
color: $color-blue; color: $color-blue;
} }
} }
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-green; background: #00C8FF;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
font-size: 0; font-size: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding: 12px 19px; padding: 12px 19px;
text-shadow: none;
font-weight: 700;
&:hover { &:hover {
background-color: darken($color-green, 5); background-color: lighten(#00C8FF, 5);
} }
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 500; font-weight: 700;
font-size: 13px; font-size: 13px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: #000000;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;