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

package/scss/components/messagebox/_layout.scss

@@ -0,0 +1,28 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-messagebox--layout-base() {
+
+    // Base
+    .k-messagebox {
+        margin: $kendo-message-box-margin;
+        padding-block: $kendo-message-box-padding-y;
+        padding-inline: $kendo-message-box-padding-x;
+        border-width: $kendo-message-box-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        font-size: $kendo-message-box-font-size;
+        line-height: $kendo-message-box-line-height;
+
+        a {
+            color: inherit;
+            font-style: $kendo-message-box-link-font-style;
+            text-decoration: $kendo-message-box-link-text-decoration;
+        }
+    }
+
+}
+
+
+@mixin kendo-messagebox--layout() {
+    @include kendo-messagebox--layout-base();
+}

package/scss/components/messagebox/_theme.scss

@@ -0,0 +1,34 @@
+
+@use "../../functions/index.import.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-messagebox--theme-base() {
+
+    @each $color-name, $color in $kendo-theme-colors {
+        .k-messagebox-#{$color-name} {
+            @if $color-name == "inverse" {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-messagebox--theme() {
+    @include kendo-messagebox--theme-base();
+}

package/scss/components/messagebox/_variables.scss

@@ -0,0 +1,15 @@
+// Message box
+$kendo-message-box-margin: null !default;
+$kendo-message-box-padding-x: null !default;
+$kendo-message-box-padding-y: null !default;
+$kendo-message-box-border-width: null !default;
+
+$kendo-message-box-font-size: null !default;
+$kendo-message-box-line-height: null !default;
+
+$kendo-message-box-bg-level: null !default;
+$kendo-message-box-text-level: null !default;
+$kendo-message-box-border-level: null !default;
+
+$kendo-message-box-link-font-style: null !default;
+$kendo-message-box-link-text-decoration: null !default;

package/scss/components/multiselect/_index.scss

@@ -0,0 +1,30 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-multiselect--styles() {
+    @include import-once( "multiselect" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-input--styles();
+        @include kendo-chip--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-multiselect--layout();
+        @include kendo-multiselect--theme();
+    }
+}

package/scss/components/multiselect/_layout.scss

@@ -0,0 +1,11 @@
+@mixin kendo-multiselect--layout-base() {
+
+    // Multiselect
+    .k-multiselect {}
+
+}
+
+
+@mixin kendo-multiselect--layout() {
+    @include kendo-multiselect--layout-base();
+}

package/scss/components/multiselect/_theme.scss

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

package/scss/components/multiselect/_variables.scss

@@ -0,0 +1 @@
+// Multiselect

package/scss/components/no-data/_index.scss

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

package/scss/components/no-data/_layout.scss

@@ -0,0 +1,26 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-no-data--layout-base() {
+
+        .k-no-data {
+            min-height: $kendo-no-data-min-height;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: lighter;
+            text-align: center;
+            white-space: normal;
+        }
+
+
+        // Alias
+        .k-nodata {
+            @extend .k-no-data !optional;
+        }
+
+
+}
+
+@mixin kendo-no-data--layout() {
+    @include kendo-no-data--layout-base();
+}

package/scss/components/no-data/_theme.scss

@@ -0,0 +1,14 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-no-data--theme-base() {
+
+    .k-no-data {
+        color: $kendo-no-data-text;
+    }
+
+}
+
+
+@mixin kendo-no-data--theme() {
+    @include kendo-no-data--theme-base();
+}

package/scss/components/no-data/_variables.scss

@@ -0,0 +1,3 @@
+$kendo-no-data-min-height: null !default;
+
+$kendo-no-data-text: null !default;

package/scss/components/notification/_index.scss

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

package/scss/components/notification/_layout.scss

@@ -0,0 +1,79 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-notification--layout-base() {
+
+    // Base
+    .k-notification-group {
+        max-height: 100%;
+        display: inline-flex;
+        flex-flow: column-reverse wrap;
+        position: fixed;
+        z-index: 1000;
+        gap: $kendo-notification-group-gap 0;
+    }
+
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
+    }
+
+    .k-notification {
+        @include border-radius( $kendo-notification-border-radius );
+        padding-block: $kendo-notification-padding-y;
+        padding-inline: $kendo-notification-padding-x;
+        border-width: $kendo-notification-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-notification-font-family;
+        font-size: $kendo-notification-font-size;
+        line-height: $kendo-notification-line-height;
+        cursor: default;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $kendo-notification-icon-spacing;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        > .k-notification-content {
+            flex: 1 1 auto;
+        }
+
+        > .k-notification-status {
+            flex-shrink: 0;
+        }
+    }
+
+    .k-notification-actions {
+        flex: none;
+        display: flex;
+        gap: $kendo-notification-icon-spacing;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+        cursor: pointer;
+    }
+    .k-notification-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+    }
+
+}
+
+
+@mixin kendo-notification--layout() {
+    @include kendo-notification--layout-base();
+}

