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

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

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