feat: responsividade header telas menores 1280

2023-01-01 19:04:29 -03:00 · 2023-01-01 19:04:29 -03:00 · 21979eb7f0
commit 21979eb7f0
parent db7eeab7b5
1 changed files with 163 additions and 0 deletions
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@ -0,0 +1,163 @@
+@import "../../styles/utils/variaveis";
+
+header,
+ul {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: 1024px) {
+        display: grid;
+        grid-template-areas:
+            "menu logo cart"
+            "input input input";
+    }
+}
+
+header {
+    background-color: $color-black;
+    padding: 22px 100px;
+    border-bottom: solid 1px $color-gray-600;
+    justify-content: space-between;
+
+    @media (max-width: 1024px) {
+        padding: 25px 16px;
+    }
+
+    .menu-mobile {
+        display: none;
+
+        @media (max-width: 1024px) {
+            display: block;
+            grid-area: menu;
+        }
+    }
+
+    .logo-m3-academy {
+        cursor: pointer;
+        width: 136px;
+        height: 25.86px;
+
+        @media (max-width: 1024px) {
+            grid-area: logo;
+            margin: 0 auto;
+        }
+    }
+
+    .search-bar {
+        width: 24.815%;
+        height: 36px;
+
+        @media (max-width: 1024px) {
+            grid-area: input;
+            width: 100%;
+            margin-top: 25px;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 8px 16px;
+            border: 2px solid $color-gray-700;
+            border-radius: 5px;
+
+            color: $color-gray-500;
+            font-family: $font-family-Roboto;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+
+            &::placeholder {
+                color: $color-gray-500;
+                font-family: $font-family-Roboto;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16.41px;
+            }
+
+            &:focus {
+                outline: none;
+            }
+
+            @media (max-width: 1024px) {
+                padding: 8px 16px;
+            }
+        }
+
+        .icon-lupa {
+            cursor: pointer;
+            position: relative;
+            top: -27px;
+            float: right;
+            margin-right: 18px;
+        }
+    }
+
+    .right {
+        display: flex;
+        align-items: center;
+        gap: 55px;
+
+        @media (max-width: 1024px) {
+            grid-area: cart;
+            justify-content: flex-end;
+        }
+
+        .btn-entrar {
+            cursor: pointer;
+            text-transform: uppercase;
+            color: $color-white;
+            font-style: normal;
+            font-weight: 400;
+
+            font-size: 14px;
+            line-height: 16px;
+
+            @media (max-width: 1024px) {
+                display: none;
+            }
+        }
+    }
+}
+
+nav {
+    background-color: $color-black;
+    padding: 14px 100px;
+
+    @media (max-width: 1024px) {
+        display: none;
+    }
+
+    ul {
+        gap: 55px;
+
+        li a {
+            cursor: pointer;
+            text-transform: uppercase;
+            color: $color-white;
+            font-family: "Roboto";
+            font-style: normal;
+            font-weight: 500;
+
+            font-size: 14px;
+            line-height: 16px;
+        }
+    }
+}
+
+/* clears the ‘X’ from Internet Explorer */
+input[type="search"]::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+}
+input[type="search"]::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+}
+/* clears the ‘X’ from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+}