From e8fb2e817b29d88702fa678b9654543806c15d13 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Sat, 22 Feb 2020 04:37:33 +0300
Subject: [PATCH] menu style update

---
 src/components/Menu/styles.css | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/Menu/styles.css b/src/components/Menu/styles.css
index 89bfcd4e..be3cb18d 100644
--- a/src/components/Menu/styles.css
+++ b/src/components/Menu/styles.css
@@ -1,43 +1,41 @@
 .menu {
     display: flex;
     align-items: flex-start;
+    flex-wrap: wrap;
 
     list-style: none;
 }
 
 .menuItem {
     position: relative;
-    border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
+    border-top: var(--menu-mark-thickness) solid rgba(0, 0, 0, 0);
 }
 
-.menuItem.desktop {
-    padding: 0.3em 0.2em 0;
-    margin-right: 1em;
-
-    font-size: var(--normal-font-size);
-}
+/* MOBILE */
 
 .menuItem.mobile {
-    padding: 0.3em 0.5em;
-    margin-bottom: var(--half-margin);
+    flex-direction: column;
 
     font-size: 1.25em;
-    /* color: white; */
     color: var(--color-text-opposite);
 }
 
-.menuItem:last-child {
-    margin-right: 0;
-}
-
-.menuItem.selected {
-    font-weight: bold;
-}
-
 .menuItem.mobile.selected {
     background-color: var(--color-back-opposite);
 }
 
+/* DESKTOP */
+
+.menuItem.desktop {
+    padding: var(--size-xs) var(--size-s);
+    margin-bottom: var(--size-s);
+    margin-right: var(--size-s);
+}
+
+.menuItem.desktop:last-child {
+    margin-right: 0;
+}
+
 .menuItem.desktop.selected {
     border-top-color: var(--color-back-opposite);
 }