@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

package/scss/components/menu/_layout.scss

@@ -0,0 +1,325 @@
+@use "../../color-system/_constants.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-menu--layout-base() {
+
+    // Menu bar
+    .k-menu-bar {
+        border-width: $kendo-menu-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-menu-font-family;
+        font-size: $kendo-menu-font-size;
+        line-height: $kendo-menu-line-height;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        position: relative;
+        cursor: default;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-menu { @extend .k-menu-bar !optional; }
+
+    // Menu item
+    .k-menu-item {
+        border-width: 0;
+        outline: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: none;
+        position: relative;
+        user-select: none;
+
+        &.k-selected {
+            font-weight: $kendo-menu-item-selected-font-weight;
+        }
+    }
+    .k-menu-item-content {
+        display: block;
+        height: auto;
+        overflow: visible;
+
+        .k-actions {
+            margin-top: 0;
+        }
+    }
+
+
+    // Menu link
+    .k-menu-link {
+        padding-block: $kendo-menu-item-padding-y;
+        padding-inline: $kendo-menu-item-padding-x;
+        outline: 0;
+        color: inherit;
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        gap: $kendo-menu-item-icon-spacing;
+        align-items: center;
+        position: relative;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+
+    // Menu item text
+    .k-menu-link-text {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
+    // Expand arrow
+    .k-menu-expand-arrow {
+        margin-inline-end: calc( #{$kendo-icon-spacing} * -1 );
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
+        position: relative;
+    }
+
+
+    // Orientation -- horizontal
+    .k-menu-horizontal {
+        flex-direction: row;
+
+        > .k-menu-item + .k-menu-item {
+            margin-inline-start: $kendo-menu-item-spacing;
+        }
+
+        > .k-separator {
+            margin-block: $kendo-menu-separator-margin-block;
+            margin-inline: $kendo-menu-separator-margin-inline;
+            width: 0;
+            height: auto;
+            border-width: 0 0 0 1px;
+            border-style: solid;
+        }
+    }
+
+
+    // Orientation -- vertical
+    .k-menu-vertical {
+        flex-direction: column;
+        width: 100%;
+
+        > .k-menu-item + .k-menu-item {
+            margin-top: $kendo-menu-item-spacing;
+        }
+
+        > .k-menu-item > .k-menu-link {
+            padding-block: $kendo-menu-popup-item-padding-y;
+            padding-inline: $kendo-menu-popup-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-item-padding-end;
+        }
+
+        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
+        }
+
+        > .k-separator {
+            margin-block: $kendo-menu-separator-margin-block;
+            margin-inline: 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            display: block;
+        }
+    }
+
+
+    // Menu popup
+    .k-menu-popup {
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
+        box-sizing: border-box;
+        border-width: $kendo-menu-popup-border-width;
+        border-style: solid;
+        overflow: auto;
+        max-height: 80vh;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-menu-item {
+            font-weight: initial;
+        }
+    }
+
+
+    // Sub menu
+    .k-menu-group {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-flow: column nowrap;
+        position: absolute;
+
+        .k-menu-item + .k-menu-item {
+            margin-top: $kendo-menu-popup-item-spacing;
+        }
+
+        .k-separator {
+            margin-block: $kendo-menu-separator-margin-inline;
+            margin-inline: 0;
+            height: 0;
+            border-width: 1px 0 0;
+            border-style: solid;
+            display: block;
+        }
+    }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
+
+
+    // Sizes
+    .k-menu-group-sm {
+        font-size: $kendo-menu-popup-sm-font-size;
+        line-height: $kendo-menu-popup-sm-line-height;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-sm-font-size;
+            line-height: $kendo-menu-popup-sm-line-height;
+        }
+
+        .k-menu-link {
+            padding-block: $kendo-menu-popup-sm-item-padding-y;
+            padding-inline: $kendo-menu-popup-sm-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
+        }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end;
+        }
+    }
+    .k-menu-group-md {
+        font-size: $kendo-menu-popup-md-font-size;
+        line-height: $kendo-menu-popup-md-line-height;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-md-font-size;
+            line-height: $kendo-menu-popup-md-line-height;
+        }
+
+        .k-menu-link {
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-md-item-padding-end;
+        }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-md-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-md-item-icon-margin-end;
+        }
+    }
+    .k-menu-group-lg {
+        font-size: $kendo-menu-popup-lg-font-size;
+        line-height: $kendo-menu-popup-lg-line-height;
+
+        // jquery popup overrides those
+        .k-menu-item {
+            font-size: $kendo-menu-popup-lg-font-size;
+            line-height: $kendo-menu-popup-lg-line-height;
+        }
+
+        .k-menu-link {
+            padding-block: $kendo-menu-popup-lg-item-padding-y;
+            padding-inline: $kendo-menu-popup-lg-item-padding-x;
+            padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
+        }
+
+        .k-menu-expand-arrow {
+            margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start;
+            margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end;
+        }
+    }
+
+
+    // Context menu
+    .k-popups-wrapper {
+        position: relative;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    }
+    .k-context-menu {
+        margin: 0;
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
+        border-width: $kendo-menu-popup-border-width;
+        border-style: solid;
+
+        &.k-menu-horizontal {
+            padding-block: $kendo-menu-popup-padding-x;
+            padding-inline: $kendo-menu-popup-padding-y;
+        }
+    }
+    .k-animation-container .k-context-menu.k-menu-horizontal {
+        // kendo-jquery adds `display: block` via js and we need to override it.
+        display: flex !important; // stylelint-disable-line declaration-no-important
+        flex-wrap: nowrap;
+    }
+    .k-context-menu-popup {
+        z-index: 12000;
+
+        .k-context-menu {
+            border-width: 0;
+        }
+    }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-wrapper {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .k-menu {
+            overflow: hidden;
+            flex-wrap: nowrap;
+        }
+    }
+
+    .k-menu-scroll-wrapper-vertical {
+        flex-direction: column;
+
+        > .k-menu-scroll-button {
+            width: 100%;
+        }
+    }
+
+}
+
+
+@mixin kendo-menu--layout() {
+    @include kendo-menu--layout-base();
+}

