@progress/kendo-theme-default 5.0.0-alpha.2 → 5.0.0-beta.2

package/scss/menu/_layout.scss

@@ -23,12 +23,20 @@
     .k-menu-item {
         border-width: 0;
         outline: 0;
-        display: flex;
-        flex: 0 0 auto;
         position: relative;
         user-select: none;
     }
 
+    .k-menu-item-content {
+        display: block;
+        height: auto;
+        overflow: visible;
+
+        .k-actions {
+            margin-top: 0;
+        }
+    }
+
 
     // Menu link
     .k-menu-link {
@@ -53,23 +61,12 @@
 
     // Expand arrow
     .k-menu-expand-arrow {
-        margin-left: $icon-spacing;
-        margin-right: -$icon-spacing;
-        position: relative;
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-left,
-    .k-menu-expand-arrow.k-i-arrow-60-right {
         margin: 0;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-    }
-    .k-menu-expand-arrow.k-i-arrow-60-right {
         right: $icon-spacing;
     }
-    .k-menu-expand-arrow.k-i-arrow-60-left {
-        left: $icon-spacing;
-    }
 
 
     // Orientation -- horizontal
@@ -99,8 +96,8 @@
         }
 
         > .k-menu-item > .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
+            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-right: $kendo-menu-popup-item-padding-end;
         }
 
         > .k-separator {
@@ -116,7 +113,7 @@
 
     // Menu popup
     .k-menu-popup {
-        border-width: $menu-popup-border-width;
+        border-width: $kendo-menu-popup-border-width;
         border-style: solid;
         overflow: auto;
         max-height: 80vh;
@@ -126,9 +123,7 @@
     // Sub menu
     .k-menu-group {
         margin: 0;
-        padding: $menu-popup-padding-y $menu-popup-padding-x;
-        font-size: $menu-popup-font-size;
-        line-height: $menu-popup-line-height;
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
         list-style: none;
         display: none;
         position: absolute;
@@ -139,19 +134,8 @@
             flex-direction: column;
         }
 
-        // jquery popup overrides those
-        .k-menu-item {
-            font-size: $menu-popup-font-size;
-            line-height: $menu-popup-line-height;
-        }
-
         .k-menu-item + .k-menu-item {
-            margin-top: $menu-popup-item-spacing;
-        }
-
-        .k-menu-link {
-            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
-            padding-right: $menu-popup-item-padding-end;
+            margin-top: $kendo-menu-popup-item-spacing;
         }
 
         .k-separator {
@@ -164,6 +148,53 @@
         }
     }
 
+    // Sizes
+    .k-menu-group-sm {
+        font-size: $kendo-menu-popup-font-size-sm;
+        line-height: $kendo-menu-popup-line-height-sm;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-sm;
+            line-height: $kendo-menu-popup-line-height-sm;
+        }
+
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-sm $kendo-menu-popup-item-padding-x-sm;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-sm;
+        }
+    }
+    .k-menu-group-md {
+        font-size: $kendo-menu-popup-font-size-md;
+        line-height: $kendo-menu-popup-line-height-md;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-md;
+            line-height: $kendo-menu-popup-line-height-md;
+        }
+
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-md;
+        }
+    }
+    .k-menu-group-lg {
+        font-size: $kendo-menu-popup-font-size-lg;
+        line-height: $kendo-menu-popup-line-height-lg;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-font-size-lg;
+            line-height: $kendo-menu-popup-line-height-lg;
+        }
+
+        .k-menu-link {
+            padding: $kendo-menu-popup-item-padding-y-lg $kendo-menu-popup-item-padding-x-lg;
+            padding-inline-end: $kendo-menu-popup-item-padding-end-lg;
+        }
+    }
+
 
     // Context menu
     .k-popups-wrapper {
@@ -174,12 +205,12 @@
     }
     .k-context-menu {
         margin: 0;
-        padding: $menu-popup-padding-y $menu-popup-padding-x;
-        border-width: $menu-popup-border-width;
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        border-width: $kendo-menu-popup-border-width;
         border-style: solid;
 
         &.k-menu-horizontal {
-            padding: $menu-popup-padding-x $menu-popup-padding-y;
+            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
         }
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {
@@ -262,9 +293,9 @@
             }
         }
 
