@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/editor/_layout.scss

@@ -2,42 +2,21 @@
 
     // Base
     .k-editor {
-        border-width: $editor-border-width;
+        border-width: $kendo-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $editor-font-family;
-        font-size: $editor-font-size;
-        line-height: $editor-line-height;
+        font-family: $kendo-editor-font-family;
+        font-size: $kendo-editor-font-size;
+        line-height: $kendo-editor-line-height;
         display: flex;
         flex-flow: column nowrap;
         position: relative;
+        z-index: 1;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-    }
-    table.k-editor {
-        width: 100%;
-        display: table;
-        vertical-align: top;
-        table-layout: fixed;
-        border-collapse: separate;
-        border-spacing: 0;
-
-        tbody,
-        tr,
-        td {
-            border-color: inherit;
-        }
-    }
-
-    kendo-editor {
-        .k-editor-content {
-            z-index: 1;
-        }
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.k-readonly {
-            @include disabled( $disabled-styling );
-            > .k-content,
             .k-editor-content {
                 pointer-events: auto;
             }
@@ -52,15 +31,12 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $padding-y-sm $padding-x-sm;
+        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
         background: none;
     }
-    .k-window.k-editor-widget {
-        padding: 0;
-    }
 
     // Resizable editor
     .k-editor-resizable {
@@ -73,10 +49,11 @@
         position: absolute;
         visibility: hidden;
     }
+
     .k-editor-resize-handle {
-        width: $editor-resize-handle-size;
-        height: $editor-resize-handle-size;
-        border-width: $editor-resize-handle-border-width;
+        width: $kendo-editor-resize-handle-size;
+        height: $kendo-editor-resize-handle-size;
+        border-width: $kendo-editor-resize-handle-border-width;
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
@@ -141,7 +118,7 @@
     }
 
     .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
-        outline-width: $editor-selectednode-outline-width;
+        outline-width: $kendo-editor-selectednode-outline-width;
         outline-style: solid;
 
     }
@@ -154,44 +131,15 @@
         }
     }
 
-    // Toolbar
-    .k-editor-toolbar,
-    .k-editor > .k-toolbar {
-        border-width: 0 0 $toolbar-border-width 0;
-        flex-shrink: 0;
-    }
 
-
-    // jQuery toolbar
+    // Тoolbar
     .k-editor-toolbar {
-        border-width: 0 0 $toolbar-border-width 0;
-
-        // Tool
-        .k-tool {
-            padding: $kendo-button-padding-y;
-            width: $kendo-button-calc-size;
-            height: $kendo-button-calc-size;
-        }
-        .k-tool-text {
-            display: none;
-        }
-
-        // Overflow tools
-        .k-overflow-tools {
-            margin: 0;
-            position: absolute;
-            top: 0;
-            right: 0;
-            visibility: hidden;
-
-            .k-overflow-anchor {
-                position: relative;
-            }
-        }
+        border-width: 0 0 $kendo-toolbar-border-width 0;
+        flex-shrink: 0;
 
         .k-editor-export {
             .k-icon {
-                margin-right: $editor-export-tool-icon-margin-x;
+                margin-right: $kendo-editor-export-tool-icon-margin-x;
             }
 
             .k-icon,
@@ -214,7 +162,7 @@
         }
 
         > .ProseMirror { // sass-lint:disable-line class-name-format
-            padding: $padding-x;
+            padding: $kendo-padding-md-x;
             width: 100%;
             height: 100%;
             position: relative;
@@ -230,9 +178,9 @@
             .k-placeholder::before {
                 content: attr(data-placeholder);
                 height: 0;
-                color: $editor-placeholder-text;
+                color: $kendo-editor-placeholder-text;
                 float: left;
-                opacity: $editor-placeholder-opacity;
+                opacity: $kendo-editor-placeholder-opacity;
                 cursor: text;
                 user-select: none;
             }
@@ -257,25 +205,60 @@
                 }
             }
         }
-    }
 
