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

feat(checkout-fill): created initial styles in cart more options for small devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-21 11:08:17 -03:00
parent b856181537
commit b5c9339e6c
8 changed files with 598 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -771,6 +771,10 @@
float: none;
}
#payment-data {
margin: 0;
}
@media screen and (max-width: 490px) {
.orderform-template-holder .client-profile-data input[type="text"] {
width: 100%;

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

@ -1,67 +1,34 @@
.cart-template {
font-family: $font-family-100;
@include mq(md, max) {
padding: 0 0;
}
padding: 0;
.item-unit-label {
display: none;
}
.cart {
border: 3px solid $clr-gray-100;
box-sizing: border-box;
border-radius: 5px;
padding: 16px;
margin: 0 0 25px 0;
border: 1px solid $clr-gray-100;
border-left: none;
border-right: none;
@include mq(md, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
border-radius: 0;
}
box-sizing: border-box;
}
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
font-family: $font-family-100;
width: 100%;
h2 {
background: $clr-common-white;
border: none;
color: #303030;
font-size: 14px;
font-weight: 500;
}
.item-unavailable {
padding: 0;
&-message {
padding: 8px;
}
}
}
.cart-template {
@media screen and (min-width: 1025px) {
.cart {
border: 1px solid $clr-gray-300;
ul li {
border-top: none;
margin-top: 0;
padding-top: 0;
&:not(:first-child) {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #e5e5e5;
}
.shipping-date,
.price {
color: #7d7d7d;
}
}
margin: 0;
border-radius: 5px;
border: 1px solid $clr-gray-100;
}
}
}
.cart-template {
.cart-fixed {
.summary-template-holder {
border-top: none;
background: $clr-common-white;
@ -217,8 +184,6 @@
display: flex;
justify-content: center;
margin: 6px auto 0;
max-height: 38px;
max-width: 118px;
padding: 0;
width: max-content !important;
@ -243,45 +208,6 @@
width: 24px !important;
}
}
.icon-plus-sign,
.icon-minus-sign {
&::before {
color: $clr-gray-600;
display: block;
font-weight: 500;
padding: 1px 12px;
}
}
.icon-minus-sign {
&:before {
content: "-";
font-size: 16px;
}
}
.icon-plus-sign {
&:before {
content: "+";
font-size: 14px;
}
}
.item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
top: inherit;
}
@media (max-width: 490px) {
padding: 0;
}
}
}
.quantity-price,
@ -345,7 +271,7 @@
padding: 0 16px;
}
.srp-main-title {
/* .srp-main-title {
margin: 32px 0 12px;
font-style: normal;
font-weight: normal;
@ -356,14 +282,14 @@
@include mq(md, max) {
margin-top: 0;
}
}
} */
.srp-description {
/* .srp-description {
color: $clr-gray-400;
font-size: 12px;
line-height: 18px;
margin: 0 0 12px;
}
} */
button.shp-open-options {
background-color: $clr-gray-200;
@ -389,12 +315,6 @@
}
.srp-data {
width: 280px;
@include mq(cstm, max) {
width: calc(100vw - 32px);
}
.srp-pickup-my-location__button {
@include btn-primary-blue-white();
@ -419,8 +339,6 @@
}
.srp-toggle {
margin: 0 0 34px;
&__wrapper {
background-color: $clr-common-white;
border-radius: 100px;
@ -453,26 +371,6 @@
.srp-postal-code {
.ship-postalCode {
label {
font-family: $font-family-100;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $clr-gray-600;
margin-bottom: 12px;
}
input {
border: 1px solid $clr-gray-100;
border-radius: 5px;
box-shadow: none;
color: $clr-gray-100;
font-size: 12px;
height: 36px;
padding: 12px 8px;
}
& ~ button {
@include btn-primary-blue-white();
@ -734,18 +632,14 @@
display: flex;
float: none;
flex-direction: column;
width: 343px;
@include mq(md, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
margin-bottom: 50px;
}
@include mq(md, min) {
margin: 0;
padding-bottom: 50px;
}
.link-choose-more-products-wrapper {
@ -756,42 +650,24 @@
@include mq(md, max) {
margin-bottom: 0px;
}
a {
font-family: $font-family-100;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
}
}
.btn-place-order-wrapper {
a {
@include btn-primary-blue-black();
border-radius: 5px;
display: block;
font-size: 0;
transition: ease-in 0.22s all;
padding: 12px 19px;
border-radius: 5px;
font-size: 0;
transition: ease-in 0.22s all;
&:hover {
background-color: darken($clr-green-500, 5);
}
&:after {
content: "finalizar compra";
font-family: $font-family-100;
font-weight: 500;
font-size: 13px;
color: inherit;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: middle;
line-height: 19px;
text-shadow: none;
}
}
}
}
@ -803,39 +679,50 @@
#cart-title {
display: flex !important;
width: 100%;
padding: 0 16px;
text-align: left;
}
}
.container-cart {
.ship-country {
display: none;
}
}
.container-cart {
.cart-template {
.item-quantity-change {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: #00c8ff;
border-radius: 100%;
background: #00c8ff;
.icon-plus-sign,
.icon-minus-sign {
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
background-color: $clr-common-white;
}
}
@ -847,9 +734,11 @@
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 10px;
transform: translate(-50%, -50%);
background-color: $clr-common-white;
}
@ -867,7 +756,65 @@
}
}
}
}
.container-cart {
.cart-template {
@media (max-width: 490px) {
.item-quantity-change {
padding: 0;
}
}
@media screen and (max-width: 979px) and (min-width: 768px) {
.item-quantity-change {
position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
top: inherit;
}
}
@media screen and (min-width: 2500px) {
.item-quantity-change {
width: 32px;
height: 32px;
.icon-plus-sign {
&::after {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 20px;
background-color: $clr-common-white;
}
&::before {
width: 20px;
height: 4px;
}
}
.icon-minus-sign {
&::before {
width: 20px;
height: 4px;
}
}
}
}
}
}
.container-cart {
.link-coupon-add,
.link-choose-more-products {
color: $clr-common-black;
@ -876,7 +823,9 @@
color: $clr-common-black;
}
}
}
.container-cart {
.cart-more-options {
padding: 0 16px;
}
@ -887,6 +836,311 @@
width: 100%;
}
.srp-container {
max-width: 343px;
margin-bottom: 48.35px;
}
.srp-data {
margin: 0;
}
}
.container-cart {
.cart {
margin-bottom: 48px;
}
.vtex-shipping-preview-0-x-postalCodeForgotten {
gap: 8px;
width: 100%;
margin: 0;
.ship-postalCode {
width: fluid(215px, 343px);
input {
@include font-size("s-200");
width: 100%;
height: 36px;
padding: 12px 8px;
border: 1px solid $clr-gray-450;
border-radius: 5px;
box-shadow: none;
color: $clr-gray-600;
}
}
.srp-pc-input.btn {
width: fluid(120px, 343px);
margin: 6px 0 0;
}
}
}
.container-cart {
.ship-postalCode {
label {
@include font-size("s-200");
line-height: 14.04px;
font-style: normal;
font-weight: normal;
margin-bottom: 2px;
color: $clr-gray-600;
}
}
}
.container-cart {
.cart-template {
.cart-more-options {
float: none;
width: 100%;
padding: 0 16px;
.srp-container {
padding: 0;
}
}
.totalizers {
float: none;
width: 100%;
padding: 0 16px;
margin: 0;
}
.cart-links-bottom {
width: 100%;
padding: 0 16px;
margin: 0;
}
}
}
.container-cart {
.cart-items {
.product-item {
padding: 0;
margin: 0;
.product-price {
margin: 0;
height: 36px;
}
.item-remove {
position: absolute;
top: 0;
right: 0;
transform: translate(20%, -35%);
.icon-remove {
color: #c4c4c4;
}
}
}
}
}
.container-cart {
.cart-template {
.cart-more-options {
#shipping-preview-container {
width: 100%;
max-width: none;
}
}
}
}
.container-cart {
.cart-more-options {
.srp-data,
.srp-toggle {
width: 100%;
}
.srp-toggle {
margin-bottom: 20px;
label {
@include font-size("s-300");
line-height: 19.07px;
}
}
.srp-main-title {
@include font-size("splus-100");
line-height: 32.68px;
font-family: $font-family-100;
margin-bottom: 11px;
color: $clr-common-black;
}
.srp-description {
@include font-size("s-300");
font-weight: 400;
line-height: 18px;
font-family: $font-family-100;
max-width: none;
margin-bottom: 10.65px;
color: $clr-gray-400;
}
}
}
.container-cart {
@media screen and (min-width: 2500px) {
.cart-more-options {
.srp-toggle label {
@include font-size("splus-300");
line-height: 38.13px;
}
.srp-main-title {
@include font-size("sxplus");
line-height: 65px;
}
.srp-description {
@include font-size("splus-300");
line-height: 36px;
}
}
}
}
.container-cart {
.cart-links-bottom {
.link-choose-more-products-wrapper a {
@include font-size("s-200");
line-height: 14.04px;
font-weight: 400;
font-family: $font-family-200;
text-align: center;
}
.btn-place-order-wrapper a {
font-size: 0px;
&::before {
@include font-size("s-300");
content: "Finalizar Compra";
font-weight: 700;
line-height: 19.07px;
font-family: $font-family-100;
letter-spacing: 0.05em;
text-shadow: none;
color: $clr-common-black;
}
}
}
}
.container-cart {
@media screen and (min-width: 2500px) {
.cart-links-bottom {
.link-choose-more-products-wrapper a {
@include font-size("splus-100");
line-height: 28px;
}
.btn-place-order-wrapper a {
&::before {
@include font-size("splus-300");
line-height: 38px;
}
}
}
}
}
.container-cart.container-cart-fill {
@media screen and (min-width: 1025px) {
$width-container: 1018px;
width: fluid($width-container, 1280px);
.cart-template {
display: grid;
grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
354px,
$width-container
);
.cart-template-holder {
grid-area: item;
}
.summary-template-holder {
grid-area: actions;
.row-fluid.summary {
display: grid !important;
grid-template: "options space total" auto / fluid(280px, $width-container) auto fluid(
354px,
$width-container
);
.cart-more-options {
grid-area: options;
padding: 0;
}
.totalizers {
padding: 0;
grid-area: total;
}
}
}
.cart-links-bottom {
grid-area: button;
padding: 0;
}
}
}
}
.container-cart.container-cart-fill {
@media screen and (min-width: 2500px) {
$width-container: 1988.28px;
width: fluid($width-container, 2500px);
.cart-template {
grid-template: "item item item" auto "actions actions actions" auto "space space button" auto / 1fr auto fluid(
688.35px,
$width-container
);
.summary-template-holder {
.row-fluid.summary {
grid-template: "options space total" auto / fluid(552px, $width-container) auto fluid(
688.35px,
$width-container
);
}
}
}
}
}
//Comecei
/* .container-cart.container-cart-fill {
.cart-template {
th.shipping-date {
font-size: 0px;
@ -995,10 +1249,6 @@
.cart-template .cart-items th {
vertical-align: top;
}
.cart-template-holder {
padding: 0 16px;
}
}
@media screen and (min-width: 1025px) {
@ -1095,4 +1345,130 @@
margin-bottom: 0;
}
}
} */
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed {
width: 100% !important;
h2 {
@include font-size("s-400");
line-height: 18.72px;
border: none;
font-weight: 500;
font-family: $font-family-200;
color: #303030;
}
.item-unavailable {
padding: 0;
&-message {
padding: 8px;
}
}
}
.cart-fixed {
@media screen and (min-width: 2500px) {
h2 {
@include font-size("splus-500");
line-height: 37.44px;
}
}
}
.cart-fixed {
.cart {
border: 1px solid $clr-gray-300;
}
}
.cart-fixed {
.cart .cart-items .item {
$width-container: 309px;
display: grid;
grid-template: "product-image product-name space product-price" auto / fluid(
60px,
$width-container
);
align-items: center;
.fn {
overflow: initial;
text-overflow: initial;
white-space: initial;
float: none;
}
.url,
.product-name,
.description {
width: 100%;
}
.url {
grid-area: product-image;
}
.product-name {
grid-area: product-name;
}
}
}
.cart-fixed {
.cart .cart-items {
.item {
.description {
grid-area: product-price;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
height: 100%;
}
margin-top: 0;
padding-top: 0;
border-top: none;
&:not(:first-child) {
padding-top: 8px;
margin-top: 8px;
border-top: 1px solid #e5e5e5;
}
.quantity.badge {
display: none;
}
.shipping-date,
.price {
color: #7d7d7d;
}
}
}
}
.cart-fixed {
@media screen and (min-width: 600px) {
.cart .cart-items .item {
$width-container: 976px;
grid-template:
"product-image product-name space product-price" auto / fluid(
60px,
$width-container
)
fluid(115px, $width-container) auto fluid(62px, $width-container);
}
}
}

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

