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: Aplica css desktop

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-18 22:42:51 -03:00
parent dd5e07ffab
commit e4b72887c9
6 changed files with 273 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
checkout/src/arquivos/sass/checkout.scss
View File

@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
@import "./partials/prateleira";

262
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -1,13 +1,29 @@
.checkout-container {
.client-pre-email {
border-color: $color-gray4;
border-color: $color-black2;
font-family: $font-family;
padding-top: 8px;
padding-top: 14px;
.client-pre-email-h label {
margin-top: 0;
}
.link-cart {
a {
color: $color-black;
color: $color-black2;
font-family: $font-family-secundary;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
@include mq(xg, min) {
font-size: 28px;
line-height: 33px;
}
&:hover {
color: lighen($color-black, 10);
@ -20,68 +36,151 @@
display: flex;
align-items: center;
justify-content: center;
margin-top: 65px;
h3 {
margin-bottom: 16px;
width: 825px;
span {
color: #303030;
font-size: 24px;
@include mq(xg, min) {
width: 1631px;
}
span,
small {
color: $color-gray4;
font-family: $font-family-secundary;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 23px;
text-transform: uppercase;
color: $color-black2;
margin-bottom: 21px;
@include mq(xg, min) {
font-size: 40px;
line-height: 47px;
margin-bottom: 23px;
}
}
}
}
.client-email {
margin: 0 0 16px;
margin: 0 0 24px 0;
width: 580px;
@include mq(xg, min) {
width: 990px;
}
input {
box-shadow: none;
color: $color-black;
color: $color-black2;
font-family: $font-family;
padding: 0 16px;
border: 2px solid $color-gray3;
padding: 15px 14px;
border: 1px solid $color-black2;
box-sizing: border-box;
border-radius: 5px;
width: 443px;
height: 50px;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
@media (max-width: 490px) {
width: auto;
@include mq(xg, min) {
width: 765px;
height: 50px;
font-size: 24px;
line-height: 33px;
}
}
button {
background-color: $color-black;
border-radius: 5px;
background-color: $color-blue2;
border-radius: 0px 8px 8px 0px;
border: none;
font-family: $font-family;
height: 54px;
right: 0;
color: $color-black2;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
height: 52px;
width: 126px;
right: 8px;
top: 0;
outline: none;
padding: 12px 14px;
position: relative;
cursor: pointer;
@include mq(xg, min) {
font-size: 28px;
line-height: 30px;
width: 219px;
padding: 12px 17px;
}
@media (max-width: 490px) {
height: 48px;
margin: 0;
position: absolute;
}
&:hover {
background-color: $color-blue3;
}
&:active {
background-color: $color-blue4;
}
}
span.help.error {
color: red;
color: $color-red;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@include mq(xg, min) {
font-size: 24px;
line-height: 33px;
}
}
}
.emailInfo {
padding: 16px;
background-color: $color-white;
border: 1px solid $color-gray4;
border-radius: 0;
border: 1px solid $color-black2;
border-radius: 5px;
width: 400px;
height: 150px;
margin-bottom: 92px;
@include mq(xg, min) {
width: 776px;
height: 238px;
}
h3 {
color: #303030;
color: $color-black2 !important;
font-family: $font-family;
margin: 0 0 8px 0;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@include mq(xg, min) {
font-size: 24px;
line-height: 33px;
}
}
ul {
@ -89,13 +188,27 @@
li {
span {
color: $color-black;
color: $color-black2 !important;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
@include mq(xg, min) {
font-size: 24px;
line-height: 33px;
}
}
i::before {
color: $color-black;
color: $color-blue2;
font-size: 1rem;
opacity: 1;
@include mq(xg, min) {
font-size: 2rem !important;
}
}
}
}
@ -104,6 +217,10 @@
color: $color-black;
font-size: 6rem;
opacity: 0.5;
@include mq(xg, min) {
font-size: 11rem !important;
}
}
}
}
@ -113,18 +230,44 @@
.client-profile-data {
.accordion-group {
border-radius: 0;
border: 1px solid $color-gray4;
border: 1px solid $color-gray3;
font-family: $font-family;
padding: 16px;
border-radius: 8px;
box-shadow: none;
.accordion-heading {
span {
color: #303030;
margin-bottom: 8px;
padding: 0;
.accordion-toggle {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
padding: 0
}
.accordion-toggle-active {
span {
font-size: 0;
&::after {
content: "Identificação";
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
margin-top: 24px;
padding: 0;
}
}
}
span {
i::before {
fill: #303030;
display: none;
}
}
@ -147,6 +290,7 @@
.client-notice {
color: $color-black;
display: none;
}
p {
@ -163,7 +307,7 @@
}
.help.error {
color: red;
color: $color-red;
}
}
@ -182,18 +326,33 @@
button.submit {
border: none;
border-radius: 5px;
background: $color-black;
margin-top: 8px;
border-radius: 8px;
background: $color-blue2;
margin-top: 44px;
outline: none;
transition: all 0.2s linear;
width: 100%;
height: 42px;
padding: 12px 74px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
background: lighten($color-black, 5);
background: $color-blue3;
}
&:active {
background: darken($color-black, 5);
background: $color-blue4;
}
}
@ -274,7 +433,6 @@
border-color: #303030;
color: #303030;
}
.vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac;
border: 1px solid #d8c8ac;
@ -282,8 +440,42 @@
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
color: #000;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
}
}
}
}
.shipping-method-toggle-delivery {
background-color: white !important;
border: 1px solid $color-black !important;
}
.vtex-omnishipping-1-x-deliveryOptionInactive {
width: 50%;
color: #c4c4c4;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-transform: uppercase;
}
/*.shipping-data,
.payment-data {
.accordion-heading {
.accordion-toggle {
&::after {
content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
cursor: pointer;
}
}
}
}*/
}

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

