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

package/scss/components/file-box/_layout.scss

@@ -0,0 +1,123 @@
+@use "./_variables.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "../../motion/index.scss" as *;
+@use "../../spacing/index.scss" as *;
+@use "../../z-index/index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-file-box--layout-base() {
+
+    .k-file-box-wrapper {
+        position: relative;
+        display: flex;
+        flex-flow: row nowrap;
+        padding-inline: $kendo-file-box-padding-x;
+        padding-block: $kendo-file-box-padding-y;
+        margin: 0;
+        gap: $kendo-file-box-gap;
+        box-sizing: border-box;
+        min-width: 0;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        scrollbar-width: none;
+
+        &.k-files-wrap {
+            flex-flow: row wrap;
+        }
+
+        &.k-files-vertical {
+            flex-flow: column wrap;
+        }
+    }
+
+    .k-files-scroll {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 1;
+        overflow-x: auto;
+        scrollbar-width: none;
+        white-space: nowrap;
+        gap: $kendo-file-box-gap;
+    }
+
+    .k-file-box-wrapper-scrollable-end::before,
+    .k-file-box-wrapper-scrollable-start::after{
+        content: '';
+        aspect-ratio: .3;
+        position: absolute;
+        z-index: k-z-index("base", 3);
+        height: calc(100% - #{$kendo-file-box-padding-y} * 2 );
+    }
+
+    .k-file-box-wrapper-scrollable-end::before {
+        left: 0;
+    }
+
+    .k-file-box-wrapper-scrollable-start::after {
+        right: 0;
+    }
+
+    .k-file-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+        box-sizing: border-box;
+        gap: $kendo-file-box-gap;
+        border-width: $kendo-file-box-border-width;
+        border-style: $kendo-file-box-border-style;
+        padding-inline: $kendo-file-box-padding-x;
+        padding-block: $kendo-file-box-padding-y;
+        border-radius: $kendo-file-box-border-radius;
+        width: 100%;
+        min-width: $kendo-file-box-min-width;
+        max-width: $kendo-file-box-max-width;
+        flex-shrink: 0;
+
+        >.k-icon {
+            flex-shrink: 0;
+        }
+
+        .k-file-info {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            text-align: start;
+            flex: 1;
+            overflow: hidden;
+            min-width: 0;
+            max-width: 100%;
+            text-overflow: ellipsis;
+        }
+
+        .k-file-box-name,
+        .k-file-name {
+            font-weight: bold;
+            font-size: $kendo-file-box-name-font-size;
+            line-height: $kendo-file-box-name-line-height;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .k-file-box-size,
+        .k-file-box-status,
+        .k-file-size,
+        .k-file-status {
+            font-size: $kendo-file-box-size-font-size;
+            line-height: $kendo-file-box-size-line-height;
+        }
+
+        &.k-file-deleted {
+            min-height: calc( #{$kendo-button-md-calc-size} + 2 * #{$kendo-file-box-padding-y} + 2 * #{$kendo-file-box-border-width});
+        }
+
+    }
+
+}
+
+@mixin kendo-file-box--layout() {
+    @include kendo-file-box--layout-base();
+}

package/scss/components/file-box/_theme.scss

@@ -0,0 +1,22 @@
+@use "./_variables.scss" as *;
+@use "../../mixins/index.scss" as *;
+
+@use "../../spacing/index.scss" as *;
+@use "../../color-system/_functions.scss" as *;
+@use "../../_variables.scss" as *;
+
+@mixin kendo-file-box--theme-base() {
+   .k-file-box {
+        background-color: $kendo-file-box-bg;
+        color: $kendo-file-box-text;
+        border-color: $kendo-file-box-border;
+    }
+
+    .k-file-box-wrapper-scrollable-start::after {
+        background: linear-gradient(90deg, $kendo-file-box-wrapper-scroll-gradient);
+    }
+
+    .k-file-box-wrapper-scrollable-end::before {
+        background: linear-gradient(270deg, $kendo-file-box-wrapper-scroll-gradient);
+    }
+}

package/scss/components/file-box/_variables.scss

@@ -0,0 +1,19 @@
+$kendo-file-box-padding-x: null !default;
+$kendo-file-box-padding-y: null !default;
+$kendo-file-box-gap: null !default;
+$kendo-file-box-min-width: null !default;
+$kendo-file-box-max-width: null !default;
+$kendo-file-box-border-width: null !default;
+$kendo-file-box-border-style: null !default;
+$kendo-file-box-border-radius: null !default;
+$kendo-file-box-name-font-size: null !default;
+$kendo-file-box-name-line-height: null !default;
+$kendo-file-box-size-font-size: null !default;
+$kendo-file-box-size-line-height: null !default;
+
+$kendo-file-box-bg: null !default;
+$kendo-file-box-text: null !default;
+$kendo-file-box-border: null !default;
+
+$kendo-file-box-wrapper-scroll-gradient: null !default;
+

package/scss/components/icons/_theme.scss

@@ -1 +1,7 @@
-@mixin kendo-icon--theme-base() {}
+@use "./_variables.scss" as *;
+
+@mixin kendo-icon--theme-base() {
+    .k-accent-icon {
+        color: $kendo-accent-icon-color;
+    }
+}

package/scss/components/icons/_variables.scss

@@ -9,3 +9,5 @@ $kendo-icon-size-xxl: null !default;
 $kendo-icon-size-xxxl: null !default;
 $kendo-icon-spacing: null !default;
 $kendo-icon-padding: null !default;
+
+$kendo-accent-icon-color: null !default;

package/scss/components/list/_layout.scss

@@ -15,13 +15,18 @@
         > .k-list {
             flex: 1;
             height: 100%;
+            border-radius: 0;
+        }
+
+        &.k-popup {
+            padding-inline: $kendo-list-container-padding-inline;
+            padding-block: $kendo-list-container-padding-block;
         }
     }
 
     // List
     .k-list {
         margin: 0;
-        padding: 0;
         box-sizing: border-box;
         border-radius: inherit;
         font-family: $kendo-list-font-family;
@@ -90,6 +95,20 @@
                     line-height: $_item-line-height;
                 }
 
