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