diff --git a/package.json b/package.json index d9a980a6c..fa6c9f4de 100644 --- a/package.json +++ b/package.json @@ -49,12 +49,18 @@ "postsass-build-task:scss-compile:material": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.css dist/styles/css/slickgrid-theme-material.css --output-style compressed", "sass-build-task:scss-compile:material-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.bare.scss -o dist/styles/css --output-style compressed", "postsass-build-task:scss-compile:material-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.bare.css dist/styles/css/slickgrid-theme-material.bare.css --output-style compressed", + "sass-build-task:scss-compile:material-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss -o dist/styles/css --output-style compressed", + "postsass-build-task:scss-compile:material-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-material.lite.css dist/styles/css/slickgrid-theme-material.lite.css --output-style compressed", "sass-build-task:scss-compile:salesforce": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss -o dist/styles/css --output-style compressed", "postsass-build-task:scss-compile:salesforce": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.css dist/styles/css/slickgrid-theme-salesforce.css --output-style compressed", "sass-build-task:scss-compile:salesforce-bare": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.bare.scss -o dist/styles/css --output-style compressed", "postsass-build-task:scss-compile:salesforce-bare": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.bare.css dist/styles/css/slickgrid-theme-salesforce.bare.css --output-style compressed", + "sass-build-task:scss-compile:salesforce-lite": "node-sass src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss -o dist/styles/css --output-style compressed", + "postsass-build-task:scss-compile:salesforce-lite": "postcss --no-map --use autoprefixer --output dist/styles/css/slickgrid-theme-salesforce.lite.css dist/styles/css/slickgrid-theme-salesforce.lite.css --output-style compressed", "sass:build": "run-p sass-build-task:scss-compile:*", + "presass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/css", "sass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.scss dist/styles/sass", + "postsass:copy": "cross-env copyfiles -f src/app/modules/angular-slickgrid/styles/*.png dist/styles/sass", "presass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap", "sass:watch:bootstrap": "cross-env npm run sass-build-task:scss-compile:bootstrap -- -watch", "presass:watch:material": "cross-env npm run sass-build-task:scss-compile:material", diff --git a/src/app/examples/grid-tree-data-hierarchical.component.scss b/src/app/examples/grid-tree-data-hierarchical.component.scss index 27dca1203..f48083c82 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.scss +++ b/src/app/examples/grid-tree-data-hierarchical.component.scss @@ -1,5 +1,5 @@ /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */ -@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss'; +@import '../modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss'; /* www.OnlineWebFonts.Com diff --git a/src/app/examples/grid-tree-data-parent-child.component.scss b/src/app/examples/grid-tree-data-parent-child.component.scss index a02686c5b..4977649cf 100644 --- a/src/app/examples/grid-tree-data-parent-child.component.scss +++ b/src/app/examples/grid-tree-data-parent-child.component.scss @@ -1,5 +1,5 @@ /* make sure to add the @import the SlickGrid Theme AFTER the variables changes */ -@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.scss'; +@import '../modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss'; .icon { align-items: center; diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss index 1f65fae18..8e2615d80 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables.scss @@ -3,718 +3,720 @@ * Lib Website (https://github.com/ghiscoding/angular-slickgrid) * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE) */ - $border-color: #dddddd !default; - $font-size-base-value: 14 !default; - $font-size-base: $font-size-base-value + 0px !default; - $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; - $primary-color: #31708F !default; - $flatpickr-bgcolor: #ffffff !default; - $filter-placeholder-font-family: 'Segoe UI Symbol' !default; - $focus-color: rgb(115, 179, 229) !default; - - /* Slickgrid container, including headers but excluding pagination */ - $container-border-top: 0 none !default; - $container-border-right: 0 none !default; - $container-border-bottom: 1px solid $border-color !default; - $container-border-left: 0 none !default; - - /* grid */ - $grid-border-color: fade(black, 3%) !default; - $grid-border-style: solid !default; - $grid-header-background: rgba(255, 255, 255, .6) !default; - $grid-cell-color: rgb(255, 255, 255) !default; - - /* cell */ - $cell-active-border: none !default; - $cell-active-box-shadow: inset 0 0 0 1px #aaaaaa !default; - $cell-active-z-index: 6 !default; - $cell-box-shadow: inherit !default; - $cell-text-color: #000000 !default; - $cell-font-family: $font-family !default; - $cell-font-weight: normal !default; - $cell-border-top: 1px solid $border-color !default; - $cell-border-right: 1px transparent !default; - $cell-border-bottom: 1px transparent !default; - $cell-border-left: 1px transparent !default; - $cell-even-background-color: #ffffff !default; - $cell-odd-background-color: darken($grid-cell-color, 3%) !default; // for striping every second row - $cell-odd-active-background-color: darken($grid-cell-color, 5%) !default; - $cell-padding-top-bottom: 5px !default; - $cell-padding-right-left: 6px !default; - $cell-padding: $cell-padding-top-bottom $cell-padding-right-left !default; - - /** 4x available slick-pane (top, bottom, left, right) */ - $slick-pane-top-border-top: none !default; - - /* row */ - $row-mouse-hover-color: #eff5fc !default; - $row-mouse-hover-box-shadow: none !default; - $row-mouse-hover-z-index: 5 !default; - $row-selected-color: #dae8f1 !default; - $row-highlight-background-color: darken($row-selected-color, 5%) !default; - $row-highlight-fade-animation: 1.5s ease 1 !default; - $row-highlight-fade-out-animation: 0.3s ease 1 !default; - $row-checkbox-selector-background: inherit !default; - $row-checkbox-selector-border: none !default; - - /* Pre-Header - Header Grouping colspan */ - $preheader-border-left: none !default; - $preheader-border-left-first-element: none !default; - $preheader-border-right: none !default; - $preheader-border-right-last-element: none !default; - $preheader-border-bottom: 0 !default; - $preheader-border-top: 0 !default; - $preheader-font-size: $font-size-base + 3px !default; - $preheader-height: 25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */ - $preheader-grouped-title-display: inline-grid !default; - $preheader-grouped-title-justify: left !default; - - /* header */ - $header-background-color: #ffffff !default; - $header-font-size: $font-size-base !default; - $header-font-weight: bold !default; - $header-text-color: #000000 !default; - $header-padding-top: 4px !default; - $header-padding-right: 4px !default; - $header-padding-bottom: 4px !default; - $header-padding-left: 4px !default; - $header-input-height: 27px !default; // height of the filter form element (input, textarea, select) - $header-input-width: none !default; // width of the filter form element (input, textarea, select) - $header-input-padding: 0 6px !default; // padding of the filter form element (input, textarea, select) - $header-row-background-color: #ffffff !default; - $header-row-count: 2 !default; // how many rows to display on the header - $header-row-filter-padding: 4px !default; - $header-column-height: calc(17px * #{$header-row-count}) !default; // header is calculated by rows to show - $header-border-top: 0 none !default; // header, column titles, that is without the Filters - $header-border-right: 0 none !default; - $header-border-bottom: 0 none !default; - $header-border-left: 0 none !default; - $header-column-border-top: 0 none !default; // header, column titles, that is without the Filters - $header-column-border-right: 0 none !default; - $header-column-border-bottom: 0 none !default; - $header-column-border-left: 0 none !default; - $header-filter-row-border-top: 0 none !default; // header row is where the Filters are showing - $header-filter-row-border-right: 0 none !default; - $header-filter-row-border-bottom: 0 none !default; - $header-filter-row-border-left: 0 none !default; - $header-resizable-width: 7px !default; - $header-resizable-hover: 1px solid #d0d0d0 !default; - $header-resizable-hover-border-bottom: 0 none !default; - $header-resizable-hover-border-left: 0 none !default; - $header-resizable-hover-border-right: $header-resizable-hover !default; - $header-resizable-hover-border-top: 0 none !default; - $header-resizable-hover-width: $header-resizable-width !default; - $header-resizable-hover-border-radius: 8px !default; - $header-resizable-hover-right: 0 !default; - $header-resizable-hover-height: 100% !default; - $header-resizable-hover-top: 0 !default; - $header-resizable-hover-opacity: 1 !default; - $header-scroll-width-to-remove: 16px !default; // without this, the header (which doesn't have scrolling) will be wider than the data viewport - - /* Frozen pinned rows/columns */ - $frozen-border-bottom: 1px solid #a5a5a5 !default; - $frozen-border-right: 1px solid #a5a5a5 !default; - $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, ... */ - $icon-color: #4a4a4a !default; - $icon-font-family: "FontAwesome" !default; // or Glyphicons Halflings */ - $icon-font-size: 14px !default; - $icon-group-color: $primary-color !default; - $icon-group-expanded: "\f107" !default; - $icon-group-collapsed: "\f105" !default; - $icon-group-font-size: calc(#{$icon-font-size} + 4px) !default; - $icon-group-font-weight: bold !default; - $icon-group-margin-right: 2px !default; - $icon-group-height: 20px !default; - $icon-group-width: 14px !default; - $table-background: transparent !default; - $link-color: #08c !default; - $link-color-hover: darker($link-color, 15%) !default; - $gray-dark: #333 !default; - $text-color: $gray-dark !default; - $navbar-default-link-hover-color: $gray-dark !default; - - /* AutoComplete */ - $autocomplete-bg-color: #ffffff !default; - $autocomplete-border: 1px solid rgba(0, 0, 0, 0.15) !default; - $autocomplete-border-radius: 4px !default; - $autocomplete-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !default; - $autocomplete-hover-color: #262626 !default; - $autocomplete-hover-bg-color: darken($row-mouse-hover-color, 3%) !default; - $autocomplete-loading-icon: "\f021" !default; - $autocomplete-loading-icon-color: $icon-color !default; - $autocomplete-loading-icon-width: inherit !default; - $autocomplete-loading-icon-margin-left: -16px !default; - $autocomplete-loading-icon-line-height: 0px !default; - $autocomplete-loading-icon-vertical-align: inherit !default; - $autocomplete-max-height: 25vh !default; - $autocomplete-min-height: 75px !default; - $autocomplete-min-width: 50px !default; - $autocomplete-overflow-x: hidden !default; - $autocomplete-overflow-y: auto !default; - $autocomplete-text-color: #333333 !default; - $autocomplete-text-overflow: ellipsis !default; - $autocomplete-text-padding: 3px 15px !default; - $autocomplete-z-index: 9999 !default; - - /** AutoComplte with Custom Styling (2 rows) */ - $autocomplete-tpl2-font-size: 12px !default; - $autocomplete-tpl2-width: 285px !default; - $autocomplete-tpl2-container-list-width: #{$autocomplete-tpl2-width - 15px} !default; - $autocomplete-tpl2-container-list-padding-lr: 10px !default; /* left/right */ - $autocomplete-tpl2-container-list-padding-tb: 3px !default; /* top/bottom */ - $autocomplete-tpl2-container-list-padding: $autocomplete-tpl2-container-list-padding-tb $autocomplete-tpl2-container-list-padding-lr !default; - $autocomplete-tpl2-icon-left-height: 32px !default; - $autocomplete-tpl2-icon-left-width: 32px !default; - $autocomplete-tpl2-bottom-left-text-color: #686868 !default; - $autocomplete-tpl2-bottom-left-font-size: #{$autocomplete-tpl2-font-size - 1px} !default; - $autocomplete-tpl2-bottom-left-font-style: italic !default; - $autocomplete-tpl2-bottom-left-font-weight: normal !default; - $autocomplete-tpl2-bottom-left-max-width: calc(#{$autocomplete-tpl2-container-list-width} - #{$autocomplete-tpl2-icon-left-width} - (#{$autocomplete-tpl2-container-list-padding-lr} * 2)) !default; - $autocomplete-tpl2-top-left-text-color: #313131 !default; - $autocomplete-tpl2-top-left-font-size: $autocomplete-tpl2-font-size !default; - $autocomplete-tpl2-top-left-font-style: normal !default; - $autocomplete-tpl2-top-left-font-weight: bold !default; - $autocomplete-tpl2-top-left-max-width: $autocomplete-tpl2-bottom-left-max-width !default; - - /** AutoComplte with Custom Styling (4 corners) */ - $autocomplete-tpl4-font-size: 12px !default; - $autocomplete-tpl4-width: 385px !default; - $autocomplete-tpl4-container-list-width: #{$autocomplete-tpl4-width - 15px} !default; - $autocomplete-tpl4-container-list-padding-lr: 10px !default; /* left/right */ - $autocomplete-tpl4-container-list-padding-tb: 3px !default; /* top/bottom */ - $autocomplete-tpl4-container-list-padding: $autocomplete-tpl4-container-list-padding-tb $autocomplete-tpl4-container-list-padding-lr !default; - $autocomplete-tpl4-icon-left-height: 32px !default; - $autocomplete-tpl4-icon-left-width: 32px !default; - $autocomplete-tpl4-bottom-left-text-color: #686868 !default; - $autocomplete-tpl4-bottom-left-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; - $autocomplete-tpl4-bottom-left-font-style: italic !default; - $autocomplete-tpl4-bottom-left-font-weight: normal !default; - $autocomplete-tpl4-bottom-left-max-width: calc(#{$autocomplete-tpl4-container-list-width} - #{$autocomplete-tpl4-icon-left-width} - (#{$autocomplete-tpl4-container-list-padding-lr} * 2)) !default; - $autocomplete-tpl4-bottom-right-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; - $autocomplete-tpl4-bottom-right-font-style: italic !default; - $autocomplete-tpl4-bottom-right-font-weight: normal !default; - $autocomplete-tpl4-bottom-right-text-color: #686868 !default; - $autocomplete-tpl4-bottom-right-max-width: 250px !default; - $autocomplete-tpl4-top-left-text-color: #313131 !default; - $autocomplete-tpl4-top-left-font-size: $autocomplete-tpl4-font-size !default; - $autocomplete-tpl4-top-left-font-style: normal !default; - $autocomplete-tpl4-top-left-font-weight: bold !default; - $autocomplete-tpl4-top-left-max-width: $autocomplete-tpl4-bottom-left-max-width !default; - $autocomplete-tpl4-top-right-text-color: lighten($primary-color, 7%) !default; - $autocomplete-tpl4-top-right-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; - $autocomplete-tpl4-top-right-font-style: normal !default; - $autocomplete-tpl4-top-right-font-weight: bold !default; - $autocomplete-tpl4-top-right-max-width: 100px !default; - - /* Sorting */ - $icon-sort-asc: "\f0d8" !default; - $icon-sort-desc: "\f0d7" !default; - $icon-sort-color: $primary-color !default; - $icon-sort-font-size: $icon-font-size !default; - $icon-sort-width: $icon-font-size !default; - $icon-sort-position-right: 10px !default; - $icon-sort-position-top: calc((15px * #{$header-row-count}) - 15px) !default; - $sort-indicator-number-font-size: 10px !default; - $sort-indicator-number-width: 8px !default; - $sort-indicator-number-left: auto !default; - $sort-indicator-number-right: 0px !default; - $sort-indicator-number-top: calc(13px * #{$header-row-count}) !default; - $sort-indicator-hint-opacity: 0.5 !default; - - /* Grouping Totals Formatter */ - $group-totals-formatter-color: gray !default; - $group-totals-formatter-bgcolor: #fff !default; - $group-totals-formatter-font-size: 14px !default; - - /* Column picker */ - $column-picker-background-color: #ffffff !default; - $column-picker-border: 1px solid #b8b8b8 !default; - $column-picker-border-radius: 2px !default; - $column-picker-box-shadow: 1px 1px 1px silver !default; - $column-picker-checkbox-color: $primary-color !default; - $column-picker-checkbox-size: 13px !default; - $column-picker-checkbox-font-weight: bold !default; - $column-picker-checkbox-icon-unchecked: "\f00c" !default; - $column-picker-checkbox-icon-checked: "\f00c" !default; - $column-picker-checkbox-opacity: 0.15 !default; - $column-picker-checkbox-opacity-hover: 0.35 !default; - $column-picker-checkbox-width: 13px !default; - $column-picker-close-btn-bg-color: #ffffff !default; - $column-picker-close-btn-color: #c3c3c3 !default; - $column-picker-close-btn-color-hover: darken($column-picker-close-btn-color, 25%) !default; - $column-picker-close-btn-cursor: pointer !default; - $column-picker-close-btn-font-family: "Calibri Light", "Helvetica Neue", Arial, sans-serif !default; - $column-picker-close-btn-font-size: 21px !default; - $column-picker-close-btn-border: 0px solid #9c9c9c !default; - $column-picker-close-btn-height: 21px !default; - $column-picker-close-btn-width: 15px !default; - $column-picker-close-btn-margin: 1px !default; - $column-picker-close-btn-padding: 0px !default; - $column-picker-close-btn-opacity: 0.9 !default; - $column-picker-close-btn-position-right: 5px !default; - $column-picker-close-btn-position-top: 0px !default; - $column-picker-padding-right-patch: 24px !default; /* trick to cheat the width to include extra scrollbar width in addition to auto width */ - $column-picker-divider-width: calc(100% + #{$column-picker-padding-right-patch} - 10px) !default; - $column-picker-item-border: 1px solid transparent !default; - $column-picker-item-border-radius: 0px !default; - $column-picker-item-font-size: $icon-font-size !default; - $column-picker-item-padding: 2px 4px !default; - $column-picker-item-hover-border: 1px solid #BFBDBD !default; - $column-picker-item-hover-color: #fafafa !default; - $column-picker-label-margin: 4px !default; - $column-picker-label-font-weight: normal !default; - $column-picker-link-background-color: #ffffff !default; - $column-picker-title-border-bottom: 1px solid #d6d6d6 !default; - $column-picker-title-font-size: calc(#{$column-picker-item-font-size} + 2px) !default; - $column-picker-title-font-weight: normal !default; - $column-picker-title-margin-bottom: 10px !default; - $column-picker-title-width: calc(100% - #{$column-picker-close-btn-width} - 10px) !default; - - /** Detail View Plugin */ - $detail-view-icon-collapse: "\f056" !default; - $detail-view-icon-collapse-color: $primary-color !default; - $detail-view-icon-expand: "\f055" !default; - $detail-view-icon-expand-color: lighten($primary-color, 25%) !default; - $detail-view-icon-size: calc(#{$icon-font-size} + 2px) !default; - $detail-view-container-bgcolor: #f7f7f7 !default; - $detail-view-container-border: 1px solid #c0c0c0 !default; - $detail-view-container-padding: 10px !default; - $detail-view-container-z-index: 1000 !default; - - /* Excel copy plugin */ - $copied-cell-bg-color-transition: rgba(0, 0, 255, 0.2) !default; - $copied-cell-transition: 0.5s background !default; - - /* Grid Menu - hamburger menu */ - $grid-menu-background-color: #ffffff !default; - $grid-menu-border: 1px solid #b8b8b8 !default; - $grid-menu-border-radius: 2px !default; - $grid-menu-box-shadow: 1px 1px 1px silver !default; - $grid-menu-button-padding: 0 2px !default; - $grid-menu-checkbox-color: $primary-color !default; - $grid-menu-checkbox-size: 13px !default; - $grid-menu-checkbox-font-weight: bold !default; - $grid-menu-checkbox-icon-unchecked: "\f00c" !default; - $grid-menu-checkbox-icon-checked: "\f00c" !default; - $grid-menu-checkbox-margin-right: 4px !default; - $grid-menu-checkbox-opacity: 0.15 !default; - $grid-menu-checkbox-opacity-hover: 0.35 !default; - $grid-menu-checkbox-width: 13px !default; - $grid-menu-close-btn-cursor: pointer !default; - $grid-menu-close-btn-bg-color: #ffffff !default; - $grid-menu-close-btn-border: 0px solid #9c9c9c !default; - $grid-menu-close-btn-color: $column-picker-close-btn-color !default; - $grid-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; - $grid-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; - $grid-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; - $grid-menu-close-btn-height: 21px !default; - $grid-menu-close-btn-width: 15px !default; - $grid-menu-close-btn-margin: 1px !default; - $grid-menu-close-btn-padding: 0px !default; - $grid-menu-close-btn-opacity: 0.9 !default; - $grid-menu-close-btn-position-right: 5px !default; - $grid-menu-close-btn-position-top: 0px !default; - $grid-menu-label-margin: 4px !default; - $grid-menu-label-font-weight: normal !default; - $grid-menu-link-background-color: #ffffff !default; - $grid-menu-icon-font-size: $icon-font-size !default; - $grid-menu-icon-line-height: 14px !default; - $grid-menu-icon-margin-right: 4px !default; - $grid-menu-icon-width: 14px !default; - $grid-menu-icon-top-margin: 5px !default; - $grid-menu-item-border: 1px solid transparent !default; - $grid-menu-item-border-radius: 0px !default; - $grid-menu-item-disabled-color: silver !default; - $grid-menu-item-padding: 2px 4px !default; - $grid-menu-item-font-size: $font-size-base !default; - $grid-menu-item-hover-border: 1px solid #BFBDBD !default; - $grid-menu-item-hover-color: #fafafa !default; - $grid-menu-min-width: 200px !default; - $grid-menu-divider-height: 1px !default; - $grid-menu-divider-margin: 8px 5px !default; - $grid-menu-divider-color: #e7e7e7 !default; - $grid-menu-divider-width: calc(100% - 10px) !default; - $grid-menu-title-border-bottom: solid 1px #d6d6d6 !default; - $grid-menu-title-font-size: calc(#{$grid-menu-item-font-size} + 2px) !default; - $grid-menu-title-font-weight: normal !default; - $grid-menu-title-margin-bottom: 10px !default; - $grid-menu-title-width: calc(100% - #{$grid-menu-close-btn-width} - 10px) !default; - $grid-menu-z-index: 500 !default; - - /* (Action) Cell Menu Plugin */ - $cell-menu-bg-color: #ffffff !default; - $cell-menu-border: 1px solid #BFBDBD !default; - $cell-menu-border-radius: 2px !default; - $cell-menu-close-btn-bg-color: #ffffff !default; - $cell-menu-close-btn-border: 0px solid #9c9c9c !default; - $cell-menu-close-btn-color: $column-picker-close-btn-color !default; - $cell-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; - $cell-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; - $cell-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; - $cell-menu-close-btn-height: 21px !default; - $cell-menu-close-btn-width: 15px !default; - $cell-menu-close-btn-margin: 1px !default; - $cell-menu-close-btn-padding: 0px !default; - $cell-menu-close-btn-opacity: 0.9 !default; - $cell-menu-min-width: 175px !default; - $cell-menu-padding: 6px !default; - $cell-menu-item-border: 1px solid transparent !default; - $cell-menu-item-border-radius: 0px !default; - $cell-menu-item-disabled-color: silver !default; - $cell-menu-item-font-size: $font-size-base !default; - $cell-menu-item-height: 24px !default; - $cell-menu-item-hover-border: 1px solid #BFBDBD !default; - $cell-menu-item-hover-color: #fafafa !default; - $cell-menu-item-padding: 2px 4px !default; - $cell-menu-item-width: 100% !default; - $cell-menu-icon-font-size: $icon-font-size !default; - $cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-btn-width} - 3px) !default; - $cell-menu-icon-margin-right: 4px !default; - $cell-menu-icon-width: 16px !default; - $cell-menu-divider-height: 1px !default; - $cell-menu-divider-margin: 8px 5px !default; - $cell-menu-divider-color: #e7e7e7 !default; - $cell-menu-divider-width: calc(100% - 10px) !default; - $cell-menu-option-list-margin-bottom: 10px !default; - $cell-menu-title-border-bottom: 1px solid #d6d6d6 !default; - $cell-menu-title-font-size: calc(#{$cell-menu-item-font-size} + 2px) !default; - $cell-menu-title-font-weight: normal !default; - $cell-menu-title-margin-bottom: 10px !default; - $cell-menu-title-width: calc(100% - #{$cell-menu-close-btn-width} - 10px) !default; - - /* Context Menu Plugin */ - $context-menu-bg-color: #ffffff !default; - $context-menu-border: 1px solid #BFBDBD !default; - $context-menu-border-radius: 2px !default; - $context-menu-close-btn-bg-color: #ffffff !default; - $context-menu-close-btn-border: 0px solid #9c9c9c !default; - $context-menu-close-btn-color: $column-picker-close-btn-color !default; - $context-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; - $context-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; - $context-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; - $context-menu-close-btn-height: 21px !default; - $context-menu-close-btn-width: 15px !default; - $context-menu-close-btn-margin: 1px !default; - $context-menu-close-btn-padding: 0px !default; - $context-menu-close-btn-opacity: 0.9 !default; - $context-menu-min-width: 175px !default; - $context-menu-padding: 6px !default; - $context-menu-item-border: 1px solid transparent !default; - $context-menu-item-border-radius: 0px !default; - $context-menu-item-disabled-color: silver !default; - $context-menu-item-font-size: $icon-font-size !default; - $context-menu-item-hover-border: 1px solid #BFBDBD !default; - $context-menu-item-hover-color: #fafafa !default; - $context-menu-item-padding: 2px 4px !default; - $context-menu-item-width: 100% !default; - $context-menu-item-width-when-button: calc(100% - #{$context-menu-close-btn-width} - 3px) !default; - $context-menu-icon-font-size: $icon-font-size !default; - $context-menu-icon-height: 16px !default; - $context-menu-icon-line-height: 14px !default; - $context-menu-icon-margin-right: 4px !default; - $context-menu-icon-width: 16px !default; - $context-menu-divider-height: 1px !default; - $context-menu-divider-margin: 8px 5px !default; - $context-menu-divider-color: #e7e7e7 !default; - $context-menu-divider-width: calc(100% - 10px) !default; - $context-menu-option-list-margin-bottom: 10px !default; - $context-menu-title-border-bottom: 1px solid #d6d6d6 !default; - $context-menu-title-font-size: calc(#{$context-menu-item-font-size} + 2px) !default; - $context-menu-title-font-weight: normal !default; - $context-menu-title-margin-bottom: 10px !default; - $context-menu-title-width: calc(100% - #{$context-menu-close-btn-width} - 10px) !default; - - /* Header Menu Plugin */ - $header-menu-bg-color: #ffffff !default; - $header-menu-button-bg-color: #ffffff !default; - $header-menu-border: 1px solid #BFBDBD !default; - $header-menu-button-border: $header-menu-border !default; - $header-menu-button-border-width: 0px !default; - $header-menu-button-height: 35px !default; - $header-menu-button-icon: "\f13a" !default; - $header-menu-button-icon-color: $icon-color !default; - $header-menu-button-icon-font-size: 14px !default; - $header-menu-button-icon-font-weight: normal !default; - $header-menu-button-icon-width: 14px !default; - $header-menu-button-padding: 0px !default; - $header-menu-button-margin-right: 3px !default; - $header-menu-border-radius: 2px !default; - $header-menu-button-width: 14px !default; - $header-menu-min-width: 175px !default; - $header-menu-padding: 6px !default; - $header-menu-item-border: 1px solid transparent !default; - $header-menu-item-border-radius: 0px !default; - $header-menu-item-disabled-color: silver !default; - $header-menu-item-padding: 2px 4px !default; - $header-menu-item-hover-border: 1px solid #BFBDBD !default; - $header-menu-item-hover-color: #fafafa !default; - $header-menu-icon-font-color: $cell-text-color !default; - $header-menu-icon-font-size: $icon-font-size !default; - $header-menu-icon-font-weight: normal !default; - $header-menu-icon-line-height: 14px !default; - $header-menu-icon-height: 16px !default; - $header-menu-icon-margin-right: 4px !default; - $header-menu-icon-width: 16px !default; - $header-menu-divider-height: 1px !default; - $header-menu-divider-margin: 8px 3px !default; - $header-menu-divider-color: #e7e7e7 !default; - $header-menu-divider-width: calc(100% - 10px) !default; - $header-menu-display: none !default; /* can be none or inline-block */ - - /* Checkbox Selector / Row Selection */ - $checkbox-selector-color: $primary-color !default; - $checkbox-selector-checked-color: $checkbox-selector-color !default; - $checkbox-selector-unchecked-color: $checkbox-selector-color !default; - $checkbox-selector-size: calc(#{$icon-font-size} - 1px) !default; - $checkbox-selector-icon: "\f00c" !default; - $checkbox-selector-icon-bg-color: inherit !default; - $checkbox-selector-icon-font-weight: bold !default; - $checkbox-selector-icon-height: $icon-font-size !default; - $checkbox-selector-icon-margin: 0 !default; - $checkbox-selector-icon-width: $icon-font-size !default; - $checkbox-selector-icon-checked: $checkbox-selector-icon !default; - $checkbox-selector-icon-unchecked: $checkbox-selector-icon !default; - $checkbox-selector-icon-border: none !default; - $checkbox-selector-icon-border-radius: none !default; - $checkbox-selector-opacity: 0.15 !default; - $checkbox-selector-opacity-hover: 0.35 !default; - - /* Editors */ - $editor-focus-border-color: lighten($primary-color, 10%) !default; - $editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default; - $date-editor-focus-border-color: $editor-focus-border-color !default; - $date-editor-focus-box-shadow: $editor-focus-box-shadow !default; - $large-editor-background-color: #ffffff !default; - $large-editor-border: 2px solid #a0a0a0 !default; - $large-editor-text-padding: 5px !default; - $large-editor-border-radius: 6px !default; - $large-editor-textarea-height: 80px !default; - $large-editor-textarea-width: 250px !default; - $large-editor-button-border-radius: 3px !default; - $large-editor-button-text-align: right !default; - $large-editor-footer-spacing: 2px !default; - $large-editor-count-font-size: 11px !default; - $large-editor-count-margin-top: 8px !default; - $large-editor-count-separator-margin: 0 1px !default; - $large-editor-count-color: #313131 !default; - $text-editor-border: 1px solid #e2e2e2 !default; - $text-editor-border-radius: 3px !default; - $text-editor-background: #ffffff !default; - $text-editor-margin-bottom: 2px !default; - $text-editor-margin-left: -2px !default; /* negative number to cancel inside padding */ - $text-editor-margin-right: 2px !default; - $text-editor-margin-top: 2px !default; - $text-editor-padding-bottom: 0 !default; - $text-editor-padding-left: 2px !default; - $text-editor-padding-right: 0 !default; - $text-editor-padding-top: 0 !default; - $text-editor-focus-border-color: $editor-focus-border-color !default; - $text-editor-focus-box-shadow: $editor-focus-box-shadow !default; - $text-editor-readonly-color: #f0f0f0 !default; - $slider-editor-height: 24px !default; - $slider-editor-runnable-track-padding: 0 6px !default; - $slider-editor-number-padding: 4px 6px !default; - $slider-editor-focus-border-color: $editor-focus-border-color !default; - $slider-editor-focus-box-shadow: $editor-focus-box-shadow !default; - - /* Compound Filters */ - $compound-filter-bgcolor: #e4eacf !default; - $compound-filter-operator-border-radius: 4px 0 0 4px !default; - $compound-filter-border-radius: 0 4px 4px 0 !default; - $compound-filter-text-weight: bold !default; - $compound-filter-text-color: $primary-color !default; - $compound-filter-text-font-size: 13px !default; - $compound-filter-text-padding: 0 0 0 2px !default; - - /** Date Range Filters */ - $date-range-filter-border-radius: 4px !default; - - /* Draggable Grouping Plugin */ - $draggable-group-drop-border: 1px solid #e0e0e0 !default; - $draggable-group-drop-bgcolor: #ffffff !default; - $draggable-group-drop-height: 35px !default; - $draggable-group-drop-padding: 5px 10px !default; - $draggable-group-drop-radius: 4px !default; - $draggable-group-drop-width: calc(100% - 25px) !default; - $draggable-group-droppable-active-bgcolor: #fafafa !default; - $draggable-group-droppable-hover-bgcolor: darken($draggable-group-droppable-active-bgcolor, 5%) !default; - $draggable-group-placeholder-font-style: italic !default; - $draggable-group-placeholder-color: #616161 !default; - $draggable-group-delete-color: pink !default; - $draggable-group-delete-hover-color: red !default; - $draggable-group-delete-padding-left: 5px !default; - $draggable-group-delete-padding-right: 7px !default; - $draggable-group-delete-font-size: 16px !default; - $draggable-group-delete-vertical-align: baseline !default; - $draggable-group-toggle-all-color: $icon-group-color !default; - $draggable-group-toggle-all-display: none !default; - $draggable-group-toggle-all-pos-top: 7px !default; - $draggable-group-toggle-all-pos-right: 40px !default; - $draggable-group-toggle-collapsed-icon: "\f0fe" !default; - $draggable-group-toggle-expanded-icon: "\f146" !default; - $draggable-group-title-height: $icon-group-height !default; - $draggable-group-title-line-height: $icon-group-height !default; - $draggable-group-title-vertical-align: none !default; - $draggable-group-column-icon-font-weight: normal !default; - $draggable-group-column-icon-color: #707070 !default; - $draggable-group-column-icon-height: 9px !default; - $draggable-group-column-icon-width: 9px !default; - $draggable-group-column-icon-margin-left: 4px !default; - - /* Input Slider Filter (vanilla html) */ - $slider-filter-border: 1px solid #ccc !default; - $slider-filter-bgcolor: #eee !default; - $slider-filter-runnable-track-bgcolor: #ddd !default; - $slider-filter-runnable-track-height: 4px !default; - $slider-filter-runnable-track-padding: 0 6px !default; - $slider-filter-fill-lower-color: #ddd !default; /* ms only */ - $slider-filter-fill-focus-lower-color: #aaa !default; /* ms only */ - $slider-filter-height: $header-input-height !default; - $slider-filter-thumb-border-radius: 50% !default; - $slider-filter-thumb-cursor: pointer !default; - $slider-filter-thumb-color: rgb(201, 219, 203) !default; - $slider-filter-thumb-size: 14px !default; - $slider-filter-thumb-border: 1px solid darken($slider-filter-thumb-color, 15%) !default; - $slider-filter-number-padding: 4px 8px !default; - $slider-filter-number-font-size: calc(#{$font-size-base-value} - 1px) !default; - - /* Input Range Slider Filter (with jQuery UI) */ - $slider-range-filter-height: $slider-filter-height !default; - $slider-range-filter-border: $slider-filter-border !default; - $slider-range-filter-thumb-color: $slider-filter-thumb-color !default; - $slider-range-filter-thumb-border: $slider-filter-thumb-border !default; - $slider-range-filter-thumb-border-radius: $slider-filter-thumb-border-radius !default; - $slider-range-filter-thumb-cursor: $slider-filter-thumb-cursor !default; - $slider-range-filter-thumb-size: $slider-filter-thumb-size !default; - $slider-range-filter-thumb-top: -5px !default; - $slider-range-filter-runnable-track-top: 45% !default; - $slider-range-filter-runnable-track-height: $slider-filter-runnable-track-height !default; - $slider-range-filter-bgcolor: $slider-filter-bgcolor !default; - $slider-range-filter-padding: 0 12px !default; - $slider-range-filter-values-slider-width: calc(98% - 16px) !default; - $slider-range-filter-values-slider-top: 12px !default; - $slider-range-filter-values-slider-margin: 0 10px !default; - - /* Multiple-Select Filter */ - $multiselect-input-filter-border: 1px solid #ccc !default; - $multiselect-input-filter-font-family: "Helvetica Neue", Helvetica, Arial !default; - $multiselect-input-filter-font-size: 12px !default; - $multiselect-dropdown-border: 1px solid #bbb !default; - $multiselect-dropdown-max-width: 250px !default; - $multiselect-dropdown-z-index: 9999 !default; - $multiselect-checkbox-margin-left: 4px !default; - $multiselect-checkbox-hover-bg-color: $row-mouse-hover-color !default; - $multiselect-select-all-border-bottom: 1px solid #ddd !default; - $multiselect-select-all-text-color: darken($primary-color, 5%) !default; - $multiselect-select-all-text-hover-color: darken($primary-color, 10%) !default; - $multiselect-icon-font-size: 16px !default; - $multiselect-icon-arrow-font-size: $multiselect-icon-font-size !default; - $multiselect-icon-color: $primary-color !default; - $multiselect-icon-checked: "\f14a" !default; - $multiselect-icon-checked-color: $multiselect-icon-color !default; - $multiselect-icon-border: none !default; - $multiselect-icon-border-radius: none !default; - $multiselect-icon-height: $icon-font-size !default; - $multiselect-icon-margin: 0 !default; - $multiselect-icon-width: 20px !default; - $multiselect-icon-unchecked: "\f096" !default; - $multiselect-icon-unchecked-color: $multiselect-icon-color !default; - $multiselect-icon-radio-color: $multiselect-icon-color !default; - $multiselect-icon-radio-height: $multiselect-icon-height !default; - $multiselect-icon-radio-width: $multiselect-icon-width !default; - $multiselect-icon-radio-border: $multiselect-icon-border !default; - $multiselect-icon-radio-border-radius: $multiselect-icon-border-radius !default; - $multiselect-icon-radio-margin: $multiselect-icon-margin !default; - $multiselect-icon-radio-height: $icon-font-size !default; - $multiselect-icon-radio-border: none !default; - $multiselect-icon-radio-border-radius: none !default; - $multiselect-icon-radio-checked: "\f192" !default; - $multiselect-icon-radio-unchecked: "\f10c" !default; - $multiselect-icon-search-margin-right: 8px !default; - $multiselect-ok-button-font-weight: 600 !default; - $multiselect-label-margin-bottom: 5px !default; - $multiselect-unchecked-opacity: 0.6 !default; - $multiselect-placeholder-font-family: $filter-placeholder-font-family !default; - $multiselect-ok-button-bg-color: #fff !default; - $multiselect-ok-button-bg-hover-color: darken($row-mouse-hover-color, 3%) !default; - $multiselect-ok-button-font-weight: 600 !default; - $multiselect-ok-button-text-color: $primary-color !default; - $multiselect-ok-button-text-hover-color: darken($primary-color, 5%) !default; - $multiselect-ok-button-border: 1px solid #ccc !default; - $multiselect-ok-button-height: 26px !default; - $multiselect-ok-button-width: 100% !default; - $multiselect-ok-button-text-align: center !default; - - /* pagination variables */ - $pagination-button-hover-color: #E6E6E6 !default; - $pagination-button-border-radius: 4px !default; - $pagination-button-padding: 6px 12px !default; - $pagination-border-color: #ddd !default; - $pagination-count-margin-left: 2px !default; - $pagination-icon-color: $primary-color !default; - $pagination-icon-seek-first: "\f100" !default; - $pagination-icon-seek-end: "\f101" !default; - $pagination-icon-seek-next: "\f105" !default; - $pagination-icon-seek-prev: "\f104" !default; - $pagination-icon-seek-first-width: inherit !default; - $pagination-icon-seek-end-width: inherit !default; - $pagination-icon-seek-next-width: inherit !default; - $pagination-icon-seek-prev-width: inherit !default; - $pagination-icon-seek-text-stroke: 0.4px !default; - $pagination-button-border: 1px solid #acacac !default; - $pagination-border-top: 0 none !default; - $pagination-border-right: 0 none !default; - $pagination-border-bottom: 0 none !default; - $pagination-border-left: 0 none !default; - $pagination-page-input-border-radius: 4px !default; - $pagination-page-input-bgcolor: #fafbed !default; - $pagination-page-input-height: 26px !default; - $pagination-page-input-width: 50px !default; - $pagination-page-input-padding: 2px !default; - $pagination-page-select-border-radius: 3px !default; - $pagination-page-select-padding: 0 0 2px 2px !default; - $pagination-page-select-height: 32px !default; - $pagination-page-select-width: 60px !default; - $pagination-page-select-font-size: calc(#{$font-size-base} - 2px) !default; - $pagination-text-color: #808080 !default; - - /* Row Move Manager Plugin */ - $row-move-plugin-icon: "\f0c9" !default; - $row-move-plugin-icon-width: $icon-font-size !default; - $row-move-plugin-size: $icon-font-size !default; - $row-move-plugin-cursor: move !default; - - /* selector plugin */ - $selector-border-right: 1px solid rgb(196, 196, 196) !default; - - /* Viewport */ - $viewport-border-top: 0 none !default; // header row is where the Filters are showing - $viewport-border-right: 0 none !default; - $viewport-border-bottom: 0 none !default; - $viewport-border-left: 0 none !default; - - /* Custom Footer */ - $footer-bg-color: transparent !default; - $footer-font-size: $font-size-base !default; - $footer-font-style: italic !default; - $footer-font-weight: normal !default; - $footer-height: 30px !default; // if you modify this height, you also have to modify the footerHeight in the customFooterOptions - $footer-padding: 5px 0 !default; - $footer-text-color: #808080 !default; - $footer-left-float: left !default; - $footer-left-font-style: italic !default; - $footer-left-font-weight: normal !default; - $footer-left-padding: 0px !default; - $footer-left-text-align: left !default; - $footer-left-text-color: $footer-text-color !default; - $footer-left-width: 50% !default; - $footer-right-font-style: italic !default; - $footer-right-font-weight: normal !default; - $footer-right-padding: 0px !default; - $footer-right-separator-margin: 2px !default; - $footer-right-float: right !default; - $footer-right-text-align: right !default; - $footer-right-text-color: $footer-text-color !default; - $footer-right-width: 50% !default; +$border-color: #dddddd !default; +$font-size-base-value: 14 !default; +$font-size-base: $font-size-base-value + 0px !default; +$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$primary-color: #31708F !default; +$button-primary-bg-color: $primary-color !default; +$button-primary-color: inherit !default; +$flatpickr-bgcolor: #ffffff !default; +$filter-placeholder-font-family: 'Segoe UI Symbol' !default; +$focus-color: rgb(115, 179, 229) !default; + +/* Slickgrid container, including headers but excluding pagination */ +$container-border-top: 0 none !default; +$container-border-right: 0 none !default; +$container-border-bottom: 1px solid $border-color !default; +$container-border-left: 0 none !default; + +/* grid */ +$grid-border-color: fade(black, 3%) !default; +$grid-border-style: solid !default; +$grid-header-background: rgba(255, 255, 255, .6) !default; +$grid-cell-color: rgb(255, 255, 255) !default; + +/* cell */ +$cell-active-border: none !default; +$cell-active-box-shadow: inset 0 0 0 1px #aaaaaa !default; +$cell-active-z-index: 6 !default; +$cell-box-shadow: inherit !default; +$cell-text-color: #000000 !default; +$cell-font-family: $font-family !default; +$cell-font-weight: normal !default; +$cell-border-top: 1px solid $border-color !default; +$cell-border-right: 1px transparent !default; +$cell-border-bottom: 1px transparent !default; +$cell-border-left: 1px transparent !default; +$cell-even-background-color: #ffffff !default; +$cell-odd-background-color: darken($grid-cell-color, 3%) !default; // for striping every second row +$cell-odd-active-background-color: darken($grid-cell-color, 5%) !default; +$cell-padding-top-bottom: 5px !default; +$cell-padding-right-left: 6px !default; +$cell-padding: $cell-padding-top-bottom $cell-padding-right-left !default; + +/** 4x available slick-pane (top, bottom, left, right) */ +$slick-pane-top-border-top: none !default; + +/* row */ +$row-mouse-hover-color: #eff5fc !default; +$row-mouse-hover-box-shadow: none !default; +$row-mouse-hover-z-index: 5 !default; +$row-selected-color: #dae8f1 !default; +$row-highlight-background-color: darken($row-selected-color, 5%) !default; +$row-highlight-fade-animation: 1.5s ease 1 !default; +$row-highlight-fade-out-animation: 0.3s ease 1 !default; +$row-checkbox-selector-background: inherit !default; +$row-checkbox-selector-border: none !default; + +/* Pre-Header - Header Grouping colspan */ +$preheader-border-left: none !default; +$preheader-border-left-first-element: none !default; +$preheader-border-right: none !default; +$preheader-border-right-last-element: none !default; +$preheader-border-bottom: 0 !default; +$preheader-border-top: 0 !default; +$preheader-font-size: $font-size-base + 3px !default; +$preheader-height: 25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */ +$preheader-grouped-title-display: inline-grid !default; +$preheader-grouped-title-justify: left !default; + +/* header */ +$header-background-color: #ffffff !default; +$header-font-size: $font-size-base !default; +$header-font-weight: bold !default; +$header-text-color: #000000 !default; +$header-padding-top: 4px !default; +$header-padding-right: 4px !default; +$header-padding-bottom: 4px !default; +$header-padding-left: 4px !default; +$header-input-height: 27px !default; // height of the filter form element (input, textarea, select) +$header-input-width: none !default; // width of the filter form element (input, textarea, select) +$header-input-padding: 0 6px !default; // padding of the filter form element (input, textarea, select) +$header-row-background-color: #ffffff !default; +$header-row-count: 2 !default; // how many rows to display on the header +$header-row-filter-padding: 4px !default; +$header-column-height: calc(17px * #{$header-row-count}) !default; // header is calculated by rows to show +$header-border-top: 0 none !default; // header, column titles, that is without the Filters +$header-border-right: 0 none !default; +$header-border-bottom: 0 none !default; +$header-border-left: 0 none !default; +$header-column-border-top: 0 none !default; // header, column titles, that is without the Filters +$header-column-border-right: 0 none !default; +$header-column-border-bottom: 0 none !default; +$header-column-border-left: 0 none !default; +$header-filter-row-border-top: 0 none !default; // header row is where the Filters are showing +$header-filter-row-border-right: 0 none !default; +$header-filter-row-border-bottom: 0 none !default; +$header-filter-row-border-left: 0 none !default; +$header-resizable-width: 7px !default; +$header-resizable-hover: 1px solid #d0d0d0 !default; +$header-resizable-hover-border-bottom: 0 none !default; +$header-resizable-hover-border-left: 0 none !default; +$header-resizable-hover-border-right: $header-resizable-hover !default; +$header-resizable-hover-border-top: 0 none !default; +$header-resizable-hover-width: $header-resizable-width !default; +$header-resizable-hover-border-radius: 8px !default; +$header-resizable-hover-right: 0 !default; +$header-resizable-hover-height: 100% !default; +$header-resizable-hover-top: 0 !default; +$header-resizable-hover-opacity: 1 !default; +$header-scroll-width-to-remove: 16px !default; // without this, the header (which doesn't have scrolling) will be wider than the data viewport + +/* Frozen pinned rows/columns */ +$frozen-border-bottom: 1px solid #a5a5a5 !default; +$frozen-border-right: 1px solid #a5a5a5 !default; +$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, ... */ +$icon-color: #4a4a4a !default; +$icon-font-family: "FontAwesome" !default; // or Glyphicons Halflings */ +$icon-font-size: 14px !default; +$icon-group-color: $primary-color !default; +$icon-group-expanded: "\f107" !default; +$icon-group-collapsed: "\f105" !default; +$icon-group-font-size: calc(#{$icon-font-size} + 4px) !default; +$icon-group-font-weight: bold !default; +$icon-group-margin-right: 2px !default; +$icon-group-height: 20px !default; +$icon-group-width: 14px !default; +$table-background: transparent !default; +$link-color: #08c !default; +$link-color-hover: darker($link-color, 15%) !default; +$gray-dark: #333 !default; +$text-color: $gray-dark !default; +$navbar-default-link-hover-color: $gray-dark !default; + +/* AutoComplete */ +$autocomplete-bg-color: #ffffff !default; +$autocomplete-border: 1px solid rgba(0, 0, 0, 0.15) !default; +$autocomplete-border-radius: 4px !default; +$autocomplete-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !default; +$autocomplete-hover-color: #262626 !default; +$autocomplete-hover-bg-color: darken($row-mouse-hover-color, 3%) !default; +$autocomplete-loading-icon: "\f021" !default; +$autocomplete-loading-icon-color: $icon-color !default; +$autocomplete-loading-icon-width: inherit !default; +$autocomplete-loading-icon-margin-left: -16px !default; +$autocomplete-loading-icon-line-height: 0px !default; +$autocomplete-loading-icon-vertical-align: inherit !default; +$autocomplete-max-height: 25vh !default; +$autocomplete-min-height: 75px !default; +$autocomplete-min-width: 50px !default; +$autocomplete-overflow-x: hidden !default; +$autocomplete-overflow-y: auto !default; +$autocomplete-text-color: #333333 !default; +$autocomplete-text-overflow: ellipsis !default; +$autocomplete-text-padding: 3px 15px !default; +$autocomplete-z-index: 9999 !default; + +/** AutoComplte with Custom Styling (2 rows) */ +$autocomplete-tpl2-font-size: 12px !default; +$autocomplete-tpl2-width: 285px !default; +$autocomplete-tpl2-container-list-width: #{$autocomplete-tpl2-width - 15px} !default; +$autocomplete-tpl2-container-list-padding-lr: 10px !default; /* left/right */ +$autocomplete-tpl2-container-list-padding-tb: 3px !default; /* top/bottom */ +$autocomplete-tpl2-container-list-padding: $autocomplete-tpl2-container-list-padding-tb $autocomplete-tpl2-container-list-padding-lr !default; +$autocomplete-tpl2-icon-left-height: 32px !default; +$autocomplete-tpl2-icon-left-width: 32px !default; +$autocomplete-tpl2-bottom-left-text-color: #686868 !default; +$autocomplete-tpl2-bottom-left-font-size: #{$autocomplete-tpl2-font-size - 1px} !default; +$autocomplete-tpl2-bottom-left-font-style: italic !default; +$autocomplete-tpl2-bottom-left-font-weight: normal !default; +$autocomplete-tpl2-bottom-left-max-width: calc(#{$autocomplete-tpl2-container-list-width} - #{$autocomplete-tpl2-icon-left-width} - (#{$autocomplete-tpl2-container-list-padding-lr} * 2)) !default; +$autocomplete-tpl2-top-left-text-color: #313131 !default; +$autocomplete-tpl2-top-left-font-size: $autocomplete-tpl2-font-size !default; +$autocomplete-tpl2-top-left-font-style: normal !default; +$autocomplete-tpl2-top-left-font-weight: bold !default; +$autocomplete-tpl2-top-left-max-width: $autocomplete-tpl2-bottom-left-max-width !default; + +/** AutoComplte with Custom Styling (4 corners) */ +$autocomplete-tpl4-font-size: 12px !default; +$autocomplete-tpl4-width: 385px !default; +$autocomplete-tpl4-container-list-width: #{$autocomplete-tpl4-width - 15px} !default; +$autocomplete-tpl4-container-list-padding-lr: 10px !default; /* left/right */ +$autocomplete-tpl4-container-list-padding-tb: 3px !default; /* top/bottom */ +$autocomplete-tpl4-container-list-padding: $autocomplete-tpl4-container-list-padding-tb $autocomplete-tpl4-container-list-padding-lr !default; +$autocomplete-tpl4-icon-left-height: 32px !default; +$autocomplete-tpl4-icon-left-width: 32px !default; +$autocomplete-tpl4-bottom-left-text-color: #686868 !default; +$autocomplete-tpl4-bottom-left-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; +$autocomplete-tpl4-bottom-left-font-style: italic !default; +$autocomplete-tpl4-bottom-left-font-weight: normal !default; +$autocomplete-tpl4-bottom-left-max-width: calc(#{$autocomplete-tpl4-container-list-width} - #{$autocomplete-tpl4-icon-left-width} - (#{$autocomplete-tpl4-container-list-padding-lr} * 2)) !default; +$autocomplete-tpl4-bottom-right-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; +$autocomplete-tpl4-bottom-right-font-style: italic !default; +$autocomplete-tpl4-bottom-right-font-weight: normal !default; +$autocomplete-tpl4-bottom-right-text-color: #686868 !default; +$autocomplete-tpl4-bottom-right-max-width: 250px !default; +$autocomplete-tpl4-top-left-text-color: #313131 !default; +$autocomplete-tpl4-top-left-font-size: $autocomplete-tpl4-font-size !default; +$autocomplete-tpl4-top-left-font-style: normal !default; +$autocomplete-tpl4-top-left-font-weight: bold !default; +$autocomplete-tpl4-top-left-max-width: $autocomplete-tpl4-bottom-left-max-width !default; +$autocomplete-tpl4-top-right-text-color: lighten($primary-color, 7%) !default; +$autocomplete-tpl4-top-right-font-size: #{$autocomplete-tpl4-font-size - 1px} !default; +$autocomplete-tpl4-top-right-font-style: normal !default; +$autocomplete-tpl4-top-right-font-weight: bold !default; +$autocomplete-tpl4-top-right-max-width: 100px !default; + +/* Sorting */ +$icon-sort-asc: "\f0d8" !default; +$icon-sort-desc: "\f0d7" !default; +$icon-sort-color: $primary-color !default; +$icon-sort-font-size: $icon-font-size !default; +$icon-sort-width: $icon-font-size !default; +$icon-sort-position-right: 10px !default; +$icon-sort-position-top: calc((15px * #{$header-row-count}) - 15px) !default; +$sort-indicator-number-font-size: 10px !default; +$sort-indicator-number-width: 8px !default; +$sort-indicator-number-left: auto !default; +$sort-indicator-number-right: 0px !default; +$sort-indicator-number-top: calc(13px * #{$header-row-count}) !default; +$sort-indicator-hint-opacity: 0.5 !default; + +/* Grouping Totals Formatter */ +$group-totals-formatter-color: gray !default; +$group-totals-formatter-bgcolor: #fff !default; +$group-totals-formatter-font-size: 14px !default; + +/* Column picker */ +$column-picker-background-color: #ffffff !default; +$column-picker-border: 1px solid #b8b8b8 !default; +$column-picker-border-radius: 2px !default; +$column-picker-box-shadow: 1px 1px 1px silver !default; +$column-picker-checkbox-color: $primary-color !default; +$column-picker-checkbox-size: 13px !default; +$column-picker-checkbox-font-weight: bold !default; +$column-picker-checkbox-icon-unchecked: "\f00c" !default; +$column-picker-checkbox-icon-checked: "\f00c" !default; +$column-picker-checkbox-opacity: 0.15 !default; +$column-picker-checkbox-opacity-hover: 0.35 !default; +$column-picker-checkbox-width: 13px !default; +$column-picker-close-btn-bg-color: #ffffff !default; +$column-picker-close-btn-color: #c3c3c3 !default; +$column-picker-close-btn-color-hover: darken($column-picker-close-btn-color, 25%) !default; +$column-picker-close-btn-cursor: pointer !default; +$column-picker-close-btn-font-family: "Calibri Light", "Helvetica Neue", Arial, sans-serif !default; +$column-picker-close-btn-font-size: 21px !default; +$column-picker-close-btn-border: 0px solid #9c9c9c !default; +$column-picker-close-btn-height: 21px !default; +$column-picker-close-btn-width: 15px !default; +$column-picker-close-btn-margin: 1px !default; +$column-picker-close-btn-padding: 0px !default; +$column-picker-close-btn-opacity: 0.9 !default; +$column-picker-close-btn-position-right: 5px !default; +$column-picker-close-btn-position-top: 0px !default; +$column-picker-padding-right-patch: 24px !default; /* trick to cheat the width to include extra scrollbar width in addition to auto width */ +$column-picker-divider-width: calc(100% + #{$column-picker-padding-right-patch} - 10px) !default; +$column-picker-item-border: 1px solid transparent !default; +$column-picker-item-border-radius: 0px !default; +$column-picker-item-font-size: $icon-font-size !default; +$column-picker-item-padding: 2px 4px !default; +$column-picker-item-hover-border: 1px solid #BFBDBD !default; +$column-picker-item-hover-color: #fafafa !default; +$column-picker-label-margin: 4px !default; +$column-picker-label-font-weight: normal !default; +$column-picker-link-background-color: #ffffff !default; +$column-picker-title-border-bottom: 1px solid #d6d6d6 !default; +$column-picker-title-font-size: calc(#{$column-picker-item-font-size} + 2px) !default; +$column-picker-title-font-weight: normal !default; +$column-picker-title-margin-bottom: 10px !default; +$column-picker-title-width: calc(100% - #{$column-picker-close-btn-width} - 10px) !default; + +/** Detail View Plugin */ +$detail-view-icon-collapse: "\f056" !default; +$detail-view-icon-collapse-color: $primary-color !default; +$detail-view-icon-expand: "\f055" !default; +$detail-view-icon-expand-color: lighten($primary-color, 25%) !default; +$detail-view-icon-size: calc(#{$icon-font-size} + 2px) !default; +$detail-view-container-bgcolor: #f7f7f7 !default; +$detail-view-container-border: 1px solid #c0c0c0 !default; +$detail-view-container-padding: 10px !default; +$detail-view-container-z-index: 1000 !default; + +/* Excel copy plugin */ +$copied-cell-bg-color-transition: rgba(0, 0, 255, 0.2) !default; +$copied-cell-transition: 0.5s background !default; + +/* Grid Menu - hamburger menu */ +$grid-menu-background-color: #ffffff !default; +$grid-menu-border: 1px solid #b8b8b8 !default; +$grid-menu-border-radius: 2px !default; +$grid-menu-box-shadow: 1px 1px 1px silver !default; +$grid-menu-button-padding: 0 2px !default; +$grid-menu-checkbox-color: $primary-color !default; +$grid-menu-checkbox-size: 13px !default; +$grid-menu-checkbox-font-weight: bold !default; +$grid-menu-checkbox-icon-unchecked: "\f00c" !default; +$grid-menu-checkbox-icon-checked: "\f00c" !default; +$grid-menu-checkbox-margin-right: 4px !default; +$grid-menu-checkbox-opacity: 0.15 !default; +$grid-menu-checkbox-opacity-hover: 0.35 !default; +$grid-menu-checkbox-width: 13px !default; +$grid-menu-close-btn-cursor: pointer !default; +$grid-menu-close-btn-bg-color: #ffffff !default; +$grid-menu-close-btn-border: 0px solid #9c9c9c !default; +$grid-menu-close-btn-color: $column-picker-close-btn-color !default; +$grid-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$grid-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; +$grid-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; +$grid-menu-close-btn-height: 21px !default; +$grid-menu-close-btn-width: 15px !default; +$grid-menu-close-btn-margin: 1px !default; +$grid-menu-close-btn-padding: 0px !default; +$grid-menu-close-btn-opacity: 0.9 !default; +$grid-menu-close-btn-position-right: 5px !default; +$grid-menu-close-btn-position-top: 0px !default; +$grid-menu-label-margin: 4px !default; +$grid-menu-label-font-weight: normal !default; +$grid-menu-link-background-color: #ffffff !default; +$grid-menu-icon-font-size: $icon-font-size !default; +$grid-menu-icon-line-height: 14px !default; +$grid-menu-icon-margin-right: 4px !default; +$grid-menu-icon-width: 14px !default; +$grid-menu-icon-top-margin: 5px !default; +$grid-menu-item-border: 1px solid transparent !default; +$grid-menu-item-border-radius: 0px !default; +$grid-menu-item-disabled-color: silver !default; +$grid-menu-item-padding: 2px 4px !default; +$grid-menu-item-font-size: $font-size-base !default; +$grid-menu-item-hover-border: 1px solid #BFBDBD !default; +$grid-menu-item-hover-color: #fafafa !default; +$grid-menu-min-width: 200px !default; +$grid-menu-divider-height: 1px !default; +$grid-menu-divider-margin: 8px 5px !default; +$grid-menu-divider-color: #e7e7e7 !default; +$grid-menu-divider-width: calc(100% - 10px) !default; +$grid-menu-title-border-bottom: solid 1px #d6d6d6 !default; +$grid-menu-title-font-size: calc(#{$grid-menu-item-font-size} + 2px) !default; +$grid-menu-title-font-weight: normal !default; +$grid-menu-title-margin-bottom: 10px !default; +$grid-menu-title-width: calc(100% - #{$grid-menu-close-btn-width} - 10px) !default; +$grid-menu-z-index: 500 !default; + +/* (Action) Cell Menu Plugin */ +$cell-menu-bg-color: #ffffff !default; +$cell-menu-border: 1px solid #BFBDBD !default; +$cell-menu-border-radius: 2px !default; +$cell-menu-close-btn-bg-color: #ffffff !default; +$cell-menu-close-btn-border: 0px solid #9c9c9c !default; +$cell-menu-close-btn-color: $column-picker-close-btn-color !default; +$cell-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$cell-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; +$cell-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; +$cell-menu-close-btn-height: 21px !default; +$cell-menu-close-btn-width: 15px !default; +$cell-menu-close-btn-margin: 1px !default; +$cell-menu-close-btn-padding: 0px !default; +$cell-menu-close-btn-opacity: 0.9 !default; +$cell-menu-min-width: 175px !default; +$cell-menu-padding: 6px !default; +$cell-menu-item-border: 1px solid transparent !default; +$cell-menu-item-border-radius: 0px !default; +$cell-menu-item-disabled-color: silver !default; +$cell-menu-item-font-size: $font-size-base !default; +$cell-menu-item-height: 24px !default; +$cell-menu-item-hover-border: 1px solid #BFBDBD !default; +$cell-menu-item-hover-color: #fafafa !default; +$cell-menu-item-padding: 2px 4px !default; +$cell-menu-item-width: 100% !default; +$cell-menu-icon-font-size: $icon-font-size !default; +$cell-menu-item-width-when-button: calc(100% - #{$cell-menu-close-btn-width} - 3px) !default; +$cell-menu-icon-margin-right: 4px !default; +$cell-menu-icon-width: 16px !default; +$cell-menu-divider-height: 1px !default; +$cell-menu-divider-margin: 8px 5px !default; +$cell-menu-divider-color: #e7e7e7 !default; +$cell-menu-divider-width: calc(100% - 10px) !default; +$cell-menu-option-list-margin-bottom: 10px !default; +$cell-menu-title-border-bottom: 1px solid #d6d6d6 !default; +$cell-menu-title-font-size: calc(#{$cell-menu-item-font-size} + 2px) !default; +$cell-menu-title-font-weight: normal !default; +$cell-menu-title-margin-bottom: 10px !default; +$cell-menu-title-width: calc(100% - #{$cell-menu-close-btn-width} - 10px) !default; + +/* Context Menu Plugin */ +$context-menu-bg-color: #ffffff !default; +$context-menu-border: 1px solid #BFBDBD !default; +$context-menu-border-radius: 2px !default; +$context-menu-close-btn-bg-color: #ffffff !default; +$context-menu-close-btn-border: 0px solid #9c9c9c !default; +$context-menu-close-btn-color: $column-picker-close-btn-color !default; +$context-menu-close-btn-color-hover: $column-picker-close-btn-color-hover !default; +$context-menu-close-btn-font-family: $column-picker-close-btn-font-family !default; +$context-menu-close-btn-font-size: $column-picker-close-btn-font-size !default; +$context-menu-close-btn-height: 21px !default; +$context-menu-close-btn-width: 15px !default; +$context-menu-close-btn-margin: 1px !default; +$context-menu-close-btn-padding: 0px !default; +$context-menu-close-btn-opacity: 0.9 !default; +$context-menu-min-width: 175px !default; +$context-menu-padding: 6px !default; +$context-menu-item-border: 1px solid transparent !default; +$context-menu-item-border-radius: 0px !default; +$context-menu-item-disabled-color: silver !default; +$context-menu-item-font-size: $icon-font-size !default; +$context-menu-item-hover-border: 1px solid #BFBDBD !default; +$context-menu-item-hover-color: #fafafa !default; +$context-menu-item-padding: 2px 4px !default; +$context-menu-item-width: 100% !default; +$context-menu-item-width-when-button: calc(100% - #{$context-menu-close-btn-width} - 3px) !default; +$context-menu-icon-font-size: $icon-font-size !default; +$context-menu-icon-height: 16px !default; +$context-menu-icon-line-height: 14px !default; +$context-menu-icon-margin-right: 4px !default; +$context-menu-icon-width: 16px !default; +$context-menu-divider-height: 1px !default; +$context-menu-divider-margin: 8px 5px !default; +$context-menu-divider-color: #e7e7e7 !default; +$context-menu-divider-width: calc(100% - 10px) !default; +$context-menu-option-list-margin-bottom: 10px !default; +$context-menu-title-border-bottom: 1px solid #d6d6d6 !default; +$context-menu-title-font-size: calc(#{$context-menu-item-font-size} + 2px) !default; +$context-menu-title-font-weight: normal !default; +$context-menu-title-margin-bottom: 10px !default; +$context-menu-title-width: calc(100% - #{$context-menu-close-btn-width} - 10px) !default; + +/* Header Menu Plugin */ +$header-menu-bg-color: #ffffff !default; +$header-menu-button-bg-color: #ffffff !default; +$header-menu-border: 1px solid #BFBDBD !default; +$header-menu-button-border: $header-menu-border !default; +$header-menu-button-border-width: 0px !default; +$header-menu-button-height: 35px !default; +$header-menu-button-icon: "\f13a" !default; +$header-menu-button-icon-color: $icon-color !default; +$header-menu-button-icon-font-size: 14px !default; +$header-menu-button-icon-font-weight: normal !default; +$header-menu-button-icon-width: 14px !default; +$header-menu-button-padding: 0px !default; +$header-menu-button-margin-right: 3px !default; +$header-menu-border-radius: 2px !default; +$header-menu-button-width: 14px !default; +$header-menu-min-width: 175px !default; +$header-menu-padding: 6px !default; +$header-menu-item-border: 1px solid transparent !default; +$header-menu-item-border-radius: 0px !default; +$header-menu-item-disabled-color: silver !default; +$header-menu-item-padding: 2px 4px !default; +$header-menu-item-hover-border: 1px solid #BFBDBD !default; +$header-menu-item-hover-color: #fafafa !default; +$header-menu-icon-font-color: $cell-text-color !default; +$header-menu-icon-font-size: $icon-font-size !default; +$header-menu-icon-font-weight: normal !default; +$header-menu-icon-line-height: 14px !default; +$header-menu-icon-height: 16px !default; +$header-menu-icon-margin-right: 4px !default; +$header-menu-icon-width: 16px !default; +$header-menu-divider-height: 1px !default; +$header-menu-divider-margin: 8px 3px !default; +$header-menu-divider-color: #e7e7e7 !default; +$header-menu-divider-width: calc(100% - 10px) !default; +$header-menu-display: none !default; /* can be none or inline-block */ + +/* Checkbox Selector / Row Selection */ +$checkbox-selector-color: $primary-color !default; +$checkbox-selector-checked-color: $checkbox-selector-color !default; +$checkbox-selector-unchecked-color: $checkbox-selector-color !default; +$checkbox-selector-size: calc(#{$icon-font-size} - 1px) !default; +$checkbox-selector-icon: "\f00c" !default; +$checkbox-selector-icon-bg-color: inherit !default; +$checkbox-selector-icon-font-weight: bold !default; +$checkbox-selector-icon-height: $icon-font-size !default; +$checkbox-selector-icon-margin: 0 !default; +$checkbox-selector-icon-width: $icon-font-size !default; +$checkbox-selector-icon-checked: $checkbox-selector-icon !default; +$checkbox-selector-icon-unchecked: $checkbox-selector-icon !default; +$checkbox-selector-icon-border: none !default; +$checkbox-selector-icon-border-radius: none !default; +$checkbox-selector-opacity: 0.15 !default; +$checkbox-selector-opacity-hover: 0.35 !default; + +/* Editors */ +$editor-focus-border-color: lighten($primary-color, 10%) !default; +$editor-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default; +$date-editor-focus-border-color: $editor-focus-border-color !default; +$date-editor-focus-box-shadow: $editor-focus-box-shadow !default; +$large-editor-background-color: #ffffff !default; +$large-editor-border: 2px solid #a0a0a0 !default; +$large-editor-text-padding: 5px !default; +$large-editor-border-radius: 6px !default; +$large-editor-textarea-height: 80px !default; +$large-editor-textarea-width: 250px !default; +$large-editor-button-border-radius: 3px !default; +$large-editor-button-text-align: right !default; +$large-editor-footer-spacing: 2px !default; +$large-editor-count-font-size: 11px !default; +$large-editor-count-margin-top: 8px !default; +$large-editor-count-separator-margin: 0 1px !default; +$large-editor-count-color: #313131 !default; +$text-editor-border: 1px solid #e2e2e2 !default; +$text-editor-border-radius: 3px !default; +$text-editor-background: #ffffff !default; +$text-editor-margin-bottom: 2px !default; +$text-editor-margin-left: -2px !default; /* negative number to cancel inside padding */ +$text-editor-margin-right: 2px !default; +$text-editor-margin-top: 2px !default; +$text-editor-padding-bottom: 0 !default; +$text-editor-padding-left: 2px !default; +$text-editor-padding-right: 0 !default; +$text-editor-padding-top: 0 !default; +$text-editor-focus-border-color: $editor-focus-border-color !default; +$text-editor-focus-box-shadow: $editor-focus-box-shadow !default; +$text-editor-readonly-color: #f0f0f0 !default; +$slider-editor-height: 24px !default; +$slider-editor-runnable-track-padding: 0 6px !default; +$slider-editor-number-padding: 4px 6px !default; +$slider-editor-focus-border-color: $editor-focus-border-color !default; +$slider-editor-focus-box-shadow: $editor-focus-box-shadow !default; + +/* Compound Filters */ +$compound-filter-bgcolor: #e4eacf !default; +$compound-filter-operator-border-radius: 4px 0 0 4px !default; +$compound-filter-border-radius: 0 4px 4px 0 !default; +$compound-filter-text-weight: bold !default; +$compound-filter-text-color: $primary-color !default; +$compound-filter-text-font-size: 13px !default; +$compound-filter-text-padding: 0 0 0 2px !default; + +/** Date Range Filters */ +$date-range-filter-border-radius: 4px !default; + +/* Draggable Grouping Plugin */ +$draggable-group-drop-border: 1px solid #e0e0e0 !default; +$draggable-group-drop-bgcolor: #ffffff !default; +$draggable-group-drop-height: 35px !default; +$draggable-group-drop-padding: 5px 10px !default; +$draggable-group-drop-radius: 4px !default; +$draggable-group-drop-width: calc(100% - 25px) !default; +$draggable-group-droppable-active-bgcolor: #fafafa !default; +$draggable-group-droppable-hover-bgcolor: darken($draggable-group-droppable-active-bgcolor, 5%) !default; +$draggable-group-placeholder-font-style: italic !default; +$draggable-group-placeholder-color: #616161 !default; +$draggable-group-delete-color: pink !default; +$draggable-group-delete-hover-color: red !default; +$draggable-group-delete-padding-left: 5px !default; +$draggable-group-delete-padding-right: 7px !default; +$draggable-group-delete-font-size: 16px !default; +$draggable-group-delete-vertical-align: baseline !default; +$draggable-group-toggle-all-color: $icon-group-color !default; +$draggable-group-toggle-all-display: none !default; +$draggable-group-toggle-all-pos-top: 7px !default; +$draggable-group-toggle-all-pos-right: 40px !default; +$draggable-group-toggle-collapsed-icon: "\f0fe" !default; +$draggable-group-toggle-expanded-icon: "\f146" !default; +$draggable-group-title-height: $icon-group-height !default; +$draggable-group-title-line-height: $icon-group-height !default; +$draggable-group-title-vertical-align: none !default; +$draggable-group-column-icon-font-weight: normal !default; +$draggable-group-column-icon-color: #707070 !default; +$draggable-group-column-icon-height: 9px !default; +$draggable-group-column-icon-width: 9px !default; +$draggable-group-column-icon-margin-left: 4px !default; + +/* Input Slider Filter (vanilla html) */ +$slider-filter-border: 1px solid #ccc !default; +$slider-filter-bgcolor: #eee !default; +$slider-filter-runnable-track-bgcolor: #ddd !default; +$slider-filter-runnable-track-height: 4px !default; +$slider-filter-runnable-track-padding: 0 6px !default; +$slider-filter-fill-lower-color: #ddd !default; /* ms only */ +$slider-filter-fill-focus-lower-color: #aaa !default; /* ms only */ +$slider-filter-height: $header-input-height !default; +$slider-filter-thumb-border-radius: 50% !default; +$slider-filter-thumb-cursor: pointer !default; +$slider-filter-thumb-color: rgb(201, 219, 203) !default; +$slider-filter-thumb-size: 14px !default; +$slider-filter-thumb-border: 1px solid darken($slider-filter-thumb-color, 15%) !default; +$slider-filter-number-padding: 4px 8px !default; +$slider-filter-number-font-size: calc(#{$font-size-base-value} - 1px) !default; + +/* Input Range Slider Filter (with jQuery UI) */ +$slider-range-filter-height: $slider-filter-height !default; +$slider-range-filter-border: $slider-filter-border !default; +$slider-range-filter-thumb-color: $slider-filter-thumb-color !default; +$slider-range-filter-thumb-border: $slider-filter-thumb-border !default; +$slider-range-filter-thumb-border-radius: $slider-filter-thumb-border-radius !default; +$slider-range-filter-thumb-cursor: $slider-filter-thumb-cursor !default; +$slider-range-filter-thumb-size: $slider-filter-thumb-size !default; +$slider-range-filter-thumb-top: -5px !default; +$slider-range-filter-runnable-track-top: 45% !default; +$slider-range-filter-runnable-track-height: $slider-filter-runnable-track-height !default; +$slider-range-filter-bgcolor: $slider-filter-bgcolor !default; +$slider-range-filter-padding: 0 12px !default; +$slider-range-filter-values-slider-width: calc(98% - 16px) !default; +$slider-range-filter-values-slider-top: 12px !default; +$slider-range-filter-values-slider-margin: 0 10px !default; + +/* Multiple-Select Filter */ +$multiselect-input-filter-border: 1px solid #ccc !default; +$multiselect-input-filter-font-family: "Helvetica Neue", Helvetica, Arial !default; +$multiselect-input-filter-font-size: 12px !default; +$multiselect-dropdown-border: 1px solid #bbb !default; +$multiselect-dropdown-max-width: 250px !default; +$multiselect-dropdown-z-index: 9999 !default; +$multiselect-checkbox-margin-left: 4px !default; +$multiselect-checkbox-hover-bg-color: $row-mouse-hover-color !default; +$multiselect-select-all-border-bottom: 1px solid #ddd !default; +$multiselect-select-all-text-color: darken($primary-color, 5%) !default; +$multiselect-select-all-text-hover-color: darken($primary-color, 10%) !default; +$multiselect-icon-font-size: 16px !default; +$multiselect-icon-arrow-font-size: $multiselect-icon-font-size !default; +$multiselect-icon-color: $primary-color !default; +$multiselect-icon-checked: "\f14a" !default; +$multiselect-icon-checked-color: $multiselect-icon-color !default; +$multiselect-icon-border: none !default; +$multiselect-icon-border-radius: none !default; +$multiselect-icon-height: $icon-font-size !default; +$multiselect-icon-margin: 0 !default; +$multiselect-icon-width: 20px !default; +$multiselect-icon-unchecked: "\f096" !default; +$multiselect-icon-unchecked-color: $multiselect-icon-color !default; +$multiselect-icon-radio-color: $multiselect-icon-color !default; +$multiselect-icon-radio-height: $multiselect-icon-height !default; +$multiselect-icon-radio-width: $multiselect-icon-width !default; +$multiselect-icon-radio-border: $multiselect-icon-border !default; +$multiselect-icon-radio-border-radius: $multiselect-icon-border-radius !default; +$multiselect-icon-radio-margin: $multiselect-icon-margin !default; +$multiselect-icon-radio-height: $icon-font-size !default; +$multiselect-icon-radio-border: none !default; +$multiselect-icon-radio-border-radius: none !default; +$multiselect-icon-radio-checked: "\f192" !default; +$multiselect-icon-radio-unchecked: "\f10c" !default; +$multiselect-icon-search-margin-right: 8px !default; +$multiselect-ok-button-font-weight: 600 !default; +$multiselect-label-margin-bottom: 5px !default; +$multiselect-unchecked-opacity: 0.6 !default; +$multiselect-placeholder-font-family: $filter-placeholder-font-family !default; +$multiselect-ok-button-bg-color: #fff !default; +$multiselect-ok-button-bg-hover-color: darken($row-mouse-hover-color, 3%) !default; +$multiselect-ok-button-font-weight: 600 !default; +$multiselect-ok-button-text-color: $primary-color !default; +$multiselect-ok-button-text-hover-color: darken($primary-color, 5%) !default; +$multiselect-ok-button-border: 1px solid #ccc !default; +$multiselect-ok-button-height: 26px !default; +$multiselect-ok-button-width: 100% !default; +$multiselect-ok-button-text-align: center !default; + +/* pagination variables */ +$pagination-button-hover-color: #E6E6E6 !default; +$pagination-button-border-radius: 4px !default; +$pagination-button-padding: 6px 12px !default; +$pagination-border-color: #ddd !default; +$pagination-count-margin-left: 2px !default; +$pagination-icon-color: $primary-color !default; +$pagination-icon-seek-first: "\f100" !default; +$pagination-icon-seek-end: "\f101" !default; +$pagination-icon-seek-next: "\f105" !default; +$pagination-icon-seek-prev: "\f104" !default; +$pagination-icon-seek-first-width: inherit !default; +$pagination-icon-seek-end-width: inherit !default; +$pagination-icon-seek-next-width: inherit !default; +$pagination-icon-seek-prev-width: inherit !default; +$pagination-icon-seek-text-stroke: 0.4px !default; +$pagination-button-border: 1px solid #acacac !default; +$pagination-border-top: 0 none !default; +$pagination-border-right: 0 none !default; +$pagination-border-bottom: 0 none !default; +$pagination-border-left: 0 none !default; +$pagination-page-input-border-radius: 4px !default; +$pagination-page-input-bgcolor: #fafbed !default; +$pagination-page-input-height: 26px !default; +$pagination-page-input-width: 50px !default; +$pagination-page-input-padding: 2px !default; +$pagination-page-select-border-radius: 3px !default; +$pagination-page-select-padding: 0 0 2px 2px !default; +$pagination-page-select-height: 32px !default; +$pagination-page-select-width: 60px !default; +$pagination-page-select-font-size: calc(#{$font-size-base} - 2px) !default; +$pagination-text-color: #808080 !default; + +/* Row Move Manager Plugin */ +$row-move-plugin-icon: "\f0c9" !default; +$row-move-plugin-icon-width: $icon-font-size !default; +$row-move-plugin-size: $icon-font-size !default; +$row-move-plugin-cursor: move !default; + +/* selector plugin */ +$selector-border-right: 1px solid rgb(196, 196, 196) !default; + +/* Viewport */ +$viewport-border-top: 0 none !default; // header row is where the Filters are showing +$viewport-border-right: 0 none !default; +$viewport-border-bottom: 0 none !default; +$viewport-border-left: 0 none !default; + +/* Custom Footer */ +$footer-bg-color: transparent !default; +$footer-font-size: $font-size-base !default; +$footer-font-style: italic !default; +$footer-font-weight: normal !default; +$footer-height: 30px !default; // if you modify this height, you also have to modify the footerHeight in the customFooterOptions +$footer-padding: 5px 0 !default; +$footer-text-color: #808080 !default; +$footer-left-float: left !default; +$footer-left-font-style: italic !default; +$footer-left-font-weight: normal !default; +$footer-left-padding: 0px !default; +$footer-left-text-align: left !default; +$footer-left-text-color: $footer-text-color !default; +$footer-left-width: 50% !default; +$footer-right-font-style: italic !default; +$footer-right-font-weight: normal !default; +$footer-right-padding: 0px !default; +$footer-right-separator-margin: 2px !default; +$footer-right-float: right !default; +$footer-right-text-align: right !default; +$footer-right-text-color: $footer-text-color !default; +$footer-right-width: 50% !default; diff --git a/src/app/modules/angular-slickgrid/styles/flatpickr.min.scss b/src/app/modules/angular-slickgrid/styles/flatpickr.min.scss new file mode 100644 index 000000000..46c57b7cc --- /dev/null +++ b/src/app/modules/angular-slickgrid/styles/flatpickr.min.scss @@ -0,0 +1,13 @@ +.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px);}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/* + /*rtl:begin:ignore*/left:0;/* + /*rtl:end:ignore*/}/* + /*rtl:begin:ignore*/ +/* + /*rtl:end:ignore*/ +.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/* + /*rtl:begin:ignore*/right:0;/* + /*rtl:end:ignore*/}/* + /*rtl:begin:ignore*/ +/* + /*rtl:end:ignore*/ +.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9;}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px;}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto;}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box;}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0;}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%;}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto;}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05);}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0;}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block;}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto;}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px;}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px;}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9;}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left;}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left;}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}} \ No newline at end of file diff --git a/src/app/modules/angular-slickgrid/styles/multiple-select.png b/src/app/modules/angular-slickgrid/styles/multiple-select.png new file mode 100644 index 000000000..b1282ce42 Binary files /dev/null and b/src/app/modules/angular-slickgrid/styles/multiple-select.png differ diff --git a/src/app/modules/angular-slickgrid/styles/multiple-select.scss b/src/app/modules/angular-slickgrid/styles/multiple-select.scss new file mode 100644 index 000000000..b94db0faf --- /dev/null +++ b/src/app/modules/angular-slickgrid/styles/multiple-select.scss @@ -0,0 +1,191 @@ +/** + * @author zhixin wen + */ + +.ms-parent { + display: inline-block; + position: relative; + vertical-align: middle; +} + +.ms-choice { + display: block; + width: 100%; + height: 26px; + padding: 0; + overflow: hidden; + cursor: pointer; + border: 1px solid #aaa; + text-align: left; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background-color: #fff; +} + +.ms-choice.disabled { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.ms-choice > span { + position: absolute; + top: 0; + left: 0; + right: 20px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + padding-left: 8px; +} + +.ms-choice > span.placeholder { + color: #999; +} + +.ms-choice > div { + position: absolute; + top: 0; + right: 0; + width: 20px; + height: 25px; + background: url('~/multiple-select.png') left top no-repeat; +} + +.ms-choice > div.open { + background: url('~/multiple-select.png') right top no-repeat; +} + +.ms-drop { + width: 100%; + overflow: hidden; + display: none; + margin-top: -1px; + padding: 0; + position: absolute; + z-index: 1000; + background: #fff; + color: #000; + border: 1px solid #aaa; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.ms-drop.bottom { + top: 100%; + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.ms-drop.top { + bottom: 100%; + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.ms-search { + display: inline-block; + margin: 0; + min-height: 26px; + padding: 4px; + position: relative; + white-space: nowrap; + width: 100%; + z-index: 10000; +} + +.ms-search input { + width: 100%; + height: auto !important; + min-height: 24px; + padding: 0 20px 0 5px; + margin: 0; + outline: 0; + font-family: sans-serif; + font-size: 1em; + border: 1px solid #aaa; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + background: #fff url('~/multiple-select.png') no-repeat 100% -22px; + background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('~/multiple-select.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('~/multiple-select.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('~/multiple-select.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('~/multiple-select.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('~/multiple-select.png') no-repeat 100% -22px, linear-gradient(to top, #ffffff 85%, #eeeeee 99%); +} + +.ms-search, .ms-search input { + -webkit-box-sizing: border-box; + -khtml-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.ms-drop ul { + overflow: auto; + margin: 0; + padding: 5px 8px; +} + +.ms-drop ul > li { + list-style: none; + display: list-item; + background-image: none; + position: static; +} + +.ms-drop ul > li .disabled { + opacity: .35; + filter: Alpha(Opacity=35); +} + +.ms-drop ul > li.multiple { + display: block; + float: left; +} + +.ms-drop ul > li.group { + clear: both; +} + +.ms-drop ul > li.multiple label { + width: 100%; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ms-drop ul > li label { + font-weight: normal; + display: block; + white-space: nowrap; +} + +.ms-drop ul > li label.optgroup { + font-weight: bold; +} + +.ms-drop input[type="checkbox"] { + vertical-align: middle; +} + +.ms-drop .ms-no-results { + display: none; +} diff --git a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss index ea7840ef6..8fd897e36 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-plugins.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-plugins.scss @@ -946,8 +946,12 @@ input.slider-filter-input[type=range] { } } .search-filter { + height: $header-input-height; + .slider-value { padding: 0; + height: 100%; + .input-group-text { padding: $slider-filter-number-padding; font-size: $slider-filter-number-font-size; diff --git a/src/app/modules/angular-slickgrid/styles/slick-without-bootstrap-min-styling.scss b/src/app/modules/angular-slickgrid/styles/slick-without-bootstrap-min-styling.scss index 2dc164f4f..3ab69a7f4 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-without-bootstrap-min-styling.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-without-bootstrap-min-styling.scss @@ -1,45 +1,52 @@ @import './variables'; /** Bootstrap buttons styling copied and changed slightly for Material Design */ -.btn { - cursor: pointer; - font-family: $font-family; - display: inline-block; - margin-bottom: 0; - font-weight: 500; - text-align: center; - white-space: nowrap; - vertical-align: middle; - border: 1px solid transparent; - border-radius: 4px; -} +.slick-editor-modal, .slick-large-editor-text { + .btn { + cursor: pointer; + font-family: $font-family; + display: inline-block; + margin-bottom: 0; + text-align: center; + white-space: nowrap; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 4px; + } -.btn-default { - color: #333; - background-color: #fff; - border-color: #ccc; -} + .btn-default { + color: $button-primary-color; + background-color: #fff; + border-color: #ccc; + } -.btn-primary { - color: #fff; - background-color: $primary-color; -} + .btn-primary { + color: #fff; + background-color: $button-primary-bg-color; + } -.btn-xs, -.btn-group-xs>.btn { - padding: 1px 5px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; + .btn-xs, + .btn-group-xs>.btn { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; + } + .btn-sm { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; + } } -.slick-pane { +.gridPane, .grid-pane, .slick-editor-modal { font-family: $font-family; .form-control { display: block; width: 100%; - font-size: 14px; + font-size: $font-size-base; line-height: 1.42857143; color: #555; background-color: #fff; @@ -126,4 +133,24 @@ border-color: lighten($primary-color, 10%); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3); } + + .slick-pagination { + .slick-pagination-nav { + .pagination > li { + a, span { + position: relative; + float: left; + margin-left: -1px; + } + } + .pagination > .disabled > a, + .pagination > .disabled > a:focus, + .pagination > .disabled > a:hover, + .pagination > .disabled > span, + .pagination > .disabled > span:focus, + .pagination > .disabled > span:hover { + cursor: not-allowed; + } + } + } } diff --git a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss new file mode 100644 index 000000000..8f624b18a --- /dev/null +++ b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.lite.scss @@ -0,0 +1,25 @@ +/*! + * SlickGrid custom styling for Material (https://github.com/ghiscoding/angular-slickgrid) + * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE) + * @author: Ghislain B. (ghiscoding) + *//*! + +/** SlickGrid Material Theme */ +@import './variables-theme-material'; +@import './roboto-font'; +@import './slick-default-theme'; +@import './slick-grid'; +@import './slick-controls'; +@import './slick-editors'; +@import './slick-plugins'; +@import './slick-pagination'; +@import './slick-footer'; +@import './slickgrid-examples'; +@import './slick-bootstrap'; +@import './ui-autocomplete'; +@import './material-svg-icons'; +@import './material-svg-utilities'; + +$link-color: $primary-color !default; +@import './colors.scss'; +@import './extra-styling.scss'; diff --git a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss index c562c5eff..1fe7f9c70 100644 --- a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss +++ b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss @@ -4,23 +4,12 @@ * @author: Ghislain B. (ghiscoding) *//*! -/** SlickGrid Material Theme */ -@import './variables-theme-material'; -@import './roboto-font'; -@import './slick-default-theme'; -@import './slick-without-bootstrap-min-styling'; -@import './slick-grid'; -@import './slick-controls'; -@import './slick-editors'; -@import './slick-plugins'; -@import './slick-pagination'; -@import './slick-footer'; -@import './slickgrid-examples'; -@import './slick-bootstrap'; -@import './ui-autocomplete'; -@import './material-svg-icons'; -@import './material-svg-utilities'; +/** + * SlickGrid Material Theme + * (sames as `slickgrid-theme-material.lite.scss` but includes all external 3rd party lib styling that is Flatpickr & Multiple-Select) + */ -$link-color: $primary-color !default; -@import './colors.scss'; -@import './extra-styling.scss'; + @import './flatpickr.min'; + @import './multiple-select'; + @import './slick-without-bootstrap-min-styling'; + @import './slickgrid-theme-material.lite'; diff --git a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss new file mode 100644 index 000000000..0c71a27a8 --- /dev/null +++ b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.lite.scss @@ -0,0 +1,55 @@ +/*! + * SlickGrid custom styling for Salesforce (https://github.com/ghiscoding/angular-slickgrid) + * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE) + * @author: Ghislain B. (ghiscoding) + *//*! + +/** + * SlickGrid Salesforce Theme + * (sames as `slickgrid-theme-salesforce.scss` but without Flatpickr & Multiple-Select styling) + */ + + @import './sass-utilities'; + + @import './variables-theme-salesforce'; + @import './slick-default-theme'; + @import './slick-grid'; + @import './slick-controls'; + @import './slick-editors'; + @import './slick-plugins'; + @import './slick-pagination'; + @import './slick-footer'; + @import './slickgrid-examples'; + @import './slick-bootstrap'; + @import './ui-autocomplete'; + @import './material-svg-icons'; + @import './material-svg-utilities'; + + $editable-field-bg-color: rgba(227, 240, 251, 0.569) !default; + $editable-field-hover-icon-color: #b0adab !default; + $editable-field-hover-icon: url('data:image/svg+xml,') !default; + $editable-field-hover-icon-margin-right: 2px !default; + $editable-field-hover-icon-margin-top: 8px !default; + $editable-field-hover-icon-width: 14px !default; + + .grid-canvas { + .slick-row, .slick-row.odd { + .slick-cell.editable-field, .slick-cell.selected.editable-field { + background-color: $editable-field-bg-color; + &:hover:after { + content: $editable-field-hover-icon; + position: absolute; + top: $editable-field-hover-icon-margin-top; + right: $editable-field-hover-icon-margin-right; + width: $editable-field-hover-icon-width; + } + &.active:hover:after { + content: none; + } + } + } + } + + $link-color: $primary-color !default; + @import './colors.scss'; + @import './extra-styling'; diff --git a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss index f568e23ba..980a96adb 100644 --- a/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss +++ b/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss @@ -6,51 +6,10 @@ /** * SlickGrid Salesforce Theme - * (sames as `slickgrid-theme-salesforce.scss` but without Flatpickr & Multiple-Select styling) + * (sames as `slickgrid-theme-salesforce.lite.scss` but includes all external 3rd party lib styling that is Flatpickr & Multiple-Select) */ - @import './sass-utilities'; - - @import './variables-theme-salesforce'; - @import './slick-without-bootstrap-min-styling'; - @import './slick-default-theme'; - @import './slick-grid'; - @import './slick-controls'; - @import './slick-editors'; - @import './slick-plugins'; - @import './slick-pagination'; - @import './slick-footer'; - @import './slickgrid-examples'; - @import './slick-bootstrap'; - @import './ui-autocomplete'; - @import './material-svg-icons'; - @import './material-svg-utilities'; - - $editable-field-bg-color: rgba(227, 240, 251, 0.569) !default; - $editable-field-hover-icon-color: #b0adab !default; - $editable-field-hover-icon: url('data:image/svg+xml,') !default; - $editable-field-hover-icon-margin-right: 2px !default; - $editable-field-hover-icon-margin-top: 8px !default; - $editable-field-hover-icon-width: 14px !default; - - .grid-canvas { - .slick-row, .slick-row.odd { - .slick-cell.editable-field, .slick-cell.selected.editable-field { - background-color: $editable-field-bg-color; - &:hover:after { - content: $editable-field-hover-icon; - position: absolute; - top: $editable-field-hover-icon-margin-top; - right: $editable-field-hover-icon-margin-right; - width: $editable-field-hover-icon-width; - } - &.active:hover:after { - content: none; - } - } - } - } - - $link-color: $primary-color !default; - @import './colors.scss'; - @import './extra-styling'; +@import './flatpickr.min'; +@import './multiple-select'; +@import './slick-without-bootstrap-min-styling'; +@import './slickgrid-theme-salesforce.lite';