From a1d3fe7bcb8c904edcf9c088ccb428a0eb26fc97 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 28 Dec 2022 00:58:06 -0300 Subject: [PATCH] feat(header): created small styles for hover details in links --- src/settings/styles/global/_config.scss | 1 + .../styles/utils/resources/_colors.scss | 4 + src/template/Header/index.module.scss | 100 ++++++++++++------ 3 files changed, 73 insertions(+), 32 deletions(-) diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index f9fc811..01079bd 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -7,6 +7,7 @@ } --clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')}; + --clr-primary-blue-500: #{map-get(var.$clr-primary-blue, '500')}; @each $name, $value in var.$clr-gray { --clr-gray-#{$name}: #{$value}; diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss index 3268516..d4ffac0 100644 --- a/src/settings/styles/utils/resources/_colors.scss +++ b/src/settings/styles/utils/resources/_colors.scss @@ -9,6 +9,10 @@ $clr-primary-purple: ( '500': #5200ff, ); +$clr-primary-blue: ( + '500': #00c8ff, +); + $clr-gray: ( '100': #fafafa, '150': #f0f0f0, diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index bf19016..a1abc32 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -6,13 +6,16 @@ left: 0; padding: 25px 0; - background-color: var(--clr-common-black); - @media screen and (min-width: 1025px) { + background-color: var(--clr-common-black); +} + +.header { + @media only screen and (min-width: 1025px) { padding: 25px 0 0; } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { min-height: 162px; } } @@ -22,27 +25,29 @@ align-items: center; justify-content: space-between; - padding: 0 16px; + padding: 0px 16px; margin-bottom: 27.14px; +} - @media screen and (min-width: 1025px) { +.content { + @media only screen and (min-width: 1025px) { width: #{function.fluid(1080px, 1280px)}; padding: 0; margin: 0 auto 27.14px; } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: #{function.fluid(2299.68px, 2500px)}; margin-bottom: 22px; } } .logo { - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { width: function.fluid(136px, 1080px); } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: function.fluid(265.62px, 2299.68px); } } @@ -52,7 +57,6 @@ align-items: center; justify-content: center; - min-height: auto; min-height: 36px; border: 2px solid var(--clr-gray-150); border-radius: 5px; @@ -61,12 +65,15 @@ input { width: 100%; - min-height: 36px; - font-size: var(--txt-normal); padding: 0 9px 0 16px; + min-height: 36px; border-radius: 5px 0 0 5px; - } + font-size: var(--txt-normal); + } +} + +.search { button { display: flex; align-items: center; @@ -77,13 +84,16 @@ background-color: var(--clr-common-white); } - @media screen and (min-width: 1025px) { +} + +.search { + @media only screen and (min-width: 1025px) { button { width: 50px; } } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { &, input { min-height: 57px; @@ -106,15 +116,22 @@ align-items: center; a { - color: var(--clr-common-white); + display: block; font-size: var(--txt-normal); + text-transform: uppercase; + color: var(--clr-common-white); + transition: color 200ms linear; + + &:hover { + color: var(--clr-primary-blue-500); + } } } .actions-top { gap: 55px; - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { img { width: 54.68px; height: 54.68px; @@ -126,7 +143,7 @@ .open { display: flex; - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: none; } } @@ -137,7 +154,7 @@ display: none; } - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { a { display: block; } @@ -145,12 +162,14 @@ } .menu { - @media screen and (max-width: 1024px) { + @media only screen and (max-width: 1024px) { position: fixed; - width: 100vw; - height: 100vh; left: -100%; top: 0; + + width: 100vw; + height: 100vh; + background-color: transparent; transition: 300ms ease; @@ -159,40 +178,52 @@ height: 100vh; } } +} - @media screen and (max-width: 768px) { +.menu { + @media only screen and (max-width: 768px) { &-content { width: function.fluid(339px, 375px); height: 100vh; } } +} +.menu { .actions-bottom { width: 100%; height: 78px; + background-color: var(--clr-common-black); } - .actions-bottom, .list { padding: 0 16px; a { display: block; text-transform: uppercase; + transition: color 200ms linear; + + &:hover { + color: var(--clr-primary-blue-500); + } } } +} +.menu { .list { height: calc(100% - 78px); - background-color: var(--clr-common-white); padding-top: 31px; + background-color: var(--clr-common-white); + a { margin-bottom: 12px; - font-size: var(--txt-normal); font-weight: 500; + font-size: var(--txt-normal); color: var(--clr-gray-400); } @@ -205,17 +236,22 @@ justify-content: space-between; } -// menu styles for large devices 1025 > x +// styles for menu is active + .menu { &.active { left: 0; background-color: #0004; } +} - @media screen and (min-width: 1025px) { - width: 100%; +// menu styles for large devices 1025 > x +.menu { + @media only screen and (min-width: 1025px) { display: block; + width: 100%; + .list { display: flex; align-items: center; @@ -242,11 +278,11 @@ } .search-top { - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { width: function.fluid(264px, 1080px); } - @media screen and (min-width: 2500px) { + @media only screen and (min-width: 2500px) { width: function.fluid(515.62px, 2299.68px); } } @@ -259,7 +295,7 @@ .search-top { display: none; - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: flex; } } @@ -273,7 +309,7 @@ width: 100%; } - @media screen and (min-width: 1025px) { + @media only screen and (min-width: 1025px) { display: none; } }