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

feat(checkout com cupom): Aplica css desktop

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-17 11:57:45 -03:00
parent 332e0d88d6
commit 04fb01084c
2 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -748,11 +748,11 @@
&-totalizers { &-totalizers {
padding: 0; padding: 0;
width: 346px;
margin: 0; margin: 0;
width: 362px;
@include mq(xg, min) { @include mq(xg, min) {
width: 688px; width: 692px;
} }
.coupon-data { .coupon-data {
@ -782,11 +782,6 @@
} }
} }
@include mq(md, max) {
padding: 0 16px;
width: 100%;
}
.coupon-column { .coupon-column {
.coupon { .coupon {
margin: 0; margin: 0;
@ -800,71 +795,90 @@
.coupon-label label { .coupon-label label {
margin-bottom: 12px; margin-bottom: 12px;
font-family: $font-family; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
text-align: left;
cursor: none; cursor: none;
@include mq(xg, min) {
font-size: 24px;
line-height: 28px;
}
} }
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 54px;
display: flex;
@include mq(sm, max) {
span {
display: flex;
flex-direction: row;
justify-content: space-between;
i {
position: absolute;
right: 91px;
opacity: 1;
}
}
}
input { input {
border: 2px solid $color-gray3; background-color: $color-white;
border: 2px solid $color-gray5;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray4; color: $color-gray6;
font-family: $font-family-secundary;
font-style: normal;
font-weight: normal;
font-size: 12px; font-size: 12px;
height: 34px; line-height: 14px;
padding: 0 12px; height: 36px;
max-width: 160px; width: 204px;
padding: 10px 15px;
@include mq(sm, max) { @include mq(xg, min) {
max-width: 100%; font-size: 24px;
width: 100%; line-height: 28px;
padding: 13px 15px;
height: 55px;
width: 398px;
}
&::placeholder {
padding: 1px 1px;
} }
} }
button { button {
background: $color-black; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
color: $color-white; color: $color-black2;
font-size: 12px; font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 19px;
width: 133px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 0.05em;
margin-left: 6px; margin-left: 15px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none;
padding: 8px 15px;
cursor: pointer;
@include mq(md, max) { @include mq(xg, min) {
width: 138px; font-size: 28px;
line-height: 38px;
margin-left: 30px;
width: 260px;
height: 55px;
padding: 8px 50px;
} }
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: $color-blue3;
} }
&:active { &:active {
background-color: darken($color-black, 5); background-color: $color-blue4;
} }
} }
} }
@ -996,6 +1010,10 @@
background: $color-blue3; background: $color-blue3;
} }
&:active {
background-color: $color-blue4;
}
&:after { &:after {
content: "finalizar compra"; content: "finalizar compra";
font-family: $font-family; font-family: $font-family;

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

@ -20,9 +20,9 @@ $color-gray7: #989898;
$color-gray8: #EDEDED; $color-gray8: #EDEDED;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF; $color-blue2: #00C8FF; //button
$color-blue3: #3fd4fd; //hover $color-blue3: #3fd4fd; //buttom hover
$color-blue4: #11bae9; //buttom active
$color-green: #495e49; $color-green: #495e49;