From 2988e8168998a30969b6b9ade5668b4893f9ff88 Mon Sep 17 00:00:00 2001
From: RimmaBuzuluk <rimmysya2000@gmail.com>
Date: Mon, 16 Sep 2024 12:22:19 +0300
Subject: [PATCH] add mixin

---
 src/components/Header/Header.scss             | 75 ++++++++++++-------
 .../Header/NavHeader/NavHeader.scss           | 25 ++++---
 src/components/Main/Main.scss                 | 12 +--
 3 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index dd824a0..d5617f7 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -9,52 +9,71 @@
     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);
@@ -62,25 +81,31 @@
       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
index 7d4b955..5a0cfb0 100644
--- 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,15 +16,16 @@
     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: '';
@@ -31,10 +33,13 @@
       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
index ac36b64..313f478 100644
--- 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;
   }
-  
 }
-