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

package/scss/datetime/_layout.scss

@@ -2,14 +2,13 @@
 
     // Dateinput
     .k-dateinput {
-        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;
+        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;
@@ -19,7 +18,7 @@
         -webkit-tap-highlight-color: $rgba-transparent;
 
         .k-dateinput-wrap {
-            @include border-radius( $input-border-radius );
+            @include border-radius( $kendo-input-border-radius );
             padding: 0;
             width: 100%;
             border-width: 1px;
@@ -40,9 +39,9 @@
 
         // Select
         .k-select {
-            @include border-right-radius-only( $input-border-radius );
+            @include border-right-radius-only( $kendo-input-border-radius );
             padding: 0;
-            width: if( $use-picker-select-width, $spinner-width, null );
+            width: $kendo-input-spinner-width;
             border-width: 0 0 0 $picker-select-border-width;
             border-style: solid;
             box-sizing: border-box;
@@ -69,22 +68,6 @@
                 transform: translateX(50%);
             }
         }
-        .k-link-increase .k-icon {
-            bottom: -$spinner-icon-offset;
-        }
-        .k-link-decrease .k-icon {
-            top: -$spinner-icon-offset;
-        }
-
-
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            right: $padding-x;
-            top: 50%;
-            transform: translateY(-50%);
-            overflow: visible;
-        }
 
 
         // RTL
@@ -92,13 +75,8 @@
         &[dir="rtl"] {
             text-align: right;
 
-            .k-dateinput-wrap .k-i-warning {
-                left: $padding-x;
-                right: auto;
-            }
-
             .k-select {
-                @include border-left-radius-only( $input-border-radius );
+                @include border-left-radius-only( $kendo-input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
             }
         }
@@ -111,7 +89,7 @@
             flex: 1 1 auto;
 
             .k-dateinput-wrap {
-                @include border-left-radius-only( $input-border-radius );
+                @include border-left-radius-only( $kendo-input-border-radius );
                 border-width: 0;
                 box-shadow: none !important; // sass-lint:disable-line no-important
             }
@@ -119,7 +97,7 @@
             [dir="rtl"] &,
             .k-rtl & {
                 .k-dateinput-wrap {
-                    @include border-right-radius-only( $input-border-radius );
+                    @include border-right-radius-only( $kendo-input-border-radius );
                 }
             }
 
@@ -130,13 +108,12 @@
     // Datepicker / timepicker
     .k-datepicker,
     .k-timepicker {
-        width: $input-default-width;
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
-        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;
         white-space: nowrap;
         background: none;
         display: inline-flex;
@@ -147,10 +124,10 @@
 
         // Wrapper
         .k-picker-wrap {
-            @include border-radius( $input-border-radius );
+            @include border-radius( $kendo-input-border-radius );
             padding: 0;
             width: 100%;
-            border-width: $input-border-width;
+            border-width: $kendo-input-border-width;
             border-style: solid;
             box-sizing: border-box;
             display: flex;
@@ -168,7 +145,7 @@
 
         // Select
         .k-select {
-            @include border-right-radius-only( $input-border-radius );
+            @include border-right-radius-only( $kendo-input-border-radius );
             padding: $picker-select-padding-y $picker-select-padding-x;
             width: if( $use-picker-select-width, $picker-select-calc-size, null );
             border-width: 0 0 0 $picker-select-border-width;
@@ -184,43 +161,27 @@
         }
 
 
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
             text-align: right;
 
             .k-select {
-                @include border-left-radius-only( $input-border-radius );
+                @include border-left-radius-only( $kendo-input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
             }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
-            }
         }
     }
 
 
     // Datetimepicker
     .k-datetimepicker {
-        width: $input-default-width;
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
-        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;
         background: none;
@@ -232,7 +193,7 @@
 
         // Wrappers
         .k-picker-wrap {
-            @include border-radius( $input-border-radius );
+            @include border-radius( $kendo-input-border-radius );
             padding: 0;
             width: 100%;
             border-width: 1px;
@@ -253,7 +214,7 @@
 
         // Select
         .k-select {
-            @include border-right-radius-only( $input-border-radius );
+            @include border-right-radius-only( $kendo-input-border-radius );
             border-width: 0 0 0 $picker-select-border-width;
             border-style: solid;
             box-sizing: border-box;
@@ -267,7 +228,7 @@
         }
         .k-link {
             padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $button-inner-calc-size, null );
+            width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
             height: 100%;
             border-width: 0;
             border-style: solid;
@@ -279,30 +240,15 @@
         }
 
 
-        // Validation icon
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            transform: translateY(-50%);
-            overflow: visible;
-        }
-
-
         // RTL
         .k-rtl &,
         &[dir="rtl"] {
             text-align: right;
 
             .k-select {
-                @include border-left-radius-only( $input-border-radius );
+                @include border-left-radius-only( $kendo-input-border-radius );
                 border-width: 0 $picker-select-border-width 0 0;
             }
-
-            .k-i-warning {
-                right: auto;
-                left: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
-            }
         }
     }
 
