From 2fc5dad0b99eb1539002eccc118f7157980b4938 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Sat, 26 Oct 2024 16:48:09 -0400 Subject: [PATCH] fix: add more SASS styling fixes & fix box-shadow w/filled filters --- .../src/material-styles.scss | 12 +- .../src/styles/_variables-theme-material.scss | 169 +++++++++--------- .../styles/_variables-theme-salesforce.scss | 13 +- packages/common/src/styles/_variables.scss | 5 +- packages/common/src/styles/slick-filters.scss | 10 +- .../slick-without-bootstrap-min-styling.scss | 2 +- 6 files changed, 118 insertions(+), 93 deletions(-) diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index 484ca8af3..12781e29f 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -30,7 +30,7 @@ --slick-slider-editor-focus-border-color: #00c840; --slick-slider-filter-focus-border-color: #00c840; --input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3); - --slick-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3); + --slick-input-focus-box-shadow: #{0 0 6px rgba(102, 187, 106, 0.3)}; --slick-multiselect-input-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3); --slick-header-filter-row-border-bottom: 1px solid #d0d0d0; --slick-container-border-right: 1px solid #ccc; @@ -139,7 +139,10 @@ --slick-base-dark-menu-bg-color: #212121; --slick-primary-color: #66bb6a; --slick-button-primary-bg-color:#66bb6a; - --slick-cell-active-box-shadow: inset 0 0 0 1px #aaaaaa; + --slick-filled-filter-border: 1px solid #438446; + --slick-form-control-focus-border-color: #438446; + --slick-form-control-focus-box-shadow: #{0 0 0 2px rgba(#66bb6a, 0.25)}; + --slick-cell-active-box-shadow: #{inset 0 0 0 1px #aaaaaa}; --slick-cell-box-shadow: none; --slick-checkbox-icon-color: #66bb6a; --slick-checkbox-icon-height: 22px; @@ -154,7 +157,10 @@ --slick-container-border-left: 1px solid #505050; --slick-container-border-bottom: 1px solid #505050; --slick-pane-top-border-top: 1px solid #505050; + --slick-input-focus-box-shadow: #{0 0 0 2px rgba(#66bb6a, 0.25)}; --slick-filled-filter-color: #66bb6a; + --slick-filled-filter-box-shadow: #{inset 0 0 0 1px #47a04b}; + --slick-filled-filter-focus-box-shadow: #{inset 0 0 0 1px #47a04b, 0 0 0 1px rgba(#66bb6a, 0.25)}; --slick-highlight-color: #49a54e; --slick-icon-sort-color: #66bb6a; --slick-grid-menu-icon-btn-color: #bbb; @@ -174,6 +180,8 @@ --slick-multiselect-ok-button-text-hover-color: #{color.adjust(#66bb6a, $lightness: 5%)}; --ms-checkbox-color: #66bb6a; --ms-checkbox-hover-color: #{color.adjust(#49a54e, $lightness: 13%)}; + --ms-choice-focus-border-color: #66bb6a; + --ms-choice-focus-box-shadow: 0 0 0 2px rgba(#66bb6a,.55); --ms-ok-button-text-color: #66bb6a; --ms-ok-button-text-hover-color: #{color.adjust(#66bb6a, $lightness: 5%)}; diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index c3903dad0..0906f9b6f 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -6,89 +6,92 @@ @use 'sass:color'; -@forward './variables'; +$slick-highlight-color: #48c774; +$slick-primary-color: #009530; +$slick-filled-filter-border: 1px solid #{$slick-primary-color} !default; +$slick-editor-input-group-clear-btn-icon-color: inherit !default; -$slick-primary-color: #009530 !default; -$slick-highlight-color: #48c774 !default; -$slick-font-family: Roboto, "Helvetica Neue", sans-serif !default; -$slick-font-size-base-value: 14 !default; -$slick-icon-color: inherit !default; -$slick-icon-font-size: 18px !default; -$slick-group-totals-formatter-color: #666666 !default; -$slick-cell-border-top: none !default; -$slick-cell-font-weight: 400 !default; -$slick-cell-padding-top-bottom: 8px !default; -$slick-cell-padding-left-right: 7px !default; -$slick-cell-odd-background-color: #f5f5f5 !default; -$slick-cell-text-color: rgba(0, 0, 0, 0.87) !default; -$slick-header-row-filter-padding: 8px 4px !default; -$slick-header-font-size: 12px !default; -$slick-header-font-weight: 700 !default; -$slick-header-text-color: rgba(0, 0, 0, 0.87) !default; -$slick-sorting-header-color: rgba(0, 0, 0, 0.87) !default; -$slick-header-border-bottom: transparent !default; -$slick-header-filter-row-border-bottom: 1px solid #d0d0d0 !default; -$slick-header-resizable-hover: 2px solid #{color.adjust(#48c774, $lightness: 15%)} !default; -$slick-header-resizable-hover-border-bottom: $slick-header-resizable-hover !default; -$slick-header-resizable-hover-border-left: $slick-header-resizable-hover !default; -$slick-header-resizable-hover-border-right: $slick-header-resizable-hover !default; -$slick-header-resizable-hover-border-top: $slick-header-resizable-hover !default; -$slick-header-resizable-hover-width: 4px !default; -$slick-header-resizable-hover-border-radius: 8px !default; -$slick-header-resizable-hover-right: 0 !default; -$slick-header-resizable-hover-opacity: 0.4 !default; -$slick-pane-top-border-top: 1px solid #d0d0d0 !default; -$slick-container-border-top: 1px solid #ccc !default; -$slick-container-border-bottom: 1px solid #ccc !default; -$slick-container-border-left: 1px solid #ccc !default; -$slick-container-border-right: 1px solid #ccc !default; -$slick-icon-sort-color: $slick-primary-color !default; -$slick-checkbox-icon-color: $slick-primary-color !default; -$slick-checkbox-icon-container-bg-color: transparent !default; -$slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" !default; -$slick-checkbox-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" !default; -$slick-checkbox-opacity-hover: 0.9 !default; -$slick-checkbox-unchecked-opacity: 1 !default; -$slick-column-picker-close-btn-font-size: 23px !default; -$slick-column-picker-item-font-size: 14px !default; -$slick-column-picker-item-height: 26px !default; -$slick-column-picker-item-line-height: 16px !default; -$slick-column-picker-title-font-size: 17px !default; -$slick-menu-item-font-size: 14px !default; -$slick-menu-item-height: 26px !default; -$slick-menu-icon-line-height: 18px !default; -$slick-menu-icon-min-width: 18px !default; -$slick-menu-icon-width: 18px !default; -$slick-menu-title-font-size: 17px !default; -$slick-icon-group-color: $slick-primary-color !default; -$slick-draggable-group-drop-border-top: 0px !default; -$slick-draggable-group-drop-border-left: 0px !default; -$slick-draggable-group-drop-border-right: 0px !default; -$slick-draggable-group-drop-width: 100% !default; -$slick-draggable-group-drop-radius: 0 !default; -$slick-draggable-group-delete-vertical-align: middle !default; -$slick-draggable-group-title-height: 24px !default; -$slick-draggable-group-title-line-height: 24px !default; -$slick-draggable-group-title-vertical-align: top !default; -$slick-header-button-hidden-margin-right: -6px !default; -$slick-header-button-height: 18px !default; -$slick-header-button-width: 18px !default; -$slick-header-button-margin: -4px 0 100px 0 !default; -$slick-header-menu-button-icon-color: $slick-icon-color !default; -$slick-header-menu-display: inline-block !default; -$slick-compound-filter-operator-select-border: 1px solid #{color.adjust($slick-primary-color, $lightness: 10%)} !default; -$slick-compound-filter-text-color: color.adjust($slick-primary-color, $lightness: -20%) !default; -$slick-preheader-border-right: 1px solid #e2e2e2 !default; -$slick-row-move-plugin-cursor: grab !default; -$slick-row-move-plugin-icon-color: $slick-icon-color !default; -$slick-editor-input-height: 100% !default; -$slick-editor-input-group-clear-btn-icon-color: $slick-icon-color !default; -$slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default; -$slick-row-mouse-hover-color: #ebfaef !default; -$slick-row-selected-color: #d4f6d7 !default; -$slick-pagination-icon-color: $slick-primary-color !default; -$slick-pagination-button-border-radius: 2px !default; -$slick-pagination-page-input-border-radius: 3px !default; +@forward './variables' with ( + $slick-highlight-color: #48c774 !default, + $slick-font-family: #{"Roboto", "Helvetica Neue", "Sans-Serif"} !default, + $slick-font-size-base-value: 14 !default, + $slick-icon-color: inherit !default, + $slick-icon-font-size: 18px !default, + $slick-group-totals-formatter-color: #666666 !default, + $slick-cell-border-top: none !default, + $slick-cell-font-weight: 400 !default, + $slick-cell-padding-top-bottom: 8px !default, + $slick-cell-padding-left-right: 7px !default, + $slick-cell-odd-background-color: #f5f5f5 !default, + $slick-cell-text-color: rgba(0, 0, 0, 0.87) !default, + $slick-header-row-filter-padding: 8px 4px !default, + $slick-header-font-size: 12px !default, + $slick-header-font-weight: 700 !default, + $slick-header-text-color: rgba(0, 0, 0, 0.87) !default, + $slick-sorting-header-color: rgba(0, 0, 0, 0.87) !default, + $slick-header-border-bottom: transparent !default, + $slick-header-filter-row-border-bottom: 1px solid #d0d0d0 !default, + $slick-header-resizable-hover: 2px solid #{color.adjust(#48c774, $lightness: 15%)} !default, + $slick-header-resizable-hover-border-bottom: 2px solid #{$slick-highlight-color} !default, + $slick-header-resizable-hover-border-left: 2px solid #{$slick-highlight-color} !default, + $slick-header-resizable-hover-border-right: 2px solid #{$slick-highlight-color} !default, + $slick-header-resizable-hover-border-top: 2px solid #{$slick-highlight-color} !default, + $slick-header-resizable-hover-width: 4px !default, + $slick-header-resizable-hover-border-radius: 8px !default, + $slick-header-resizable-hover-right: 0 !default, + $slick-header-resizable-hover-opacity: 0.4 !default, + $slick-pane-top-border-top: 1px solid #d0d0d0 !default, + $slick-container-border-top: 1px solid #ccc !default, + $slick-container-border-bottom: 1px solid #ccc !default, + $slick-container-border-left: 1px solid #ccc !default, + $slick-container-border-right: 1px solid #ccc !default, + $slick-icon-sort-color: $slick-primary-color !default, + $slick-checkbox-icon-color: $slick-primary-color !default, + $slick-checkbox-icon-container-bg-color: transparent !default, + $slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" !default, + $slick-checkbox-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" !default, + $slick-checkbox-opacity-hover: 0.9 !default, + $slick-checkbox-unchecked-opacity: 1 !default, + $slick-column-picker-close-btn-font-size: 23px !default, + $slick-column-picker-item-font-size: 14px !default, + $slick-column-picker-item-height: 26px !default, + $slick-column-picker-item-line-height: 16px !default, + $slick-column-picker-title-font-size: 17px !default, + $slick-menu-item-font-size: 14px !default, + $slick-menu-item-height: 26px !default, + $slick-menu-icon-line-height: 18px !default, + $slick-menu-icon-min-width: 18px !default, + $slick-menu-title-font-size: 17px !default, + $slick-icon-group-color: $slick-primary-color !default, + $slick-draggable-group-drop-border-top: 0px !default, + $slick-draggable-group-drop-border-left: 0px !default, + $slick-draggable-group-drop-border-right: 0px !default, + $slick-draggable-group-drop-width: 100% !default, + $slick-draggable-group-drop-radius: 0 !default, + $slick-draggable-group-delete-vertical-align: middle !default, + $slick-draggable-group-title-height: 24px !default, + $slick-draggable-group-title-line-height: 24px !default, + $slick-draggable-group-title-vertical-align: top !default, + $slick-header-button-hidden-margin-right: -6px !default, + $slick-header-button-height: 18px !default, + $slick-header-button-width: 18px !default, + $slick-header-button-margin: -4px 0 100px 0 !default, + $slick-header-menu-button-icon-color: inherit !default, + $slick-header-menu-display: inline-block !default, + $slick-form-control-focus-box-shadow: 0 0 0 2.5px rgba($slick-primary-color, 0.25) !default, + $slick-compound-filter-operator-select-border: 1px solid #{color.adjust($slick-primary-color, $lightness: 10%)} !default, + $slick-compound-filter-text-color: color.adjust($slick-primary-color, $lightness: -20%) !default, + $slick-preheader-border-right: 1px solid #e2e2e2 !default, + $slick-row-move-plugin-cursor: grab !default, + $slick-row-move-plugin-icon-color: inherit !default, + $slick-editor-input-height: 100% !default, + $slick-editor-input-group-clear-btn-icon-padding: 1px 6px !default, + $slick-row-mouse-hover-color: #ebfaef !default, + $slick-row-selected-color: #d4f6d7 !default, + $slick-pagination-icon-color: $slick-primary-color !default, + $slick-pagination-button-border-radius: 2px !default, + $slick-pagination-page-input-border-radius: 3px !default, +); // Dark Mode // ----------- @@ -105,6 +108,8 @@ $slick-dark-text-color: #d4d4d4; .slick-dark-mode { --slick-base-dark-menu-bg-color: #212121; --slick-button-primary-bg-color: #66bb6a; + --slick-filled-filter-border: 1px solid #438446; + --slick-form-control-focus-border-color: #438446; --slick-cell-box-shadow: none; --slick-compound-filter-text-color: #66bb6a; --slick-compound-filter-operator-select-border: 1px solid #66bb6a; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index df60c621b..04c84891d 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -12,7 +12,8 @@ $slick-primary-color-dark: #004487 !default $slick-bare-color: #b5b5b5 !default; $slick-filled-filter-color: $slick-primary-color-dark !default; $slick-filled-filter-border: 1px solid #{$slick-primary-color} !default; -$slick-filled-filter-box-shadow: inset 0 0 0 1px #{color.adjust($slick-primary-color, $lightness: 30%)} !default; +$slick-filled-filter-box-shadow: inset 0 0 0 1px #{color.adjust($slick-primary-color, $lightness: 25%)} !default; +$slick-filled-filter-focus-box-shadow: #{$slick-filled-filter-box-shadow, 0 0 0 2px rgba($slick-primary-color, 0.25)} !default; $slick-filled-filter-font-weight: bold !default; $slick-multiselect-icon-radio-color: #0070D2 !default; $slick-multiselect-unchecked-opacity: 0.8 !default; @@ -94,6 +95,7 @@ $slick-editor-grid-cell-border-width-modified: 1px 7px 1px 1px $slick-header-button-width: 18px !default, $slick-header-button-margin: -4px 0 100px 0 !default, $slick-header-menu-button-icon-color: inherit !default, + $slick-form-control-focus-box-shadow: 0 0 0 2.5px rgba($slick-primary-color, 0.25) !default, $slick-compound-filter-operator-select-border: 1px solid #6cb6ff !default, $slick-compound-filter-text-color: $slick-primary-color-dark !default, $slick-multiselect-icon-checked-color: $slick-highlight-color !default, @@ -147,13 +149,18 @@ $slick-dark-base-dark-menu-bg-color: #212121; --slick-button-primary-bg-color: #0064c9; --slick-multiselect-icon-checked-color: #66b8ff; --slick-base-dark-menu-bg-color: #212121; - --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff; - --slick-cell-box-shadow: 0px 1px 0px #303030, 0px -1px 0px #303030; + --slick-cell-active-box-shadow: #{inset 0 0 0 1px #3ca4ff}; + --slick-cell-box-shadow: #{0px 1px 0px #303030, 0px -1px 0px #303030}; --slick-checkbox-icon-container-bg-color: #2d2d2d; --slick-column-picker-icon-color: #66b8ff; --slick-checkbox-icon-color: #66b8ff; --slick-checkbox-icon-border: 1px solid #5e5e5e; --slick-compound-filter-text-color: #66b8ff; + --slick-form-control-focus-border-color: #66b8ff; + --slick-form-control-focus-box-shadow: #{0 0 0 2.5px rgba(#66b8ff, 0.25)}; + --slick-filled-filter-box-shadow: #{inset 0 0 0 1px #1f97ff}; + --slick-filled-filter-focus-box-shadow: #{inset 0 0 0 1px #1f97ff, 0 0 0 2.5px rgba(#66b8ff, 0.25)}; + --slick-filled-filter-border: 1px solid #66b8ff; --slick-filled-filter-color: #66b8ff; --slick-icon-sort-color: #66b8ff; --slick-header-filter-row-border-bottom: 2px solid #0389ff; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 06f00489d..034ef487c 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -18,8 +18,7 @@ $primary-color: #0d6efd !default; $slick-highlight-color: #fcfcfc !default; $slick-primary-color: $primary-color !default; // Bootstrap 5 box-shadow -$input-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(color.adjust($slick-primary-color, $lightness: 3%), .3) !default; -// $input-focus-box-shadow: 0 0 0 0.25rem #0d6efd40 !default; +$input-focus-box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25) !default; $slick-border-color: #dddddd !default; $slick-font-size-base-value: 14 !default; @@ -55,7 +54,7 @@ $slick-input-group-btn-hover-bg-color: #eee !default; $slick-input-group-btn-border: 1px solid #ccc !default; $slick-input-group-append-bg-color: #eee !default; $slick-input-focus-border-color: color.adjust($slick-primary-color, $lightness: 10%) !default; -$slick-input-focus-box-shadow: $input-focus-box-shadow !default; +$slick-input-focus-box-shadow: $slick-form-control-focus-box-shadow !default; /* Slickgrid container, including headers but excluding pagination */ $slick-container-border-top: 0 none !default; diff --git a/packages/common/src/styles/slick-filters.scss b/packages/common/src/styles/slick-filters.scss index e768a0409..105f5ee4d 100644 --- a/packages/common/src/styles/slick-filters.scss +++ b/packages/common/src/styles/slick-filters.scss @@ -11,10 +11,13 @@ .search-filter.filled .input-group-addon.slider-value, .search-filter.filled .input-group-addon.slider-range-value, .search-filter.filled .input-group-addon select { + border: var(--slick-filled-filter-border, vts.$slick-filled-filter-border); color: var(--slick-filled-filter-color, vts.$slick-filled-filter-color); font-weight: var(--slick-filled-filter-font-weight, vts.$slick-filled-filter-font-weight); - border: var(--slick-filled-filter-border, vts.$slick-filled-filter-border); box-shadow: var(--slick-filled-filter-box-shadow, vts.$slick-filled-filter-box-shadow); + &:focus { + box-shadow: var(--slick-filled-filter-focus-box-shadow, vts.$slick-filled-filter-focus-box-shadow); + } &.input-group-prepend { border-right: 0; } @@ -26,8 +29,11 @@ border-right: 0; } .search-filter.filled .ms-choice { - box-shadow: var(--slick-filled-filter-box-shadow, vts.$slick-filled-filter-box-shadow); border: var(--slick-filled-filter-border, vts.$slick-filled-filter-border); + box-shadow: var(--slick-filled-filter-box-shadow, vts.$slick-filled-filter-box-shadow); + &:focus { + box-shadow: var(--slick-filled-filter-focus-box-shadow, vts.$slick-filled-filter-focus-box-shadow); + } span { display: inline-flex; align-items: center; diff --git a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss index 8ffd383a1..43673c2ee 100644 --- a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss +++ b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss @@ -56,7 +56,7 @@ background-color: var(--slick-form-control-bg-color, v.$slick-form-control-bg-color); border: var(--slick-form-control-border, v.$slick-form-control-border); color: var(--slick-font-color, v.$slick-font-color); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }