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

fix(variaveis): added colors

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-12-14 18:00:44 -03:00
parent ab4605df02
commit 8216f8d4c9
4 changed files with 418 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
border-color: $color-gray3;
font-family: $font-family;
padding-top: 8px;
@ -30,7 +30,7 @@
}
small {
color: $color-gray4;
color: $color-gray3;
}
}
}
@ -76,7 +76,7 @@
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border: 1px solid $color-gray3;
border-radius: 0;
h3 {
@ -113,7 +113,7 @@
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
@ -158,7 +158,7 @@
select,
input {
border-radius: 0;
border: 1px solid $color-gray4;
border: 1px solid $color-gray3;
box-shadow: none;
}
@ -213,7 +213,7 @@
}
.shp-lean {
border: 1px solid $color-gray4;
border: 1px solid $color-gray3;
border-radius: 0;
label {
@ -236,12 +236,12 @@
}
.shp-summary-group-info {
border-color: $color-gray4;
border-color: $color-gray3;
}
.address-summary {
background: none;
border-color: $color-gray4;
border-color: $color-gray3;
border-radius: 0;
color: #303030;
padding: 12px;
@ -259,7 +259,7 @@
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
color: $color-gray3;
}
.shp-summary-group-price {

4
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -68,7 +68,7 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
color: $gray-500;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
@ -96,7 +96,7 @@ body {
&::before,
&::after {
content: "";
background: $color-gray2;
background: $gray-500;
display: block;
float: right;
height: 2px;

197
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,47 +1,130 @@
/* _footer.scss */
.footerCheckout {
border-top: none;
color: $color-gray2;
.container {
display: flex;
flex-direction: column;
width: 100%;
padding: 7px 0;
margin: 0;
@include mq(dt, min) {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px 0 15px 0;
}
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
border-top: 1px solid $black;
@media screen and (max-width: 490px) {
padding: 7px 0;
}
}
&__address {
color: $color-gray2;
color: $gray-500;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
line-height: 14px;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
max-width: 40%;
@include mq(md, max) {
margin-bottom: 24px;
max-width: 100%;
@include mq(dt, max) {
display: flex;
width: 100%;
order: 2;
margin-top: 17px;
span {
margin-left: 16px;
}
}
@include mq(dt, min) {
min-width: 269px;
margin-left: 32px;
}
@include mq(tv, min) {
font-size: 20px;
line-height: 27px;
min-width: 537px;
margin-left: 0;
}
}
&__stamps {
align-items: center;
display: flex;
justify-self: center;
height: 33px;
align-items: center;
list-style: none;
margin: 0 0 0 5px;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
li {
height: 33px;
}
&__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
@include mq(dt, min) {
justify-content: center;
min-width: 404px;
margin: 0;
}
@include mq(tv, min) {
min-width: 690.52px;
}
.payments-icons-wrapper {
display: flex;
width: 100%;
list-style: none;
margin: 0;
gap: 4px;
figure {
padding: 6px 0 7px;
width: 35.65px;
height: 20px;
margin: 0;
@include mq(tv, min) {
width: 69.63px;
}
@include mq(Gf, max) {
width: 28px;
}
}
}
.footerCheckout__stamps__divider {
border-left: 1px solid $gray-125;
margin: 0 10px;
height: 33px;
padding: 0 0 9px;
@include mq(dt, min) {
margin-left: 11.35px;
}
}
.footerCheckout__vtexpci {
.vtex-icon {
width: 53px;
margin: 0;
}
@include mq(tv, min) {
.vtex-icon {
width: 103.52px;
height: 64.46px;
}
}
}
}
@ -51,18 +134,43 @@
list-style-type: none;
margin: 0;
li:last-child {
@include mq(dt, max) {
display: flex;
width: 100%;
order: 3;
margin-top: 17px;
}
@include mq(dt, min) {
min-width: 217px;
margin-right: 22.5px;
}
li {
margin-left: 16px;
figure {
margin: 0;
}
}
.vtex-icon {
width: 44.92px;
margin: 0;
}
.m3-icon {
width: 28.66px;
margin: 0;
}
a {
align-items: center;
color: $color-gray2;
color: $gray-500;
display: flex;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 10px;
font-weight: 400;
font-size: 9px;
line-height: 12px;
text-decoration: none;
@ -70,5 +178,38 @@
margin-right: 8px;
}
}
@include mq(tv, min) {
min-width: 388.98px;
margin-right: 0;
a {
font-size: 18px;
line-height: 25px;
}
li {
margin-left: 10px;
}
.vtex-icon {
width: 87.73px;
}
.m3-icon {
width: 55.98px;
}
}
}
.footerCheckout::after,
::before {
display: none;
content: none;
}
.footerCheckout::before,
::after {
display: none;
content: none;
}
}

12
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -5,13 +5,13 @@ $font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */
$black: #000;
$white: #fff;
$color-black: #292929;
$color-white: #fff;
$color-gray: #6c6c6c;
$color-gray3: #f0f0f0;
$gray-50: #e5e5e5;
$gray-100: #f0f0f0;
$gray-125: #c4c4c4;
@ -19,6 +19,12 @@ $gray-150: #989898;
$gray-200: #8d8d8d;
$gray-500: #292929;
$color-gray: #6c6c6c;
$color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$blue: #00c8ff;
$color-blue: #4267b2;