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

package/scss/components/orgchart/_variables.scss

@@ -0,0 +1,58 @@
+// Orgchart
+
+$kendo-orgchart-spacer: null !default;
+$kendo-orgchart-padding-y: null !default;
+$kendo-orgchart-padding-x: null !default;
+$kendo-orgchart-font-family: null !default;
+$kendo-orgchart-font-size: null !default;
+$kendo-orgchart-line-height: null !default;
+$kendo-orgchart-bg: null !default;
+$kendo-orgchart-text: null !default;
+$kendo-orgchart-border: null !default;
+
+$kendo-orgchart-node-gap: null !default;
+$kendo-orgchart-group-gap: null !default;
+$kendo-orgchart-node-container-gap: null !default;
+
+$kendo-orgchart-node-group-padding-y: null !default;
+$kendo-orgchart-node-group-padding-x: null !default;
+$kendo-orgchart-node-group-border-width: null !default;
+$kendo-orgchart-node-group-border-radius: null !default;
+$kendo-orgchart-node-group-bg: null !default;
+$kendo-orgchart-node-group-text: null !default;
+$kendo-orgchart-node-group-border: null !default;
+
+$kendo-orgchart-node-group-focus-border: null !default;
+$kendo-orgchart-node-group-focus-shadow: null !default;
+
+$kendo-orgchart-node-group-title-font-size: null !default;
+$kendo-orgchart-node-group-title-margin-bottom: null !default;
+$kendo-orgchart-node-group-title-line-height: null !default;
+
+$kendo-orgchart-node-group-subtitle-font-size: null !default;
+$kendo-orgchart-node-group-subtitle-margin-bottom: null !default;
+$kendo-orgchart-node-group-subtitle-text: null !default;
+
+$kendo-orgchart-card-width: null !default;
+$kendo-orgchart-card-padding-y: null !default;
+$kendo-orgchart-card-padding-x: null !default;
+$kendo-orgchart-card-border-width: null !default;
+$kendo-orgchart-card-shadow: null !default;
+$kendo-orgchart-card-focus-shadow: null !default;
+
+$kendo-orgchart-card-title-margin-bottom: null !default;
+$kendo-orgchart-card-title-font-size: null !default;
+
+$kendo-orgchart-card-subtitle-margin-bottom: null !default;
+$kendo-orgchart-card-subtitle-font-size: null !default;
+
+$kendo-orgchart-card-body-border-width: null !default;
+$kendo-orgchart-card-body-border-color: null !default;
+
+$kendo-orgchart-card-body-vbox-margin-right: null !default;
+$kendo-orgchart-card-body-vbox-min-height: null !default;
+
+$kendo-orgchart-line-size: null !default;
+$kendo-orgchart-line-fill: null !default;
+
+$kendo-orgchart-line-v-height: null !default;

package/scss/components/otp/_index.scss

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

package/scss/components/otp/_layout.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
+
+@use "../input/_variables.scss" as *;
+
+@mixin kendo-otp--layout-base() {
+    // OTP
+    .k-otp {
+        display: flex;
+        width: min-content;
+        align-items: center;
+        flex-direction: row;
+
+        .k-otp-input > .k-input-inner {
+            text-align: center;
+            padding-inline: 0;
+        }
+    }
+
+    @each $size, $size-props in $kendo-otp-sizes {
+        $_gap: map.get($size-props, gap);
+        $_separator-padding-x: map.get($size-props, separator-padding-x);
+        $_input-width: map.get($size-props, input-width);
+
+        .k-otp-#{$size} {
+            gap: $_gap;
+
+            .k-otp-input {
+                min-width: $_input-width;
+            }
+
+            .k-otp-separator:not(:empty) {
+                padding-inline: $_separator-padding-x;
+            }
+        }
+    }
+}
+
+@mixin kendo-otp--layout() {
+    @include kendo-otp--layout-base();
+}