-    td.k-editor-content {
-        padding: $kendo-input-padding-y;
-        width: 100%;
-        height: 100%;
-        border-width: 0;
-        outline: 0;
+        // Table styles
+        p {
+            margin: 0 0 1rem;
+        }
+
+        td p,
+        th p,
+        li p {
+            margin: 0;
+        }
+
+        table {
+            margin: 0;
+            border-collapse: collapse;
+            table-layout: fixed;
+            width: 100%;
+            overflow: hidden;
+        }
+
+        td,
+        th {
+            min-width: 1em;
+            border: 1px solid;
+            padding: 3px 5px;
+            vertical-align: top;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        th {
+            font-weight: bold;
+            text-align: left;
+        }
 
-        .k-resizable & {
-            padding: $kendo-input-padding-y $kendo-input-padding-y 16px;
+        // Give selected cells a blue overlay
+        .selectedCell::after { // sass-lint:disable-line class-name-format
+            z-index: 2;
+            position: absolute;
+            content: "";
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            pointer-events: none;
         }
     }
 
+
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$window-inner-padding-y) (-$window-inner-padding-x);
-        padding: $window-inner-padding-y $window-inner-padding-x;
+        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
+        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
     }
 
 
@@ -284,8 +267,8 @@
     // Insert table
     .k-ct-popup {
         box-sizing: border-box;
-        width: $ct-cell-size * 10 - ($ct-cell-size / 2);
-        padding: $ct-cell-size / 4;
+        width: $ct-cell-size * 10 - k-math-div( $ct-cell-size, 2 );
+        padding: k-math-div( $ct-cell-size, 4 );
 
         .k-button {
             width: 100%;
@@ -332,14 +315,6 @@
             position: relative;
         }
 
-        .k-edit-form-container {
-            display: inline-block;
-
-            .k-edit-label {
-                text-align: left;
-            }
-        }
-
         .k-actions {
             padding: 0;
         }
@@ -366,30 +341,6 @@
 
 @include exports( "editor/dialog/layout" ) {
 
-
-    .k-editor-dialog {
-        box-sizing: border-box;
-
-        .k-edit-form-container {
-            width: auto;
-        }
-
-        .k-edit-label {
-            width: 30%;
-            padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
-        }
-
-        .k-edit-field {
-            width: 66%;
-        }
-    }
-
-    // View HTML dialog using flex to fit child textarea
-    .k-editor-dialog.k-viewhtml-dialog {
-        display: flex;
-        flex-direction: column;
-    }
-
     // Text area in editor dialog
     .k-textarea.k-editor-textarea {
         width: 100%;
@@ -401,29 +352,9 @@
 
 
 
-
 @include exports( "editor/filebrowser/layout" ) {
 
 
-    .k-filebrowser-dialog {
-        display: flex;
-
-        .k-edit-form-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-
-        }
-
-        .k-edit-label {
-            width: 18%;
-        }
-
-        .k-edit-field {
-            width: 75%;
-        }
-    }
-
     .k-filebrowser {
         max-width: 100%;
 
@@ -437,7 +368,7 @@
             flex: 1;
         }
         .k-search-wrap {
-            margin: 0 0 0 $spacer-x;
+            margin: 0 0 0 k-map-get( $kendo-spacing, 4 );
             width: 150px;
             display: flex;
             align-items: center;
@@ -454,7 +385,7 @@
 
         // Filebrowser toolbar
         .k-filebrowser-toolbar {
-            margin: $spacer-y 0 0 0;
+            margin: k-map-get( $kendo-spacing, 4 ) 0 0 0;
         }
 
         .k-upload {
@@ -481,8 +412,8 @@
             flex-flow: row wrap;
             height: 390px;
             max-height: 50vh;
-            margin: 0 0 $spacer-y 0;
-            padding: $padding-y $padding-x;
+            margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -490,7 +421,7 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $padding-y $padding-x;
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -534,7 +465,7 @@
 
         .k-thumb {
             float: left;
-            margin-right: $padding-x-sm;
+            margin-right: $kendo-padding-sm-x;
         }
 
         .k-breadcrumbs-wrap {
@@ -556,15 +487,7 @@
 
 @include exports( "editor/table-wizard/layout" ) {
 
-    .k-editor-table-wizard-dialog {
-        display: flex;
-
-        // Edit form
-        .k-edit-form-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 1 auto;
-        }
+    .k-editor-table-wizard-window {
 
         // Tabstrip wrapper
         .k-tabstrip-wrapper {
@@ -588,7 +511,7 @@
 
             & + .k-color-picker,
             & + .k-dropdown-list {
-                margin-left: map-get( $spacing, 2 );
+                margin-left: k-map-get( $kendo-spacing, 2 );
             }
         }
 
@@ -617,7 +540,7 @@
 
             td {
                 min-width: 1px;
-                padding: $padding-y-sm $padding-x-sm;
+                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
             }
         }
 

package/scss/editor/_theme.scss

@@ -2,16 +2,14 @@
 
     .k-editor {
         @include fill(
-            $component-text,
-            $component-bg,
-            $component-border
+            $kendo-component-text,
+            $kendo-component-bg,
+            $kendo-component-border
         );
-    }
 
-    kendo-editor {
         &.k-readonly {
             .k-editor-content.k-focus {
-                outline-color: $body-text;
+                outline-color: $kendo-body-text;
             }
         }
     }
@@ -45,28 +43,28 @@
             }
         }
 
-        // Hover & Actve state
+        // Hover & Active state
         &:hover,
-        &.k-active,
+        &.k-hover,
         &.k-active {
-            border-color: $panel-border;
+            border-color: $kendo-component-border;
         }
     }
 
     // Resizable images
     .k-editor-resize-handle {
-        background-color: $editor-resize-handle-bg;
-        border-color: $editor-resize-handle-border;
+        background-color: $kendo-editor-resize-handle-bg;
+        border-color: $kendo-editor-resize-handle-border;
     }
     .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
-        outline-color: $editor-selectednode-outline-color;
+        outline-color: $kendo-editor-selectednode-outline-color;
     }
 
 
     // Insert table
     .k-ct-popup {
         .k-selected {
-            @include fill( $selected-text, $selected-bg, $selected-border, none );
+            @include fill( $kendo-selected-text, $kendo-selected-bg, $kendo-selected-border, none );
         }
     }
 
@@ -77,16 +75,26 @@
         .k-text-selected,
         &::selection {
             @include fill (
-                $color: $editor-selected-text,
-                $bg: $editor-selected-bg
+                $color: $kendo-editor-selected-text,
+                $bg: $kendo-editor-selected-bg
             );
         }
 
         .k-text-highlighted {
             @include fill (
-                $bg: $editor-highlighted-bg
+                $bg: $kendo-editor-highlighted-bg
             );
         }
+
+        // Table styles
+        td,
+        th {
+            border-color: #dddddd;
+        }
+
+        .selectedCell::after { // sass-lint:disable-line class-name-format
+            background-color: rgba(200, 200, 255, .4);
+        }
     }
 
 }

package/scss/editor/_variables.scss

@@ -1,23 +1,23 @@
 // Editor
-$editor-border-width: 1px !default;
-$editor-font-family: $font-family !default;
-$editor-font-size: $font-size !default;
-$editor-line-height: $line-height !default;
+$kendo-editor-border-width: 1px !default;
+$kendo-editor-font-family: $font-family !default;
+$kendo-editor-font-size: $font-size !default;
+$kendo-editor-line-height: $line-height !default;
 
-$editor-placeholder-text: $kendo-input-placeholder-text !default;
-$editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
+$kendo-editor-placeholder-text: $kendo-input-placeholder-text !default;
+$kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
-$editor-selected-text: $primary-contrast !default;
-$editor-selected-bg: $primary !default;
+$kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+$kendo-editor-selected-bg: $kendo-color-primary !default;
 
-$editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
+$kendo-editor-highlighted-bg: k-color-mix($kendo-color-primary, #ffffff, 20%) !default;
 
-$editor-export-tool-icon-margin-x: .25em !default;
+$kendo-editor-export-tool-icon-margin-x: .25em !default;
 
-$editor-resize-handle-size: 8px !default;
-$editor-resize-handle-border-width: 1px !default;
-$editor-resize-handle-border: #000000 !default;
-$editor-resize-handle-bg: #ffffff !default;
+$kendo-editor-resize-handle-size: 8px !default;
+$kendo-editor-resize-handle-border-width: 1px !default;
+$kendo-editor-resize-handle-border: #000000 !default;
+$kendo-editor-resize-handle-bg: #ffffff !default;
 
-$editor-selectednode-outline-width: 2px !default;
-$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length
+$kendo-editor-selectednode-outline-width: 2px !default;
+$kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

package/scss/expansion-panel/_index.scss

@@ -3,13 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_display.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_display.scss";
+// @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/expansion-panel/_layout.scss

@@ -13,7 +13,7 @@
         display: flex;
         flex-direction: column;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/expansion-panel/_theme.scss

@@ -8,7 +8,7 @@
         );
 
         &.k-focus {
-            box-shadow: $expander-focus-shadow;
+            @include focus-indicator( $expander-focus-shadow, true );
         }
     }
 