package/scss/components/menu/_theme.scss

@@ -0,0 +1,145 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-menu--theme-base() {
+
+    .k-menu:not(.k-context-menu) {
+        @include fill(
+            $kendo-menu-text,
+            $kendo-menu-bg,
+            $kendo-menu-border,
+            $kendo-menu-gradient
+        );
+
+        > .k-item {
+            @include fill(
+                $kendo-menu-item-text,
+                $kendo-menu-item-bg,
+                $kendo-menu-item-border,
+                $kendo-menu-item-gradient
+            );
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $kendo-menu-item-hover-text,
+                    $kendo-menu-item-hover-bg,
+                    $kendo-menu-item-hover-border,
+                    $kendo-menu-item-hover-gradient
+                );
+            }
+
+            &:active,
+            &.k-active {
+                @include fill(
+                    $kendo-menu-item-active-text,
+                    $kendo-menu-item-active-bg,
+                    $kendo-menu-item-active-border,
+                    $kendo-menu-item-active-gradient
+                );
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-menu-item-focus-shadow, true );
+            }
+
+            &.k-selected {
+                @include fill(
+                    $kendo-menu-item-selected-text,
+                    $kendo-menu-item-selected-bg,
+                    $kendo-menu-item-selected-border,
+                    $kendo-menu-item-selected-gradient
+                );
+            }
+        }
+
+        > .k-separator {
+            @include fill(
+                $border: $kendo-menu-separator-border
+            );
+        }
+    }
+
+    .k-menu-group,
+    .k-menu.k-context-menu {
+        @include fill(
+            $kendo-menu-popup-text,
+            $kendo-menu-popup-bg,
+            $kendo-menu-popup-border,
+            $kendo-menu-popup-gradient
+        );
+
+        .k-item > .k-link {
+            @include fill(
+                $kendo-menu-popup-item-text,
+                $kendo-menu-popup-item-bg,
+                $kendo-menu-popup-item-border,
+                $kendo-menu-popup-item-gradient
+            );
+
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $kendo-menu-popup-item-hover-text,
+                    $kendo-menu-popup-item-hover-bg,
+                    $kendo-menu-popup-item-hover-border,
+                    $kendo-menu-popup-item-hover-gradient
+                );
+            }
+
+            &:active,
+            &.k-active,
+            &.k-selected {
+                @include fill(
+                    $kendo-menu-popup-item-active-text,
+                    $kendo-menu-popup-item-active-bg,
+                    $kendo-menu-popup-item-active-border,
+                    $kendo-menu-popup-item-active-gradient
+                );
+            }
+        }
+
+        .k-item:focus,
+        .k-item.k-focus {
+            > .k-link {
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
+            }
+        }
+
+        > .k-separator {
+            @include fill(
+                $border: $kendo-menu-separator-border
+            );
+        }
+    }
+
+
+    // Scrolling
+    .k-menu-scroll-wrapper .k-menu-scroll-button {
+        @include fill(
+            $kendo-menu-scroll-button-text,
+            $kendo-menu-scroll-button-bg,
+            $kendo-menu-scroll-button-border,
+            $kendo-menu-scroll-button-gradient
+        );
+
+        &:hover {
+            @include fill(
+                $kendo-menu-scroll-button-hover-text,
+                $kendo-menu-scroll-button-hover-bg,
+                $kendo-menu-scroll-button-hover-border,
+                $kendo-menu-scroll-button-hover-gradient
+            );
+
+            &::before {
+                opacity: 0;
+            }
+        }
+    }
+}
+
+
+@mixin kendo-menu--theme() {
+    @include kendo-menu--theme-base();
+}

