@progress/kendo-theme-default 5.0.0-next.5 → 5.1.0

package/scss/dropdownlist/_layout.scss

@@ -1,116 +1,36 @@
 @include exports("dropdownlist/layout") {
 
-    .k-dropdown {
-        border-width: 0;
-        outline: 0;
-        background: none;
-        box-sizing: border-box;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+    // Dropdown list
+    .k-dropdown-list {}
 
-        .k-dropdown-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0;
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: pointer;
-            outline: 0;
-
-
-            // Input
-            .k-input {}
-
-
-            // Select
-            .k-select {
-                @include border-right-radius-only( $kendo-input-border-radius );
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
-                border-width: 0;
-                box-sizing: border-box;
-                border-style: solid;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 auto;
-                text-align: center;
-                cursor: pointer;
-            }
-
-            // Clear value
-            .k-clear-value {
-                visibility: hidden;
-            }
-            &.k-state-focused,
-            &.k-state-hover,
-            &:hover {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
-    }
-
-
-    // RTL
-
-    .k-dropdown.k-rtl,
-    .k-dropdown[dir="rtl"],
-    .k-rtl .k-dropdown,
-    [dir="rtl"] .k-dropdown {
-        text-align: right;
-
-        .k-select {
-            @include border-left-radius-only( $kendo-input-border-radius );
-        }
-    }
 
+    // Native select
+    select.k-dropdown-list {}
 
 
     // Dropdown operator
     .k-dropdown-operator {
-        width: auto;
+        width: min-content;
+        flex: none;
+        aspect-ratio: 1;
 
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $kendo-button-inner-calc-size;
-                height: $kendo-button-inner-calc-size;
-            }
+        .k-input-button {
+            border-width: 0;
+        }
+        .k-input-button .k-button-icon {
+            width: auto;
+            aspect-ratio: 1;
         }
 
+        .k-input-inner {
+            display: none;
+        }
     }
 
-
-    // Native select
-    select.k-dropdown {
-        @include border-radius( $kendo-input-border-radius );
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
-        border-width: 1px;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        transition: all .1s ease; // sass-lint:disable-block no-transition-all
-        cursor: pointer;
+    // Alias
+    .k-dropdown,
+    .k-dropdownlist {
+        @extend .k-dropdown-list !optional;
     }
 
 }

package/scss/dropdownlist/_theme.scss

@@ -1,97 +1,9 @@
 @include exports( "dropdownlist/theme" ) {
 
-    .k-dropdown {
-
-        .k-dropdown-wrap {
-            @include fill(
-                $dropdownlist-text,
-                $dropdownlist-bg,
-                $dropdownlist-border,
-                $dropdownlist-gradient
-            );
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $dropdownlist-hovered-text,
-                    $dropdownlist-hovered-bg,
-                    $dropdownlist-hovered-border,
-                    $dropdownlist-hovered-gradient
-                );
-            }
-
-            &.k-state-active {}
-
-            // Focused state
-            &.k-state-focused {
-                @include fill(
-                    $dropdownlist-focused-text,
-                    $dropdownlist-focused-bg,
-                    $dropdownlist-focused-border,
-                    $dropdownlist-focused-gradient
-                );
-                @include box-shadow($dropdownlist-focused-shadow);
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            > .k-dropdown-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
+    // Dropdown list
+    .k-dropdown-list {}
 
     // Native select
-    select.k-dropdown {
-        @include fill(
-            $dropdownlist-text,
-            $dropdownlist-bg,
-            $dropdownlist-border,
-            $dropdownlist-gradient
-        );
-
-        // Hover state
-        &:hover {
-            @include fill(
-                $dropdownlist-hovered-text,
-                $dropdownlist-hovered-bg,
-                $dropdownlist-hovered-border,
-                $dropdownlist-hovered-gradient
-            );
-        }
-
-        // Focused state
-        &:focus {
-            @include fill(
-                $dropdownlist-focused-text,
-                $dropdownlist-focused-bg,
-                $dropdownlist-focused-border,
-                $dropdownlist-focused-gradient
-            );
-            @include box-shadow($dropdownlist-focused-shadow);
-        }
-    }
+    select.k-dropdown-list {}
 
 }

package/scss/dropdowntree/_layout.scss

@@ -1,28 +1,19 @@
 @include exports("dropdowntree/layout") {
 
-    .k-dropdowntree {
-        @extend .k-multiselect;
-        @extend .k-dropdown;
-    }
+    // Dropdown tree
+    .k-dropdown-tree {}
 
     // Dropdowntree popup
     .k-popup-dropdowntree {
         padding: 0;
 
-        .k-list-filter {
-            box-shadow: $dropdowntree-filter-shadow;
-            margin: 0 0 $dropdowntree-filter-spacer;
-        }
-
         .k-check-all {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x 0;
-        }
-        .k-list-filter .k-check-all {
-            padding-top: 0;
+            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
         }
 
         .k-treeview {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x;
+            padding: $dropdowntree-popup-padding-y $dropdowntree-popup-padding-x;
         }
     }
+
 }

package/scss/dropdowntree/_theme.scss

@@ -1,5 +1,6 @@
 @include exports("dropdowntree/theme") {
 
-    // Dropdown tree doesn't need any theme, because it extends dropdown list and multiselects
+    // Dropdown tree
+    .k-dropdown-tree {}
 
 }

package/scss/dropdowntree/_variables.scss

@@ -1,5 +1,3 @@
 // Dropdowntree
-$dropdowntree-popup-spacer-x: $padding-y-lg !default;
-$dropdowntree-popup-spacer-y: $dropdowntree-popup-spacer-x !default;
-$dropdowntree-filter-shadow: $popup-shadow !default;
-$dropdowntree-filter-spacer: $dropdowntree-popup-spacer-y !default;
+$dropdowntree-popup-padding-x: map-get( $spacing, 2 ) !default;
+$dropdowntree-popup-padding-y: map-get( $spacing, 2 ) !default;

package/scss/dropzone/_layout.scss

@@ -41,20 +41,4 @@
         }
     }
 
