@progress/kendo-theme-default 5.3.2-dev.0 → 5.3.2-dev.3

package/scss/index.scss

@@ -42,6 +42,8 @@
 
 // Native forms
 @import "button/_index.scss";
+@import "split-button/_index.scss";
+@import "menu-button/_index.scss";
 @import "input/_index.scss";
 @import "textbox/_index.scss";
 @import "textarea/_index.scss";

package/scss/input/_layout.scss

@@ -341,19 +341,25 @@
         @include border-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
-        background: none !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
 
-        .k-input-inner {
-            padding-left: 0 !important; // sass-lint:disable-line no-important
-            padding-right: 0 !important; // sass-lint:disable-line no-important
+        &:focus,
+        &.k-focus {
+            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
+        }
+        &:focus-within {
+            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
         }
     }
 
-    .k-input-outline,
-    .k-picker-outline {
+    .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
+    .k-picker.k-picker-flat {
+        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
+    }
+
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {

package/scss/input/_theme.scss

@@ -148,4 +148,216 @@
         }
     }
 
+    // Outline
+    .k-input-outline {
+        @include fill (
+            $kendo-input-outline-text,
+            $kendo-input-outline-bg,
+            $kendo-input-outline-border
+        );
+
+        & > .k-input-button {
+            border-color: inherit;
+        }
+
+        & > .k-input-spinner {
+            border-color: inherit;
+
+            & > .k-spinner-increase,
+            & > .k-spinner-decrease {
+                border-color: inherit;
+           }
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-outline-hover-text,
+                $kendo-input-outline-hover-bg,
+                $kendo-input-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+    }
+
+    .k-picker-outline {
+        @include fill (
+            $kendo-picker-outline-text,
+            $kendo-picker-outline-bg,
+            $kendo-picker-outline-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-text,
+                $kendo-picker-outline-hover-bg,
+                $kendo-picker-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-focus-text,
+                $kendo-picker-outline-hover-focus-bg,
+                $kendo-picker-outline-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+    }
+
+    // Flat
+    .k-input-flat {
+        @include fill (
+            $kendo-input-flat-text,
+            $kendo-input-flat-bg,
+            $kendo-input-flat-border
+        );
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
+    .k-picker-flat {
+        @include fill (
+            $kendo-picker-flat-text,
+            $kendo-picker-flat-bg,
+            $kendo-picker-flat-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-text,
+                $kendo-picker-flat-hover-bg,
+                $kendo-picker-flat-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-focus-text,
+                $kendo-picker-flat-hover-focus-bg,
+                $kendo-picker-flat-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
 }

package/scss/input/_variables.scss

@@ -77,6 +77,29 @@ $kendo-input-disabled-border: null !default;
 $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
+$kendo-input-outline-bg: null !default;
+$kendo-input-outline-text: null !default;
+$kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
+
+$kendo-input-outline-hover-bg: null !default;
+$kendo-input-outline-hover-text: null !default;
+$kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
+
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: $kendo-input-outline-border !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
+
+$kendo-input-flat-bg: transparent !default;
+$kendo-input-flat-text: $kendo-input-text !default;
+$kendo-input-flat-border: $kendo-input-border !default;
+
+$kendo-input-flat-focus-bg: null !default;
+$kendo-input-flat-focus-text: null !default;
+$kendo-input-flat-focus-border: null !default;
+
+$kendo-input-flat-border-radius: $kendo-border-radius $kendo-border-radius 0px 0px !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -101,6 +124,40 @@ $kendo-picker-disabled-border: null !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
+$kendo-picker-outline-bg: transparent !default;
+$kendo-picker-outline-text: null !default;
+$kendo-picker-outline-border: $kendo-button-text !default;
+
+$kendo-picker-outline-hover-bg: $kendo-button-text !default;
+$kendo-picker-outline-hover-text: $body-bg !default;
+$kendo-picker-outline-hover-border: null !default;
+
+$kendo-picker-outline-focus-bg: transparent !default;
+$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
+$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
+
+$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
+$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
+$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+
+$kendo-picker-flat-bg: transparent !default;
+$kendo-picker-flat-text: $kendo-button-text !default;
+$kendo-picker-flat-border: $kendo-button-border !default;
+
+$kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+$kendo-picker-flat-hover-text: null !default;
+$kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
+
+$kendo-picker-flat-focus-bg: null !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-shadow: null !default;
+
+$kendo-picker-flat-hover-focus-bg: null !default;
+$kendo-picker-flat-hover-focus-text: null !default;
+$kendo-picker-flat-hover-focus-border: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 
@@ -118,7 +175,7 @@ $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
 // Input actions
 $kendo-input-button-width: $kendo-button-inner-calc-size !default;
-$kendo-input-button-border-width: 0px !default;
+$kendo-input-button-border-width: 1px !default;
 $kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
 $kendo-input-spinner-icon-offset: null !default;
 

package/scss/menu/_index.scss

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

package/scss/menu/_layout.scss

@@ -284,43 +284,44 @@
             overflow: hidden;
             flex-wrap: nowrap;
         }
-    }
-    .k-menu-scroll-button {
-        @include border-radius( 0 );
-        padding: 0;
-        border-width: 0;
-        border-color: inherit;
-        color: inherit;
-        background: inherit;
-        position: absolute;
 
-        &.k-scroll-left {
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 16px;
-            border-right-width: 1px;
-        }
-        &.k-scroll-right {
-            top: 0;
-            right: 0;
-            height: 100%;
-            width: 16px;
-            border-left-width: 1px;
-        }
-        &.k-scroll-up {
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 16px;
-            border-bottom-width: 1px;
-        }
-        &.k-scroll-down {
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 16px;
-            border-top-width: 1px;
+        .k-menu-scroll-button {
+            @include border-radius( 0 );
+            padding: 0;
+            border-width: 0;
+            border-color: inherit;
+            color: inherit;
+            background: inherit;
+            position: absolute;
+
+            &.k-scroll-left {
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 16px;
+                border-right-width: 1px;
+            }
+            &.k-scroll-right {
+                top: 0;
+                right: 0;
+                height: 100%;
+                width: 16px;
+                border-left-width: 1px;
+            }
+            &.k-scroll-up {
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 16px;
+                border-bottom-width: 1px;
+            }
+            &.k-scroll-down {
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: 16px;
+                border-top-width: 1px;
+            }
         }
     }
 

package/scss/menu/_theme.scss

@@ -82,9 +82,9 @@
             }
         }
 
-        .k-item {
-            &:focus,
-            &.k-focus {
+        .k-item:focus,
+        .k-item.k-focus {
+            > .k-link {
                 @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }
@@ -92,7 +92,7 @@
 
 
     // Scrolling
-    .k-menu-scroll-button {
+    .k-menu-scroll-wrapper .k-menu-scroll-button {
         @include fill(
             $menu-scroll-button-text,
             $menu-scroll-button-bg,

package/scss/menu-button/_index.scss

@@ -0,0 +1,12 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../menu/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/menu-button/_layout.scss

@@ -0,0 +1,29 @@
+@include exports("menu-button/layout") {
+
+    // Menu button
+    .k-menu-button,
+    .k-dropdown-button {
+        aspect-ratio: auto;
+        outline: 0;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+
+        > .k-button-arrow {
+            margin-inline-start: -$kendo-menu-button-arrow-padding-x;
+            margin-inline-end: -$kendo-button-padding-x;
+            padding-left: $kendo-menu-button-arrow-padding-x;
+            padding-right: $kendo-menu-button-arrow-padding-x;
+            flex: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.k-icon-button > .k-button-arrow {
+            margin-inline-start: 0;
+            margin-inline-end: -$kendo-button-padding-y;
+        }
+    }
+
+}

package/scss/menu-button/_theme.scss

@@ -0,0 +1 @@
+@include exports("menu-button/theme") { }

package/scss/menu-button/_variables.scss

@@ -0,0 +1,5 @@
+// Menu-button
+
+/// Horizontal padding of the arrow button.
+/// @group menu-button
+$kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default;

package/scss/orgchart/_theme.scss

@@ -18,6 +18,7 @@
         }
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
@@ -32,6 +33,7 @@
         );
     }
     .k-orgchart-node-group-container:focus,
+    .k-orgchart-node-group-container.k-focus,
     .k-orgchart-node-group-container.k-state-focus,
     .k-orgchart-node-group-container.k-state-focused {
         @include box-shadow( $orgchart-node-group-focus-shadow );

package/scss/panelbar/_layout.scss

@@ -28,7 +28,7 @@
         > .k-panelbar-header {
             // TODO
             border-width: 0;
-            border-style: solid;
+            border-style: $panelbar-item-border-style;
             border-color: inherit;
             display: block;
 
@@ -51,7 +51,7 @@
         }
         > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: 1px;
+            border-top-width: $panelbar-item-border-width;
         }
 
 

package/scss/panelbar/_variables.scss

@@ -5,6 +5,8 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: $line-height !default;
 $panelbar-border-width: 1px !default;
+$panelbar-item-border-width: 1px !default;
+$panelbar-item-border-style: solid !default;
 
 $panelbar-header-padding-x: map-get( $spacing, 4 ) !default;
 $panelbar-header-padding-y: map-get( $spacing, 3 ) !default;

package/scss/split-button/_index.scss

@@ -0,0 +1,12 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../button/_index.scss";
+@import "../menu/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/split-button/_layout.scss

@@ -0,0 +1,40 @@
+@include exports("split-button/layout") {
+
+
+    // Split button arrow
+    .k-split-button .k-split-button-arrow {
+        padding: $kendo-split-button-arrow-padding-y $kendo-split-button-arrow-padding-x;
+        width: auto;
+        aspect-ratio: auto;
+        flex: none;
+
+        &.k-button-sm {
+            padding: $kendo-split-button-arrow-padding-y-sm $kendo-split-button-arrow-padding-x-sm;
+        }
+
+        &.k-button-md {
+            padding: $kendo-split-button-arrow-padding-y-md $kendo-split-button-arrow-padding-x-md;
+        }
+
+        &.k-button-lg {
+            padding: $kendo-split-button-arrow-padding-y-lg $kendo-split-button-arrow-padding-x-lg;
+        }
+
+        .k-button-icon {
+            min-width: 0;
+        }
+    }
+
+
+}
+
+
+@include exports("split-button/layout/legacy") {
+
+    .k-ie .k-split-button {
+        .k-button {
+            @include border-radius( 0 );
+        }
+    }
+
+}

package/scss/split-button/_theme.scss

@@ -0,0 +1,9 @@
+@include exports("split-button/theme") {
+
+    // Split button
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        @include box-shadow( $kendo-split-button-focus-shadow );
+    }
+
+}

package/scss/split-button/_variables.scss

@@ -0,0 +1,19 @@
+// Split-button
+
+/// Focus shadow of the split button.
+/// @group split-button
+$kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
+
+/// Horizontal padding of the arrow button.
+/// @group split-button
+$kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-split-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
+$kendo-split-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
+$kendo-split-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;
+
+/// Vertical padding of the arrow button.
+/// @group split-button
+$kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
+$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;

package/scss/taskboard/_layout.scss

@@ -181,8 +181,10 @@
             overflow-wrap: anywhere;
 
             &:focus,
+            &.k-focus,
             &.k-state-focus,
             &:hover,
+            &.k-hover,
             &.k-state-hover {
                 text-decoration: underline;
             }