feat: Estiliza botão de quantidade e de adicionar à sacola
This commit is contained in:
parent
892cd902e9
commit
34ca7b5142
@ -1,3 +1,3 @@
|
|||||||
import Example from "./components/Example/Example";
|
import Example from "./components/Example/ProductContext";
|
||||||
|
|
||||||
export default Example;
|
export default Example;
|
||||||
|
@ -2,7 +2,8 @@
|
|||||||
"add-to-cart-button": {
|
"add-to-cart-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"addToCartFeedback": "customEvent",
|
"addToCartFeedback": "customEvent",
|
||||||
"customPixelEventId": "add-to-cart-button"
|
"customPixelEventId": "add-to-cart-button",
|
||||||
|
"text": "ADICIONAR À SACOLA"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -32,17 +32,13 @@
|
|||||||
"props": {
|
"props": {
|
||||||
"verticalAlign": "middle"
|
"verticalAlign": "middle"
|
||||||
},
|
},
|
||||||
"children": [
|
"children": ["assembly-option-item-quantity-selector"]
|
||||||
"assembly-option-item-quantity-selector"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"flex-layout.col#product-assembly-image": {
|
"flex-layout.col#product-assembly-image": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginRight": 4
|
"marginRight": 4
|
||||||
},
|
},
|
||||||
"children": [
|
"children": ["assembly-option-item-image"]
|
||||||
"assembly-option-item-image"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"flex-layout.col#product-assembly-middle": {
|
"flex-layout.col#product-assembly-middle": {
|
||||||
"props": {
|
"props": {
|
||||||
@ -96,9 +92,7 @@
|
|||||||
"horizontalAlign": "right",
|
"horizontalAlign": "right",
|
||||||
"verticalAlign": "middle"
|
"verticalAlign": "middle"
|
||||||
},
|
},
|
||||||
"children": [
|
"children": ["assembly-option-item-quantity-selector"]
|
||||||
"assembly-option-item-quantity-selector"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"assembly-option-item-customize#sec-level": {
|
"assembly-option-item-customize#sec-level": {
|
||||||
"props": {
|
"props": {
|
||||||
|
@ -106,14 +106,11 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"flex-layout.row#product-name",
|
"flex-layout.row#product-name",
|
||||||
"product-identifier.product",
|
"product-identifier.product",
|
||||||
"product-rating-summary",
|
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
"product-quantity",
|
|
||||||
"product-assembly-options",
|
|
||||||
"product-gifts",
|
|
||||||
"flex-layout.row#buy-button",
|
"flex-layout.row#buy-button",
|
||||||
|
"product-gifts",
|
||||||
"availability-subscriber",
|
"availability-subscriber",
|
||||||
"shipping-simulator"
|
"shipping-simulator"
|
||||||
]
|
]
|
||||||
@ -137,9 +134,10 @@
|
|||||||
"flex-layout.row#buy-button": {
|
"flex-layout.row#buy-button": {
|
||||||
"props": {
|
"props": {
|
||||||
"marginTop": 4,
|
"marginTop": 4,
|
||||||
"marginBottom": 7
|
"marginBottom": 7,
|
||||||
|
"blockClass": "buy-button"
|
||||||
},
|
},
|
||||||
"children": ["add-to-cart-button"]
|
"children": ["product-quantity#size", "add-to-cart-button"]
|
||||||
},
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-availability": {
|
"flex-layout.row#product-availability": {
|
||||||
@ -172,5 +170,13 @@
|
|||||||
"blockClass": "message-availability"
|
"blockClass": "message-availability"
|
||||||
},
|
},
|
||||||
"children": ["availability-subscriber"]
|
"children": ["availability-subscriber"]
|
||||||
|
},
|
||||||
|
|
||||||
|
"product-quantity#size": {
|
||||||
|
"props": {
|
||||||
|
"size": "large",
|
||||||
|
"width": "28%",
|
||||||
|
"showLabel": false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
17
styles/css/vtex.add-to-cart-button.css
Normal file
17
styles/css/vtex.add-to-cart-button.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.buttonText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
padding: 7px 0;
|
||||||
|
}
|
@ -55,7 +55,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flexRow--deals {
|
.flexRow--deals {
|
||||||
background-color: #0F3E99;
|
background-color: #0f3e99;
|
||||||
padding: 14px 0px;
|
padding: 14px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,7 +95,7 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRowContent .flexColChild--quickviewDetails:first-child {
|
.flexColChild--quickviewDetails:first-child {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 66% !important;
|
height: 66% !important;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@ -105,6 +105,18 @@
|
|||||||
height: 34% !important;
|
height: 34% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRow--addToCartRow {
|
.stretchChildrenWidth {
|
||||||
padding-bottom: 1rem;
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--buy-button {
|
||||||
|
height: 49px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--buy-button :global(.vtex-button) {
|
||||||
|
background: #000000;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
@ -19,11 +19,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
|
||||||
color: #929292;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.savings--summary {
|
.savings--summary {
|
||||||
background: #8bc34a;
|
background: #8bc34a;
|
||||||
border-radius: 1000px;
|
border-radius: 1000px;
|
||||||
@ -57,13 +52,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
.installments {
|
||||||
font-size: 16px;
|
font-size: 0;
|
||||||
line-height: 22px;
|
|
||||||
color: #929292;
|
|
||||||
}
|
}
|
||||||
.installments .installmentsNumber,
|
.installments .installmentsNumber,
|
||||||
.installments .installmentValue {
|
.installments .installmentValue {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #929292;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.installments .installmentsNumber {
|
||||||
|
font-size: 0 !important;
|
||||||
|
}
|
||||||
|
.installments .installmentsNumber::before {
|
||||||
|
content: "36 x";
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.installments .installmentsNumber::after {
|
||||||
|
content: " de ";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.installments .installmentValue::after {
|
||||||
|
content: " sem juros";
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.savings--summaryPercentage {
|
.savings--summaryPercentage {
|
||||||
|
@ -7,6 +7,39 @@
|
|||||||
*/
|
*/
|
||||||
/* Media Query M3 */
|
/* Media Query M3 */
|
||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
.quantitySelectorTitle {
|
:global(.vtex-numeric-stepper__minus-button),
|
||||||
display: none;
|
:global(.vtex-numeric-stepper__plus-button) {
|
||||||
|
background-color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #000000;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__minus-button) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-left: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__plus-button) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-right: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-color: #cccccc;
|
||||||
|
color: #929292;
|
||||||
|
outline: 0;
|
||||||
}
|
}
|
@ -74,6 +74,16 @@
|
|||||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
|
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
}
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
|
||||||
|
color: #d5d5d5;
|
||||||
|
top: 5px;
|
||||||
|
left: 6px;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
|
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
@ -82,7 +92,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
color: gray;
|
color: #929292;
|
||||||
}
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
|
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
|
||||||
display: none;
|
display: none;
|
||||||
@ -103,6 +113,9 @@
|
|||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
|
||||||
|
border-color: #989898;
|
||||||
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
|
||||||
border-color: #000000;
|
border-color: #000000;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
@ -112,12 +125,14 @@
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
|
||||||
|
color: #d5d5d5;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 6px;
|
left: 6px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: 29px;
|
width: 28px;
|
||||||
height: 29px;
|
height: 28px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
}
|
}
|
||||||
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
|
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -139,4 +154,54 @@
|
|||||||
|
|
||||||
.skuSelectorItemTextValue {
|
.skuSelectorItemTextValue {
|
||||||
color: rgba(185, 185, 185, 0.6);
|
color: rgba(185, 185, 185, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuSelectorItem {
|
||||||
|
margin: 0 16px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingContainer {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
|
||||||
|
content: "CALCULAR FRETE:";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-button) {
|
||||||
|
font-size: 0;
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
right: 148px;
|
||||||
|
width: 49px;
|
||||||
|
height: 49px;
|
||||||
|
margin-top: 27px;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-button)::after {
|
||||||
|
content: "OK";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
|
||||||
|
position: relative;
|
||||||
|
left: 32px;
|
||||||
|
}
|
||||||
|
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
height: fit-content;
|
||||||
}
|
}
|
8
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
8
styles/sass/pages/product/vtex.add-to-cart-button.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.buttonText {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: $white;
|
||||||
|
padding: 7px 0;
|
||||||
|
}
|
@ -32,7 +32,6 @@
|
|||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
|
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -49,7 +48,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flexRow--deals {
|
.flexRow--deals {
|
||||||
background-color: #0F3E99;
|
background-color: #0f3e99;
|
||||||
padding: 14px 0px;
|
padding: 14px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -89,13 +88,6 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// .flexColChild:first-child {
|
|
||||||
// display: flex;
|
|
||||||
// align-self: flex-end;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.flexRowContent
|
|
||||||
|
|
||||||
.flexColChild--quickviewDetails:first-child {
|
.flexColChild--quickviewDetails:first-child {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 66% !important;
|
height: 66% !important;
|
||||||
@ -106,6 +98,27 @@
|
|||||||
height: 34% !important;
|
height: 34% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexRow--addToCartRow {
|
.stretchChildrenWidth {
|
||||||
padding-bottom: 1rem;
|
margin: 0;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .input-button {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.flexRowContent--buy-button {
|
||||||
|
height: 49px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexRowContent--buy-button :global(.vtex-button) {
|
||||||
|
background: $black;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
@ -17,10 +17,10 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
// .installments {
|
||||||
color: $gray-500;
|
// color: $gray-500;
|
||||||
margin-bottom: 16px;
|
// margin-bottom: 16px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// .sellingPriceValue--summary {
|
// .sellingPriceValue--summary {
|
||||||
// font-size: 1.25rem;
|
// font-size: 1.25rem;
|
||||||
@ -62,13 +62,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.installments {
|
.installments {
|
||||||
font-size: 16px;
|
font-size: 0;
|
||||||
line-height: 22px;
|
|
||||||
color: $gray-500;
|
|
||||||
|
|
||||||
.installmentsNumber,
|
.installmentsNumber,
|
||||||
.installmentValue {
|
.installmentValue {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: $gray-500;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.installmentsNumber {
|
||||||
|
font-size: 0 !important;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "36 x";
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: " de ";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.installmentValue {
|
||||||
|
&::after {
|
||||||
|
content: " sem juros";
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,3 +1,36 @@
|
|||||||
.quantitySelectorTitle {
|
:global(.vtex-numeric-stepper__minus-button),
|
||||||
display: none;
|
:global(.vtex-numeric-stepper__plus-button) {
|
||||||
|
background-color: $white;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: $black;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__minus-button) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-left: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $gray-1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__plus-button) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-right: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $gray-1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-numeric-stepper__input) {
|
||||||
|
border-top: 1px;
|
||||||
|
border-bottom: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-right: none;
|
||||||
|
border-left: none;
|
||||||
|
border-color: $gray-1000;
|
||||||
|
color: $gray-500;
|
||||||
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
@ -11,18 +11,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .stretchChildrenWidth {
|
|
||||||
// width: 664px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .stackItem--product {
|
|
||||||
// width: 664px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .productImagesGallerySlide {
|
|
||||||
// width: 664px !important;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.productNameContainer--quickview {
|
.productNameContainer--quickview {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -72,12 +60,29 @@
|
|||||||
.skuSelectorItemImageValue,
|
.skuSelectorItemImageValue,
|
||||||
.skuSelectorInternalBox {
|
.skuSelectorInternalBox {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
// width: 48px;
|
||||||
|
// height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// .skuSelectorInternalBox {
|
||||||
|
// border-color: $gray-800;
|
||||||
|
// }
|
||||||
|
|
||||||
.frameAround {
|
.frameAround {
|
||||||
border-color: $black;
|
border-color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.diagonalCross {
|
||||||
|
color: $gray-900;
|
||||||
|
top: 5px;
|
||||||
|
left: 6px;
|
||||||
|
bottom: 0px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
.skuSelectorTextContainer {
|
.skuSelectorTextContainer {
|
||||||
.skuSelectorName {
|
.skuSelectorName {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -87,7 +92,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
color: gray;
|
color: $gray-500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -100,7 +105,7 @@
|
|||||||
.skuSelectorSubcontainer--tamanho {
|
.skuSelectorSubcontainer--tamanho {
|
||||||
order: 1;
|
order: 1;
|
||||||
|
|
||||||
.skuSelectorItemTextValue{
|
.skuSelectorItemTextValue {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -115,6 +120,10 @@
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.skuSelectorInternalBox {
|
||||||
|
border-color: $gray-800;
|
||||||
|
}
|
||||||
|
|
||||||
.frameAround {
|
.frameAround {
|
||||||
border-color: $black;
|
border-color: $black;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
@ -125,12 +134,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.diagonalCross {
|
.diagonalCross {
|
||||||
|
color: $gray-900;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
right: 6px;
|
left: 6px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
width: 29px;
|
width: 28px;
|
||||||
height: 29px;
|
height: 28px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skuSelectorTextContainer {
|
.skuSelectorTextContainer {
|
||||||
@ -162,3 +173,60 @@
|
|||||||
.skuSelectorItemTextValue {
|
.skuSelectorItemTextValue {
|
||||||
color: rgba(185, 185, 185, 0.6);
|
color: rgba(185, 185, 185, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.skuSelectorItem {
|
||||||
|
margin: 0 16px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shippingContainer {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
:global(.vtex-address-form__postalCode) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
:global(.vtex-input__label) {
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "CALCULAR FRETE:";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button) {
|
||||||
|
font-size: 0;
|
||||||
|
position: relative;
|
||||||
|
top: -5px;
|
||||||
|
right: 148px;
|
||||||
|
width: 49px;
|
||||||
|
height: 49px;
|
||||||
|
margin-top: 27px;
|
||||||
|
background-color: $black;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "OK";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-address-form__postalCode-forgottenURL) {
|
||||||
|
position: relative;
|
||||||
|
left: 32px;
|
||||||
|
|
||||||
|
:last-child {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.vtex-button__label) {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
@ -9,6 +9,9 @@ $gray-400: #AFAFAF;
|
|||||||
$gray-500: #929292;
|
$gray-500: #929292;
|
||||||
$gray-600: #575757;
|
$gray-600: #575757;
|
||||||
$gray-700: #202020;
|
$gray-700: #202020;
|
||||||
|
$gray-800: #989898;
|
||||||
|
$gray-900: #d5d5d5;
|
||||||
|
$gray-1000: #cccccc;
|
||||||
|
|
||||||
$black: #000000;
|
$black: #000000;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user