development #19

Merged
emmanuelvitor merged 2 commits from development into master 2023-02-11 02:09:02 +00:00
19 changed files with 371 additions and 242 deletions
Showing only changes of commit a8eb721762 - Show all commits

View File

@ -3,8 +3,6 @@
column-gap: 10px;
}
/* Tablet */
@media (max-width: 1024px) {
[class*="html--container__buyButton"] {
@ -25,7 +23,8 @@
border: none;
border-radius: 0;
width: 100%;
height: 49px;
height: auto;
min-height: 49px;
max-width: 526px;
/* aqui é até 1440 */
}
@ -35,6 +34,12 @@
min-width: 766px;
}
}
@media (max-width: 768px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
max-height: 72px;
padding: 12px 64px ;
}
}
@media (min-width: 490px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
@ -42,12 +47,6 @@
}
}
@media (min-width: 1023px) and (max-width: 1025px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
min-width: 806px;
}
}
@media (max-width: 1440px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
max-width: 806px;
@ -75,17 +74,23 @@
}
}
@media (min-width: 490px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
max-width: none;
max-width: none;
}
[class*="html--quantity"] {
max-width: 128px!important;
height: 49px;
margin-bottom: 16px
}
@media (max-width: 767px) {
[class*="html--quantity"] {
margin-bottom: 10px
}
}
[class*="html--m3-add-to-cart-button "]{
width: 100%; }
/* Area do product sumary */
/* @media (min-width:374px) and (max-width:376px) {
[class*="html--m3-html-product-sumary"] {
height: 254.8px!important;
}} */
@media (max-width:1920px) {
[class*="html--m3-html-product-sumary"] {
height: unset;
@ -100,12 +105,12 @@ max-width:314.4px;
max-width: 291.2px;
}}
[class*="html--quantity"] {
max-width: 128px!important;
}
[class*="html--m3-html-product-sumary"]{
display: flex;
flex-direction: column;
}
[class*="html--m3-add-to-cart-button "]{
width: 100%; }
@media (min-width: 1920px) {
[class*="html--m3-product-summary-list"] {
padding: 0 360px;
}
}

View File

@ -23,17 +23,13 @@
"text": "Apparel & Accessories"
}
},
"blocks": [
"vtex.menu@2.x:submenu#category-apparel"
]
"blocks": ["vtex.menu@2.x:submenu#category-apparel"]
},
"vtex.menu@2.x:submenu#category-apparel": {
"props": {
"width": "auto"
},
"children": [
"vtex.menu@2.x:menu#category-apparel"
]
"children": ["vtex.menu@2.x:menu#category-apparel"]
},
"vtex.menu@2.x:menu#category-apparel": {
"props": {
@ -119,42 +115,28 @@
"text": "More"
}
},
"blocks": [
"vtex.menu@2.x:submenu#more"
]
"blocks": ["vtex.menu@2.x:submenu#more"]
},
"vtex.menu@2.x:submenu#more": {
"props": {
"width": "100%"
},
"children": [
"flex-layout.row#menu-more"
]
"children": ["flex-layout.row#menu-more"]
},
"flex-layout.row#menu-more": {
"children": [
"flex-layout.col#menu-more-1",
"flex-layout.col#menu-more-2"
]
"children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"]
},
"flex-layout.col#menu-more-1": {
"children": [
"vtex.menu@2.x:menu#more"
]
"children": ["vtex.menu@2.x:menu#more"]
},
"flex-layout.col#menu-more-2": {
"children": [
"info-card#home"
]
"children": ["info-card#home"]
},
"vtex.menu@2.x:menu#more": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#about-us",
"menu-item#faq"
]
"children": ["menu-item#about-us", "menu-item#faq"]
},
"menu-item#about-us": {
"props": {

View File

@ -19,7 +19,7 @@
"fullWidth": true
}
},
"flex-layout.row#3-desktop": {
"props": {
"blockClass": "menu-link",
@ -80,9 +80,9 @@
"props": {
"title": "Logo",
"href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
"width": "180",
"height": "12"
"url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
"width": "140",
"height": "33"
}
},
"header-layout.mobile": {
@ -125,9 +125,9 @@
"props": {
"title": "Logo",
"href": "/",
"url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
"width": "77.5",
"height": "27.5"
"url": "https://agenciamagma.vtexassets.com/arquivos/Logo-emmanuel.svg",
"width": "140",
"height": "33"
}
}
}