package/scss/components/otp/_theme.scss

@@ -0,0 +1,12 @@
+@use "sass:map";
+
+@mixin kendo-otp--theme-base() {
+
+    // OTP
+    .k-otp {};
+
+}
+
+@mixin kendo-otp--theme() {
+    @include kendo-otp--theme-base();
+}

package/scss/components/otp/_variables.scss

@@ -0,0 +1,18 @@
+// OTP
+
+$kendo-otp-gap: null !default;
+$kendo-otp-sm-gap: null !default;
+$kendo-otp-md-gap: null !default;
+$kendo-otp-lg-gap: null !default;
+
+$kendo-otp-separator-padding-x: null !default;
+$kendo-otp-sm-separator-padding-x: null !default;
+$kendo-otp-md-separator-padding-x: null !default;
+$kendo-otp-lg-separator-padding-x: null !default;
+
+$kendo-otp-input-width: null !default;
+$kendo-otp-sm-input-width: null !default;
+$kendo-otp-md-input-width: null !default;
+$kendo-otp-lg-input-width: null !default;
+
+$kendo-otp-sizes: null !default;

package/scss/components/overlay/_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-overlay--styles() {
+    @include import-once( "overlay" ) {
+        @include core-styles();
+        @include kendo-overlay--layout();
+        @include kendo-overlay--theme();
+    }
+}

package/scss/components/overlay/_layout.scss

@@ -0,0 +1,21 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-overlay--layout-base() {
+
+    // Overlay
+    .k-overlay {
+        width: 100%;
+        height: 100%;
+        opacity: $kendo-overlay-opacity;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 10001;
+    }
+
+}
+
+
+@mixin kendo-overlay--layout() {
+    @include kendo-overlay--layout-base();
+}

package/scss/components/overlay/_theme.scss

@@ -0,0 +1,22 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-overlay--theme-base() {
+
+    // Overlay
+    .k-overlay {
+        background-color: $kendo-overlay-bg;
+    }
+
+
+    @each $name, $color in $kendo-overlay-theme-colors {
+        .k-overlay-#{$name} {
+            background-color: $color;
+        }
+    }
+
+}
+
+
+@mixin kendo-overlay--theme() {
+    @include kendo-overlay--theme-base();
+}

package/scss/components/overlay/_variables.scss

@@ -0,0 +1,4 @@
+$kendo-overlay-theme-colors: null !default;
+
+$kendo-overlay-bg: null !default;
+$kendo-overlay-opacity: null !default;

package/scss/components/pager/_index.scss

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

package/scss/components/pager/_layout.scss