package/scss/components/notification/_theme.scss

@@ -0,0 +1,32 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-notification--theme-base() {
+
+    // Theme
+    .k-notification {
+        @include fill(
+            $kendo-notification-text,
+            $kendo-notification-bg,
+            $kendo-notification-border
+        );
+        @include box-shadow( $kendo-notification-shadow );
+    }
+
+    @each $name, $props in $kendo-notification-theme {
+        .k-notification-#{$name} {
+            @include fill(
+                map.get( $props, color ),
+                map.get( $props, background-color ),
+                map.get( $props, border )
+            );
+        }
+    }
+
+}
+
+
+@mixin kendo-notification--theme() {
+    @include kendo-notification--theme-base();
+}

package/scss/components/notification/_variables.scss

@@ -0,0 +1,34 @@
+// Notification
+
+$kendo-notification-group-gap: null !default;
+
+$kendo-notification-padding-x: null !default;
+$kendo-notification-padding-y: null !default;
+$kendo-notification-border-width: null !default;
+$kendo-notification-border-radius: k-border-radius(md)!default;
+$kendo-notification-font-family: null !default;
+$kendo-notification-font-size: null !default;
+$kendo-notification-line-height: null !default;
+$kendo-notification-bg: null !default;
+$kendo-notification-text: null !default;
+$kendo-notification-border: null !default;
+$kendo-notification-shadow: null !default;
+
+$kendo-notification-icon-spacing: null !default;
+
+@function notification-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: map.merge(( $name: (
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}
+
+$kendo-notification-theme-colors: null !default;
+$kendo-notification-theme: null !default;

package/scss/components/numerictextbox/_index.scss

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

package/scss/components/numerictextbox/_layout.scss

@@ -0,0 +1,15 @@
+@mixin kendo-numeric-textbox--layout-base() {
+
+    // Numeric textbox
+    .k-numeric-textbox {}
+
+
+    // Alias
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
+
+}
+
+
+@mixin kendo-numeric-textbox--layout() {
+    @include kendo-numeric-textbox--layout-base();
+}

package/scss/components/numerictextbox/_theme.scss

@@ -0,0 +1,11 @@
+@mixin kendo-numeric-textbox--theme-base() {
+
+    // Numeric textbox
+    .k-numeric-textbox {}
+
+}
+
+
+@mixin kendo-numeric-textbox--theme() {
+    @include kendo-numeric-textbox--theme-base();
+}

package/scss/components/numerictextbox/_variables.scss

@@ -0,0 +1 @@
+// Numeric Textbox

package/scss/components/orgchart/_index.scss

@@ -0,0 +1,37 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../window/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-orgchart--styles() {
+    @include import-once( "orgchart" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-textbox--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-upload--styles();
+        @include kendo-menu--styles();
+        @include kendo-card--styles();
+        @include kendo-window--styles();
+        @include kendo-orgchart--layout();
+        @include kendo-orgchart--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--layout--position();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+    }
+}

package/scss/components/orgchart/_layout.scss

@@ -0,0 +1,117 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-orgchart--layout-base() {
+
+    // OrgChart
+    .k-orgchart {
+        width: 100%;
+        padding-block: $kendo-orgchart-padding-x;
+        padding-inline: $kendo-orgchart-padding-y;
+        box-sizing: border-box;
+        font-size: $kendo-orgchart-font-size;
+        font-family: $kendo-orgchart-font-family;
+        line-height: $kendo-orgchart-line-height;
+        overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-orgchart-container {
+        margin-block: 0;
+        margin-inline: auto;
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    // Nodes
+    .k-orgchart-group {
+        gap: $kendo-orgchart-group-gap;
+    }
+
+    .k-orgchart-group.k-vstack > .k-orgchart-node-container {
+        gap: 0;
+    }
+
+    .k-orgchart-node-container {
+        gap: $kendo-orgchart-node-gap;
+    }
+
+    .k-orgchart-node-group-container {
+        @include border-radius( $kendo-orgchart-node-group-border-radius );
+        padding-block: $kendo-orgchart-node-group-padding-y;
+        padding-inline: $kendo-orgchart-node-group-padding-x;
+        border-width: $kendo-orgchart-node-group-border-width;
+        border-style: solid;
+        outline: 0;
+    }
+
+    .k-orgchart-node-group-title {
+        margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom;
+        font-size: $kendo-orgchart-node-group-title-font-size;
+        line-height: $kendo-orgchart-node-group-title-line-height;
+    }
+
+    .k-orgchart-node-group-subtitle {
+        margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom;
+        font-size: $kendo-orgchart-node-group-subtitle-font-size;
+    }
+
+    // Card
+    .k-orgchart-card {
+        width: $kendo-orgchart-card-width;
+        border-width: $kendo-orgchart-card-border-width;
+
+        .k-card-title {
+            margin: 0 0 $kendo-orgchart-card-title-margin-bottom;
+            font-size: $kendo-orgchart-card-title-font-size;
+        }
+
+        .k-card-subtitle {
+            margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom;
+            font-size: $kendo-orgchart-card-subtitle-font-size;
+        }
+
+        .k-card-body {
+            border-width: $kendo-orgchart-card-body-border-width;
+            border-style: solid;
+            flex-grow: 0;
+        }
+        .k-card-body .k-card-title-wrap {
+            margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0;
+            min-width: 0;
+            min-height: $kendo-orgchart-card-body-vbox-min-height;
+        }
+    }
+
+    // Lines
+    .k-orgchart-line {
+        background-color: currentColor;
+    }
+
+    .k-orgchart-line-h {
+        height: $kendo-orgchart-line-size;
+    }
+
+    .k-orgchart-line-v {
+        margin-block: 0;
+        margin-inline: auto;
+        width: $kendo-orgchart-line-size;
+        height: $kendo-orgchart-line-v-height;
+    }
+
+    // Buttons
+    .k-orgchart-button {
+        z-index: 1;
+    }
+}
+
+
+@mixin kendo-orgchart--layout() {
+    @include kendo-orgchart--layout-base();
+}

package/scss/components/orgchart/_theme.scss

@@ -0,0 +1,58 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-orgchart--theme-base() {
+
+    // OrgChart
+    .k-orgchart {
+        @include fill (
+            $kendo-orgchart-text,
+            $kendo-orgchart-bg,
+            $kendo-orgchart-border
+        );
+    }
+
+    // Card
+    .k-orgchart-card {
+        @include box-shadow( $kendo-orgchart-card-shadow );
+
+        .k-card-body {
+            @include fill( $border: $kendo-orgchart-card-body-border-color );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-orgchart-card-focus-shadow );
+        }
+    }
+
+    // Group
+    .k-orgchart-node-group-container {
+        @include fill (
+            $kendo-orgchart-node-group-text,
+            $kendo-orgchart-node-group-bg,
+            $kendo-orgchart-node-group-border
+        );
+    }
+    .k-orgchart-node-group-container:focus,
+    .k-orgchart-node-group-container.k-focus {
+        @include focus-indicator( $kendo-orgchart-node-group-focus-shadow );
+        @include fill ( $border: $kendo-orgchart-node-group-focus-border );
+    }
+
+    .k-orgchart-node-group-subtitle {
+        @include fill( $color: $kendo-orgchart-node-group-subtitle-text );
+    }
+
+    // Lines
+    .k-orgchart-line-h,
+    .k-orgchart-line-v {
+        @include fill( $color: $kendo-orgchart-line-fill );
+    }
+
+}
+
+
+@mixin kendo-orgchart--theme() {
+    @include kendo-orgchart--theme-base();
+}