View File

@ -32,6 +32,7 @@
},
"html#slider-layout": {
"props": {
"blockClass": "m3-product-summary-list",
"testId": "product-summary-list"
},
"children": ["slider-layout#m3-carousel-products"]

View File

@ -10,6 +10,11 @@
.container {
padding: 16px 40px;
}
@media (min-width: 1920px) {
.container {
padding: 16px 360px;
}
}
.container .homeIcon {
display: none;
}

View File

@ -12,6 +12,11 @@
margin: 0;
column-gap: 32px;
}
@media (min-width: 1920px) {
.flexRowContent--product-main {
padding: 0 360px;
}
}
@media (max-width: 1024px) {
.flexRowContent--product-main {
flex-direction: column;
@ -23,6 +28,11 @@
padding: 0;
border-radius: 0;
}
@media (min-width: 1920px) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.flexRowContent--product-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
@ -41,6 +51,11 @@
margin: 0;
gap: 32px;
}
@media (min-width: 1920px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
padding: 0 360px;
}
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel {
flex-direction: column;
@ -52,6 +67,11 @@
padding: 0;
border-radius: 0;
}
@media (min-width: 1920px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
max-width: 904px;
}
}
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
width: 100% !important;
@ -69,6 +89,7 @@
@media (max-width: 1024px) {
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-store-components-3-x-productNameContainer--quickview) {
max-width: none;
text-align: initial;
}
}
.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability {
@ -113,7 +134,7 @@
}
@media (min-width: 1920px) {
.flexRowContent--description .stretchChildrenWidth {
width: unset !important;
width: 100% !important;
}
}
@media (max-width: 1024px) {

View File

@ -19,7 +19,8 @@
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button),
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
border: none;
background-color: #fff;
background-color: #ffffff;
color: #000000;
}
.quantitySelectorContainer--quantity__wrapper {

View File

@ -20,7 +20,7 @@
}
:global(.vtex-product-summary-2-x-nameContainer) {
background-color: white;
background-color: #ffffff;
width: 100%;
padding: 0;
padding-top: 16px;

View File

@ -7,20 +7,23 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@media (min-width: 2000px) {
@media (max-width: 590px) {
.sliderLayoutContainer--m3-carousel-products {
max-width: 1920px;
margin: 0 auto;
padding: 0 40px;
min-width: 296px;
}
}
.sliderTrackContainer--m3-carousel-products {
max-width: 94.712%;
margin: 0 40px;
width: 100%;
padding: 0 40px;
}
@media (max-width: 590px) {
.sliderTrackContainer--m3-carousel-products {
max-width: 78.9333333333%;
min-width: 296px;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
}

View File

@ -113,6 +113,7 @@
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
:global(.vtex-store-components-3-x-container) .productNameContainer--quickview {
text-align: end;
@ -124,17 +125,19 @@
}
}
.productImagesGallerySlide {
width: 100% !important;
}
.shippingContainer {
display: flex;
flex-direction: row;
position: relative;
width: 100%;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
width: 100%;
flex-direction: column;
}
@ -142,6 +145,7 @@
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
left: 312px;
top: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
@ -152,12 +156,7 @@
text-decoration-line: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000;
}
@media (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: initial;
}
color: #000000;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
@ -165,6 +164,7 @@
right: 0;
bottom: 0;
left: auto;
top: auto;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
@ -193,7 +193,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #afafaf;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-button) {
background: none;
@ -201,7 +201,8 @@
width: 49px;
height: 49px;
border-radius: 0;
background-color: #000;
background-color: #000000;
cursor: pointer;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
@ -298,7 +299,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #afafaf;
color: #AFAFAF;
padding: 0;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
@ -338,7 +339,7 @@
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
color: #afafaf;
}
.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) {
font-size: 0;
@ -353,7 +354,7 @@
/* or 136% */
display: flex;
align-items: center;
color: #868686;
color: #afafaf;
}
.subscriberContainer .form {
width: 100%;
@ -428,7 +429,7 @@
height: 49px;
border: none;
border-radius: 0;
background: #000;
background: #000000;
}
.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
@ -493,29 +494,80 @@
}
.productDescriptionContainer .content {
text-align: justify;
max-width: 632px;
}
@media (max-width: 1024px) {
.productDescriptionContainer .content {
max-width: none;
}
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
max-width: 632px;
color: #6c6c6c;
}
@media (min-width: 1920px) {
.productDescriptionContainer .content {
.productDescriptionContainer .productDescriptionText {
max-width: 872px !important;
font-size: 18px;
line-height: 25px;
}
}
@media (max-width: 1024px) {
.productDescriptionContainer .content {
.productDescriptionContainer .productDescriptionText {
font-size: 14px;
line-height: 19px;
max-width: none;
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
}
}
.skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
margin-left: 16px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
.skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: #000000;
border: 1px solid #989898;
}
.skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorOptionsList {
margin: 0;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -527,7 +579,7 @@
border-radius: 30px;
z-index: 3;
padding: 0;
border-color: #000;
border-color: #000000;
top: 0;
left: 0;
}
@ -542,6 +594,7 @@
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0 !important;
gap: 16px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
margin: 0;
@ -560,6 +613,22 @@
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
@ -612,11 +681,12 @@
border: 1px solid #989898;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
@ -629,6 +699,14 @@
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
color: #000000;
}

