feat(styling): improve header menu styling

ghiscoding · Oct 22, 2019 · ba28d2b · ba28d2b
1 parent 9d597c4
commit ba28d2b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss
@@ -183,11 +183,12 @@ $header-menu-button-border:               $header-menu-border !default;
 $header-menu-border-radius:               2px !default;
 $header-menu-min-width:                   175px !default;
 $header-menu-padding:                     4px !default;
-$header-menu-item-border:                 none !default;
+$header-menu-item-border:                 1px solid transparent !default;
 $header-menu-item-padding:                2px 4px !default;
+$header-menu-item-hover-border:           1px solid #BFBDBD !default;
+$header-menu-item-hover-color:            #fafafa !default;
 $header-menu-icon-height:                 16px !default;
 $header-menu-icon-margin-right:           4px !default;
-$header-menu-icon-hover-color:            rgb(243, 243, 243) !default;
 $header-menu-icon-width:                  16px !default;
 $header-menu-divider-height:              1px !default;
 $header-menu-divider-margin:              8px 3px !default;

diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
@@ -122,6 +122,10 @@
   padding: $header-menu-item-padding;
   list-style: none outside none;
   margin: 0;
+  &:hover {
+    border: $header-menu-item-hover-border;
+    background-color: $header-menu-item-hover-color;
+  }
 
   &.slick-header-menuitem-divider {
     cursor: default;
@@ -131,6 +135,10 @@
     height: $header-menu-divider-height;
     margin: $header-menu-divider-margin;
     background-color: $header-menu-divider-color;
+    &:hover {
+      border: none;
+      background-color: transparent;
+    }
   }
 }
 .slick-header-menuitem-divider.slick-header-menuitem:hover {
@@ -160,17 +168,12 @@
   vertical-align: middle;
 }
 
-.slick-header-menuitem:hover {
-  border-color: #BFBDBD;
-  background-color: $header-menu-icon-hover-color;
-}
+/* Disabled */
 .slick-header-menuitem-disabled {
   border-color: transparent !important;
   background: inherit !important;
-}
-/* Disabled */
-.slick-header-menuitem-disabled {
   color: silver;
+  cursor: inherit;
 }
 
 // ----------------------------------------------