@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/progressbar/_layout.scss

@@ -1,247 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-progressbar--layout-base() {
-
-    // Base
-    .k-progressbar {
-        @include border-radius( k-border-radius(md) );
-        --kendo-progressbar-value: 0;
-        border-width: $kendo-progressbar-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-progressbar-font-family;
-        font-size: $kendo-progressbar-font-size;
-        line-height: $kendo-progressbar-line-height;
-        display: inline-grid;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Selection
-        > .k-progressbar-value {
-            border-width: 0;
-            border-style: solid;
-            display: flex;
-            overflow: hidden;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-
-
-        // Chunks
-        > .k-progressbar-chunks {
-            border-width: inherit;
-            border-style: inherit;
-            white-space: nowrap;
-            display: flex;
-            align-items: stretch;
-            flex: 1;
-            gap: 1px;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-        .k-progressbar-chunk {
-            display: block;
-            border-width: 0;
-            flex: 1;
-        }
-
-    }
-
-
-    // Status
-    .k-progress-status-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        grid-column: 1 / -1;
-        grid-row: 1 / -1;
-
-        &.k-progress-start { justify-content: flex-start; }
-        &.k-progress-center { justify-content: center; }
-        &.k-progress-end { justify-content: flex-end; }
-    }
-    .k-progress-status {
-        padding-block: 0;
-        padding-inline: k-spacing(2);
-        min-width: 10px;
-        text-align: center;
-        display: inline-block;
-        white-space: nowrap;
-    }
-
-
-    // Horizontal
-    .k-progressbar-horizontal {
-        width: $kendo-progressbar-horizontal-width;
-        height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
-        grid-template-columns: 1fr;
-        grid-template-rows: 100%;
-
-
-        .k-progress-status-wrap {
-            flex-direction: row;
-        }
-
-        > .k-progressbar-value {
-            width: calc( var( --kendo-progressbar-value, 0 ) * 1% );
-            flex-direction: row;
-
-            > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
-            }
-        }
-
-
-        // Chunks
-        > .k-progressbar-chunks {
-            flex-direction: row;
-        }
-
-        // Horizontal reverse
-        &.k-progressbar-reverse {
-
-            > .k-progressbar-value {
-                flex-direction: row-reverse;
-                justify-self: flex-end;
-            }
-
-            > .k-progressbar-chunks {
-                flex-direction: row-reverse;
-            }
-        }
-    }
-
-
-    // Vertical
-    .k-progressbar-vertical {
-        width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
-        height: 27em;
-        grid-template-columns: 100%;
-        grid-template-rows: 1fr;
-
-
-        .k-progress-status-wrap {
-            flex-direction: column-reverse;
-        }
-        .k-progress-status {
-            writing-mode: vertical-lr;
-        }
-
-        > .k-progressbar-value {
-            height: calc( var( --kendo-progressbar-value, 0 ) * 1% );
-            flex-direction: column-reverse;
-            align-self: flex-end;
-            align-items: flex-end;
-
-            > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
-            }
-        }
-
-
-        // Chunk
-        > .k-progressbar-chunks {
-            flex-direction: column-reverse;
-        }
-
-        // Vertical reverse
-        &.k-progressbar-reverse {
-            flex-direction: column;
-
-            > .k-progressbar-value {
-                flex-direction: column;
-                align-self: flex-start;
-            }
-
-            > .k-progressbar-chunks {
-                flex-direction: column;
-            }
-        }
-    }
-
-
-    // Indeterminate
-    .k-progressbar-indeterminate {
-        .k-progress-status-wrap,
-        .k-progressbar-value,
-        .k-progressbar-chunk {
-            display: none;
-        }
-    }
-
-
-    // Blazor specific
-    .telerik-blazor.k-progressbar-horizontal {
-
-        > .k-progressbar-value,
-        > .k-progressbar-value > .k-progress-status-wrap {
-            transition: width .1s ease-in-out;
-        }
-    }
-
-
-    // RTL
-    .k-rtl .k-progressbar,
-    .k-progressbar[dir="rtl"] {
-        direction: rtl;
-    }
-
-
-    // Circular progressbar
-    .k-circular-progressbar {
-        display: inline-block;
-        text-align: start;
-        position: relative;
-    }
-
-    .k-circular-progressbar-surface {
-        height: 100%;
-
-        & > div {
-            width: 100%;
-            height: 100%;
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .k-circular-progressbar-scale {
-        fill: none;
-    }
-
-    .k-circular-progressbar-arc {
-        transform-box: fill-box;
-        transform-origin: center center;
-        transform: rotate(-90deg);
-        stroke-linecap: round;
-        fill: none;
-    }
-
-    .k-circular-progressbar-label {
-        position: absolute;
-        text-align: center;
-        padding: 0;
-        margin: 0;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/progressbar/_layout.scss" as *;
 
 
 @mixin kendo-progressbar--layout() {

package/scss/progressbar/_theme.scss

@@ -1,55 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-progressbar--theme-base() {
-
-    @keyframes kendo-progressbar-indeterminate-animation {
-        from { background-position: 0 0; }
-        to { background-position: $kendo-progressbar-height 0; }
-    }
-
-    .k-progressbar {
-        @include fill( $kendo-progressbar-text, $kendo-progressbar-bg, $kendo-progressbar-border, $kendo-progressbar-gradient );
-
-        .k-selected {
-            @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient );
-        }
-    }
-
-    // Chunk progressbar
-    .k-chunk-progressbar {
-        // TODO uncomment for 2023 R1
-        // background-color: k-if-var( $progressbar-chunk-border, transparent );
-        background-color: transparent;
-    }
-    .k-progressbar-chunk {
-        background-color: $kendo-progressbar-bg;
-
-        .k-selected {
-            background-color: $kendo-progressbar-value-bg;
-        }
-    }
-
-    .k-progressbar-indeterminate {
-        @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( if($kendo-enable-color-system, color-mix(in srgb, k-color( base-emphasis ) 55%, transparent), k-color-shade($kendo-progressbar-indeterminate-bg)) );
-        background-size: $kendo-progressbar-height $kendo-progressbar-height;
-        animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
-    }
-
-
-    // Circular progressbar
-    .k-circular-progressbar-scale {
-        stroke: $kendo-circular-progressbar-scale-stroke;
-    }
-
-    .k-circular-progressbar-arc {
-        stroke: $kendo-circular-progressbar-arc-stroke;
-        transition: stroke .5s ease;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/progressbar/_theme.scss" as *;
 
 
 @mixin kendo-progressbar--theme() {

package/scss/progressbar/_variables.scss

@@ -75,3 +75,28 @@ $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+
+@forward "@progress/kendo-theme-core/scss/components/progressbar/_variables.scss" with (
+    $kendo-progressbar-height: $kendo-progressbar-height,
+    $kendo-progressbar-horizontal-width: $kendo-progressbar-horizontal-width,
+    $kendo-progressbar-animation-timing: $kendo-progressbar-animation-timing,
+    $kendo-progressbar-border-width: $kendo-progressbar-border-width,
+    $kendo-progressbar-font-family: $kendo-progressbar-font-family,
+    $kendo-progressbar-font-size: $kendo-progressbar-font-size,
+    $kendo-progressbar-line-height: $kendo-progressbar-line-height,
+    $kendo-progressbar-bg: $kendo-progressbar-bg,
+    $kendo-progressbar-text: $kendo-progressbar-text,
+    $kendo-progressbar-border: $kendo-progressbar-border,
+    $kendo-progressbar-gradient: $kendo-progressbar-gradient,
+    $kendo-progressbar-value-bg: $kendo-progressbar-value-bg,
+    $kendo-progressbar-value-text: $kendo-progressbar-value-text,
+    $kendo-progressbar-value-border: $kendo-progressbar-value-border,
+    $kendo-progressbar-value-gradient: $kendo-progressbar-value-gradient,
+    $kendo-progressbar-indeterminate-bg: $kendo-progressbar-indeterminate-bg,
+    $kendo-progressbar-indeterminate-text: $kendo-progressbar-indeterminate-text,
+    $kendo-progressbar-indeterminate-border: $kendo-progressbar-indeterminate-border,
+    $kendo-progressbar-indeterminate-gradient: $kendo-progressbar-indeterminate-gradient,
+    $kendo-progressbar-chunk-border: $kendo-progressbar-chunk-border,
+    $kendo-circular-progressbar-arc-stroke: $kendo-circular-progressbar-arc-stroke,
+    $kendo-circular-progressbar-scale-stroke: $kendo-circular-progressbar-scale-stroke
+);

package/scss/prompt/_layout.scss

@@ -1,76 +1,4 @@
-@use "./variables.scss" as *;
-
-@mixin kendo-prompt--layout-base() {
-
-    // Prompt
-    .k-prompt {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-
-        // Toolbar
-        .k-toolbar {
-            border-top-width: 0;
-            border-inline-width: 0;
-        }
-    }
-
-    // Content
-    .k-prompt-content {
-        padding-block: $kendo-prompt-content-padding-y;
-        padding-inline: $kendo-prompt-content-padding-x;
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        gap: $kendo-prompt-content-spacing;
-        overflow: auto;
-    }
-
-    .k-prompt-view {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        gap: $kendo-prompt-content-spacing;
-    }
-
-    // Prompt Expander
-    .k-prompt-expander {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        align-items: flex-start;
-        gap: $kendo-prompt-expander-spacing;
-    }
-
-    .k-prompt-expander-content {
-        display: flex;
-        flex-flow: column;
-        flex: 0 0 auto;
-        gap: $kendo-prompt-expander-spacing;
-        align-self: stretch;
-    }
-
-    .k-prompt-suggestion {
-        border-width: 1px;
-        border-style: solid;
-        border-radius: $kendo-prompt-suggestion-border-radius;
-        padding-block: $kendo-prompt-suggestion-padding-y;
-        padding-inline: $kendo-prompt-suggestion-padding-x;
-        cursor: pointer;
-    }
-
-    .k-prompt-setting {
-        display: flex;
-        flex-direction: column;
-    }
-
-    // Actions
-    .k-prompt-actions.k-actions {
-        margin: 0;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/prompt/_layout.scss" as *;
 
 
 @mixin kendo-prompt--layout() {

package/scss/prompt/_theme.scss

@@ -1,42 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-prompt--theme-base() {
-
-    .k-prompt {
-        @include fill(
-            $kendo-prompt-text,
-            $kendo-prompt-bg,
-            $kendo-prompt-border
-        );
-    }
-
-    .k-prompt-header {
-        @include fill(
-            $kendo-prompt-header-text,
-            $kendo-prompt-header-bg,
-            $kendo-prompt-header-border
-        );
-    }
-
-    .k-prompt-content {
-        @include fill(
-            $kendo-prompt-content-text,
-            $kendo-prompt-content-bg,
-            $kendo-prompt-content-border
-        );
-    }
-
-    .k-prompt-suggestion {
-        @include fill(
-            $kendo-prompt-suggestion-text,
-            $kendo-prompt-suggestion-bg,
-            $kendo-prompt-suggestion-border
-        );
-        @include box-shadow( $kendo-prompt-suggestion-shadow );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/prompt/_theme.scss" as *;
 
 
 @mixin kendo-prompt--theme() {

package/scss/prompt/_variables.scss

@@ -67,3 +67,26 @@ $kendo-prompt-suggestion-border: $kendo-component-border !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/prompt/_variables.scss" with (
+    $kendo-prompt-text: $kendo-prompt-text,
+    $kendo-prompt-bg: $kendo-prompt-bg,
+    $kendo-prompt-border: $kendo-prompt-border,
+    $kendo-prompt-header-text: $kendo-prompt-header-text,
+    $kendo-prompt-header-bg: $kendo-prompt-header-bg,
+    $kendo-prompt-header-border: $kendo-prompt-header-border,
+    $kendo-prompt-content-padding-y: $kendo-prompt-content-padding-y,
+    $kendo-prompt-content-padding-x: $kendo-prompt-content-padding-x,
+    $kendo-prompt-content-spacing: $kendo-prompt-content-spacing,
+    $kendo-prompt-content-text: $kendo-prompt-content-text,
+    $kendo-prompt-content-bg: $kendo-prompt-content-bg,
+    $kendo-prompt-content-border: $kendo-prompt-content-border,
+    $kendo-prompt-expander-spacing: $kendo-prompt-expander-spacing,
+    $kendo-prompt-suggestion-padding-y: $kendo-prompt-suggestion-padding-y,
+    $kendo-prompt-suggestion-padding-x: $kendo-prompt-suggestion-padding-x,
+    $kendo-prompt-suggestion-border-radius: $kendo-prompt-suggestion-border-radius,
+    $kendo-prompt-suggestion-text: $kendo-prompt-suggestion-text,
+    $kendo-prompt-suggestion-bg: $kendo-prompt-suggestion-bg,
+    $kendo-prompt-suggestion-border: $kendo-prompt-suggestion-border,
+    $kendo-prompt-suggestion-shadow: $kendo-prompt-suggestion-shadow
+);

package/scss/radio/_layout.scss

@@ -1,229 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-radio--layout-base() {
-
-    // Radio
-    .k-radio {
-        @include border-radius( $kendo-radio-radius );
-        margin: 0;
-        padding: 0;
-        line-height: initial;
-        border-width: $kendo-radio-border-width;
-        border-style: solid;
-        outline: 0;
-        box-sizing: border-box;
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        display: inline-block;
-        flex: none;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-        -webkit-appearance: none;
-    }
-
-
-    // Radio indicator
-    .k-radio::before {
-        @if $kendo-radio-indicator-type == "glyph" {
-            content: $kendo-radio-checked-glyph;
-            width: 1em;
-            height: 1em;
-            font-family: $kendo-radio-glyph-font-family;
-            line-height: 1;
-            transform: scale(0) translate(-50%, -50%);
-            overflow: hidden;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-        }
-
-        @if $kendo-radio-indicator-type == "image" {
-            content: "";
-            display: block;
-            width: 100%;
-            height: 100%;
-            mask-repeat: no-repeat;
-        }
-    }
-
-
-    // Checked state
-    .k-radio:checked,
-    .k-radio.k-checked {
-        @if $kendo-radio-indicator-type == "image" {
-            &::before {
-                background-color: currentColor;
-                mask-image: $kendo-radio-checked-image;
-            }
-        }
-
-        @if $kendo-radio-indicator-type == "glyph" {
-            &::before {
-                transform: scale(1) translate(-50%, -50%);
-            }
-        }
-    }
-
-
-    // Disabled state
-    .k-radio:disabled,
-    .k-radio.k-disabled {
-        @include disabled( $kendo-disabled-styling... );
-    }
-    .k-radio:disabled:checked,
-    .k-radio.k-disabled.k-checked {
-        @if $kendo-radio-indicator-type == "image" {
-            background-image: $kendo-radio-disabled-checked-image;
-        }
-    }
-
-
-    // Radio wrap
-    .k-radio-wrap {
-        flex: none;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        gap: 0;
-        align-items: center;
-        align-self: start;
-        vertical-align: middle;
-        position: relative;
-
-        &::before {
-            content: "\200b";
-            width: 0px;
-            overflow: hidden;
-            flex: none;
-            display: inline-block;
-            vertical-align: top;
-        }
-    }
-
-
-    // Radio label
-    .k-radio-label {
-        margin: 0;
-        padding: 0;
-        display: inline-flex;
-        align-items: flex-start;
-        gap: $kendo-radio-label-margin-x;
-        vertical-align: middle;
-        position: relative;
-        cursor: pointer;
-
-        .k-ripple {
-            // Hide ripple temporarily
-            visibility: hidden !important; // stylelint-disable-line declaration-no-important
-        }
-    }
-    .k-radio + .k-label,
-    .k-radio-wrap + .k-label,
-    .k-radio + .k-radio-label,
-    .k-radio-wrap + .k-radio-label {
-        display: inline;
-        margin-inline-start: $kendo-radio-label-margin-x;
-    }
-
-
-    // Empty label
-    .k-radio-label:empty {
-        display: none !important; // stylelint-disable-line declaration-no-important
-    }
-    .k-radio-label.k-no-text {
-        min-width: 1px;
-    }
-
-
-    // Radio list
-    .k-radio-list {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        flex-flow: column nowrap;
-        gap: 0;
-        list-style: none;
-    }
-    .k-radio-item,
-    .k-radio-list-item {
-        padding-block: $kendo-radio-list-item-padding-y;
-        padding-inline: $kendo-radio-list-item-padding-x;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-content: center;
-        gap: k-spacing(1);
-
-        .k-radio-label {
-            margin: 0;
-        }
-    }
-    .k-radio-list-horizontal,
-    .k-radio-list.k-list-horizontal {
-        display: flex;
-        flex-flow: row wrap;
-        gap: $kendo-radio-list-spacing;
-    }
-
-
-    // Ripple
-    .k-ripple-container {
-        .k-radio::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            border-radius: 100%;
-            z-index: -1;
-            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
-            transform: translate(-50%, -50%) scale(0);
-            transform-origin: center center;
-        }
-
-        .k-radio:focus,
-        .k-radio.k-focus {
-            box-shadow: none !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
-        }
-
-        .k-radio:disabled::after,
-        .k-radio.k-disabled::after {
-            display: none;
-        }
-    }
-
-
-    // Radio size
-    @each $size, $size-props in $kendo-radio-sizes {
-        $_size: map.get( $size-props, size );
-        $_glyph-size: map.get( $size-props, glyph-size );
-        $_ripple-size: map.get( $size-props, ripple-size );
-
-        .k-radio-#{$size} {
-            width: $_size;
-            height: $_size;
-
-            &::before {
-                font-size: $_glyph-size;
-            }
-        }
-        .k-ripple-container {
-            .k-radio-#{$size}::after {
-                width: $_ripple-size;
-                height: $_ripple-size;
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *;
 
 
 @mixin kendo-radio--layout() {