@progress/kendo-theme-material 6.7.1-dev.1 → 6.8.0-dev.1

package/scss/spreadsheet/_theme.scss

@@ -2,16 +2,7 @@
 
 
 @mixin kendo-spreadsheet--theme() {
-
-    // Spreadsheet
-    .k-spreadsheet {
-        @include fill(
-            $kendo-spreadsheet-text,
-            $kendo-spreadsheet-bg,
-            $kendo-spreadsheet-border
-        );
-    }
-
+    @include kendo-spreadsheet--theme-base();
 
     // Spreadsheet header
     .k-spreadsheet > .k-tabstrip-wrapper {
@@ -28,239 +19,16 @@
         }
     }
 
-
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
         color: $kendo-color-primary-contrast;
         background-color: $kendo-color-primary;
     }
 
-
-    // Spreadsheet footer
-    .k-spreadsheet-sheets-bar {
-        @include fill(
-            $kendo-toolbar-text,
-            k-try-shade( $kendo-toolbar-bg, .5 ),
-            inherit,
-            $kendo-toolbar-gradient
-        );
-
-        .k-tabstrip-items .k-item.k-active {
-            border-color: $kendo-color-secondary;
-        }
-    }
-
-
-    // Row / column headers
-    .k-spreadsheet-top-corner,
-    .k-spreadsheet-row-header,
-    .k-spreadsheet-column-header {
-        border-color: $kendo-component-border;
-        background-color: k-try-shade( $kendo-component-bg, 1 );
-    }
-
-
-    // Formula bar
-    .k-spreadsheet-formula-list {}
-    .k-syntax-ref { color: #ff8822; }
-    .k-syntax-num { color: #0099ff; }
-    .k-syntax-str { color: #38b714; }
-    .k-syntax-error { color: red; }
-    .k-syntax-bool { color: #a9169c; }
-    .k-syntax-paren-match { background-color: #caf200; }
-
-
-    // Cell editor
-    .k-spreadsheet-cell-editor {
-        color: $kendo-component-text;
-        background-color: $kendo-component-bg;
-    }
-
-
-    // Cells
-    .k-spreadsheet-merged-cell {
-        background-color: $kendo-component-bg;
-    }
-
-
     // Selection
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
-        background-color: rgba( black, .04 );
-
         &::after { border-color: $kendo-color-secondary; }
     }
 
-
-    .k-spreadsheet-selection {
-        border-color: $kendo-color-primary;
-        background-color: rgba( $kendo-color-primary, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-    }
-
-    .k-spreadsheet .k-single-selection::after {
-        border-color: $kendo-component-bg;
-        background-color: $kendo-color-primary;
-    }
-    .k-spreadsheet-active-cell {
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-        background-color: $kendo-component-bg;
-
-        &.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px 0 0 1px $kendo-color-primary;
-        }
-
-        &.k-bottom {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset 0 -1px 0 1px $kendo-color-primary;
-        }
-
-        &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px -1px 0 1px $kendo-color-primary;
-        }
-    }
-
-    .k-spreadsheet .k-auto-fill {
-        border-color: $kendo-color-primary;
-        background-color: rgba( $kendo-color-primary, .25 );
-        box-shadow: inset 0 0 0 1px $kendo-color-primary;
-    }
-    .k-spreadsheet .k-auto-fill-punch {
-        background-color: rgba( $kendo-component-bg, .5 );
-    }
-
-
-    // Resize handle
-    .k-spreadsheet .k-resize-handle,
-    .k-spreadsheet .k-resize-hint-handle,
-    .k-spreadsheet .k-resize-hint-marker {
-        background-color: $kendo-color-primary;
-    }
-
-    // Comments
-    .k-spreadsheet-has-comment::after {
-        border-color: $kendo-color-primary $kendo-color-primary transparent transparent;
-    }
-
-    // Validation
-    .k-dirty {
-        border-color: $kendo-color-error transparent transparent $kendo-color-error;
-    }
-
-
-    // Filter button
-    .k-spreadsheet .k-filter-range {
-        border-color: $kendo-color-primary;
-    }
-    .k-spreadsheet-filter {
-        @include fill(
-            $kendo-button-text,
-            $kendo-button-bg,
-            $kendo-button-border,
-            $kendo-button-gradient
-        );
-        box-shadow: inset 0 0 0 1px $kendo-button-border;
-
-        &.k-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-            @include box-shadow( $kendo-button-active-shadow );
-        }
-
-        &:hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-    }
-
-
-    // Filter menu
-    .k-spreadsheet-filter-menu {
-
-        .k-spreadsheet-value-treeview-wrapper {
-            @include fill(
-                $kendo-component-text,
-                $kendo-component-bg,
-                $kendo-component-border
-            );
-        }
-    }
-
-
-    .k-spreadsheet-insert-image-dialog {
-        border-color: $kendo-spreadsheet-insert-image-dialog-preview-border;
-
-        .k-spreadsheet-has-image {
-            &:hover,
-            &.k-hover {
-                box-shadow: $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow;
-            }
-
-            &:hover div,
-            &.k-hover div {
-                color: $kendo-spreadsheet-insert-image-dialog-overlay-hover-text;
-            }
-        }
-    }
-
-    .k-spreadsheet-drawing {
-        &.k-spreadsheet-active-drawing {
-            outline-color: $kendo-spreadsheet-drawing-handle-outline-color;
-        }
-
-        .k-spreadsheet-drawing-handle {
-            border-color: $kendo-spreadsheet-drawing-handle-border-color;
-            background-color: $kendo-spreadsheet-drawing-handle-bg;
-        }
-    }
-
-    .k-spreadsheet-drawing-anchor-cell {
-        background: $kendo-spreadsheet-drawing-anchor-bg;
-    }
-
-
-    .k-spreadsheet-popup {
-
-        // Buttons
-        .k-button {}
-
-        .k-button:hover,
-        .k-button.k-hover {
-            @include fill(
-                $kendo-list-item-hover-text,
-                $kendo-list-item-hover-bg
-            );
-        }
-        .k-button:active,
-        .k-button.k-active,
-        .k-button.k-selected {
-            @include fill(
-                $kendo-list-item-selected-text,
-                $kendo-list-item-selected-bg
-            );
-        }
-    }
-
-
-    .k-rtl .k-spreadsheet,
-    .k-spreadsheet[dir="rtl"],
-    [dir="rtl"] .k-spreadsheet {
-
-        .k-spreadsheet-has-comment::after {
-            border-color: $kendo-color-primary transparent transparent $kendo-color-primary;
-        }
-
-        .k-dirty {
-            border-color: $kendo-color-error $kendo-color-error transparent transparent;
-        }
-
-    }
-
 }

package/scss/spreadsheet/_variables.scss

@@ -11,6 +11,72 @@ $kendo-spreadsheet-bg: $kendo-component-bg !default;
 $kendo-spreadsheet-text: $kendo-component-text !default;
 $kendo-spreadsheet-border: $kendo-component-border !default;
 
+$kendo-spreadsheet-header-bg: $kendo-component-bg !default;
+$kendo-spreadsheet-header-text: $kendo-component-text !default;
+$kendo-spreadsheet-header-border: $kendo-component-border !default;
+$kendo-spreadsheet-header-gradient: null !default;
+
+$kendo-spreadsheet-table-header-bg: material-color( gray, 100 ) !default;
+$kendo-spreadsheet-table-header-text: $kendo-component-header-text !default;
+$kendo-spreadsheet-table-header-border: $kendo-component-header-border !default;
+$kendo-spreadsheet-table-header-gradient: null !default;
+
+$kendo-spreadsheet-action-bar-border-width: 1px !default;
+$kendo-spreadsheet-action-bar-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-action-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-action-bar-font-size: $kendo-spreadsheet-font-size !default;
+$kendo-spreadsheet-action-bar-font-family: Arial, Verdana, sans-serif !default;
+$kendo-spreadsheet-action-bar-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-spreadsheet-formula-bar-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
+$kendo-spreadsheet-formula-input-padding-x: $kendo-input-padding-x !default;
+$kendo-spreadsheet-formula-input-padding-y: $kendo-input-padding-y !default;
+$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
+
+$kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
+$kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
+
+$kendo-spreadsheet-selection-bg: rgba( $kendo-color-primary, .25 ) !default;
+$kendo-spreadsheet-selection-text: null !default;
+$kendo-spreadsheet-selection-border: $kendo-color-primary !default;
+$kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+
+$kendo-spreadsheet-single-selection-bg: $kendo-color-primary !default;
+$kendo-spreadsheet-single-selection-text: null !default;
+$kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
+
+$kendo-spreadsheet-partial-selection-bg: rgba( black, .04 ) !default;
+
+$kendo-spreadsheet-active-cell-bg: $kendo-component-bg !default;
+$kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+
+$kendo-spreadsheet-auto-fill-bg: rgba( $kendo-color-primary, .25 ) !default;
+$kendo-spreadsheet-auto-fill-text: null !default;
+$kendo-spreadsheet-auto-fill-border: $kendo-color-primary !default;
+$kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-color-primary !default;
+$kendo-spreadsheet-auto-fill-punch-bg: rgba( $kendo-component-bg, .5 ) !default;
+
+$kendo-spreadsheet-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-padding-x: $kendo-spreadsheet-cell-padding-y !default;
+
+$kendo-spreadsheet-cell-editor-line-height: 20px !default;
+$kendo-spreadsheet-cell-editor-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-spreadsheet-cell-editor-padding-y: 0px !default;
+$kendo-spreadsheet-cell-editor-bg: $kendo-spreadsheet-bg !default;
+$kendo-spreadsheet-cell-editor-text: $kendo-spreadsheet-text !default;
+$kendo-spreadsheet-cell-editor-border: null !default;
+
+$kendo-spreadsheet-resize-handle-bg: $kendo-color-primary !default;
+
+$kendo-spreadsheet-cell-comment-border: $kendo-color-primary !default;
+
+$kendo-spreadsheet-cell-dirty-border: $kendo-color-error !default;
+
+$kendo-spreadsheet-sheets-bar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-spreadsheet-sheets-bar-border-width: 1px !default;
+
 $kendo-spreadsheet-insert-image-dialog-border-style: dashed !default;
 $kendo-spreadsheet-insert-image-dialog-border-width: 2px !default;
 $kendo-spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;

package/scss/toolbar/_variables.scss

@@ -84,6 +84,10 @@ $kendo-toolbar-input-width: 10em !default;
 /// @group toolbar
 $kendo-toolbar-item-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
 
+/// Border width of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border-width: 1px !default;
+
 /// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (