styled the header usernav

2026-09-11 19:06:10 +00:00 · 2021-05-08 13:31:26 +03:00
parent 3f018ba17a
commit 42355f9430
16 changed files with 224 additions and 99 deletions
@@ -0,0 +1,121 @@
+.header {
+  display: flex;
+  font-size: $normal-font-size;
+
+  // main axis
+  justify-content: space-between;
+
+  // cross axis
+  align-items: center;
+
+  &__logo {
+    height: 3.25rem;
+    margin-left: 2rem;
+  }
+
+  &__search {
+    flex: 0 0 40%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--input {
+      font-family: inherit;
+      font-size: inherit;
+      background-color: $color-grey-light-2;
+      border: none;
+      color: inherit;
+      padding: 0.7rem 2rem;
+      border-radius: 100px;
+      width: 90%;
+      transition: all 0.2s;
+      margin-right: -3.25rem;
+
+      &:focus {
+        outline: none;
+        width: 100%;
+        background-color: $color-grey-light-3;
+      }
+
+      &::-webkit-input-placeholder {
+        font-weight: 100;
+        color: $color-grey-light-4;
+      }
+    }
+
+    &--input:focus + &--button {
+      background-color: $color-grey-light-3;
+    }
+
+    &--button {
+      border: none;
+      background-color: $color-grey-light-2;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:active {
+        transform: translateY(2px);
+      }
+    }
+
+    &--icon {
+      height: 2rem;
+      width: 2rem;
+      fill: $color-grey-dark-3;
+    }
+  }
+
+  &__user-nav {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    & > * {
+      padding: 0 2rem;
+      cursor: pointer;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    & > *:hover {
+      background-color: $color-grey-light-2;
+    }
+
+    &--icon-box {
+      position: relative;
+    }
+
+    &--icon {
+      height: 2.25rem;
+      width: 2.25rem;
+      fill: $color-grey-dark-2;
+    }
+
+    &--notification {
+      font-size: 0.8rem;
+      font-weight: 800;
+      height: 1.75rem;
+      width: 1.75rem;
+      border-radius: 50%;
+      background-color: $color-primary;
+      color: $color-white;
+      position: absolute;
+      top: 1.5rem;
+      right: 1.1rem;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &--user-photo {
+      height: 3.75rem;
+      border-radius: 50%;
+      margin-right: 1rem;
+    }
+  }
+}