@@ -0,0 +1,191 @@
+@use "sass:map";
+@use "../../color-system/_constants.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-pager--layout-base() {
+
+    .k-pager {
+        padding: 0;
+        border-width: $kendo-pager-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-pager-font-family;
+        font-size: $kendo-pager-font-size;
+        line-height: $kendo-pager-line-height;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+        flex: 0 0 auto;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Base pager section
+    %base-pager-section {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+
+    // Base pager item
+    %base-pager-item {
+        color: inherit;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &:hover {
+            z-index: 2;
+        }
+        &.k-disabled {
+            color: inherit;
+        }
+    }
+
+
+    // Pager items
+    .k-pager-nav {
+        @extend %base-pager-item !optional;
+    }
+
+
+    // Pager numbers
+    .k-pager-numbers-wrap {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+
+        select.k-dropdown-list {
+            width: $kendo-pager-md-dropdown-width;
+        }
+    }
+    .k-pager-numbers {
+        display: flex;
+        flex-direction: row;
+
+        // Selected state
+        .k-selected {
+            cursor: inherit;
+            z-index: 2;
+        }
+    }
+
+
+    // Spacing between items
+    .k-pager-nav + .k-pager-nav,
+    .k-pager-nav + .k-pager-numbers-wrap,
+    .k-pager-numbers-wrap + .k-pager-nav {
+        @if ($kendo-pager-item-spacing) {
+            margin-left: $kendo-pager-item-spacing;
+        }
+    }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-pager-nav + .k-pager-nav,
+        .k-pager-nav + .k-pager-numbers-wrap,
+        .k-pager-numbers-wrap + .k-pager-nav {
+            @if ($kendo-pager-item-spacing) {
+                margin-left: 0;
+                margin-right: $kendo-pager-item-spacing;
+            }
+        }
+    }
+
+
+    // Pager input
+    .k-pager-input {
+        @extend %base-pager-section !optional;
+        gap: 1ex;
+
+        .k-textbox,
+        .k-numerictextbox {
+            margin-block: 0;
+            width: $kendo-pager-input-width;
+        }
+    }
+
+
+    // Pager sizes
+    .k-pager-sizes {
+        @extend %base-pager-section !optional;
+        gap: 1ex;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+    }
+
+
+    // Pager info
+    .k-pager-info {
+        @extend %base-pager-section !optional;
+        text-align: end;
+        justify-content: flex-end;
+        flex: 1 1 0%;
+        order: 9;
+    }
+
+
+    // Pager refresh
+    .k-pager-refresh {
+        margin-inline-start: auto;
+        color: inherit;
+        order: 10;
+    }
+
+    // Pager sizes
+    @each $size, $size-props in $kendo-pager-sizes {
+        $_padding-x: map.get($size-props, padding-x);
+        $_padding-y: map.get($size-props, padding-y);
+        $_item-group-spacing: map.get($size-props, item-group-spacing);
+        $_item-min-width: map.get($size-props, item-min-width);
+        $_pager-dropdown-width: map.get($size-props, pager-dropdown-width);
+
+        .k-pager-#{$size} {
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
+            gap: $_item-group-spacing;
+
+            .k-pager-numbers-wrap {
+                .k-button {
+                    min-width: $_item-min-width;
+                }
+
+                .k-pager-input,
+                > select.k-dropdown-list {
+                    margin-inline-start: $_item-group-spacing;
+                    margin-inline-end: $_item-group-spacing;
+                }
+            }
+
+            .k-pager-sizes {
+                .k-dropdown-list,
+                > select {
+                    width: $_pager-dropdown-width;
+                }
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-pager--layout() {
+    @include kendo-pager--layout-base();
+}

package/scss/components/pager/_theme.scss

@@ -0,0 +1,26 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-pager--theme-base() {
+
+    // Pager
+    .k-pager {
+        @include fill(
+            $kendo-pager-text,
+            $kendo-pager-bg,
+            $kendo-pager-border
+        );
+
+        &:focus,
+        &.k-focus {
+            @include fill( $bg: $kendo-pager-focus-bg );
+            @include focus-indicator( $kendo-pager-focus-shadow, true );
+        }
+    }
+
+}
+
+
+@mixin kendo-pager--theme() {
+    @include kendo-pager--theme-base();
+}

package/scss/components/pager/_variables.scss

@@ -0,0 +1,57 @@
+// Pager
+
+$kendo-pager-padding-x: null !default;
+$kendo-pager-sm-padding-x: null !default;
+$kendo-pager-md-padding-x: null !default;
+$kendo-pager-lg-padding-x: null !default;
+$kendo-pager-padding-y: null !default;
+$kendo-pager-sm-padding-y: null !default;
+$kendo-pager-md-padding-y: null !default;
+$kendo-pager-lg-padding-y: null !default;
+
+$kendo-pager-sm-item-min-width: null !default;
+$kendo-pager-md-item-min-width: null !default;
+$kendo-pager-lg-item-min-width: null !default;
+
+$kendo-pager-sm-item-group-spacing: null !default;
+$kendo-pager-md-item-group-spacing: null !default;
+$kendo-pager-lg-item-group-spacing: null !default;
+
+$kendo-pager-border-width: null !default;
+$kendo-pager-font-family: null !default;
+$kendo-pager-font-size: null !default;
+$kendo-pager-line-height: null !default;
+$kendo-pager-bg: null !default;
+$kendo-pager-text: null !default;
+$kendo-pager-border: null !default;
+
+$kendo-pager-focus-bg: null !default;
+$kendo-pager-focus-shadow: null !default;
+$kendo-pager-section-spacing: null !default;
+
+$kendo-pager-item-border-width: null !default;
+$kendo-pager-item-border-radius: null !default;
+$kendo-pager-item-spacing: null !default;
+$kendo-pager-item-bg: null !default;
+$kendo-pager-item-text: null !default;
+$kendo-pager-item-border: null !default;
+
+$kendo-pager-item-hover-bg: null !default;
+$kendo-pager-item-hover-text: null !default;
+$kendo-pager-item-hover-border: null !default;
+$kendo-pager-item-selected-bg: null !default;
+$kendo-pager-item-selected-text: null !default;
+$kendo-pager-item-selected-border: null !default;
+$kendo-pager-item-focus-opacity: null !default;
+$kendo-pager-item-focus-bg: null !default;
+$kendo-pager-item-focus-shadow: null !default;
+
+$kendo-pager-number-border-radius: null !default;
+
+$kendo-pager-input-width: null !default;
+
+$kendo-pager-sm-dropdown-width: null !default;
+$kendo-pager-md-dropdown-width: null !default;
+$kendo-pager-lg-dropdown-width: null !default;
+
+$kendo-pager-sizes: null !default;

package/scss/components/panel/_index.scss

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

package/scss/components/panel/_layout.scss

@@ -0,0 +1,28 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-panel--layout--base() {
+        // Panels
+        .k-block,
+        .k-panel {
+            @include border-radius( $kendo-panel-border-radius );
+            padding: 0;
+            border-width: $kendo-panel-border-width;
+            border-style: $kendo-panel-border-style;
+            box-sizing: border-box;
+
+            > .k-header {
+                @include border-top-radius( $kendo-panel-border-radius );
+                padding-inline: $kendo-panel-header-padding-inline;
+                padding-block: $kendo-panel-header-padding-block;
+            }
+            > .k-content {
+                padding-inline: $kendo-panel-content-padding-inline;
+                padding-block: $kendo-panel-content-padding-block;
+            }
+        }
+}
+
+@mixin kendo-panel--layout() {
+    @include kendo-panel--layout--base();
+}

package/scss/components/panel/_theme.scss

@@ -0,0 +1,35 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-panel--theme--base() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include fill(
+            $kendo-panel-text,
+            $kendo-panel-bg,
+            $kendo-panel-border
+        );
+
+        > .k-header {
+            @include fill(
+                var( --kendo-component-text, #{$kendo-component-text} ),
+                var( --kendo-component-bg, #{$kendo-component-bg} ),
+                var( --kendo-component-border, #{$kendo-component-border} )
+            );
+        }
+    }
+
+    :where(.k-content) {
+        @include fill(
+            $kendo-panel-text,
+            $kendo-panel-bg,
+            $kendo-panel-border
+        );
+    }
+}
+
+@mixin kendo-panel--theme() {
+    @include kendo-panel--theme--base();
+}

package/scss/components/panel/_variables.scss

@@ -0,0 +1,13 @@
+$kendo-panel-border-radius: null !default;
+$kendo-panel-border-width: null !default;
+$kendo-panel-border-style: null !default;
+
+$kendo-panel-header-padding-inline: null !default;
+$kendo-panel-header-padding-block: null !default;
+
+$kendo-panel-content-padding-inline: null !default;
+$kendo-panel-content-padding-block: null !default;
+
+$kendo-panel-text: null !default;
+$kendo-panel-bg: null !default;
+$kendo-panel-border: null !default;

package/scss/components/panelbar/_index.scss

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