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

refactor(pdp): troca margin por gap na prateleira e adiciona var de cor

Browse Source
This commit is contained in:
Cainã Milech 2023-02-09 19:45:23 -03:00
parent c153da595f
commit 8f7c75a282
5 changed files with 58 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
styles/css/vtex.slider-layout.css
View File

@ -20,21 +20,36 @@
}
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.1773%;
width: 96.91521%;
}
@media screen and (min-width: 1921px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.914%;
width: 97.72%;
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 97.63%;
width: 96.12%;
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 89.73%;
width: 89.34%;
}
}
.sliderTrack--prateleira {
gap: 16px;
margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
.sliderTrack--prateleira {
gap: 12px;
}
}
@media screen and (max-width: 768px) {
.sliderTrack--prateleira {
gap: 8px;
}
}
@ -53,18 +68,6 @@
height: 17px !important;
}
.slide--prateleira {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
.slide--prateleira {
margin-left: 4px;
margin-right: 4px;
}
}
.sliderArrows--prateleira {
margin: 30px;
}

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

@ -75,6 +75,10 @@
.frameAround--skus {
border: none;
bottom: unset;
top: unset;
left: unset;
right: unset;
}
.skuSelectorOptionsList {
@ -87,6 +91,7 @@
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
color: #929292;
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
@ -95,11 +100,12 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
color: #929292;
}
.skuSelectorItem {
margin: 0;
height: unset;
}
.skuSelectorItemTextValue--skus {
@ -142,6 +148,7 @@
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
color: #929292;
font-size: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
@ -150,7 +157,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
color: #929292;
}
.skuSelectorSubcontainer--cor .skuSelectorItemImage--skus {
height: 48px;
@ -273,6 +280,7 @@
margin-left: -1px;
}
.shippingContainer :global(.vtex-button__label) {
cursor: pointer;
font-size: 0;
}
.shippingContainer :global(.vtex-button__label)::after {

32
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -8,19 +8,31 @@
}
.sliderTrackContainer--prateleira {
width: 97.1773%;
width: 96.91521%;
@media screen and (min-width: 1921px) {
width: 97.914%;
width: 97.72%;
}
@media screen and (max-width: 1024px) {
width: 97.63%;
width: 96.12%;
}
@media screen and (max-width: 768px) {
width: 89.73%;
width: 89.34%;
}
}
}
.sliderTrack--prateleira {
gap: 16px;
margin-bottom: 32px;
@media screen and (max-width: 1024px) {
gap: 12px;
}
@media screen and (max-width: 768px) {
gap: 8px;
}
}
//DOTS
.paginationDotsContainer--prateleira {
@ -40,18 +52,6 @@
}
}
//SLIDES
.slide--prateleira {
margin-right: 8px;
margin-left: 8px;
margin-bottom: 32px;
@media screen and (max-width: 768px) {
margin-left: 4px;
margin-right: 4px;
}
}
.sliderArrows--prateleira {
margin: 30px;
@media screen and (min-width: 1921px) {

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

@ -66,6 +66,10 @@
.frameAround--skus {
border: none;
bottom: unset;
top: unset;
left: unset;
right: unset;
}
.skuSelectorOptionsList {
@ -80,6 +84,7 @@
.skuSelectorNameContainer {
.skuSelectorTextContainer {
.skuSelectorName {
color: $color-gray6;
font-size: 0;
&::after {
@ -88,7 +93,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
color: $color-gray6;
}
}
}
@ -97,6 +102,7 @@
.skuSelectorItem {
margin: 0;
height: unset;
}
.skuSelectorItemTextValue--skus {
@ -149,6 +155,7 @@
margin: 0;
.skuSelectorName {
color: $color-gray6;
font-size: 0;
&::after {
@ -157,7 +164,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: color-gray6;
color: $color-gray6;
}
}
@ -270,7 +277,7 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
color: $color-gray13;
}
}
}
@ -310,6 +317,7 @@
}
:global(.vtex-button__label) {
cursor: pointer;
font-size: 0;
&::after {
@ -390,7 +398,7 @@
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #afafaf;
color: $color-gray13;
}
.shippingTableCellDeliveryName,

1
styles/sass/utils/_vars.scss
View File

@ -18,6 +18,7 @@ $color-gray9: #bfbfbf;
$color-gray10: #868686;
$color-gray11: #bababa;
$color-gray12: #b9b9b9;
$color-gray13: #afafaf;
$color-blue: #4267b2;