anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: adicionando estilo dos seletores de SKU

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-25 21:57:59 -03:00
parent b9a3895921
commit dfdf374144
2 changed files with 345 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
styles/css/vtex.store-components.css
View File

@ -79,3 +79,168 @@
line-height: 34px;
color: #575757;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.skuSelectorTextContainer {
display: none;
}
.skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
border: 1px solid #989898;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue {
color: #000000;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList {
column-gap: 16px;
margin: 8px 0 0;
height: 48px;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected {
border-radius: 100%;
border: 2px solid #000000;
width: 48px;
height: 48px;
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .frameAround {
width: 48px;
height: 48px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
bottom: 0;
top: 0;
right: 0;
border: 2px solid #000000;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper,
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemImageValue {
border-radius: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 48px;
height: 48px;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem {
border-radius: 100%;
width: 48px;
height: 48px;
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround {
width: 48px;
height: 48px;
border-radius: 100%;
border: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 100%;
width: 48px;
height: 48px;
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
position: absolute;
width: 46.69px;
height: 0px;
left: calc(50% - 28.345px + 6.35px);
top: calc(50% + 10px - 11px);
border: 1px solid #d5d5d5;
transform: rotate(-43.26deg);
}
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper,
.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemImageValue {
border-radius: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 48px;
height: 48px;
}

180
styles/sass/pages/product/store-components/vtex.store-components.scss
View File

@ -70,3 +70,183 @@
color: #575757;
}
}
// sku selector
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
}
.skuSelectorTextContainer {
display: none;
}
.skuSelectorSubcontainer--cor::before {
content: "OUTRAS CORES:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--tamanho::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
margin-left: 0;
column-gap: 16px;
margin: 8px 0 0;
.skuSelectorItem {
border-radius: 100%;
width: 40px;
height: 40px;
margin: 0;
border: 1px solid #989898;
.frameAround--sku-selector {
border-color: #000000;
border-width: 2px;
width: 40px;
height: 40px;
border-radius: 24px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorInternalBox {
border-radius: 100%;
width: 40px;
height: 40px;
.diagonalCross {
width: 30px;
height: 30px;
transform: rotate(274deg);
left: 4px;
top: 5px;
}
.skuSelectorItemTextValue {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}
}
.skuSelectorItem--selected {
.skuSelectorInternalBox {
.skuSelectorItemTextValue {
color: #000000;
}
}
}
}
}
}
.skuSelectorSubcontainer--cor {
.skuSelectorNameContainer {
margin: 0;
.skuSelectorOptionsList {
column-gap: 16px;
margin: 8px 0 0;
height: 48px;
.skuSelectorItem--selected {
border-radius: 100%;
border: 2px solid #000000;
width: 48px;
height: 48px;
margin: 0;
.frameAround {
width: 48px;
height: 48px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
bottom: 0;
top: 0;
right: 0;
border: 2px solid #000000;
}
.skuSelectorInternalBox {
.valueWrapper,
.skuSelectorItemImageValue {
border-radius: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 48px;
height: 48px;
}
}
}
.skuSelectorItem {
border-radius: 100%;
width: 48px;
height: 48px;
margin: 0;
.frameAround {
width: 48px;
height: 48px;
border-radius: 100%;
border: none;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.skuSelectorInternalBox {
border-radius: 100%;
width: 48px;
height: 48px;
.diagonalCross {
position: absolute;
width: 46.69px;
height: 0px;
left: calc(50% - 28.345px + 6.35px);
top: calc(50% - -10px + -11px);
border: 1px solid #d5d5d5;
transform: rotate(-43.26deg);
}
.valueWrapper,
.skuSelectorItemImageValue {
border-radius: 100%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
width: 48px;
height: 48px;
}
}
}
}
}
}