add mixin

fs-jun24-team-3 · Sep 16, 2024 · 2988e81 · 2988e81
1 parent 5cfa1b0
commit 2988e81
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 41 deletions.
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
@@ -9,78 +9,103 @@
     display: flex;
     align-items: center;
   }
+
   &__logo {
-    width: 80px;
-    height: 28px;
-    margin-right: 48px;
-    margin-left: 24px;
-    @media (max-width: 1200px) {
-      width: 64px;
-      height: 20px;
+    width: 64px;
+    height: 20px;
+    margin-right: 32px;
+    margin-left: 16px;
+
+    @include onDesktop {
+      width: 80px;
+      height: 28px;
+      margin-right: 48px;
+      margin-left: 24px;
     }
   }
+
   &__icons {
     display: flex;
+
     &--like {
+      display: none;
       width: 16px;
       height: 16px;
       background-image: url(../../img/headerIcon/like.png);
-      display: block;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
-      margin: 24px;
-      @media (max-width: 1200px) {
+      margin: 16px;
+
+      @include onTablet {
         margin: 16px;
+        display: block;
       }
-      @media (max-width: 640px) {
-        display: none;
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
       }
     }
+
     &--basket {
+      display: none;
       width: 16px;
       height: 16px;
-      display: block;
       background-image: url(../../img/headerIcon/basket.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
-      margin: 24px;
-      @media (max-width: 1200px) {
+      margin: 16px;
+
+      @include onTablet {
         margin: 16px;
+        display: block;
       }
-      @media (max-width: 640px) {
-        display: none;
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
       }
+
+      // @include onMobile {
+      //   display: none;
+      // }
     }
+
     &--menu {
-      display: none;
       width: 16px;
       height: 16px;
       background-image: url(../../img/headerIcon/Menu.png);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       margin: 16px;
-      @media (max-width: 640px) {
-        display: block;
+
+      @include onTablet {
+        display: none;
       }
     }
   }
+
   &__icon--like {
     display: block;
     border-right: 1px solid #e2e6e9;
     border-left: 1px solid #e2e6e9;
-    @media (max-width: 640px) {
-      display: none;
+    display: none;
+
+    @include onTablet {
+      display: block;
     }
   }
+
   &__icon--menu {
-    display: none;
+    display: block;
     border-right: 1px solid #e2e6e9;
     border-left: 1px solid #e2e6e9;
-    @media (max-width: 640px) {
-      display: block;
+
+    @include onTablet {
+      display: none;
     }
   }
 }
diff --git a/src/components/Header/NavHeader/NavHeader.scss b/src/components/Header/NavHeader/NavHeader.scss
@@ -1,9 +1,10 @@
 .nav {
-  display: flex;
+  display: none;
+
   align-items: center;
   height: 100%;
-  @media (max-width: 640px) {
-    display: none;
+  @include onTablet {
+    display: flex;
   }
   &__icon {
     height: 100%;
@@ -15,26 +16,30 @@
     line-height: 11px;
     letter-spacing: 4%;
     color: #89939a;
-
-    &:not(:last-child) {
-      margin-right: 64px;
-    }
-    @media (max-width: 1200px) {
+    @include onTablet {
       &:not(:last-child) {
         margin-right: 36px;
       }
     }
+    @include onDesktop {
+      &:not(:last-child) {
+        margin-right: 64px;
+      }
+    }
 
     &--active:after {
       content: '';
       position: absolute;
       display: block;
       width: 100%;
       height: 3px;
-      bottom: -26px;
-      @media (max-width: 1200px) {
+
+      @include onTablet {
         bottom: -18px;
       }
+      @include onDesktop {
+        bottom: -26px;
+      }
       background-color: #000;
     }
   }

diff --git a/src/components/Main/Main.scss b/src/components/Main/Main.scss
@@ -1,5 +1,5 @@
-@import '../../styles/mixins/mixins.scss';
-
+// @import '../../styles/mixins/mixins.scss';
+@import '../../styles/utils/mixins';
 .main {
   grid-column: 1 / -1;
 
@@ -10,10 +10,10 @@
   &__content {
     @include mainContentGrid;
   }
-
-  &__slider, &__categories, &__banner-slider {
+
+  &__slider,
+  &__categories,
+  &__banner-slider {
     display: flex;
   }
-
 }
-