Исправляет стили выпадающего меню (#1306)

* Показывает хоткей начиная с 1024px * Устраняет наползание меню на заголовок * Подстраивает иконку закрытия поиска * Учитывает сжатие хэдера * Ровняет хоткеи наждачкой --------- Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Sep 30, 2024 · eea70ea · eea70ea
1 parent 929e69d
commit eea70ea
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/src/styles/blocks/header-button.css b/src/styles/blocks/header-button.css
@@ -97,8 +97,8 @@
 
 @media (width >= 1366px) {
   .header-button-icon--close {
-    width: 37px;
-    height: 37px;
+    width: 36px;
+    height: 36px;
   }
 }
 

diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css
@@ -51,10 +51,36 @@
 @media (width >= 1024px) {
   .header--open .header__menu {
     position: fixed;
+    top: 75px;
+  }
+
+  .header--open .header__controls--shrink + .header__menu {
     top: 55px;
   }
 }
 
+@media (width >= 1366px) {
+  .header--open .header__menu {
+    position: fixed;
+    top: 76px;
+  }
+
+  .header--open .header__controls--shrink + .header__menu {
+    top: 56px;
+  }
+}
+
+@media (width >= 1680px) {
+  .header--open .header__menu {
+    position: fixed;
+    top: 83px;
+  }
+
+  .header--open .header__controls--shrink + .header__menu {
+    top: 63px;
+  }
+}
+
 /* содержимое главного меню (без дропдауна) */
 .header__controls {
   --letter-spacing: -0.06em;
@@ -100,6 +126,7 @@
 
 .header--open .header__controls {
   background-color: var(--color-background);
+  transition: none;
 }
 
 .header__divider {
@@ -123,7 +150,7 @@
 }
 
 @media (width >= 1680px) {
-  .header__controls .header__search {
+  .header__controls .header__search, .header__controls .header__buttons {
     position: relative;
     top: -2px;
   }

diff --git a/src/styles/blocks/hotkey.css b/src/styles/blocks/hotkey.css
@@ -18,7 +18,7 @@
   }
 }
 
-@media not all and (width >= 768px) {
+@media not all and (width >= 1024px) {
   .hotkey {
     display: none;
   }