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): created styles for large devices to email,profile and payment route

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-26 14:02:42 -03:00
parent e9003733b7
commit 4af6ba2000
6 changed files with 847 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,19 +59,6 @@
border-color: $clr-gray-300; border-color: $clr-gray-300;
} }
.shp-summary-group-price,
.shp-summary-package {
color: $clr-gray-300;
}
.shp-summary-group-price {
padding-right: 16px;
}
.shp-summary-package {
padding-left: 16px;
}
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: #303030;
@ -154,10 +141,6 @@
border-radius: 8px; border-radius: 8px;
} }
.checkout-container .client-profile-data .accordion-group {
padding: 16px 16px 44px;
}
.client-profile-data .accordion-group .accordion-heading span i.icon-user { .client-profile-data .accordion-group .accordion-heading span i.icon-user {
display: none; display: none;
} }
@ -184,25 +167,29 @@
padding: 0 16px; padding: 0 16px;
} }
#go-to-cart-button {
padding: 0 16px;
a {
font-size: 12px;
line-height: 16.34px;
text-decoration: none;
color: $clr-common-black;
}
}
.cart { .cart {
border: none; border: none;
margin: 0; margin: 0;
} }
.cart-fixed { .cart-fixed {
padding-top: 16px;
height: auto !important; height: auto !important;
&.affix {
position: sticky;
top: 0;
}
}
@media screen and (min-width: 1025px) {
position: relative;
.cart-fixed {
&.affix {
top: 60px;
transform: translateY(60px);
}
}
} }
} }
@ -227,10 +214,17 @@
} }
} }
@media screen and (min-width: 2500px) {
grid-template-columns: fluid(1314.75px, 1988.28px) fluid(642.7px, 1988.28px);
gap: 0 30.3px;
}
div.row-fluid { div.row-fluid {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 17px;
margin-bottom: 17px;
#client-profile-data, #client-profile-data,
#shipping-data, #shipping-data,
@ -239,7 +233,7 @@
} }
.client-profile-data.filled { .client-profile-data.filled {
margin: 0 16px 16px; margin: 0px 16px;
} }
&::before, &::before,
@ -250,7 +244,8 @@
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
grid-template-columns: fluid(331px, 677px) fluid(330px, 677px); grid-template-columns: fluid(331px, 677px) fluid(330px, 677px);
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
gap: 0 16px; margin: 0;
gap: 16px;
#shipping-data, #shipping-data,
#payment-data { #payment-data {
@ -271,6 +266,10 @@
margin: 0; margin: 0;
} }
} }
@media screen and (min-width: 2500px) {
grid-template-columns: fluid(642.7px, 1314.75px) fluid(640.75px, 1314.75px);
gap: 16px 31.3px;
}
} }
.form-step.box-edit .row-fluid { .form-step.box-edit .row-fluid {
@ -673,6 +672,10 @@
.client-profile-data, .client-profile-data,
.shipping-data, .shipping-data,
.payment-data { .payment-data {
.accordion-inner {
padding: 0;
}
.accordion-group { .accordion-group {
padding: 16px; padding: 16px;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
@ -681,9 +684,43 @@
} }
} }
.client-profile-data {
.accordion-group {
@media screen and (min-width: 2500px) {
padding: 24px 35.51px 36px 34px;
}
}
}
.payment-data .accordion-group {
@media screen and (min-width: 2500px) {
padding: 24px 33.51px 28px 34px;
}
}
.cart-template.mini-cart .cart-fixed { .cart-template.mini-cart .cart-fixed {
border: 1px solid #f0f0f0; border-top: 1px solid $clr-gray-100;
border-radius: 8px; border-radius: 8px;
.summary-cart-template-holder,
.row-fluid.summary,
h2 {
border-left: 1px solid $clr-gray-100;
border-right: 1px solid $clr-gray-100;
}
h2 {
padding-top: 16px;
padding-bottom: 34px;
}
.summary-template-holder {
padding: 0px;
}
.row-fluid.summary {
border-radius: 0 0 8px 8px;
border-bottom: 1px solid $clr-gray-100;
}
} }
} }
@ -692,6 +729,7 @@
@include font-size("s-400"); @include font-size("s-400");
line-height: 18.72px; line-height: 18.72px;
padding: 0;
margin-bottom: 16px; margin-bottom: 16px;
font-family: $font-family-200; font-family: $font-family-200;
@ -830,7 +868,7 @@
} }
.checkout-container { .checkout-container {
.btn-submit-wrapper #go-to-shipping, .btn-submit-wrapper button,
#find-pickups-manualy-button-denied, #find-pickups-manualy-button-denied,
.btn-go-to-payment { .btn-go-to-payment {
@include btn-primary-blue-white(); @include btn-primary-blue-white();
@ -855,13 +893,7 @@
&:active { &:active {
background: darken($clr-gray-600, 5); background: darken($clr-gray-600, 5);
} }
}
}
.checkout-container {
.btn-submit-wrapper #go-to-shipping,
#find-pickups-manualy-button-denied,
.btn-go-to-payment {
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
@include font-size("splus-300"); @include font-size("splus-300");
line-height: 38.13px; line-height: 38.13px;
@ -887,9 +919,16 @@
.checkout-container { .checkout-container {
.shipping-data { .shipping-data {
.shipping-container {
padding: 0;
}
.accordion-group { .accordion-group {
width: 100%; width: 100%;
padding: 16px;
padding: 24px 17.8px 36px 17px;
margin: 0;
font-family: $font-family-100; font-family: $font-family-100;
@ -982,19 +1021,26 @@
.checkout-container { .checkout-container {
.shp-method-option { .shp-method-option {
.shp-method-option-text {
@include font-size("s-300"); @include font-size("s-300");
text-transform: uppercase;
line-height: 19.07px; line-height: 19.07px;
display: block;
padding: 8px 0;
}
&.shp-method-option-active { &.shp-method-option-active {
color: $clr-common-black; color: $clr-common-black;
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.shp-method-option-text {
@include font-size("splus-300"); @include font-size("splus-300");
line-height: 38.13px; line-height: 38.13px;
} }
} }
} }
}
.checkout-container { .checkout-container {
.shipping-data { .shipping-data {
@ -1090,6 +1136,10 @@
font-family: $font-family-100; font-family: $font-family-100;
} }
.vtex-omnishipping-1-x-leanShippingIcon {
margin-left: 8px;
}
.vtex-omnishipping-1-x-leanShippingTextLabel { .vtex-omnishipping-1-x-leanShippingTextLabel {
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@ -1102,6 +1152,7 @@
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.vtex-omnishipping-1-x-deliveryGroup { .vtex-omnishipping-1-x-deliveryGroup {
.vtex-omnishipping-1-x-leanShippingTextLabel, .vtex-omnishipping-1-x-leanShippingTextLabel,
.vtex-omnishipping-1-x-leanShippingTextLabelSingle,
.vtex-omnishipping-1-x-optionPrice, .vtex-omnishipping-1-x-optionPrice,
.shp-option-text-time { .shp-option-text-time {
@include font-size("splus-100"); @include font-size("splus-100");
@ -1255,7 +1306,7 @@
&::before { &::before {
content: ""; content: "";
width: 21px; min-width: 21px;
height: 21px; height: 21px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center
center/ cover; center/ cover;
@ -1265,7 +1316,7 @@
padding: 15px 28px 15px 28.66px; padding: 15px 28px 15px 28.66px;
&::before { &::before {
width: 46.45px; min-width: 46.45px;
height: 46.45px; height: 46.45px;
} }
} }
@ -1367,6 +1418,74 @@
} }
} }
.checkout-container {
.shipping-data {
height: 100%;
.box-info {
.shp-summary-group,
.shipping-container {
padding: 0;
}
.vtex-omnishipping-1-x-summaryChange {
display: none;
}
.vtex-omnishipping-1-x-SummaryItemInfo {
border: none;
span {
font-family: $font-family-100;
font-size: 12px;
font-weight: 400;
line-height: 16.34px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 32.68px;
letter-spacing: 0.05em;
}
}
}
}
}
}
.checkout-container {
.vtex-omnishipping-1-x-summaryPackage .shp-summary-package-time span.shp-option-text {
font-family: $font-family-100;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 16.34px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 32.68px;
letter-spacing: 0.05em;
}
}
}
.checkout-container {
.vtex-omnishipping-1-x-SummaryItemPrice {
font-family: $font-family-100;
font-size: 12px;
font-weight: 400;
line-height: 16.34px;
@media screen and (min-width: 2500px) {
font-size: 24px;
line-height: 32.68px;
letter-spacing: 0.05em;
}
}
}
.checkout-container { .checkout-container {
.summary-cart-template-holder.cart-fixed-transition { .summary-cart-template-holder.cart-fixed-transition {
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@ -1448,10 +1567,6 @@
//autentication //autentication
.cart-fixed.affix {
position: relative !important;
}
.cart-fixed { .cart-fixed {
width: 100% !important; width: 100% !important;
@ -1459,10 +1574,12 @@
@include font-size("s-400"); @include font-size("s-400");
line-height: 18.72px; line-height: 18.72px;
margin: 0;
border: none; border: none;
font-weight: 500; font-weight: 500;
font-family: $font-family-200; font-family: $font-family-200;
background-color: transparent;
color: #303030; color: #303030;
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
@ -1482,6 +1599,7 @@
.cart-fixed { .cart-fixed {
.cart { .cart {
overflow: initial;
border: 1px solid $clr-gray-300; border: 1px solid $clr-gray-300;
} }
} }
@ -1491,10 +1609,9 @@
$width-container: 309px; $width-container: 309px;
display: grid; display: grid;
grid-template: "product-image product-name space product-price" auto / fluid( grid-template:
60px, "product-image product-name space product-price" auto / fluid(60px, $width-container)
$width-container minmax(auto, fluid(115px, $width-container)) auto auto;
);
align-items: center; align-items: center;
@ -1510,8 +1627,19 @@
.description { .description {
width: 100%; width: 100%;
} }
.description {
grid-area: product-price;
}
.url { .url {
grid-area: product-image; grid-area: product-image;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
} }
.product-name { .product-name {
@ -1520,16 +1648,64 @@
} }
} }
.cart-fixed {
.cart .cart-items .item {
.product-name {
@include font-size("s-200");
line-height: 14.04px;
font-weight: 400;
font-family: $font-family-200;
margin-left: 7px;
color: $clr-common-black;
@media screen and (min-width: 2500px) {
@include font-size("splus-100");
line-height: 28.08px;
margin-left: 13.5px;
}
}
.description {
@include font-size("s-200");
line-height: 16.34px;
font-family: $font-family-100;
font-weight: 400;
color: $clr-gray-600;
@media screen and (min-width: 2500px) {
@include font-size("splus-100");
line-height: 32.86px;
}
}
}
}
.cart-fixed { .cart-fixed {
.cart .cart-items { .cart .cart-items {
.item { .item {
.description { .description {
grid-area: product-price;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
height: 100%; height: 100%;
span,
strong {
@include font-size("s-200");
line-height: 16.34px;
font-weight: 400;
font-family: $font-family-100;
color: $clr-gray-600;
}
.shipping-date {
display: none;
}
} }
margin-top: 0; margin-top: 0;
@ -1539,7 +1715,7 @@
&:not(:first-child) { &:not(:first-child) {
padding-top: 8px; padding-top: 8px;
margin-top: 8px; margin-top: 8px;
border-top: 1px solid #e5e5e5; border-top: 1px solid $clr-gray-200;
} }
.quantity.badge { .quantity.badge {
@ -1548,7 +1724,11 @@
.shipping-date, .shipping-date,
.price { .price {
color: #7d7d7d; color: $clr-gray-400;
}
.price {
text-align: right;
margin: 0;
} }
} }
} }
@ -1564,7 +1744,39 @@
60px, 60px,
$width-container $width-container
) )
fluid(115px, $width-container) auto fluid(62px, $width-container); minmax(fluid(115px, $width-container), auto) auto minmax(fluid(62px, $width-container), auto);
}
}
@media screen and (min-width: 1025px) {
.cart .cart-items .item {
$width-container: 298px;
grid-template:
"product-image product-name space product-price" auto / fluid(
60px,
$width-container
)
fluid(115px, $width-container) auto min(fluid(62px, $width-container));
}
}
@media screen and (min-width: 2500px) {
.cart .cart-items .item {
$width-container: 612.484px;
height: 116.5px;
.url {
height: 116.5px;
}
grid-template:
"product-image product-name space product-price" auto / fluid(
116.5px,
$width-container
)
fluid(227px, $width-container) auto min(fluid(124px, $width-container));
} }
} }
} }
@ -1620,6 +1832,11 @@
.checkout-container { .checkout-container {
.cart-template.mini-cart { .cart-template.mini-cart {
.payment-confirmation-wrap {
border: none !important;
padding: 0;
}
.cart-totalizers.totalizers { .cart-totalizers.totalizers {
tfoot { tfoot {
tr { tr {
@ -1670,3 +1887,194 @@
} }
} }
} }
.checkout-container {
#payment-data-submit {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
border-radius: 8px;
transition: 200ms linear;
background-color: #298541;
span {
@include font-size("s-300");
font-family: $font-family-100;
letter-spacing: 0.05em;
line-height: 19.07px;
font-weight: 700;
color: $clr-common-white;
text-transform: uppercase;
}
i {
display: none;
}
&:hover {
background: lighten(#298541, 5);
}
&:active {
background: darken(#298541, 5);
}
@media screen and (min-width: 2500px) {
span {
@include font-size("splus-300");
line-height: 38.13px;
}
}
}
}
.checkout-container {
#go-to-cart-button {
padding: 0 16px;
margin: 0 0 10px;
a {
@include font-size("s-200");
line-height: 16.34px;
font-weight: 400;
color: $clr-common-black;
font-family: $font-family-100;
}
@media screen and (min-width: 2500px) {
margin: 19.5 0 10px;
a {
@include font-size("splus-100");
line-height: 32.68px;
}
}
}
}
.container-order-form {
.store-country-BRA.active span.accordion-toggle.collapsed.accordion-toggle-active::after {
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
display: block;
margin-top: 12px;
font-family: $font-family-100;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.01em;
color: $clr-gray-400;
@media screen and (min-width: 2500px) {
font-size: 28px;
line-height: 48px;
}
}
}
.container-order-form .orderform-template.active div.row-fluid #payment-data.span12 {
@media screen and (min-width: 1025px) {
grid-column: 1/3;
grid-row: 2/3;
}
}
.checkout-container {
#payment-group-creditCardPaymentGroup .payment-group-item-text {
background: none;
}
#payment-data {
&.payment-data {
.form-step.box-new {
.steps-view {
width: 100%;
@media screen and (min-width: 1025px) {
$width-container: 642px;
width: fluid(393px, $width-container);
}
@media screen and (min-width: 2500px) {
$width-container: 1247.25px;
width: fluid(800.25px, $width-container);
}
}
}
.link-gift-card {
margin: 0px;
left: 0px;
margin-bottom: 10px;
@media screen and (min-width: 1025px) {
left: 9px;
}
}
.payment-group {
width: 100%;
@media screen and (min-width: 1025px) {
$width-container: 642px;
width: fluid(209px, $width-container);
}
@media screen and (min-width: 2500px) {
$width-container: 1247.25px;
width: fluid(406.48px, $width-container);
}
}
.payment-group-list-btn {
width: 100%;
.payment-group-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $clr-common-black;
padding: 13px;
color: $clr-common-black;
border-radius: 6px;
margin: 0;
opacity: 0.3;
&.active {
border-color: #f15a31;
color: #f15a31;
opacity: 1;
}
&-text {
@include font-size("s-300");
padding: 0;
font-family: $font-family-100;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.01em;
text-align: center;
background-image: none;
}
@media screen and (min-width: 2500px) {
&-text {
@include font-size("splus-300");
line-height: 24px;
}
}
}
.payment-group-item {
margin-bottom: 12px;
}
}
}
}
}

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

@ -40,22 +40,6 @@
width: 100%; width: 100%;
} }
} }
#payment-data-submit {
background: $clr-gray-600;
border: none;
border-radius: 0;
color: $clr-common-white;
outline: none;
transition: all 0.2s linear;
&:hover {
background: lighten($clr-gray-600, 5);
}
&:active {
background: darken($clr-gray-600, 5);
}
}
} }
.lookatme { .lookatme {
@ -67,22 +51,6 @@
padding: 16px 0; padding: 16px 0;
} }
th {
color: $clr-gray-600;
padding: 0 0 16px;
font-style: normal;
font-weight: bold;
font-size: 14px;
line-height: 16px;
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
display: none;
}
}
}
.product-image { .product-image {
height: auto; height: auto;
padding: 0; padding: 0;
@ -105,30 +73,10 @@
} }
.product-name { .product-name {
padding-right: 0;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
a {
color: $clr-blue-500;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
transition: ease-in 0.22s all;
&:hover {
color: darken($clr-blue-500, 10);
text-decoration: none;
}
@media (max-width: 490px) {
margin-left: 23px;
}
}
.brand, .brand,
.seller { .seller {
display: none !important; display: none !important;
@ -186,24 +134,6 @@
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
} }
input {
background-color: $clr-common-white;
border: 1px solid $clr-gray-100;
border-radius: 0;
border-width: 0 1px;
display: block;
max-height: 38px;
margin: 0 !important;
padding: 8px 0;
width: 38px;
color: $clr-gray-400;
box-shadow: none;
@include mq(lg, max) {
width: 24px !important;
}
}
} }
.quantity-price, .quantity-price,
@ -266,26 +196,6 @@
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
/* .srp-main-title {
margin: 32px 0 12px;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: $clr-gray-400;
@include mq(md, max) {
margin-top: 0;
}
} */
/* .srp-description {
color: $clr-gray-400;
font-size: 12px;
line-height: 18px;
margin: 0 0 12px;
} */
} }
.srp-toggle { .srp-toggle {
@ -493,8 +403,11 @@
width: 100%; width: 100%;
padding: 0 16px; padding: 0 16px;
text-align: left; text-align: left;
@media screen and (min-width: 1025px) {
padding: 0;
}
} }
} }
@ -510,54 +423,13 @@
height: 16px; height: 16px;
border-radius: 100%; border-radius: 100%;
background: #00c8ff;
.icon-plus-sign, .icon-plus-sign,
.icon-minus-sign { .icon-minus-sign {
position: relative; position: relative;
color: $clr-primary-blue-500;
width: 100%; width: 100%;
height: 100%; height: 100%;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0;
background-color: $clr-common-white;
}
}
.icon-plus-sign {
&::after {
content: "";
position: absolute;
padding: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 10px;
background-color: $clr-common-white;
}
&::before {
width: 10px;
height: 2px;
}
}
.icon-minus-sign {
&::before {
width: 10px;
height: 2px;
}
} }
} }
} }
@ -587,32 +459,11 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
.icon-minus-sign,
.icon-plus-sign { .icon-plus-sign {
&::after { width: 32px;
content: ""; height: 32px;
position: absolute; font-size: 1.72em;
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;
}
} }
} }
} }
@ -659,17 +510,20 @@
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
@include btn-primary-blue-white(); @include btn-primary-blue-white();
@include font-size("s-400");
font-weight: 500;
line-height: 19.07px;
font-family: $font-family-100;
letter-spacing: 0.05em;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
outline: none; outline: none;
span {
@include font-size("s-400");
font-weight: 700;
line-height: 19.07px;
font-family: $font-family-100;
letter-spacing: 0.05em;
}
&:hover { &:hover {
background-color: lighten($clr-gray-600, 5); background-color: lighten($clr-gray-600, 5);
color: $clr-common-white; color: $clr-common-white;
@ -681,16 +535,22 @@
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
span {
@include font-size("splus-300"); @include font-size("splus-300");
line-height: 38.13px; line-height: 38.13px;
} }
} }
} }
} }
}
.container-cart { .container-cart {
.cart { .cart {
margin-bottom: 48px; margin-bottom: 48px;
@media screen and (min-width: 1025px) {
padding-top: 16px;
}
} }
.srp-postal-code__form { .srp-postal-code__form {
@ -764,6 +624,7 @@
& ~ button { & ~ button {
@include btn-primary-blue-white(); @include btn-primary-blue-white();
@include font-size("s-200"); @include font-size("s-200");
font-weight: 700;
line-height: 19.07px; line-height: 19.07px;
letter-spacing: 1px; letter-spacing: 1px;
@ -842,7 +703,7 @@
.cart-links-bottom { .cart-links-bottom {
width: 100%; width: 100%;
padding: 0 16px; padding: 0 16px;
margin: 0; margin: 20px 0 0;
} }
} }
} }
@ -853,9 +714,118 @@
padding: 16px 0; padding: 16px 0;
margin: 0; margin: 0;
.product-name {
@media screen and (min-width: 1025px) {
padding-left: 16px;
}
@media screen and (min-width: 2500px) {
padding-left: 31px;
}
a {
@include font-size("s-200");
line-height: 14.04px;
color: $clr-common-black;
font-family: $font-family-200;
transition: ease-in 0.22s all;
&:hover {
color: darken($clr-primary-blue-500, 10);
text-decoration: none;
}
@media screen and (min-width: 1025px) {
}
@media screen and (min-width: 2500px) {
@include font-size("splus-100");
line-height: 28.08px;
}
}
}
.quantity {
@media screen and (min-width: 1025px) {
margin: 15px 0 0;
}
@media screen and (min-width: 2500px) {
margin: 54px 0 0;
}
}
.product-price { .product-price {
margin: 0; margin: 0;
height: 36px; height: 36px;
@media screen and (min-width: 1025px) {
}
span.best-price {
height: 14.04px;
@media screen and (min-width: 2500px) {
height: 28.08px;
}
}
span {
@include font-size("s-200");
line-height: 14.04px;
font-family: $font-family-200;
@media screen and (min-width: 2500px) {
@include font-size("splus-100");
line-height: 28.08px;
}
}
}
.shipping-estimate-date {
@include font-size("s-200");
line-height: 14.04px;
font-family: $font-family-200;
@media screen and (min-width: 2500px) {
@include font-size("splus-100");
line-height: 28.08px;
}
}
.quantity-price span {
@include font-size("s-300");
line-height: 19.07px;
font-weight: 700;
font-family: $font-family-100;
@media screen and (min-width: 2500px) {
@include font-size("splus-300");
line-height: 38.13px;
}
}
.product-image {
width: 60px;
height: 60px;
a {
display: block;
width: auto;
height: auto;
}
img {
width: 100%;
height: 60px;
object-fit: cover;
@media screen and (min-width: 2500px) {
width: 146px;
height: 146px;
}
}
} }
.item-remove { .item-remove {
@ -872,9 +842,216 @@
} }
} }
.container-cart {
.full-cart .cart {
td.product-name {
width: auto;
}
td.quantity {
padding: 9px 9px 9px 11px;
border-radius: 8px;
height: 34px;
.item-quantity-change {
box-sizing: content-box;
}
input {
@include font-size("s-300");
line-height: 16.38px;
font-family: $font-family-200;
font-weight: 400;
display: block;
width: 38px;
height: auto;
margin: 0 !important;
border: none;
border-radius: 0;
color: $clr-common-black;
background-color: $clr-common-white;
box-shadow: none;
box-sizing: content-box;
@media screen and (min-width: 2500px) {
@include font-size("splus-300");
line-height: 32.76px;
padding: 0 5px;
width: 37px;
}
}
}
}
}
.container-cart {
@media screen and (max-width: 1024px) {
.full-cart .cart {
table {
display: block;
thead {
display: none;
}
tbody {
display: block;
tr {
width: 100%;
display: block;
position: relative;
td.shipping-date,
td.quantity-price {
display: none;
}
td.product-image {
left: 0;
position: absolute;
}
td.quantity {
margin-left: 76px !important;
}
.product-name {
display: block;
margin-left: 76px;
text-align: left;
line-height: 140%;
width: auto;
}
.item-remove {
position: absolute;
top: 22px;
right: 6px;
transform: translate(50%, -50%);
}
.product-price {
position: absolute;
bottom: 16px;
padding: 0;
right: 0;
}
}
}
}
}
}
}
.container-cart { .container-cart {
.cart-items { .cart-items {
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
padding: 16px 0 0;
.product-item {
height: 76px;
}
thead {
th {
@include font-size("s-300");
line-height: 16.38px;
color: $clr-gray-600;
font-style: normal;
font-weight: 400;
padding: 0 0 16px;
font-family: $font-family-200;
text-align: left;
&.product-price,
&.shipping-date {
font-size: 0px;
&::before {
@include font-size("s-300");
line-height: 16.38px;
}
}
&.product-price {
&::before {
content: "Unidade";
}
}
&.shipping-date {
&::before {
content: "Frete";
}
}
}
}
}
}
}
.container-cart {
.cart-items {
@media screen and (min-width: 2500px) {
.product-item {
height: 162px;
}
thead {
th {
&.product-price,
&.shipping-date {
&::before {
@include font-size("splus-300");
line-height: 32.76px;
}
}
&.quantity-price {
min-width: 170px;
}
@include font-size("splus-300");
line-height: 32.76px;
}
}
}
}
}
.container-cart {
.cart-items {
@media screen and (min-width: 1025px) {
tbody {
td {
text-align: left;
vertical-align: middle;
}
td.product-price {
vertical-align: middle;
}
td.quantity {
margin: 0;
}
td.shipping-date {
padding: 5px 0;
}
}
}
}
}
.container-cart {
.cart-items {
.product-item { .product-item {
.item-remove { .item-remove {
position: static; position: static;
@ -889,7 +1066,6 @@
} }
} }
} }
}
.container-cart { .container-cart {
.cart-template { .cart-template {
@ -1053,7 +1229,7 @@
@include font-size("s-200"); @include font-size("s-200");
line-height: 14.04px; line-height: 14.04px;
width: fluid(204.32px, 343px); width: 100%;
height: 36px; height: 36px;
padding: 0 12px; padding: 0 12px;
border: 2px solid #f0f0f0; border: 2px solid #f0f0f0;
@ -1132,6 +1308,7 @@
button { button {
@include btn-primary-blue-black(); @include btn-primary-blue-black();
@include font-size("s-200"); @include font-size("s-200");
font-weight: 700;
line-height: 19.07px; line-height: 19.07px;
letter-spacing: 1px; letter-spacing: 1px;
@ -1233,10 +1410,11 @@
tr { tr {
td.info, td.info,
td.monetary { td.monetary {
@include font-size("splus-300"); @include font-size("s-500");
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
padding: 0;
line-height: 24.51px; line-height: 24.51px;
font-family: $font-family-100; font-family: $font-family-100;

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

@ -34,6 +34,10 @@ body {
} }
} }
.container-cart {
min-height: 70vh;
}
.btn-success { .btn-success {
background: $clr-gray-600; background: $clr-gray-600;
text-shadow: none; text-shadow: none;

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

@ -107,8 +107,11 @@
no-repeat center center; no-repeat center center;
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") height: 57.99px;
no-repeat center center; width: 26px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center / cover;
} }
} }
.slick-next { .slick-next {
@ -118,8 +121,11 @@
no-repeat center center; no-repeat center center;
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
height: 57.99px;
width: 26px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center; no-repeat center center / cover;
} }
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {

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

@ -33,8 +33,15 @@ body :where(ul, li, ol) {
} }
.headerCheckout { .headerCheckout {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
background: $clr-common-white;
width: 100%;
padding: 16px; padding: 16px;
border-bottom: 1px solid $clr-common-black; border-bottom: 1px solid $clr-common-black;
z-index: 10000;
.container { .container {
width: 100%; width: 100%;

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

@ -47,6 +47,7 @@
img { img {
max-width: 100%; max-width: 100%;
width: 100%;
height: auto; height: auto;
} }
} }
@ -69,11 +70,15 @@
.product-item { .product-item {
&-name { &-name {
min-height: 36px; min-height: 36px;
height: 36px;
font-weight: 400; font-weight: 400;
font-family: $font-family-100; font-family: $font-family-100;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
@media screen and (max-width:410px) {
height: 53px;
}
} }
&-types { &-types {
@ -82,8 +87,8 @@
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 5px; gap: 5px;
min-height: 68px; min-height: 68px;
height: 68px
} }
} }
} }