+                &:has(.k-list-item-icon) .k-list-item,
+                &:has(.k-list-item-icon) .k-list-group-item {
+                    padding-inline-start:  calc( #{$kendo-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
+                }
+
+                .k-list-item:has(.k-list-item-icon) .k-list-item-description {
+                    padding-inline-start:  calc( #{$kendo-icon-size} + #{$kendo-list-item-gap});
+                }
+
+                .k-list-item:has(.k-list-item-icon),
+                .k-list-group-item:has(.k-list-item-icon) {
+                    padding-inline: $_item-padding-x;
+                }
+
                 .k-list-group-item {
                     padding-block: $_group-item-padding-y;
                     padding-inline: $_group-item-padding-x;
@@ -155,6 +174,13 @@
         border-color: inherit;
         height: auto;
         list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: $kendo-list-item-spacing;
+    }
+
+    .k-list-ul + .k-list-ul {
+        margin-block-start: $kendo-list-item-spacing;
     }
 
 
@@ -172,7 +198,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: $kendo-icon-spacing;
+        column-gap: $kendo-list-item-gap;
         position: relative;
 
         transition: color k-transition(snappy), background-color k-transition(snappy), outline-color k-transition(snappy), box-shadow k-transition(snappy);
@@ -206,6 +232,41 @@
         position: sticky;
     }
 
+    .k-list-item {
+        flex-wrap: wrap;
+        align-items: center;
+        border-radius: $kendo-list-item-border-radius;
+    }
+
+    .k-list-item-text {
+        flex: 1;
+        text-overflow: ellipsis;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .k-list-item-icon-wrapper,
+    .k-list-item-actions,
+    .k-list-item-text {
+        align-self: flex-start;
+    }
+
+    .k-list-item-actions {
+        display: flex;
+        align-items: center;
+        gap: $kendo-list-item-gap;
+    }
+
+    .k-list-item:has(.k-list-item-icon) .k-list-item-text::before,
+    .k-list-item:has(.k-list-item-actions) .k-list-item-text::before {
+        content: none;
+    }
+
+    .k-list .k-list-item-description {
+        flex-basis: 100%;
+        font-size: $kendo-list-item-description-font-size;
+        line-height: $kendo-list-item-description-line-height;
+    }
 
     // List group item
     .k-list-group-item {
@@ -222,7 +283,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: $kendo-icon-spacing;
+        gap: $kendo-list-item-gap;
         position: relative;
     }
 
@@ -268,5 +329,4 @@
         box-sizing: border-box;
         flex: none;
     }
-
 }

package/scss/components/list/_theme.scss

@@ -12,6 +12,10 @@
             $kendo-list-bg,
             $kendo-list-border
         );
+
+        .k-list-ul:first-of-type .k-list-group-item {
+            box-shadow: none;
+        }
     }
 
 
@@ -94,4 +98,8 @@
         );
     }
 
+    .k-list .k-list-item-description {
+        color: $kendo-list-item-description-text;
+    }
+
 }

package/scss/components/list/_variables.scss

@@ -1,4 +1,6 @@
 // List
+$kendo-list-container-padding-block: null !default;
+$kendo-list-container-padding-inline: null !default;
 
 $kendo-list-default-size: null !default;
 
@@ -72,6 +74,9 @@ $kendo-list-sm-item-font-size: null !default;
 $kendo-list-md-item-font-size: null !default;
 $kendo-list-lg-item-font-size: null !default;
 
