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

troca dos valores padrões css por variaveis scss

Browse Source
This commit is contained in:
Emerson Fully 2023-02-09 12:32:27 -03:00
parent 58ba9ff64c
commit 516545c356
18 changed files with 270 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
react/components/Html/style.css
View File

@ -44,12 +44,22 @@
display: flex;
flex-direction: column;
margin-left: 20px;
color: gray;
font-weight: bold;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
[class*="pix_discount-container"] {
font-weight: normal;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
color: #929292;
}
/*Cep-link*/
@ -74,12 +84,12 @@
}
[class*="vtex-tab-layout-0-x-listItem"] button {
color: #BFBFBF;
text-transform: capitalize;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #BFBFBF;
}

1
styles/css/agenciamagma.store-theme.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.html {
background-color: red;

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

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
@media screen and (max-width: 1024px) {
.flexRowContent {
@ -29,7 +30,7 @@
width: 100%;
max-width: 400px;
position: absolute;
top: 358px;
top: 366px;
left: 158px;
}
.flexRow--btn-product :global(.vtex-button) {
@ -37,6 +38,7 @@
border: 1px solid black;
border-radius: 0;
font-family: "Open Sans";
padding: 12px;
}
.flexRow--btn-product :global(.vtex-button):hover {
background-color: rgb(36, 36, 36);

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

@ -6,11 +6,22 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.product-identifier--productReference {
display: flex;
justify-content: right;
color: gray;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: left;
}
}
.product-identifier__label,

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

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.listPrice {
display: none;
@ -16,7 +17,8 @@
}
.sellingPrice {
color: #3f3f40;
font-family: "Open Sans";
color: #000000;
font-size: 1.25rem;
margin-bottom: -12px;
}
@ -86,6 +88,7 @@
}
.installmentsNumber {
font-family: "Open Sans";
font-weight: bold;
font-size: 16px;
margin-right: 6px;
@ -97,6 +100,7 @@
}
.installmentValue {
font-family: "Open Sans";
font-size: 16px;
font-weight: bold;
margin-right: 6px;
@ -109,6 +113,7 @@
}
.interestRate::after {
font-family: "Open Sans";
content: "sem juros";
font-size: 16px;
font-weight: normal;

1
styles/css/vtex.product-quantity.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;

1
styles/css/vtex.product-summary.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.buyButton {
display: none;

1
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */

1
styles/css/vtex.shelf.css
View File

@ -7,6 +7,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.title {
font-size: 0px;

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

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.sliderLayoutContainer--carousel {
background-color: white;

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

@ -7,6 +7,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
/*Product name*/
.productNameContainer--quickview {
@ -18,6 +19,11 @@
text-align: right;
color: #575757;
}
@media screen and (max-width: 1024px) {
.productNameContainer--quickview {
text-align: left;
}
}
/* carouselThumbs*/
.carouselGaleryThumbs {
@ -38,7 +44,7 @@
}
.skuSelectorContainer .frameAround {
border-radius: 50%;
border-color: black;
border-color: #000000;
z-index: 2;
margin: 2px;
}
@ -75,8 +81,12 @@
}
.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: gray;
line-height: 19px;
color: #929292;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
@ -84,8 +94,12 @@
}
.skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
color: gray;
line-height: 19px;
color: #929292;
}
/*not-Avaliable*/
@ -99,14 +113,24 @@
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-size: 0px;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-size: 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
.subscriberContainer .inputName :global(.vtex-input-prefix__group),
.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) {
@ -119,15 +143,21 @@
bottom: 0;
}
.subscriberContainer .submit :global(.vtex-button) {
background-color: black;
color: white;
background-color: #000000;
color: #fff;
font-size: 0px;
width: 100%;
height: 100%;
padding: 12px;
}
.subscriberContainer .submit :global(.vtex-button)::after {
content: "Avise-me";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
/*Shipping*/
@ -136,11 +166,11 @@
position: relative;
}
.shippingContainer :global(.vtex-button) {
background-color: black;
background-color: #000000;
width: 50px;
height: 45px;
color: white;
margin-top: 22px;
height: 44px;
color: #fff;
margin-top: 25px;
margin-left: -4px;
}
.shippingContainer :global(.vtex-input__label) {
@ -148,7 +178,12 @@
}
.shippingContainer :global(.vtex-input__label)::after {
content: "calcular frete:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.shippingContainer :global(.vtex-button__label) {
@ -156,7 +191,11 @@
}
.shippingContainer :global(.vtex-button__label)::after {
content: "OK";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
}
.shippingContainer :global(.vtex-input-prefix__group) {
border-radius: 0;
@ -165,10 +204,15 @@
width: 280px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
color: black;
color: #000000;
position: absolute;
right: 110px;
top: 25px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
@media screen and (max-width: 1024px) {
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
@ -210,13 +254,35 @@
width: 50%;
margin-left: 16px;
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #575757;
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer {
margin-top: 16px;
width: 100%;
}
}
/*newsletter*/
.newsletter {
background: black;
color: white;
background: #000000;
color: #fff;
margin-top: 50px;
border-bottom: 2px solid lightgray;
border-bottom: 2px solid white;
}
.newsletter .container {
margin: auto;
@ -237,11 +303,11 @@
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #ffffff;
color: #fff;
}
.newsletter .label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans;
font-family: "Open Sans";
font-size: 18px;
font-weight: 400;
line-height: 25px;
@ -259,19 +325,19 @@
border-radius: 0;
}
.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) {
background-color: black;
background-color: #000000;
}
.newsletter .inputGroup .buttonContainer {
padding: 0;
}
.newsletter .inputGroup .buttonContainer :global(.vtex-button) {
background-color: black;
background-color: #000000;
border: none;
border-bottom: 2px solid white;
border-radius: 0;
}
.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover {
background-color: black;
background-color: #000000;
border-bottom: 4px solid white;
}

