From e82d092904ff592efa25ca21eda1a7c1edeec25f Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Thu, 2 May 2024 23:06:27 -0400 Subject: [PATCH] chore(style): merge slick-grid.scss & slick-bootstrap.scss into 1 file (#1501) * chore(style): merge slick-grid.scss & slick-bootstrap.scss into 1 file --- docs/column-functionalities/Formatters.md | 2 + docs/migrations/migration-to-5.x.md | 14 +- docs/styling/styling.md | 6 +- .../src/examples/example05.scss | 3 +- .../src/examples/example14.ts | 2 +- packages/common/src/styles/_variables.scss | 7 +- packages/common/src/styles/colors.scss | 2 +- packages/common/src/styles/extra-styling.scss | 5 - .../common/src/styles/slick-bootstrap.scss | 447 ------------ .../common/src/styles/slick-component.scss | 2 +- packages/common/src/styles/slick-editors.scss | 3 +- packages/common/src/styles/slick-grid.scss | 679 ++++++++++++++---- packages/common/src/styles/slick-plugins.scss | 2 +- .../slickgrid-theme-bootstrap.lite.scss | 3 +- .../src/styles/slickgrid-theme-bootstrap.scss | 1 - .../styles/slickgrid-theme-material.lite.scss | 3 +- .../src/styles/slickgrid-theme-material.scss | 1 - .../slickgrid-theme-salesforce.lite.scss | 3 +- .../styles/slickgrid-theme-salesforce.scss | 1 - ...sass-utilities.scss => svg-utilities.scss} | 0 20 files changed, 549 insertions(+), 637 deletions(-) delete mode 100644 packages/common/src/styles/slick-bootstrap.scss rename packages/common/src/styles/{sass-utilities.scss => svg-utilities.scss} (100%) diff --git a/docs/column-functionalities/Formatters.md b/docs/column-functionalities/Formatters.md index 5d1d87a28..3d8608901 100644 --- a/docs/column-functionalities/Formatters.md +++ b/docs/column-functionalities/Formatters.md @@ -190,7 +190,9 @@ export interface FormatterResultObject { ``` ### Example of a Custom Formatter with HTML string + 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 8b6b193f2..6f7a38342 100644 --- a/docs/migrations/migration-to-5.x.md +++ b/docs/migrations/migration-to-5.x.md @@ -36,7 +36,7 @@ The goal of this new release was mainly to improve UI/UX (mostly for Dark Mode) > **NOTE:** if you come from an earlier version, please make sure to follow each migrations in their respected order (review previous migration guides) -For most breaking changes, a quick Search & Replace in your code editor should suffice. +For most breaking changes, a quick Search & Replace in your code editor should suffice. ## Changes @@ -64,7 +64,7 @@ or move the class to the parent container and have both the icon & the text inhe ``` #### SASS variables -A lot of SASS variables were changed, we recommend that 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 them with yours SASS overrides and fix any SASS build issues. For example a lot of the ms-select variables and all Flatpickr related variables were deleted. Also a lot of the icon related variables got updated (icons now have the suffix `-icon-svg-path` for the SVG vector path). If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`sass-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/sass-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage) +A lot of SASS variables were changed, we recommend that 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 them with yours SASS overrides and fix any SASS build issues. For example a lot of the ms-select variables and all Flatpickr related variables were deleted. Also a lot of the icon related variables got updated (icons now have the suffix `-icon-svg-path` for the SVG vector path). If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`svg-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/svg-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage) #### SASS (dart-sass) `math` polyfills are removed When SASS (dart-sass) released their version 1.33 (~3 years ago), it caused a ton of console warnings (and a lot of unhappy users) in projects that were using `/` in their SASS files (for math division) instead of their new `math.div()` function. To avoid seeing all these warnings, I added a temporary polyfill at the time (that piece of code was actually copied from the Bootstrap project). That polyfill patch was put in place about 3 years ago, so I'm assuming that most users have already upgraded their SASS version and already fixed all of these warnings. So, I think it's time to remove this polyfill because it was really meant to be a temp patch. If you see these warnings coming back, then a suggestion would be to use the SASS option `--quiet-upstream`. @@ -187,7 +187,7 @@ The biggest change that you will have to do is the min/max date setting when usi prepareGrid() { this.columnDefinitions = [{ - id: 'finish', field: 'finish', name: 'Finish', + id: 'finish', field: 'finish', name: 'Finish', editor: { model: Editors.date, - editorOptions: { minDate: 'today' } as FlatpickrOption, @@ -204,17 +204,17 @@ The work on this subject started over a month ago in version [v4.6.0](https://gi An example of the previous `internalColumnEditor` usage was when you wanted to modify or push a new item to the editor collection array (see below). In the past, you could not simply push directly to `collection.editor.collection`, you really had to use the mapping of `collection.internalColumnEditor.collection`... this is thankfully gone, you can now use the same and original `collection.editor.collection` 🎉 -For example, previously, to add an item to the editor/filter collection +For example, previously, to add an item to the editor/filter collection ```diff this.columnDefinitions = [{ id: 'complexity', editor: { model: Editors.singleSelect, collection: [{ value: 1, label: 'Simple' }, /*...*/ ] } }]; -// then adding an item would previously require to use `internalColumnEditor` +// then adding an item would previously require to use `internalColumnEditor` // after grid init, our `editor` became `internalColumnEditor -- const complexityEditor = this.columnDefinitions[0].internalColumnEditor; +- const complexityEditor = this.columnDefinitions[0].internalColumnEditor; complexityEditor.collection.push({ value: 9, label: 'Hard' }); // NOW with this new release, adding a new item to the collection is as simple as referencing the original object -+ const complexityEditor = this.columnDefinitions[0].editor; ++ const complexityEditor = this.columnDefinitions[0].editor; complexityEditor.collection.push({ value: 9, label: 'Hard' }); ``` diff --git a/docs/styling/styling.md b/docs/styling/styling.md index 48b1e9e65..e612be904 100644 --- a/docs/styling/styling.md +++ b/docs/styling/styling.md @@ -65,7 +65,7 @@ For example, if we take the following 3 SASS variables (`$slick-header-menu-disp > **Note:** you could use `:host` to only change current grid styling, **however** there are many DOM elements that are appended to the DOM `body` (Grid Menu, Column Picker, Select Filter/Editor, Context Menu, ...) and the styles **will not** be applied when simply using `:host` and so in most cases you would want to use `:root` (if possible) to make a global change which will also work with elements appended to the `body`. Also note that `:root` is not available in Salesforce LWC and so you unfortunately won't be able to style everything in Salesforce. ### Using Custom SVGs with SASS -You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG vector path. All SVG icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`sass-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/sass-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage) +You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Slickgrid-Universal has an associated SASS variables ending with the suffix `"icon-svg-path"` which allow you to override any of the SVG vector path. All SVG icons are generated by following AntFu's [icons in pure CSS](https://antfu.me/posts/icons-in-pure-css) approach. If you want create your own SVGs in pure CSS, you can use the `generateSvgStyle()` function from our [`svg-utilities.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/svg-utilities.scss) (take a look at the [`slickgrid-icons.scss`](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/styles/slickgrid-icons.scss) on its usage) ##### with SVG ```scss @@ -92,9 +92,9 @@ $slick-checkbox-icon-checked-svg-path: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6. ``` ### SVG icons -The project has a few built-in icons (sort, grouping, row detail, row move, row selection) and you can change them via SASS (or CSS with a bit more work). For that reason, all Styling Themes Since this release now has pure CSS SVG icons, I decided to delete any Font-Awesome references (mostly in the Bootstrap Theme) because all the built-in icons are now all SVG icons (sort, grouping, row detail, row move) (you can change them using SASS). However, there are a few plugins that use external icons via CSS classes (mostly all menu plugins like Header Menu, Grid Menu, Content Menu, ...) and for that reason **all Styling Themes now include default SVG icons** (even the Bootstrap Theme). +The project has a few built-in icons (sort, grouping, row detail, row move, row selection) and you can change them via SASS (or CSS with a bit more work). For that reason, all Styling Themes Since this release now has pure CSS SVG icons, I decided to delete any Font-Awesome references (mostly in the Bootstrap Theme) because all the built-in icons are now all SVG icons (sort, grouping, row detail, row move) (you can change them using SASS). However, there are a few plugins that use external icons via CSS classes (mostly all menu plugins like Header Menu, Grid Menu, Content Menu, ...) and for that reason **all Styling Themes now include default SVG icons** (even the Bootstrap Theme). -What if you want to use your own font/SVG library? +What if you want to use your own font/SVG library? This can be answered in 2 parts: 1. the built-in icons can only be changed via SASS (or CSS with extra work), see above on how to change them. 2. for all other area using icons via CSS classes (e.g. all menu plugins), you can use the "lite" Themes and then make sure to update all the menu plugins with the correct CSS classes, for example the global grid options of the Grid Menu is configured with the following CSS classes and you'll want to remap them with the correct CSS classes to fit your need: diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example05.scss b/examples/vite-demo-vanilla-bundle/src/examples/example05.scss index 11d381b82..62c698874 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example05.scss +++ b/examples/vite-demo-vanilla-bundle/src/examples/example05.scss @@ -1,9 +1,8 @@ // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss'; .grid5 { + --slick-cell-display: inline-flex; .slick-cell { - display: inline-flex; - align-items: center; column-gap: 4px; } } \ No newline at end of file diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts index 33343a206..70a3fa8cd 100644 --- a/examples/vite-demo-vanilla-bundle/src/examples/example14.ts +++ b/examples/vite-demo-vanilla-bundle/src/examples/example14.ts @@ -335,7 +335,7 @@ export default class Example14 { { command: 'help', title: 'Help!', - iconCssClass: 'mdi mdi-circle-question', + iconCssClass: 'mdi mdi-help-circle', positionOrder: 66, action: () => alert('Please Help!'), }, diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index 33819f9b0..bb7c0992d 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -2,7 +2,7 @@ @import 'vanilla-calendar-picker/build/vanilla-calendar.min'; // SASS utils to generate SVGs -@import './sass-utilities'; +@import './svg-utilities'; /* * SlickGrid-Universal theming variables, used by all Themes @@ -93,6 +93,7 @@ $slick-cell-odd-active-background-color: darken($slick-grid-c $slick-cell-padding-top-bottom: 5px !default; $slick-cell-padding-left-right: 6px !default; $slick-cell-padding: $slick-cell-padding-top-bottom $slick-cell-padding-left-right !default; +$slick-icon-with-text-valign: middle !default; /** 4x available slick-pane (top, bottom, left, right) */ $slick-pane-top-border-top: none !default; @@ -269,8 +270,6 @@ $slick-group-border-bottom: 2px solid silver !de $slick-group-totals-formatter-color: gray !default; $slick-group-totals-formatter-bgcolor: #fff !default; $slick-group-totals-formatter-font-size: 14px !default; -$slick-group-totals-text-background: white !default; -$slick-group-totals-text-color: gray !default; /** Row Detail View Plugin */ $slick-detail-view-icon-color: $slick-primary-color !default; @@ -486,6 +485,7 @@ $slick-large-editor-text-color: #333 !default; $slick-text-editor-border: 1px solid #e2e2e2 !default; $slick-text-editor-border-radius: $slick-editor-input-border-radius !default; $slick-text-editor-background: #ffffff !default; +$slick-text-editor-color: #333 !default; $slick-text-editor-margin-bottom: 0 !default; $slick-text-editor-margin-left: -2px !default; /* negative number to cancel inside padding */ $slick-text-editor-right-input-margin-left: calc(#{$slick-text-editor-margin-left} + 9px) !default; @@ -1081,6 +1081,7 @@ $slick-empty-data-warning-z-index: 10 !default; --slick-large-editor-background-color: var(--slick-base-dark-menu-bg-color); --slick-large-editor-border: 2px solid #565656; --slick-large-editor-text-color: var(--slick-base-dark-text-color); + --slick-text-editor-color: var(--slick-base-dark-text-color); --slick-header-menu-button-icon-color: var(--slick-menu-color); --slick-text-editor-background: var(--slick-base-dark-menu-bg-color); --slick-pagination-button-border: 1px solid #696969; diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss index b69a8b284..0042de2b9 100644 --- a/packages/common/src/styles/colors.scss +++ b/packages/common/src/styles/colors.scss @@ -1,4 +1,4 @@ -@import './sass-utilities'; +@import './svg-utilities'; /* icon/text colors */ // we'll use the same color set as text-colors defined in Bootstrap 4 (ref: https://getbootstrap.com/docs/4.5/utilities/colors/) diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss index 3b5d2e726..f9f1fcb5c 100644 --- a/packages/common/src/styles/extra-styling.scss +++ b/packages/common/src/styles/extra-styling.scss @@ -15,11 +15,6 @@ $slick-padding-max-count: 30; } } -.slick-cell { - .button-style { - height: 100%; - } -} .button-style { cursor: pointer; background-color: var(--slick-button-style-bg-color, $slick-button-style-bg-color); diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss deleted file mode 100644 index 6fc6f93aa..000000000 --- a/packages/common/src/styles/slick-bootstrap.scss +++ /dev/null @@ -1,447 +0,0 @@ -/* Mixins for SlickGrid */ -@import './variables'; - -@keyframes fade { - 0%, 100% { background: none } - 50% { background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color) } -} - -.slickgrid-container { - border-top: var(--slick-container-border-top, $slick-container-border-top); - border-bottom: var(--slick-container-border-bottom, $slick-container-border-bottom); - border-left: var(--slick-container-border-left, $slick-container-border-left); - border-right: var(--slick-container-border-right, $slick-container-border-right); - position: relative; - font-family: var(--slick-font-family, $slick-font-family); - width: 100%; - - @mixin resetSlickCell() { - padding: var(--slick-cell-padding, $slick-cell-padding); - font-size: var(--slick-font-size-base, $slick-font-size-base); - td { - font-size: var(--slick-font-size-base, $slick-font-size-base); - } - body & { - line-height: 20px; - } - } - - // Reset the margin of the checkboxes. The grid - // needs a selection checbox column. Bootstrap gives - // these elements a 4px top margin, which we have to reset - // by aligning to baseline. - input[type="checkbox"] { - vertical-align: baseline; - margin: 0; - } - - .slick-viewport { - height: 100%; - border-top: var(--slick-viewport-border-top, $slick-viewport-border-top); - border-bottom: var(--slick-viewport-border-bottom, $slick-viewport-border-bottom); - border-left: var(--slick-viewport-border-left, $slick-viewport-border-left); - border-right: var(--slick-viewport-border-right, $slick-viewport-border-right); - } - - .grid-canvas { - .slick-row { - position: absolute; - width: 100%; - color: var(--slick-cell-text-color, $slick-cell-text-color); - font-family: var(--slick-cell-font-family, $slick-cell-font-family); - font-weight: var(--slick-cell-font-weight, $slick-cell-font-weight); - - &:hover { - background-color: var(--slick-row-mouse-hover-color, $slick-row-mouse-hover-color); - box-shadow: var(--slick-row-mouse-hover-box-shadow, $slick-row-mouse-hover-box-shadow); - z-index: var(--slick-row-mouse-hover-z-index, $slick-row-mouse-hover-z-index); - } - &.active { - padding: var(--slick-cell-padding, $slick-cell-padding); - } - &.highlighter { - background: orange !important; - transition-property: background; - transition-duration: 3s; - transition-timing-function: ease-in; - } - &.copied { - background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); - transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); - } - &.odd { - background-color: var(--slick-cell-odd-background-color, $slick-cell-odd-background-color); - &:hover { - background-color: var(--slick-row-mouse-hover-color, $slick-row-mouse-hover-color); - } - } - &.odd .slick-cell { - &.selected { - background-color: var(--slick-row-selected-color, $slick-row-selected-color); - } - &.copied { - background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); - transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); - } - background: inherit; - } - &.highlight { - background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color); - } - &.highlight-animate { - background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color) !important; - animation: fade var(--slick-row-highlight-fade-animation, $slick-row-highlight-fade-animation); - } - &.slick-group-totals { - color: var(--slick-group-totals-formatter-color, $slick-group-totals-formatter-color); - background: var(--slick-group-totals-formatter-bgcolor, $slick-group-totals-formatter-bgcolor); - .slick-cell { - font-size: var(--slick-group-totals-formatter-font-size, $slick-group-totals-formatter-font-size); - } - } - - &.slick-rbe-editmode.active .slick-cell, - &.slick-rbe-editmode .slick-cell { - background-color: var(--slick-row-based-edit-editmode-bgcolor, $slick-row-based-edit-editmode-bgcolor); - - &:hover { - background-color: var(--slick-row-based-edit-editmode-hover-bgcolor, $slick-row-based-edit-editmode-hover-bgcolor); - - .active { - background-color: var(--slick-row-based-edit-editmode-active-hover-bgcolor, $slick-row-based-edit-editmode-active-hover-bgcolor) !important; - } - } - - .active { - background-color: var(--slick-row-based-edit-editmode-active-bgcolor, $slick-row-based-edit-editmode-active-bgcolor); - - &:hover { - background-color: var(--slick-row-based-edit-editmode-active-hover-bgcolor, $slick-row-based-edit-editmode-active-hover-bgcolor); - } - } - } - } - .slick-cell, .slick-headerrow-column { - border-top: var(--slick-cell-border-top, $slick-cell-border-top); - border-bottom: var(--slick-cell-border-bottom, $slick-cell-border-bottom); - border-left: var(--slick-cell-border-left, $slick-cell-border-left); - border-right: var(--slick-cell-border-right, $slick-cell-border-right); - box-shadow: var(--slick-cell-box-shadow, $slick-cell-box-shadow); - } - - .even { - background-color: var(--slick-cell-even-background-color, $slick-cell-even-background-color); - } - - - .slick-cell { - @include resetSlickCell(); - - &.slick-rbe-unsaved-cell { - background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, $slick-row-based-edit-unsaved-cell-bgcolor) !important; - } - - a, a:visited, .slick-widget-content a, .slick-widget-content a:visited { - color: var(--slick-link-color, $slick-link-color); - } - a:hover, .slick-widget-content a:hover { - color: var(--slick-link-color-hover, $slick-link-color-hover); - border-bottom: none; - } - table { - height: 100%; - padding: 0; - background: none; - } - td { - padding: 0; - vertical-align: middle; - text-align: left; - } - &.selected { - background-color: var(--slick-row-selected-color, $slick-row-selected-color); - } - &.copied { - background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); - transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); - } - select:not([multiple]).form-control { - height: 100%; - padding: 0; - } - .slick-group-title { - height: var(--slick-draggable-group-title-height, $slick-draggable-group-title-height); - line-height: var(--slick-draggable-group-title-line-height, $slick-draggable-group-title-line-height); - vertical-align: var(--slick-draggable-group-title-vertical-align, $slick-draggable-group-title-vertical-align); - } - - .slick-group-toggle { - cursor: pointer; - display: inline-block; - width: 1em; - height: 1em; - color: var(--slick-icon-group-color, $slick-icon-group-color); - font-size: var(--slick-icon-group-font-size, $slick-icon-group-font-size); - margin-right: var(--slick-icon-group-margin-right, $slick-icon-group-margin-right); - - &.expanded { - @include generateSvgStyle('slick-icon-group-expanded-svg', $slick-icon-group-expanded-svg-path); - } - &.collapsed { - @include generateSvgStyle('slick-icon-group-collapsed-svg', $slick-icon-group-collapsed-svg-path); - } - &.expanded, - &.collapsed { - background-color: currentColor; - } - } - } - } - - .slick-header { - border-top: var(--slick-header-border-top, $slick-header-border-top); - border-right: var(--slick-header-border-right, $slick-header-border-right); - border-bottom: var(--slick-header-border-bottom, $slick-header-border-bottom); - border-left: var(--slick-header-border-left, $slick-header-border-left); - width: 100%; - box-shadow: none !important; - } - - .slick-headerrow { - border-bottom: var(--slick-header-filter-row-border-bottom, $slick-header-filter-row-border-bottom); - border-top: var(--slick-header-filter-row-border-top, $slick-header-filter-row-border-top); - border-left: var(--slick-header-filter-row-border-left, $slick-header-filter-row-border-left); - border-right: var(--slick-header-filter-row-border-right, $slick-header-filter-row-border-right); - - .slick-headerrow-columns { - .slick-headerrow-column { - border: none; - padding: var(--slick-header-row-filter-padding, $slick-header-row-filter-padding); - background: var(--slick-header-row-background-color, $slick-header-row-background-color); - } - .slick-headerrow-column input, - .slick-headerrow-column select, - .slick-headerrow-column textarea { - margin-right: 0; - padding: var(--slick-header-input-padding, $slick-header-input-padding); - height: var(--slick-header-input-height, $slick-header-input-height); - box-sizing: border-box; - } - } - } - - .slick-header-columns { - background: var(--slick-grid-header-background, $slick-grid-header-background); - background-color: var(--slick-header-background-color, $slick-header-background-color); - width: calc(100% - #{var(--slick-header-scroll-width-to-remove, $slick-header-scroll-width-to-remove)}); - - [id$="checkbox_selector"] { - justify-content: center; - display: flex; - } - - .slick-header-sortable { - .slick-column-name { - margin-left: 0; - } - } - - .slick-header-column { - height: var(--slick-header-column-height, $slick-header-column-height); - line-height: var(--slick-font-size-base, $slick-font-size-base); - margin: 0; - border-top: var(--slick-header-column-border-top, $slick-header-column-border-top); - border-right: var(--slick-header-column-border-right, $slick-header-column-border-right); - border-bottom: var(--slick-header-column-border-bottom, $slick-header-column-border-bottom); - border-left: var(--slick-header-column-border-left, $slick-header-column-border-left); - white-space: normal; - &.slick-state-default { - @include resetSlickCell(); - } - .slick-column-name { - margin-right: var(--slick-header-column-name-margin-right, $slick-header-column-name-margin-right); - } - - @mixin ResetColumns () { - /* like TH */ - background: var(--slick-header-background-color, $slick-header-background-color); - font-family: var(--slick-font-family, $slick-font-family); - color: var(--slick-header-text-color, $slick-header-text-color); - font-size: var(--slick-header-font-size, $slick-header-font-size); - font-weight: var(--slick-header-font-weight, $slick-header-font-weight); - a, a:visited { - color: var(--slick-text-color, $slick-text-color); - } - a:hover { - color: var(--slick-hover-header-color, $slick-hover-header-color); - } - } - - @include ResetColumns (); - &.slick-state-default { - @include ResetColumns (); - } - - &.slick-header-column-sorted { - font-style: normal; - color: var(--slick-sorting-header-color, $slick-sorting-header-color); - } - &:hover { - color: var(--slick-hover-header-color, $slick-hover-header-color); - } - - .slick-sort-indicator { - display: inline-block; - height: 1em; - width: 1em; - left: auto; - position: absolute; - color: var(--slick-icon-sort-color, $slick-icon-sort-color); - font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); - right: var(--slick-icon-sort-position-right, $slick-icon-sort-position-right); - top: var(--slick-icon-sort-position-top, $slick-icon-sort-position-top); - } - .slick-sort-indicator-numbered { - font-family: var(--slick-font-family, $slick-font-family); - font-size: var(--slick-sort-indicator-number-font-size, $slick-sort-indicator-number-font-size); - position: absolute; - display: inline-block; - color: var(--slick-icon-sort-color, $slick-icon-sort-color); - width: var(--slick-sort-indicator-number-width, $slick-sort-indicator-number-width); - left: var(--slick-sort-indicator-number-left, $slick-sort-indicator-number-left); - right: var(--slick-sort-indicator-number-right, $slick-sort-indicator-number-right); - top: var(--slick-sort-indicator-number-top, $slick-sort-indicator-number-top); - } - - // when sorting is possible and there's not yet a sort applied on the column - // we could display the sort ascending icon (with an opacity) as a hint */ - &.slick-header-sortable.slick-state-hover:not(.slick-header-column-sorted) { - .slick-sort-indicator { - opacity: var(--slick-sort-indicator-hint-opacity, $slick-sort-indicator-hint-opacity); - @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); - } - } - .slick-sort-indicator-asc { - @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); - } - .slick-sort-indicator-desc { - @include generateSvgStyle('slick-icon-sort-desc-icon-svg', $slick-icon-sort-desc-icon-svg-path); - } - .slick-sort-indicator-asc, - .slick-sort-indicator-desc { - opacity: 1; - background-color: currentColor; - } - - .slick-resizable-handle { - width: 7px; - right: 0; - z-index: 1; - &:hover { - border-bottom: var(--slick-header-resizable-hover-border-bottom, $slick-header-resizable-hover-border-bottom); - border-left: var(--slick-header-resizable-hover-border-left, $slick-header-resizable-hover-border-left); - border-right: var(--slick-header-resizable-hover-border-right, $slick-header-resizable-hover-border-right); - border-top: var(--slick-header-resizable-hover-border-top, $slick-header-resizable-hover-border-top); - width: var(--slick-header-resizable-hover-width, $slick-header-resizable-hover-width); - border-radius: var(--slick-header-resizable-hover-border-radius, $slick-header-resizable-hover-border-radius); - right: var(--slick-header-resizable-hover-right, $slick-header-resizable-hover-right); - height: var(--slick-header-resizable-hover-height, $slick-header-resizable-hover-height); - top: var(--slick-header-resizable-hover-top, $slick-header-resizable-hover-top); - opacity: var(--slick-header-resizable-hover-opacity, $slick-header-resizable-hover-opacity); - } - } - &.unorderable { - background-color: var(--slick-grid-header-unorderable-bg-color, $slick-grid-header-unorderable-bg-color); - } - } - } - - /** Header Grouping **/ - .slick-preheader-panel.slick-state-default { - border-bottom: var(--slick-preheader-border-bottom, $slick-preheader-border-bottom); - - .slick-header-columns { - border-top: var(--slick-preheader-border-top, $slick-preheader-border-top); - - .slick-header-column { - height: var(--slick-preheader-height, $slick-preheader-height); - border-left: var(--slick-preheader-border-left, $slick-preheader-border-left); - border-right: var(--slick-preheader-border-right, $slick-preheader-border-right); - font-size: var(--slick-preheader-font-size, $slick-preheader-font-size); - justify-content: var(--slick-preheader-grouped-title-justify, $slick-preheader-grouped-title-justify); - display: var(--slick-preheader-grouped-title-display, $slick-preheader-grouped-title-display); - } - .slick-header-column:first-child { - border-left: var(--slick-preheader-border-left-first-element, $slick-preheader-border-left-first-element); - } - .slick-header-column:last-child { - border-right: var(--slick-preheader-border-right-last-element, $slick-preheader-border-right-last-element); - } - } - } - - /** Frozen/Pinned styling */ - - .slick-row .slick-cell.frozen:last-child, - .slick-footerrow-column.frozen:last-child { - border-right: var(--slick-frozen-border-right, $slick-frozen-border-right); - } - .slick-header-column.frozen:last-child { - border-right: var(--slick-frozen-header-row-border-right, $slick-frozen-header-row-border-right); - } - .slick-pane-left { - .slick-preheader-panel .slick-header-column.frozen:last-child { - border-right: var(--slick-frozen-preheader-row-border-right, $slick-frozen-preheader-row-border-right); - } - } - .slick-headerrow-column.frozen:last-child { - border-right: var(--slick-frozen-filter-row-border-right, $slick-frozen-filter-row-border-right); - } - - .slick-pane-bottom { - border-top: var(--slick-frozen-border-bottom, $slick-frozen-border-bottom); - } - .slick-viewport-bottom.slick-viewport-right { - overflow-y: var(--slick-frozen-overflow-right, $slick-frozen-overflow-right) !important; - } - .input-group { - display: flex; - - > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { - margin-left: 0; - &.slick-slider-horizontal { - margin-left: 10px; - } - } - - .input-group-append, - .input-group-prepend { - display: inline-flex; - width: auto; - } - - .input-group-addon { - input { - flex: 1 1 auto; - width: 1%; - } - .input-group-text { - height: 100%; - } - &.input-group-append { - .input-group-text { - margin-left: -1px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - } - &.input-group-prepend { - .input-group-text { - margin-right: -1px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - } - } -} diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss index 270a032f3..477eaa548 100644 --- a/packages/common/src/styles/slick-component.scss +++ b/packages/common/src/styles/slick-component.scss @@ -1,6 +1,6 @@ /* pagination/pagination variables */ @import './variables'; -@import './sass-utilities'; +@import './svg-utilities'; // ---------------------------------------------- // Slick Footer Component diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index 749c70cd6..f8c99763e 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -1,6 +1,6 @@ @import './variables'; @import './slick.layout'; -@import './sass-utilities'; +@import './svg-utilities'; .slick-cell { input.dual-editor-text, @@ -8,6 +8,7 @@ border: var(--slick-text-editor-border, $slick-text-editor-border); border-radius: var(--slick-text-editor-border-radius, $slick-text-editor-border-radius); background: var(--slick-text-editor-background, $slick-text-editor-background); + color: var(--slick-text-editor-color, $slick-text-editor-color); padding-bottom: var(--slick-text-editor-padding-bottom, $slick-text-editor-padding-bottom); padding-left: var(--slick-text-editor-padding-left, $slick-text-editor-padding-left); padding-right: var(--slick-text-editor-padding-right, $slick-text-editor-padding-right); diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss index d142d45a8..13fc63c2e 100644 --- a/packages/common/src/styles/slick-grid.scss +++ b/packages/common/src/styles/slick-grid.scss @@ -1,16 +1,17 @@ @import './variables'; // ---------------------------------------------- -// default theme +// Slick Grid default theme // ---------------------------------------------- +@keyframes fade { + 0%, 100% { background: none } + 50% { background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color) } +} + @keyframes slickgrid-invalid-highlight { - from { - box-shadow: 0 0 6px red; - } - to { - box-shadow: none; - } + from { box-shadow: 0 0 6px red; } + to { box-shadow: none; } } .full-height { @@ -19,76 +20,119 @@ .grid-pane { width: 100%; } +.pointer { + cursor: pointer; +} - .pointer { - cursor: pointer; - } - .slickgrid-container { - .slick-header-columns, - .slick-header-column { - box-sizing: content-box !important; /* this here only for Firefox! */ - } - .slick-header-column:hover { - background: $slick-header-column-background-hover - } - - .slick-header-column-active { - background-color: var(--slick-header-column-background-active, $slick-header-column-background-active) !important; - } - - .slick-headerrow { - background: var(--slick-grid-header-background, $slick-grid-header-background); - } - .grid-canvas { - background: var(--slick-canvas-bg-color, $slick-canvas-bg-color); - } - - .slick-row { - background: inherit; - border: 0; - line-height: 20px; - - .slick-cell { - background: inherit; - border: 1px transparent; - box-sizing: border-box; - - &.invalid { - border-color: red; - animation-duration: 0.2s; - animation-name: slickgrid-invalid-highlight; - } - - &.active { - box-shadow: var(--slick-cell-active-box-shadow, $slick-cell-active-box-shadow); - border: var(--slick-cell-active-border, $slick-cell-active-border); - z-index: var(--slick-cell-active-z-index, $slick-cell-active-z-index); - - // We compensate for the all-around border (now 1px at top and left too!) - padding: var(--slick-cell-padding, $slick-cell-padding); - - input.dual-editor-text { - width: calc(50% + 1px - 5px); // 1px (is 2px / 2) and 5px (is space between the 2 inputs) - height: 100%; - outline: 0; - transform: translate(0, -2px); - } - } - - &.slick-rbe-unsaved-cell { - background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, $slick-row-based-edit-unsaved-cell-bgcolor) !important; - } - } +.slickgrid-container { + overflow: hidden; + outline: 0; + position: relative; + box-sizing: content-box; + width: 100%; + border-top: var(--slick-container-border-top, $slick-container-border-top); + border-bottom: var(--slick-container-border-bottom, $slick-container-border-bottom); + border-left: var(--slick-container-border-left, $slick-container-border-left); + border-right: var(--slick-container-border-right, $slick-container-border-right); + font-family: var(--slick-font-family, $slick-font-family); + + // Reset the margin of the checkboxes. The grid + // needs a selection checbox column. Bootstrap gives + // these elements a 4px top margin, which we have to reset + // by aligning to baseline. + input[type="checkbox"] { + vertical-align: baseline; + margin: 0; + } - &.active-row .slick-cell { - background-color: rgb(226, 255, 253); - } + .slick-group-header-column, + .slick-header-columns, + .slick-header-column { + box-sizing: content-box !important; /* this here only for Firefox! */ + } + .slick-header-column:hover { + background: var(--slick-header-column-background-hover, $slick-header-column-background-hover); + } - &.active-row.odd .slick-cell { - background-color: $slick-cell-odd-active-background-color; - } + .slick-header-column-active { + background-color: var(--slick-header-column-background-active, $slick-header-column-background-active) !important; + } - &.slick-rbe-editmode .slick-cell { + .slick-headerrow { + background: var(--slick-grid-header-background, $slick-grid-header-background); + } + .grid-canvas { + background: var(--slick-canvas-bg-color, $slick-canvas-bg-color); + } + + .slick-group { + border-bottom: var(--slick-group-border-bottom, $slick-group-border-bottom); + } + + .slick-sortable-placeholder { + background: var(--slick-header-column-sortable-background-hover, $slick-header-column-sortable-background-hover); + } + + .slick-row { + position: absolute; + width: 100%; + border: 0; + line-height: 20px; + color: var(--slick-cell-text-color, $slick-cell-text-color); + font-family: var(--slick-cell-font-family, $slick-cell-font-family); + font-weight: var(--slick-cell-font-weight, $slick-cell-font-weight); + + &:hover { + background-color: var(--slick-row-mouse-hover-color, $slick-row-mouse-hover-color); + box-shadow: var(--slick-row-mouse-hover-box-shadow, $slick-row-mouse-hover-box-shadow); + z-index: var(--slick-row-mouse-hover-z-index, $slick-row-mouse-hover-z-index); + } + &.active { + padding: var(--slick-cell-padding, $slick-cell-padding); + } + &.highlighter { + background: orange !important; + transition-property: background; + transition-duration: 3s; + transition-timing-function: ease-in; + } + &.copied { + background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); + transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); + } + &.odd { + background-color: var(--slick-cell-odd-background-color, $slick-cell-odd-background-color); + &:hover { + background-color: var(--slick-row-mouse-hover-color, $slick-row-mouse-hover-color); + } + } + &.odd .slick-cell { + &.selected { + background-color: var(--slick-row-selected-color, $slick-row-selected-color); + } + &.copied { + background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); + transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); + } + background: inherit; + } + &.highlight { + background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color); + } + &.highlight-animate { + background: var(--slick-row-highlight-background-color, $slick-row-highlight-background-color) !important; + animation: fade var(--slick-row-highlight-fade-animation, $slick-row-highlight-fade-animation); + } + &.slick-group-totals { + color: var(--slick-group-totals-formatter-color, $slick-group-totals-formatter-color); + background: var(--slick-group-totals-formatter-bgcolor, $slick-group-totals-formatter-bgcolor); + .slick-cell { + font-size: var(--slick-group-totals-formatter-font-size, $slick-group-totals-formatter-font-size); + } + } + + &.slick-rbe-editmode.active .slick-cell, + &.slick-rbe-editmode .slick-cell { background-color: var(--slick-row-based-edit-editmode-bgcolor, $slick-row-based-edit-editmode-bgcolor); &:hover { @@ -107,31 +151,63 @@ } } } - } - .slick-group { - border-bottom: var(--slick-group-border-bottom, $slick-group-border-bottom); - } + .slick-cell { + &.invalid { + border-color: red; + animation-duration: 0.2s; + animation-name: slickgrid-invalid-highlight; + } - .slick-group-totals { - background: var(--slick-group-totals-text-background, $slick-group-totals-text-background); - color: var(--slick-group-totals-text-color, $slick-group-totals-text-color); - } + &.active { + box-shadow: var(--slick-cell-active-box-shadow, $slick-cell-active-box-shadow); + border: var(--slick-cell-active-border, $slick-cell-active-border); + z-index: var(--slick-cell-active-z-index, $slick-cell-active-z-index); - .slick-sortable-placeholder { - background: var(--slick-header-column-sortable-background-hover, $slick-header-column-sortable-background-hover); - } -} + // We compensate for the all-around border (now 1px at top and left too!) + padding: var(--slick-cell-padding, $slick-cell-padding); -// ---------------------------------------------- -// Slick Grid theme -// ---------------------------------------------- + input.dual-editor-text { + width: calc(50% + 1px - 5px); // 1px (is 2px / 2) and 5px (is space between the 2 inputs) + height: 100%; + outline: 0; + transform: translate(0, -2px); + } + } -.slickgrid-container { - overflow: hidden; - outline: 0; - position: relative; - box-sizing: content-box; + &.slick-rbe-unsaved-cell { + background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, $slick-row-based-edit-unsaved-cell-bgcolor) !important; + } + } + + &.active-row .slick-cell { + background-color: rgb(226, 255, 253); + } + + &.active-row.odd .slick-cell { + background-color: $slick-cell-odd-active-background-color; + } + + &.slick-rbe-editmode .slick-cell { + background-color: var(--slick-row-based-edit-editmode-bgcolor, $slick-row-based-edit-editmode-bgcolor); + + &:hover { + background-color: var(--slick-row-based-edit-editmode-hover-bgcolor, $slick-row-based-edit-editmode-hover-bgcolor); + + .active { + background-color: var(--slick-row-based-edit-editmode-active-hover-bgcolor, $slick-row-based-edit-editmode-active-hover-bgcolor) !important; + } + } + + .active { + background-color: var(--slick-row-based-edit-editmode-active-bgcolor, $slick-row-based-edit-editmode-active-bgcolor); + + &:hover { + background-color: var(--slick-row-based-edit-editmode-active-hover-bgcolor, $slick-row-based-edit-editmode-active-hover-bgcolor); + } + } + } + } .slick-group-header-columns { position: relative; @@ -149,7 +225,6 @@ .slick-group-header-column.slick-state-default { position: relative; display: inline-block; - box-sizing: content-box !important; /* this here only for Firefox! */ overflow: hidden; text-overflow: ellipsis; height: 16px; @@ -198,7 +273,12 @@ } .slick-viewport { + height: 100%; overflow: auto; + border-top: var(--slick-viewport-border-top, $slick-viewport-border-top); + border-bottom: var(--slick-viewport-border-bottom, $slick-viewport-border-bottom); + border-left: var(--slick-viewport-border-left, $slick-viewport-border-left); + border-right: var(--slick-viewport-border-right, $slick-viewport-border-right); ::-webkit-scrollbar { -webkit-appearance: none; } @@ -265,29 +345,19 @@ .slick-header-column.slick-state-default { position: relative; display: inline-block; - box-sizing: content-box !important; overflow: hidden; text-overflow: ellipsis; height: 16px; line-height: 16px; margin: 0; padding: 4px; - border-right: 1px solid $slick-grid-border-color; + border-right: 1px solid var(--slick-grid-border-color, $slick-grid-border-color); border-left: 0px !important; border-top: 0px !important; border-bottom: 0px !important; float: left; } - - .slick-cell { - box-sizing: border-box; - border-style: var(--slick-grid-border-style, $slick-grid-border-style); - display: var(--slick-cell-display, $slick-cell-display); - padding: 1px 2px; - align-items: center; - } - .slick-header-column { padding: var(--slick-header-padding, $slick-header-padding); } @@ -297,12 +367,6 @@ outline: 0; } - .slick-row { - position: absolute; - border: 0; - width: 100%; - } - .slick-header.slick-state-default { box-shadow: 0 1px 2px rgba(0,0,0,.1); } @@ -314,23 +378,14 @@ -webkit-line-clamp: var(--slick-header-row-count, $slick-header-row-count); } - .slick-resizable-handle { - position: absolute; - font-size: 0.1px; - display: block; - cursor: col-resize; - width: 4px; - right: 0; - top: 0; - height: 100%; - } - - .slick-resizable-handle-hover { - background-color: #ccc; - } - - .slick-sortable-placeholder { - background: var(--slick-header-column-sortable-background-hover, $slick-header-column-sortable-background-hover); + .slick-cell { + background: inherit; + border: 1px transparent; + box-sizing: border-box; + border-style: var(--slick-grid-border-style, $slick-grid-border-style); + display: var(--slick-cell-display, $slick-cell-display); + padding: 1px 2px; + align-items: center; } .slick-cell { @@ -376,45 +431,357 @@ z-index: 999999; box-shadow: var(--slick-row-move-plugin-shadow-row-box-shadow, $slick-row-move-plugin-shadow-row-box-shadow); } +} - .slick-reorder-shadow-row { - position: absolute; - z-index: 999999; - box-shadow: rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px; +.scrollbar-fix { + &::-webkit-scrollbar { + -webkit-appearance: none; } +} - .slick-selection { - z-index: 10; - position: absolute; - border: 2px dashed black; +.slickgrid-container { + @mixin resetSlickCell() { + padding: var(--slick-cell-padding, $slick-cell-padding); + font-size: var(--slick-font-size-base, $slick-font-size-base); + td { + font-size: var(--slick-font-size-base, $slick-font-size-base); + } + body & { + line-height: 20px; + } } - .slick-pane { - position: absolute; - outline: 0; - overflow: hidden; + .grid-canvas { + .slick-cell, .slick-headerrow-column { + border-top: var(--slick-cell-border-top, $slick-cell-border-top); + border-bottom: var(--slick-cell-border-bottom, $slick-cell-border-bottom); + border-left: var(--slick-cell-border-left, $slick-cell-border-left); + border-right: var(--slick-cell-border-right, $slick-cell-border-right); + box-shadow: var(--slick-cell-box-shadow, $slick-cell-box-shadow); + } + + .slick-cell { + @include resetSlickCell(); + + &.even { + background-color: var(--slick-cell-even-background-color, $slick-cell-even-background-color); + } + &.slick-rbe-unsaved-cell { + background-color: var(--slick-row-based-edit-unsaved-cell-bgcolor, $slick-row-based-edit-unsaved-cell-bgcolor) !important; + } + + a, a:visited, .slick-widget-content a, .slick-widget-content a:visited { + color: var(--slick-link-color, $slick-link-color); + } + a:hover, .slick-widget-content a:hover { + color: var(--slick-link-color-hover, $slick-link-color-hover); + border-bottom: none; + } + table { + height: 100%; + padding: 0; + background: none; + } + td { + padding: 0; + vertical-align: middle; + text-align: left; + } + &.selected { + background-color: var(--slick-row-selected-color, $slick-row-selected-color); + } + &.copied { + background: var(--slick-copied-cell-bg-color-transition, $slick-copied-cell-bg-color-transition); + transition: var(--slick-copied-cell-transition, $slick-copied-cell-transition); + } + select:not([multiple]).form-control { + height: 100%; + padding: 0; + } + .slick-group-title { + height: var(--slick-draggable-group-title-height, $slick-draggable-group-title-height); + line-height: var(--slick-draggable-group-title-line-height, $slick-draggable-group-title-line-height); + vertical-align: var(--slick-draggable-group-title-vertical-align, $slick-draggable-group-title-vertical-align); + } + + .slick-group-toggle { + cursor: pointer; + display: inline-block; + width: 1em; + height: 1em; + color: var(--slick-icon-group-color, $slick-icon-group-color); + font-size: var(--slick-icon-group-font-size, $slick-icon-group-font-size); + margin-right: var(--slick-icon-group-margin-right, $slick-icon-group-margin-right); + + &.expanded { + @include generateSvgStyle('slick-icon-group-expanded-svg', $slick-icon-group-expanded-svg-path); + } + &.collapsed { + @include generateSvgStyle('slick-icon-group-collapsed-svg', $slick-icon-group-collapsed-svg-path); + } + &.expanded, + &.collapsed { + background-color: currentColor; + } + } + // fix alignment when slick-cell includes slickgrid icons (align bottom will in fact center the icon & text), for example Tree Data/Grouping + .slick-group-toggle, + .mdi { + vertical-align: var(--slick-icon-with-text-valign, $slick-icon-with-text-valign); + } + } + } + + .slick-header { + border-top: var(--slick-header-border-top, $slick-header-border-top); + border-right: var(--slick-header-border-right, $slick-header-border-right); + border-bottom: var(--slick-header-border-bottom, $slick-header-border-bottom); + border-left: var(--slick-header-border-left, $slick-header-border-left); width: 100%; + box-shadow: none !important; } -} -.interact-placeholder { - background: red !important; - display: inline-block; - float: left; - transform: translate(0px, -100%); -} + .slick-headerrow { + border-bottom: var(--slick-header-filter-row-border-bottom, $slick-header-filter-row-border-bottom); + border-top: var(--slick-header-filter-row-border-top, $slick-header-filter-row-border-top); + border-left: var(--slick-header-filter-row-border-left, $slick-header-filter-row-border-left); + border-right: var(--slick-header-filter-row-border-right, $slick-header-filter-row-border-right); + + .slick-headerrow-columns { + .slick-headerrow-column { + border: none; + padding: var(--slick-header-row-filter-padding, $slick-header-row-filter-padding); + background: var(--slick-header-row-background-color, $slick-header-row-background-color); + } + .slick-headerrow-column input, + .slick-headerrow-column select, + .slick-headerrow-column textarea { + margin-right: 0; + padding: var(--slick-header-input-padding, $slick-header-input-padding); + height: var(--slick-header-input-height, $slick-header-input-height); + box-sizing: border-box; + } + } + } -.interact-drop-active { - box-shadow: inset 0 0 8px rgba(7, 67, 128, 0.5); -} + .slick-header-columns { + background: var(--slick-grid-header-background, $slick-grid-header-background); + background-color: var(--slick-header-background-color, $slick-header-background-color); + width: calc(100% - #{var(--slick-header-scroll-width-to-remove, $slick-header-scroll-width-to-remove)}); -.interact-can-drop { - opacity: .9; -} + [id$="checkbox_selector"] { + justify-content: center; + display: flex; + } + .slick-header-sortable .slick-column-name { + margin-left: 0; + } -.scrollbar-fix { - &::-webkit-scrollbar { - -webkit-appearance: none; + .slick-header-column { + height: var(--slick-header-column-height, $slick-header-column-height); + line-height: var(--slick-font-size-base, $slick-font-size-base); + margin: 0; + border-top: var(--slick-header-column-border-top, $slick-header-column-border-top); + border-right: var(--slick-header-column-border-right, $slick-header-column-border-right); + border-bottom: var(--slick-header-column-border-bottom, $slick-header-column-border-bottom); + border-left: var(--slick-header-column-border-left, $slick-header-column-border-left); + white-space: normal; + &.slick-state-default { + @include resetSlickCell(); + } + .slick-column-name { + margin-right: var(--slick-header-column-name-margin-right, $slick-header-column-name-margin-right); + } + + @mixin ResetColumns () { + /* like TH */ + background: var(--slick-header-background-color, $slick-header-background-color); + font-family: var(--slick-font-family, $slick-font-family); + color: var(--slick-header-text-color, $slick-header-text-color); + font-size: var(--slick-header-font-size, $slick-header-font-size); + font-weight: var(--slick-header-font-weight, $slick-header-font-weight); + a, a:visited { + color: var(--slick-text-color, $slick-text-color); + } + a:hover { + color: var(--slick-hover-header-color, $slick-hover-header-color); + } + } + + @include ResetColumns (); + &.slick-state-default { + @include ResetColumns (); + } + + &.slick-header-column-sorted { + font-style: normal; + color: var(--slick-sorting-header-color, $slick-sorting-header-color); + } + &:hover { + color: var(--slick-hover-header-color, $slick-hover-header-color); + } + + .slick-sort-indicator , + .slick-sort-indicator-numbered { + display: inline-block; + position: absolute; + color: var(--slick-icon-sort-color, $slick-icon-sort-color); + } + + .slick-sort-indicator { + height: 1em; + width: 1em; + left: auto; + font-size: var(--slick-icon-sort-font-size, $slick-icon-sort-font-size); + right: var(--slick-icon-sort-position-right, $slick-icon-sort-position-right); + top: var(--slick-icon-sort-position-top, $slick-icon-sort-position-top); + } + .slick-sort-indicator-numbered { + font-family: var(--slick-font-family, $slick-font-family); + font-size: var(--slick-sort-indicator-number-font-size, $slick-sort-indicator-number-font-size); + width: var(--slick-sort-indicator-number-width, $slick-sort-indicator-number-width); + left: var(--slick-sort-indicator-number-left, $slick-sort-indicator-number-left); + right: var(--slick-sort-indicator-number-right, $slick-sort-indicator-number-right); + top: var(--slick-sort-indicator-number-top, $slick-sort-indicator-number-top); + } + + // when sorting is possible and there's not yet a sort applied on the column + // we could display the sort ascending icon (with an opacity) as a hint */ + &.slick-header-sortable.slick-state-hover:not(.slick-header-column-sorted) { + .slick-sort-indicator { + opacity: var(--slick-sort-indicator-hint-opacity, $slick-sort-indicator-hint-opacity); + @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); + } + } + .slick-sort-indicator-asc { + @include generateSvgStyle('slick-icon-sort-asc-icon-svg', $slick-icon-sort-asc-icon-svg-path); + } + .slick-sort-indicator-desc { + @include generateSvgStyle('slick-icon-sort-desc-icon-svg', $slick-icon-sort-desc-icon-svg-path); + } + .slick-sort-indicator-asc, + .slick-sort-indicator-desc { + opacity: 1; + background-color: currentColor; + } + + .slick-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; + cursor: col-resize; + top: 0; + height: 100%; + width: 7px; + right: 0; + z-index: 1; + + &:hover { + border-bottom: var(--slick-header-resizable-hover-border-bottom, $slick-header-resizable-hover-border-bottom); + border-left: var(--slick-header-resizable-hover-border-left, $slick-header-resizable-hover-border-left); + border-right: var(--slick-header-resizable-hover-border-right, $slick-header-resizable-hover-border-right); + border-top: var(--slick-header-resizable-hover-border-top, $slick-header-resizable-hover-border-top); + border-radius: var(--slick-header-resizable-hover-border-radius, $slick-header-resizable-hover-border-radius); + width: var(--slick-header-resizable-hover-width, $slick-header-resizable-hover-width); + right: var(--slick-header-resizable-hover-right, $slick-header-resizable-hover-right); + height: var(--slick-header-resizable-hover-height, $slick-header-resizable-hover-height); + top: var(--slick-header-resizable-hover-top, $slick-header-resizable-hover-top); + opacity: var(--slick-header-resizable-hover-opacity, $slick-header-resizable-hover-opacity); + } + } + &.unorderable { + background-color: var(--slick-grid-header-unorderable-bg-color, $slick-grid-header-unorderable-bg-color); + } + } + } + + /** Header Grouping **/ + .slick-preheader-panel.slick-state-default { + border-bottom: var(--slick-preheader-border-bottom, $slick-preheader-border-bottom); + + .slick-header-columns { + border-top: var(--slick-preheader-border-top, $slick-preheader-border-top); + + .slick-header-column { + height: var(--slick-preheader-height, $slick-preheader-height); + border-left: var(--slick-preheader-border-left, $slick-preheader-border-left); + border-right: var(--slick-preheader-border-right, $slick-preheader-border-right); + font-size: var(--slick-preheader-font-size, $slick-preheader-font-size); + justify-content: var(--slick-preheader-grouped-title-justify, $slick-preheader-grouped-title-justify); + display: var(--slick-preheader-grouped-title-display, $slick-preheader-grouped-title-display); + } + .slick-header-column:first-child { + border-left: var(--slick-preheader-border-left-first-element, $slick-preheader-border-left-first-element); + } + .slick-header-column:last-child { + border-right: var(--slick-preheader-border-right-last-element, $slick-preheader-border-right-last-element); + } + } + } + + /** Frozen/Pinned styling */ + + .slick-row .slick-cell.frozen:last-child, + .slick-footerrow-column.frozen:last-child { + border-right: var(--slick-frozen-border-right, $slick-frozen-border-right); + } + .slick-header-column.frozen:last-child { + border-right: var(--slick-frozen-header-row-border-right, $slick-frozen-header-row-border-right); + } + .slick-pane-left { + .slick-preheader-panel .slick-header-column.frozen:last-child { + border-right: var(--slick-frozen-preheader-row-border-right, $slick-frozen-preheader-row-border-right); + } + } + .slick-headerrow-column.frozen:last-child { + border-right: var(--slick-frozen-filter-row-border-right, $slick-frozen-filter-row-border-right); + } + + .slick-pane-bottom { + border-top: var(--slick-frozen-border-bottom, $slick-frozen-border-bottom); + } + .slick-viewport-bottom.slick-viewport-right { + overflow-y: var(--slick-frozen-overflow-right, $slick-frozen-overflow-right) !important; + } + .input-group { + display: flex; + + > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { + margin-left: 0; + &.slick-slider-horizontal { + margin-left: 10px; + } + } + + .input-group-append, + .input-group-prepend { + display: inline-flex; + width: auto; + } + + .input-group-addon { + input { + flex: 1 1 auto; + width: 1%; + } + .input-group-text { + height: 100%; + } + &.input-group-append { + .input-group-text { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + &.input-group-prepend { + .input-group-text { + margin-right: -1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } } } diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 2a1850cc8..85d75c52b 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -1,6 +1,6 @@ /* sass variables */ @import './variables'; -@import './sass-utilities'; +@import './svg-utilities'; // ---------------------------------------------- // Column Picker & Grid Menu Controls diff --git a/packages/common/src/styles/slickgrid-theme-bootstrap.lite.scss b/packages/common/src/styles/slickgrid-theme-bootstrap.lite.scss index a31884e6a..286ffc0ee 100644 --- a/packages/common/src/styles/slickgrid-theme-bootstrap.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-bootstrap.lite.scss @@ -6,7 +6,7 @@ /** * SlickGrid Bootstrap Theme (lite) - * sames as `slickgrid-theme-bootstrap.scss` but without: + * sames as `slickgrid-theme-bootstrap.scss` but without: * colors, extra-styling, slickgrid-icons and slickgrid-icons-svg-utils */ @@ -15,5 +15,4 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-autocomplete'; \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-bootstrap.scss b/packages/common/src/styles/slickgrid-theme-bootstrap.scss index a50c89276..a2afd89e6 100644 --- a/packages/common/src/styles/slickgrid-theme-bootstrap.scss +++ b/packages/common/src/styles/slickgrid-theme-bootstrap.scss @@ -10,7 +10,6 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-autocomplete'; @import './slickgrid-icons-svg-utils'; @import './slickgrid-icons'; \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-material.lite.scss b/packages/common/src/styles/slickgrid-theme-material.lite.scss index c59c0887d..5efe950c5 100644 --- a/packages/common/src/styles/slickgrid-theme-material.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-material.lite.scss @@ -6,7 +6,7 @@ /** * SlickGrid Material Theme (lite) - * sames as `slickgrid-theme-material.scss` but without: + * sames as `slickgrid-theme-material.scss` but without: * `slick-without-bootstrap-min-styling.scss`, colors, extra-styling, slickgrid-icons and slickgrid-icons-svg-utils */ @@ -18,5 +18,4 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-autocomplete'; \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss index 5701619b4..e6356cfed 100644 --- a/packages/common/src/styles/slickgrid-theme-material.scss +++ b/packages/common/src/styles/slickgrid-theme-material.scss @@ -17,7 +17,6 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-autocomplete'; @import './slickgrid-icons-svg-utils'; @import './slickgrid-icons'; diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss index 96ecafede..6a2849620 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.lite.scss @@ -6,7 +6,7 @@ /** * SlickGrid Salesforce Theme (lite) - * sames as `slickgrid-theme-salesforce.scss` but without: + * sames as `slickgrid-theme-salesforce.scss` but without: * `slick-without-bootstrap-min-styling.scss`, colors, extra-styling, slick-filters, slickgrid-icons and slickgrid-icons-svg-utils */ @@ -16,5 +16,4 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-autocomplete'; \ No newline at end of file diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss index d8cbd1e16..b474c9783 100644 --- a/packages/common/src/styles/slickgrid-theme-salesforce.scss +++ b/packages/common/src/styles/slickgrid-theme-salesforce.scss @@ -16,7 +16,6 @@ @import './slick-plugins'; @import './slick-component'; @import './slickgrid-examples'; -@import './slick-bootstrap'; @import './slick-filters'; @import './slick-autocomplete'; @import './slickgrid-icons-svg-utils'; diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/svg-utilities.scss similarity index 100% rename from packages/common/src/styles/sass-utilities.scss rename to packages/common/src/styles/svg-utilities.scss