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

package/scss/timeselector/_layout.scss

@@ -1,263 +1,4 @@
-@use "sass:map";
-@use "sass:list";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../button/_variables.scss" as *;
-
-@mixin kendo-time-selector--layout-base() {
-
-    // Time selector
-    .k-timeselector {
-        border-width: $kendo-time-selector-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-time-selector-font-family;
-        font-size: $kendo-time-selector-font-size;
-        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: $kendo-color-rgba-transparent;
-    }
-
-    .k-popup > .k-timeselector {
-        border-width: 0;
-    }
-
-    // Time selector header
-    .k-time-header,
-    .k-time-selector-header {
-        padding-block: $kendo-time-selector-header-padding-y;
-        padding-inline: $kendo-time-selector-header-padding-x;
-        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-block: $kendo-button-padding-y;
-            padding-inline: $kendo-button-padding-x;
-            font-weight: bold;
-            display: inline-block;
-        }
-
-        .k-time-now {
-            border-width: 0;
-            line-height: inherit;
-            cursor: pointer;
-        }
-    }
-
-    // Fast selection
-    .k-actions.k-time-fast-selection {
-        margin-top: 0;
-    }
-
-
-    // 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;
-        overflow: hidden;
-    }
-
-
-    // Time list highlight
-    .k-time-highlight,
-    .k-time-list-highlight {
-        width: 100%;
-        height: $kendo-time-list-highlight-height;
-        border-width: $kendo-time-list-highlight-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        position: absolute;
-        top: calc( 50% + #{list.slash( $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: $kendo-time-list-width;
-        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 {
-            font-size: $kendo-time-list-title-font-size;
-            line-height: $kendo-time-list-title-line-height;
-            font-weight: bold;
-            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% - #{list.slash( $kendo-time-list-highlight-height, 2 )} );
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-            }
-
-            &::before {
-                top: $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("right");
-
-        > ul {
-            height: auto;
-            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-block: $kendo-time-list-item-padding-y;
-        padding-inline: $kendo-time-list-item-padding-x;
-    }
-
-
-    // Time separator
-    .k-time-separator {
-        width: 0;
-        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( #{list.slash( $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( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );
-
-
-        .k-timeselector-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-time-highlight,
-            .k-time-list-highlight {
-                height: $_highlight-height;
-            }
-
-            .k-time-separator {
-                height:  $_highlight-height;
-            }
-
-            .k-time-list-item,
-            .k-time-list .k-item {
-                padding-block: $_list-item-padding-y;
-                padding-inline: $_list-item-padding-x;
-            }
-        }
-    }
-
-
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Time list content
-        .k-time-container,
-        .k-time-list-content {
-            @include hide-scrollbar("left");
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timeselector/_layout.scss" as *;
 
 
 @mixin kendo-time-selector--layout() {

package/scss/timeselector/_theme.scss

@@ -1,79 +1,4 @@
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-time-selector--theme-base() {
-
-    // Time selector
-    .k-timeselector {
-        @include fill(
-            $kendo-time-selector-text,
-            $kendo-time-selector-bg,
-            $kendo-time-selector-border
-        );
-    }
-
-
-    // Time selector header
-    .k-time-header,
-    .k-time-selector-header {
-
-        .k-time-now {
-            // TODO: use a variable
-            color: $kendo-link-text;
-        }
-        .k-time-now:hover {
-            // TODO: use a variable
-            color: $kendo-link-hover-text;
-        }
-    }
-
-
-    // Time list wrapper
-    .k-time-list-wrapper {
-
-        .k-title {
-            color: $kendo-time-list-title-text;
-        }
-
-        &.k-focus {
-            .k-title {
-                color: $kendo-time-list-title-focus-text;
-            }
-
-            &::before,
-            &::after {
-                background-color: $kendo-time-list-focus-bg;
-            }
-        }
-    }
-
-
-    // Time list
-    .k-time-list {
-        &::before,
-        &::after {
-            $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-time-selector-bg;
-        }
-
-        .k-item:hover {
-            color: $kendo-color-primary;
-        }
-    }
-
-    .k-time-container {
-        background: transparent;
-    }
-
-    .k-time-highlight {
-        @include fill(
-            $bg: $kendo-time-list-highlight-bg,
-            $border: $kendo-time-list-highlight-border
-        );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timeselector/_theme.scss" as *;
 
 
 @mixin kendo-time-selector--theme() {

package/scss/timeselector/_variables.scss

@@ -75,3 +75,44 @@ $kendo-time-selector-sizes: (
         list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
+    $kendo-time-selector-border-width: $kendo-time-selector-border-width,
+    $kendo-time-selector-font-family: $kendo-time-selector-font-family,
+    $kendo-time-selector-font-size: $kendo-time-selector-font-size,
+    $kendo-time-selector-line-height: $kendo-time-selector-line-height,
+    $kendo-time-selector-bg: $kendo-time-selector-bg,
+    $kendo-time-selector-text: $kendo-time-selector-text,
+    $kendo-time-selector-border: $kendo-time-selector-border,
+    $kendo-time-selector-header-padding-x: $kendo-time-selector-header-padding-x,
+    $kendo-time-selector-header-padding-y: $kendo-time-selector-header-padding-y,
+    $kendo-time-selector-header-border-width: $kendo-time-selector-header-border-width,
+    $kendo-time-selector-fast-selection-gap: $kendo-time-selector-fast-selection-gap,
+    $kendo-time-list-width: $kendo-time-list-width,
+    $kendo-time-list-height: $kendo-time-list-height,
+    $kendo-time-list-title-font-size: $kendo-time-list-title-font-size,
+    $kendo-time-list-title-line-height: $kendo-time-list-title-line-height,
+    $kendo-time-list-title-height: $kendo-time-list-title-height,
+    $kendo-time-list-title-text: $kendo-time-list-title-text,
+    $kendo-time-list-title-focus-text: $kendo-time-list-title-focus-text,
+    $kendo-time-list-item-padding-x: $kendo-time-list-item-padding-x,
+    $kendo-time-list-item-padding-y: $kendo-time-list-item-padding-y,
+    $kendo-time-list-highlight-border-width: $kendo-time-list-highlight-border-width,
+    $kendo-time-list-highlight-height: $kendo-time-list-highlight-height,
+    $kendo-time-list-highlight-bg: $kendo-time-list-highlight-bg,
+    $kendo-time-list-highlight-border: $kendo-time-list-highlight-border,
+    $kendo-time-list-focus-bg: $kendo-time-list-focus-bg,
+    $kendo-time-selector-sm-font-size: $kendo-time-selector-sm-font-size,
+    $kendo-time-selector-sm-line-height: $kendo-time-selector-sm-line-height,
+    $kendo-time-selector-sm-list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
+    $kendo-time-selector-sm-list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y,
+    $kendo-time-selector-md-font-size: $kendo-time-selector-md-font-size,
+    $kendo-time-selector-md-line-height: $kendo-time-selector-md-line-height,
+    $kendo-time-selector-md-list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
+    $kendo-time-selector-md-list-item-padding-y: $kendo-time-selector-md-list-item-padding-y,
+    $kendo-time-selector-lg-font-size: $kendo-time-selector-lg-font-size,
+    $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height,
+    $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
+    $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y,
+    $kendo-time-selector-sizes: $kendo-time-selector-sizes
+);