@@ -26,8 +26,8 @@
         }
 
         &.k-focus {
-            background-color: $expander-header-focused-bg;
-            box-shadow: $expander-header-focused-shadow;
+            background-color: $expander-header-focus-bg;
+            @include focus-indicator( $expander-header-focus-shadow, true );
         }
     }
 

package/scss/expansion-panel/_variables.scss

@@ -1,18 +1,18 @@
 // Expansion panel
-$expander-spacing-y: $padding-y * 2 !default;
+$expander-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
 $expander-font-family: $font-family !default;
 $expander-font-size: $font-size !default;
 $expander-line-height: $line-height !default;
 $expander-border-width: 1px !default;
 
-$expander-header-padding-x: $header-padding-x * 2 !default;
-$expander-header-padding-y: $header-padding-y * 1.5 !default;
+$expander-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$expander-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 
-$expander-indicator-margin-x: $padding-x * 1.5 !default;
+$expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
 
-$expander-bg: $component-bg !default;
-$expander-text: $component-text !default;
-$expander-border: $component-border !default;
+$expander-bg: $kendo-component-bg !default;
+$expander-text: $kendo-component-text !default;
+$expander-border: $kendo-component-border !default;
 
 $expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
@@ -22,12 +22,12 @@ $expander-header-border: null !default;
 
 $expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
 