package/scss/components/menu/_variables.scss

@@ -0,0 +1,129 @@
+// Menu
+
+$kendo-menu-border-width: null !default;
+
+$kendo-menu-font-family: null !default;
+$kendo-menu-font-size: null !default;
+$kendo-menu-line-height: null !default;
+
+$kendo-menu-bg: null !default;
+$kendo-menu-text: null !default;
+$kendo-menu-border: null !default;
+$kendo-menu-gradient: null !default;
+
+// Menu item
+
+$kendo-menu-item-padding-x: null !default;
+$kendo-menu-item-padding-y: null !default;
+$kendo-menu-item-spacing: null !default;
+$kendo-menu-item-icon-spacing: null !default;
+
+$kendo-menu-item-selected-font-weight: null !default;
+
+$kendo-menu-item-bg: null !default;
+$kendo-menu-item-text: null !default;
+$kendo-menu-item-border: null !default;
+$kendo-menu-item-gradient: null !default;
+
+$kendo-menu-item-hover-bg: null !default;
+$kendo-menu-item-hover-text: null !default;
+$kendo-menu-item-hover-border: null !default;
+$kendo-menu-item-hover-gradient: null !default;
+
+$kendo-menu-item-active-bg: null !default;
+$kendo-menu-item-active-text: null !default;
+$kendo-menu-item-active-border: null !default;
+$kendo-menu-item-active-gradient: null !default;
+
+$kendo-menu-item-focus-shadow: null !default;
+
+$kendo-menu-item-selected-bg: null !default;
+$kendo-menu-item-selected-text: null !default;
+$kendo-menu-item-selected-border: null !default;
+$kendo-menu-item-selected-gradient: null !default;
+
+$kendo-menu-scroll-button-bg: null !default;
+$kendo-menu-scroll-button-text: null !default;
+$kendo-menu-scroll-button-border: null !default;
+$kendo-menu-scroll-button-gradient: null !default;
+
+$kendo-menu-scroll-button-hover-bg: null !default;
+$kendo-menu-scroll-button-hover-text: null !default;
+$kendo-menu-scroll-button-hover-border: null !default;
+$kendo-menu-scroll-button-hover-gradient: null !default;
+
+
+// Menu Separator
+
+$kendo-menu-separator-margin-inline: null !default;
+$kendo-menu-separator-margin-block: null !default;
+$kendo-menu-separator-border: null !default;
+
+
+// Menu popup
+
+$kendo-menu-popup-padding-x: null !default;
+
+$kendo-menu-popup-padding-y: null !default;
+
+$kendo-menu-popup-border-width: null !default;
+
+$kendo-menu-popup-font-size: null !default;
+$kendo-menu-popup-sm-font-size: null !default;
+$kendo-menu-popup-md-font-size: null !default;
+$kendo-menu-popup-lg-font-size: null !default;
+
+$kendo-menu-popup-line-height: null !default;
+$kendo-menu-popup-sm-line-height: null !default;
+$kendo-menu-popup-md-line-height: null !default;
+$kendo-menu-popup-lg-line-height: null !default;
+
+$kendo-menu-popup-bg: null !default;
+$kendo-menu-popup-text: null !default;
+$kendo-menu-popup-border: null !default;
+$kendo-menu-popup-gradient: null !default;
+
+
+// Menu popup item
+
+$kendo-menu-popup-item-padding-x: null !default;
+$kendo-menu-popup-sm-item-padding-x: null !default;
+$kendo-menu-popup-md-item-padding-x: null !default;
+$kendo-menu-popup-lg-item-padding-x: null !default;
+
+$kendo-menu-popup-item-padding-y: null !default;
+$kendo-menu-popup-sm-item-padding-y: null !default;
+$kendo-menu-popup-md-item-padding-y: null !default;
+$kendo-menu-popup-lg-item-padding-y: null !default;
+
+$kendo-menu-popup-item-padding-end: null !default;
+$kendo-menu-popup-sm-item-padding-end: null !default;
+$kendo-menu-popup-md-item-padding-end: null !default;
+$kendo-menu-popup-lg-item-padding-end: null !default;
+
+$kendo-menu-popup-sm-item-icon-margin-start: null !default;
+$kendo-menu-popup-md-item-icon-margin-start: null !default;
+$kendo-menu-popup-lg-item-icon-margin-start: null !default;
+
+$kendo-menu-popup-sm-item-icon-margin-end: null !default;
+$kendo-menu-popup-md-item-icon-margin-end: null !default;
+$kendo-menu-popup-lg-item-icon-margin-end: null !default;
+
+$kendo-menu-popup-item-spacing: null !default;
+
+$kendo-menu-popup-item-bg: null !default;
+$kendo-menu-popup-item-text: null !default;
+$kendo-menu-popup-item-border: null !default;
+$kendo-menu-popup-item-gradient: null !default;
+
+$kendo-menu-popup-item-hover-bg: null !default;
+$kendo-menu-popup-item-hover-text: null !default;
+$kendo-menu-popup-item-hover-border: null !default;
+$kendo-menu-popup-item-hover-gradient: null !default;
+
+$kendo-menu-popup-item-active-bg: null !default;
+$kendo-menu-popup-item-active-text: null !default;
+$kendo-menu-popup-item-active-border: null !default;
+$kendo-menu-popup-item-active-gradient: null !default;
+
+$kendo-menu-popup-item-focus-shadow: null !default;

