feat(shipping-simulator): added custom placeholder component

This commit is contained in:
Henrique Santos Santana 2023-02-09 08:07:31 -03:00
parent 469955d63c
commit 9847452543
22 changed files with 345 additions and 126 deletions

View File

@ -4,37 +4,48 @@ import { useCssHandles } from "vtex.css-handles";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
children?: ReactNode,
children?: ReactNode;
/**
* Qual tag Html que deseja que seja usar
*
* @default div
*/
tag?: keyof React.ReactHTML
tag?: keyof React.ReactHTML;
/**
* Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/)
*/
tachyonsClasses?: string
tachyonsClasses?: string;
/**
* Se caso quiser usar esse componente
* para adicinar um texto simples
*/
text?: string
text?: string;
/**
* Tag ID para
*/
testId?: string
}
testId?: string;
};
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
export const Html = ({
children = null,
tag = "div",
text = "",
tachyonsClasses: classes = "",
testId,
}: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES);
const props = {
className: `${handles.html} ${classes}`,
"data-testid": testId
"data-testid": testId,
};
const Children = <>{children}{text}</>;
const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children);
return <>{Element}</>;

View File

@ -1,3 +1,20 @@
export const calculationPercent = (
percent: number | undefined,
value: number | undefined
) => {
if (value && percent) {
const newPercent = percent / 100;
const discount = value * newPercent;
const newValue = value - discount;
return newValue.toFixed(2).toString().replace(".", ",");
}
return "";
};
export const sanatizeColor = (color: string) => {
if (color) {
const [first] = color.split(" ");

View File

@ -3,57 +3,38 @@ import React from "react";
import styles from "./_PixCustomInstallments.module.css";
import { useProduct } from "vtex.product-context";
import { sanatizeColor } from "./_ComponentsFunctions";
import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions";
interface IPixCustomInstallmentsProps {
label: string;
percent: number;
color: string;
}
export function PixCustomInstallments({
label = "de desconto",
percent = 10,
color = "c-on-base",
}: IPixCustomInstallmentsProps) {
const data = useProduct();
const calculationPercent = (
percent: number | undefined,
value: number | undefined
) => {
if (value && percent) {
const newPercent = percent / 100;
const discount = value * newPercent;
const newValue = value - discount;
return newValue.toFixed(2).toString().replace(".", ",");
}
return "";
};
console.log(data);
return (
<div className={`${styles["pix"]} flex`}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
alt="Promoção de pagamento com o PIX"
/>
<p>
<span className={styles["pix__priceValue"]}>
<div>
<p className={styles["pix__priceValue"]}>
{`R$ ${calculationPercent(
percent,
data?.product?.priceRange.sellingPrice.highPrice
)}`}
</span>
<div
className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
>
{`${percent}% ${label}`}
</div>
</p>
<p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
{`${percent}% ${label}`}
</p>
</div>
</div>
);
}
@ -68,5 +49,9 @@ PixCustomInstallments.schema = {
percent: {
type: "number",
},
color: {
type: "string",
},
},
};

View File

@ -0,0 +1,53 @@
import React, { useEffect } from "react";
interface IPlaceholderProps {
text: string;
}
export function Placeholder({ text = "Digite seu CEP" }: IPlaceholderProps) {
function waitForElm(selector: any) {
return new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
resolve(document.querySelector(selector));
observer.disconnect();
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
}
async function ShippingSimulatorPlaceholder(): Promise<void> {
const shippingSimulatorInput = (await waitForElm(
".vtex-store-components-3-x-shippingContainer .vtex-address-form-4-x-input"
)) as any;
if (shippingSimulatorInput !== null || shippingSimulatorInput) {
shippingSimulatorInput.placeholder = text;
}
}
useEffect(() => {
ShippingSimulatorPlaceholder();
}, []);
return <></>;
}
Placeholder.schema = {
title: "Placeholder do shipping-simulation",
type: "object",
properties: {
text: {
type: "string",
},
},
};

View File

@ -0,0 +1 @@
export { Placeholder } from "./_Placeholder";

View File

@ -24,11 +24,11 @@
"@vtex/tsconfig": "^0.4.4",
"graphql": "^14.6.0",
"typescript": "3.9.7",
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
}
}

1
react/placeholder.ts Normal file
View File

@ -0,0 +1 @@
export {Placeholder as default} from "./components/Placeholder"

