diff --git a/src/settings/styles/utils/helpers/_functions.scss b/src/settings/styles/utils/helpers/_functions.scss index e69de29..751a46d 100644 --- a/src/settings/styles/utils/helpers/_functions.scss +++ b/src/settings/styles/utils/helpers/_functions.scss @@ -0,0 +1,7 @@ +@function fluid($width, $design-width) { + $width: calc($width / $design-width * 100); + + $width: quote($width + '%'); + + @return unquote($width); +} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index b7ffa68..bf19016 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -1,5 +1,9 @@ +@use '../../settings/styles/utils/helpers/functions' as function; + .header { - position: relative; + position: sticky; + top: 0; + left: 0; padding: 25px 0; background-color: var(--clr-common-black); @@ -7,6 +11,10 @@ @media screen and (min-width: 1025px) { padding: 25px 0 0; } + + @media screen and (min-width: 2500px) { + min-height: 162px; + } } .content { @@ -16,6 +24,27 @@ padding: 0 16px; margin-bottom: 27.14px; + + @media screen and (min-width: 1025px) { + width: #{function.fluid(1080px, 1280px)}; + padding: 0; + margin: 0 auto 27.14px; + } + + @media screen and (min-width: 2500px) { + width: #{function.fluid(2299.68px, 2500px)}; + margin-bottom: 22px; + } +} + +.logo { + @media screen and (min-width: 1025px) { + width: function.fluid(136px, 1080px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(265.62px, 2299.68px); + } } .search { @@ -24,7 +53,7 @@ justify-content: center; min-height: auto; - height: 36px; + min-height: 36px; border: 2px solid var(--clr-gray-150); border-radius: 5px; @@ -32,7 +61,8 @@ input { width: 100%; - height: 36px; + min-height: 36px; + font-size: var(--txt-normal); padding: 0 9px 0 16px; border-radius: 5px 0 0 5px; } @@ -47,6 +77,27 @@ background-color: var(--clr-common-white); } + @media screen and (min-width: 1025px) { + button { + width: 50px; + } + } + + @media screen and (min-width: 2500px) { + &, + input { + min-height: 57px; + } + + button { + width: 56.85px; + + img { + width: 35.15px; + height: 35.15px; + } + } + } } .actions-top, @@ -56,6 +107,18 @@ a { color: var(--clr-common-white); + font-size: var(--txt-normal); + } +} + +.actions-top { + gap: 55px; + + @media screen and (min-width: 2500px) { + img { + width: 54.68px; + height: 54.68px; + } } } @@ -68,7 +131,7 @@ } } -// remove action link for small devices and added for large devices 1025 > x +// remove action top link for small devices and added for large devices 1025 > x .actions-top { a { display: none; @@ -92,7 +155,14 @@ transition: 300ms ease; &-content { - width: 90%; + width: function.fluid(988px, 1024px); + height: 100vh; + } + } + + @media screen and (max-width: 768px) { + &-content { + width: function.fluid(339px, 375px); height: 100vh; } } @@ -120,7 +190,10 @@ a { margin-bottom: 12px; + + font-size: var(--txt-normal); font-weight: 500; + color: var(--clr-gray-400); } } @@ -168,6 +241,16 @@ } } +.search-top { + @media screen and (min-width: 1025px) { + width: function.fluid(264px, 1080px); + } + + @media screen and (min-width: 2500px) { + width: function.fluid(515.62px, 2299.68px); + } +} + /*|[X]o-o-o-o[O]|*\ |=| SEARCH BOXS |=| \*|[O]o-o-o-o[X]|*/ diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx index 02b442c..ddce279 100644 --- a/src/template/Header/index.tsx +++ b/src/template/Header/index.tsx @@ -1,4 +1,5 @@ import logoImg from '../../assets/m3-logo-small.png' +import logoMediumImg from '../../assets/m3-logo-medium.png' import searchIcon from '../../assets/icons/search.svg' import cartIcon from '../../assets/icons/minicart.svg' import openIcon from '../../assets/icons/hamburger.svg' @@ -49,6 +50,10 @@ export const Header = () => { + logo da M3 Academy