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

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

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