fix(styling): extra styling shouldn't override default bootstrap style

package.json

@@ -49,12 +49,18 @@
     "postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --output-style compressed",
     "sass-build-task:scss-compile:material-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.bare.scss -o dist/styles/css --output-style compressed",
     "postsass-build-task:scss-compile:material-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.bare.css dist/styles/css/slickgrid-theme-material.bare.css --output-style compressed",
+    "sass-build-task:scss-compile:material-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss -o dist/styles/css --output-style compressed",
+    "postsass-build-task:scss-compile:material-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.lite.css dist/styles/css/slickgrid-theme-material.lite.css --output-style compressed",
     "sass-build-task:scss-compile:salesforce": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss -o dist/styles/css --output-style compressed",
     "postsass-build-task:scss-compile:salesforce": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --output-style compressed",
     "sass-build-task:scss-compile:salesforce-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.bare.scss -o dist/styles/css --output-style compressed",
     "postsass-build-task:scss-compile:salesforce-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.bare.css dist/styles/css/slickgrid-theme-salesforce.bare.css --output-style compressed",
+    "sass-build-task:scss-compile:salesforce-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss -o dist/styles/css --output-style compressed",
+    "postsass-build-task:scss-compile:salesforce-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.lite.css dist/styles/css/slickgrid-theme-salesforce.lite.css --output-style compressed",
     "sass:build": "run-p sass-build-task:scss-compile:*",
+    "presass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/css",
     "sass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass",
+    "postsass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/sass",
     "presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap",
     "sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- -watch",
     "presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material",

src/app/examples/grid-tree-data-hierarchical.component.scss

@@ -1,5 +1,5 @@
 /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss';