-        .k-menu-expand-arrow.k-i-arrow-60-down {
-            margin-left: -$icon-spacing;
-            margin-right: $icon-spacing;
+        .k-menu-expand-arrow {
+            right: unset;
+            left: $icon-spacing;
         }
 
 
@@ -282,8 +313,8 @@
         .k-menu-vertical {
 
             > .k-menu-item > .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
             }
         }
 
@@ -292,8 +323,8 @@
         .k-menu-group {
 
             .k-menu-link {
-                padding-right: $menu-popup-item-padding-x;
-                padding-left: $menu-popup-item-padding-end;
+                padding-right: $kendo-menu-popup-item-padding-x;
+                padding-left: $kendo-menu-popup-item-padding-end;
             }
 
         }

package/scss/menu/_theme.scss

@@ -17,7 +17,7 @@
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill(
                     $menu-item-hover-text,
                     $menu-item-hover-bg,
@@ -26,7 +26,8 @@
                 );
             }
 
-            > .k-state-active {
+            &:active,
+            &.k-active {
                 @include fill(
                     $menu-item-expanded-text,
                     $menu-item-expanded-bg,
@@ -36,7 +37,7 @@
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-focus {
                 @include box-shadow( $menu-item-focus-shadow );
             }
         }
@@ -45,42 +46,44 @@
     .k-menu-group,
     .k-menu.k-context-menu {
         @include fill(
-            $menu-popup-text,
-            $menu-popup-bg,
-            $menu-popup-border,
-            $menu-popup-gradient
+            $kendo-menu-popup-text,
+            $kendo-menu-popup-bg,
+            $kendo-menu-popup-border,
+            $kendo-menu-popup-gradient
         );
 
-        .k-item {
+        .k-item > .k-link {
             @include fill(
-                $menu-popup-item-text,
-                $menu-popup-item-bg,
-                $menu-popup-item-border,
-                $menu-popup-item-gradient
+                $kendo-menu-popup-item-text,
+                $kendo-menu-popup-item-bg,
+                $kendo-menu-popup-item-border,
+                $kendo-menu-popup-item-gradient
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill(
-                    $menu-popup-item-hover-text,
-                    $menu-popup-item-hover-bg,
-                    $menu-popup-item-hover-border,
-                    $menu-popup-item-hover-gradient
+                    $kendo-menu-popup-item-hover-text,
+                    $kendo-menu-popup-item-hover-bg,
+                    $kendo-menu-popup-item-hover-border,
+                    $kendo-menu-popup-item-hover-gradient
                 );
             }
 
-            > .k-state-active {
+            &:active,
+            &.k-active,
+            &.k-selected {
                 @include fill(
-                    $menu-popup-item-expanded-text,
-                    $menu-popup-item-expanded-bg,
-                    $menu-popup-item-expanded-border,
-                    $menu-popup-item-expanded-gradient
+                    $kendo-menu-popup-item-expanded-text,
+                    $kendo-menu-popup-item-expanded-bg,
+                    $kendo-menu-popup-item-expanded-border,
+                    $kendo-menu-popup-item-expanded-gradient
                 );
             }
 
             &:focus,
-            &.k-state-focused {
-                @include box-shadow( $menu-popup-item-focus-shadow );
+            &.k-focus {
+                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }
     }

package/scss/menu/_variables.scss

@@ -31,9 +31,9 @@ $menu-item-expanded-text: $component-text !default;
 $menu-item-expanded-border: null !default;
 $menu-item-expanded-gradient: null !default;
 
-$menu-item-focus-shadow: $list-item-focused-shadow !default;
+$menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: 2px !default;
+$menu-separator-spacing: 0px !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;
@@ -47,36 +47,115 @@ $menu-scroll-button-hover-gradient: null !default;
 
 
 // Menu popup
-$menu-popup-padding-x: $popup-padding-x !default;
-$menu-popup-padding-y: $popup-padding-y !default;
-$menu-popup-border-width: $popup-border-width !default;
-$menu-popup-font-size: $font-size !default;
-$menu-popup-line-height: $line-height !default;
-
-$menu-popup-bg: $popup-bg !default;
-$menu-popup-text: $popup-text !default;
-$menu-popup-border: $popup-border !default;
-$menu-popup-gradient: null !default;
-
-$menu-popup-item-padding-x: $list-item-padding-x !default;
-$menu-popup-item-padding-y: $list-item-padding-y !default;
-$menu-popup-item-padding-end: calc( #{$list-item-padding-x * 2} + #{$icon-size} ) !default;
-$menu-popup-item-spacing: 0px !default;
-$menu-popup-item-icon-spacing: $icon-spacing !default;
-
-$menu-popup-item-bg: null !default;
-$menu-popup-item-text: null !default;
-$menu-popup-item-border: null !default;
-$menu-popup-item-gradient: null !default;
-
-$menu-popup-item-hover-bg: $list-item-hovered-bg !default;
-$menu-popup-item-hover-text: $list-item-hovered-text !default;
-$menu-popup-item-hover-border: null !default;
-$menu-popup-item-hover-gradient: null !default;
-
-$menu-popup-item-expanded-bg: $list-item-selected-bg !default;
-$menu-popup-item-expanded-text: $list-item-selected-text !default;
-$menu-popup-item-expanded-border: null !default;
-$menu-popup-item-expanded-gradient: null !default;
-
-$menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;
+
+/// Horizontal padding of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-padding-x: null !default;
+
+/// Vertical padding of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-padding-y: null !default;
+
+/// Width of the border around the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-border-width: $popup-border-width !default;
+
+/// Font sizes of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-font-size: $font-size !default;
+$kendo-menu-popup-font-size-sm: $font-size-sm !default;
+$kendo-menu-popup-font-size-md: $font-size !default;
+$kendo-menu-popup-font-size-lg: $font-size-lg !default;
+
+/// Line heights used along with $font-size.
+/// @group menu-popup
+$kendo-menu-popup-line-height: $line-height !default;
+$kendo-menu-popup-line-height-sm: $line-height-lg !default;
+$kendo-menu-popup-line-height-md: $line-height !default;
+$kendo-menu-popup-line-height-lg: $line-height-lg !default;
+
+/// The background of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-bg: $popup-bg !default;
+/// The text color of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-text: $popup-text !default;
+/// The border color of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-border: $popup-border !default;
+/// The background gradient of the menu popup.
+/// @group menu-popup
+$kendo-menu-popup-gradient: null !default;
+
+
+// Menu popup item
+
+/// Horizontal padding of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-padding-x: null !default;
+$kendo-menu-popup-item-padding-x-base: map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-sm: ( $kendo-menu-popup-item-padding-x-base * .75 ) !default;
+$kendo-menu-popup-item-padding-x-md: $kendo-menu-popup-item-padding-x-base !default;
+$kendo-menu-popup-item-padding-x-lg: ( $kendo-menu-popup-item-padding-x-base * 1.25 ) !default;
+
+/// Vertical padding of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-padding-y: null !default;
+$kendo-menu-popup-item-padding-y-base: map-get( $spacing, 1 ) !default;
+$kendo-menu-popup-item-padding-y-sm: ( $kendo-menu-popup-item-padding-y-base * .75 ) !default;
+$kendo-menu-popup-item-padding-y-md: $kendo-menu-popup-item-padding-y-base !default;
+$kendo-menu-popup-item-padding-y-lg: ( $kendo-menu-popup-item-padding-y-base * 1.25 ) !default;
+
+/// The end padding of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-padding-end: null !default;
+$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$icon-size} ) !default;
+$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$icon-size} ) !default;
+
+/// The spacing between the menu items in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-spacing: 0px !default;
+
+/// The background of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-bg: null !default;
+/// The text color of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-text: null !default;
+/// The border color of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-border: null !default;
+/// The background gradient of the menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-gradient: null !default;
+
+/// The background of hovered menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+/// The text color of hovered menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
+/// The border color of hovered menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-hover-border: null !default;
+/// The background gradient of hovered menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-hover-gradient: null !default;
+
+/// The background of expanded menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
+/// The text color of expanded menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
+/// The border color of expanded menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-expanded-border: null !default;
+/// The background gradient of expanded menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-expanded-gradient: null !default;
+
+/// The base shadow of focused menu item in popup.
+/// @group menu-popup-item
+$kendo-menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;

package/scss/multiselect/_index.scss

@@ -3,11 +3,13 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../forms/_variables.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/multiselect/_layout.scss

@@ -1,183 +1,3 @@
 @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;
-
-        .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 {
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-
-            // 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;
-        }
-
-        &[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;
-            }
-        }
-    }
 }