@progress/kendo-theme-default 4.42.0 → 5.0.0-alpha.1

package/scss/editor/_layout.scss

@@ -68,6 +68,89 @@
         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;
+        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 > .k-toolbar {
         border-width: 0 0 $toolbar-border-width 0;
@@ -88,9 +171,9 @@
 
         // Tool
         .k-tool {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
         }
         .k-tool-text {
             display: none;
@@ -141,6 +224,7 @@
             padding: $padding-x;
             width: 100%;
             height: 100%;
+            position: relative;
             box-sizing: border-box;
             outline: none;
             white-space: pre-wrap;
@@ -165,7 +249,7 @@
 
     // Editable area
     .k-editable-area {
-        padding: $input-padding-y;
+        padding: $kendo-input-padding-y;
         width: 100%;
         height: 100%;
         border-width: 0;
@@ -182,7 +266,7 @@
         }
 
         .k-resizable & {
-            padding: $input-padding-y $input-padding-y 16px;
+            padding: $kendo-input-padding-y $kendo-input-padding-y 16px;
         }
     }
 
@@ -239,16 +323,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 {
         .k-content {
@@ -303,7 +377,7 @@
 
         .k-edit-label {
             width: 30%;
-            padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
+            padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
         }
 
         .k-edit-field {
@@ -468,8 +542,8 @@
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            left: $input-padding-x;
-            top: $input-padding-y;
+            left: $kendo-input-padding-x;
+            top: $kendo-input-padding-y;
 
             .k-icon {
                 position: static;
@@ -507,37 +581,9 @@
             }
         }
 
-        // Generic widgets
-        .k-numerictextbox {
-            width: 10em;
-
-            & + .k-dropdown {
-                width: 4em;
-            }
-
-            & + .k-colorpicker,
-            & + .k-dropdown {
-                margin-left: $padding-x-sm;
-            }
-        }
-
-        .k-colorpicker {
-            vertical-align: middle;
-        }
-
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }
-
-        // Align
-        .k-dropdown.k-align {
-            width: auto;
-        }
-
-        // Summary textarea
-        .k-textbox.k-editor-accessibility-summary {
-            height: auto;
-        }
     }
 
 
@@ -548,8 +594,8 @@
             flex-flow: row wrap;
         }
         .k-list .k-item {
-            padding: $button-padding-y;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             justify-content: center;
             flex: 1 0 33%;

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

@@ -4,8 +4,8 @@ $editor-font-family: $font-family !default;
 $editor-font-size: $font-size !default;
 $editor-line-height: $line-height !default;
 
-$editor-placeholder-text: $input-placeholder-text !default;
-$editor-placeholder-opacity: $input-placeholder-opacity !default;
+$editor-placeholder-text: $kendo-input-placeholder-text !default;
+$editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 $editor-selected-text: $primary-contrast !default;
 $editor-selected-bg: $primary !default;
@@ -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: 5px !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/fab/_variables.scss

@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;

package/scss/filter/_layout.scss

@@ -39,10 +39,6 @@
             .k-toolbar {
                 border-style: solid;
             }
-
-            .k-filter-operator .k-dropdown {
-                width: $filter-operator-dropdown-width;
-            }
         }
 
         .k-filter-item {

package/scss/floating-label/_layout.scss

@@ -2,10 +2,8 @@
 
 
     // Floating label
-    .k-textbox-container,
     .k-floating-label-container {
         padding-top: $floating-label-height;
-        width: $input-default-width;
         display: inline-flex;
         vertical-align: middle;
         position: relative;
@@ -28,7 +26,6 @@
             pointer-events: none;
         }
 
-        > .k-textbox,
         > .k-widget {
             flex: 1 1 auto;
             width: auto;

package/scss/floating-label/_theme.scss

@@ -1,8 +1,6 @@
 @include exports( "floating-label/theme" ) {
 
     // Floating label
-    .k-textbox-container,
-    .k-textarea-container,
     .k-floating-label-container {
 
         > .k-label {

package/scss/floating-label/_variables.scss

@@ -1,10 +1,10 @@
 // Floating label
 $floating-label-scale: 1 !default;
-$floating-label-font-size: $input-font-size !default;
-$floating-label-line-height: $input-line-height !default;
+$floating-label-font-size: $kendo-input-font-size !default;
+$floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: calc( #{$input-padding-x} + #{$input-border-width} ) !default;
-$floating-label-offset-y: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} ) !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
+$floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: 1 !default;
 $floating-label-focus-offset-x: 0 !default;

package/scss/forms/_layout.scss

@@ -106,16 +106,12 @@
         }
 
         .k-form-field,
-        .k-form-buttons,
-        .k-daterangepicker .k-textbox-container {
+        .k-form-buttons {
             margin-top: $form-field-margin-top;
         }
 
-        > *,
-        .k-daterangepicker .k-textbox-container {
-            &:first-child {
-                margin-top: 0;
-            }
+        > &:first-child {
+            margin-top: 0;
         }
 
 
@@ -144,28 +140,17 @@
             margin: 0 $padding-x;
         }
 
-        .k-textbox,
-        .k-textarea,
-        .k-autocomplete,
-        .k-combobox,
-        .k-dropdown,
+
         .k-multiselect,
         .k-dateinput,
         .k-datepicker,
         .k-datetimepicker,
         .k-daterangepicker-wrap,
         .k-timepicker,
-        .k-numerictextbox,
-        .k-maskedtextbox,
-        .k-textbox-container,
         .k-floating-label-container {
-            display: flex;
+            display: inline-flex;
             width: 100%;
         }
-
-        .k-editor .k-dropdown {
-            width: $input-default-width;
-        }
     }
 
     // Form Buttons Container
@@ -220,6 +205,7 @@
                 margin-right: $horizontal-form-label-margin-x;
                 padding-top: $horizontal-form-label-padding-top;
                 width: $horizontal-form-label-width;
+                text-align: end;
                 flex-direction: column;
                 align-items: $horizontal-form-label-align;
                 justify-content: flex-start;
@@ -319,7 +305,7 @@
                 width: $inline-form-element-width;
                 text-align: right;
                 line-height: $line-height;
-                padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
+                padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
                 padding-right: $padding-x-lg;
                 align-self: center;
             }
@@ -406,7 +392,7 @@
 
     .k-edit-label {
         margin: 0 0 $spacer-y 0;
-        padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
+        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $form-line-height;
         text-align: right;
@@ -421,21 +407,16 @@
         position: relative;
 
         &.k-no-editor {
-            padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
+            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         }
     }
 
     .k-edit-field {
 
-        > .k-widget,
-        > .k-textbox,
-        > .k-textarea {
+        > .k-widget {
             width: 100%;
             box-sizing: border-box;
         }
-        > .k-colorpicker {
-            width: auto;
-        }
 
         input[type="radio"]:not(.k-radio),
         input[type="checkbox"]:not(.k-checkbox) {

package/scss/gantt/_layout.scss

@@ -218,9 +218,9 @@
             }
             .k-gantt-pdf,
             .k-gantt-create {
-                padding: $button-padding-y;
-                width: $button-calc-size;
-                height: $button-calc-size;
+                padding: $kendo-button-padding-y;
+                width: $kendo-button-calc-size;
+                height: $kendo-button-calc-size;
 
                 .k-button-icon {}
                 .k-button-text {

package/scss/grid/_layout.scss

@@ -1,17 +1,17 @@
 @include exports("grid/layout") {
 
-    $filter-rows-span-size: calc( #{$line-height-em} + #{$input-padding-y * 2} + #{$input-border-width * 2}) !default;
+    $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-width * 2}) !default;
 
     $grid-group-dropclue-size: 6px;
     $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
-    $grid-group-dropclue-height: $button-calc-size !default;
+    $grid-group-dropclue-height: $kendo-button-calc-size !default;
     $grid-group-dropclue-top: 3px !default;
 
     $grid-row-inner-height: calc( #{$line-height-em} + #{$table-cell-padding-y * 2} );
     // $grid-row-half-inner-height: calc( #{$line-height-em / 2} + #{$table-cell-padding-y} );
 
     // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
-    $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$button-calc-size} - #{$line-height-em}) / 2 ) !default;
+    $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
 
     $grid-form-component-vertical-align: middle !default;
     $grid-hierarchy-col-width: ($icon-size * 2) !default;
@@ -27,7 +27,7 @@
     $grid-sorted-icon-spacing: calc( #{$padding-x} - 1px ) !default;
 
     // helper variables
-    $grid-filterable-icon-spacing: calc( #{$button-calc-size} + #{$grid-header-menu-icon-spacing} );
+    $grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$grid-header-menu-icon-spacing} );
 
     .k-grid {
         border-width: $grid-border-width;
@@ -416,12 +416,6 @@
     }
 
 
-    // Grid search
-    .k-grid-search {
-        width: $grid-search-width;
-    }
-
-
     // Grouping header
     .k-grouping-header {
         padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
@@ -435,7 +429,7 @@
 
         &::before {
             content: "";
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             display: inline-block;
             vertical-align: middle;
         }
@@ -468,7 +462,7 @@
     .k-group-indicator {
         @include border-radius( $grid-group-indicator-border-radius );
         margin: 0;
-        padding: $button-padding-y $button-padding-x;
+        padding: $kendo-button-padding-y $kendo-button-padding-x;
         border-width: 1px;
         border-style: solid;
         display: inline-flex;
@@ -639,7 +633,7 @@
             padding-right: $grid-filterable-icon-spacing;
 
             .k-ie & {
-                padding-right: calc( #{ $button-calc-size } + #{ $grid-header-menu-icon-spacing });
+                padding-right: calc( #{ $kendo-button-calc-size } + #{ $grid-header-menu-icon-spacing });
             }
         }
 
@@ -649,9 +643,9 @@
 
         .k-grid-filter,
         .k-header-column-menu {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             outline: 0;
             line-height: $form-line-height;
@@ -661,15 +655,15 @@
             justify-content: center;
             position: absolute;
             right: $grid-header-menu-icon-spacing;
-            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $button-inner-calc-size / 2 } );
+            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $kendo-button-inner-calc-size / 2 } );
             z-index: 1;
 
             .k-ie & {
                 position: static;
                 float: right;
-                margin-top: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-bottom: calc( (#{ $button-calc-size } - #{ $form-line-height * 1em}) / -2);
-                margin-right: calc( -1 * #{ $button-calc-size });
+                margin-top: calc( (#{ $kendo-button-calc-size } - #{ $form-line-height * 1em}) / -2);
+                margin-bottom: calc( (#{ $kendo-button-calc-size } - #{ $form-line-height * 1em}) / -2);
+                margin-right: calc( -1 * #{ $kendo-button-calc-size });
             }
 
             &:hover {
@@ -781,30 +775,10 @@
             width: 100%;
         }
 
-        > span {
-            .k-button {
-                visibility: visible;
-                pointer-events: all;
-            }
-
-            .k-button,
-            .k-dropdown-operator {
-                margin-left: $grid-cell-padding-y / 2;
-
-                .k-ie & {
-                    min-width: $button-inner-calc-size;
-                }
-            }
-
-            .k-widget {
-                width: auto;
-            }
-        }
-
         .k-filtercell-operator {
             > .k-button.k-clear-button-visible {
                 visibility: visible;
-                height: $button-calc-size;
+                height: $kendo-button-calc-size;
             }
 
             > .k-button:not(.k-clear-button-visible) {
@@ -817,17 +791,6 @@
             margin-left: $grid-cell-padding-y / 2;
         }
 
-        .k-widget:not(.k-dropdown-operator),
-        .k-filtercell-wrapper > .k-textbox {
-            display: flex;
-            flex: 1 1 auto;
-        }
-
-        .k-filtercell-wrapper > .k-textbox {
-            width: 100%;
-            min-width: 0;
-        }
-
     }
 
     // Grid content
@@ -874,7 +837,6 @@
 
         > input:not([type="checkbox"]):not([type="radio"]),
         > select,
-        > .k-textbox,
         > .k-widget:not(.k-switch) {
             width: 100%;
             vertical-align: $grid-form-component-vertical-align;
@@ -1122,12 +1084,12 @@
     }
 
     .k-header > .k-cell-inner {
-        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
     }
 
     .k-filterable {
         > .k-cell-inner {
-            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
 
             .k-link {
                 padding-right: 0;
@@ -1307,9 +1269,7 @@
         }
 
         .k-widget,
-        .k-radio-list,
-        .k-textbox,
-        .k-searchbox {
+        .k-radio-list {
             margin: $grid-filter-menu-item-spacing-y $grid-filter-menu-item-spacing-x 0;
             width: calc( 100% - ( 2 * #{$grid-filter-menu-item-spacing-x} ) );
             box-sizing: border-box;
@@ -1324,11 +1284,6 @@
             width: auto;
             display: inline-flex;
         }
-
-        .k-switch {
-            width: $switch-size;
-            display: inline-flex;
-        }
     }
 
     .k-multicheck-wrap {
@@ -1466,7 +1421,7 @@
 
         .k-header > .k-cell-inner {
             margin-right: (-1 * $grid-cell-padding-x);
-            margin-left: calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x}));
+            margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
 
             .k-sort-order {
                 margin-right: $grid-sorting-index-spacing-x;
@@ -1477,7 +1432,7 @@
         .k-filterable {
             > .k-cell-inner {
                 margin-right: (-1 * $grid-cell-padding-x);
-                margin-left: calc(-1 * #{$button-calc-size});
+                margin-left: calc(-1 * #{$kendo-button-calc-size});
 
                 .k-link {
                     padding-right: $grid-header-padding-x;

package/scss/grid/_theme.scss

@@ -188,8 +188,8 @@
         .k-header-column-menu,
         .k-hierarchy-cell .k-icon {
             &:hover {
-                color: $button-hovered-text;
-                background-color: $button-hovered-bg;
+                color: $kendo-button-hover-text;
+                background-color: $kendo-button-hover-bg;
             }
             &:focus,
             &.k-state-focus,

package/scss/grid/_variables.scss

@@ -116,8 +116,6 @@ $grid-edit-cell-padding-y: 3px !default;
 
 $grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
 
-$grid-search-width: $input-default-width !default;
-
 $grid-sticky-bg: $component-bg !default;
 $grid-sticky-text: $grid-text !default;
 $grid-sticky-border: rgba( black, .3 ) !default;