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

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

package/scss/components/progressbar/_layout.scss

@@ -0,0 +1,252 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../border-radii/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../spacing/index.import.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;
+    }
+
+}
+
+
+@mixin kendo-progressbar--layout() {
+    @include kendo-progressbar--layout-base();
+}

package/scss/components/progressbar/_theme.scss

@@ -0,0 +1,60 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.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;
+    }
+
+}
+
+
+@mixin kendo-progressbar--theme() {
+    @include kendo-progressbar--theme-base();
+}

package/scss/components/progressbar/_variables.scss

@@ -0,0 +1,30 @@
+// ProgressBar
+
+$kendo-progressbar-height: null !default;
+$kendo-progressbar-horizontal-width: null !default;
+$kendo-progressbar-animation-timing: null !default;
+$kendo-progressbar-border-width: null !default;
+$kendo-progressbar-font-family: null !default;
+$kendo-progressbar-font-size: null !default;
+$kendo-progressbar-line-height: null !default;
+
+$kendo-progressbar-bg: null !default;
+$kendo-progressbar-text: null !default;
+$kendo-progressbar-border: null !default;
+$kendo-progressbar-gradient: null !default;
+
+$kendo-progressbar-value-bg: null !default;
+$kendo-progressbar-value-text: null !default;
+$kendo-progressbar-value-border: null !default;
+$kendo-progressbar-value-gradient: null !default;
+
+$kendo-progressbar-indeterminate-bg: null !default;
+$kendo-progressbar-indeterminate-text: null !default;
+$kendo-progressbar-indeterminate-border: null !default;
+$kendo-progressbar-indeterminate-gradient: null !default;
+
+$kendo-progressbar-chunk-border: null !default;
+
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: null !default;
+$kendo-circular-progressbar-scale-stroke: null !default;

package/scss/components/prompt/_index.scss

@@ -0,0 +1,18 @@
+// 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-prompt--styles() {
+    @include import-once( "prompt" ) {
+        @include core-styles();
+        @include kendo-prompt--layout();
+        @include kendo-prompt--theme();
+        @include kendo-utils--flex-grid--flex-direction();
+    }
+}

package/scss/components/prompt/_layout.scss

@@ -0,0 +1,78 @@
+@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;
+    }
+
+}
+
+
+@mixin kendo-prompt--layout() {
+    @include kendo-prompt--layout-base();
+}

package/scss/components/prompt/_theme.scss

@@ -0,0 +1,44 @@
+@use "../../mixins/index.import.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 );
+    }
+
+}
+
+
+@mixin kendo-prompt--theme() {
+    @include kendo-prompt--theme-base();
+}

package/scss/components/prompt/_variables.scss

@@ -0,0 +1,26 @@
+// AIPrompt
+
+$kendo-prompt-text: null !default;
+$kendo-prompt-bg: null !default;
+$kendo-prompt-border: null !default;
+
+$kendo-prompt-header-text: null !default;
+$kendo-prompt-header-bg: null !default;
+$kendo-prompt-header-border: null !default;
+
+$kendo-prompt-content-padding-y: null !default;
+$kendo-prompt-content-padding-x: null !default;
+$kendo-prompt-content-spacing: null !default;
+$kendo-prompt-content-text: null !default;
+$kendo-prompt-content-bg: null !default;
+$kendo-prompt-content-border: null !default;
+
+$kendo-prompt-expander-spacing: null !default;
+
+$kendo-prompt-suggestion-padding-y: null !default;
+$kendo-prompt-suggestion-padding-x: null !default;
+$kendo-prompt-suggestion-border-radius: null !default;
+$kendo-prompt-suggestion-text: null !default;
+$kendo-prompt-suggestion-bg: null !default;
+$kendo-prompt-suggestion-border: null !default;
+$kendo-prompt-suggestion-shadow: null !default;

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