fix(styling): cleanup CSS files to ship smaller bundle

- remove duplicate code - remove unnecessary webkit/firefox specifics since the postcss build will take care of that for us - remove unused example styling specific to SlickGrid project but never used in this lib
ghiscoding · Oct 5, 2021 · 69b18bf · 69b18bf
1 parent 13e7e25
commit 69b18bf
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 300 deletions.
diff --git a/packages/common/src/styles/multiple-select.scss b/packages/common/src/styles/multiple-select.scss
@@ -21,8 +21,6 @@
     line-height: 26px;
     color: #444;
     text-decoration: none;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
     border-radius: 4px;
     background-color: #fff;
 }
@@ -74,22 +72,16 @@
     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);
 }
 
@@ -114,11 +106,7 @@
     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));
@@ -130,10 +118,6 @@
 }
 
 .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;
 }
 

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -253,15 +253,13 @@ ul {
         margin-right: 0;
         padding: var(--slick-header-input-padding, $header-input-padding);
         height: var(--slick-header-input-height, $header-input-height);
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
         box-sizing: border-box;
       }
     }
   }
 
   .slick-header-columns {
-    background: none;
+    background: $grid-header-background;
     background-color: var(--slick-header-background-color, $header-background-color);
     width: calc(100% - #{var(--slick-header-scroll-width-to-remove, $header-scroll-width-to-remove)});
 

diff --git a/packages/common/src/styles/slick-controls.scss b/packages/common/src/styles/slick-controls.scss
@@ -12,8 +12,6 @@
   border: var(--slick-column-picker-border, $column-picker-border);
   border-radius: var(--slick-column-picker-border-radius, $column-picker-border-radius);
   padding: 6px;
-  -moz-box-shadow: 2px 2px 2px silver;
-  -webkit-box-shadow: 2px 2px 2px silver;
   box-shadow: var(--slick-column-picker-box-shadow, $column-picker-box-shadow);
   min-width: 150px;
   cursor: default;

diff --git a/packages/common/src/styles/slick-default-theme.scss b/packages/common/src/styles/slick-default-theme.scss
@@ -1,26 +1,29 @@
 @import './variables';
 
+@keyframes slickgrid-invalid-hilite {
+  from {
+    box-shadow: 0 0 6px red;
+  }
+  to {
+    box-shadow: none;
+  }
+}
+
+.full-height {
+  height: 100%;
+}
+.grid-pane {
+  width: 100%;
+}
+
  .pointer {
    cursor: pointer;
  }
  .slickgrid-container {
    .slick-header-columns,
    .slick-header-column {
-     background: $grid-header-background;
-     // background-color: #EBECEE;
      box-sizing: content-box !important; /* this here only for Firefox! */
    }
-
-   .slick-header-columns {
-     /*border-bottom: 1px solid $grid-border-color;*/
-     background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,.1));
-   }
-
-   .slick-header-column {
-     border-right: 1px solid $grid-border-color;
-     border-bottom: 1px solid $grid-border-color;
-   }
-
    .slick-header-column:hover {
      background: $header-column-background-hover
    }
@@ -32,12 +35,6 @@
    .slick-headerrow {
      background: $grid-header-background;
    }
-
-   .slick-headerrow-column {
-     background: #fafafa;
-     border-bottom: 0;
-   }
-
    .grid-canvas {
      background: white;
    }
@@ -54,21 +51,10 @@
 
        &.invalid {
          border-color: red;
-         -moz-animation-duration: 0.2s;
-         -webkit-animation-duration: 0.2s;
-         -moz-animation-name: slickgrid-invalid-hilite;
-         -webkit-animation-name: slickgrid-invalid-hilite;
          animation-duration: 0.2s;
          animation-name: slickgrid-invalid-hilite;
        }
 
-       &.selected {
-         background-color: rgb(231, 231, 195); // beige
-         .cell-selection {
-          background-color: transparent; /* show default selected row background */
-         }
-       }
-
        &.active {
          box-shadow: $cell-active-box-shadow;
          border: $cell-active-border;
@@ -86,35 +72,13 @@
        }
      }
 
-     &.odd .slick-cell {
-       background: $cell-odd-background-color;
-
-       // make sure we override the regular background color:
-       &.selected {
-         background-color: rgb(214, 214, 178); // beige
-       }
-     }
 
      &.active-row .slick-cell {
        background-color: rgb(226, 255, 253);
-
-       // make sure we override the regular background color:
-       &.selected {
-         background-color: red;
-       }
      }
 
      &.active-row.odd .slick-cell {
        background-color: $cell-odd-active-background-color;
-
-       // make sure we override the regular background color:
-       &.selected {
-         background-color: green; // beige
-       }
-     }
-
-     &.loading {
-       opacity: 0.5;
      }
    }
 
@@ -144,48 +108,4 @@
    .slick-sortable-placeholder {
      background: silver !important;
    }
-
-   @keyframes slickgrid-invalid-hilite {
-     from {
-       box-shadow: 0 0 6px red;
-     }
-     to {
-       box-shadow: none;
-     }
-   }
-
-   // ----------------------------------------------
-   // Excel-like header
-   // ----------------------------------------------
-
-
-
-
-   .header-overlay,
-   .cell-overlay,
-   .selection-cell-overlay {
-     display: block;
-     position: absolute;
-     z-index: 999;
-   }
-
-   .slick-cell > .editor-select {
-     position: absolute;
-     left: 0;
-     right: 0;
-     width: auto;
-     top: 0;
-     bottom: 0;
-     max-width: 100%;
-     min-width: 0;
-     margin: 0;
-   }
-
-   .slick-range-decorator {
-     z-index: 100;
-     pointer-events: none;
-     background: transparent;
-     border: none;
-     outline: black;
-   }
  }
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -722,8 +722,7 @@
 
     &.form-control {
       cursor: pointer;
-      -moz-appearance: none;
-      -webkit-appearance:none;
+      appearance: none;
       &:-ms-expand {
         display: none;
       }