@progress/kendo-theme-default 4.42.1-dev.2 → 5.0.0-alpha.2

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;

package/scss/input/_layout.scss

@@ -1,24 +1,49 @@
 @include exports( "input/layout" ) {
 
     // Generic input
-    .k-input {
+    .k-input,
+    .k-picker {
+        @include border-radius( $kendo-input-border-radius );
         margin: 0;
-        padding: $input-padding-y $input-padding-x;
+        padding: 0;
         width: 100%;
         min-width: 0;
-        height: $input-inner-calc-height;
-        border: 0;
+        border-width: $kendo-input-border-width;
+        border-style: solid;
         outline: 0;
-        box-sizing: border-box;
-        // Targets https://github.com/telerik/kendo-react/issues/638.
+        font-family: $kendo-input-font-family;
+        font-size: $kendo-input-font-size;
+        line-height: $kendo-input-line-height;
         box-shadow: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-appearance: none;
+    }
+    input.k-input {
+        padding: $kendo-input-padding-y $kendo-input-padding-x;
+    }
+    select.k-picker {
+        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        appearance: auto;
+    }
+
+
+    // Input inner
+    .k-input-inner {
+        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        width: 100%;
+        border: 0;
+        outline: 0;
         color: inherit;
         background: none;
         font: inherit;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        flex: 0 1 auto;
+        flex: 1;
+        position: relative;
+        z-index: 1;
         overflow: hidden;
         text-overflow: ellipsis;
         -webkit-appearance: none;
@@ -28,12 +53,12 @@
 
         // Placeholder text
         &::placeholder {
-            color: $input-placeholder-text;
-            opacity: $input-placeholder-opacity;
+            color: $kendo-input-placeholder-text;
+            opacity: $kendo-input-placeholder-opacity;
             user-select: none;
         }
         &:-ms-input-placeholder {
-            color: $input-placeholder-text;
+            color: $kendo-input-placeholder-text;
         }
 
         // Invalid
@@ -41,129 +66,116 @@
             box-shadow: none;
         }
     }
+    span.k-input-inner {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
 
-
-    // TODO: Deprecate
-    // Input spacing
-    .k-space-left,
-    .k-space-right {
-        > input {
-            flex-grow: 1;
+        .k-value-icon {
+            flex: none;
         }
-
-        > .k-icon {
-            left: 3px;
-            margin: 3px 6px;
+        .k-value-text {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
-    .k-textbox.k-space-left {
-        flex-direction: row-reverse;
-    }
-
 
     // Input prefix and suffix
     .k-input-prefix,
     .k-input-suffix {
         display: flex;
+        flex-flow: row nowrap;
         align-items: center;
-        flex-shrink: 0;
-        height: $button-inner-calc-size;
+        flex: none;
 
         > * {
             flex-shrink: 0;
         }
-
-        > .k-icon {
-            width: $input-adornment-width;
-            height: $input-adornment-height;
-            display: inline-flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-        > .k-clear-value {
-            width: $input-adornment-width;
-            height: $input-adornment-height;
-            position: relative;
-
-            &::after {
-                content: "";
-                opacity: 0;
-                display: none;
-                pointer-events: none;
-                position: absolute;
-                left: -1px;
-                right: -1px;
-                top: -1px;
-                bottom: -1px;
-            }
-
-            &.k-state-focused::after,
-            &:focus::after {
-                display: block;
-            }
-        }
     }
 
-    .k-input-separator {
-        margin: 0;
-        width: 0;
-        height: $icon-size;
-        border-width: 0 0 0 1px;
-        border-style: solid;
-    }
 
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
     .k-input-loading-icon {
-        width: $input-icon-width;
-        height: $input-icon-height;
+        width: $kendo-input-icon-width;
+        height: $kendo-input-icon-height;
+        flex: none;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
-        flex-shrink: 0;
     }
 
 
     // Clear value
     .k-clear-value {
-        width: $input-icon-width;
-        height: $input-icon-height;
-        flex-shrink: 0;
+        width: $kendo-input-icon-width;
+        height: $kendo-input-icon-height;
+        outline: 0;
+        flex: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        outline: 0;
         cursor: pointer;
         opacity: .5;
     }
     .k-clear-value:hover,
-    .k-clear-value.k-state-hover {
+    .k-clear-value.k-hover {
         opacity: 1;
     }
 
 
-    // Searchbar
-    .k-searchbar {
-        flex: 1 1 auto;
-        display: flex;
-        flex-flow: row nowrap;
-    }
+    // Input button
+    .k-input-button {
+        width: if( $use-input-button-width, $kendo-input-button-width, auto );
+        border-width: 0;
+        flex: none;
+        aspect-ratio: auto;
+        color: inherit;
+        background: none;
+        box-shadow: none;
 
-    .k-text-disabled {
-        @include disabled( $disabled-styling );
+        > .k-button-icon {
+            min-width: auto !important; // sass-lint:disable-line no-important
+            min-height: auto !important; // sass-lint:disable-line no-important
+        }
+    }
+    .k-picker .k-input-button {
+        color: inherit;
+        background: none;
     }
 
-}
 
+    // Input spinner
+    .k-input-spinner {
+        width: if( $use-input-spinner-width, $kendo-input-spinner-width, auto );
+        flex: none;
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-spinner-increase,
+        .k-spinner-decrease {
+            border-width: 0;
+            flex: 1 1 50%;
+            aspect-ratio: auto;
+            box-shadow: none;
 
+            > .k-button-icon {
+                margin: -1em 0;
+            }
+        }
+    }
 
 
-@include exports("input/layout/jQuery-label") {
+    // Searchbar
+    .k-searchbar {
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: row nowrap;
+    }
 
 }
 
@@ -191,10 +203,10 @@
     }
 
 
-    .k-textbox:-webkit-autofill {
+    .k-input:-webkit-autofill {
         animation-name: autoFillStart;
     }
-    .k-textbox:not(:-webkit-autofill) {
+    .k-input:not(:-webkit-autofill) {
         animation-name: autoFillEnd;
     }
 

package/scss/input/_theme.scss

@@ -1,28 +1,86 @@
-@include exports("input/theme") {
+@include exports( "input/theme" ) {
 
-    .k-input-prefix,
-    .k-input-suffix {
+    .k-input {
+        @include fill(
+            $kendo-input-text,
+            $kendo-input-bg,
+            $kendo-input-border
+        );
 
-        > .k-icon {
-            color: $input-icon-text;
-            opacity: $input-icon-opacity;
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-input-hover-text,
+                $kendo-input-hover-bg,
+                $kendo-input-hover-border
+            );
         }
 
-        .k-clear-value {
-            color: $clear-button-text;
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-focus-text,
+                $kendo-input-focus-bg,
+                $kendo-input-focus-border
+            );
+            @include box-shadow( $kendo-input-focus-shadow );
         }
 
-        > .k-clear-value {
-            &.k-state-focused::after,
-            &:focus::after {
-                background-color: $input-clear-button-focused-background;
-                opacity: $input-clear-button-focused-opacity;
+        // Invalid
+        &:invalid,
+        &.k-invalid {
+            @include fill( $border: $invalid-border );
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
+
     }
 
-    .k-input-separator {
-        border-color: $input-separator-color;
-        opacity: $input-separator-opacity;
+    .k-picker {
+        @include fill(
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
+        );
+
+        // Hover
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
+            );
+        }
+
+        // Focus
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-button-focus-text,
+                $kendo-button-focus-bg,
+                $kendo-button-focus-border,
+                $kendo-button-focus-gradient
+            );
+            @include box-shadow( $kendo-button-focus-shadow );
+        }
+
+        // Invalid
+        &:invalid,
+        &.k-invalid {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
     }
 }