@ -43,9 +43,12 @@
h2 {
background: $color-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
color: $color-black;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}
.item-unavailable {
@ -94,12 +97,21 @@
}
#payment-data-submit {
background: $color-black;
background: $color-green2;
border: none;
border-radius: 0;
border-radius: 8px;
color: $color-white;
outline: none;
transition: all 0.2s linear;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
&:hover {
background: lighten($color-black, 5);
}
@ -140,6 +152,7 @@
display: none;
}
}
.product-price {
font-size: 0;
}
@ -192,6 +205,12 @@
.product-name {
padding: 0;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-black2;
@include mq(xg, min) {
width: 600px;
@ -258,6 +277,7 @@
@include mq(md, max) {
min-width: 78px;
}
@media (max-width: 490px) {
position: absolute;
bottom: 0;
@ -790,7 +810,7 @@
}
span.help.error {
color: red;
color: $color-red;
font-size: 12px;
position: absolute;
left: 0;

9
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -12,15 +12,6 @@ html {
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 96.875%;
margin: auto auto 0 auto;
@include mq(xm, min) {
width: 94.9734%;
}
}
header {
width: 100%;
border-bottom: 1px solid $color-black2;

12
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,9 +1,8 @@
/* _footer.scss */
.footerCheckout {
&__wrapper {
width: 100%;
border-top: 1px solid $color-black2;
&__wrapper {
align-items: center;
display: flex;
padding: 22px 0;
@ -18,12 +17,14 @@
}
.container {
width: 100%;
width: 96.875%;
display: grid;
grid-template-columns: 1fr;
margin: auto auto 0 auto;
@include mq(xm, min) {
display: flex;
width: 94.9734%;
align-items: center;
justify-content: space-between;
}
@ -179,4 +180,9 @@
}
}
}
.desativado {
display: none !important;
}
}

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

@ -25,6 +25,9 @@ $color-blue3: #3fd4fd; //buttom hover
$color-blue4: #11bae9; //buttom active
$color-green: #495e49;
$color-green2: #298541;
$color-red: #FF0000; //error
/* Grid breakpoints */
$grid-breakpoints: (