package/scss/components/menu-button/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-menu-button--styles() {
+    @include import-once( "menu-button" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-menu--styles();
+        @include kendo-menu-button--layout();
+        @include kendo-menu-button--theme();
+    }
+}

package/scss/components/menu-button/_layout.scss

@@ -0,0 +1,37 @@
+@use "./_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-menu-button--layout-base() {
+
+    // 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: calc( #{$kendo-menu-button-arrow-padding-x} * -1 );
+            margin-inline-end: calc( #{$kendo-button-padding-x} * -1 );
+            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: calc( #{$kendo-button-padding-y} * -1 );
+        }
+    }
+
+}
+
+
+@mixin kendo-menu-button--layout() {
+    @include kendo-menu-button--layout-base();
+}

package/scss/components/menu-button/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-menu-button--theme-base() {
+
+    // Menu button
+    .k-menu-button {}
+
+}
+
+
+@mixin kendo-menu-button--theme() {
+    @include kendo-menu-button--theme-base();
+}

package/scss/components/menu-button/_variables.scss

@@ -0,0 +1,3 @@
+// Menu-button
+
+$kendo-menu-button-arrow-padding-x: null !default;

package/scss/components/messagebox/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-messagebox--styles() {
+    @include import-once( "messagebox" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-messagebox--layout();
+        @include kendo-messagebox--theme();
+    }
+}