@progress/kendo-theme-fluent 5.7.0

package/scss/tilelayout/_variables.scss

@@ -0,0 +1,24 @@
+@use "../core/" as *;
+@use "../core/color-system" as *;
+@use "../card/_variables.scss" as *;
+@use "sass:color";
+
+/// Width of the border around the tilelayout.
+/// @group tilelayout
+$kendo-tilelayout-border-width: 0px !default;
+/// Background color of the tilelayout.
+/// @group tilelayout
+$kendo-tilelayout-bg: get-theme-color-var( neutral-10 ) !default;
+
+/// Width of the border around the tilelayout hint.
+/// @group tilelayout
+$kendo-tilelayout-hint-border-width: 1px !default;
+/// Color of the border around the tilelayout hint.
+/// @group tilelayout
+$kendo-tilelayout-hint-border: var( --kendo-component-border, initial ) !default;
+/// Radius of the border around the tilelayout hint.
+/// @group tilelayout
+$kendo-tilelayout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
+/// Background color of the tilelayout hint.
+/// @group tilelayout
+$kendo-tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;

package/scss/tilelayout/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "tilelayout",
+    dependencies: (
+        "card"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "tilelayout" ) {
+        @include kendo-tilelayout--layout();
+        @include kendo-tilelayout--theme();
+    }
+}

package/scss/timepicker/_layout.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timepicker--layout() {
+
+    // Time picker
+    .k-timepicker {}
+
+}

package/scss/timepicker/_theme.scss

@@ -0,0 +1,6 @@
+@mixin kendo-timepicker--theme() {
+
+       // Time picker
+       .k-timepicker {}
+
+}

package/scss/timepicker/_variables.scss

@@ -0,0 +1 @@
+// Time picker

package/scss/timepicker/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "timepicker",
+    dependencies: (
+        "button",
+        "input",
+        "popup",
+        "list",
+        "timeselector"
+    )
+);
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "timepicker" ) {
+        @include kendo-timepicker--layout();
+        @include kendo-timepicker--theme();
+    }
+}

package/scss/timeselector/_layout.scss

