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

package/scss/colorgradient/_layout.scss

@@ -132,10 +132,6 @@
         .k-numerictextbox {
             width: $colorgradient-input-width;
         }
-
-        .k-textbox {
-            width: 100%;
-        }
     }
 
     // Contrast

package/scss/colorpicker/_layout.scss

@@ -1,136 +1,8 @@
 @include exports("colorpicker/layout") {
 
+    // Color picker
     .k-colorpicker {
-        width: auto;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $colorpicker-font-family;
-        font-size: $colorpicker-font-size;
-        line-height: $colorpicker-line-height;
-        background: none;
-        text-align: left;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        overflow: visible;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-selected-color {
-            padding: $button-padding-y;
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            box-sizing: border-box;
-            line-height: 0;
-            position: relative;
-            overflow: hidden;
-
-            .k-i-line {
-                border-top: 1px solid $error;
-                width: 200%;
-                height: 200%;
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-33%, -33%) rotateZ(45deg);
-                transform-origin: 0 0;
-            }
-            .k-i-line::before {
-                display: none;
-            }
-        }
-
-        .k-tool-icon {
-            padding: $button-padding-y;
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            box-sizing: border-box;
-            font-size: inherit;
-            text-align: center;
-            flex-direction: column;
-            cursor: pointer;
-
-            &::before {
-                font-size: $icon-size;
-                line-height: 1;
-            }
-
-            .k-selected-color {
-                margin: 1px 0 0;
-                padding: 0;
-                width: 14px;
-                height: 3px;
-                border-width: 0;
-                line-height: 0;
-                display: inline-block;
-            }
-        }
-
-        .k-picker-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            flex-direction: row;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            overflow: hidden;
-            cursor: default;
-            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 0 0 $colorpicker-select-border-width;
-            border-style: solid;
-            border-color: inherit;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-
-            .k-icon {}
-        }
-
-        .k-rtl &,
-        &[dir="rtl"] {
-            .k-picker-wrap {
-                .k-select {
-                    @include border-left-radius-only( $input-border-radius );
-                    border-width: 0 $colorpicker-select-border-width 0 0;
-                }
-            }
-        }
-
-    }
-
-    .k-colorpicker-popup .k-coloreditor {
-        border-color: transparent;
-    }
-
-    .k-colorpicker-popup {
-        padding: 0;
+        width: min-content;
     }
 
 }

package/scss/colorpicker/_theme.scss

@@ -1,68 +1,6 @@
 @include exports( "colorpicker/theme" ) {
 
-    .k-colorpicker {
-
-        // Normal state
-        .k-picker-wrap {
-            @include fill(
-                $colorpicker-text,
-                $colorpicker-bg,
-                $colorpicker-border,
-                $colorpicker-gradient
-            );
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-        // Hover state
-        > :hover,
-        > .k-state-hover {
-            @include fill(
-                $colorpicker-hovered-text,
-                $colorpicker-hovered-bg,
-                $colorpicker-hovered-border,
-                $colorpicker-hovered-gradient
-            );
-        }
-
-        &.k-state-active {}
-
-        // Focus state
-        .k-state-focused,
-        .k-state-focus,
-        .k-focus {
-            @include fill(
-                $colorpicker-focused-text,
-                $colorpicker-focused-bg,
-                $colorpicker-focused-border,
-                $colorpicker-focused-gradient
-            );
-            @include box-shadow($colorpicker-focused-shadow);
-        }
-
-        // Invalid state
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-picker-wrap {
-                border-color: $invalid-border;
-
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
+    // Colorpicker
+    .k-colorpicker {}
 
 }

package/scss/colorpicker/_variables.scss

@@ -5,18 +5,18 @@ $colorpicker-line-height: $line-height !default;
 
 $colorpicker-select-border-width: 1px !default;
 
-$colorpicker-bg: $button-bg !default;
-$colorpicker-text: $button-text !default;
-$colorpicker-border: $button-border !default;
-$colorpicker-gradient: $button-gradient !default;
+$colorpicker-bg: $kendo-button-bg !default;
+$colorpicker-text: $kendo-button-text !default;
+$colorpicker-border: $kendo-button-border !default;
+$colorpicker-gradient: $kendo-button-gradient !default;
 
-$colorpicker-hovered-bg: $button-hovered-bg !default;
-$colorpicker-hovered-text: $button-hovered-text !default;
-$colorpicker-hovered-border: $button-hovered-border !default;
-$colorpicker-hovered-gradient: $button-hovered-gradient !default;
+$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
+$colorpicker-hovered-text: $kendo-button-hover-text !default;
+$colorpicker-hovered-border: $kendo-button-hover-border !default;
+$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
 $colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $button-focused-shadow !default;
+$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;

package/scss/combobox/_layout.scss

@@ -1,65 +1,6 @@
 @include exports("combobox/layout") {
 
-    .k-combobox {
-        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;
+    // Combobox
+    .k-combobox {}
 
-        .k-dropdown-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            display: flex;
-            flex-flow: row nowrap;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            outline: 0;
-            cursor: initial;
-        }
-
-
-        // Input
-        .k-input {}
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: $combobox-select-padding-y $combobox-select-padding-x;
-            width: if( $use-picker-select-width, $combobox-select-width, null );
-            border-width: 0 0 0 $combobox-select-border-width;
-            box-sizing: border-box;
-            border-style: solid;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $combobox-select-border-width 0 0;
-            }
-        }
-    }
 }

