GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: colocando os detalhes css

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-22 22:27:17 -03:00
parent 79b7bc13fa
commit 6f7ac633a6
2 changed files with 82 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -159,7 +159,7 @@
} }
a { a {
color: $color-black; color: $color-blackTotal;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -184,7 +184,7 @@
} }
td.shipping-date { td.shipping-date {
color: $color-gray2; color: $color-gray8;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -206,7 +206,9 @@
} }
span.list-price { span.list-price {
color: $color-gray2; color: $color-gray8;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@ -229,49 +231,44 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 6px auto 0; margin: 6px auto 0;
max-height: 38px; max-height: 34px;
max-width: 118px; max-width: 99px;
padding: 1rem 1rem;
width: max-content !important; width: max-content !important;
@media (max-width: 490px) { a.item-quantity-change-increment {
margin-left: 84px !important; margin: 0.563rem 0.66rem 0.563rem 0;
}
a.item-quantity-change-decrement {
margin: 0.563rem 0 0.563rem 0.66rem;
} }
input { input {
background-color: $color-white; background-color: transparent;
border-radius: 0; border-radius: 0;
border: none !important; border: none !important;
display: block; display: block;
max-height: 38px; max-height: 38px;
margin: 0.9rem !important; margin: 0.75rem !important;
padding: 8px 0; padding: 8px 0;
width: 24px; width: 24px;
color: $color-gray2; color: $color-blackTotal;
box-shadow: none; box-shadow: none;
/* @include mq(lg, max) {
width: 24px !important;
} */
} }
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
&::before { &::before {
color: $color-white; color: $color-white;
display: block; font-size: 10px;
font-weight: 500;
text-align: center;
} }
} }
.icon-minus-sign { .icon-minus-sign {
&:before { &:before {
content: "-"; content: "\f068";
width: 16px; width: 16px;
height: 16px; height: 16px;
background: $color-blue2; background: $color-blue2;
padding: 4px 4px 5px 4px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -281,11 +278,10 @@
.icon-plus-sign { .icon-plus-sign {
&:before { &:before {
content: "+"; content: "\f067";
width: 16px; width: 16px;
height: 16px; height: 16px;
background: $color-blue2; background: $color-blue2;
padding: 4px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -320,8 +316,9 @@
} }
span { span {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 14px; font-size: 14px;
font-family: $font-family;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
} }
@ -331,6 +328,10 @@
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
.total-selling-price {
font-weight: 700;
}
} }
.item-remove { .item-remove {
@ -338,8 +339,8 @@
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: $color-gray4; color: $color-gray6;
font-size: 15px; text-shadow: 0px 4px 3px #c4c4c48a;
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
@ -367,8 +368,6 @@
width: max-content; width: max-content;
.srp-container { .srp-container {
padding: 0 0 0 10px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
@ -380,7 +379,7 @@
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $color-black; color: $color-blackTotal;
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
@ -389,23 +388,25 @@
.srp-description { .srp-description {
color: $color-gray2; color: $color-gray2;
font-size: 12px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 0 0 12px; margin: 0 0 0.666rem;
max-width: 276px;
} }
button.shp-open-options { button.shp-open-options {
background-color: $color-gray5; background-color: $color-gray9;
border: none; border: none;
border-radius: 5px; border-radius: 0.5rem;
color: $color-gray2; color: $color-blackTotal;
font-size: 16px; font-size: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
line-height: 19px; line-height: 19px;
font-weight: 500; font-weight: 500;
outline: none; outline: none;
padding: 12px 40px; padding: 0.749rem 2.563rem 0.804rem 2.563rem ;
transition: all 0.2s linear; transition: all 0.2s linear;
margin: unset;
&:hover { &:hover {
background-color: lighten($color-gray5, 5); background-color: lighten($color-gray5, 5);
@ -423,6 +424,7 @@
.srp-data { .srp-data {
width: 280px; width: 280px;
margin-top: 0.666rem;
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
@ -752,6 +754,16 @@
} }
.accordion-group { .accordion-group {
tr.Discounts {
td {
&.info,
&.monetary {
padding: 0.625rem 0;
}
}
}
tr { tr {
border-color: #e5e5e5; border-color: #e5e5e5;
@ -767,7 +779,8 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $color-black; color: $color-black;
padding: 20px 0; padding: unset;
padding: 0.813rem 0 0.625rem;
} }
&.info { &.info {
@ -815,7 +828,7 @@
.link-choose-more-products-wrapper { .link-choose-more-products-wrapper {
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: 0.932rem;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 0px; margin-bottom: 0px;
@ -836,11 +849,13 @@
a { a {
background: $color-blue2; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 0.5rem;
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: 0.756rem 6.386rem 0.795rem 6.411rem;
display: flex;
justify-content: center;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
@ -850,19 +865,24 @@
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
font-size: 13px; font-size: 14px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-black; color: $color-black;
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
line-height: 19px; line-height: 19px;
text-shadow: none; text-shadow: none;
white-space: nowrap;
} }
} }
} }
} }
} }
.summary-template-holder {
margin-top: 2.5rem;
}
.checkout-container { .checkout-container {
overflow: initial !important; overflow: initial !important;
} }
@ -1216,6 +1236,26 @@ ul.slick-dots {
display: none !important; display: none !important;
} }
th.shipping-date {
display: flex;
justify-content: flex-end;
align-items: center;
color: transparent !important;
&::before {
content: "Frete";
color: #292929;
display: flex;
font-style: normal;
font-weight: 400;
font-family: "Tenor Sans", sans-serif;
font-size: 14px;
line-height: 16px;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
.row-fluid.orderform-template.span12.active { .row-fluid.orderform-template.span12.active {
display: flex; display: flex;

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

@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #292929;
$color-blackTotal: #000000;
$color-white: #fff; $color-white: #fff;
@ -16,6 +17,8 @@ $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4; $color-gray6: #c4c4c4;
$color-gray7: #58595B; $color-gray7: #58595B;
$color-gray8: #989898;
$color-gray9: #EDEDED;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF; $color-blue2: #00C8FF;