-$expander-header-focused-bg: null !default;
-$expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
+$expander-header-focus-bg: null !default;
+$expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$expander-title-text: $primary !default;
+$expander-title-text: $kendo-color-primary !default;
 
-$expander-header-sub-title-text: $subtle-text !default;
+$expander-header-sub-title-text: $kendo-subtle-text !default;
 
-$expander-content-padding-x: $padding-x * 2 !default;
-$expander-content-padding-y: $padding-y * 4 !default;
+$expander-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;

package/scss/fab/_index.scss

@@ -3,13 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_position.scss";
+// @import "../utils/_position.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../badge/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/fab/_layout.scss

@@ -57,14 +57,6 @@
         padding: $kendo-fab-padding-y-lg $kendo-fab-padding-x-lg;
     }
 
-    // Shapes
-    .k-fab-rectangle { }
-
-    .k-fab-square {
-        aspect-ratio: 1;
-    }
-
-
     // Items
     .k-fab-items {
         margin: 0;
@@ -88,7 +80,7 @@
 
     .k-fab-item {
         list-style-type: none;
-        margin-bottom: map-get( $spacing, 2 );
+        margin-bottom: k-map-get( $kendo-spacing, 2 );
         outline: none;
         white-space: nowrap;
         display: flex;
@@ -100,14 +92,14 @@
             flex-direction: row;
 
             .k-fab-item-text {
-                margin-right: map-get( $spacing, 2 );
+                margin-right: k-map-get( $kendo-spacing, 2 );
             }
         }
         &.k-text-left {
             flex-direction: row-reverse;
 
             .k-fab-item-text {
-                margin-left: map-get( $spacing, 2 );
+                margin-left: k-map-get( $kendo-spacing, 2 );
             }
         }
     }
@@ -141,8 +133,8 @@
 
         .k-fab-icon {
             &:not(:only-child) {
-                margin-right: -$icon-spacing;
-                margin-left: $icon-spacing;
+                margin-right: -$kendo-icon-spacing;
+                margin-left: $kendo-icon-spacing;
             }
         }
     }
@@ -159,4 +151,3 @@
     }
 
 }
-