-
-    // No flexbox
-    .k-no-flexbox {
-        .k-dropzone-inner {
-            padding-top: ( $dropzone-padding-y * 6 );
-            padding-bottom: ( $dropzone-padding-y * 6 );
-            width: 100%;
-            height: 100%;
-        }
-
-        .k-dropzone-hint,
-        .k-dropzone-note {
-            display: block;
-        }
-    }
-
 }

package/scss/editor/_layout.scss

@@ -68,7 +68,92 @@
         overflow: auto;
     }
 
+    // Resizable images
+    .k-editor-resize-handles-wrapper {
+        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;
+        border-style: solid;
+        box-sizing: border-box;
+        position: absolute;
+        visibility: visible;
+        z-index: 100;
+
+        &.northwest {
+            top: 0;
+            left: 0;
+            transform: translate(-50%, -50%);
+            cursor: nw-resize;
+        }
+
+        &.north {
+            top: 0;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            cursor: n-resize;
+        }
+
+        &.northeast {
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            cursor: ne-resize;
+        }
+
+        &.southwest {
+            left: 0;
+            bottom: 0;
+            transform: translate(-50%, 50%);
+            cursor: sw-resize;
+        }
+
+        &.south {
+            bottom: 0;
+            left: 50%;
+            transform: translate(-50%, 50%);
+            cursor: s-resize;
+        }
+
+        &.southeast {
+            right: 0;
+            bottom: 0;
+            transform: translate(50%, 50%);
+            cursor: se-resize;
+        }
+
+        &.west {
+            top: 50%;
+            left: 0;
+            transform: translate(-50%, -50%);
+            cursor: w-resize;
+        }
+
+        &.east {
+            top: 50%;
+            right: 0;
+            transform: translate(50%, -50%);
+            cursor: e-resize;
+        }
+    }
+    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
+        outline-width: $editor-selectednode-outline-width;
+        outline-style: solid;
+    }
+    .ProseMirror-hideselection { // sass-lint:disable-line class-name-format
+        caret-color: transparent;
+
+        *::selection,
+        *::-moz-selection {
+            background: transparent;
+        }
+    }
+
     // Toolbar
+    .k-editor-toolbar,
     .k-editor > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
         flex-shrink: 0;
@@ -79,13 +164,6 @@
     .k-editor-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
 
-        // Group
-        .k-tool-group {
-            .k-widget ~ .k-widget {
-                margin-inline-start: $toolbar-spacing;
-            }
-        }
-
         // Tool
         .k-tool {
             padding: $kendo-button-padding-y;
@@ -103,13 +181,10 @@
             top: 0;
             right: 0;
             visibility: hidden;
-        }
-        .k-overflow-anchor {
-            border-width: 0;
-            padding: $toolbar-padding-y;
-            width: $toolbar-inner-calc-size;
-            height: $toolbar-inner-calc-size;
-            position: relative;
+
+            .k-overflow-anchor {
+                position: relative;
+            }
         }
 
         .k-editor-export {
@@ -141,6 +216,7 @@
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;
@@ -161,26 +237,13 @@
             }
         }
     }
