feature: left-menu: new classes

src/styles/base/main.scss

@@ -23,7 +23,7 @@
 }
 
 .segment {
-  background: white;
+  /*background: white;*/
   position: relative;
 
   .content-vertically-centered {
@@ -66,12 +66,18 @@
   &.margin-left {
     margin-left: 20px;
   }
+  &.margin-right-small {
+    margin-right: 15px;
+  }
   &.margin-right {
     margin-right: 20px;
   }
   &.padding {
     padding: 14px;
   }
+  &.padding-large {
+    padding: 20px;
+  }
 }
 
 .avatar {
@@ -105,10 +111,22 @@
   box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
 }
 
+.bg-color-heading {
+  background: var(--color-heading);
+}
+
+.bg-color-white {
+  background: white;
+}
+
 .text-bold {
   font-weight: 600;
 }
 
+.text-uppercase {
+  text-transform: uppercase;
+}
+
 .text-xsmall {
   font-size: 12px;
 }
@@ -141,6 +159,10 @@
   color: var(--color-heading);
 }
 
+.text-color-white {
+  color: white;
+}
+
 .text-letter-spacing-wide {}
 
 .text-letter-spacing-wider {}
@@ -148,10 +170,12 @@
 .text-letter-spacing-widest {}
 
 .text-letter-spacing-large {
-  letter-spacing: 0.38px;
+  letter-spacing: 0.2px;
 }
 
-.text-letter-spacing-larger {}
+.text-letter-spacing-larger {
+  letter-spacing: 0.38px;
+}
 
 
 .logo {

src/styles/base/menu-left.scss

@@ -1,7 +1,8 @@
 #main__menu {
-  background-color: var(--color-menu-background);
-  color: var(--color-menu-text);
+  /*background-color: var(--color-menu-background);
+  color: var(--color-menu-text);*/
   /*transition: flex-basis 0.5s ease-in-out;*/
+  width: 256px;
 
   &.open {
     transform: translateX(0);
@@ -13,6 +14,10 @@
 
   solid-router {
     .menu-wrapper {
+
+      .menu {
+        border-bottom: none;
+      }
       .menu-icon.icon-arrow-up {
         visibility: hidden;
       }
@@ -26,7 +31,7 @@
           }
 
           .menu-chevron {
-            transform: rotate(180deg);
+            transform: rotateX(180deg);
           }
         }
       }
@@ -38,16 +43,21 @@
 
     .menu {
       cursor: pointer;
+      border-bottom: 1px solid #4F5E72;
       display: flex;
-      flex-direction: row-reverse;
-      font-weight: bold;
-      padding: 1.2rem;
+      align-items: center;
+      /*flex-direction: row-reverse;*/
+      /*font-weight: bold;
+      padding: 1.2rem;*/
 
       &[active] {
-        background-color: var(--color-menu-highlight-primary);
+        background-color: var(--color-third);
+        color: var(--color-heading);
+        border-bottom: none;
 
         .menu-icon:before {
-          background-color: var(--color-menu-icon-background-active);
+          background-color: var(--color-heading);
+          color: white;
         }
 
         .menu-notification>solid-display>div:first-child {
@@ -56,15 +66,15 @@
       }
 
       .menu-icon {
-        align-items: center;
+        /*align-items: center;
         display: flex;
         justify-content: center;
         flex-grow: 0;
         flex-shrink: 0;
         font-size: 1.7rem;
-        width: 3.2em;
+        width: 3.2em;*/
 
-        &:before {
+        &::before {
           border-radius: 100%;
           height: 1.9em;
           line-height: 1.9em;
@@ -72,7 +82,7 @@
         }
       }
 
-      .menu-label {
+      /*.menu-label {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
@@ -82,16 +92,16 @@
         letter-spacing: 0.017rem;
         text-transform: uppercase;
         width: 8em;
-      }
+      }*/
 
-      .menu-chevron {
+      /*.menu-chevron {
         align-items: center;
         display: flex;
         flex-grow: 0;
         flex-shrink: 0;
         justify-content: center;
         width: 2em;
-      }
+      }*/
 
       >solid-display {
         display: block;
@@ -295,8 +305,7 @@
 
     .divider {
       height: 1px;
-      background-color: var(--color-grey-11);
-      opacity: 0.2;
+      background-color: #4F5E72;
     }
   }
 }