diff --git a/desafio-5/.gitignore b/desafio-5/.gitignore index 51e9aa3..7520d19 100644 --- a/desafio-5/.gitignore +++ b/desafio-5/.gitignore @@ -1,5 +1,6 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. todo.txt +tasksHeader.txt # dependencies /webpack.config.js /node_modules diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss index 4faea65..28c0332 100644 --- a/desafio-5/src/components/modules/header.module.scss +++ b/desafio-5/src/components/modules/header.module.scss @@ -1,12 +1,15 @@ @import "../utils/Variables.scss"; +//desktop + .Header_wrapper { display: flex; color: white; background: black; flex-direction: column; justify-content: space-between; - + height: 22.225vh; + max-height: 162px; // Top-header &-top { @@ -16,11 +19,12 @@ padding: 22px 100px; gap: 10px; width: 100%; - height: 76px; + min-height: 63.333333333333%; border-bottom: 1px solid $-gray-300; &-logo { width: 12.593%; + max-width: 265.61px; margin: 3px 0; img { width: 100%; @@ -28,7 +32,7 @@ } &-Searchbox{ width: 24.445%; - height: 32px; + height: 5.926vh; position: relative; display: flex; align-items: center; @@ -39,18 +43,9 @@ background: $-white; border: 2px solid $-gray-200; border-radius: 5px; - - //digitação - - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: $-gray-400; - } input[placeholder] { + //digitação color: $-gray-400 !important; font-family: 'Roboto'; font-style: normal; @@ -62,12 +57,12 @@ position: absolute; top: 0; right: 0; - margin: 7px 16px; + margin: 2.652% 16px; width: 6.82%; - height: 56.25%; + height: 72%; img{ width: 100%; - height: 100%; + // height: 3.25vh; } } } @@ -92,17 +87,16 @@ &-cart{ img{ + min-width: 28px; width: 100%; - height: 100%; } } } } - //bottom-header &-bottom { - min-height: 44px; + min-height: 36.666666666667%; display: flex; flex-direction: column; justify-content: center; @@ -119,6 +113,7 @@ height: 16px; min-width: 54px; width: 100%; + white-space: nowrap; button{ width: 100%; height: 100%; @@ -134,3 +129,131 @@ } } } + +// 4k + +@media screen and (min-width: 2500px){ + //desktop + +.Header_wrapper { + height: 15.312vh; + max-height: 100%; + + // Top-header + + &-top { + + &-logo { + width: 11.549%; + max-width: 100%; + margin: 3px 0; + img { + width: 100%; + } + } + &-Searchbox{ + width: 24.445%; + height: 5.926vh; + position: relative; + display: flex; + align-items: center; + input{ + width: 100%; + height: 100%; + padding: 7px 36px 7px 16px; + background: $-white; + border: 2px solid $-gray-200; + border-radius: 5px; + } + input[placeholder] { + //digitação + color: $-gray-400 !important; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + button{ + position: absolute; + top: 0; + right: 0; + margin: 2.652% 16px; + width: 6.82%; + height: 72%; + img{ + width: 100%; + // height: 3.25vh; + } + } + } + &-menu{ + margin: 3px 0; + display: flex; + gap: 55px; + width: 12.594%; + height: 90.35%; + order: 2; + + &-login{ + text-transform: uppercase; + color: $-white; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + + } + + &-cart{ + img{ + min-width: 28px; + width: 100%; + } + } + } +} + //bottom-header + + &-bottom { + min-height: 36.666666666667%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 14px 100px; + gap: 10px; + &-navigator{ + width: 32.686%; + ul{ + list-style: none; + display: flex; + gap: 55px; + li{ + height: 16px; + min-width: 54px; + width: 100%; + white-space: nowrap; + button{ + width: 100%; + height: 100%; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $-white; + } + } + } + } + } +} +} +//Mobile + +@media screen and (min-width: 280px) and (max-width: 490px) { + + +}