@progress/kendo-theme-default 5.0.0-next.5 → 5.0.0

package/scss/colorpicker/_layout.scss

@@ -1,136 +1,13 @@
-@include exports("colorpicker/layout") {
+@include exports( "colorpicker/layout" ) {
 
-    .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: $kendo-button-padding-y;
-            width: $kendo-button-inner-calc-size;
-            height: $kendo-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: $kendo-button-padding-y;
-            width: $kendo-button-inner-calc-size;
-            height: $kendo-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( $kendo-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( $kendo-input-border-radius );
-            padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $kendo-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( $kendo-input-border-radius );
-                    border-width: 0 $colorpicker-select-border-width 0 0;
-                }
-            }
-        }
-
-    }
-
-    .k-colorpicker-popup .k-coloreditor {
-        border-color: transparent;
+    // Color picker
+    .k-color-picker {
+        width: min-content;
     }
 
-    .k-colorpicker-popup {
-        padding: 0;
+    // Alias
+    .k-colorpicker {
+        @extend .k-color-picker;
     }
 
 }

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);
-                }
-            }
-        }
-
-    }
+    // Color picker
+    .k-color-picker {}
 
 }

package/scss/colorpicker/_variables.scss

@@ -1,22 +1 @@
-// Colorpicker
-$colorpicker-font-family: $font-family !default;
-$colorpicker-font-size: $font-size !default;
-$colorpicker-line-height: $line-height !default;
-
-$colorpicker-select-border-width: 1px !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: $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: $kendo-button-focus-shadow !default;
+// Color picker

package/scss/combobox/_index.scss

@@ -7,6 +7,7 @@
 @import "../floating-label/_index.scss";
 @import "../icons/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/combobox/_layout.scss

@@ -1,86 +1,6 @@
-@include exports("combobox/layout") {
+@include exports( "combobox/layout" ) {
 
-    .k-combobox {
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        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;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+    // Combobox
+    .k-combobox {}
 
-        .k-dropdown-wrap {
-            @include border-radius( $kendo-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 {}
-
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus,
-        .k-dropdown-wrap.k-state-hover,
-        .k-dropdown-wrap.k-state-focused {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $kendo-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( $kendo-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") {
+@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 @@
-// Comboboxes
-$combobox-select-padding-x: 0px !default;
-$combobox-select-padding-y: 0px !default;
-$combobox-select-width: $kendo-button-inner-calc-size !default;
-$combobox-select-border-width: 0px !default;
-
-$combobox-bg: $kendo-input-bg !default;
-$combobox-text: $kendo-input-text !default;
-$combobox-border: $kendo-input-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: $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: $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: $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: $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;
+// Combobox

package/scss/common/_base.scss

@@ -127,6 +127,7 @@
 
         // Nested disabled
         [disabled],
+        .k-disabled,
         .k-state-disabled {
             opacity: 1;
             filter: grayscale(0);

package/scss/common/_loading.scss

@@ -1,26 +1,23 @@
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
     .k-loading-color {
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
         position: absolute;
         top: 0;
         left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-loading-mask {
@@ -51,6 +48,11 @@
         background-color: transparent;
         box-sizing: border-box;
         color: currentColor;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-i-loading::before,
@@ -100,7 +102,7 @@
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }

package/scss/core/_normalize.scss

@@ -1,16 +1,5 @@
 @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/functions/_colors.scss

@@ -314,6 +314,9 @@ $yiq-light: if(
     white
 ) !default;
 
+$wcag-dark: black !default;
+$wcag-light: white !default;
+
 // Calculate the luminance for a color.
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function luminance($color) {
@@ -409,7 +412,7 @@ $yiq-light: if(
     // @debug yiq;
     @return $out;
 }
-@function contrast-wcag($color, $dark: #000000, $light: #ffffff) {
+@function contrast-wcag($color, $dark: $wcag-dark, $light: $wcag-light) {
     $luma: luminance($color);
     $out: if($luma < .5, $light, $dark);
     // @debug $luma;

package/scss/core/mixins/_index.scss

@@ -1,6 +1,7 @@
 // Core
 @import "_import-once.scss";
 @import "_data-uri.scss";
+@import "_module-system.scss";
 
 
 // Utils