-
-
-    // Editable area
-    .k-editable-area {
+    td.k-editor-content {
         padding: $kendo-input-padding-y;
         width: 100%;
         height: 100%;
         border-width: 0;
         outline: 0;
 
-        iframe.k-content {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            border-width: 0;
-            background: none;
-            display: block;
-        }
-
         .k-resizable & {
             padding: $kendo-input-padding-y $kendo-input-padding-y 16px;
         }
@@ -239,15 +302,6 @@
         }
     }
 
-    .k-editor-widget .k-colorpicker {}
-
-    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
-        padding-left: 0;
-
-        .k-select {
-            border-width: 0;
-        }
-    }
 
     // Find and replace dialog
     .k-editor-find-replace {
@@ -271,10 +325,6 @@
             display: flex;
             flex-direction: column;
             padding: 10px 0 40px;
-
-            > span {
-                padding-bottom: $padding-y;
-            }
         }
 
         .k-matches-container {
@@ -309,8 +359,6 @@
         .k-edit-field {
             width: 66%;
         }
-
-        .k-edit-buttons {}
     }
 
     // View HTML dialog using flex to fit child textarea
@@ -507,42 +555,27 @@
             }
         }
 
-        .k-colorpicker {
-            vertical-align: middle;
-        }
+        // Generic widgets
+        .k-numerictextbox {
+            width: 10em;
 
-        .k-edit-field > .k-checkbox {
-            position: relative; // fix scrolling
-        }
+            & + .k-dropdown-list {
+                width: 5em;
+            }
 
-        // Align
-        .k-dropdown.k-align {
-            width: auto;
+            & + .k-color-picker,
+            & + .k-dropdown-list {
+                margin-left: map-get( $spacing, 2 );
+            }
         }
-    }
-
-
-    .k-popup.k-align {
 
-        .k-list {
-            display: flex;
-            flex-flow: row wrap;
+        .k-color-picker {
+            vertical-align: middle;
         }
-        .k-list .k-item {
-            padding: $kendo-button-padding-y;
-            height: $kendo-button-calc-size;
-            box-sizing: border-box;
-            justify-content: center;
-            flex: 1 0 33%;
 
-            .k-icon {
-                margin: 0;
-            }
-        }
-        .k-list .k-item:last-child {
-            flex: 1 0 100%;
+        .k-edit-field > .k-checkbox {
+            position: relative; // fix scrolling
         }
-
     }
 
     .k-editor-inline {

package/scss/editor/_theme.scss

@@ -52,6 +52,15 @@
         }
     }
 
+    // Resizable images
+    .k-editor-resize-handle {
+        background-color: $editor-resize-handle-bg;
+        border-color: $editor-resize-handle-border;
+    }
+    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
+        outline-color: $editor-selectednode-outline-color;
+    }
+
 
     // Insert table
     .k-ct-popup {

package/scss/editor/_variables.scss

@@ -13,3 +13,11 @@ $editor-selected-bg: $primary !default;
 $editor-highlighted-bg: mix($primary, #ffffff, 20%) !default;
 
 $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;
+
+$editor-selectednode-outline-width: 2px !default;
+$editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex-length

package/scss/expansion-panel/_index.scss

@@ -6,6 +6,7 @@
 @import "../utils/_display.scss";
 @import "../utils/_spacer.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/expansion-panel/_layout.scss

@@ -15,6 +15,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
@@ -54,7 +60,6 @@
     // Expander content
     .k-expander-content {
         padding: $expander-content-padding-y $expander-content-padding-x;
-        box-sizing: border-box;
     }
 
     // Multiple expanders

package/scss/expansion-panel/_variables.scss

@@ -14,7 +14,7 @@ $expander-bg: $component-bg !default;
 $expander-text: $component-text !default;
 $expander-border: $component-border !default;
 
-$expander-focus-shadow: $list-item-focused-shadow !default;
+$expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-header-bg: transparent !default;
 $expander-header-text: $expander-text !default;
@@ -23,7 +23,7 @@ $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: $list-item-focused-shadow !default;
+$expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;