forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat; cria configuracao de ajuste de responsividade do checkout' (#7) from feature/checkoutCartResponsive into development
Reviewed-on: EmmanuelVitor/m3-academy-template-checkout-EmmanuelVitor#7
This commit is contained in:
commit
56ab7e46ee
@ -45,6 +45,7 @@
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.client-email {
|
||||
@ -65,10 +66,11 @@
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
padding: 0 16px 12px;
|
||||
padding: 0 16px 0;
|
||||
border: 1px solid $color-black;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
&::placeholder {
|
||||
font-family: $font-family;
|
||||
@ -78,6 +80,7 @@
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -103,7 +106,28 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
content: "";
|
||||
color: red;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
visibility: hidden;
|
||||
|
||||
|
||||
&::after {
|
||||
content: "Campo Obrigatório";
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,226 +177,10 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.shipping-data,
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 8px;
|
||||
border: 1px solid $color-gray3;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
|
||||
.accordion-heading {
|
||||
// span {
|
||||
// color: #303030;
|
||||
// margin-bottom: 8px;
|
||||
// padding: 0;
|
||||
// background: none;
|
||||
|
||||
& span:nth-child(2n) {
|
||||
margin-bottom: 36px;
|
||||
padding: 0;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "Identificação";
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
color: $color-black;
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
label {
|
||||
color: $color-gray2;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $color-gray7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.help.error {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.state-inscription-box span {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button.submit {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-blue2;
|
||||
color: $color-white;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-top: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 100%;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($color-black, 5);
|
||||
}
|
||||
}
|
||||
|
||||
/* Shipping configurations */
|
||||
|
||||
.ship-postalCode small a {
|
||||
color: #303030;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
p {
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shp-lean {
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 3px;
|
||||
|
||||
|
||||
label {
|
||||
background-color: $color-white;
|
||||
box-shadow: none;
|
||||
color: #303030;
|
||||
padding: 8px 12px;
|
||||
|
||||
|
||||
svg path {
|
||||
fill: #d8c8ac;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-address-title {
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
border-color: $color-gray4;
|
||||
}
|
||||
|
||||
.address-summary {
|
||||
background: none;
|
||||
border-color: $color-gray7;
|
||||
border-radius: 0;
|
||||
color: $color-gray2;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
}
|
||||
|
||||
a {
|
||||
content: "";
|
||||
display: block;
|
||||
text-align: end;
|
||||
|
||||
|
||||
&::after {
|
||||
content: "alterar";
|
||||
color: $color-blue2;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shp-summary-group-price,
|
||||
.shp-summary-package {
|
||||
color: $color-gray4;
|
||||
}
|
||||
|
||||
.shp-summary-group-price {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.shp-summary-package {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: #d8c8ac;
|
||||
border: 1px solid #d8c8ac;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -429,54 +237,11 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.step.accordion-group.shipping-data {
|
||||
& .accordion-heading {
|
||||
& span.accordion-toggle.collapsed {
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
background-position: 100% 50%;
|
||||
cursor: pointer;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-data {
|
||||
& .accordion-group {
|
||||
& .accordion-heading {
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
background-position: 100% 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i.icon-edit {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px;
|
||||
background-position: 100% 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
p.notification {
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -492,6 +257,8 @@ input#client-phone {
|
||||
}
|
||||
|
||||
input#client-first-name {
|
||||
width: 96%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96%;
|
||||
}
|
||||
@ -499,10 +266,12 @@ input#client-first-name {
|
||||
|
||||
p.client-first-name.input.pull-left.text.required,
|
||||
p.client-last-name.input.pull-left.text.required {
|
||||
max-width: 46%;
|
||||
max-width: 48%;
|
||||
}
|
||||
|
||||
p.client-last-name.input.pull-left.text.required {
|
||||
margin-left: 5px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 46.9%;
|
||||
}
|
||||
@ -512,6 +281,7 @@ input#client-document,
|
||||
input#client-phone {
|
||||
width: 92%;
|
||||
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 96%;
|
||||
}
|
||||
@ -551,6 +321,15 @@ span.quantity.badge {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black2;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin-left: 13.5px
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fixed.affix-top.cart-fixed-transition {
|
||||
@ -565,6 +344,10 @@ span.quantity.badge {
|
||||
border-bottom: 1px solid $color-gray2;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-cart h2 {
|
||||
@ -585,15 +368,15 @@ span.quantity.badge {
|
||||
}
|
||||
|
||||
a#orderform-minicart-to-cart {
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
right: 16px;
|
||||
color: #000000 !important;
|
||||
bottom: 34px;
|
||||
color: $color-black2 !important;
|
||||
bottom: 44px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -601,24 +384,33 @@ a#orderform-minicart-to-cart {
|
||||
span.fn.product-name {
|
||||
overflow-wrap: break-word;
|
||||
white-space: break-spaces !important;
|
||||
inline-size: 182px !important;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
inline-size: none;
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-fixed .cart ul li .price {
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: #292929;
|
||||
color: $color-black;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
li.hproduct.item.muted {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mini-cart .price {
|
||||
@ -632,7 +424,7 @@ p#go-to-cart-button {
|
||||
tr.Items,
|
||||
tr.Discounts {
|
||||
border-bottom: 1px solid $color-gray2 !important;
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -646,7 +438,7 @@ td.info {
|
||||
}
|
||||
|
||||
.shipping-summary-info {
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -656,6 +448,10 @@ td.info {
|
||||
|
||||
p.submit.btn-submit-wrapper {
|
||||
margin-top: 44px;
|
||||
|
||||
button {
|
||||
background-color: red($color: #000000);
|
||||
}
|
||||
}
|
||||
|
||||
.step.accordion-group.client-profile-data.active {
|
||||
@ -678,10 +474,10 @@ td.monetary {
|
||||
|
||||
button#shipping-option-delivery {
|
||||
background: #ffffff;
|
||||
border: 1px solid #292929;
|
||||
border: 1px solid $color-black;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 100px;
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -694,7 +490,7 @@ button#shipping-option-delivery {
|
||||
|
||||
button#shipping-option-pickup-in-point {
|
||||
border-radius: 100px;
|
||||
font-family: "Open Sans";
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -721,10 +517,20 @@ p.input.ship-postalCode.required.text {
|
||||
}
|
||||
|
||||
.accordion-heading .accordion-toggle {
|
||||
padding: 4px 0 0;
|
||||
padding: 4px 8px 0;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
padding: 4px 20px 0;
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -744,16 +550,274 @@ input#client-email {
|
||||
|
||||
.step.accordion-group.client-profile-data.filled {
|
||||
height: 100%;
|
||||
padding: 24px 16px 36px;
|
||||
padding: 0;
|
||||
|
||||
.accordion-toggle {
|
||||
|
||||
|
||||
span {
|
||||
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
|
||||
|
||||
&::before {
|
||||
content: 'Identificação';
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-step {
|
||||
margin-top: 25px;
|
||||
}
|
||||
// .box-step {
|
||||
// margin-top: 25px;
|
||||
// }
|
||||
|
||||
input#ship-number,
|
||||
input#ship-complement,
|
||||
input#ship-receiverName {
|
||||
width: 95%;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
p.client-first-name.input.pull-left.text.required,
|
||||
p.client-last-name.input.pull-left.text.required {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.client-notice,
|
||||
.client-profile-data ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
|
||||
|
||||
|
||||
i::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 19.2px;
|
||||
height: 18.66px;
|
||||
background: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png') no-repeat center center;
|
||||
display: block;
|
||||
background-size: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 39.24px;
|
||||
height: 40.58px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button#btn-go-to-payment,
|
||||
button#go-to-shipping {
|
||||
width: 100%;
|
||||
background-color: $color-blue2;
|
||||
color: $color-white;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
@media (min-width:2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
color: $color-black2;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
width: 19.2px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i::before {
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: 19.2px 18px;
|
||||
fill: transparent;
|
||||
color: transparent;
|
||||
width: 19.2px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-home {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-credit-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// .icon-edit {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
span[data-i18n="clientProfileData.identification"] {
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
span[data-i18n="clientProfileData.identification"]::before {
|
||||
content: "Identificação";
|
||||
color: $color-black2;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
// margin: 0 0 0 17px;
|
||||
}
|
||||
|
||||
span[data-i18n="paymentData.payment"]::before {
|
||||
content: "";
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 15px 6px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
a#edit-shipping-data,
|
||||
.accordion-toggle .link-box-edit {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box-info {
|
||||
// margin-left: 15px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-cart .url {
|
||||
img {
|
||||
|
||||
width: 116.5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ul.cart-items.unstyled.clearfix {
|
||||
// margin-bottom: 50px;
|
||||
// }
|
||||
|
||||
span.shipping-date.pull-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
strong.price.pull-right {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-cart .description {
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-toggle .link-box-edit {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.address-summary.address-summary-BRA,
|
||||
.vtex-omnishipping-1-x-summaryPackage.shp-summary-package {
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemContent {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemPrice {
|
||||
@media (min-width: 2500px) {
|
||||
padding: 0 !important;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
display: none !important;
|
||||
|
||||
@media (min-width: 2500px) {}
|
||||
}
|
||||
@ -44,6 +44,11 @@
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 32px !important;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -70,7 +75,7 @@
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
color: $color-gray2;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -83,6 +88,12 @@
|
||||
#go-to-cart-button a {
|
||||
color: #303030;
|
||||
text-decoration: underline;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-totalizers {
|
||||
@ -93,11 +104,19 @@
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 96%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
@ -274,6 +293,7 @@
|
||||
font-weight: 500;
|
||||
// padding: 1px 12px;
|
||||
background-color: $color-blue2;
|
||||
;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 11px;
|
||||
@ -441,6 +461,7 @@
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
@ -492,7 +513,7 @@
|
||||
width: 50%;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
background-color: $color-gray3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -522,6 +543,7 @@
|
||||
|
||||
&~button {
|
||||
background: $color-blue2;
|
||||
;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
@ -645,11 +667,11 @@
|
||||
}
|
||||
|
||||
&__sla {
|
||||
color: $color-gray2;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
&__price {
|
||||
color: $color-gray2;
|
||||
color: #7d7d7d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -817,6 +839,7 @@
|
||||
|
||||
button {
|
||||
background: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
height: 36px;
|
||||
@ -903,7 +926,7 @@
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #292929;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
@ -957,6 +980,7 @@
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $color-blue2;
|
||||
;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
@ -1015,6 +1039,56 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.client-profile-data ul {
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.payment-group-list-btn {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: none;
|
||||
padding: 13px 9px;
|
||||
border: 1px solid $color-gray2 ;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
margin: 12px 0 0 0;
|
||||
|
||||
span {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background-image: none !important;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
color: $color-gray6
|
||||
}
|
||||
|
||||
span:hover {
|
||||
color: $color-orange;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border: 1px solid $color-orange;
|
||||
}
|
||||
|
||||
a[data-name="American Express"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a[data-name="Boleto Bancário"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a[data-name="Depósito"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a[data-name="Mercado Pago"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -70,17 +70,19 @@ body {
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-black;
|
||||
color: $color-black2;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin: 40px 0 30px;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
||||
|
||||
@media (min-width:2500px) {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
|
||||
@ -67,6 +67,7 @@
|
||||
|
||||
font-family: $font-family;
|
||||
background-color: $color-blue2;
|
||||
;
|
||||
color: $color-white;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
|
||||
@ -20,10 +20,11 @@ $color-gray7: #e0e0e0;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue2: #00C8FF;
|
||||
;
|
||||
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
$color-orange: #f15a31;
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user