diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index aa16d44e4..5d1d87a28 100644 --- a/docs/column-functionalities/Formatters.md +++ b/docs/column-functionalities/Formatters.md @@ -13,7 +13,7 @@ ### Definition `Formatters` are functions that can be used to change and format certain column(s) in the grid. Please note that it does not alter the input data, it simply changes the styling by formatting the data differently to the screen (what the user visually see). -A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmark` which will use [Font-Awesome](http://fontawesome.io/icons/) icon of `fa-check` when `True` or an empty string when `False`. +A good example of a `Formatter` could be a column name `isActive` which is a `boolean` field with input data as `True` or `False`. User would prefer to simply see a checkbox as a visual indication representing the `True` flag, for this behavior you can use `Formatters.checkmarkMaterial` which will use optional SVG icons of `mdi-check` when `True` or an empty string when `False`. For a [UI sample](#ui-sample), scroll down below. @@ -25,7 +25,6 @@ For a [UI sample](#ui-sample), scroll down below. #### List of provided `Formatters` - `arrayObjectToCsv`: Takes an array of complex objects converts it to a comma delimited string. - `arrayToCsv` : takes an array of text and returns it as CSV string -- `checkmark` : uses Font-Awesome [(fa-check)](http://fontawesome.io/icon/check/) - `checkmarkMaterial` use Material Design to display a checkmark icon - `collection`: Looks up values from the columnDefinition.params.collection property and displays the label in CSV or string format - `complexObject`: takes a complex object (with a `field` that has a `.` notation) and pull correct value, there are multiple ways to use it @@ -97,7 +96,7 @@ export class Example { { id: '%', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentComplete }, { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso }, { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmarkMaterial } ]; } } @@ -129,7 +128,7 @@ export class Example { { id: '%', name: '% Complete', field: 'percentComplete', formatter: Slicker.Formatters.percentComplete }, { id: 'start', name: 'Start', field: 'start', formatter: Slicker.Formatters.dateIso }, { id: 'finish', name: 'Finish', field: 'finish', formatter: Slicker.Formatters.dateIso }, - { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Slicker.Formatters.checkmark } + { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Slicker.Formatters.checkmarkMaterial } ]; } } @@ -191,7 +190,7 @@ export interface FormatterResultObject { ``` ### Example of a Custom Formatter with HTML string -For example, we will use `Font-Awesome` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below. +For example, we will use our optional SVG icons `.mdi` with a `boolean` as input data, and display a (fire) icon when `True` or a (snowflake) when `False`. This custom formatter is actually display in the [UI sample](#ui-sample) shown below. ```ts // create a custom Formatter with the Formatter type const myCustomCheckboxFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => diff --git a/docs/migrations/migration-to-5.x.md b/docs/migrations/migration-to-5.x.md index 24f172227..c00b79c01 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -1,5 +1,5 @@ -## Version 5 - Better Dark Mode with Pure CSS SVG icons -This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). +## Version 5 - Better Dark Mode with Pure CSS SVG icons +This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the `color` CSS property (which helps a lot for the Dark Mode Theme). Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (which is in fact a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) and maybe one day we'll drop the fork if possible), there are multiple reasons to migrate our date picker to another library: - Flatpickr cons: @@ -14,11 +14,11 @@ Another noticeable UI change is the migration from [Flatpickr](https://flatpickr - much smaller size (a decrease of 2.9% (17Kb) was observed, expect even more decrease with gzip) - Vanilla-Calendar cons: - settings are named differently and are not using flat config (complex object settings) - - for example Flatpickr `minDate: 'today'` is instead `range: { min: 'today' }` - - some settings were missing, like the `'today'` shortcut which is why I forked the project + - for example Flatpickr `minDate: 'today'` is instead `range: { min: 'today' }` + - some settings were missing, like the `'today'` shortcut which is why I forked the project - I did open a few PRs on the main project, so the hope is to drop the fork in the future while being a totally transparent change to the user (you) -Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a similar size to what it was in v2.x that is when we were using jQuery/jQueryUI separately. However, since we're no longer using jQuery in the project, our project build size is in fact much smaller than it was 2 years ago. This is really nice to see especially since we keep adding features (like Dark Mode and others), we still size managed to decrease the project size yet again :) +Similar to previous releases, I managed to decrease the project build size even more (about 5%). At this point, the project has a smaller size to what it was in v2.x (that is when we were using jQuery/jQueryUI separately). Considering that we're no longer using jQuery/jQueryUI in the project, and also consider that these 2 dependencies were well over 200Kb combined, then our project build size is in fact a lot smaller than it was 2 years ago in v2.x. This is really nice to see especially since we keep adding features (like Dark Mode and others) while still decreasing its size :) #### Major Changes - Quick Summary - minimum requirements bump @@ -57,7 +57,7 @@ or move the class to the parent container and have both the icon and the text in ### Deprecated code removed/renamed ##### SASS variables -A lot of SASS variables changed, we recommend you take a look at the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file to compare with yours SASS overrides and fix any SASS build issues. +A lot of SASS variables changed, we recommend you take a look at the [_variables.scss](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/_variables.scss) file to compare with yours SASS overrides and fix any SASS build issues. ##### SASS `math` polyfills are removed When Dart-SASS released their version 1.33, it caused a lot of console warnings (and lot of unhappy users) in projects that were using `/` (for math division) instead of their new `math.div` function. To avoid seeing all these warnings, I had created a temporary polyfill (that piece of code was actually copied from Bootstrap project). This change happened 3 years ago, so I'm assuming that most users have already upgraded their SASS and fix these warnings and I think it's time to remove this polyfill since it was always meant to be a temp patch. If you see these warnings coming back, you can use the SASS option `--quiet-upstream`. @@ -81,6 +81,33 @@ There were a few `.ui-state-default` and other jQueryUI CSS classes leftovers in } ``` +### Formatters Cleanup & Removals + +Since we now only use SVG and we got rid of any Font usage (no more Font-Awesome code anywhere), the `checkmark` Formatter no longer has any reason to exist and was removed. If you were using and still use Font-Awesome in your project, you'll have to either recreate the Formatter yourself or use alternatives. You could use the `Formatters.icon` or `Formatters.iconBoolean` which require the CSS classes to be provided via `params`. As a last alternative, and if you are importing the optional SVG icons `.mdi`, then we recommend you simply use the `checkmarkMaterial` Formatter. + +```diff +this.columnDefinitions = [ + { + id: 'isActive', name: 'Active', field: 'isActive', +- formatter: Formatters.checkmark ++ formatter: Formatters.checkmarkMaterial + }, +]; +``` +or create a Custom Formatter + +```ts +// create a custom Formatter and returning a string and/or an object of type FormatterResultObject +const myCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => { + const iconElm = document.createElement('i'); + iconElm.className = value ? 'mdi mdi-check' : ''; + return iconElm; + + // simple HTML string + return value ? '' : ''; +} +``` + ## Grid Functionalities ### Date Editor/Filter We migrated from Flatpicker to Vanilla-Calendar and this require some changes since the option names are different. The changes are the same for both the Filter and the Editor. diff --git a/examples/vite-demo-vanilla-bundle/src/main.ts b/examples/vite-demo-vanilla-bundle/src/main.ts index bed8ff868..3e0a57dea 100644 --- a/examples/vite-demo-vanilla-bundle/src/main.ts +++ b/examples/vite-demo-vanilla-bundle/src/main.ts @@ -1,10 +1,9 @@ -import './styles.scss'; - import { Renderer } from './renderer'; import * as SlickerModule from '@slickgrid-universal/vanilla-bundle'; import { App } from './app'; import AppView from './app.html?raw'; import { TranslateService } from './translate.service'; +import './styles.scss'; class Main { app!: App; diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index 850c9693e..6217a0204 100644 --- a/examples/vite-demo-vanilla-bundle/src/material-styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/material-styles.scss @@ -125,8 +125,9 @@ .ms-dark-mode .icon-checkbox-container, .slick-dark-mode { --slick-base-dark-menu-bg-color: #212121; - --slick-primary-color: #66bb6a !important; + --slick-primary-color: #66bb6a; --slick-button-primary-bg-color:#66bb6a; + --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; @@ -144,6 +145,7 @@ --slick-filled-filter-color: #66bb6a; --slick-highlight-color: #49a54e; --slick-icon-sort-color: #66bb6a; + --slick-grid-menu-icon-btn-color: #bbb; --slick-pagination-icon-color: #66bb6a; --slick-row-mouse-hover-box-shadow: none; --slick-row-mouse-hover-color: #505050; @@ -167,4 +169,12 @@ } } } + + body.material-theme .ms-dark-mode, + body.material-theme .ms-drop.ms-dark-mode, + body.material-theme .slick-dark-mode .ms-dark-mode, + body.material-theme .slick-dark-mode, + body.material-theme .dark-mode .text-color-primary { + --slick-primary-color: #66bb6a; + } } diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss index e2ff12b72..f66f8e553 100644 --- a/examples/vite-demo-vanilla-bundle/src/styles.scss +++ b/examples/vite-demo-vanilla-bundle/src/styles.scss @@ -9,6 +9,17 @@ $slick-link-color: #006DCC; @import './bulma.scss'; +:root { + .ms-dark-mode, + .ms-drop.ms-dark-mode, + .slick-dark-mode .ms-dark-mode, + .slick-dark-mode, + .dark-mode .text-color-primary { + --slick-primary-color: #66b8ff; + --text-color-primary: #66b8ff; + } +} + $navbar-height: 52px; body { height: calc(100vh - $navbar-height); @@ -103,4 +114,4 @@ input.is-narrow { } .text-red { color: red; -} \ No newline at end of file +} diff --git a/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts b/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts deleted file mode 100644 index b66ec585b..000000000 --- a/packages/common/src/formatters/__tests__/checkmarkFormatter.spec.ts +++ /dev/null @@ -1,98 +0,0 @@ -import { Column } from '../../interfaces/index'; -import { checkmarkFormatter } from '../checkmarkFormatter'; - -describe('the Checkmark Formatter', () => { - it('should return an empty string when no value is passed', () => { - const value = null; - const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return an empty string when False is provided', () => { - const value = false; - const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return an empty string when the string "FALSE" (case insensitive) is provided', () => { - const value = 'FALSE'; - const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {} as any); - expect(result1).toBe(''); - expect(result2).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when the string "True" (case insensitive) is provided', () => { - const value = 'True'; - const result1 = checkmarkFormatter(0, 0, value.toLowerCase(), {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value.toUpperCase(), {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when input is True', () => { - const value = true; - const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result as HTMLElement).outerHTML).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when input is a string even if it start with 0', () => { - const value = '005A00ABC'; - const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - }); - - it('should return an empty string when the string "0" is provided', () => { - const value = '0'; - const result = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect(result).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when input is a number greater than 0', () => { - const value = 0.000001; - const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when input is a number as a text greater than 0', () => { - const value = '0.000001'; - const result1 = checkmarkFormatter(0, 0, value, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - }); - - it('should return an empty string when input is a number lower or equal to 0', () => { - const value1 = 0; - const value2 = -0.5; - const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect(result1).toBe(''); - expect(result2).toBe(''); - }); - - it('should return an empty string when input is a number as a text and lower or equal to 0', () => { - const value1 = '0'; - const value2 = '-0.5'; - const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect(result1).toBe(''); - expect(result2).toBe(''); - }); - - it('should return an empty string when input is type null or undefined', () => { - const value1 = null; - const value2 = undefined; - const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect(result1).toBe(''); - expect(result2).toBe(''); - }); - - it('should return the Font Awesome Checkmark icon when input is the "null" or "undefined"', () => { - const value1 = 'null'; - const value2 = 'undefined'; - const result1 = checkmarkFormatter(0, 0, value1, {} as Column, {}, {} as any); - const result2 = checkmarkFormatter(0, 0, value2, {} as Column, {}, {} as any); - expect((result1 as HTMLElement).outerHTML).toBe(''); - expect((result2 as HTMLElement).outerHTML).toBe(''); - }); -}); diff --git a/packages/common/src/formatters/checkmarkFormatter.ts b/packages/common/src/formatters/checkmarkFormatter.ts deleted file mode 100644 index ccdf43ae4..000000000 --- a/packages/common/src/formatters/checkmarkFormatter.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { createDomElement, isNumber } from '@slickgrid-universal/utils'; - -import type { Formatter } from './../interfaces/index'; - -/** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Font-Awesome icon (fa-check). - * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) - * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. - * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important - */ -export const checkmarkFormatter: Formatter = (_row, _cell, value) => { - let isChecked = false; - const isValidNumber = isNumber(value); - - if (isValidNumber) { - value = +value; // convert to number before doing next condition - } - - if (value === true || (isValidNumber && +value > 0) || (typeof value === 'string' && value.length > 0 && value.toLowerCase() !== 'false' && value !== '0')) { - isChecked = true; - } - - return isChecked ? createDomElement('i', { className: 'mdi mdi-check checkmark-icon', ariaHidden: 'true' }) : ''; -}; diff --git a/packages/common/src/formatters/formatters.index.ts b/packages/common/src/formatters/formatters.index.ts index 94530933d..c685b5bbd 100644 --- a/packages/common/src/formatters/formatters.index.ts +++ b/packages/common/src/formatters/formatters.index.ts @@ -2,7 +2,6 @@ import { FieldType } from '../enums/index'; import { getAssociatedDateFormatter } from './formatterUtilities'; import { arrayObjectToCsvFormatter } from './arrayObjectToCsvFormatter'; import { arrayToCsvFormatter } from './arrayToCsvFormatter'; -import { checkmarkFormatter } from './checkmarkFormatter'; import { checkmarkMaterialFormatter } from './checkmarkMaterialFormatter'; import { currencyFormatter } from './currencyFormatter'; import { collectionFormatter } from './collectionFormatter'; @@ -42,14 +41,6 @@ export const Formatters = { /** Takes an array of string and converts it to a comma delimited string */ arrayToCsv: arrayToCsvFormatter, - /** - * When value is filled, or if the value is a number and is bigger than 0, it will display a Font-Awesome icon (fa-check). - * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) - * Anything else than the condition specified will display the icon, so a text with "00123" will display the icon but "0" will not. - * Also note that a string ("null", "undefined") will display the icon but (null, undefined) will not, so the typeof is also important - */ - checkmark: checkmarkFormatter, - /** * When value is filled, or if the value is a number and is bigger than 0, it will display a Material Design check icon (mdi-check). * The icon will NOT be displayed when the value is any of the following ("false", false, "0", 0, -0.5, null, undefined) @@ -197,11 +188,11 @@ export const Formatters = { */ hyperlink: hyperlinkFormatter, - /** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ + /** Display whichever icon you want (library agnostic, it could be Font-Awesome, Material or any other icons set) */ icon: iconFormatter, /** - * Display whichever icon but only for boolean truthy values (library agnostic, it could be Font-Awesome or any other) + * Display whichever icon but only for boolean truthy values (library agnostic, it could be Font-Awesome, Material or any other icons set) * Note: a value of "false", null, undefined, "1" or any number below 0 are all considered falsy and will not display the icon */ iconBoolean: iconBooleanFormatter, diff --git a/packages/common/src/formatters/iconBooleanFormatter.ts b/packages/common/src/formatters/iconBooleanFormatter.ts index c14a72243..5d30e5704 100644 --- a/packages/common/src/formatters/iconBooleanFormatter.ts +++ b/packages/common/src/formatters/iconBooleanFormatter.ts @@ -2,7 +2,7 @@ import { createDomElement } from '@slickgrid-universal/utils'; import { type Formatter } from './../interfaces/index'; -/** Display whichever icon for a boolean value (library agnostic, it could be Font-Awesome or any other) */ +/** Display whichever icon for a boolean value (library agnostic, it could be Font-Awesome, Material or any other icons set) */ export const iconBooleanFormatter: Formatter = (_row, _cell, value, columnDef) => { const columnParams = columnDef?.params || {}; const cssClasses = columnParams.cssClass; diff --git a/packages/common/src/formatters/iconFormatter.ts b/packages/common/src/formatters/iconFormatter.ts index 3d9c9386a..6d3ac400e 100644 --- a/packages/common/src/formatters/iconFormatter.ts +++ b/packages/common/src/formatters/iconFormatter.ts @@ -2,7 +2,7 @@ import { createDomElement } from '@slickgrid-universal/utils'; import { type Formatter } from './../interfaces/index'; -/** Display whichever icon you want (library agnostic, it could be Font-Awesome or any other) */ +/** Display whichever icon you want (library agnostic, it could be Font-Awesome, Material or any other icons set) */ export const iconFormatter: Formatter = (_row, _cell, _value, columnDef) => { const columnParams = columnDef?.params ?? {}; const cssClasses = columnParams.iconCssClass || columnParams.icon || columnParams.formatterIcon; diff --git a/packages/common/src/formatters/index.ts b/packages/common/src/formatters/index.ts index 1ab3c19a7..2829d3cdf 100644 --- a/packages/common/src/formatters/index.ts +++ b/packages/common/src/formatters/index.ts @@ -1,7 +1,6 @@ export * from './arrayObjectToCsvFormatter'; export * from './arrayToCsvFormatter'; export * from './checkmarkMaterialFormatter'; -export * from './checkmarkFormatter'; export * from './collectionEditorFormatter'; export * from './collectionFormatter'; export * from './complexObjectFormatter'; diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 4bbcff957..c4f8044ed 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -95,7 +95,7 @@ $slick-pagination-page-input-border-radius: 3px !default; .slick-dark-mode .ms-dark-mode, .slick-dark-mode .icon-checkbox-container, .slick-dark-mode { - --slick-primary-color: #66bb6a !important; + --slick-primary-color: #66bb6a; --slick-base-dark-menu-bg-color: #212121; --slick-button-primary-bg-color: #66bb6a; --slick-cell-box-shadow: none; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 53e45a533..5ab233e7b 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -130,7 +130,7 @@ $slick-pagination-page-input-border-radius: 3px !default; .slick-dark-mode .ms-dark-mode, .slick-dark-mode .icon-checkbox-container, .slick-dark-mode { - --slick-primary-color: #66b8ff !important; + --slick-primary-color: #66b8ff; --ms-checkbox-color: #66b8ff; --ms-ok-button-text-color: #66b8ff; --slick-button-primary-bg-color: #0064c9; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index ff39f0c68..09ef71935 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -166,7 +166,7 @@ $slick-frozen-header-row-border-right: $slick-frozen-border $slick-frozen-filter-row-border-right: $slick-frozen-border-right !default; $slick-frozen-overflow-right: scroll !default; // typically we would like to always have the scroll displayed when using hamburger menu (top right) -/* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */ +/* icons */ $slick-icon-color: inherit !default; $slick-icon-font-size: 18px !default; $slick-icon-group-color: $slick-primary-color !default; @@ -984,7 +984,7 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-detail-view-container-border: 1px solid #525252; --slick-detail-view-container-bgcolor: #3c4349; --slick-btn-default-border-color: #565656; - --slick-grid-menu-icon-btn-color: #bbbbbb; + --slick-grid-menu-icon-btn-color: #ededed; --slick-row-mouse-hover-color: #2c3034; --slick-header-background-color: #1c1c1c; --slick-header-text-color: var(--slick-base-dark-text-color); diff --git a/packages/common/src/styles/slickgrid-icons.scss b/packages/common/src/styles/slickgrid-icons.scss index be27ad263..e0e74e46a 100644 --- a/packages/common/src/styles/slickgrid-icons.scss +++ b/packages/common/src/styles/slickgrid-icons.scss @@ -1031,7 +1031,6 @@ $slick-icon-font-size: $slick-icon-width; display: inline-block; align-items: center; background-color: currentColor; - color: $slick-icon-color; font-size: $slick-icon-font-size; width: 1em; height: 1em;