HenriqueSantosSantana/m3-academy-template-checkout-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

develop #11

Merged
HenriqueSantosSantana merged 37 commits from develop into main 2022-12-26 17:04:35 +00:00
Conversation 0 Commits 37 Files Changed 17 +111 -72
4 changed files with 111 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 10a464b37a - Show all commits

127
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -2,23 +2,27 @@
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $clr-common-black;
border-radius: 0;
font-weight: 400;
font-family: $font-family-200;
color: $clr-common-black;
background-color: $clr-common-white;
}
.container-main.container-cart {
width: 100%;
height: 100%;
padding: 0 16px !important;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
padding: 0 16px !important;
#cart-title {
display: none !important;
}
@ -39,7 +43,7 @@
display: none;
}
@media screen and (min-width: 1025px) {
@include mq("lg") {
width: fluid(400px, 1280px);
padding: 0 !important;
max-width: none;
@ -50,7 +54,7 @@
}
}
@media screen and (min-width: 2500px) {
@include mq("xxl") {
width: fluid(659px, 2500px);
}
}
@ -61,55 +65,88 @@
}
}
.empty-cart {
font-family: $font-family-100;
&-content {
color: $clr-gray-600;
text-align: center;
.container-main.container-cart {
.empty-cart {
font-family: $font-family-100;
&-content {
color: $clr-gray-600;
text-align: center;
.empty-cart-title {
font-size: 0px;
.empty-cart-title {
font-size: 0px;
&::before {
content: "Seu carrinho está vazio.";
text-align: center;
font-size: 18px;
text-transform: uppercase;
&::before {
@include text-size("xxs");
@include text-height("xxs", 100);
content: "Seu carrinho está vazio.";
text-align: center;
text-transform: uppercase;
}
}
}
@media screen and (min-width: 1024px) {
padding: 0;
&-links {
.link-choose-products {
@include btn-secondary();
transition: ease-in 0.22s all;
font-size: 0px;
padding: 16px 0;
&::before {
@include text-size("xs");
@include text-height("smaller", 200);
content: "Continuar Comprando";
font-style: normal;
letter-spacing: 0.05em;
text-transform: uppercase;
}
&:hover {
background: lighten($clr-gray-600, 5);
}
}
}
@media screen and (min-width: 1280px) {
.empty-cart-title {
&::before {
font-size: 24px;
&-content {
@include mq("lg") {
padding: 0;
}
@include mq("xl") {
.empty-cart-title {
&::before {
@include text-size("md-200");
@include text-height("md", 300);
}
}
}
}
@include mq("xxl") {
&-content {
.empty-cart-title {
&::before {
@include text-size("xxl");
@include text-height("xxl", 200);
}
}
}
&-links {
.link-choose-products {
width: fluid(638.67px, 659px);
max-width: none;
&::before {
@include text-size("lg");
@include text-height("lg", 100);
}
}
}
}
}
&-links {
.link-choose-products {
@include btn-secondary();
transition: ease-in 0.22s all;
font-size: 0px;
padding: 16px 0;
&::before {
content: "Continuar Comprando";
font-size: 14px;
font-style: normal;
line-height: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
&:hover {
background: lighten($clr-gray-600, 5);
}
}
}
}

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

@ -107,7 +107,8 @@
&__developedBy {
span {
font-size: 180%;
@include text-size("sm");
@include text-height("xs",200)
}
}
}
@ -133,7 +134,6 @@
}
}
/* prettier-ignore*/
.footerCheckout {
&__address {
font-style: normal;
@ -141,24 +141,25 @@
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: $clr-gray-400;
color: $clr-gray-400;
}
}
/* prettier-ignore*/
.footerCheckout {
&__stamps {
&__divider {
display: inline-block;
width: 1px;
height: 24px;
margin: 0 8px;
background-color: $clr-gray-300;
width: 1px;
height: 24px;
margin: 0 8px;
background-color: $clr-gray-300;
}
}
}
/* prettier-ignore*/
.footerCheckout {
&__developedBy {
margin: 0;
@ -174,7 +175,8 @@
line-height: 12px;
font-family: $font-family-100;
text-decoration: none;
color: $clr-gray-400;
color: $clr-gray-400;
span {
margin-right: 8px;

26
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -50,12 +50,19 @@
}
}
&-name,
&-link,
.type-name {
@include text-size("xxs");
@include text-height("xxs", 100);
font-family: $font-family-100;
}
&-name {
min-height: 36px;
font-weight: 400;
font-size: 13px;
line-height: 17.7px;
font-family: $font-family-100;
text-overflow: ellipsis;
text-align: center;
@ -71,14 +78,6 @@
min-height: 68px;
}
&-link,
.type-name {
@include text-size("xxs");
font-family: $font-family-100;
line-height: 17.7px;
}
&-link {
@include btn-primary-blue-white();
@ -120,9 +119,8 @@
@media screen and (min-width: 600px) {
&-title {
@include text-size("md");
line-height: 36px;
@include text-size("md-200");
@include text-height("xl", 100);
}
}
@ -135,8 +133,8 @@
@media screen and (min-width: 2500px) {
&-title {
@include text-size("xxl");
@include text-height("xxl", 300);
line-height: 76px;
padding: 0;
}

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

@ -38,8 +38,9 @@ $text-sizes-100: (
$text-height: (
"smaller-100": 14.04px,
"smaller-200": 16.34px,
"smaller-300": 16.38px,
"smaller-200": 16px,
"smaller-300": 16.34px,
"smaller-400": 16.38px,
"xxs-100": 17.7px,
"xxs-200": 18.72px,
"xxs-300": 19.07px,
@ -57,7 +58,8 @@ $text-height: (
"xl-300": 46.8px,
"xxl-100": 49.03px,
"xxl-200": 65.37px,
);
"xxl-300": 76px,
) !default;
/* Grid breakpoints */
$grid-breakpoints: (