View File

@ -13,12 +13,12 @@
}
@media (min-width: 1920px) {
.container--tab-product {
max-width: 1840px;
padding: 0 360px;
}
}
.container--tab-product .listContainer--m3-tab-list-product {
justify-content: space-around;
border-bottom: 1px solid #B9B9B9;
border-bottom: 1px solid #989898;
margin-bottom: 32px;
}
@media (max-width: 1024px) {

View File

@ -1,6 +1,10 @@
.container {
padding: 16px 40px;
@media (min-width:1920px) {
padding: 16px 360px;
}
.homeIcon {
display: none;
}

View File

@ -4,6 +4,11 @@
margin: 0;
column-gap: 32px;
@media (min-width:1920px) {
padding: 0 360px;
}
@media (max-width:1024px) {
flex-direction: column;
}
@ -14,6 +19,10 @@
padding: 0;
border-radius: 0;
@media (min-width:1920px) {
max-width: 904px;
}
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
@ -21,6 +30,7 @@
}
}
// FIM PRODUCT
// INICIO INDISPONIVEL
@ -37,18 +47,24 @@
margin: 0;
gap: 32px;
@media (min-width:1920px) {
padding: 0 360px;
}
@media (max-width:1024px) {
// padding: 0 40px;
flex-direction: column;
}
// padding: 0 40px;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
min-width: 296px;
max-width: 664px;
padding: 0;
border-radius: 0;
@media (min-width:1920px) {
max-width: 904px;
}
@media (max-width:1024px) {
width: 100% !important;
max-width: 944px;
@ -60,18 +76,15 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
// max-width: 90%;
text-align: end;
@media (max-width:1024px) {
max-width: none;
text-align: initial;
}
}
@media (max-width:1024px) {
// width: 100% !important;
// max-width: none;
}
@media (max-width:1024px) {}
.flexColChild--info-availability {
height: 68px;
@ -130,7 +143,7 @@
@media (min-width:1920px) {
.stretchChildrenWidth {
width: unset !important;
width: 100% !important;
}
}

View File

@ -1,5 +1,5 @@
.quantitySelectorStepper {
border: 1px solid #989898;
border: 1px solid $color-gray10;
max-width: 128px;
padding: 3.5px 0;
@ -15,7 +15,8 @@
:global(.vtex-numeric-stepper__plus-button),
:global(.vtex-numeric-stepper__minus-button) {
border: none;
background-color: #fff;
background-color: $color-white;
color: $color-black;
}
}
}

View File

