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(skuseletor):estilizando skuseletor

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-08 12:35:33 -03:00
parent 4d975b5f2b
commit 3fc37b03df
8 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
styles/css/vtex.flex-layout.css
View File

@ -137,6 +137,11 @@
align-items: end;
flex-direction: column-reverse;
}
@media screen and (max-width: 1024px) {
.flexRowContent--title {
display: flex;
}
}
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
top: 33%;

8
styles/css/vtex.product-identifier.css
View File

@ -10,6 +10,12 @@
.product-identifier--productReference {
display: block;
text-align: end;
margin-top: 8px;
padding-right: 40px;
font-size: 14px;
line-height: 19px;
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
text-align: start;
}
}

5
styles/css/vtex.product-price.css
View File

@ -23,11 +23,6 @@
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;

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

@ -30,10 +30,26 @@
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .skuSelectorSubcontainer {
max-width: 93.663%;
}
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorSubcontainer {
height: max-content;
}
}
.skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList {
height: 40.61px;
}
.skuSelectorContainer .skuSelectorItemImage {
width: 48px;
height: 48px;
}
@media screen and (max-width: 1024px) {
.skuSelectorContainer .skuSelectorItemImage {
margin: 0;
}
}
.skuSelectorContainer .skuSelectorItem--selected .frameAround {
border-radius: 24px;
border: 2px solid #000000;
@ -47,8 +63,15 @@
left: 0;
right: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
height: 75px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
height: 48px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "ES:";
@ -70,6 +93,7 @@
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "S:";
@ -98,6 +122,11 @@
line-height: 34px;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: start;
}
}
.carouselContainer {
max-width: 906px;
@ -143,6 +172,7 @@
height: max-content;
}
.carouselGaleryThumbs .productImagesThumb {
height: 100% !important;
margin-right: 1em;
}
@media screen and (max-width: 1024px) {

4
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -130,6 +130,10 @@
.flexRowContent--title{
align-items: end;
flex-direction: column-reverse;
@media screen and (max-width: 1024px){
display: flex;
}
}
.flexRowContent--pdp-carrousel{
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){

6
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -2,7 +2,11 @@
&--productReference{
display: block;
text-align: end;
margin-top: 8px;
padding-right: 40px;
font-size: 14px;
line-height: 19px;
@media screen and (max-width: 1024px){
text-align: start;
}
}
}

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

@ -19,9 +19,21 @@
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
.skuSelectorSubcontainer{
max-width: 93.663%;
@media screen and (max-width: 1024px){
height: max-content;
}
.skuSelectorOptionsList{
height: 40.61px;
}
}
.skuSelectorItemImage{
width: 48px;
height: 48px;
@media screen and (max-width: 1024px){
margin: 0;
}
}
.skuSelectorItem--selected{
.frameAround{
@ -40,9 +52,14 @@
}
.skuSelectorSubcontainer-{
&-cor{
height: 75px;
.skuSelectorOptionsList{
height: 48px;
}
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "ES:";
}
@ -68,6 +85,7 @@
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "S:";
}
@ -100,6 +118,9 @@
font-size: 20px;
line-height: 34px;
color: #575757;
@media screen and (max-width: 1024px){
text-align: start;
}
}
.carouselContainer{
max-width: 906px;
@ -135,6 +156,7 @@
display: block;
height: max-content;
.productImagesThumb{
height: 100% !important;
margin-right: 1em;
@media screen and (max-width: 1024px){
width: 30% !important;

4
styles/sass/pages/vtex.product-price.scss
View File

@ -14,10 +14,6 @@
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;