View File

@ -1,30 +1,30 @@
Arguments:
C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
/home/usuario/.nvm/versions/node/v18.12.1/bin/node /usr/bin/yarn add @types/m3-utils
PATH:
C:\Program Files\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Users\victo\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\vtex\bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Python27;C:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin;C:\Program Files\Oracle\VirtualBox;C:\Users\victo\Documents\flutter\bin;C:\Program Files\Android\Android Studio\bin;C:\Users\victo\AppData\Local\Programs\Python\Python310\Scripts\;C:\Users\victo\AppData\Local\Programs\Python\Python310\;C:\Users\victo\AppData\Local\Microsoft\WindowsApps;C:\Users\victo\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin;C:\Users\victo\AppData\Local\Programs\Hyper\resources\bin
/home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/.nvm/versions/node/v18.12.1/bin:/home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/bin:/home/usuario/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
Yarn version:
1.22.17
1.22.19
Node version:
14.18.1
18.12.1
Platform:
win32 x64
linux x64
Trace:
Error: http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context: Request failed "500 Internal Server Error"
at ResponseError.ExtendableBuiltin (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:696:66)
at new ResponseError (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:802:124)
at Request.<anonymous> (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:67099:16)
at Request.emit (events.js:400:28)
at Request.module.exports.Request.onRequestResponse (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:141760:10)
at ClientRequest.emit (events.js:400:28)
at HTTPParser.parserOnIncomingClient (_http_client.js:647:27)
at HTTPParser.parserOnHeadersComplete (_http_common.js:127:17)
at Socket.socketOnData (_http_client.js:515:22)
at Socket.emit (events.js:400:28)
Error: https://registry.yarnpkg.com/@types%2fm3-utils: Not found
at params.callback [as _callback] (/usr/lib/node_modules/yarn/lib/cli.js:66145:18)
at self.callback (/usr/lib/node_modules/yarn/lib/cli.js:140890:22)
at Request.emit (node:events:513:28)
at Request.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141862:10)
at Request.emit (node:events:513:28)
at IncomingMessage.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141784:12)
at Object.onceWrapper (node:events:627:28)
at IncomingMessage.emit (node:events:525:35)
at endReadableNT (node:internal/streams/readable:1359:12)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm manifest:
{
@ -34,6 +34,7 @@ npm manifest:
"dependencies": {
"apollo-client": "^2.6.8",
"jquery": "^3.6.0",
"m3-utils": "^0.1.0",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-dom": "^16.12.0",
@ -53,11 +54,12 @@ npm manifest:
"@vtex/tsconfig": "^0.4.4",
"graphql": "^14.6.0",
"typescript": "3.9.7",
"vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
"vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
"vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
"vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
"vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context"
"vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
}
}
@ -631,6 +633,11 @@ Lockfile:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
m3-utils@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8"
integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ==
memoize-one@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@ -841,6 +848,14 @@ Lockfile:
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
"vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
version "1.0.0"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
"vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
version "0.10.0"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime":
version "8.130.0"
resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98"

View File

@ -38,7 +38,7 @@
"itemsPerPage": {
"desktop": 4,
"(min-width:1025px)": 4,
"(min-width:768px)": 3,
"(min-width:769px)": 3,
"tablet": 2,
"phone": 2
},
@ -85,7 +85,7 @@
"(min-width: 1921px)": "434.4px",
"desktop": "314.4px",
"(min-width:1025px)": "314.4px",
"(min-width:768px)": "291.2px",
"(min-width:769px)": "291.2px",
"tablet": "291.2px",
"phone": "124.8px"
},
@ -93,7 +93,7 @@
"(min-width: 1921px)": "434.4px",
"desktop": "314.4px",
"(min-width:1025px)": "314.4px",
"(min-width:768px)": "291.2px",
"(min-width:769px)": "291.2px",
"tablet": "291.2px",
"phone": "124.8px"
}

View File

@ -162,7 +162,8 @@
"product-images#product-specification": {
"props": {
"aspectRatio": "1:1",
"displayMode": "first-image"
"displayMode": "first-image",
"zoomMode": "disabled"
}
},

View File