@ -12,7 +12,7 @@
}
:global(.vtex-product-summary-2-x-nameContainer) {
background-color: white;
background-color: $color-white;
width: 100%;
padding: 0;
padding-top: 16px;

View File

@ -1,21 +1,27 @@
.sliderLayoutContainer--m3-carousel-products {
@media (min-width:2000px) {
max-width: 1920px;
margin: 0 auto;
@media (max-width:590px) {
padding: 0 40px;
min-width: 296px;
}
}
.sliderTrackContainer--m3-carousel-products {
max-width: 94.712%;
// margin: 0 auto;
margin: 0 40px;
width: 100%; // margin: 0 auto;
padding: 0 40px;
@media (max-width:590px) {
max-width: 78.933333333333333333333333333333%;
min-width: 296px;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
}
// card
.slide--m3-carousel-products {
margin: 0 8px;

View File

@ -120,6 +120,7 @@
:global(.vtex-store-components-3-x-container) {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
.productNameContainer--quickview {
text-align: end;
@ -131,6 +132,9 @@
}
}
.productImagesGallerySlide {
width: 100% !important;
}
// Area de formulario do cep
.shippingContainer {
@ -140,9 +144,9 @@
width: 100%;
:global(.vtex-address-form__postalCode) {
display: flex;
@media (max-width:768px) {
display: flex;
width: 100%;
flex-direction: column;
}
@ -150,6 +154,7 @@
:global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
left: 312px;
top: 0;
font-family: $font-family;
font-style: normal;
font-weight: 400;
@ -160,18 +165,19 @@
text-decoration-line: underline;
:last-child {
color: #000;
color: $color-black;
}
@media (max-width:1024px) {
position: initial;
}
// @media (max-width:1024px) {
// position: initial;
// }
@media (max-width:768px) {
position: absolute;
right: 0;
bottom: 0;
left: auto;
top: auto;
}
:global(.vtex__icon-external-link) {
@ -185,7 +191,7 @@
}
:global(.vtex-input-prefix__group) {
border: 1px solid #cccccc;
border: 1px solid $color-gray12;
border-radius: 0;
max-width: 231px;
height: 49px;
@ -205,7 +211,7 @@
display: flex;
align-items: center;
color: #afafaf;
color: $color-gray7;
}
@ -217,7 +223,8 @@
width: 49px;
height: 49px;
border-radius: 0;
background-color: #000;
background-color: $color-black;
cursor: pointer;
:global(.vtex-button__label) {
font-size: 0;
@ -234,7 +241,7 @@
display: flex;
align-items: center;
color: #ffffff;
color: $color-white;
}
}
}
@ -267,7 +274,7 @@
line-height: 19px;
text-transform: uppercase;
/* identical to box height */
color: #202020;
color: $color-gray14;
}
.shippingTableHeadDeliveryName {
@ -299,7 +306,7 @@
text-transform: uppercase;
/* identical to box height */
color: #202020;
color: $color-gray14
}
}
}
@ -329,7 +336,7 @@
display: flex;
align-items: center;
color: #afafaf;
color: $color-gray7;
padding: 0;
}
@ -388,7 +395,7 @@
display: flex;
align-items: center;
color: #868686;
color: $color-gray13;
}
}
@ -407,7 +414,7 @@
display: flex;
align-items: center;
color: #868686;
color: $color-gray13;
}
}
@ -493,7 +500,7 @@
border: none;
border-radius: 0;
background: #000;
background: $color-black;
:global(.vtex-button__label) {
font-size: 0;
@ -510,7 +517,7 @@
display: flex;
align-items: center;
color: #ffffff;
color: $color-white;
@media (min-width:1920px) {
font-weight: 600;
@ -561,7 +568,6 @@
// FIM INDISPONIVEL
// INICIO DESCRIÇÃO
.flexRow--description {}
.productDescriptionContainer {
.productDescriptionTitle {
@ -575,13 +581,23 @@
.content {
text-align: justify;
max-width: 632px;
@media (max-width:1024px) {
max-width: none;
}
}
.productDescriptionText {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $color-gray6;
max-width: 632px;
color: $color-gray;
@media (min-width:1920px) {
@ -595,117 +611,68 @@
font-size: 14px;
line-height: 19px;
max-width: none;
// max-width: none !important;
padding-bottom: 16px;
border-bottom: 1px solid $color-gray11;
}
}
}
// SKU E TAMANHOS
// .skuSelectorContainer {
// display: flex;
// flex-direction: column-reverse;
// .skuSelectorSubcontainer--cor {
// .skuSelectorName {
// font-size: 0;
.skuSelectorSubcontainer--tamanho {
// margin-left: 16px;
.skuSelectorName {
font-size: 0;
// &::after {
// visibility: visible;
// display: block;
// content: "OUTRAS CORES:";
// font-size: 14px;
// }
// }
margin-left: 16px;
// .skuSelectorSelectorImageValue,
// .skuSelectorNameSeparator {
// display: none;
// }
&::after {
visibility: visible;
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
}
// .frameAround {
// border-radius: 30px;
// }
.frameAround {
// border: 1px solid $color-gray10;
width: 40px;
height: 40px;
border-radius: 30px;
top: 0;
left: 0;
right: 0;
}
// .skuSelectorItemImageValue,
// .skuSelectorInternalBox {
// border-radius: 21px;
// color: $color-black;
// }
// }
.skuSelectorInternalBox {
margin: auto;
padding: 0;
width: 40px;
height: 40px;
border-radius: 30px;
color: $color-black;
border: 1px solid $color-gray10;
}
// .diagonalCross {
// top: 0px;
// right: 10px;
// bottom: 0px;
// left: 10px;
// transform: rotateY(180deg);
// color: black;
// }
// .skuSelectorSubcontainer--tamanho {
// .skuSelectorName {
// font-size: 0;
// margin-left: 16px;
// &::after {
// visibility: visible;
// display: block;
// content: "OUTROS TAMANHOS:";
// font-size: 14px;
// }
// }
// .frameAround {
// // border: 1px solid #989898;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// top: 0;
// left: 0;
// right: 0;
// }
// .skuSelectorInternalBox {
// margin: auto;
// padding: 0;
// width: 40px;
// height: 40px;
// border-radius: 30px;
// color: $color-black;
// border: 1px solid #989898;
// }
// .skuSelectorItemTextValue {
// padding: 0;
// margin: auto;
// font-family: $font-family;
// font-style: normal;
// font-weight: 400;
// font-size: 14px;
// line-height: 19px;
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
// color: rgba(185, 185, 185, 0.6);
// }
// }
color: rgba(185, 185, 185, 0.6);
}
}
// .valueWrapper .skuSelectorItemTextValue {
// margin-right: 5px;
// }
// .frameAround {
// border-color: #000;
// z-index: 9;
// }
// }
.skuSelectorOptionsList {
margin: 0;
}
// .skuSelectorOptionsList {
// margin: 0;
// }
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -717,7 +684,7 @@
border-radius: 30px;
z-index: 3;
padding: 0;
border-color: #000;
border-color: $color-black;
top: 0;
left: 0;
}
@ -734,6 +701,7 @@
.skuSelectorOptionsList {
margin-left: 0 !important;
gap: 16px;
.skuSelectorItem {
margin: 0;
@ -753,7 +721,32 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
color: $color-gray6
}
}
}
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: $color-black;
}
}
}
@ -776,11 +769,13 @@
font-size: 14px;
line-height: 19px;
content: 'OUTROS TAMANHOS: ';
color: #929292;
color: $color-gray6
}
}
}
.skuSelectorOptionsList {
margin: 0;
margin-left: 0;
@ -793,7 +788,7 @@
margin: 0;
.frameAround--sku-selector {
border-color: #000000;
border-color: $color-black;
border-width: 2px;
width: 40px;
height: 40px;
@ -813,14 +808,15 @@
border-radius: 100%;
width: 40px;
height: 40px;
border: 1px solid #989898;
border: 1px solid $color-gray10;
.diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: #D5D5D5;
}
@ -841,9 +837,20 @@
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.diagonalCross {
top: 2px;
right: 10px;
bottom: 2px;
left: 10px;
transform: rotateY(180deg);
color: $color-black;
}
.skuSelectorItemTextValue {
color: #000000;
color: $color-black;
}
}
}

