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

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,142 +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 {
-        width: $input-icon-width;
-        height: $input-icon-height;
+    .k-input-icon,
+    .k-input-validation-icon,
+    .k-input-loading-icon {
+        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;
-
-        .k-ie9 & {
-            position: absolute;
-            height: 100%;
-            right: 0;
-            top: 0;
-        }
-
-        .k-rtl &,
-        [dir="rtl"] & {
-            .k-ie9 & {
-                left: 0;
-                right: auto;
-            }
-        }
     }
 
 
     // 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;
+    }
 
 }
 
@@ -204,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 );
+            }
+        }
     }
 }

package/scss/input/_variables.scss

@@ -1,97 +1,96 @@
 // Input
 
-$input-default-width: 12.4em !default;
+$kendo-input-border-width: 1px !default;
+$kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+$kendo-input-border-radius: $border-radius !default;
+$kendo-input-border-radius-sm: $border-radius !default;
+$kendo-input-border-radius-lg: $border-radius !default;
 
-$input-border-width: 1px !default;
-$input-border-height: ( $input-border-width * 2 ) !default;
-$input-border-radius: $border-radius !default;
-$input-border-radius-sm: $border-radius !default;
-$input-border-radius-lg: $border-radius !default;
+$kendo-input-padding-x: $padding-x !default;
+$kendo-input-padding-y: $padding-y !default;
+$kendo-input-font-family: $font-family !default;
+$kendo-input-font-size: $font-size !default;
+$kendo-input-line-height: $line-height !default;
+$kendo-input-line-height-em: $kendo-input-line-height * 1em !default;
 
-$input-padding-x: $padding-x !default;
-$input-padding-y: $padding-y !default;
-$input-font-family: $font-family !default;
-$input-font-size: $font-size !default;
-$input-line-height: $line-height !default;
-$input-line-height-em: $input-line-height * 1em !default;
+$kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
+$kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
+$kendo-input-font-size-sm: $kendo-input-font-size !default;
+$kendo-input-line-height-sm: $line-height-sm !default;
 
-$input-padding-x-sm: ($input-padding-x / 2) !default;
-$input-padding-y-sm: ($input-padding-y / 2) !default;
-$input-font-size-sm: $input-font-size !default;
-$input-line-height-sm: $line-height-sm !default;
+$kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
+$kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
+$kendo-input-font-size-lg: $kendo-input-font-size !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
-$input-padding-x-lg: ($input-padding-x * 1.5) !default;
-$input-padding-y-lg: ($input-padding-y * 1.5) !default;
-$input-font-size-lg: $input-font-size !default;
-$input-line-height-lg: $line-height-lg !default;
+$kendo-input-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} + #{$kendo-input-border-height} ) !default;
+$kendo-input-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} + #{$kendo-input-border-height} ) !default;
+$kendo-input-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} + #{$kendo-input-border-height} ) !default;
 