@@ -314,7 +260,7 @@
         }
 
         .k-datetime-buttongroup {
-            padding: $button-padding-x;
+            padding: $kendo-button-padding-x;
         }
 
         .k-datetime-selector {
@@ -503,7 +449,7 @@
         right: 0;
         transform: translateY(-50%);
         width: 100%;
-        height: $button-inner-calc-size;
+        height: $kendo-button-inner-calc-size;
         z-index: 1;
         border-width: $time-highlight-size 0;
         border-style: solid;

package/scss/datetime/_variables.scss

@@ -24,30 +24,30 @@ $dateinput-text: null !default;
 
 $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
 
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-pressed-bg: $button-active-bg !default;
-$datetime-select-pressed-text: $button-active-text !default;
-$datetime-select-pressed-border: $button-active-border !default;
-$datetime-select-pressed-gradient: $button-active-gradient !default;
+$datetime-bg: $kendo-input-bg !default;
+$datetime-text: $kendo-input-text !default;
+$datetime-border: $kendo-input-border !default;
+
+$datetime-hovered-bg: $kendo-input-hover-bg !default;
+$datetime-hovered-text: $kendo-input-hover-text !default;
+$datetime-hovered-border: $kendo-input-hover-border !default;
+
+$datetime-focused-bg: $kendo-input-focus-bg !default;
+$datetime-focused-text: $kendo-input-focus-text !default;
+$datetime-focused-border: $kendo-input-focus-border !default;
+$datetime-focused-shadow: $kendo-input-focus-shadow !default;
+
+$datetime-select-bg: $kendo-button-bg !default;
+$datetime-select-text: $kendo-button-text !default;
+$datetime-select-border: $kendo-button-border !default;
+$datetime-select-gradient: $kendo-button-gradient !default;
+
+$datetime-select-hovered-bg: $kendo-button-hover-bg !default;
+$datetime-select-hovered-text: $kendo-button-hover-text !default;
+$datetime-select-hovered-border: $kendo-button-hover-border !default;
+$datetime-select-hovered-gradient: $kendo-button-hover-gradient !default;
+
+$datetime-select-pressed-bg: $kendo-button-active-bg !default;
+$datetime-select-pressed-text: $kendo-button-active-text !default;
+$datetime-select-pressed-border: $kendo-button-active-border !default;
+$datetime-select-pressed-gradient: $kendo-button-active-gradient !default;

package/scss/dropdowngrid/_layout.scss

@@ -1,4 +1,8 @@
 @include exports("dropdowngrid/layout") {
+
+    // Dropdown grid
+    .k-dropdown-grid {}
+
     .k-dropdowngrid-popup {
         overflow: hidden;
     }

package/scss/dropdowngrid/_theme.scss

@@ -1,5 +1,8 @@
 @include exports("dropdowngrid/theme") {
 
+    // Dropdown grid
+    .k-dropdown-grid {}
+
     // Dropdowngrid
     .k-dropdowngrid-popup {
         border-color: $grid-border;

package/scss/dropdownlist/_layout.scss

@@ -1,117 +1,10 @@
 @include exports("dropdownlist/layout") {
 
-    .k-dropdown {
-        width: $input-default-width;
-        border-width: 0;
-        outline: 0;
-        background: none;
-        box-sizing: border-box;
-        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-dropdown-wrap {
-            @include border-radius( $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( $input-border-radius );
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $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( $input-border-radius );
-        }
-    }
-
-
-
-    // Dropdown operator
-    .k-dropdown-operator {
-        width: auto;
-
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $button-inner-calc-size;
-                height: $button-inner-calc-size;
-            }
-        }
-
-    }
+    // Dropdown list
+    .k-dropdown-list {}
 
 
     // Native select
-    select.k-dropdown {
-        @include border-radius( $input-border-radius );
-        padding: $input-padding-y $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;
-    }
+    select.k-dropdown-list {}
 
 }

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/dropdownlist/_variables.scss

@@ -1,16 +1,16 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $dropdownlist-focused-bg: null !default;
 $dropdownlist-focused-text: null !default;
 $dropdownlist-focused-border: null !default;
 $dropdownlist-focused-gradient: null !default;
-$dropdownlist-focused-shadow: $input-focused-shadow !default;
+$dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;

package/scss/dropdowntree/_layout.scss

@@ -1,29 +1,6 @@
 @include exports("dropdowntree/layout") {
 
-    .k-dropdowntree {
-        @extend .k-multiselect;
-        @extend .k-dropdown;
-        width: $input-default-width;
-    }
+    // 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;
-        }
-
-        .k-treeview {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-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 {}
 
 }