fix(variaveis): added colors

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

View File

@ -1,289 +1,289 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
font-family: $font-family;
padding-top: 8px;
.client-pre-email {
border-color: $color-gray3;
font-family: $font-family;
padding-top: 8px;
.link-cart {
a {
color: $color-black;
font-size: 14px;
.link-cart {
a {
color: $color-black;
font-size: 14px;
&:hover {
color: lighen($color-black, 10);
}
}
}
&:hover {
color: lighen($color-black, 10);
}
}
}
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
.pre-email {
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
h3 {
margin-bottom: 16px;
h3 {
margin-bottom: 16px;
span {
color: #303030;
font-size: 24px;
}
span {
color: #303030;
font-size: 24px;
}
small {
color: $color-gray4;
}
}
}
small {
color: $color-gray3;
}
}
}
.client-email {
margin: 0 0 16px;
.client-email {
margin: 0 0 16px;
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
input {
box-shadow: none;
color: $color-black;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
box-sizing: border-box;
border-radius: 5px;
@media (max-width: 490px) {
width: auto;
}
}
@media (max-width: 490px) {
width: auto;
}
}
button {
background-color: $color-black;
border-radius: 5px;
border: none;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
button {
background-color: $color-black;
border-radius: 5px;
border: none;
font-family: $font-family;
height: 54px;
right: 0;
top: 0;
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
}
span.help.error {
color: red;
}
}
span.help.error {
color: red;
}
}
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray3;
border-radius: 0;
h3 {
color: #303030;
margin: 0 0 8px 0;
}
h3 {
color: #303030;
margin: 0 0 8px 0;
}
ul {
margin: 0;
ul {
margin: 0;
li {
span {
color: $color-black;
}
li {
span {
color: $color-black;
}
i::before {
color: $color-black;
font-size: 1rem;
opacity: 1;
}
}
}
i::before {
color: $color-black;
font-size: 1rem;
opacity: 1;
}
}
}
i::before {
color: $color-black;
font-size: 6rem;
opacity: 0.5;
}
}
}
i::before {
color: $color-black;
font-size: 6rem;
opacity: 0.5;
}
}
}
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
font-family: $font-family;
padding: 16px;
.shipping-data,
.payment-data,
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
.accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
.accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
i::before {
fill: #303030;
}
}
i::before {
fill: #303030;
}
}
a {
align-items: center;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
a {
align-items: center;
background-color: #303030;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
padding: 6px 5px 6px 8px;
}
}
.accordion-inner {
padding: 0;
.accordion-inner {
padding: 0;
/* General configurations */
/* General configurations */
.client-notice {
color: $color-black;
}
.client-notice {
color: $color-black;
}
p {
label {
color: $color-black;
font-weight: 500;
}
p {
label {
color: $color-black;
font-weight: 500;
}
select,
input {
border-radius: 0;
border: 1px solid $color-gray4;
box-shadow: none;
}
select,
input {
border-radius: 0;
border: 1px solid $color-gray3;
box-shadow: none;
}
.help.error {
color: red;
}
}
.help.error {
color: red;
}
}
.box-client-info-pj {
.link a#is-corporate-client,
.link a#not-corporate-client {
color: $color-black;
font-weight: 500;
text-decoration: underline;
}
}
.box-client-info-pj {
.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;
}
.state-inscription-box span {
font-weight: 500;
}
button.submit {
border: none;
border-radius: 5px;
background: $color-black;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
button.submit {
border: none;
border-radius: 5px;
background: $color-black;
margin-top: 8px;
outline: none;
transition: all 0.2s linear;
&:hover {
background: lighten($color-black, 5);
}
&:hover {
background: lighten($color-black, 5);
}
&:active {
background: darken($color-black, 5);
}
}
&:active {
background: darken($color-black, 5);
}
}
/* Shipping configurations */
/* Shipping configurations */
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.ship-postalCode small a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.vtex-omnishipping-1-x-deliveryGroup {
p {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-lean {
border: 1px solid $color-gray4;
border-radius: 0;
.shp-lean {
border: 1px solid $color-gray3;
border-radius: 0;
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
label {
background-color: $color-white;
box-shadow: none;
color: #303030;
padding: 8px 12px;
svg path {
fill: #d8c8ac;
}
}
}
}
svg path {
fill: #d8c8ac;
}
}
}
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.delivery-address-title {
color: #303030;
font-size: 14px;
font-weight: 500;
}
.shp-summary-group-info {
border-color: $color-gray4;
}
.shp-summary-group-info {
border-color: $color-gray3;
}
.address-summary {
background: none;
border-color: $color-gray4;
border-radius: 0;
color: #303030;
padding: 12px;
.address-summary {
background: none;
border-color: $color-gray3;
border-radius: 0;
color: #303030;
padding: 12px;
@include mq(md, max) {
background-position: 8px 9px;
}
@include mq(md, max) {
background-position: 8px 9px;
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
a {
color: #303030;
font-weight: 500;
text-decoration: underline;
}
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray4;
}
.shp-summary-group-price,
.shp-summary-package {
color: $color-gray3;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-summaryChange {
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
}
}
}
}
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
}
}
}
}
}

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;

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;
}
}

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;
@ -27,7 +33,7 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
xs: 0,
Gf: 328px,
cstm: 400,
sm: 576px,