@ -5,12 +5,19 @@
"condition-layout.product#availability",
"flex-layout.row#product-specifications",
"html#pdp-slider-shelf-title",
"html#list-context-pdp-shelf",
"flex-layout.row#list-context-pdp-shelf",
"flex-layout.row#newsletter",
"product-questions-and-answers"
]
},
"flex-layout.row#list-context-pdp-shelf": {
"props": {
"blockClass": "productShelf"
},
"children": ["html#list-context-pdp-shelf"]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -105,7 +112,14 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": {
"(min-width:1921px)": "49.130434783%",
"(min-width:1025px)": "48.823529412%",
"(min-width:769px)": "100%",
"desktop": "48.823529412%",
"tablet": "100%",
"phone": "100%"
},
"rowGap": 0
}
},
@ -145,7 +159,16 @@
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
"children": [
"shipping-placeholder",
"shipping-simulator#pdp-shipping-simulator"
]
},
"shipping-simulator#pdp-shipping-simulator": {
"props": {
"placeholder": "OKOKOKOKO"
}
},
"flex-layout.row#pix-custom-installments": {

View File

@ -5,9 +5,10 @@
},
"pix-custom-installments": {
"component": "PixCustomInstallments",
"props": {
"text": "10 % de desconto"
}
"component": "PixCustomInstallments"
},
"shipping-placeholder": {
"component": "placeholder"
}
}

View File

@ -9,8 +9,9 @@
/* Grid breakpoints */
.container {
width: 100%;
display: flex;
display: inline-flex;
padding: 0 40px;
margin-top: 16px;
flex-wrap: wrap;
flex-basis: 100%;
align-items: baseline;
@ -43,10 +44,6 @@
}
.arrow--1 .link {
font-size: 0;
}
.arrow--1 .link::before {
content: "Sapatos";
font-size: 14px;
line-height: 20.12px;
}

View File