package/scss/combobox/_theme.scss

@@ -1,127 +1,6 @@
 @include exports("combobox/theme") {
 
-    .k-combobox {
-
-        // Normal state
-        .k-dropdown-wrap {
-            @include fill(
-                $combobox-text,
-                $combobox-bg,
-                $combobox-border
-            );
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-        .k-select {
-            @include fill(
-                $combobox-select-text,
-                $combobox-select-bg,
-                $combobox-select-border,
-                $combobox-select-gradient
-            );
-        }
-
-        // Hover state
-        > :hover,
-        .k-state-hover {
-            @include fill(
-                $combobox-hovered-text,
-                $combobox-hovered-bg,
-                $combobox-hovered-border
-            );
-
-            .k-select {
-                @include fill(
-                    $combobox-select-hovered-text,
-                    $combobox-select-hovered-bg,
-                    $combobox-select-hovered-border,
-                    $combobox-select-hovered-gradient
-                );
-            }
-        }
-
-        // Focus state
-        > .k-state-focused {
-            @include fill(
-                $combobox-focused-text,
-                $combobox-focused-bg,
-                $combobox-focused-border
-            );
-            @include box-shadow($combobox-focused-shadow);
-        }
-
-        // Active state
-        .k-state-active {
-            .k-select {
-                @include fill(
-                    $combobox-select-pressed-text,
-                    $combobox-select-pressed-bg,
-                    $combobox-select-pressed-border,
-                    $combobox-select-pressed-gradient
-                );
-            }
-        }
-
-        // 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);
-                }
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-combobox {
-        &.k-state-hover {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-hovered-text,
-                    $combobox-hovered-bg,
-                    $combobox-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-dropdown-wrap {
-                @include fill(
-                    $combobox-focused-text,
-                    $combobox-focused-bg,
-                    $combobox-focused-border
-                );
-                @include box-shadow($combobox-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-dropdown-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-dropdown-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
+    // Combobox
+    .k-combobox {}
 
 }

package/scss/combobox/_variables.scss

@@ -1,33 +1,33 @@
 // Comboboxes
 $combobox-select-padding-x: 0px !default;
 $combobox-select-padding-y: 0px !default;
-$combobox-select-width: $button-inner-calc-size !default;
+$combobox-select-width: $kendo-button-inner-calc-size !default;
 $combobox-select-border-width: 0px !default;
 
-$combobox-bg: $input-bg !default;
-$combobox-text: $input-text !default;
-$combobox-border: $input-border !default;
+$combobox-bg: $kendo-input-bg !default;
+$combobox-text: $kendo-input-text !default;
+$combobox-border: $kendo-input-border !default;
 
-$combobox-hovered-bg: $input-hovered-bg !default;
-$combobox-hovered-text: $input-hovered-text !default;
-$combobox-hovered-border: $input-hovered-border !default;
+$combobox-hovered-bg: $kendo-input-hover-bg !default;
+$combobox-hovered-text: $kendo-input-hover-text !default;
+$combobox-hovered-border: $kendo-input-hover-border !default;
 
-$combobox-focused-bg: $input-focused-bg !default;
-$combobox-focused-text: $input-focused-text !default;
-$combobox-focused-border: $input-focused-border !default;
-$combobox-focused-shadow: $input-focused-shadow !default;
+$combobox-focused-bg: $kendo-input-focus-bg !default;
+$combobox-focused-text: $kendo-input-focus-text !default;
+$combobox-focused-border: $kendo-input-focus-border !default;
+$combobox-focused-shadow: $kendo-input-focus-shadow !default;
 
-$combobox-select-bg: $button-bg !default;
-$combobox-select-text: $button-text !default;
-$combobox-select-border: $button-border !default;
-$combobox-select-gradient: $button-gradient !default;
+$combobox-select-bg: $kendo-button-bg !default;
+$combobox-select-text: $kendo-button-text !default;
+$combobox-select-border: $kendo-button-border !default;
+$combobox-select-gradient: $kendo-button-gradient !default;
 
-$combobox-select-hovered-bg: $button-hovered-bg !default;
-$combobox-select-hovered-text: $button-hovered-text !default;
-$combobox-select-hovered-border: $button-hovered-border !default;
-$combobox-select-hovered-gradient: $button-hovered-gradient !default;
+$combobox-select-hovered-bg: $kendo-button-hover-bg !default;
+$combobox-select-hovered-text: $kendo-button-hover-text !default;
+$combobox-select-hovered-border: $kendo-button-hover-border !default;
+$combobox-select-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$combobox-select-pressed-bg: $button-active-bg !default;
-$combobox-select-pressed-text: $button-active-text !default;
-$combobox-select-pressed-border: $button-active-border !default;
-$combobox-select-pressed-gradient: $button-active-gradient !default;
+$combobox-select-pressed-bg: $kendo-button-active-bg !default;
+$combobox-select-pressed-text: $kendo-button-active-text !default;
+$combobox-select-pressed-border: $kendo-button-active-border !default;
+$combobox-select-pressed-gradient: $kendo-button-active-gradient !default;

package/scss/common/_base.scss

@@ -119,8 +119,7 @@
         @include disabled( $disabled-styling );
 
 
-        .k-link,
-        .k-button {
+        .k-link {
             cursor: default;
             outline: 0;
         }

package/scss/core/_normalize.scss

@@ -1,5 +1,16 @@
 @include exports( "core/normalize" ) {
 
+    // Box sizing
+    *,
+    ::before,
+    ::after {
+        box-sizing: border-box;
+    }
+
+    body {
+        margin: 0;
+    }
+
     // Hidden attribute
     [hidden] {
         display: none !important; // sass-lint:disable-line no-important

package/scss/core/mixins/_input-ripple.scss

@@ -1,5 +1,5 @@
 @mixin input-ripple() {
-    $height: 2 * $input-border-width;
+    $height: 2 * $kendo-input-border-width;
 
     &::after {
         display: block;

package/scss/dataviz/_theme.scss

@@ -88,18 +88,18 @@
     .k-handle {
         cursor: e-resize;
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
     }

package/scss/dataviz/_variables.scss

@@ -1,7 +1,7 @@
 // Chart
 /// The first base series color and its light and dark shades.
 /// @group charts
-$series-a: #ff6358 !default;
+$series-a: #4b5ffa !default;
 $series-a-dark: mix(black, $series-a, 25%) !default;
 $series-a-darker: mix(black, $series-a, 50%) !default;
 $series-a-light: mix(white, $series-a, 25%) !default;
@@ -9,7 +9,7 @@ $series-a-lighter: mix(white, $series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$series-b: #ffd246 !default;
+$series-b: #ac58ff !default;
 $series-b-dark: mix(black, $series-b, 25%) !default;
 $series-b-darker: mix(black, $series-b, 50%) !default;
 $series-b-light: mix(white, $series-b, 25%) !default;
@@ -17,7 +17,7 @@ $series-b-lighter: mix(white, $series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$series-c: #78d237 !default;
+$series-c: #ff5892 !default;
 $series-c-dark: mix(black, $series-c, 25%) !default;
 $series-c-darker: mix(black, $series-c, 50%) !default;
 $series-c-light: mix(white, $series-c, 25%) !default;
@@ -25,7 +25,7 @@ $series-c-lighter: mix(white, $series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$series-d: #28b4c8 !default;
+$series-d: #ff6358 !default;
 $series-d-dark: mix(black, $series-d, 25%) !default;
 $series-d-darker: mix(black, $series-d, 50%) !default;
 $series-d-light: mix(white, $series-d, 25%) !default;
@@ -33,7 +33,7 @@ $series-d-lighter: mix(white, $series-d, 50%) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$series-e: #2d73f5 !default;
+$series-e: #ffe162 !default;
 $series-e-dark: mix(black, $series-e, 25%) !default;
 $series-e-darker: mix(black, $series-e, 50%) !default;
 $series-e-light: mix(white, $series-e, 25%) !default;
@@ -41,7 +41,7 @@ $series-e-lighter: mix(white, $series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$series-f: #aa46be !default;
+$series-f: #4cd180 !default;
 $series-f-dark: mix(black, $series-f, 25%) !default;
 $series-f-darker: mix(black, $series-f, 50%) !default;
 $series-f-light: mix(white, $series-f, 25%) !default;

package/scss/dateinput/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../popup/_index.scss";
+@import "../icons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/dateinput/_layout.scss

@@ -0,0 +1,6 @@
+@include exports("dateinput/layout") {
+
+    // Date input
+    .k-dateinput {}
+
+}

package/scss/dateinput/_theme.scss

@@ -0,0 +1,6 @@
+@include exports("dateinput/theme") {
+
+    // Date input
+    .k-dateinput {}
+
+}

package/scss/dateinput/_variables.scss

@@ -0,0 +1 @@
+// Dateinput

package/scss/datepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_index.scss";
+@import "../popup/_index.scss";
+@import "../icons/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/datepicker/_layout.scss

@@ -0,0 +1,6 @@
+@include exports("datepicker/layout") {
+
+    // Date picker
+    .k-datepicker {}
+
+}