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

package/scss/multiselect/_layout.scss

@@ -1,202 +1,6 @@
-@include exports("multiselect/layout") {
+@include exports( "multiselect/layout" ) {
 
-    // Base
-    .k-multiselect {
-        @include border-radius( $kendo-input-border-radius );
-        width: $multiselect-width;
-        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;
+    // Multiselect
+    .k-multiselect {}
 
-        .k-loading-hidden {
-            visibility: hidden;
-        }
-
-        .k-multiselect-wrap {
-            @include border-radius( $kendo-input-border-radius );
-            padding: 0 $kendo-input-icon-width 0 0;
-            width: 100%;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-block no-transition-all
-            cursor: text;
-            outline: 0;
-
-            // Input
-            .k-input {
-                float: left;
-            }
-
-            // Height placeholder
-            &::before {
-                content: "";
-                width: 0;
-                height: $kendo-input-inner-calc-height;
-                float: left;
-            }
-
-            // Token list
-            ul {
-                vertical-align: top;
-            }
-            li {
-                &.k-button {
-                    float: left;
-                }
-                .k-icon {
-                    cursor: pointer;
-                }
-            }
-
-
-            // Token
-            .k-button {
-                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;
-                flex-direction: row;
-                align-items: center;
-                gap: $icon-spacing;
-                line-height: inherit;
-                white-space: normal;
-
-                .k-select {
-                    display: flex;
-                    cursor: pointer;
-                    align-self: stretch;
-                }
-
-                &:last-child {
-                    margin-bottom: $padding-y-sm;
-                }
-            }
-
-            .k-searchbar {
-                // search bar must be floated to align after any selected tags
-                // (or align below them, if space is not available)
-                float: left;
-                width: auto;
-
-                .k-input {
-                    padding-right: 0;
-                }
-            }
-
-            .k-i-loading {
-                width: $kendo-input-icon-width;
-                height: $kendo-input-icon-height;
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-
-            // Clear value
-            .k-clear-value {
-                visibility: hidden;
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-            &:hover,
-            &.k-state-hover,
-            &.k-state-focused {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-
-            // Select
-            > .k-select {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: $kendo-input-icon-width;
-                height: $kendo-input-icon-height;
-                flex-shrink: 0;
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                outline: 0;
-                cursor: pointer;
-            }
-        }
-
-        .k-multiselect-wrap.k-multiselect-wrap-arrow .k-clear-value {
-            right: $multiselect-clear-right;
-        }
-
-
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            > .k-multiselect-wrap {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
-
-            .k-multiselect-wrap {
-                padding-left: $kendo-input-icon-width;
-                padding-right: 0;
-
-                &::before,
-                li.k-button,
-                .k-input {
-                    float: right;
-                }
-
-                .k-searchbar {
-                    float: right;
-
-                    .k-input {
-                        padding-left: 0;
-                        padding-right: $kendo-input-padding-x;
-                    }
-                }
-
-                .k-button {
-                    width: auto;
-                    margin-right: $padding-y-sm;
-                    margin-left: 0;
-                }
-
-                // Select
-                > .k-select {
-                    left: 0;
-                    right: auto;
-                }
-            }
-
-            .k-clear-value,
-            .k-i-loading {
-                right: auto;
-                left: 0;
-            }
-
-            .k-multiselect-wrap.k-multiselect-wrap-arrow .k-clear-value {
-                left: $multiselect-clear-right;
-                right: auto;
-            }
-        }
-    }
 }

package/scss/multiselect/_theme.scss

@@ -1,142 +1,6 @@
-@include exports("multiselect/theme") {
+@include exports( "multiselect/theme" ) {
 
-    .k-multiselect {
-
-        &.k-state-focused {
-            > .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-
-                // Invalid + focused
-                &.k-invalid,
-                &.k-invalid:hover,
-                &.k-state-invalid {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-            // Invalid + focused
-            &.k-state-invalid,
-            &.ng-invalid.ng-touched,
-            &.ng-invalid.ng-dirty {
-                .k-multiselect-wrap {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-
-        }
-
-        .k-multiselect-wrap {
-            @include fill(
-                $multiselect-text,
-                $multiselect-bg,
-                $multiselect-border
-            );
-
-            > .k-readonly {
-                opacity: .6;
-            }
-
-
-            .k-button {
-                .k-icon {
-                    opacity: .6;
-                }
-
-                .k-icon:hover,
-                .k-icon.k-state-hover {
-                    opacity: 1;
-                }
-
-                &:active,
-                &.k-state-active {
-                    @include fill(
-                        $multiselect-button-focused-text,
-                        $multiselect-button-focused-bg,
-                        $multiselect-button-focused-border,
-                        $multiselect-button-focused-gradient
-                    );
-                    @include box-shadow( $multiselect-button-focused-shadow );
-                }
-
-                // Focused state
-                &:focus,
-                &.k-state-focused {
-                    .k-icon {
-                        opacity: 1;
-                    }
-                }
-            }
-
-            .k-i-loading {
-                background-color: $multiselect-bg;
-            }
-
-
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-            }
-        }
-
-        // Invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-multiselect {
-        &.k-state-hover {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-multiselect-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
+    // Multiselect
+    .k-multiselect {}
 
 }

package/scss/multiselect/_variables.scss

@@ -1,37 +1 @@
 // Multiselect
-$multiselect-width: 100% !default;
-
-$multiselect-token-opacity: .07 !default;
-$multiselect-token-focused-opacity: .46 !default;
-$multiselect-token-focused-text: $base-bg !default;
-$multiselect-token-focused-bg: $base-text !default;
-$multiselect-token-disabled-text: rgba( $base-text, .42 ) !default;
-$multiselect-token-hover-text: $base-bg !default;
-$multiselect-token-hover-bg: rgba( $base-text, .54 ) !default;
-$multiselect-remove-text: $base-bg !default;
-$multiselect-remove-bg: rgba( $base-text, .4 ) !default;
-$multiselect-remove-hover-text: $multiselect-remove-text !default;
-$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: $kendo-input-bg !default;
-$multiselect-text: $kendo-input-text !default;
-$multiselect-border: $kendo-input-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: $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: $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} + #{$kendo-input-padding-y} ) !default;

package/scss/notification/_layout.scss

@@ -33,6 +33,12 @@
         display: block;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-notification-wrap {
@@ -76,25 +82,3 @@
     }
 
 }
-
-
-
-
-@include exports("notification/layout/ie9") {
-
-
-    .k-ie9 .k-notification-wrap {
-        white-space: nowrap;
-
-        > .k-icon {
-            vertical-align: top;
-        }
-
-        > .k-notification-content {
-            display: inline-block;
-            vertical-align: middle;
-            white-space: normal;
-        }
-    }
-
-}

package/scss/numerictextbox/_layout.scss

@@ -1,6 +1,10 @@
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
 
 }

package/scss/numerictextbox/_theme.scss

@@ -1,6 +1,6 @@
 @include exports( "numerictextbox/theme" ) {
 
     // Numeric textbox
-    .k-numerictextbox {}
+    .k-numeric-textbox {}
 
 }

package/scss/numerictextbox/_variables.scss

@@ -1 +1 @@
-// Numeric textbox
+// Numeric Textbox

package/scss/orgchart/_layout.scss

@@ -9,6 +9,12 @@
         font-family: $orgchart-font-family;
         line-height: $orgchart-line-height;
         overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-orgchart-container {

package/scss/orgchart/_variables.scss

@@ -40,10 +40,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-lg !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;

package/scss/pager/_index.scss

@@ -6,6 +6,7 @@
 @import "../dropdownlist/_index.scss";
 @import "../icons/_index.scss";
 @import "../toolbar/_variables.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/pager/_layout.scss

@@ -18,6 +18,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-link {
             text-decoration: none;
             outline: 0;
@@ -31,11 +37,6 @@
             }
         }
 
-        .k-widget,
-        select.k-dropdown {
-            font-size: inherit;
-        }
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
@@ -70,7 +71,6 @@
     %base-pager-item {
         min-width: $kendo-button-calc-size;
         height: $kendo-button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -103,7 +103,7 @@
         flex-direction: row;
         position: relative;
 
-        select.k-dropdown {
+        select.k-dropdown-list {
             cursor: pointer;
             display: none;
         }
@@ -171,7 +171,7 @@
     .k-pager-sizes {
         @extend %base-pager-section;
 
-        .k-dropdown,
+        .k-dropdown-list,
         > select {
             margin-right: 1ex;
             width: $pager-dropdown-width;
@@ -179,7 +179,7 @@
 
         .k-rtl &,
         [dir="rtl"] & {
-            .k-dropdown,
+            .k-dropdown-list,
             > select {
                 margin-left: 1ex;
                 margin-right: 0;
@@ -217,7 +217,7 @@
 
         // Show native select
         .k-pager-numbers-wrap {
-            select.k-dropdown {
+            select.k-dropdown-list {
                 width: $pager-dropdown-width;
                 display: flex;
             }
@@ -230,7 +230,6 @@
             }
 
             height: $kendo-button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 

package/scss/pager/_theme.scss

@@ -133,15 +133,15 @@
                     &:hover,
                     &.k-state-hover {
                         @include fill(
-                            $list-item-hovered-text,
-                            $list-item-hovered-bg
+                            $kendo-list-item-hover-text,
+                            $kendo-list-item-hover-bg
                         );
                     }
 
                     &.k-state-selected {
                         @include fill(
-                            $list-item-selected-text,
-                            $list-item-selected-bg
+                            $kendo-list-item-selected-text,
+                            $kendo-list-item-selected-bg
                         );
                     }
 

package/scss/pager/_variables.scss

@@ -26,17 +26,17 @@ $pager-item-bg: null !default;
 $pager-item-text: null !default;
 $pager-item-border: null !default;
 
-$pager-item-hover-bg: $list-item-hovered-bg !default;
-$pager-item-hover-text: $list-item-hovered-text !default;
+$pager-item-hover-bg: $kendo-list-item-hover-bg !default;
+$pager-item-hover-text: $kendo-list-item-hover-text !default;
 $pager-item-hover-border: null !default;
 
-$pager-item-selected-bg: $list-item-selected-bg !default;
-$pager-item-selected-text: $list-item-selected-text !default;
+$pager-item-selected-bg: $kendo-list-item-selected-bg !default;
+$pager-item-selected-text: $kendo-list-item-selected-text !default;
 $pager-item-selected-border: null !default;
 
 $pager-item-focus-opacity: null !default;
 $pager-item-focus-bg: transparent !default;
-$pager-item-focus-shadow: $list-item-focused-shadow !default;
+$pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $pager-number-padding-x: $pager-item-padding-x !default;
 $pager-number-padding-y: $pager-item-padding-y !default;
@@ -62,5 +62,5 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: transparent !default;
 $pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;

package/scss/panelbar/_index.scss

@@ -4,6 +4,7 @@
 // Dependencies
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/panelbar/_layout.scss

@@ -16,6 +16,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Root
         > .k-item,
@@ -134,59 +140,6 @@
 
 
 
-@include exports( "panelbar/layout/legacy" ) {
-
-    .k-no-flexbox .k-panelbar {
-
-        // Item
-        > .k-item > .k-link,
-        .k-group > .k-link {
-            display: block;
-        }
-
-        // Icons
-        .k-link > .k-image,
-        .k-link > .k-sprite,
-        .k-link > .k-icon {
-            margin-right: $icon-spacing;
-        }
-
-        // Expand collapse
-        .k-panelbar-expand,
-        .k-panelbar-collapse {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            transform: translateY( -50% );
-            position: absolute;
-            top: 50%;
-            right: $panelbar-header-padding-x;
-        }
-
-    }
-
-
-    .k-no-flexbox .k-panelbar[dir="rtl"],
-    .k-no-flexbox .k-rtl .k-panelbar {
-
-        .k-link > .k-image,
-        .k-link > .k-sprite,
-        .k-link > .k-icon {
-            margin-left: $icon-spacing;
-            margin-right: 0;
-        }
-
-        .k-panelbar-expand,
-        .k-panelbar-collapse {
-            right: auto;
-            left: $panelbar-header-padding-x;
-        }
-
-    }
-
-}
-
-
-
-
 @include exports( "panelbar/layout/compatibility" ) {
 
     .k-ie {