@ -108,6 +108,13 @@
.flexRow--productMain {
padding: 0 40px;
}
@media screen and (min-width: 1921px) {
.flexRow--productAvailability,
.flexRow--productMain {
width: 75%;
margin: 0 auto;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--productSpecificationItemContainer,
@ -148,6 +155,8 @@
.flexRowContent--productActions :global(.vtex-button) {
height: 72px;
line-height: 24.51px;
border: 0;
border-radius: 0;
}
@media screen and (min-width: 768px) {
.flexRowContent--productActions :global(.vtex-button) {
@ -169,6 +178,12 @@
.flexRow--productSpecifications {
padding: 0 40px;
}
@media screen and (min-width: 1921px) {
.flexRow--productSpecifications {
width: 75%;
margin: 0 auto;
}
}
@media screen and (min-width: 1025px) {
.flexRow--productSpecificationItemContainer {
@ -185,6 +200,16 @@
}
}
.flexRow--productShelf {
padding: 0 40px;
}
@media screen and (min-width: 1921px) {
.flexRow--productShelf {
width: 75%;
margin: 0 auto;
}
}
.flexRow--newsletter {
background-color: #000;
margin-top: 32px;

View File

@ -41,13 +41,24 @@
.sliderLayoutContainer--productShelf {
width: 100%;
padding: 0 40px;
}
@media screen and (min-width: 1921px) {
.sliderLayoutContainer--productShelf {
width: 68.75%;
margin: 0 auto;
.sliderArrows--productShelf {
width: 12.2px;
height: 29.6px;
padding: 0;
margin: 0;
}
.sliderArrows--productShelf .caretIcon {
display: none;
}
.sliderLeftArrow--productShelf {
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
}
.sliderRightArrow--productShelf {
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
}
.sliderTrackContainer--productShelf {

View File

@ -11,10 +11,30 @@
.container {
padding: 0;
}
@media screen and (min-width: 1025px) {
.container {
min-width: 100%;
}
}
.productImageTag {
object-fit: fill !important;
}
@media screen and (min-width: 769px) {
.productImageTag {
max-height: 944px !important;
}
}
@media screen and (min-width: 1025px) {
.productImageTag {
max-height: 664px !important;
}
}
@media screen and (min-width: 1921px) {
.productImageTag {
max-height: 904px !important;
}
}
.carouselGaleryThumbs {
display: block !important;
@ -34,6 +54,7 @@
}
.productNameContainer {
color: #575757;
line-height: 34px;
}
@media screen and (max-width: 768px) and (min-width: 375px) {
@ -67,14 +88,14 @@
height: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName::before {
content: "Outros Cores";
content: "Outros Cores:";
}
.skuSelectorSubcontainer--tamanho {
order: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::before {
content: "Outros Tamanhos";
content: "Outros Tamanhos:";
}
.skuSelectorOptionsList,
@ -176,9 +197,9 @@
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
text-align: unset;
position: absolute;
right: -50.7%;
right: -56.65%;
top: 70%;
margin-left: 16px;
margin-left: 32px;
padding: 0;
transform: translateY(-50%);
}
@ -217,6 +238,9 @@
border: 0;
margin: 0;
padding: 16px 0 0;
max-width: 326px;
width: 326px;
overflow: auto;
}
.shippingTableHead {
@ -284,6 +308,8 @@
height: 100%;
background-color: #000;
color: #fff;
border: 0;
border-radius: 0;
}
.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;

View File

@ -1,7 +1,8 @@
.container {
width: 100%;
display: flex;
display: inline-flex;
padding: 0 40px;
margin-top: 16px;
flex-wrap: wrap;
flex-basis: 100%;
align-items: baseline;
@ -37,15 +38,10 @@
.arrow--1 {
.link {
font-size: 0;
&::before {
content: "Sapatos";
font-size: 14px;
line-height: 20.12px;
}
}
}
.arrow--2 {
.link {

View File

@ -100,6 +100,11 @@
.flexRow--productAvailability,
.flexRow--productMain {
padding: 0 40px;
@media screen and (min-width: 1921px) {
width: 75%;
margin: 0 auto;
}
}
.flexRowContent--productSpecificationItemContainer,
@ -142,6 +147,8 @@
:global(.vtex-button) {
height: 72px;
line-height: 24.51px;
border: 0;
border-radius: 0;
@media screen and (min-width: 768px) {
height: 49px;
@ -165,6 +172,11 @@
.flexRow--productSpecifications {
padding: 0 40px;
@media screen and (min-width: 1921px) {
width: 75%;
margin: 0 auto;
}
}
.flexRow--productSpecificationItemContainer {
@ -181,6 +193,15 @@
}
}
.flexRow--productShelf {
padding: 0 40px;
@media screen and (min-width: 1921px) {
width: 75%;
margin: 0 auto;
}
}
.flexRow--newsletter {
background-color: #000;
margin-top: 32px;

View File

@ -32,12 +32,25 @@
.sliderLayoutContainer--productShelf {
width: 100%;
padding: 0 40px;
@media screen and (min-width: 1921px) {
width: 68.75%;
margin: 0 auto;
}
.sliderArrows--productShelf {
width: 12.2px;
height: 29.6px;
padding: 0;
margin: 0;
.caretIcon {
display: none;
}
}
.sliderLeftArrow--productShelf {
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
}
.sliderRightArrow--productShelf {
background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
}
.sliderTrackContainer--productShelf {

View File

@ -1,9 +1,25 @@
.container {
padding: 0;
@media screen and (min-width: 1025px) {
min-width: 100%;
}
}
.productImageTag {
object-fit: fill !important;
@media screen and (min-width: 769px) {
max-height: 944px !important;
}
@media screen and (min-width: 1025px) {
max-height: 664px !important;
}
@media screen and (min-width: 1921px) {
max-height: 904px !important;
}
}
.carouselGaleryThumbs {
@ -26,6 +42,7 @@
}
.productNameContainer {
color: #575757;
line-height: 34px;
@media screen and (max-width: 768px) and (min-width: 375px) {
@ -62,7 +79,7 @@
.skuSelectorName {
&::before {
content: "Outros Cores";
content: "Outros Cores:";
}
}
}
@ -72,7 +89,7 @@
.skuSelectorName {
&::before {
content: "Outros Tamanhos";
content: "Outros Tamanhos:";
}
}
}
@ -188,9 +205,9 @@
text-align: unset;
position: absolute;
right: -50.7%;
right: -56.65%;
top: 70%;
margin-left: 16px;
margin-left: 32px;
padding: 0;
transform: translateY(-50%);
}
@ -235,6 +252,9 @@
border: 0;
margin: 0;
padding: 16px 0 0;
max-width: 326px;
width: 326px;
overflow: auto;
}
.shippingTableHead {
@ -316,6 +336,8 @@
height: 100%;
background-color: #000;
color: #fff;
border: 0;
border-radius: 0;
:global(.vtex-button__label) {
font-size: 0;