Skip to content

Commit

Permalink
fix: add more SASS styling fixes & fix box-shadow w/filled filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Oct 26, 2024
1 parent 687610a commit 2fc5dad
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 93 deletions.
12 changes: 10 additions & 2 deletions examples/vite-demo-vanilla-bundle/src/material-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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%)};

Expand Down
169 changes: 87 additions & 82 deletions packages/common/src/styles/_variables-theme-material.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
// -----------
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 2fc5dad

Please sign in to comment.