chore(styling): lower amount of lines in slick-plugins sass file (#937)

- group duplicate code as much as possible to lower amount of lines with same css - also add missing ms-select png in demo
ghiscoding · Mar 19, 2023 · 7033fbf · 7033fbf
1 parent 8aa10e7
commit 7033fbf
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 62 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/public/multiple-select.png b/examples/vite-demo-vanilla-bundle/public/multiple-select.png
diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
@@ -26,7 +26,6 @@
 
   .right-footer {
     color: var(--slick-footer-right-text-color, $slick-footer-right-text-color);
-    text-align: var(--slick-footer-right-text-align, $slick-footer-right-text-align);
     font-style: var(--slick-footer-right-font-style, $slick-footer-right-font-style);
     font-weight: var(--slick-footer-right-font-weight, $slick-footer-right-font-weight);
     text-align: var(--slick-footer-right-text-align, $slick-footer-right-text-align);
@@ -152,37 +151,29 @@
           }
         }
 
-        .icon-seek-first {
-          &:before {
-            content: var(--slick-pagination-icon-seek-first, $slick-pagination-icon-seek-first);
-            display: block;
-            height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
-            width: var(--slick-pagination-icon-seek-first-width, $slick-pagination-icon-seek-first-width);
-          }
+        .icon-seek-first:before {
+          content: var(--slick-pagination-icon-seek-first, $slick-pagination-icon-seek-first);
+          width: var(--slick-pagination-icon-seek-first-width, $slick-pagination-icon-seek-first-width);
         }
-        .icon-seek-prev {
-          &:before {
-            content: var(--slick-pagination-icon-seek-prev, $slick-pagination-icon-seek-prev);
-            display: block;
-            height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
-            width: var(--slick-pagination-icon-seek-prev-width, $slick-pagination-icon-seek-prev-width);
-          }
+        .icon-seek-prev:before {
+          content: var(--slick-pagination-icon-seek-prev, $slick-pagination-icon-seek-prev);
+          width: var(--slick-pagination-icon-seek-prev-width, $slick-pagination-icon-seek-prev-width);
         }
-        .icon-seek-next {
-          &:before {
-            content: var(--slick-pagination-icon-seek-next, $slick-pagination-icon-seek-next);
-            display: block;
-            height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
-            width: var(--slick-pagination-icon-seek-next-width, $slick-pagination-icon-seek-next-width);
-          }
+        .icon-seek-next:before {
+          content: var(--slick-pagination-icon-seek-next, $slick-pagination-icon-seek-next);
+          width: var(--slick-pagination-icon-seek-next-width, $slick-pagination-icon-seek-next-width);
         }
-        .icon-seek-end {
-          &:before {
-            content: var(--slick-pagination-icon-seek-end, $slick-pagination-icon-seek-end);
-            display: block;
-            height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
-            width: var(--slick-pagination-icon-seek-end-width, $slick-pagination-icon-seek-end-width);
-          }
+        .icon-seek-end:before {
+          content: var(--slick-pagination-icon-seek-end, $slick-pagination-icon-seek-end);
+
+          width: var(--slick-pagination-icon-seek-end-width, $slick-pagination-icon-seek-end-width);
+        }
+        .icon-seek-first:before,
+        .icon-seek-prev:before,
+        .icon-seek-next:before,
+        .icon-seek-end:before {
+          display: block;
+          height: var(--slick-pagination-icon-height, $slick-pagination-icon-height);
         }
       }
       .page-item.disabled {

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -96,10 +96,7 @@
     margin-right: 5px;
   }
 
-  .slick-group-toggle.expanded {
-    background: none;
-  }
-
+  .slick-group-toggle.expanded,
   .slick-group-toggle.collapsed {
     background: none;
   }

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -557,10 +557,6 @@ li.hidden {
     font-family: var(--slick-icon-font-family, $slick-icon-font-family);
     font-size: var(--slick-checkbox-selector-size, $slick-checkbox-selector-size);
     opacity: var(--slick-checkbox-selector-opacity, $slick-checkbox-selector-opacity); /* unchecked icon */
-    height: var(--slick-checkbox-selector-icon-height, $slick-checkbox-selector-icon-height);
-    width: var(--slick-checkbox-selector-icon-width, $slick-checkbox-selector-icon-width);
-    border: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
-    border-radius: var(--slick-checkbox-selector-icon-border-radius, $slick-checkbox-selector-icon-border-radius);
     margin: var(--slick-checkbox-selector-icon-margin, $slick-checkbox-selector-icon-margin);
   }
 
@@ -574,9 +570,15 @@ li.hidden {
     content: var(--slick-checkbox-selector-icon-checked, $slick-checkbox-selector-icon-checked);
     color: var(--slick-checkbox-selector-checked-color, $slick-checkbox-selector-checked-color);
     opacity: 1; /* checked icon */
+
+  }
+  input[type=checkbox] + label:before,
+  input[type=checkbox]:checked + label:before,
+  #filter-checkbox-selectall-container > input[type=checkbox] + label:before,
+  #filter-checkbox-selectall-container > input[type=checkbox]:checked + label:before {
     height: var(--slick-checkbox-selector-icon-height, $slick-checkbox-selector-icon-height);
     width: var(--slick-checkbox-selector-icon-width, $slick-checkbox-selector-icon-width);
-    border-radius: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
+    border: var(--slick-checkbox-selector-icon-border, $slick-checkbox-selector-icon-border);
     border-radius: var(--slick-checkbox-selector-icon-border-radius, $slick-checkbox-selector-icon-border-radius);
   }
 }
@@ -602,16 +604,10 @@ li.hidden {
   height: var(--slick-header-input-height, $slick-header-input-height);
 
   div {
-    &:before {
+    &:before, &.open:before {
       font-family: var(--slick-icon-font-family, $slick-icon-font-family);
       font-size: var(--slick-multiselect-icon-arrow-font-size, $slick-multiselect-icon-arrow-font-size);
     }
-    &.open {
-      &:before {
-        font-family: var(--slick-icon-font-family, $slick-icon-font-family);
-        font-size: var(--slick-multiselect-icon-arrow-font-size, $slick-multiselect-icon-arrow-font-size);
-      }
-    }
   }
 
   span {
@@ -657,18 +653,15 @@ li.hidden {
       font-family: var(--slick-icon-font-family, $slick-icon-font-family);
       font-size: var(--slick-multiselect-icon-font-size, $slick-multiselect-icon-font-size);
       font-weight: normal;
-      height: var(--slick-multiselect-icon-height, $slick-multiselect-icon-height);
-      width: var(--slick-multiselect-icon-width, $slick-multiselect-icon-width);
-      border: var(--slick-multiselect-icon-border, $slick-multiselect-icon-border);
-      border-radius: var(--slick-multiselect-icon-border-radius, $slick-multiselect-icon-border-radius);
-      margin: var(--slick-multiselect-icon-margin, $slick-multiselect-icon-margin);
       opacity: var(--slick-multiselect-unchecked-opacity, $slick-multiselect-unchecked-opacity);
       vertical-align: var(--slick-multiselect-icon-vertical-align, $slick-multiselect-icon-vertical-align);
     }
 
     &:checked + span:before {
       content: var(--slick-multiselect-icon-checked, $slick-multiselect-icon-checked);
       opacity: 1;
+    }
+    & + span:before, &:checked + span:before {
       height: var(--slick-multiselect-icon-height, $slick-multiselect-icon-height);
       width: var(--slick-multiselect-icon-width, $slick-multiselect-icon-width);
       border: var(--slick-multiselect-icon-border, $slick-multiselect-icon-border);
@@ -679,15 +672,12 @@ li.hidden {
   input[type="radio"] {
     & + span:before {
       content: var(--slick-multiselect-icon-radio-unchecked, $slick-multiselect-icon-radio-unchecked);
-      height: var(--slick-multiselect-icon-radio-height, $slick-multiselect-icon-radio-height);
-      width: var(--slick-multiselect-icon-radio-width, $slick-multiselect-icon-radio-width);
-      border: var(--slick-multiselect-icon-radio-border, $slick-multiselect-icon-radio-border);
-      border-radius: var(--slick-multiselect-icon-radio-border-radius, $slick-multiselect-icon-radio-border-radius);
-      margin: var(--slick-multiselect-icon-radio-margin, $slick-multiselect-icon-radio-margin);
     }
     &:checked + span:before {
       content: var(--slick-multiselect-icon-radio-checked, $slick-multiselect-icon-radio-checked);
       color: var(--slick-multiselect-icon-radio-color, $slick-multiselect-icon-radio-color);
+    }
+    & + span:before, &:checked + span:before {
       height: var(--slick-multiselect-icon-radio-height, $slick-multiselect-icon-radio-height);
       width: var(--slick-multiselect-icon-radio-width, $slick-multiselect-icon-radio-width);
       border: var(--slick-multiselect-icon-radio-border, $slick-multiselect-icon-radio-border);
@@ -991,20 +981,22 @@ input.flatpickr.form-control {
     }
 
     .slick-groupby-remove-icon::before {
-      font-family: var(--slick-icon-font-family, $slick-icon-font-family);
       font-size: var(--slick-draggable-group-by-remove-icon-size, $slick-draggable-group-by-remove-icon-size);
       content: var(--slick-draggable-group-by-remove-icon, $slick-draggable-group-by-remove-icon);
     }
     .slick-groupby-sort-asc-icon::before {
-      font-family: var(--slick-icon-font-family, $slick-icon-font-family);
       font-size: var(--slick-draggable-group-sort-asc-icon-size, $slick-draggable-group-sort-asc-icon-size);
       content: var(--slick-draggable-group-sort-asc-icon, $slick-draggable-group-sort-asc-icon);
     }
     .slick-groupby-sort-desc-icon::before {
-      font-family: var(--slick-icon-font-family, $slick-icon-font-family);
       font-size: var(--slick-draggable-group-sort-desc-icon-size, $slick-draggable-group-sort-desc-icon-size);
       content: var(--slick-draggable-group-sort-desc-icon, $slick-draggable-group-sort-desc-icon);
     }
+    .slick-groupby-remove-icon::before,
+    .slick-groupby-sort-asc-icon::before,
+    .slick-groupby-sort-desc-icon::before {
+      font-family: var(--slick-icon-font-family, $slick-icon-font-family);
+    }
   }
   .slick-dropzone-hover {
     background-color: var(--slick-draggable-group-droppable-hover-bgcolor, $slick-draggable-group-droppable-hover-bgcolor);
@@ -1284,8 +1276,6 @@ input.flatpickr.form-control {
         color: var(--slick-detail-view-icon-expand-color-hover, $slick-detail-view-icon-expand-color-hover);
       }
       &:before {
-        font-family: var(--slick-icon-font-family, $slick-icon-font-family);
-        font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
         content: var(--slick-detail-view-icon-expand, $slick-detail-view-icon-expand);
       }
     }
@@ -1296,11 +1286,14 @@ input.flatpickr.form-control {
         color: var(--slick-detail-view-icon-collapse-color-hover, $slick-detail-view-icon-collapse-color-hover);
       }
       &:before {
-        font-family: var(--slick-icon-font-family, $slick-icon-font-family);
-        font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
         content: var(--slick-detail-view-icon-collapse, $slick-detail-view-icon-collapse);
       }
     }
+    &.expand:before,
+    &.collapse:before {
+      font-family: var(--slick-icon-font-family, $slick-icon-font-family);
+      font-size: var(--slick-detail-view-icon-size, $slick-detail-view-icon-size);
+    }
   }
 
   .dynamic-cell-detail {