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

Merge pull request 'feature/styles-for-large-devices' (#10) from feature/styles-for-large-devices into develop

Browse Source 
Reviewed-on: #10
This commit is contained in:
Henrique Santos Santana 2022-12-26 17:03:42 +00:00
commit 446b8b273b
10 changed files with 3266 additions and 1441 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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 font-size("s-500");
line-height: 24.51px;
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 font-size("s-300");
line-height: 16px;
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 font-size("splus-100");
line-height: 32.68px;
}
}
}
}
@include mq("xxl") {
&-content {
.empty-cart-title {
&::before {
@include font-size("sxplus");
line-height: 65.37px;
}
}
}
&-links {
.link-choose-products {
width: fluid(638.67px, 659px);
max-width: none;
&::before {
@include font-size("splus-200");
line-height: 32.76px;
}
}
}
}
}
&-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);
}
}
}
}

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

@ -34,6 +34,10 @@ body {
}
}
.container-cart {
min-height: 70vh;
}
.btn-success {
background: $clr-gray-600;
text-shadow: none;
@ -56,6 +60,11 @@ body {
line-height: 42px;
margin: 16px 0;
text-transform: uppercase;
@media screen and (min-width: 2500px) {
font-size: 48px;
line-height: 65px;
}
}
.dropdown {

20
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -101,16 +101,32 @@
position: absolute;
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
z-index: 4;
left: 10px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
no-repeat center center;
@media screen and (min-width: 2500px) {
height: 57.99px;
width: 26px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center / cover;
}
}
.slick-next {
z-index: 4;
right: 10px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center;
@media screen and (min-width: 2500px) {
height: 57.99px;
width: 26px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center / cover;
}
}
.slick-arrow.slick-hidden {
display: none;

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

@ -1,23 +1,20 @@
/* prettier-ignore*/
.footerCheckout {
color: $clr-gray-400;
&__wrapper {
border-top: 1px solid $clr-common-black;
padding: 16px 25px 18.88px 8px;
@include mq("md", min) {
padding: 16px 0;
}
}
&__stamps {
order: 0;
margin: 0 0 16px;
margin: 0 0 16px;
}
&__address {
order: 1;
margin: 0 0 16px;
margin: 0 0 16px;
}
&__developedBy {
@ -25,11 +22,12 @@
}
}
/* prettier-ignore*/
.footerCheckout {
.container {
width: 100%;
display: flex;
flex-direction: column;
width: 100%;
&::before,
&::after {
@ -38,62 +36,6 @@
}
}
.footerCheckout {
@include mq("md", min) {
&__stamps {
width: 34.510595358%;
}
&__wrapper {
.container {
width: 94.9734%;
margin: 0 auto;
}
}
}
@include mq("lg", min) {
.container {
align-items: center;
justify-content: space-between;
flex-direction: row;
}
&__address {
order: 0;
margin: 0;
}
&__stamps {
width: 33.223684211%;
order: 1;
margin: 0;
}
&__developedBy {
order: 2;
}
}
@include mq("xxl", min) {
&__address {
span {
font-size: 200%;
}
}
&__stamps {
width: 29.074771156%;
}
&__developedBy {
span {
font-size: 180%;
}
}
}
}
.footerCheckout {
&__developedBy a,
&__developedBy,
@ -102,21 +44,84 @@
display: flex;
align-items: center;
}
&__wrapper {
justify-content: space-between;
}
}
@include mq("lg", min) {
.footerCheckout {
@include mq("md") {
&__stamps {
width: 34.510595358%;
}
&__wrapper {
padding: 16px 0;
.container {
width: 94.9734%;
margin: 0 auto;
}
}
}
@include mq("lg") {
.container {
align-items: center;
justify-content: space-between;
flex-direction: row;
}
&__wrapper {
width: 100%;
}
&__address {
order: 0;
margin: 0;
}
&__stamps {
order: 1;
width: 33.223684211%;
margin: 0;
}
&__developedBy {
order: 2;
}
}
@include mq("xxl") {
&__address {
span {
font-size: 20px;
}
}
&__stamps {
width: 29.074771156%;
}
&__developedBy {
span {
font-size: map-get($text-sizes, "s-500");
line-height: 24.51px;
}
}
}
}
.footerCheckout {
&__creditList {
width: 100%;
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
&__creditItem,
@ -136,8 +141,8 @@
font-weight: normal;
font-size: 10px;
line-height: 12px;
font-family: $font-family-100;
text-transform: capitalize;
color: $clr-gray-400;
}
}
@ -145,11 +150,13 @@
.footerCheckout {
&__stamps {
&__divider {
background-color: $clr-gray-300;
display: inline-block;
width: 1px;
height: 24px;
margin: 0 8px;
width: 1px;
background-color: $clr-gray-300;
}
}
}
@ -166,9 +173,10 @@
font-style: normal;
font-weight: normal;
font-size: 10px;
font-family: $font-family-100;
line-height: 12px;
font-family: $font-family-100;
text-decoration: none;
color: $clr-gray-400;
span {
@ -182,5 +190,3 @@
}
}
}

254
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,4 +1,5 @@
/* _header.scss */
body {
margin: 0;
padding: 0;
@ -23,13 +24,29 @@ body :where(ul, li, ol) {
@return unquote($width);
}
@mixin font-size($size) {
$content: $text-sizes;
@if map-has-key($content, $size) {
font-size: map-get($content, $size);
}
}
.headerCheckout {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
background: $clr-common-white;
width: 100%;
padding: 16px;
border-bottom: 1px solid $clr-common-black;
z-index: 10000;
.container {
width: 100%;
height: auto;
margin: 0;
}
&__wrapper,
@ -39,49 +56,58 @@ body :where(ul, li, ol) {
}
&__wrapper {
width: 100%;
justify-content: space-between;
width: 100%;
}
&__safeBuy {
width: fluid(119px, 343px);
max-width: 119px;
gap: 8px;
span {
font: normal normal 12px / 14px $font-family-100;
text-transform: uppercase;
color: $clr-gray-500;
}
width: 100%;
max-width: 119px;
}
}
img {
width: 12px;
height: 13px;
}
.headerCheckout__safeBuy {
span {
@include font-size("s-200");
line-height: 16.34px;
font-style: normal;
font-weight: normal;
font-family: $font-family-100;
text-transform: uppercase;
}
&__logo {
width: fluid(155.58px, 343px);
max-width: 155.58px;
height: auto;
img {
width: 100%;
height: 100%;
}
img {
width: 12px;
height: 13px;
}
}
.headerCheckout__logo {
width: fluid(155.58px, 343px);
height: auto;
max-width: 155.58px;
img {
width: 100%;
height: 100%;
}
}
.headerCheckout {
.progress-bar {
display: none;
}
}
.headerCheckout {
@media screen and (min-width: 1025px) {
@include mq("lg") {
padding: 29px 0;
&__wrapper {
width: fluid(992px, 1024px);
width: fluid(1018px, 1280px);
margin: 0 auto;
}
@ -90,13 +116,7 @@ body :where(ul, li, ol) {
}
}
@media screen and (min-width: 1025px) {
&__wrapper {
width: fluid(1018px, 1280px);
}
}
@media screen and (min-width: 2500px) {
@include mq("xxl") {
$width-container: 1988.28px;
&__wrapper {
@ -114,7 +134,9 @@ body :where(ul, li, ol) {
max-width: none;
span {
font: normal normal 24px / 32.68px $font-family-100;
@include font-size("splus-100");
line-height: 32.68px;
font-family: $font-family-100;
}
img {
@ -128,89 +150,151 @@ body :where(ul, li, ol) {
.headerCheckout {
.progress-bar {
width: 439px;
}
.progress-list,
.progress-item,
.progress-container,
.progress-content {
display: flex;
align-items: center;
}
.progress-list {
justify-content: space-between;
width: 100%;
margin: 0;
}
.progress-item,
.progress-container,
.progress-content {
flex-direction: column;
justify-content: center;
}
.progress-container {
position: relative;
width: 100%;
}
.progress-content {
gap: 16px;
}
.progress-item {
@include font-size("s-200");
line-height: 14.04px;
font-family: $font-family-200;
&--left,
&--right {
width: 40%;
.progress-line {
position: absolute;
bottom: 6px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
}
}
&--left {
.progress-container {
align-items: flex-start;
}
.progress-line {
left: 75%;
transform: translateX(-50%);
}
}
&--center {
width: 90px;
}
&--right {
.progress-container {
align-items: flex-end;
}
.progress-line {
right: 72%;
transform: translateX(50%);
}
}
}
.progress-bullet {
$square-size: 12px;
position: relative;
z-index: 10;
width: $square-size;
height: $square-size;
border: 1px solid $clr-common-black;
border-radius: 100%;
background-color: $clr-common-white;
&.active {
background-color: $clr-common-black;
}
}
}
.headerCheckout {
@include mq("xxl") {
.progress-bar {
width: 1078.86px;
}
.progress-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
justify-content: initial;
}
.progress-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
@include font-size("splus-100");
line-height: 28.08px;
.progress-content,
.progress-container {
display: flex;
align-items: center;
flex-direction: column;
}
.progress-container {
position: relative;
justify-content: center;
width: 100%;
}
.progress-item {
&--left,
&--right {
width: 40%;
width: fluid(444px, 1078.86px);
.progress-line {
position: absolute;
bottom: 6px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
bottom: 12px;
}
}
&--left {
.progress-container {
align-items: flex-start;
}
.progress-line {
left: 75%;
transform: translateX(-50%);
left: 67%;
}
}
&--center {
width: 90px;
width: auto;
max-width: none;
}
&--right {
.progress-container {
align-items: flex-end;
}
.progress-line {
right: 72%;
transform: translateX(50%);
right: 67%;
}
}
}
.progress-bullet {
width: 12px;
height: 12px;
background-color: $clr-common-white;
position: relative;
border: 1px solid $clr-common-black;
z-index: 10;
border-radius: 100%;
$square-size: 24px;
&.active {
background-color: $clr-common-black;
}
width: $square-size;
height: $square-size;
}
}
}

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

@ -1,120 +1,175 @@
/* _prateleira.scss */
.footerCheckout__prateleira {
width: 100%;
margin-top: 43.42px;
min-height: 363px;
padding: 0 8px;
margin-bottom: 54px;
margin: 43.42px 0 54px;
/* slick-prev */
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13.64px;
height: 29.47px;
transform: translateY(-50%);
border: none;
background-color: transparent;
transition: 300ms;
}
}
.footerCheckout__prateleira {
&-title {
width: 100%;
margin-bottom: 20px;
padding: 0 8px;
margin-bottom: 20px;
font-size: 14px;
text-align: center;
font-weight: 400;
font-family: $font-family-200;
text-align: center;
color: $clr-common-black;
}
}
.shelf-item {
.product-item-container {
margin: 0 8px;
.footerCheckout__prateleira {
.product-item-container {
margin: 0 8px;
}
}
.footerCheckout__prateleira {
.product-item {
&-figure {
width: 100%;
margin-bottom: 20px;
img {
max-width: 100%;
width: 100%;
height: auto;
}
}
}
}
.product-item {
&-figure {
width: 100%;
margin-bottom: 20px;
img {
max-width: 100%;
height: auto;
}
}
.footerCheckout__prateleira {
.product-item {
&-name,
&-link,
.type-name {
@include font-size("s-250");
line-height: 24px;
font-family: $font-family-100;
}
}
}
&-name {
min-height: 36px;
text-align: center;
font-weight: 400;
font-family: $font-family-100;
font-size: 13px;
text-overflow: ellipsis;
line-height: 17.7px;
}
.footerCheckout__prateleira {
.product-item {
&-name {
min-height: 36px;
height: 36px;
font-weight: 400;
font-family: $font-family-100;
text-overflow: ellipsis;
text-align: center;
&-types {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-height: 68px;
}
&-link {
@include btn-primary-blue-white();
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 0;
letter-spacing: 5%;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
line-height: 17.7px;
font-family: $font-family-100;
color: $clr-common-white;
@media screen and (max-width:410px) {
height: 53px;
}
}
.product-type-container {
background-color: $clr-primary-blue-500;
border-radius: 8px;
height: 28px;
&-types {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
min-height: 68px;
height: 68px
}
}
}
.footerCheckout__prateleira {
.product-item {
&-link {
@include btn-primary-blue-white();
display: flex;
align-items: center;
justify-content: center;
.type-name {
font-weight: 700;
font-size: 13px;
padding: 5px;
line-height: 17.7px;
letter-spacing: 5%;
font-family: $font-family-100;
color: $clr-common-white;
}
width: 100%;
padding: 12px 0;
border-radius: 8px;
font-weight: 700;
letter-spacing: 5;
color: $clr-common-white;
}
}
@media screen and (min-width: 600px) {
.product-type-container {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
border-radius: 8px;
background-color: $clr-primary-blue-500;
}
.type-name {
padding: 5px;
font-weight: 700;
letter-spacing: 5;
font-family: $font-family-100;
color: $clr-common-white;
}
}
.footerCheckout__prateleira {
@include mq("lg") {
width: fluid(1034px, 1280px);
margin: 43.42px auto 56px;
padding: 0;
}
@include mq("md") {
&-title {
font-size: 24px;
@include font-size("splus-100");
line-height: 38px;
}
}
@media screen and (min-width: 1025px) {
width: fluid(1034px, 1280px);
margin: 43.42px auto 56px;
padding: 0;
@include mq("xxl") {
&-title {
@include font-size("sxplus");
line-height: 76px;
padding: 0;
}
.product-item {
&-name,
&-link,
.type-name {
@include font-size("splus-200");
line-height: 35.41px;
font-family: $font-family-100;
}
}
.product-item-container {
margin: 0 9.965px;
}
}
}

10
checkout/src/arquivos/sass/utils/_mixin.scss
View File

@ -1,3 +1,5 @@
@use "sass:meta";
@mixin btn-primary-blue-black() {
border: none;
color: $clr-common-black;
@ -12,6 +14,14 @@
text-transform: uppercase;
}
@mixin text-size($size) {
@if map_has_key($text-sizes, $size) {
$size: map_get($text-sizes, $size);
font-size: $size;
}
}
/**
* @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
*/

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

@ -12,21 +12,39 @@ $clr-gray-600: #292929;
$clr-gray-500: #6c6c6c;
$clr-gray-400: #7d7d7d;
$clr-gray-300: #8d8d8d;
$clr-gray-250: #c4c4c4;
$clr-gray-200: #e5e5e5;
$clr-gray-100: #f0f0f0;
$clr-gray-500: #6c6c6c;
$clr-blue-500: #4267b2;
$clr-green-500: #4caf50;
$clr-primary-blue-500: #00c8ff;
/*prettier-ignore*/
$text-sizes: (
"s-050": 9px,
"s-100": 10px,
"s-200": 12px,
"s-250": 13px,
"s-300": 14px,
"s-400": 16px,
"s-500": 18px, // MAIN
"s-600": 20px,
"splus-100": 24px,
"splus-200": 26px,
"splus-300": 28px,
"splus-500": 32px,
"splus-700": 36px,
"splus-900": 40px,
"sxplus": 48px,
) !default;
/* Grid breakpoints */
$grid-breakpoints: (
xxs: 0,
xs: 280,
xs: 280px,
sm: 375px,
md: 600px,
lg: 1025px,