+$kendo-list-item-gap: null !default;
+$kendo-list-item-spacing: null !default;
+
 $kendo-list-item-line-height: null !default;
 $kendo-list-sm-item-line-height: null !default;
 $kendo-list-md-item-line-height: null !default;
@@ -185,6 +190,7 @@ $kendo-list-header-shadow: null !default;
 
 $kendo-list-item-bg: null !default;
 $kendo-list-item-text: null !default;
+$kendo-list-item-border-radius: null !default;
 
 $kendo-list-item-hover-bg: null !default;
 $kendo-list-item-hover-text: null !default;
@@ -205,3 +211,8 @@ $kendo-list-group-item-border: null !default;
 $kendo-list-group-item-shadow: null !default;
 
 $kendo-list-option-label-text: null !default;
+
+$kendo-list-item-description-font-size: null !default;
+$kendo-list-item-description-line-height: null !default;
+$kendo-list-item-description-text: null !default;
+

package/scss/components/prompt-box/_layout.scss

@@ -0,0 +1,63 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-prompt-box--layout-base() {
+
+    .k-prompt-box {
+        border-radius: $kendo-prompt-box-border-radius;
+        flex-flow: column nowrap;
+
+        .k-input-inner {
+            padding: $kendo-prompt-box-input-inner-padding;
+        }
+    }
+
+    .k-prompt-box-header {
+       padding: $kendo-prompt-box-header-padding;
+    }
+
+    .k-prompt-box-affix {
+        padding: $kendo-prompt-box-affix-padding;
+        border-color: inherit;
+        display: flex;
+        align-items: center;
+        flex: none;
+        gap: $kendo-prompt-box-affix-spacing;
+    }
+
+    .k-prompt-box-textarea {
+        resize: none;
+        white-space: nowrap;
+        flex: 1 1 auto;
+    }
+
+    .k-prompt-box-textarea + .k-prompt-box-affix {
+        justify-content: flex-end;
+    }
+
+    .k-prompt-box-content {
+        display: flex;
+        flex-flow: row nowrap;
+    }
+
+    .k-prompt-box-singleline {
+        .k-prompt-box-affix:has(+.k-input-inner) {
+            padding-inline-end: 0;
+        }
+
+        .k-input-inner + .k-prompt-box-affix {
+            padding-inline-start: 0;
+        }
+    }
+
+    .k-prompt-box-multiline {
+        .k-prompt-box-content {
+            flex-direction: column;
+        }
+
+        .k-prompt-box-textarea {
+            white-space: normal;
+            overflow: auto;
+        }
+    }
+
+}

package/scss/components/prompt-box/_theme.scss

@@ -0,0 +1,7 @@
+@use "./variables.scss" as *;
+
+@mixin kendo-prompt-box--theme-base() {
+    .k-prompt-box {
+        box-shadow: $kendo-prompt-box-box-shadow;
+    }
+}

package/scss/components/prompt-box/_variables.scss

@@ -0,0 +1,11 @@
+// Prompt box
+
+$kendo-prompt-box-border-radius: null !default;
+
+$kendo-prompt-box-box-shadow: null !default;
+
+$kendo-prompt-box-header-padding: null !default;
+$kendo-prompt-box-input-inner-padding: null !default;
+$kendo-prompt-box-affix-padding: null !default;
+
+$kendo-prompt-box-affix-spacing: null !default;

package/scss/components/segmented-control/_layout.scss

