feat: add responsividade nas info da pdp, e a estilizacao do campo de cep e transportes #4
@ -1,3 +1,10 @@
|
||||
[class*="html--buy-button"]{
|
||||
@media(min-width:769px){
|
||||
[class*="html--buy-button"]{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media(max-width: 768px){
|
||||
[class*="html--buy-button"]{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
@ -6,12 +6,6 @@
|
||||
},
|
||||
"children": ["html#buy-button"]
|
||||
},
|
||||
"product-assembly-options": {
|
||||
"children": [
|
||||
"flex-layout.row#product-assembly-options",
|
||||
"assembly-option-input-values"
|
||||
]
|
||||
},
|
||||
"assembly-option-input-values": {
|
||||
"props": {
|
||||
"optionsDisplay": "box"
|
||||
|
@ -117,10 +117,8 @@
|
||||
"flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
"availability-subscriber",
|
||||
"sku-selector",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"html#buy-button",
|
||||
"shipping-simulator"
|
||||
|
@ -21,6 +21,11 @@
|
||||
margin-top: 24px;
|
||||
width: 375px;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.flexRowContent--message-availability {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
font-size: 50px;
|
||||
@ -43,6 +48,12 @@
|
||||
height: 49px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
|
||||
margin: 0 0 16px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
|
||||
font-size: 0;
|
||||
}
|
||||
@ -51,6 +62,6 @@
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
padding: 12px 0;
|
||||
padding: 12px 64px;
|
||||
line-height: 22px;
|
||||
}
|
@ -15,6 +15,12 @@
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.product-identifier--productReference {
|
||||
justify-content: start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.product-identifier--productReference .product-identifier__label {
|
||||
display: none;
|
||||
}
|
||||
|
@ -15,18 +15,34 @@
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
color: #929292;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.installments .installmentsNumber {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.installments .installmentsNumber::after {
|
||||
content: "x ";
|
||||
}
|
||||
.installments .installmentValue {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.installments .installmentValue::before {
|
||||
content: "de ";
|
||||
margin-left: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.installments .installmentValue::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
@ -14,6 +14,11 @@
|
||||
width: 149px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.quantitySelectorContainer {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
@ -16,8 +16,8 @@
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
/*PRODUTO INDISPONIVEL, TEXTOS */
|
||||
/* FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
/* BUSCA DE CEP */
|
||||
/* TRANSPORTADORAS */
|
||||
}
|
||||
.container .productNameContainer--quickview {
|
||||
text-align: end;
|
||||
@ -26,6 +26,11 @@
|
||||
line-height: 34px;
|
||||
color: #575757;
|
||||
}
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .productNameContainer--quickview {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
.container .skuSelectorContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
@ -106,6 +111,8 @@
|
||||
}
|
||||
.container .subscriberContainer {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
/* FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
}
|
||||
.container .subscriberContainer .title {
|
||||
font-size: 0;
|
||||
@ -128,30 +135,41 @@
|
||||
line-height: 19px;
|
||||
color: #868686;
|
||||
}
|
||||
.container .form {
|
||||
.container .subscriberContainer .form {
|
||||
position: relative;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
width: 374.65px;
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
width: 182.46px;
|
||||
margin-right: 10.08px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
position: absolute;
|
||||
left: 51%;
|
||||
top: 0%;
|
||||
@ -160,21 +178,28 @@
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
|
||||
width: -webkit-fill-available;
|
||||
margin: 0 0 0 8px;
|
||||
left: 49%;
|
||||
}
|
||||
}
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid #929292;
|
||||
border-radius: 0;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
|
||||
padding: 0 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #929292;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .submit {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
background-color: #000000;
|
||||
@ -185,7 +210,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
|
||||
content: "AVISE-ME";
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
@ -193,17 +218,28 @@
|
||||
line-height: 25px;
|
||||
font-family: "Open sans", sans-serif;
|
||||
}
|
||||
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
|
||||
.container .subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
|
||||
padding: 0;
|
||||
}
|
||||
.container .shippingContainer {
|
||||
display: flex;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
}
|
||||
@ -219,6 +255,11 @@
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
margin-top: 25px;
|
||||
@ -229,6 +270,13 @@
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||
color: #000000;
|
||||
}
|
||||
@ -245,6 +293,13 @@
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingContainer :global(.vtex-button) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
.container .shippingContainer :global(.vtex-button)::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
@ -255,6 +310,95 @@
|
||||
.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
|
||||
height: fit-content;
|
||||
}
|
||||
.container .shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #202020;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
}
|
||||
.container .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.productImage {
|
||||
width: max-content;
|
||||
|
@ -14,6 +14,9 @@
|
||||
.flexRowContent--message-availability {
|
||||
margin-top: 24px;
|
||||
width: 375px;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sellingPriceValue {
|
||||
@ -34,6 +37,10 @@
|
||||
border: none;
|
||||
height: 49px;
|
||||
margin-top: 8px;
|
||||
@include mq(sm, max) {
|
||||
margin: 0 0 16px;
|
||||
height: auto;
|
||||
}
|
||||
:global(.vtex-button__label) {
|
||||
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
|
||||
font-size: 0;
|
||||
@ -42,7 +49,7 @@
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
padding: 12px 0;
|
||||
padding: 12px 64px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,10 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: rgba(146, 146, 146, 0.48);
|
||||
@include mq(md, max) {
|
||||
justify-content: start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.product-identifier__label {
|
||||
display: none;
|
||||
|
@ -6,18 +6,35 @@
|
||||
}
|
||||
|
||||
.installments {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
color: $color-gray-6;
|
||||
margin-bottom: 8px;
|
||||
.installmentsNumber {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
&::after {
|
||||
content: "x ";
|
||||
}
|
||||
}
|
||||
.installmentValue {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
&::before {
|
||||
content: "de ";
|
||||
margin-left: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
&::after {
|
||||
content: " sem juros";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,9 @@
|
||||
margin-bottom: 16px;
|
||||
width: 149px;
|
||||
margin-right: 10px;
|
||||
@include mq(sm, max) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
@ -10,6 +10,9 @@
|
||||
font-size: 20px;
|
||||
line-height: 34px;
|
||||
color: $color-gray-7;
|
||||
@include mq(md, max) {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
|
||||
@ -121,6 +124,7 @@
|
||||
/*PRODUTO INDISPONIVEL, TEXTOS */
|
||||
.subscriberContainer {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
.title {
|
||||
font-size: 0;
|
||||
margin-bottom: 0;
|
||||
@ -144,8 +148,6 @@
|
||||
color: $color-gray-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* FORMULARIO DE PRODUTO INDISPONIVEL */
|
||||
.form {
|
||||
position: relative;
|
||||
@ -153,10 +155,18 @@
|
||||
width: 374.65px;
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.inputName {
|
||||
width: 182.46px;
|
||||
margin-right: 10.08px;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
border-radius: 0;
|
||||
@ -176,6 +186,11 @@
|
||||
width: 182.46px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px;
|
||||
@include mq(md, max) {
|
||||
width: -webkit-fill-available;
|
||||
margin: 0 0 0 8px;
|
||||
left: 49%;
|
||||
}
|
||||
|
||||
:global(.vtex-input-prefix__group) {
|
||||
border: 0.6px solid $color-gray-6;
|
||||
@ -217,14 +232,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BUSCA DE CEP */
|
||||
.shippingContainer {
|
||||
display: flex;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
:global(.vtex-address-form__postalCode) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
}
|
||||
:global(.vtex-input__label) {
|
||||
font-size: 0;
|
||||
&::before {
|
||||
@ -239,6 +262,9 @@
|
||||
width: 280px;
|
||||
height: 49px;
|
||||
border-radius: 0;
|
||||
@include mq(sm, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||
padding: 0;
|
||||
@ -249,6 +275,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
@include mq(sm, max) {
|
||||
left: 0;
|
||||
margin-top: 8px;
|
||||
text-align: end;
|
||||
}
|
||||
:last-child {
|
||||
color: $color-black-padrao;
|
||||
}
|
||||
@ -266,6 +297,12 @@
|
||||
font-size: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(sm, max) {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
&::before {
|
||||
content: "OK";
|
||||
font-weight: 600;
|
||||
@ -278,6 +315,100 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TRANSPORTADORAS */
|
||||
.shippingTable {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 15px 0;
|
||||
.shippingTableHead {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 15px;
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableHeadDeliveryName {
|
||||
margin-right: 39px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
.shippingTableHeadDeliveryPrice {
|
||||
font-size: 0;
|
||||
margin-right: 30px;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 32px;
|
||||
}
|
||||
&::before {
|
||||
content: "Frete";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-black2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableBody {
|
||||
.shippingTableRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.shippingTableCellDeliveryName {
|
||||
width: 82px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
@include mq(sm, max) {
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryEstimate {
|
||||
display: flex;
|
||||
order: 1;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
|
||||
.shippingTableCellDeliveryPrice {
|
||||
width: 50px;
|
||||
margin-right: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-gray-10;
|
||||
}
|
||||
.shippingTableCell {
|
||||
padding: 0 0 15px;
|
||||
.shippingTableLabel {
|
||||
.shippingTableRadioBtn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productImage {
|
||||
|
@ -1,5 +1,6 @@
|
||||
$color-black: #292929;
|
||||
$color-black-padrao: #000000;
|
||||
$color-black2: #202020;
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
@ -11,6 +12,7 @@ $color-gray-6: #929292;
|
||||
$color-gray-7: #575757;
|
||||
$color-gray-8: #989898;
|
||||
$color-gray-9: #868686;
|
||||
$color-gray-10: #afafaf;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
|
||||
@ -20,10 +22,10 @@ $color-green: #4caf50;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
sm: 768px,
|
||||
md: 1024px,
|
||||
lg: 1920px,
|
||||
xl: 1921px,
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
Loading…
Reference in New Issue
Block a user