forked from M3-Academy/m3-academy-template-checkout
feat(checkout): created styles for large devices to email,profile and payment route
This commit is contained in:
parent
e9003733b7
commit
4af6ba2000
@ -59,19 +59,6 @@
|
||||
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 {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
@ -154,10 +141,6 @@
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
@ -184,25 +167,29 @@
|
||||
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 {
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
padding-top: 16px;
|
||||
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 {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 17px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
#client-profile-data,
|
||||
#shipping-data,
|
||||
@ -239,7 +233,7 @@
|
||||
}
|
||||
|
||||
.client-profile-data.filled {
|
||||
margin: 0 16px 16px;
|
||||
margin: 0px 16px;
|
||||
}
|
||||
|
||||
&::before,
|
||||
@ -250,7 +244,8 @@
|
||||
@media screen and (min-width: 1025px) {
|
||||
grid-template-columns: fluid(331px, 677px) fluid(330px, 677px);
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 0 16px;
|
||||
margin: 0;
|
||||
gap: 16px;
|
||||
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
@ -271,6 +266,10 @@
|
||||
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 {
|
||||
@ -673,6 +672,10 @@
|
||||
.client-profile-data,
|
||||
.shipping-data,
|
||||
.payment-data {
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
padding: 16px;
|
||||
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 {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-top: 1px solid $clr-gray-100;
|
||||
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");
|
||||
line-height: 18.72px;
|
||||
|
||||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
font-family: $font-family-200;
|
||||
@ -830,7 +868,7 @@
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
.btn-submit-wrapper #go-to-shipping,
|
||||
.btn-submit-wrapper button,
|
||||
#find-pickups-manualy-button-denied,
|
||||
.btn-go-to-payment {
|
||||
@include btn-primary-blue-white();
|
||||
@ -855,13 +893,7 @@
|
||||
&:active {
|
||||
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) {
|
||||
@include font-size("splus-300");
|
||||
line-height: 38.13px;
|
||||
@ -887,9 +919,16 @@
|
||||
|
||||
.checkout-container {
|
||||
.shipping-data {
|
||||
.shipping-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
|
||||
padding: 24px 17.8px 36px 17px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
font-family: $font-family-100;
|
||||
|
||||
@ -982,18 +1021,25 @@
|
||||
|
||||
.checkout-container {
|
||||
.shp-method-option {
|
||||
.shp-method-option-text {
|
||||
@include font-size("s-300");
|
||||
text-transform: uppercase;
|
||||
line-height: 19.07px;
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
&.shp-method-option-active {
|
||||
color: $clr-common-black;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
.shp-method-option-text {
|
||||
@include font-size("splus-300");
|
||||
line-height: 38.13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
@ -1090,6 +1136,10 @@
|
||||
font-family: $font-family-100;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingIcon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@ -1102,6 +1152,7 @@
|
||||
@media screen and (min-width: 2500px) {
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel,
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabelSingle,
|
||||
.vtex-omnishipping-1-x-optionPrice,
|
||||
.shp-option-text-time {
|
||||
@include font-size("splus-100");
|
||||
@ -1255,7 +1306,7 @@
|
||||
&::before {
|
||||
content: "";
|
||||
|
||||
width: 21px;
|
||||
min-width: 21px;
|
||||
height: 21px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") center
|
||||
center/ cover;
|
||||
@ -1265,7 +1316,7 @@
|
||||
padding: 15px 28px 15px 28.66px;
|
||||
|
||||
&::before {
|
||||
width: 46.45px;
|
||||
min-width: 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 {
|
||||
.summary-cart-template-holder.cart-fixed-transition {
|
||||
@media screen and (max-width: 1024px) {
|
||||
@ -1448,10 +1567,6 @@
|
||||
|
||||
//autentication
|
||||
|
||||
.cart-fixed.affix {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
width: 100% !important;
|
||||
|
||||
@ -1459,10 +1574,12 @@
|
||||
@include font-size("s-400");
|
||||
line-height: 18.72px;
|
||||
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
||||
font-weight: 500;
|
||||
font-family: $font-family-200;
|
||||
background-color: transparent;
|
||||
|
||||
color: #303030;
|
||||
@media screen and (min-width: 2500px) {
|
||||
@ -1482,6 +1599,7 @@
|
||||
|
||||
.cart-fixed {
|
||||
.cart {
|
||||
overflow: initial;
|
||||
border: 1px solid $clr-gray-300;
|
||||
}
|
||||
}
|
||||
@ -1491,10 +1609,9 @@
|
||||
$width-container: 309px;
|
||||
|
||||
display: grid;
|
||||
grid-template: "product-image product-name space product-price" auto / fluid(
|
||||
60px,
|
||||
$width-container
|
||||
);
|
||||
grid-template:
|
||||
"product-image product-name space product-price" auto / fluid(60px, $width-container)
|
||||
minmax(auto, fluid(115px, $width-container)) auto auto;
|
||||
|
||||
align-items: center;
|
||||
|
||||
@ -1510,8 +1627,19 @@
|
||||
.description {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-area: product-price;
|
||||
}
|
||||
|
||||
.url {
|
||||
grid-area: product-image;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.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 .cart-items {
|
||||
.item {
|
||||
.description {
|
||||
grid-area: product-price;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
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;
|
||||
@ -1539,7 +1715,7 @@
|
||||
&:not(:first-child) {
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $clr-gray-200;
|
||||
}
|
||||
|
||||
.quantity.badge {
|
||||
@ -1548,7 +1724,11 @@
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
color: #7d7d7d;
|
||||
color: $clr-gray-400;
|
||||
}
|
||||
.price {
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1564,7 +1744,39 @@
|
||||
60px,
|
||||
$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 {
|
||||
.cart-template.mini-cart {
|
||||
.payment-confirmation-wrap {
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cart-totalizers.totalizers {
|
||||
tfoot {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,22 +40,6 @@
|
||||
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 {
|
||||
@ -67,22 +51,6 @@
|
||||
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 {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
@ -105,30 +73,10 @@
|
||||
}
|
||||
|
||||
.product-name {
|
||||
padding-right: 0;
|
||||
|
||||
@include mq(lg, max) {
|
||||
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,
|
||||
.seller {
|
||||
display: none !important;
|
||||
@ -186,24 +134,6 @@
|
||||
@media (max-width: 490px) {
|
||||
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,
|
||||
@ -266,26 +196,6 @@
|
||||
@include mq(md, max) {
|
||||
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 {
|
||||
@ -493,8 +403,11 @@
|
||||
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -510,54 +423,13 @@
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
|
||||
background: #00c8ff;
|
||||
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
position: relative;
|
||||
|
||||
color: $clr-primary-blue-500;
|
||||
width: 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;
|
||||
height: 32px;
|
||||
|
||||
.icon-minus-sign,
|
||||
.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;
|
||||
}
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 1.72em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -659,17 +510,20 @@
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
@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%;
|
||||
border-radius: 5px;
|
||||
|
||||
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 {
|
||||
background-color: lighten($clr-gray-600, 5);
|
||||
color: $clr-common-white;
|
||||
@ -681,16 +535,22 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
span {
|
||||
@include font-size("splus-300");
|
||||
line-height: 38.13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-cart {
|
||||
.cart {
|
||||
margin-bottom: 48px;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-postal-code__form {
|
||||
@ -764,6 +624,7 @@
|
||||
& ~ button {
|
||||
@include btn-primary-blue-white();
|
||||
@include font-size("s-200");
|
||||
font-weight: 700;
|
||||
line-height: 19.07px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@ -842,7 +703,7 @@
|
||||
.cart-links-bottom {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -853,9 +714,118 @@
|
||||
padding: 16px 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 {
|
||||
margin: 0;
|
||||
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 {
|
||||
@ -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 {
|
||||
.cart-items {
|
||||
@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 {
|
||||
.item-remove {
|
||||
position: static;
|
||||
@ -888,7 +1065,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-cart {
|
||||
@ -1053,7 +1229,7 @@
|
||||
@include font-size("s-200");
|
||||
line-height: 14.04px;
|
||||
|
||||
width: fluid(204.32px, 343px);
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 2px solid #f0f0f0;
|
||||
@ -1132,6 +1308,7 @@
|
||||
button {
|
||||
@include btn-primary-blue-black();
|
||||
@include font-size("s-200");
|
||||
font-weight: 700;
|
||||
line-height: 19.07px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@ -1233,10 +1410,11 @@
|
||||
tr {
|
||||
td.info,
|
||||
td.monetary {
|
||||
@include font-size("splus-300");
|
||||
@include font-size("s-500");
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
|
||||
line-height: 24.51px;
|
||||
font-family: $font-family-100;
|
||||
|
||||
@ -34,6 +34,10 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.container-cart {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $clr-gray-600;
|
||||
text-shadow: none;
|
||||
|
||||
@ -107,8 +107,11 @@
|
||||
no-repeat center center;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
height: 57.99px;
|
||||
width: 26px;
|
||||
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
|
||||
no-repeat center center / cover;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
@ -118,8 +121,11 @@
|
||||
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;
|
||||
no-repeat center center / cover;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
|
||||
@ -33,8 +33,15 @@ body :where(ul, li, ol) {
|
||||
}
|
||||
|
||||
.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%;
|
||||
|
||||
@ -47,6 +47,7 @@
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@ -69,11 +70,15 @@
|
||||
.product-item {
|
||||
&-name {
|
||||
min-height: 36px;
|
||||
|
||||
height: 36px;
|
||||
font-weight: 400;
|
||||
font-family: $font-family-100;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
|
||||
@media screen and (max-width:410px) {
|
||||
height: 53px;
|
||||
}
|
||||
}
|
||||
|
||||
&-types {
|
||||
@ -82,8 +87,8 @@
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
|
||||
min-height: 68px;
|
||||
height: 68px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user