@ -76,8 +76,8 @@
font-size: 0px;
&::before {
@include text-size("sm");
@include text-height("xs", 200);
@include font-size("s-200");
line-height: 24.51px;
content: "Seu carrinho está vazio.";
text-align: center;
@ -95,8 +95,8 @@
padding: 16px 0;
&::before {
@include text-size("xs");
@include text-height("smaller", 200);
@include font-size("s-300");
line-height: 16px;
content: "Continuar Comprando";
@ -119,8 +119,8 @@
@include mq("xl") {
.empty-cart-title {
&::before {
@include text-size("md-200");
@include text-height("md", 300);
@include font-size("splus-100");
line-height: 32.68px;
}
}
}
@ -130,8 +130,8 @@
&-content {
.empty-cart-title {
&::before {
@include text-size("xxl");
@include text-height("xxl", 200);
@include font-size("sxplus");
line-height: 65.37px;
}
}
}
@ -142,8 +142,8 @@
max-width: none;
&::before {
@include text-size("lg");
@include text-height("lg", 100);
@include font-size("splus-200");
line-height: 32.76px;
}
}
}

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

@ -108,8 +108,8 @@
&__developedBy {
span {
@include text-size("sm");
@include text-height("xs", 200);
font-size: map-get($text-sizes, "s-500");
line-height: 24.51px;
}
}
}

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

