feat(styling): add more SASS variables to header menu

ghiscoding · Jan 6, 2020 · 373641f · 373641f
1 parent 4dec6a4
commit 373641f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/app/examples/grid-headermenu.component.scss b/src/app/examples/grid-headermenu.component.scss
@@ -1,3 +1,12 @@
+$header-menu-button-border:               1px solid #cfcfcf;
+$header-menu-button-border-width:         0px 1px;
+$header-menu-button-icon:                 "\f0d7";
+$header-menu-button-width:                16px;
+$header-menu-button-padding:              10px 0 0 3px;
+
+/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
+@import '../modules/angular-slickgrid/styles/slickgrid-theme-bootstrap.scss';
+
 .blue {
   color: rgb(73, 73, 255);
 }

diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss
@@ -287,7 +287,11 @@ $header-menu-bg-color:                    #ffffff !default;
 $header-menu-button-bg-color:             #ffffff !default;
 $header-menu-border:                      1px solid #BFBDBD !default;
 $header-menu-button-border:               $header-menu-border !default;
+$header-menu-button-border-width:         0px !default;
+$header-menu-button-icon:                 "\f13a" !default;
+$header-menu-button-padding:              0px !default;
 $header-menu-border-radius:               2px !default;
+$header-menu-button-width:                14px !default;
 $header-menu-min-width:                   175px !default;
 $header-menu-padding:                     6px !default;
 $header-menu-item-border:                 1px solid transparent !default;

diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss
@@ -260,17 +260,20 @@
   cursor: pointer;
   display: none;
   position: absolute;
+  border: $header-menu-button-border;
+  border-width: $header-menu-button-border-width;
+  padding: $header-menu-button-padding;
 
   // The next few items are already defined in the slick-headermenu file and it should stay that way, *unless* you also replace the button image included there.
   bottom: 0;
   right: 3px;
   top: 0;
-  width: 14px;
+  width: $header-menu-button-width;
 }
 .slick-header-menubutton:before {
   font-family: $icon-font-family;
   font-size: 14px;
-  content: "\f13a";
+  content: $header-menu-button-icon;
 }
 
 .slick-header-column:hover {
@@ -290,14 +293,6 @@
   cursor: default;
   display: inline-block;
 
-  button {
-    border: $header-menu-button-border;
-    background-color: $header-menu-button-bg-color;
-    width: 45px;
-    padding: 4px;
-    margin: 4px 4px 4px 0;
-  }
-
   .filter {
     border: 1px solid #BFBDBD;
     font-size: 8pt;