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

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;
-        }
-    }
 }

package/scss/maskedtextbox/_theme.scss

@@ -1,24 +1,6 @@
 @include exports("maskedtextbox/theme") {
 
-    .k-maskedtextbox {
+    // Masked textbox
+    .k-maskedtextbox {}
 
-        .k-i-warning {
-            color: $error;
-        }
-
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-textbox {
-                border-color: $invalid-border;
-            }
-
-            &:focus,
-            &.k-state-focused {
-                .k-textbox {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
 }

package/scss/multiselect/_layout.scss

@@ -2,15 +2,15 @@
 
     // Base
     .k-multiselect {
-        @include border-radius( $input-border-radius );
+        @include border-radius( $kendo-input-border-radius );
         width: $multiselect-width;
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
         background: none;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
+        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;
@@ -24,8 +24,8 @@
         }
 
         .k-multiselect-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0 $input-icon-width 0 0;
+            @include border-radius( $kendo-input-border-radius );
+            padding: 0 $kendo-input-icon-width 0 0;
             width: 100%;
             border-width: 1px;
             border-style: solid;
@@ -44,7 +44,7 @@
             &::before {
                 content: "";
                 width: 0;
-                height: $input-inner-calc-height;
+                height: $kendo-input-inner-calc-height;
                 float: left;
             }
 
@@ -64,8 +64,8 @@
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$kendo-button-padding-y-sm} + 2px );
+                padding: ($kendo-button-padding-y-sm / 2) ($kendo-button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;
@@ -98,8 +98,8 @@
             }
 
             .k-i-loading {
-                width: $input-icon-width;
-                height: $input-icon-height;
+                width: $kendo-input-icon-width;
+                height: $kendo-input-icon-height;
                 position: absolute;
                 top: 0;
                 right: 0;
@@ -117,8 +117,8 @@
                 position: absolute;
                 top: 0;
                 right: 0;
-                width: $input-icon-width;
-                height: $input-icon-height;
+                width: $kendo-input-icon-width;
+                height: $kendo-input-icon-height;
                 flex-shrink: 0;
                 display: inline-flex;
                 align-items: center;
@@ -137,7 +137,7 @@
             text-align: right;
 
             .k-multiselect-wrap {
-                padding-left: $input-icon-width;
+                padding-left: $kendo-input-icon-width;
                 padding-right: 0;
 
                 &::before,
@@ -151,7 +151,7 @@
 
                     .k-input {
                         padding-left: 0;
-                        padding-right: $input-padding-x;
+                        padding-right: $kendo-input-padding-x;
                     }
                 }
 

package/scss/multiselect/_variables.scss

@@ -15,23 +15,23 @@ $multiselect-remove-hover-bg: rgba( $base-text, .54 ) !default;
 $multiselect-remove-focused-text: rgba( $base-text, .54 ) !default;
 $multiselect-remove-focused-bg: rgba($base-bg, .93) !default;
 
-$multiselect-bg: $input-bg !default;
-$multiselect-text: $input-text !default;
-$multiselect-border: $input-border !default;
+$multiselect-bg: $kendo-input-bg !default;
+$multiselect-text: $kendo-input-text !default;
+$multiselect-border: $kendo-input-border !default;
 
-$multiselect-hovered-bg: $input-hovered-bg !default;
-$multiselect-hovered-text: $input-hovered-text !default;
-$multiselect-hovered-border: $input-hovered-border !default;
+$multiselect-hovered-bg: $kendo-input-hover-bg !default;
+$multiselect-hovered-text: $kendo-input-hover-text !default;
+$multiselect-hovered-border: $kendo-input-hover-border !default;
 
-$multiselect-focused-bg: $input-focused-bg !default;
-$multiselect-focused-text: $input-focused-text !default;
-$multiselect-focused-border: $input-focused-border !default;
-$multiselect-focused-shadow: $input-focused-shadow !default;
+$multiselect-focused-bg: $kendo-input-focus-bg !default;
+$multiselect-focused-text: $kendo-input-focus-text !default;
+$multiselect-focused-border: $kendo-input-focus-border !default;
+$multiselect-focused-shadow: $kendo-input-focus-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
-$multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
+$multiselect-clear-right: calc( #{$icon-size} + #{$kendo-input-padding-y} ) !default;

package/scss/no-flexbox.scss

@@ -18,40 +18,6 @@
         }
     }
 
-    .k-dateinput-wrap,
-    .k-dropdown-wrap,
-    .k-numeric-wrap,
-    .k-picker-wrap {
-        $k-select-width: 2em;
-        display: block;
-
-        .k-input {
-            width: calc(100% - #{$k-select-width});
-            display: inline-block;
-            vertical-align: middle;
-        }
-        .k-select {
-            display: inline-block;
-            vertical-align: middle;
-        }
-    }
-
-    .k-timepicker,
-    .k-datepicker {
-        display: inline-block;
-
-        .k-dateinput-wrap {
-            display: inline-block;
-        }
-
-        .k-select {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-        }
-    }
-
     .k-time-list-wrapper,
     .k-time-separator {
         display: inline-block;

package/scss/numerictextbox/_layout.scss

@@ -1,97 +1,6 @@
 @include exports("numerictextbox/layout") {
 
-    // Base
-    .k-numerictextbox {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $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;
-
-        .k-numeric-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {
-            text-overflow: clip;
-        }
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: 0;
-            width: if( $use-picker-select-width, $spinner-width, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $spinner-min-width;
-            box-sizing: border-box;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-
-        .k-link-increase .k-icon {
-            bottom: -$spinner-icon-offset;
-        }
-
-        .k-link-decrease .k-icon {
-            top: -$spinner-icon-offset;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
+    // Numeric textbox
+    .k-numerictextbox {}
 
 }