View File

@ -1,20 +1,18 @@
.container--tab-product {
width: 100%;
// max-width: 94.44%;
// margin: 0 auto;
padding: 0 40px;
@media (min-width:1920px) {
max-width: 1840px;
@media (min-width:1920px) {
padding: 0 360px;
}
.listContainer--m3-tab-list-product {
justify-content: space-around;
border-bottom: 1px solid #B9B9B9;
border-bottom: 1px solid $color-gray10;
margin-bottom: 32px;
@media (max-width:1024px) {
@ -67,7 +65,7 @@
:global(.vtex-button) {
background-color: $color-white;
border: none;
border-bottom: 2px solid #000000;
border-bottom: 2px solid $color-black;
border-radius: 0;
position: relative;
top: 2px;
@ -85,7 +83,7 @@
font-size: 18px;
line-height: 38px;
color: #000000;
color: $color-black;
@media (max-width:1024px) {
padding-left: 0;

View File

@ -15,6 +15,10 @@ $color-gray7: #AFAFAF;
$color-gray8: #BFBFBF;
$color-gray9: #BABABA;
$color-gray10: #989898;
$color-gray11: #B9B9B9;
$color-gray12: #cccccc;
$color-gray13: #afafaf;
$color-gray14: #202020;
$color-blue: #4267b2;