@@ -0,0 +1,85 @@
+@use "sass:map";
+@use "./variables.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../motion/index.scss" as *;
+
+@mixin kendo-segmented-control--layout-base() {
+
+    .k-segmented-control {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        padding-inline: $kendo-segmented-control-padding-x;
+        padding-block: $kendo-segmented-control-padding-y;
+        border-radius: $kendo-segmented-control-border-radius;
+        font-family: $kendo-segmented-control-font-family;
+        overflow: auto;
+        scrollbar-width: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+
+        // Sizes
+        @each $size, $size-props in $kendo-segmented-control-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_button-padding-inline: map.get( $size-props, button-padding-x );
+            $_button-padding-block: map.get( $size-props, button-padding-y );
+            $_button-gap: map.get( $size-props, button-gap );
+
+            #{k-when-default($kendo-segmented-control-default-size, $size)}
+            &.k-segmented-control-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-segmented-control-button {
+                    padding-inline: $_button-padding-inline;
+                    padding-block: $_button-padding-block;
+                    gap: $_button-gap;
+                }
+            }
+        }
+    }
+
+    .k-segmented-control-stretched {
+        width: 100%;
+
+        .k-segmented-control-button {
+            overflow: hidden;
+        }
+    }
+
+    .k-segmented-control-thumb {
+        position: absolute;
+        height: calc( 100% - ( #{$kendo-segmented-control-padding-y} * 2));
+        border-radius: $kendo-segmented-control-thumb-border-radius;
+        pointer-events: none;
+        transition: all k-transition(settle);
+    }
+
+    .k-segmented-control-button {
+        position: relative;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        border-width: $kendo-segmented-control-button-border-width;
+        border-radius: $kendo-segmented-control-button-border-radius;
+        cursor: pointer;
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    .k-segmented-control-button-text {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0
+    }
+
+
+    .k-segmented-control-button-icon {
+        flex-shrink: 0;
+    }
+
+}

package/scss/components/segmented-control/_theme.scss

@@ -0,0 +1,38 @@
+@use "../../mixins/index.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-segmented-control--theme-base() {
+    .k-segmented-control {
+        background-color: $kendo-segmented-control-bg;
+        color: $kendo-segmented-control-text;
+    }
+
+    .k-segmented-control-thumb {
+        background-color: $kendo-segmented-control-thumb-bg;
+        box-shadow: $kendo-segmented-control-thumb-shadow;
+    }
+
+    .k-segmented-control-button {
+        color: inherit;
+        background-color: transparent;
+
+        &:hover,
+        &.k-hover {
+            background-color: $kendo-segmented-control-button-hover-bg;
+        }
+
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-segmented-control-button-focus-indicator, true, true );
+        }
+
+        &.k-selected {
+            color: $kendo-segmented-control-thumb-text;
+
+            &:hover,
+            &.k-hover {
+                background-color: transparent;
+            }
+        }
+    }
+}

package/scss/components/segmented-control/_variables.scss

@@ -0,0 +1,73 @@
+// Segmented control
+
+$kendo-segmented-control-default-size: null !default;
+
+$kendo-segmented-control-padding-x: null !default;
+$kendo-segmented-control-padding-y: null !default;
+$kendo-segmented-control-border-radius: null !default;
+
+$kendo-segmented-control-bg: null !default;
+$kendo-segmented-control-text: null !default;
+
+$kendo-segmented-control-sm-font-size: null !default;
+$kendo-segmented-control-md-font-size: null !default;
+$kendo-segmented-control-lg-font-size: null !default;
+
+$kendo-segmented-control-font-family: null !default;
+
+$kendo-segmented-control-sm-line-height: null !default;
+$kendo-segmented-control-md-line-height: null !default;
+$kendo-segmented-control-lg-line-height: null !default;
+
+$kendo-segmented-control-thumb-border-radius: null !default;
+$kendo-segmented-control-thumb-shadow: null !default;
+$kendo-segmented-control-thumb-bg: null !default;
+$kendo-segmented-control-thumb-text: null !default;
+
+$kendo-segmented-control-sm-button-padding-x: null !default;
+$kendo-segmented-control-md-button-padding-x: null !default;
+$kendo-segmented-control-lg-button-padding-x: null !default;
+
+$kendo-segmented-control-sm-button-padding-y: null !default;
+$kendo-segmented-control-md-button-padding-y: null !default;
+$kendo-segmented-control-lg-button-padding-y: null !default;
+
+$kendo-segmented-control-button-border-width: null !default;
+$kendo-segmented-control-button-border-radius: null !default;
+
+$kendo-segmented-control-sm-button-gap: null !default;
+$kendo-segmented-control-md-button-gap: null !default;
+$kendo-segmented-control-lg-button-gap: null !default;
+
+$kendo-segmented-control-button-hover-bg: null !default;
+$kendo-segmented-control-button-focus-indicator: null !default;
+
+/// The map with the sizes of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sizes: (
+    sm: (
+        font-size: $kendo-segmented-control-sm-font-size,
+        line-height: $kendo-segmented-control-sm-line-height,
+        button-padding-x: $kendo-segmented-control-sm-button-padding-x,
+        button-padding-y: $kendo-segmented-control-sm-button-padding-y,
+        button-gap: $kendo-segmented-control-sm-button-gap
+    ),
+    md: (
+        font-size: $kendo-segmented-control-md-font-size,
+        line-height: $kendo-segmented-control-md-line-height,
+        button-padding-x: $kendo-segmented-control-md-button-padding-x,
+        button-padding-y: $kendo-segmented-control-md-button-padding-y,
+        button-gap: $kendo-segmented-control-md-button-gap
+    ),
+    lg: (
+        font-size: $kendo-segmented-control-lg-font-size,
+        line-height: $kendo-segmented-control-lg-line-height,
+        button-padding-x: $kendo-segmented-control-lg-button-padding-x,
+        button-padding-y: $kendo-segmented-control-lg-button-padding-y,
+        button-gap: $kendo-segmented-control-lg-button-gap
+    )
+) !default;
+
+
+
+