@ -1,4 +1,5 @@
/* _header.scss */
body {
margin: 0;
padding: 0;
@ -23,6 +24,14 @@ 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 {
padding: 16px;
border-bottom: 1px solid $clr-common-black;
@ -54,8 +63,8 @@ body :where(ul, li, ol) {
.headerCheckout__safeBuy {
span {
@include text-size("smaller-200");
@include text-height("smaller", 200);
@include font-size("s-200");
line-height: 16.34px;
font-style: normal;
font-weight: normal;
@ -117,8 +126,9 @@ body :where(ul, li, ol) {
max-width: none;
span {
@include text-size("md-200");
@include text-height("md", 300);
@include font-size("splus-100");
line-height: 32.68px;
font-family: $font-family-100;
}
img {
@ -166,8 +176,8 @@ body :where(ul, li, ol) {
}
.progress-item {
@include text-size("smaller-200");
@include text-height("smaller", 100);
@include font-size("s-200");
line-height: 14.04px;
font-family: $font-family-200;
@ -242,8 +252,8 @@ body :where(ul, li, ol) {
}
.progress-item {
@include text-size("md-200");
@include text-height("md", 200);
@include font-size("splus-100");
line-height: 28.08px;
&--left,
&--right {

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

@ -58,9 +58,8 @@
&-name,
&-link,
.type-name {
@include text-size("xxs");
@include text-height("xxs", 100);
@include font-size("s-250");
line-height: 24px;
font-family: $font-family-100;
}
}
@ -140,15 +139,15 @@
@include mq("md") {
&-title {
@include text-size("md-200");
@include text-height("xl", 100);
@include font-size("splus-100");
line-height: 38px;
}
}
@include mq("xxl") {
&-title {
@include text-size("xxl");
@include text-height("xxl", 300);
@include font-size("sxplus");
line-height: 76px;
padding: 0;
}
@ -157,8 +156,8 @@
&-name,
&-link,
.type-name {
@include text-size("md-300");
@include text-height("lg", 200);
@include font-size("splus-200");
line-height: 35.41px;
font-family: $font-family-100;
}

14
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;
@ -13,21 +15,13 @@
}
@mixin text-size($size) {
@if map_has_key($text-sizes-100, $size) {
$size: map_get($text-sizes-100, $size);
@if map_has_key($text-sizes, $size) {
$size: map_get($text-sizes, $size);
font-size: $size;
}
}
@mixin text-height($type, $height) {
@if map_has_key($text-height, $type + "-" + $height) {
$height: map-get($text-height, $type + "-" + $height);
line-height: $height;
}
}
/**
* @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss)
*/

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

@ -10,56 +10,34 @@ $clr-common-white: #fff;
$clr-gray-600: #292929;
$clr-gray-500: #6c6c6c;
$clr-gray-450: #c4c4c4;
$clr-gray-400: #7d7d7d;
$clr-gray-300: #8d8d8d;
$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;
$text-sizes-100: (
"smaller-100": 10px,
"smaller-200": 12px,
"xxs": 13px,
"xs": 14px,
"sm": 18px,
"md-100": 20px,
"md-200": 24px,
"md-300": 26px,
"lg": 28px,
"xl": 36px,
"xxl": 48px,
) !default;
$text-height: (
"smaller-100": 14.04px,
"smaller-200": 16px,
"smaller-300": 16.34px,
"smaller-400": 16.38px,
"xxs-100": 17.7px,
"xxs-200": 18.72px,
"xxs-300": 19.07px,
"xs-100": 24px,
"xs-200": 24.51px,
"xs-300": 27.24px,
"md-100": 28px,
"md-200": 28.08px,
"md-300": 32.68px,
"lg-100": 32.76px,
"lg-200": 35.41px,
"lg-300": 37.44px,
"xl-100": 38px,
"xl-200": 38.13px,
"xl-300": 46.8px,
"xxl-100": 49.03px,
"xxl-200": 65.37px,
"xxl-300": 76px,
/*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
"splus-100": 24px,
"splus-200": 26px,
"splus-300": 28px,
"splus-500": 32px,
"splus-700": 36px,
"splus-900": 40px,
"sxplus": 48px,
) !default;
/* Grid breakpoints */