From b9a6bd942f9a017f67018c22ec362f91d47c27bb Mon Sep 17 00:00:00 2001 From: Eleonora Otz Date: Wed, 7 Dec 2022 22:24:15 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Cria=20novas=20vari=C3=A1veis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/arquivos/img/m3-eleonoraotz-logo.png | Bin 0 -> 1536 bytes .../sass/checkout/_checkout-carrinho.scss | 48 +- .../sass/checkout/_checkout-email.scss | 8 +- .../sass/checkout/_checkout-pagamento.scss | 16 +- .../sass/checkout/_checkout-vazio.scss | 8 +- .../sass/components/_instagram-gallery.scss | 2 +- src/arquivos/sass/components/_mini-cart.scss | 62 +-- src/arquivos/sass/components/_newsletter.scss | 24 +- src/arquivos/sass/pages/_categoria.scss | 83 ++-- src/arquivos/sass/pages/_erro.scss | 8 +- src/arquivos/sass/pages/_home.scss | 4 +- src/arquivos/sass/pages/_institucional.scss | 22 +- src/arquivos/sass/pages/_login.scss | 16 +- src/arquivos/sass/pages/_produto.scss | 114 ++--- src/arquivos/sass/pages/_user-logado.scss | 4 +- src/arquivos/sass/partials/_breadcrumb.scss | 6 +- src/arquivos/sass/partials/_flags.scss | 6 +- src/arquivos/sass/partials/_footer.scss | 32 +- src/arquivos/sass/partials/_header.scss | 412 +----------------- src/arquivos/sass/partials/_menu.scss | 54 +-- src/arquivos/sass/partials/_prateleira.scss | 20 +- src/arquivos/sass/utils/_normalize.scss | 2 +- src/arquivos/sass/utils/_variaveis.scss | 42 +- .../sub-templates/eleonoraotz-header.html | 167 +------ 24 files changed, 289 insertions(+), 871 deletions(-) create mode 100644 src/arquivos/img/m3-eleonoraotz-logo.png diff --git a/src/arquivos/img/m3-eleonoraotz-logo.png b/src/arquivos/img/m3-eleonoraotz-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..b109af061c34307cd789d555d3413b93f9fd3fde GIT binary patch literal 1536 zcmV+b2LJhqP) z6jc<*&wg~*uSV-?(FK*XioQUojSWiDh#Hgnk!T;(2nO{*6QU+68Z|K_5?{~<48*Va zA`eC)qJ;Wj3?U|>h8QgtrHD`rwek^a%NE#nVGsY)J4?6Q-JNrHXSUttpZszsn=@zb zJ#*)NoS7x6VKH+X*bI( zDCh=1gRNjYe5T1#&W*a2Oh7}FzXQn=dO27Hn#oR|pF@tY_G#$uAB2q!AD%a`arwmbAc0(a`iQ6B##7NE#ObK*BNl9 zoAV}cfW6gLaGJf7Z0FjjOu@&CZ1(K7>H`bioHscYtp*K&hp7bNya@Q1OVb|E>~?_$ zHW9BT4TBc45bS4xZZ1toE;t3QOG;?V>?p(yHSz7!Y1pn~l%(qr+ z3bgNa_D(0+1T|hLn6I&&eh2r17znZ%(3i0ZLMf7^$$Buy@fT*Z_OtCxa&yBuZIi|L z3HDxpg9Z75`Hh7WSuocXxGA&QOa``kk_taHonX|$S6j~c_ppCD3Kr*9Si7~8M|utw z5t|IR%_I6Hxd=9&TKHR$bMEczuM*(q%=Ki0e=X_s3pVuqE;c*BU!>P33Y+&xuiR~B zFE~#A=`yg5og9P&vtDynI-UN}%|=pY&>qrjx0}Jhz(6l4l}sitqRI7zI&Fff5(26A+27xPMqy^1 z5Y8v(k>6l*4sO6rC^nKwV7uvY^*f-Ekr7WCm93th9?yMxDcpd4DDDP_6y~>h{z5I0 zNT>tU(a|xZgDG-)^k#)=Rd0IpP+?@}*gB9Vw6LGsjRzF@LRmpuTk zA+te|L`{gMt~1j#u?&-SXe*f|(Z!@wmmk4Y2M9Bzue}(7e3{IL1*$D`85#r|JYTev zeplo9&7rIXJ_5M}#k*7)twYBc_G32J22->9DW~_oM3vD2FrMYN38pGYsZ?rIV~4d{ ziuBS3bi8M>NnkG||0Ri{;r)6l6&;0h2f0FM%@4$7wn)E9kiDwn*dG&{* zZ2sx+hl{_IlabN-Y-RVqq5PC{PAB`Ljo|8Hm0e%t#-O zQpeq#=bbiwlccQ|{{@mapAy8@Vs#8;UHDNH&ye}>R387m;B&AR-PvZc$oP}}?9*U5 zxB div { - background-color: $color-white2; - color: $color-black2; + background-color: #f5f5f5; + color: #142032; display: block !important; padding: 24px 15%; @@ -252,7 +252,7 @@ text-align: left; label { - color: $color-gray5; + color: #6d6e70; font-size: 12px; } } @@ -271,7 +271,7 @@ #cart-coupon-add { background-image: none; - background-color: $color-black2; + background-color: #142032; border-radius: 0; border: none; font-size: 0; @@ -281,11 +281,11 @@ transition: all 0.15s ease-in-out; &:hover { - background-color: lighten($color-black2, 5); + background-color: lighten(#142032, 5); } &:active { - background-color: darken($color-black2, 5); + background-color: darken(#142032, 5); } &::before { @@ -299,7 +299,7 @@ } .accordion-group { - border: 1px solid $color-white2; + border: 1px solid #f5f5f5; border-radius: 0; color: #000; @@ -312,7 +312,7 @@ } tfoot { - background-color: $color-white2; + background-color: #f5f5f5; .info { text-transform: uppercase; @@ -359,7 +359,7 @@ #cart-choose-more-products { bottom: -26px; - color: $color-black4; + color: #151728; font-size: 12px; left: 0; position: absolute; @@ -368,7 +368,7 @@ } #cart-to-orderform { - background-color: $color-green; + background-color: #2fab61; font-size: 14px; font-weight: 700; margin-top: 0; diff --git a/src/arquivos/sass/checkout/_checkout-email.scss b/src/arquivos/sass/checkout/_checkout-email.scss index 74f44d7..9b6e25e 100644 --- a/src/arquivos/sass/checkout/_checkout-email.scss +++ b/src/arquivos/sass/checkout/_checkout-email.scss @@ -1,6 +1,6 @@ .container-order-form { #orderform-to-cart { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); text-decoration: underline; } @@ -10,7 +10,7 @@ } #btn-client-pre-email { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); background-image: none; border: none; border-radius: 0; @@ -24,11 +24,11 @@ top: 0; &:hover { - background-color: lighten($color-pink, 5); + background-color: lighten(hsla(348, 83%, 58%, 1), 5); } &:active { - background-color: darken($color-pink, 5); + background-color: darken(hsla(348, 83%, 58%, 1), 5); } } } diff --git a/src/arquivos/sass/checkout/_checkout-pagamento.scss b/src/arquivos/sass/checkout/_checkout-pagamento.scss index 57befb9..66201d8 100644 --- a/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -17,7 +17,7 @@ .accordion-group { .accordion-toggle .link-box-edit { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); } .text input, @@ -55,15 +55,15 @@ } .vtex-omnishipping-1-x-summaryChange { - border-color: $color-pink; - color: $color-pink; + border-color: hsla(348, 83%, 58%, 1); + color: hsla(348, 83%, 58%, 1); } } .accordion-group button.submit, .payment-confirmation-wrap button.submit { background-image: none; - background-color: $color-green; + background-color: #2fab61; border: none; border-radius: 0; font-size: 14px; @@ -73,17 +73,17 @@ transition: all 0.15s ease-in-out; &:hover { - background-color: lighten($color-green, 5); + background-color: lighten(#2fab61, 5); } &:active { - background-color: darken($color-green, 5); + background-color: darken(#2fab61, 5); } } .cart-fixed { #orderform-minicart-to-cart { - color: $color-black4; + color: #151728; display: block; font-size: 12px; text-decoration: underline; @@ -95,7 +95,7 @@ } tfoot td { - color: $color-black3; + color: #19273d; text-transform: uppercase; } } diff --git a/src/arquivos/sass/checkout/_checkout-vazio.scss b/src/arquivos/sass/checkout/_checkout-vazio.scss index c7e8a68..f507207 100644 --- a/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -2,7 +2,7 @@ text-align: center; .empty-cart-title { - color: $color-black2; + color: #142032; font-size: 24px; line-height: 29px; } @@ -14,7 +14,7 @@ } #cart-choose-products { - background-color: $color-black2; + background-color: #142032; border-radius: 0; border: none; background-image: none; @@ -26,11 +26,11 @@ transition: all 0.15s ease-in-out; &:hover { - background-color: lighten($color-black2, 5); + background-color: lighten(#142032, 5); } &:active { - background-color: darken($color-black2, 5); + background-color: darken(#142032, 5); } &::before { diff --git a/src/arquivos/sass/components/_instagram-gallery.scss b/src/arquivos/sass/components/_instagram-gallery.scss index fa8d730..3184360 100644 --- a/src/arquivos/sass/components/_instagram-gallery.scss +++ b/src/arquivos/sass/components/_instagram-gallery.scss @@ -60,7 +60,7 @@ a { display: block; - color: $color-pink; + color: hsla(348, 83%, 58%, 1); font-size: 16px; font-weight: bold; diff --git a/src/arquivos/sass/components/_mini-cart.scss b/src/arquivos/sass/components/_mini-cart.scss index eb94ec2..edaa01f 100644 --- a/src/arquivos/sass/components/_mini-cart.scss +++ b/src/arquivos/sass/components/_mini-cart.scss @@ -26,7 +26,7 @@ } .mini-cart-container { - background-color: $color-white; + background-color: #fff; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; @@ -51,8 +51,8 @@ } .mini-cart-header { - border-bottom: 1px solid $color-gray; - color: $color-black2; + border-bottom: 1px solid hsla(0, 0%, 90%, 1); + color: #142032; font-size: 12px; letter-spacing: 0.5px; padding: 20px 15px 16px; @@ -75,7 +75,7 @@ &::before, &::after { - background-color: lighten($color-black2, 10); + background-color: lighten(#142032, 10); content: ""; height: 2px; left: 0.5px; @@ -97,7 +97,7 @@ &:active { &:before, &:after { - background-color: $color-black2; + background-color: #142032; } } } @@ -120,17 +120,17 @@ } &::-webkit-scrollbar-track { - background-color: $color-gray; + background-color: hsla(0, 0%, 90%, 1); border-radius: 15px; } &::-webkit-scrollbar-thumb { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); border-radius: 15px; } &::-webkit-scrollbar-thumb:hover { - background-color: darken($color-gray3, 10); + background-color: darken(hsl(0, 0%, 77%), 10); } } @@ -154,8 +154,8 @@ left: 0; right: 0; font-size: 0; - border: 5px solid $color-white; - border-top-color: $color-pink; + border: 5px solid #fff; + border-top-color: hsla(348, 83%, 58%, 1); border-radius: 50%; width: 30px; height: 30px; @@ -172,7 +172,7 @@ li { align-items: flex-start; - border-bottom: 1px solid $color-gray; + border-bottom: 1px solid hsla(0, 0%, 90%, 1); display: flex; justify-content: space-between; padding: 12px 0; @@ -215,7 +215,7 @@ } .product-info { - color: $color-black2; + color: #142032; font-size: 12px; font-weight: 500; padding-left: 8px; @@ -228,7 +228,7 @@ } .product-price { - color: $color-black; + color: #000; font-size: 18px; font-weight: 700; margin-bottom: 8px; @@ -250,8 +250,8 @@ } button { - background-color: $color-pink; - color: $color-white; + background-color: hsla(348, 83%, 58%, 1); + color: #fff; font-weight: 500; font-size: 16px; line-height: 0; @@ -261,16 +261,16 @@ padding: 0; &:hover { - background-color: lighten($color-pink, 5); + background-color: lighten(hsla(348, 83%, 58%, 1), 5); } &:active { - background-color: darken($color-pink, 10); + background-color: darken(hsla(348, 83%, 58%, 1), 10); } } .value { - border: 1px solid $color-black2; + border: 1px solid #142032; box-shadow: none; font-size: 14px; margin: 0 -3px; @@ -302,17 +302,17 @@ &:hover, &:active { - border-color: darken($color-black2, 15); + border-color: darken(#142032, 15); &:after, &:before { - border-color: darken($color-black2, 15); + border-color: darken(#142032, 15); } } &:after, &:before { - border-bottom: 1.25px solid $color-black2; + border-bottom: 1.25px solid #142032; content: ""; width: 16px; position: absolute; @@ -337,21 +337,21 @@ .totals-container { display: none; - background-color: $color-white; - border-top: 1px solid $color-gray; + background-color: #fff; + border-top: 1px solid hsla(0, 0%, 90%, 1); margin: 0 16px; padding: 16px 0; } .total { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); font-size: 12px; line-height: 15px; letter-spacing: 3px; text-transform: uppercase; strong { - color: $color-black2; + color: #142032; display: inline-block; font-weight: 700; letter-spacing: 0; @@ -363,7 +363,7 @@ background-color: transparent; border: none; cursor: pointer; - color: $color-gray5; + color: #6d6e70; display: block; font-size: 14px; padding: 17px 15px; @@ -375,13 +375,13 @@ &:hover, &:active { - color: darken($color-gray5, 15); + color: darken(#6d6e70, 15); } } .finish-order { - background-color: $color-green; - color: $color-white; + background-color: #2fab61; + color: #fff; display: block; font-weight: 700; font-size: 14px; @@ -392,11 +392,11 @@ width: 100%; &:hover { - background-color: lighten($color-green, 2.5); + background-color: lighten(#2fab61, 2.5); } &:active { - background-color: darken($color-green, 10); + background-color: darken(#2fab61, 10); } } } diff --git a/src/arquivos/sass/components/_newsletter.scss b/src/arquivos/sass/components/_newsletter.scss index 9c33bdf..1f76db7 100644 --- a/src/arquivos/sass/components/_newsletter.scss +++ b/src/arquivos/sass/components/_newsletter.scss @@ -3,7 +3,7 @@ /*-------------------------------------------------------------*/ .captacao-emails-newsletter { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); background-image: url("/arquivos/template-background-newsletter.png"); margin-top: 104px; padding: 12px 15px 24px; @@ -25,7 +25,7 @@ } h3 { - color: $color-white; + color: #fff; font-size: 18px; font-weight: normal; line-height: 26px; @@ -91,12 +91,12 @@ } &::placeholder { - color: $color-black2; + color: #142032; } &#m3-cn-button-ok { - background-color: $color-black2; - color: $color-white; + background-color: #142032; + color: #fff; cursor: pointer; font-weight: 700; font-size: 14px; @@ -109,11 +109,11 @@ } &:hover { - background-color: lighten($color-black2, 5); + background-color: lighten(#142032, 5); } &:active { - background-color: darken($color-black2, 5); + background-color: darken(#142032, 5); } } } @@ -123,10 +123,10 @@ text-align: center; .m3-cn-error { - background-color: $color-white; + background-color: #fff; border-radius: 2px; bottom: -28px; - color: $color-pink3; + color: hsla(348, 83%, 58%, 1) 3; display: table; left: 40%; margin: auto; @@ -136,7 +136,7 @@ } .m3-cn-success { - color: $color-white; + color: #fff; display: inline-block; font-size: 16px; margin-right: 20px; @@ -144,9 +144,9 @@ } .btn-voltar { - background-color: $color-white; + background-color: #fff; border-radius: 2px; - color: $color-pink; + color: hsla(348, 83%, 58%, 1); display: inline-block; font-size: 14px; line-height: 1; diff --git a/src/arquivos/sass/pages/_categoria.scss b/src/arquivos/sass/pages/_categoria.scss index cc3f60e..2893f2d 100644 --- a/src/arquivos/sass/pages/_categoria.scss +++ b/src/arquivos/sass/pages/_categoria.scss @@ -3,7 +3,7 @@ /*-------------------------------------------------------------*/ .categoria { - color: $color-black2; + color: #142032; .bread-crumb { margin-bottom: 54px; @@ -15,7 +15,7 @@ .filtros-categoria { @include mq(md, max) { - background-color: $color-white; + background-color: #fff; bottom: 0; left: 0; margin-left: -100%; @@ -38,7 +38,7 @@ } .topo-filtros { - border-bottom: 1px solid $color-gray; + border-bottom: 1px solid hsla(0, 0%, 90%, 1); @include mq(md, max) { display: flex; @@ -72,7 +72,7 @@ } &::before { - border-left: 1px solid $color-gray4; + border-left: 1px solid #eee; content: ""; display: block; height: 36px; @@ -88,7 +88,7 @@ &::before, &::after { - border: 1px solid $color-black2; + border: 1px solid #142032; content: ""; display: block; left: 0; @@ -109,7 +109,7 @@ } a { - color: $color-black2; + color: #142032; } .navigation-tabs { @@ -151,11 +151,11 @@ label { a { - color: $color-black4; + color: #151728; transition: ease-in 0.22s all; &:hover { - text-shadow: 0px 0px 0.55px $color-black4; + text-shadow: 0px 0px 0.55px #151728; } } } @@ -169,22 +169,22 @@ } &::-webkit-scrollbar-track { - background-color: $color-gray; + background-color: hsla(0, 0%, 90%, 1); border-radius: 15px; } &::-webkit-scrollbar-thumb { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); border-radius: 15px; } &::-webkit-scrollbar-thumb:hover { - background-color: darken($color-gray3, 10); + background-color: darken(hsl(0, 0%, 77%), 10); } } label { - color: $color-black2; + color: #142032; cursor: pointer; display: block; font-size: 14px; @@ -208,10 +208,10 @@ } & ~ .sr_box { - border: 1px solid $color-black2; + border: 1px solid #142032; border-radius: 50%; content: " "; - color: $color-gray3; + color: hsl(0, 0%, 77%); display: inline-block; font-size: 13px; font-weight: bold; @@ -247,13 +247,16 @@ &:hover ~ .sr_box { &::before { - background-color: lighten($color-pink, 15); + background-color: lighten( + hsla(348, 83%, 58%, 1), + 15 + ); } } &:checked ~ .sr_box { &::before { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); } } } @@ -272,7 +275,7 @@ } .aply-filter-btn { - background-color: $color-gray4; + background-color: #eee; border: none; bottom: 0; font-size: 14px; @@ -289,7 +292,7 @@ } &:active { - background-color: darken($color-gray4, 5); + background-color: darken(#eee, 5); } } } @@ -334,7 +337,7 @@ .opcoes-resultado { @include mq(md, max) { align-items: center; - border: 1px solid $color-gray; + border: 1px solid hsla(0, 0%, 90%, 1); display: flex; justify-content: left; } @@ -343,8 +346,8 @@ #open-filter-button { background-color: transparent; border: none; - border-right: 1px solid $color-gray; - color: $color-black; + border-right: 1px solid hsla(0, 0%, 90%, 1); + color: #000; cursor: pointer; display: none; font-size: 16px; @@ -407,7 +410,7 @@ select { background-color: transparent; cursor: pointer; - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); font-size: 14px; margin-left: 8px; outline: none; @@ -442,10 +445,10 @@ } .clear-filter-btn { - background-color: $color-black2; + background-color: #142032; border: none; border-radius: 5px; - color: $color-white; + color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; @@ -458,11 +461,11 @@ width: 100%; &:hover { - background-color: lighten($color-black, 2.5); + background-color: lighten(#000, 2.5); } &:active { - background-color: darken($color-black, 2.5); + background-color: darken(#000, 2.5); } } @@ -538,8 +541,8 @@ &.current { a { - background-color: $color-black; - color: $color-white; + background-color: #000; + color: #fff; pointer-events: none; } } @@ -552,7 +555,7 @@ font-size: 0; text-indent: -99999px; overflow: hidden; - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); &:before { @include pseudo(block, relative, "\00BB"); @@ -562,7 +565,7 @@ } } &.desativo a { - color: $color-gray3; + color: hsl(0, 0%, 77%); pointer-events: none; width: 0; opacity: 0; @@ -580,20 +583,20 @@ } } a { - background-color: $color-white; - color: $color-black; + background-color: #fff; + color: #000; padding: 4px 12px; text-decoration: none; display: block; - border: 1px solid $color-gray6; + border: 1px solid #e5e5e5; @include mq(md, min) { &:hover { - background-color: $color-gray6; - color: darken($color-black, 15); + background-color: #e5e5e5; + color: darken(#000, 15); &:active { - color: darken($color-black, 10); + color: darken(#000, 10); } } } @@ -613,9 +616,9 @@ text-align: center; button { - background-color: $color-black2; + background-color: #142032; border: none; - color: $color-white; + color: #fff; cursor: pointer; font-size: 16px; font-weight: 700; @@ -628,11 +631,11 @@ width: 100%; &:hover { - background-color: lighten($color-black, 2.5); + background-color: lighten(#000, 2.5); } &:active { - background-color: darken($color-black, 2.5); + background-color: darken(#000, 2.5); } } } diff --git a/src/arquivos/sass/pages/_erro.scss b/src/arquivos/sass/pages/_erro.scss index 10265d2..8689818 100644 --- a/src/arquivos/sass/pages/_erro.scss +++ b/src/arquivos/sass/pages/_erro.scss @@ -1,5 +1,5 @@ .pagina-erro { - color: $color-black2; + color: #142032; text-align: center; display: block; min-height: 40%; @@ -43,7 +43,7 @@ a.voltar-para-home { color: #fff; - background: $color-black2; + background: #142032; display: inline-block; font-size: 14px; margin: 1em auto 3em; @@ -52,11 +52,11 @@ transition: all 0.15s ease-in-out; &:hover { - background-color: lighten($color-black2, 5); + background-color: lighten(#142032, 5); } &:active { - background-color: darken($color-black2, 5); + background-color: darken(#142032, 5); } } } diff --git a/src/arquivos/sass/pages/_home.scss b/src/arquivos/sass/pages/_home.scss index a85dc15..e3467fb 100644 --- a/src/arquivos/sass/pages/_home.scss +++ b/src/arquivos/sass/pages/_home.scss @@ -79,7 +79,7 @@ } button { - background-color: $color-black2; + background-color: #142032; border: none; cursor: pointer; height: 10px; @@ -92,7 +92,7 @@ .slick-active { button { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); height: 16px; width: 16px; } diff --git a/src/arquivos/sass/pages/_institucional.scss b/src/arquivos/sass/pages/_institucional.scss index 0142661..66bdadd 100644 --- a/src/arquivos/sass/pages/_institucional.scss +++ b/src/arquivos/sass/pages/_institucional.scss @@ -3,7 +3,7 @@ /*-------------------------------------------------------------*/ .institucional { - color: $color-black2; + color: #142032; .breadcrumb { font-size: 14px; @@ -15,8 +15,8 @@ display: inline-block; a { - border-right: 1px solid $color-black2; - color: $color-black2; + border-right: 1px solid #142032; + color: #142032; margin-right: 7px; padding: 0px 9px 0px 0; } @@ -48,27 +48,27 @@ padding: 4px 2px; a { - border: 1px solid $color-black2; + border: 1px solid #142032; border-radius: 31px; - color: $color-pink; + color: hsla(348, 83%, 58%, 1); display: block; font-weight: 700; padding: 8px 16px; transition: all 0.15s ease-in-out; &.ativo { - background-color: $color-black2; - color: $color-white; + background-color: #142032; + color: #fff; } &:hover { - background-color: lighten($color-black2, 5); - color: $color-white; + background-color: lighten(#142032, 5); + color: #fff; } &:active { - background-color: darken($color-black2, 10); - color: $color-white; + background-color: darken(#142032, 10); + color: #fff; } } } diff --git a/src/arquivos/sass/pages/_login.scss b/src/arquivos/sass/pages/_login.scss index 4243e1e..2b3e338 100644 --- a/src/arquivos/sass/pages/_login.scss +++ b/src/arquivos/sass/pages/_login.scss @@ -22,9 +22,9 @@ .btn { background-image: none; - background-color: $color-white2; + background-color: #f5f5f5; border-radius: 0; - border: 1px solid $color-gray6; + border: 1px solid #e5e5e5; box-shadow: none; font-size: 14px; outline: none; @@ -33,25 +33,25 @@ transition: all 0.15s ease-in-out; &:hover { - background-color: lighten($color-white2, 5); + background-color: lighten(#f5f5f5, 5); } &:active { - background-color: darken($color-white2, 5); + background-color: darken(#f5f5f5, 5); } &.btn-success { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); font-size: 14px; height: auto; padding: 14px 24px; &:hover { - background-color: lighten($color-pink, 5); + background-color: lighten(hsla(348, 83%, 58%, 1), 5); } &:active { - background-color: darken($color-pink, 5); + background-color: darken(hsla(348, 83%, 58%, 1), 5); } i { @@ -72,7 +72,7 @@ h4 { &::before { content: "Entrar"; - color: $color-black2; + color: #142032; display: block; font-size: 22px; font-weight: 700; diff --git a/src/arquivos/sass/pages/_produto.scss b/src/arquivos/sass/pages/_produto.scss index 4a803d3..071e854 100644 --- a/src/arquivos/sass/pages/_produto.scss +++ b/src/arquivos/sass/pages/_produto.scss @@ -99,7 +99,7 @@ &:hover, &:active { @include mq(md, min) { - border: 1px solid $color-pink; + border: 1px solid hsla(348, 83%, 58%, 1); } } @@ -158,7 +158,7 @@ } button { - background-color: $color-black2; + background-color: #142032; border: none; cursor: pointer; height: 10px; @@ -171,7 +171,7 @@ .slick-active { button { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); height: 16px; width: 16px; } @@ -196,7 +196,7 @@ .product-reference { font-size: 14px; - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); .productReference { display: inline-block; @@ -204,11 +204,11 @@ } .moduloPreco { - color: $color-black2; + color: #142032; margin: 30px 0; .valor-de { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); font-size: 14px; text-transform: uppercase; text-decoration: line-through; @@ -223,7 +223,7 @@ } .valor-por { - color: $color-black2; + color: #142032; font-size: 32px; font-weight: 700; @@ -233,7 +233,7 @@ } .valor-dividido { - color: $color-gray5; + color: #6d6e70; font-size: 14px; .numero-de-parcelas { @@ -262,14 +262,14 @@ } &:before { - border-top: 1px solid $color-gray3; + border-top: 1px solid hsl(0, 0%, 77%); margin-top: 8px; padding-bottom: 10px; } &:after { padding-top: 10px; - border-bottom: 1px solid $color-gray3; + border-bottom: 1px solid hsl(0, 0%, 77%); } .value { @@ -282,8 +282,8 @@ } .container-percentual { - border: 1px dotted $color-green; - color: $color-green; + border: 1px dotted #2fab61; + color: #2fab61; font-size: 10px; padding: 4px 9px; } @@ -291,7 +291,7 @@ } .moduloAviseMe { - border-bottom: 1px solid $color-gray; + border-bottom: 1px solid hsla(0, 0%, 90%, 1); padding-bottom: 15px; margin: 20px 0; @@ -305,7 +305,7 @@ } input { - border: 1px solid $color-gray; + border: 1px solid hsla(0, 0%, 90%, 1); display: inline-block; margin-bottom: 10px; padding: 10px; @@ -317,9 +317,9 @@ } &#enviar-avise-me { - background-color: $color-black3; + background-color: #19273d; border: none; - color: $color-white; + color: #fff; cursor: pointer; font-size: 10px; font-weight: 700; @@ -331,11 +331,11 @@ max-width: 200px; &:hover { - background-color: $color-black; + background-color: #000; } &:active { - background-color: $color-black2; + background-color: #142032; } } } @@ -346,11 +346,11 @@ position: absolute; &.msgSucesso { - color: $color-green; + color: #2fab61; } &.msgErro { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); } } } @@ -369,7 +369,7 @@ } li { - border: 1px solid $color-gray; + border: 1px solid hsla(0, 0%, 90%, 1); display: inline-block; max-width: 72px; max-height: 96px; @@ -382,7 +382,7 @@ } &:hover { - border: 2px solid $color-gray3; + border: 2px solid hsl(0, 0%, 77%); } img { @@ -408,7 +408,7 @@ .moduloSkus { .titulo { - color: $color-gray5; + color: #6d6e70; font-size: 16px; } @@ -450,7 +450,7 @@ @include mq(lg) { &:hover label, &:active label { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); } } } @@ -460,16 +460,16 @@ &:checked + label { background-color: #fff; - border: 1px solid $color-pink; + border: 1px solid hsla(348, 83%, 58%, 1); } } label { align-items: center; - background-color: $color-gray; + background-color: hsla(0, 0%, 90%, 1); border-radius: 4px; border: 1px solid transparent; - color: $color-black3; + color: #19273d; cursor: pointer; display: flex; font-size: 14px; @@ -499,7 +499,7 @@ } .titulo { - color: $color-gray5; + color: #6d6e70; display: block; font-size: 16px; margin-bottom: 8px; @@ -525,8 +525,8 @@ } button { - background-color: $color-pink; - color: $color-white; + background-color: hsla(348, 83%, 58%, 1); + color: #fff; cursor: pointer; font-size: 14px; line-height: 0; @@ -537,18 +537,18 @@ @include mq(lg) { &:hover { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); } } &:active { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); } } .qtd-value { - border: 1px solid $color-black2; - color: $color-black3; + border: 1px solid #142032; + color: #19273d; font-size: 14px; position: relative; width: 34px; @@ -574,20 +574,20 @@ } &:before { - border-top: 1px solid $color-gray3; + border-top: 1px solid hsl(0, 0%, 77%); margin-top: 10px; padding-bottom: 6px; } &:after { padding-top: 6px; - border-bottom: 1px solid $color-gray3; + border-bottom: 1px solid hsl(0, 0%, 77%); } button { background-color: transparent; border: none; - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); cursor: pointer; font-size: 12px; outline: none; @@ -607,13 +607,13 @@ pointer-events: none; .btn-compra { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); } } .btn-compra { - background-color: $color-green; - color: $color-white; + background-color: #2fab61; + color: #fff; cursor: pointer; display: block; font-size: 18px; @@ -632,25 +632,25 @@ @include mq(lg) { &:hover { - background-color: $color-green2; + background-color: hsla(138, 66%, 41%, 1); } } &:active { - background-color: $color-green3; + background-color: hsla(138, 50%, 41%, 1); } } .erro-add-cart { bottom: -55px; - color: $color-pink; + color: hsla(348, 83%, 58%, 1); position: absolute; font-weight: 700; } } .compra-segura { - color: $color-black3; + color: #19273d; font-size: 10px; max-width: 270px; text-align: center; @@ -687,20 +687,20 @@ } &:before { - border-top: 1px solid $color-gray4; + border-top: 1px solid #eee; margin-top: 25px; padding-bottom: 16px; } &:after { padding-top: 16px; - border-bottom: 1px solid $color-gray4; + border-bottom: 1px solid #eee; } a { background-color: transparent; border: none; - color: $color-black2; + color: #142032; cursor: pointer; font-size: 14px; outline: none; @@ -729,14 +729,14 @@ } #descricao-completa { - color: $color-black2; + color: #142032; @include mq(md, max) { padding: 0 15px; } > div { - border-top: 1px solid $color-gray6; + border-top: 1px solid #e5e5e5; margin-top: 48px; @include mq(md, max) { @@ -753,7 +753,7 @@ } .descricao { - color: $color-gray5; + color: #6d6e70; font-size: 14px; line-height: 18px; max-width: 960px; @@ -791,9 +791,9 @@ width: 100%; button { - background-color: $color-black3; + background-color: #19273d; border: none; - color: $color-white; + color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; @@ -805,12 +805,12 @@ @include mq(lg) { &:hover { - background-color: $color-black; + background-color: #000; } } &:active { - background-color: $color-black2; + background-color: #142032; } } } @@ -820,11 +820,11 @@ .popup-add-cart, .modal-add-cart { align-items: center; - background-color: $color-black2; + background-color: #142032; bottom: 5%; box-shadow: 0px 4px 16px rgba(125, 87, 98, 0.12); border-radius: 100px; - color: $color-white; + color: #fff; display: flex; font-size: 16px; height: 90px; @@ -863,7 +863,7 @@ button { background-color: transparent; border: none; - color: $color-pink; + color: hsla(348, 83%, 58%, 1); cursor: pointer; font-size: 16px; margin-left: 12px; diff --git a/src/arquivos/sass/pages/_user-logado.scss b/src/arquivos/sass/pages/_user-logado.scss index eec7d60..261f31b 100644 --- a/src/arquivos/sass/pages/_user-logado.scss +++ b/src/arquivos/sass/pages/_user-logado.scss @@ -8,8 +8,8 @@ body.minhaConta { } h1 { - border-bottom: 1px solid $color-gray; - color: $color-black2; + border-bottom: 1px solid hsla(0, 0%, 90%, 1); + color: #142032; font-size: 30px; margin-bottom: 28px; padding: 24px 14px 16px; diff --git a/src/arquivos/sass/partials/_breadcrumb.scss b/src/arquivos/sass/partials/_breadcrumb.scss index d0e82a7..58ecbd6 100644 --- a/src/arquivos/sass/partials/_breadcrumb.scss +++ b/src/arquivos/sass/partials/_breadcrumb.scss @@ -20,7 +20,7 @@ a:after { content: "Home"; font-size: 14px; - border-right: 1px solid $color-black2; + border-right: 1px solid #142032; margin-right: -9px; padding: 0px 9px 0px 0; } @@ -34,8 +34,8 @@ } a { - border-right: 1px solid $color-black2; - color: $color-black2; + border-right: 1px solid #142032; + color: #142032; margin-right: 7px; padding: 0px 9px 0px 0; } diff --git a/src/arquivos/sass/partials/_flags.scss b/src/arquivos/sass/partials/_flags.scss index 61df5a9..fbfc05e 100644 --- a/src/arquivos/sass/partials/_flags.scss +++ b/src/arquivos/sass/partials/_flags.scss @@ -7,7 +7,7 @@ p { background-repeat: no-repeat; - color: $color-white; + color: #fff; display: none; font-size: 11px; float: right; @@ -19,7 +19,7 @@ text-indent: -9999px; &.produto-off { - background: $color-black2; + background: #142032; display: table; float: left; text-indent: 0; @@ -32,7 +32,7 @@ } &.novo { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); border-radius: 5px; display: table; float: left; diff --git a/src/arquivos/sass/partials/_footer.scss b/src/arquivos/sass/partials/_footer.scss index 4216cff..5699a6c 100644 --- a/src/arquivos/sass/partials/_footer.scss +++ b/src/arquivos/sass/partials/_footer.scss @@ -3,10 +3,10 @@ /*-------------------------------------------------------------*/ .footer { - background-color: $color-black2; + background-color: #142032; .institucional-info { - color: $color-white; + color: #fff; font-size: 14px; margin: auto; max-width: 950px; @@ -51,7 +51,7 @@ } a { - color: $color-white; + color: #fff; } .institucional-links { @@ -61,7 +61,7 @@ .contato-sac { font-size: 12px; @include mq(md, max) { - border-bottom: 1px solid $color-black3; + border-bottom: 1px solid #19273d; padding: 10px 0 20px; } @@ -122,12 +122,12 @@ } .selos { - border-top: 1px solid $color-black3; + border-top: 1px solid #19273d; padding: 5px 0; text-align: center; @include mq(md, min) { - border-bottom: 1px solid $color-black3; + border-bottom: 1px solid #19273d; } .col-12 { @@ -147,12 +147,12 @@ padding-bottom: 10px; @include mq(md, max) { - border-bottom: 1px solid $color-black3; + border-bottom: 1px solid #19273d; padding-bottom: 25px; } @include mq(md, min) { - border-right: 1px solid $color-gray; + border-right: 1px solid hsla(0, 0%, 90%, 1); margin-right: 20px; padding-right: 20px; } @@ -191,7 +191,7 @@ } p { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); margin: 0; @include mq(md, max) { @@ -206,7 +206,7 @@ } a { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); display: inline-block; } @@ -226,8 +226,8 @@ a:nth-child(2) { @include mq(md, max) { - border-left: 1px solid $color-gray; - border-right: 1px solid $color-gray; + border-left: 1px solid hsla(0, 0%, 90%, 1); + border-right: 1px solid hsla(0, 0%, 90%, 1); margin-right: 20px; margin-left: 20px; padding-right: 15px; @@ -243,8 +243,8 @@ } .mobile-bottom-options { - background-color: $color-white; - border-top: 1px solid $color-gray; + background-color: #fff; + border-top: 1px solid hsla(0, 0%, 90%, 1); bottom: 0; left: 0; margin-bottom: -65px; @@ -326,10 +326,10 @@ } .amount-items { - background-color: $color-black2; + background-color: #142032; border-radius: 50%; bottom: 2px; - color: $color-white; + color: #fff; font-size: 10px; line-height: 1.3; min-width: 19px; diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index 63fa6b6..15ca6df 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -1,411 +1,3 @@ -/***************************************************************/ -/**-- Header ------------------------------********************/ -/*-------------------------------------------------------------*/ -#ajaxBusy { - position: absolute; - top: 0; - left: 0; - background: #fff; - z-index: 15; - padding: 0px 16px; - line-height: 0.1; - opacity: 0.75; - - &::after { - @include pseudo(inline-block); - border: solid 1px; - padding: 4px; - line-height: 0; - position: absolute; - right: 2px; - top: 35%; - border-color: $color-pink3 $color-gray4 $color-gray4 $color-gray4; - animation: spin 0.5s linear infinite; - border-radius: 50%; - } -} -header { - background: rgba(255, 255, 255, 0.95); - top: 0; - transition: all 0.2s ease-in-out; - - &.fixed { - box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25); - position: fixed; - top: -30px; - left: 0; - right: 0; - z-index: 10; - - @include mq(md, max) { - position: absolute; - } - - .pink-bar { - opacity: 0; - visibility: hidden; - } - } - - &.fixed-hide:not(.menu-mobile-open):not(.mini-cart-open):not(:hover) { - top: -130px; - opacity: 0; - visibility: hidden; - pointer-events: none; - } - - .pink-bar { - background-color: $color-pink; - opacity: 1; - overflow: hidden; - transition: all 0.2s ease-in-out; - - ul { - margin: 6px 0; - } - - li { - display: inline-block; - - &:not(:last-child) { - margin-right: 8px; - padding-right: 8px; - position: relative; - - &::after { - border-right: 1px solid $color-white; - content: ""; - height: 9px; - position: absolute; - right: 0; - top: 23%; - } - } - } - - a { - color: $color-white; - font-size: 12px; - text-transform: uppercase; - - i { - vertical-align: sub; - } - } - } - - .row { - align-items: center; - } - - .principal { - border-bottom: 1px solid $color-gray; - padding: 20px 0; - position: relative; - - @include mq(md, max) { - padding-bottom: 0; - } - - > .container { - @include mq(md, max) { - max-width: 100%; - } - - @include mq_range(md, xl) { - max-width: 98%; - } - } - } - - .menu-mobile-abrir { - @include mq(lg, min) { - display: none; - } - - button { - border: none; - background-color: transparent; - cursor: pointer; - outline: none; - } - } - - .logo { - text-align: center; - @include mq(md, max) { - padding: 0; - } - - img { - width: auto; - max-width: 100%; - - @include mq(md, max) { - max-width: 100px; - } - } - } - - .busca-desktop { - @include mq(md, max) { - display: none; - } - } - - .busca-mobile { - margin-top: 20px; - padding: 0; - - @include mq(md, min) { - display: none; - } - - .busca { - border-top: 1px solid $color-gray4; - border-bottom-color: $color-gray4; - padding: 5px 0; - } - } - - .busca { - border-bottom: 1px solid $color-black2; - color: $color-black2; - font-size: 14px; - max-width: 330px; - margin: auto; - padding: 0; - text-align: center; - - @include mq(md, max) { - max-width: 100%; - } - - legend, - label, - select { - display: none; - } - - input { - border: none; - outline: none; - padding: 8px 8px 8px 0; - - &.fulltext-search-box { - background-color: transparent; - max-width: 300px; - margin-right: -5px; - width: 85%; - - @include mq(md, max) { - max-width: 100%; - } - - @include mq_range(md, lg) { - width: 80%; - } - } - - &.btn-buscar { - background-color: transparent; - cursor: pointer; - font-size: 0; - padding: 8px; - - @extend .sprite; - @extend .sprite-lupa; - } - } - } - - .util-links { - align-items: center; - display: flex; - justify-content: flex-end; - text-align: right; - - @include mq(md, max) { - padding-left: 0; - } - } - - .links-usuario { - display: inline-block; - margin: 0 24px; - padding: 0 24px; - position: relative; - - @include mq(md, max) { - margin: 0 14px; - padding: 0 14px; - } - - @include mq_range(md, lg) { - margin: 0 16px; - padding: 0 16px; - } - - &::before, - &::after { - border-right: 1px solid $color-black; - content: ""; - height: 19px; - position: absolute; - top: 5px; - } - - &::before { - left: 0; - - @include mq(md, max) { - display: none; - } - } - - &::after { - right: 0; - } - } - - .carrinho { - display: inline-block; - position: relative; - - a { - li:not(.amount-items), - strong, - .title { - display: none; - } - } - - .AmountItemsInCart { - line-height: 0; - } - - .portal-totalizers-ref { - display: inline-block; - vertical-align: top; - position: relative; - - .cartInfoWrapper { - @extend .sprite; - @extend .sprite-sacola; - - @include mq(md, max) { - margin-right: 5px; - } - } - - .amount-items { - background-color: $color-black2; - border-radius: 50%; - bottom: 2px; - color: $color-white; - font-size: 10px; - line-height: 1.3; - min-width: 19px; - text-align: center; - padding: 3px 4px; - position: absolute; - right: -8px; - - @include mq(md, max) { - right: -3px; - } - - em { - font-style: normal; - } - } - } - } -} - -.header-simples { - border-bottom: 1px solid $color-gray; - padding: 18px 0; - a { - color: #333; - } - .compra-segura { - font-weight: 600; - font-size: 17px; - text-align: right; - } - - .header, - .compra-segura { - @include mq("sm", max) { - text-align: center; - padding: 4px 0; - font-size: 12px; - } - } -} - -.ui-autocomplete { - &.autocompleteopen { - display: table !important; - } - - background: white; - padding: 0; - z-index: 999 !important; - width: auto !important; - border: solid 1px #ccc; - box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95); - - li { - padding: 12px 32px 12px 16px; - overflow: hidden; - font-size: 0.9em !important; - - &:nth-child(2n) { - background-color: $color-gray4; - } - a { - font-size: 14px; - cursor: pointer; - } - img { - margin-right: 10px; - width: auto; - vertical-align: middle; - } - } -} - -.ui-autocomplete { - background: white; - border: solid 1px #ccc; - box-shadow: 0px 1px 5px -4.5px rgba(0, 0, 0, 0.95); - max-width: 260px; - padding: 0; - width: auto !important; - z-index: 999 !important; - - &.autocompleteopen { - display: table !important; - } - - li { - padding: 12px 32px 12px 16px; - overflow: hidden; - font-size: 0.9em !important; - - &:nth-child(2n) { - background-color: $color-gray4; - } - a { - font-size: 14px; - cursor: pointer; - } - img { - margin-right: 10px; - width: auto; - vertical-align: middle; - } - } +.page-header { + background-color: $black-500 ; } diff --git a/src/arquivos/sass/partials/_menu.scss b/src/arquivos/sass/partials/_menu.scss index b48f671..bdd8a10 100644 --- a/src/arquivos/sass/partials/_menu.scss +++ b/src/arquivos/sass/partials/_menu.scss @@ -6,7 +6,7 @@ position: initial; @include mq(lg, max) { - background-color: $color-white; + background-color: #fff; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); bottom: 0; left: 0; @@ -35,7 +35,7 @@ .header-menu-mobile { display: none; - border-bottom: 1px solid $color-gray4; + border-bottom: 1px solid #eee; padding: 22px 15px 0; margin: 0 -15px; @@ -63,7 +63,7 @@ top: 17px; &::before { - border-left: 1px solid $color-gray4; + border-left: 1px solid #eee; content: ""; display: block; height: 36px; @@ -79,7 +79,7 @@ &::before, &::after { - border: 1px solid $color-black2; + border: 1px solid #142032; content: ""; display: block; left: 0; @@ -99,8 +99,8 @@ } .busca { - background-color: $color-gray4; - border-top: 1px solid $color-gray6; + background-color: #eee; + border-top: 1px solid #e5e5e5; border-bottom: none; max-width: 100%; margin-top: 22px; @@ -127,15 +127,15 @@ } &::-webkit-scrollbar-track { - background-color: $color-gray; + background-color: hsla(0, 0%, 90%, 1); } &::-webkit-scrollbar-thumb { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); } &::-webkit-scrollbar-thumb:hover { - background-color: darken($color-gray3, 10); + background-color: darken(hsl(0, 0%, 77%), 10); } > li { @@ -149,7 +149,7 @@ display: flex; justify-content: space-between; padding: 0 24px; - border-bottom: 1px solid $color-gray4; + border-bottom: 1px solid #eee; a { font-size: 16px; @@ -161,7 +161,7 @@ &:hover { > a::after { @include mq(lg, min) { - border-bottom-color: $color-pink; + border-bottom-color: hsla(348, 83%, 58%, 1); border-width: 4px; } } @@ -169,7 +169,7 @@ &:not(:last-child) { @include mq(lg, min) { - border-right: 1px solid $color-black; + border-right: 1px solid #000; margin-right: 24px; padding-right: 24px; } @@ -222,12 +222,12 @@ } a { - color: $color-black2; + color: #142032; display: inline-block; } .highlight { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); font-weight: 700; &::before { @@ -246,7 +246,7 @@ } .footer-menu-mobile { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); bottom: 0; left: 0; padding: 17.5px 15px; @@ -259,7 +259,7 @@ } a { - color: $color-white; + color: #fff; font-size: 12px; text-transform: uppercase; @@ -286,7 +286,7 @@ } .m3-dropdown-menu { - background-color: $color-white; + background-color: #fff; max-height: 0; opacity: 0; transition: all 0.4s ease-in-out; @@ -298,7 +298,7 @@ width: 100%; @include mq(lg, max) { - border-bottom: 1px solid $color-gray4; + border-bottom: 1px solid #eee; bottom: 64px; margin-left: 100%; max-height: initial; @@ -309,7 +309,7 @@ @include mq(lg, min) { background: rgba(255, 255, 255, 0.95); - border-top: 1px solid $color-gray; + border-top: 1px solid hsla(0, 0%, 90%, 1); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02); padding: 45px 0px 37px; top: 70%; @@ -335,19 +335,19 @@ } &::-webkit-scrollbar-track { - background-color: $color-gray; + background-color: hsla(0, 0%, 90%, 1); } &::-webkit-scrollbar-thumb { - background-color: $color-gray3; + background-color: hsl(0, 0%, 77%); } &::-webkit-scrollbar-thumb:hover { - background-color: darken($color-gray3, 10); + background-color: darken(hsl(0, 0%, 77%), 10); } .btn-voltar { - border-bottom: 1px solid $color-gray4; + border-bottom: 1px solid #eee; padding: 7px 24px; @include mq(lg, min) { @@ -391,7 +391,7 @@ } @include mq(lg, min) { - border-left: 1px solid $color-black; + border-left: 1px solid #000; padding-left: 16px; } @@ -411,7 +411,7 @@ } img { - border-bottom: 5px solid $color-black4; + border-bottom: 5px solid #151728; } } } @@ -451,7 +451,7 @@ text-transform: lowercase; a { - border-bottom: 4px solid $color-pink; + border-bottom: 4px solid hsla(348, 83%, 58%, 1); font-size: 18px; padding: 0; } @@ -460,7 +460,7 @@ &.ver-todos { a { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); font-weight: 700; @include mq(lg, max) { diff --git a/src/arquivos/sass/partials/_prateleira.scss b/src/arquivos/sass/partials/_prateleira.scss index f6ec583..cf644f4 100644 --- a/src/arquivos/sass/partials/_prateleira.scss +++ b/src/arquivos/sass/partials/_prateleira.scss @@ -79,7 +79,7 @@ } button { - background-color: $color-black2; + background-color: #142032; border: none; cursor: pointer; height: 10px; @@ -92,7 +92,7 @@ .slick-active { button { - background-color: $color-pink; + background-color: hsla(348, 83%, 58%, 1); height: 16px; width: 16px; } @@ -100,7 +100,7 @@ } h2 { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); font-size: 24px; margin: 0 0 24px; text-align: center; @@ -188,7 +188,7 @@ line-height: 1.3; } .antigo { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); font-size: 14px; min-height: 18px; text-decoration: line-through; @@ -200,7 +200,7 @@ } .parcelado { - color: $color-gray2; + color: hsla(220, 1%, 43%, 1); font-size: 12px; strong { @@ -225,8 +225,8 @@ } a { - background-color: $color-green; - color: $color-white; + background-color: #2fab61; + color: #fff; display: block; font-size: 14px; letter-spacing: 1px; @@ -236,11 +236,11 @@ @include mq(lg) { &:hover { - background-color: $color-green2; + background-color: hsla(138, 66%, 41%, 1); } &:active { - background-color: $color-green3; + background-color: hsla(138, 50%, 41%, 1); } } } @@ -256,7 +256,7 @@ } .indisponivel { - color: $color-pink; + color: hsla(348, 83%, 58%, 1); font-weight: bold; margin: 5px 0; } diff --git a/src/arquivos/sass/utils/_normalize.scss b/src/arquivos/sass/utils/_normalize.scss index 8b291cf..69d0d98 100644 --- a/src/arquivos/sass/utils/_normalize.scss +++ b/src/arquivos/sass/utils/_normalize.scss @@ -23,7 +23,7 @@ html { */ body { - color: $color-black2; + color: #142032; margin: 0; } diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss index 582b8d1..1692fde 100644 --- a/src/arquivos/sass/utils/_variaveis.scss +++ b/src/arquivos/sass/utils/_variaveis.scss @@ -7,33 +7,9 @@ $font-weight-heavy: 700; $font-height: 1.5; // colors -$color-black: #000; -$color-black2: #142032; -$color-black3: #19273d; -$color-black4: #151728; -$color-gray: hsla(0, 0%, 90%, 1); -$color-gray2: hsla(220, 1%, 43%, 1); -$color-gray3: hsl(0, 0%, 77%); -$color-gray4: #eee; -$color-gray5: #6d6e70; -$color-gray6: #e5e5e5; - -$color-white: #fff; -$color-white2: #f5f5f5; - -$color-pink: #f71963; -$color-pink2: hsla(348, 83%, 72%, 1); -$color-pink3: hsla(348, 83%, 58%, 1); - -$color-purple: hsla(266, 70%, 52%, 1); - -$color-green: #2fab61; -$color-green2: hsla(138, 66%, 41%, 1); -$color-green3: hsla(138, 50%, 41%, 1); -$color-green4: hsla(138, 59%, 34%, 1); - -// universal +$black-500: #000000; +$white-500: #ffffff; // Grid breakpoints @@ -46,13 +22,9 @@ $grid-breakpoints: ( ) !default; $z-index: ( - menu: 15, - popup-add-cart: 10, - dropdown: 10, - flag-prateleira: 5, - comprar-flutuante: 5, - avise-me: 5, - scroll-top: 7, - header-fixo: 10, - popup-user: 15, + level-1: 5, + level-2: 10, + level-3: 15, + level-4: 20, + level-5: 25, ) !default; diff --git a/src/template-pagina/sub-templates/eleonoraotz-header.html b/src/template-pagina/sub-templates/eleonoraotz-header.html index 06d61e1..d8e8e7b 100644 --- a/src/template-pagina/sub-templates/eleonoraotz-header.html +++ b/src/template-pagina/sub-templates/eleonoraotz-header.html @@ -1,160 +1,11 @@ -
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-

- - Compra 100% segura -

- -
- -
-
- -
- - - Entrar/Meus pedidos - -
-
- -
-
-
- -
-
-
- - - -
-
- -
- - -
- -
-
-
-
-
-
-
-
- -
-
-
-
+
+
+ + + + + + +