@@ -0,0 +1,237 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-timeselector--layout() {
+
+    .k-timeselector {
+        border-width: var( --kendo-time-selector-border-width, $kendo-time-selector-border-width );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-time-selector-font-family, $kendo-time-selector-font-family );
+        font-size: var( --kendo-time-selector-font-size, $kendo-time-selector-font-size );
+        line-height: var( --kendo-time-selector-line-height, $kendo-time-selector-line-height );
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-flow: column nowrap;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-popup > & {
+            border-width: 0;
+        }
+    }
+
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+        padding: var( --kendo-time-selector-header-padding-y, $kendo-time-selector-header-padding-y ) var( --kendo-time-selector-header-padding-x, $kendo-time-selector-header-padding-x ) 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex: 0 0 auto;
+
+        .k-title,
+        .k-time-selector-header-title {
+            padding: var( --kendo-button-padding-y-md, $kendo-button-padding-y-md ) var( --kendo-button-padding-x-md, $kendo-button-padding-x-md );
+            font-weight: bold;
+            display: inline-block;
+        }
+
+        .k-time-now {
+            border-width: 0;
+            line-height: inherit;
+            cursor: pointer;
+        }
+    }
+
+
+    // Time selector footer
+    // .k-time-footer {}
+    // .k-time-selector-footer {}
+
+
+    // Time list container
+    .k-time-list-container {
+        display: flex;
+        position: relative;
+        flex: 1 1 auto;
+    }
+
+
+    // Time list highlight
+    .k-time-highlight,
+    .k-time-list-highlight {
+        width: 100%;
+        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
+        border-width: var( --kendo-time-list-highlight-border-width, $kendo-time-list-highlight-border-width );
+        border-style: solid;
+        box-sizing: border-box;
+        position: absolute;
+        top: calc( 50% + var( --kendo-time-list-title-height, $kendo-time-list-title-height ) / 2);
+        left: 0;
+        right: 0;
+        transform: translateY(-50%);
+        z-index: 1;
+    }
+
+
+    // Time list wrapper
+    .k-time-list-wrapper {
+        min-width: var( --kendo-time-list-width, $kendo-time-list-width );
+        height: var( --kendo-time-list-height, $kendo-time-list-height );
+        box-sizing: content-box;
+        display: inline-flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+        overflow: hidden;
+        position: relative;
+        text-align: center;
+        flex: 1 1 auto;
+
+        .k-title {
+            padding-block-end: var( --kendo-time-list-title-spacing, $kendo-time-list-title-spacing );
+            font-size: var( --kendo-time-list-title-font-size, $kendo-time-list-title-font-size );
+            line-height: var( --kendo-time-list-title-line-height, $kendo-time-list-title-line-height );
+            font-weight: 600;
+            text-align: center;
+            text-transform: capitalize;
+            display: block;
+        }
+
+        &.k-focus {
+            &::before,
+            &::after {
+                display: block;
+                content: "\200b";
+                position: absolute;
+                width: 100%;
+                left: 0;
+                pointer-events: none;
+                height: calc( 50% - calc( var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height ) / 2) );
+                box-sizing: border-box;
+                border-width: 0;
+                border-style: solid;
+            }
+
+            &::before {
+                top: calc( var( --kendo-time-list-title-spacing, $kendo-time-list-title-spacing ) + var( --kendo-time-list-title-height, $kendo-time-list-title-height ) );
+            }
+
+            &::after {
+                bottom: 0;
+            }
+        }
+    }
+
+
+    // Time list
+    .k-time-list {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        flex: 1;
+        position: relative;
+        z-index: 1;
+        outline: 0;
+        overflow: hidden;
+
+        &::before,
+        &::after {
+            display: block;
+            position: absolute;
+            content: "\200b";
+            height: 0;
+            line-height: 0;
+            z-index: 1;
+            width: 200%;
+            left: -50%;
+        }
+
+        &::before { top: 0; }
+        &::after { bottom: 0; }
+    }
+
+
+    // Time list content
+    .k-time-container,
+    .k-time-list-content {
+        position: relative;
+        flex: 1 1 auto;
+        display: block;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        @include hide-scrollbar();
+
+        > ul {
+            height: auto;
+            width: var( --kendo-time-list-width, $kendo-time-list-width );
+            margin: auto;
+        }
+
+        .k-scrollable-placeholder {
+            position: absolute;
+            width: 1px;
+            top: 0;
+            right: 0;
+        }
+    }
+
+
+    // Time list item
+    .k-time-list-item,
+    .k-time-list .k-item {
+        padding: var( --kendo-time-list-item-padding-y, $kendo-time-list-item-padding-y ) var( --kendo-time-list-item-padding-x, $kendo-time-list-item-padding-x );
+    }
+
+
+    // Time separator
+    .k-time-separator {
+        width: 0;
+        height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
+        align-self: center;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        z-index: 11;
+        top: calc( var( --kendo-time-list-title-height, $kendo-time-list-title-height ) / 2);
+    }
+
+
+    // Time selector sizes
+    @each $size, $size-props in $kendo-time-selector-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
+        $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
+        $_highlight-height: calc( #{$_font-size} * #{$_line-height} + #{ $_list-item-padding-y * 2} );
+
+
+        .k-timeselector-#{$size} {
+            font-size: var( --kendo-time-selector-#{$size}-font-size, #{$_font-size} );
+            line-height: var( --kendo-time-selector-#{$size}-line-height, #{$_line-height} );
+
+            .k-time-highlight,
+            .k-time-list-highlight {
+                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
+            }
+
+            .k-time-separator {
+                height: var( --kendo-time-selector-#{$size}-highlight-height, #{$_highlight-height} );
+            }
+
+            .k-time-list-item,
+            .k-time-list .k-item {
+                padding: var( --kendo-list-#{$size}-item-padding-y, #{$_list-item-padding-y} ) var( --kendo-list-#{$size}-item-padding-x, #{$_list-item-padding-x} );
+            }
+        }
+    }
+}

package/scss/timeselector/_theme.scss

@@ -0,0 +1,66 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-timeselector--theme() {
+    // Time selector
+    .k-timeselector {
+        @include fill(
+            var( --kendo-time-selector-text, $kendo-time-selector-text ),
+            var( --kendo-time-selector-bg, $kendo-time-selector-bg ),
+            var( --kendo-time-selector-border, $kendo-time-selector-border )
+        );
+    }
+
+
+    // Time selector header
+    .k-time-header,
+    .k-time-selector-header {
+
+        .k-time-now {
+            color: var( --kendo-link-text, inherit );
+        }
+        .k-time-now:hover {
+            color: var( --kendo-link-hover-text, inherit );
+        }
+    }
+
+
+    // Time list wrapper
+    .k-time-list-wrapper {
+
+        .k-title {
+            color: var( --kendo-time-list-title-text, $kendo-time-list-title-text );
+        }
+
+        &.k-focus {
+            .k-title {
+                color: var( --kendo-time-list-title-focus-text, $kendo-time-list-title-focus-text );
+            }
+
+            &::before,
+            &::after {
+                background-color: var( --kendo-time-list-focused-bg, $kendo-time-list-focused-bg );
+            }
+        }
+    }
+
+
+    // Time list
+    .k-time-list {
+        .k-item:hover {
+            color: get-theme-color-var( primary-120 );
+        }
+    }
+
+    .k-time-container {
+        background: transparent;
+    }
+
+    .k-time-highlight {
+        @include fill(
+            $bg: var( --kendo-time-list-highlight-bg, $kendo-time-list-highlight-bg ),
+            $border: var( --kendo-time-list-highlight-border, $kendo-time-list-highlight-border )
+        );
+    }
+}

package/scss/timeselector/_variables.scss

@@ -0,0 +1,130 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+/// Width of the border around the time-selector.
+/// @group time-selector
+$kendo-time-selector-border-width: 1px !default;
+/// Font family of the time-selector.
+/// @group time-selector
+$kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the time-selector.
+/// @group time-selector
+$kendo-time-selector-font-size:  var( --kendo-font-size, inherit ) !default;
+/// Line height of the time-selector.
+/// @group time-selector
+$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the time-selector.
+/// @group time-selector
+$kendo-time-selector-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the time-selector.
+/// @group time-selector
+$kendo-time-selector-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the time-selector.
+/// @group time-selector
+$kendo-time-selector-border: var( --kendo-component-border, initial ) !default;
+
+/// Horizontal padding of the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding color of the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Width of the border around the time-selector header.
+/// @group time-selector
+$kendo-time-selector-header-border-width: 0px !default;
+
+/// Minimum width of the time-selector columns.
+/// @group time-selector
+$kendo-time-list-width: 4em !default;
+/// Height of the time-selector columns.
+/// @group time-selector
+$kendo-time-list-height: 240px !default;
+
+/// Spacing beneath the time selector titles.
+/// @group time-selector
+$kendo-time-list-title-spacing: map-get( $kendo-spacing, 3 ) !default;
+/// Font size of the time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// Line height of the time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-line-height: var( --kendo-line-height-lg, inherit ) !default;
+$kendo-time-list-title-height: calc( $kendo-time-list-title-font-size * $kendo-time-list-title-line-height ) !default;
+/// Text color of the time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-text: var( --kendo-subtle-text, inherit ) !default;
+/// Text color of the focused time-selector titles.
+/// @group time-selector
+$kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
+
+/// Horizontal padding of the time-selector list items.
+/// @group time-selector
+$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default; //$kendo-list-item-padding-x-md
+/// Vertical padding of the time-selector list items.
+/// @group time-selector
+$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default; //$kendo-list-item-padding-y-md
+
+/// Width of the border of the selected item in the time-selector.
+/// @group time-selector
+$kendo-time-list-highlight-border-width: 1px 0px !default;
+$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) !default;
+/// Background color of the selected item in the time-selector.
+/// @group time-selector
+$kendo-time-list-highlight-bg: $kendo-time-selector-bg !default;
+/// Border color of the selected item in the time-selector.
+/// @group time-selector
+$kendo-time-list-highlight-border: $kendo-time-selector-border !default;
+
+/// Background color of the focused time-selector column.
+/// @group time-selector
+$kendo-time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+
+
+/// Font sizes of the time-selector.
+/// @group time-selector
+$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
+$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
+$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
+
+/// Line heights used along with $font-size.
+/// @group time-selector
+$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
+$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
+$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
+
+///  Horizontal padding of the time-selector items.
+/// @group time-selector
+$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
+$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
+
+///  Vertical padding of the time-selector items.
+/// @group time-selector
+$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
+$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
+
+/// Sizes map for the time-selector.
+/// @group time-selector
+$kendo-time-selector-sizes: (
+    sm: (
+        font-size: $kendo-time-selector-sm-font-size,
+        line-height: $kendo-time-selector-sm-line-height,
+        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-time-selector-md-font-size,
+        line-height: $kendo-time-selector-md-line-height,
+        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-time-selector-lg-font-size,
+        line-height: $kendo-time-selector-lg-line-height,
+        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
+    )
+) !default;

package/scss/timeselector/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "timeselector",
+    dependencies: (
+        "list",
+        "action-buttons",
+        "button"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "timeselector" ) {
+        @include kendo-timeselector--layout();
+        @include kendo-timeselector--theme();
+    }
+}