From 7033fbf4cb43d99ef09e6a4129886da1c06eacfd Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Sun, 19 Mar 2023 00:12:16 -0400 Subject: [PATCH] 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 --- .../public/multiple-select.png | Bin 0 -> 3380 bytes .../common/src/styles/slick-component.scss | 49 +++++++---------- packages/common/src/styles/slick-grid.scss | 5 +- packages/common/src/styles/slick-plugins.scss | 51 ++++++++---------- 4 files changed, 43 insertions(+), 62 deletions(-) create mode 100644 examples/vite-demo-vanilla-bundle/public/multiple-select.png diff --git a/examples/vite-demo-vanilla-bundle/public/multiple-select.png b/examples/vite-demo-vanilla-bundle/public/multiple-select.png new file mode 100644 index 0000000000000000000000000000000000000000..b1282ce42d52438a36a237dbb6488650272afc65 GIT binary patch literal 3380 zcmV-44a@S0P)004&%004{+008|`004nN004b?008NW002DY000@xb3BE2000U( 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 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,11 +653,6 @@ 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); } @@ -669,6 +660,8 @@ li.hidden { &: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 {