fix(menu): tweak menu styles

telerik · Jan 14, 2017 · 9f3b3da · 9f3b3da
1 parent 815653f
commit 9f3b3da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 23 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -54,6 +54,7 @@ $input-calc-height: #{$form-line-height-em} + #{$input-padding-y * 2};
 $list-item-padding-x: $padding-x !default;
 $list-item-padding-y: $padding-y !default;
 
+$nav-item-margin: 2px !default;
 $nav-item-padding-x: $padding-x-lg !default;
 $nav-item-padding-y: $padding-y-lg !default;
 
@@ -100,9 +101,6 @@ $selected-bg: $accent !default;
 $selected-border: rgba( black, .1 ) !default;
 $selected-gradient: none !default;
 
-$link-text: $accent !default;
-$link-hover-text: darken($accent, 20) !default;
-
 $transition: background-color .2s ease !default;
 
 $error: #f5503e !default;
@@ -242,6 +240,11 @@ $list-item-selected-bg: $selected-bg !default;
 $list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .1) !default;
 
 
+// Link
+$link-text: $accent !default;
+$link-hover-text: darken($accent, 20) !default;
+
+
 // Chart
 $series-a: #ff6358 !default;
 $series-b: #ffd246 !default;

diff --git a/scss/menu/_layout.scss b/scss/menu/_layout.scss
@@ -2,16 +2,16 @@
 
     // Base
     .k-menu {
-        cursor: default;
+        border-width: 0;
+        background: none;
         display: flex;
         flex-direction: row;
         position: relative;
+        cursor: default;
 
         // Item
         .k-item {
-            border-width: 0 1px 0 0;
-            border-style: solid;
-            border-color: inherit;
+            border: 1px solid transparent;
             display: block;
             position: relative;
             user-select: none;
@@ -20,6 +20,7 @@
         // Link
         .k-link {
             padding: $nav-item-padding-y $nav-item-padding-x;
+            color: inherit;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -73,4 +74,4 @@
         }
     }
 
-}
+}
diff --git a/scss/menu/_theme.scss b/scss/menu/_theme.scss
@@ -2,37 +2,26 @@
 
     // Theme
     .k-menu {
-        border-width: 0;
-        color: inherit;
-        background-color: transparent;
 
         .k-item {
-            border-width: 0;
             color: $link-text;
         }
-
-        .k-link {
-            color: inherit;
-        }
-
         .k-item.k-state-hover {
             color: $link-hover-text;
         }
-
-        .k-link.k-state-active {
-            color: $widget-text;
+        .k-item.k-state-active {
+            color: inherit;
         }
     }
     .k-menu-group {
 
         .k-item {
             color: inherit;
         }
-
-        .k-item.k-state-hover > .k-link {
+        .k-item.k-state-hover {
             @include appearance( hovered-list-item );
         }
-        .k-link.k-state-active {
+        .k-item.k-state-active {
             @include appearance( selected-list-item );
         }