+@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss';
 
 /*
   www.OnlineWebFonts.Com

src/app/examples/grid-tree-data-parent-child.component.scss

@@ -1,5 +1,5 @@
 /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
-@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.scss';
+@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss';
 
 .icon {
     align-items: center;

src/app/modules/angular-slickgrid/styles/multiple-select.scss

@@ -0,0 +1,191 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ */
+
+.ms-parent {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+}
+
+.ms-choice {
+    display: block;
+    width: 100%;
+    height: 26px;
+    padding: 0;
+    overflow: hidden;
+    cursor: pointer;
+    border: 1px solid #aaa;
+    text-align: left;
+    white-space: nowrap;
+    line-height: 26px;
+    color: #444;
+    text-decoration: none;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    background-color: #fff;
+}
+
+.ms-choice.disabled {
+    background-color: #f4f4f4;
+    background-image: none;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.ms-choice > span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    padding-left: 8px;
+}
+
+.ms-choice > span.placeholder {
+    color: #999;
+}
+
+.ms-choice > div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 25px;
+    background: url('~/multiple-select.png') left top no-repeat;
+}
+
+.ms-choice > div.open {
+  background: url('~/multiple-select.png') right top no-repeat;
+}
+
+.ms-drop {
+    width: 100%;
+    overflow: hidden;
+    display: none;
+    margin-top: -1px;
+    padding: 0;
+    position: absolute;
+    z-index: 1000;
+    background: #fff;
+    color: #000;
+    border: 1px solid #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.ms-drop.bottom {
+    top: 100%;
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+}
+
+.ms-drop.top {
+    bottom: 100%;
+    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+    box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+}
+
+.ms-search {
+    display: inline-block;
+    margin: 0;
+    min-height: 26px;
+    padding: 4px;
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
+    z-index: 10000;
+}
+
+.ms-search input {
+    width: 100%;
+    height: auto !important;
+    min-height: 24px;
+    padding: 0 20px 0 5px;
+    margin: 0;
+    outline: 0;
+    font-family: sans-serif;
+    font-size: 1em;
+    border: 1px solid #aaa;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    background: #fff url('~/multiple-select.png') no-repeat 100% -22px;
+    background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+    background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('~/multiple-select.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url('~/multiple-select.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+    background: url('~/multiple-select.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+    background: url('~/multiple-select.png') no-repeat 100% -22px, linear-gradient(to top, #ffffff 85%, #eeeeee 99%);
+}
+
+.ms-search, .ms-search input {
+    -webkit-box-sizing: border-box;
+    -khtml-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.ms-drop ul {
+    overflow: auto;
+    margin: 0;
+    padding: 5px 8px;
+}
+
+.ms-drop ul > li {
+    list-style: none;
+    display: list-item;
+    background-image: none;
+    position: static;
+}
+
+.ms-drop ul > li .disabled {
+    opacity: .35;
+    filter: Alpha(Opacity=35);
+}
+
+.ms-drop ul > li.multiple {
+    display: block;
+    float: left;
+}
+
+.ms-drop ul > li.group {
+    clear: both;
+}
+
+.ms-drop ul > li.multiple label {
+    width: 100%;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ms-drop ul > li label {
+    font-weight: normal;
+    display: block;
+    white-space: nowrap;
+}
+
+.ms-drop ul > li label.optgroup {
+    font-weight: bold;
+}
+
+.ms-drop input[type="checkbox"] {
+    vertical-align: middle;
+}
+
+.ms-drop .ms-no-results {
+    display: none;
+}

src/app/modules/angular-slickgrid/styles/slick-plugins.scss

@@ -946,8 +946,12 @@ input.slider-filter-input[type=range] {
   }
 }
 .search-filter {
+  height: $header-input-height;
+
   .slider-value {
     padding: 0;
+    height: 100%;
+
     .input-group-text {
       padding: $slider-filter-number-padding;
       font-size: $slider-filter-number-font-size;

src/app/modules/angular-slickgrid/styles/slick-without-bootstrap-min-styling.scss

@@ -1,45 +1,52 @@
 @import './variables';
 
 /** Bootstrap buttons styling copied and changed slightly for Material Design */
-.btn {
-  cursor: pointer;
-  font-family:  $font-family;
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: 500;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
+.slick-editor-modal, .slick-large-editor-text {
+  .btn {
+    cursor: pointer;
+    font-family:  $font-family;
+    display: inline-block;
+    margin-bottom: 0;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  }
 
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
+  .btn-default {
+    color: $button-primary-color;
+    background-color: #fff;
+    border-color: #ccc;
+  }
 
-.btn-primary {
-  color: #fff;
-  background-color: $primary-color;
-}
+  .btn-primary {
+    color: #fff;
+    background-color: $button-primary-bg-color;
+  }
 
-.btn-xs,
-.btn-group-xs>.btn {
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
+  .btn-xs,
+  .btn-group-xs>.btn {
+    padding: 1px 5px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+  }
+  .btn-sm {
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+  }
 }
 
-.slick-pane {
+.gridPane, .grid-pane, .slick-editor-modal {
   font-family:  $font-family;
 
   .form-control {
     display: block;
     width: 100%;
-    font-size: 14px;
+    font-size: $font-size-base;
     line-height: 1.42857143;
     color: #555;
     background-color: #fff;
@@ -126,4 +133,24 @@
     border-color: lighten($primary-color, 10%);
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3);
   }
+
+  .slick-pagination {
+    .slick-pagination-nav {
+      .pagination > li {
+        a, span {
+          position: relative;
+          float: left;
+          margin-left: -1px;
+        }
+      }
+      .pagination > .disabled > a,
+      .pagination > .disabled > a:focus,
+      .pagination > .disabled > a:hover,
+      .pagination > .disabled > span,
+      .pagination > .disabled > span:focus,
+      .pagination > .disabled > span:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
 }

src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss

@@ -0,0 +1,25 @@
+/*!
+ * SlickGrid custom styling for Material (https://github.com/ghiscoding/angular-slickgrid)
+ * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE)
+ * @author: Ghislain B. (ghiscoding)
+ *//*!
+
+/** SlickGrid Material Theme */
+@import './variables-theme-material';
+@import './roboto-font';
+@import './slick-default-theme';
+@import './slick-grid';
+@import './slick-controls';
+@import './slick-editors';
+@import './slick-plugins';
+@import './slick-pagination';
+@import './slick-footer';
+@import './slickgrid-examples';
+@import './slick-bootstrap';
+@import './ui-autocomplete';
+@import './material-svg-icons';
+@import './material-svg-utilities';
+
+$link-color: $primary-color !default;
+@import './colors.scss';
+@import './extra-styling.scss';