2
styles/css/vtex.tab-layout.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
/* Grid breakpoints */
.listContainer {
display: flex;
@ -29,5 +30,6 @@
.contentItem {
flex-direction: column;
padding: 16px 40px;
border-bottom: 1px solid #b9b9b9;
}
}

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

@ -20,7 +20,7 @@
width: 100%;
max-width: 400px;
position: absolute;
top: 358px;
top: 366px;
left: 158px;
:global(.vtex-button) {
@ -28,6 +28,7 @@
border: 1px solid black;
border-radius: 0;
font-family: "Open Sans";
padding: 12px;
&:hover {
background-color: rgb(36, 36, 36);

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

@ -1,7 +1,17 @@
.product-identifier--productReference {
display: flex;
justify-content: right;
color: gray;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray7;
@media screen and (max-width: 1024px) {
justify-content: left;
}
}
.product-identifier__label,

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

@ -7,7 +7,8 @@
}
.sellingPrice {
color: #3f3f40;
font-family: $font-family;
color: $color-black;
font-size: 1.25rem;
margin-bottom: -12px;
}
@ -78,6 +79,8 @@
}
.installmentsNumber {
font-family: $font-family;
font-weight: bold;
font-size: 16px;
@ -91,6 +94,7 @@
}
.installmentValue {
font-family: $font-family;
font-size: 16px;
font-weight: bold;
margin-right: 6px;
@ -105,6 +109,8 @@
.interestRate {
&::after {
font-family: $font-family;
content: "sem juros";
font-size: 16px;
font-weight: normal;

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

@ -6,7 +6,11 @@
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
color: $color-gray6;
@media screen and (max-width: 1024px) {
text-align: left;
}
}
/* carouselThumbs*/
@ -30,7 +34,7 @@
.frameAround {
border-radius: 50%;
border-color: black;
border-color: $color-black;
z-index: 2;
margin: 2px;
}
@ -41,13 +45,13 @@
.skuSelectorItemTextValue {
padding: 0;
font-family: "Open Sans";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
color: $color-gray10;
}
.diagonalCross {
@ -80,8 +84,12 @@
&::after {
content: "OUTROS TAMANHOS:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
color: gray;
line-height: 19px;
color: $color-gray8;
}
}
}
@ -92,8 +100,12 @@
&::after {
content: "OUTRAS CORES:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
color: gray;
line-height: 19px;
color: $color-gray8;
}
}
}
@ -108,7 +120,12 @@
&::after {
content: "Produto indisponível";
font-size: 16px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray11;
}
}
@ -117,7 +134,13 @@
&::after {
content: "Deseja saber quando estiver disponível?";
font-size: 16px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: $color-gray11;
}
}
@ -135,15 +158,21 @@
bottom: 0;
:global(.vtex-button) {
background-color: black;
color: white;
background-color: $color-black;
color: $color-white;
font-size: 0px;
width: 100%;
height: 100%;
padding: 12px;
&::after {
content: "Avise-me";
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
}
}
@ -154,11 +183,11 @@
display: flex;
position: relative;
:global(.vtex-button) {
background-color: black;
background-color: $color-black;
width: 50px;
height: 45px;
color: white;
margin-top: 22px;
height: 44px;
color: $color-white;
margin-top: 25px;
margin-left: -4px;
}
@ -167,7 +196,12 @@
&::after {
content: "calcular frete:";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray8;
text-transform: uppercase;
}
}
@ -178,7 +212,11 @@
:global(.vtex-button__label)::after {
content: "OK";
font-family: $font-family;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
}
:global(.vtex-input-prefix__group) {
@ -190,11 +228,17 @@
}
:global(.vtex-address-form__postalCode-forgottenURL) {
color: black;
color: $color-black;
position: absolute;
right: 110px;
top: 25px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
@media screen and (max-width: 1024px) {
right: -60px;
}
@ -221,8 +265,8 @@
.shippingTableCell {
padding: 7px 0;
font-family: "Open Sans";
color: #afafaf;
font-family: $font-family;
color: $color-gray12;
}
.shippingTableRadioBtn {
@ -239,15 +283,40 @@
.productDescriptionContainer {
width: 50%;
margin-left: 16px;
.productDescriptionTitle {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: $color-gray6;
}
.productDescriptionText {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray8;
}
@media screen and (max-width: 1024px) {
margin-top: 16px;
width: 100%;
}
}
/*newsletter*/
.newsletter {
background: black;
color: white;
background: $color-black;
color: $color-white;
margin-top: 50px;
border-bottom: 2px solid lightgray;
border-bottom: 2px solid white;
.container {
margin: auto;
@ -265,24 +334,24 @@
.label {
display: flex;
flex-direction: column;
font-family: "Open Sans";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #ffffff;
color: $color-white;
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: Open Sans;
font-family: $font-family;
font-size: 18px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0em;
text-align: center;
color: #929292;
color: $color-gray8;
margin: 16px;
}
@ -296,20 +365,20 @@
}
:global(.vtex-styleguide-9-x-input) {
background-color: black;
background-color: $color-black;
}
.buttonContainer {
padding: 0;
:global(.vtex-button) {
background-color: black;
background-color: $color-black;
border: none;
border-bottom: 2px solid white;
border-radius: 0;
&:hover {
background-color: black;
background-color: $color-black;
border-bottom: 4px solid white;
}
}

1
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -18,5 +18,6 @@
@media screen and (max-width: 1024px) {
flex-direction: column;
padding: 16px 40px;
border-bottom: 1px solid #b9b9b9;
}
}

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

@ -1,4 +1,8 @@
$color-black: #292929;
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
$font-family: "Open Sans";
$color-black: #000000;
$color-white: #fff;
@ -7,6 +11,14 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #575757;
$color-gray7: rgba(146, 146, 146, 0.48);
$color-gray8: #929292;
$color-gray9: #989898;
$color-gray10: rgba(185, 185, 185, 0.6);
$color-gray11: #868686;
$color-gray12: #afafaf;
$color-gray13: #b9b9b9;
$color-blue: #4267b2;
@ -14,18 +26,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;