Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:SkuSelectorContainer estilizado

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-26 18:53:42 -03:00
parent e5e589053b
commit 106d7600ec
3 changed files with 109 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Todo.md
View File

@ -1,14 +1,37 @@
# Projeto
- [x] (a) inciando projeto
--- {cm:2023-01-25}
- [x] (a) inciando projeto {cm:2023-01-25}
- [](b)
os Requisitos cobrados serão:
-XXX (b) Blocos que devem ser ajustado e desenvolvidos: BreadCrumb, todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens), tabLayout com descrição até troca e devolução e seu conteúdo, prateleira de produtos, Newsletter.
- XXX (c) Bloco de Preço com Desconto deve ser CUSTOM
# Dev
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
- FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
- FIXME {f} Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.
- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){
- HACK 1. BreadCrumb;
- HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
- HACK 3. tabLayout com descrição até troca e devolução e seu conteúdo,
- HACK 4. prateleira de produtos,
- HACK 5. Newsletter.
}
# Requisitos
{cm:2023-01-25}
- FIXME Bloco de Preço com Desconto deve ser CUSTOM
* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX.
* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento.

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

@ -7,6 +7,38 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
.skuSelectorContainer--m3-custom-sku-selector {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer--m3-custom-sku-selector .frameAround--m3-custom-sku-selector {
border-radius: 50%;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS ";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTROS ";
}
.skuSelectorContainer--m3-custom-sku-selector .skuSelectorItemImageValue--m3-custom-sku-selector {
border-radius: 50%;
}
.skuSelectorContainer--m3-custom-sku-selector .diagonalCross--m3-custom-sku-selector {
border-radius: 50%;
}
.newsletter {
background: black;
}

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

@ -1,3 +1,49 @@
.newsletter{
background: red;
.skuSelectorContainer--m3-custom-sku-selector{
display: flex;
flex-direction: column-reverse;
.frameAround--m3-custom-sku-selector{
border-radius: 50%;
}
.skuSelectorSubcontainer-{
&-cor{
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
&::after{
content: "ES:";
}
&::before{
content: "OUTRAS ";
}
}
}
}
&-tamanho{
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
&::after{
content: "S:";
}
&::before{
content: "OUTROS ";
}
}
}
}
}
.skuSelectorItemImageValue--m3-custom-sku-selector{
border-radius: 50%;
}
.diagonalCross--m3-custom-sku-selector{
border-radius: 50%;
}
}
.newsletter{
background: black;
}