-$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
-$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
-$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;
+$kendo-input-inner-calc-height: calc( #{$kendo-input-line-height * 1em} + #{$kendo-input-padding-y * 2} ) !default;
+$kendo-input-inner-calc-height-sm: calc( #{$kendo-input-line-height-sm * 1em} + #{$kendo-input-padding-y-sm * 2} ) !default;
+$kendo-input-inner-calc-height-lg: calc( #{$kendo-input-line-height-lg * 1em} + #{$kendo-input-padding-y-lg * 2} ) !default;
 
-$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
-$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
-$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
+$kendo-input-adornment-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
+$kendo-input-adornment-width: $kendo-input-adornment-height !default;
 
-$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
-$input-adornment-width: $input-adornment-height !default;
+$kendo-input-bg: $component-bg !default;
+$kendo-input-text: $component-text !default;
+$kendo-input-border: $component-border !default;
+$kendo-input-shadow: null !default;
 
-$input-bg: $component-bg !default;
-$input-text: $component-text !default;
-$input-border: $component-border !default;
-$input-shadow: null !default;
+$kendo-input-hover-bg: null !default;
+$kendo-input-hover-text: null !default;
+$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+$kendo-input-hover-shadow: null !default;
 
-$input-hovered-bg: null !default;
-$input-hovered-text: null !default;
-$input-hovered-border: rgba( $input-border, .16 ) !default;
-$input-hovered-shadow: null !default;
+$kendo-input-focus-bg: null !default;
+$kendo-input-focus-text: null !default;
+$kendo-input-focus-border: $kendo-input-hover-border !default;
+$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
-$input-focused-bg: null !default;
-$input-focused-text: null !default;
-$input-focused-border: $input-hovered-border !default;
-$input-focused-shadow: 0 0 0 2px rgba( $input-focused-border, .08 ) !default;
+$kendo-input-placeholder-text: $subtle-text !default;
+$kendo-input-placeholder-opacity: 1 !default;
 
-$input-placeholder-text: $subtle-text !default;
-$input-placeholder-opacity: 1 !default;
+$kendo-input-selected-bg: $primary !default;
+$kendo-input-selected-text: $primary-contrast !default;
 
-$input-selected-bg: $primary !default;
-$input-selected-text: $primary-contrast !default;
-
-$input-clear-button-focused-background: $base-text !default;
-$input-clear-button-focused-opacity: .2 !default;
+$kendo-input-clear-button-focused-background: $base-text !default;
+$kendo-input-clear-button-focused-opacity: .2 !default;
 
 
 // Picker
 $picker-select-border-width: 0px !default;
 
-$picker-select-padding-x: $input-padding-y !default;
-$picker-select-padding-y: $input-padding-y !default;
+$picker-select-padding-x: $kendo-input-padding-y !default;
+$picker-select-padding-y: $kendo-input-padding-y !default;
 
-$picker-select-padding-x-sm: $input-padding-y-sm !default;
-$picker-select-padding-y-sm: $input-padding-y-sm !default;
+$picker-select-padding-x-sm: $kendo-input-padding-y-sm !default;
+$picker-select-padding-y-sm: $kendo-input-padding-y-sm !default;
 
-$picker-select-padding-x-lg: $input-padding-y-sm !default;
-$picker-select-padding-y-lg: $input-padding-y-sm !default;
+$picker-select-padding-x-lg: $kendo-input-padding-y-sm !default;
+$picker-select-padding-y-lg: $kendo-input-padding-y-sm !default;
 
-$picker-select-calc-size: $input-inner-calc-height !default;
-$picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
-$picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
+$picker-select-calc-size: $kendo-input-inner-calc-height !default;
+$picker-select-calc-size-sm: $kendo-input-inner-calc-height-sm !default;
+$picker-select-calc-size-lg: $kendo-input-inner-calc-height-lg !default;
 
 
-// Spinner
-$spinner-width: $button-inner-calc-size !default;
-$spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
-$spinner-icon-offset: 2px !default;
+// Input actions
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
+$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
 
 
 // Input icon
-$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
-$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
-
-$input-icon-text: $subtle-text !default;
-$input-icon-opacity: null !default;
+$kendo-input-icon-width: calc( #{$icon-size} + #{$kendo-input-padding-y * 2} ) !default;
+$kendo-input-icon-height: calc( #{$kendo-input-line-height * $kendo-input-font-size} + #{$kendo-input-padding-y * 2} ) !default;
 
 
 // Input separator
-$input-separator-color: $input-text !default;
-$input-separator-opacity: .5 !default;
+$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-opacity: .5 !default;
+
+
+// Invalid
+$kendo-input-invalid-border: $invalid-border !default;
+$kendo-input-invalid-shadow: $invalid-shadow !default;

package/scss/map/_layout.scss

@@ -72,21 +72,6 @@
 
 
         // Buttons
-        .k-button {
-            margin: 0;
-            padding: 0;
-            width: auto;
-            height: auto;
-            border-radius: 100%;
-            line-height: 1;
-            box-shadow: none;
-            position: absolute;
-
-            &:not(:hover) {
-                border-color: transparent;
-                background: none;
-            }
-        }
         .k-navigator-up {
             transform: translateX(-50%);
             top: $map-navigator-padding;
@@ -118,12 +103,6 @@
         display: flex;
 
         .k-pdf-export & { display: none; }
-
-
-        // Buttons
-        .k-button {
-            padding: $button-padding-y;
-        }
     }
 
 }

package/scss/map/_theme.scss

@@ -9,12 +9,12 @@
 
         .k-navigator {
             @include fill(
-                $button-text,
-                $button-bg,
-                $button-border,
-                $button-gradient
+                $kendo-button-text,
+                $kendo-button-bg,
+                $kendo-button-border,
+                $kendo-button-gradient
             );
-            @include box-shadow( $button-shadow );
+            @include box-shadow( $kendo-button-shadow );
         }
 
         .k-marker {

package/scss/map/_variables.scss

@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;

package/scss/maskedtextbox/_layout.scss

@@ -1,50 +1,6 @@
 @include exports("maskedtextbox/layout") {
 
-    .k-maskedtextbox {
-        width: $input-default-width;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+    // Masked textbox
+    .k-maskedtextbox {}
 
-        > .k-textbox {
-            flex: 1 0 0%;
-            min-width: 0;
-
-            &.k-state-invalid {
-                transition: none;
-            }
-        }
-
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $padding-x;
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-
-            .k-i-warning {
-                right: auto;
-                left: $padding-x;
-            }
-        }
-
-        ::-ms-clear {
-            display: none;
-        }
-    }
 }