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

package/scss/button/_variables.scss

@@ -259,3 +259,95 @@ $kendo-flat-button-focus-ring-opacity: .12 !default;
 /// The color transition of the flat Button.
 /// @group button
 $kendo-button-transition: color .2s ease-in-out !default;
+
+@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
+    $kendo-button-border-width: $kendo-button-border-width,
+    $kendo-button-border-radius: $kendo-button-border-radius,
+    $kendo-button-padding-x: $kendo-button-padding-x,
+    $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
+    $kendo-button-md-padding-x: $kendo-button-md-padding-x,
+    $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
+    $kendo-button-padding-y: $kendo-button-padding-y,
+    $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
+    $kendo-button-md-padding-y: $kendo-button-md-padding-y,
+    $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
+    $kendo-button-font-family: $kendo-button-font-family,
+    $kendo-button-font-size: $kendo-button-font-size,
+    $kendo-button-sm-font-size: $kendo-button-sm-font-size,
+    $kendo-button-md-font-size: $kendo-button-md-font-size,
+    $kendo-button-lg-font-size: $kendo-button-lg-font-size,
+    $kendo-button-line-height: $kendo-button-line-height,
+    $kendo-button-sm-line-height: $kendo-button-sm-line-height,
+    $kendo-button-md-line-height: $kendo-button-md-line-height,
+    $kendo-button-lg-line-height: $kendo-button-lg-line-height,
+    $kendo-button-calc-size: $kendo-button-calc-size,
+    $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
+    $kendo-button-md-calc-size: $kendo-button-md-calc-size,
+    $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
+    $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
+    $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
+    $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
+    $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,
+    $kendo-button-sizes: $kendo-button-sizes,
+    $kendo-button-theme-colors: $kendo-button-theme-colors,
+    $kendo-button-bg: $kendo-button-bg,
+    $kendo-button-text: $kendo-button-text,
+    $kendo-button-border: $kendo-button-border,
+    $kendo-button-gradient: $kendo-button-gradient,
+    $kendo-button-shadow: $kendo-button-shadow,
+    $kendo-button-hover-bg: $kendo-button-hover-bg,
+    $kendo-button-hover-text: $kendo-button-hover-text,
+    $kendo-button-hover-border: $kendo-button-hover-border,
+    $kendo-button-hover-gradient: $kendo-button-hover-gradient,
+    $kendo-button-hover-shadow: $kendo-button-hover-shadow,
+    $kendo-button-active-bg: $kendo-button-active-bg,
+    $kendo-button-active-text: $kendo-button-active-text,
+    $kendo-button-active-border: $kendo-button-active-border,
+    $kendo-button-active-gradient: $kendo-button-active-gradient,
+    $kendo-button-active-shadow: $kendo-button-active-shadow,
+    $kendo-button-selected-bg: $kendo-button-selected-bg,
+    $kendo-button-selected-text: $kendo-button-selected-text,
+    $kendo-button-selected-border: $kendo-button-selected-border,
+    $kendo-button-selected-gradient: $kendo-button-selected-gradient,
+    $kendo-button-selected-shadow: $kendo-button-selected-shadow,
+    $kendo-button-focus-bg: $kendo-button-focus-bg,
+    $kendo-button-focus-text: $kendo-button-focus-text,
+    $kendo-button-focus-border: $kendo-button-focus-border,
+    $kendo-button-focus-gradient: $kendo-button-focus-gradient,
+    $kendo-button-focus-shadow: $kendo-button-focus-shadow,
+    $kendo-button-disabled-bg: $kendo-button-disabled-bg,
+    $kendo-button-disabled-text: $kendo-button-disabled-text,
+    $kendo-button-disabled-border: $kendo-button-disabled-border,
+    $kendo-button-disabled-gradient: $kendo-button-disabled-gradient,
+    $kendo-button-disabled-shadow: $kendo-button-disabled-shadow,
+    $kendo-solid-button-gradient: $kendo-solid-button-gradient,
+    $kendo-solid-button-shade-function: $kendo-solid-button-shade-function,
+    $kendo-solid-button-shade-text-amount: $kendo-solid-button-shade-text-amount,
+    $kendo-solid-button-shade-bg-amount: $kendo-solid-button-shade-bg-amount,
+    $kendo-solid-button-shade-border-amount: $kendo-solid-button-shade-border-amount,
+    $kendo-solid-button-hover-shade-text-amount: $kendo-solid-button-hover-shade-text-amount,
+    $kendo-solid-button-hover-shade-bg-amount: $kendo-solid-button-hover-shade-bg-amount,
+    $kendo-solid-button-hover-shade-border-amount: $kendo-solid-button-hover-shade-border-amount,
+    $kendo-solid-button-active-shade-text-amount: $kendo-solid-button-active-shade-text-amount,
+    $kendo-solid-button-active-shade-bg-amount: $kendo-solid-button-active-shade-bg-amount,
+    $kendo-solid-button-active-shade-border-amount: $kendo-solid-button-active-shade-border-amount,
+    $kendo-solid-button-shadow: $kendo-solid-button-shadow,
+    $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur,
+    $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread,
+    $kendo-solid-button-shadow-opacity: $kendo-solid-button-shadow-opacity,
+    $kendo-outline-button-shadow: $kendo-outline-button-shadow,
+    $kendo-outline-button-shadow-blur: $kendo-outline-button-shadow-blur,
+    $kendo-outline-button-shadow-spread: $kendo-outline-button-shadow-spread,
+    $kendo-outline-button-shadow-opacity: $kendo-outline-button-shadow-opacity,
+    $kendo-link-button-shadow: $kendo-link-button-shadow,
+    $kendo-link-button-shadow-blur: $kendo-link-button-shadow-blur,
+    $kendo-link-button-shadow-spread: $kendo-link-button-shadow-spread,
+    $kendo-link-button-shadow-opacity: $kendo-link-button-shadow-opacity,
+    $kendo-clear-button-focus-opacity: $kendo-clear-button-focus-opacity,
+    $kendo-flat-button-hover-opacity: $kendo-flat-button-hover-opacity,
+    $kendo-flat-button-focus-opacity: $kendo-flat-button-focus-opacity,
+    $kendo-flat-button-active-opacity: $kendo-flat-button-active-opacity,
+    $kendo-flat-button-selected-opacity: $kendo-flat-button-selected-opacity,
+    $kendo-flat-button-focus-ring-opacity: $kendo-flat-button-focus-ring-opacity,
+    $kendo-button-transition: $kendo-button-transition
+);

package/scss/calendar/_layout.scss

@@ -1,526 +1,4 @@
-@use "sass:map";
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-calendar--layout-base() {
-
-    // Base
-    .k-calendar {
-        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
-        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
-        border-width: $kendo-calendar-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-calendar-font-family;
-        font-size: $kendo-calendar-font-size;
-        line-height: $kendo-calendar-line-height;
-        position: relative;
-        overflow: hidden;
-        display: inline-flex;
-        flex-flow: column nowrap;
-        user-select: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-
-        // Nested calendar
-        > .k-calendar {
-            border: 0;
-        }
-    }
-
-
-    // Calendar table
-    .k-calendar-table {
-        margin-block: 0;
-        margin-inline: auto;
-        border-width: 0;
-        border-color: inherit;
-        border-spacing: 0;
-        border-collapse: separate;
-        table-layout: fixed;
-        text-align: center;
-        outline: 0;
-        display: table;
-        position: relative;
-        z-index: 1;
-    }
-    .k-calendar-caption,
-    .k-calendar-caption.k-calendar-th,
-    .k-calendar .k-meta-header,
-    .k-calendar .k-month-header {
-        padding-block: $kendo-calendar-caption-padding-y;
-        padding-inline: $kendo-calendar-caption-padding-x;
-        height: $kendo-calendar-caption-height;
-        box-sizing: border-box;
-        font-size: $kendo-calendar-caption-font-size;
-        line-height: $kendo-calendar-caption-line-height;
-        text-transform: none;
-        text-align: start;
-        font-weight: $kendo-calendar-caption-font-weight;
-        cursor: default;
-    }
-
-
-    // Calendar cell
-    .k-calendar-th,
-    .k-calendar-td {
-        border-width: 0;
-        padding: 0;
-        text-align: center;
-        border-style: solid;
-        border-color: inherit;
-        font-weight: normal;
-        cursor: default;
-    }
-    .k-calendar-th {
-        padding-block: $kendo-calendar-header-cell-padding-y;
-        padding-inline: $kendo-calendar-header-cell-padding-x;
-        inline-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-width );
-        block-size: var( --INTERNAL--kendo-calendar-cell-size, $kendo-calendar-header-cell-height );
-        font-size: $kendo-calendar-header-cell-font-size;
-        line-height: $kendo-calendar-header-cell-line-height;
-        text-transform: uppercase;
-        opacity: $kendo-calendar-header-cell-opacity;
-    }
-    .k-calendar-td {
-        @include border-radius( $kendo-calendar-cell-border-radius );
-        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
-        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
-        border-color: transparent;
-    }
-    .k-calendar-td.k-alt {
-        font-size: $kendo-calendar-week-number-font-size;
-    }
-
-
-    // Calendar cell inner
-    // Remove .k-calendar once we remove k-link
-    .k-calendar .k-calendar-cell-inner {
-        @include border-radius( $kendo-calendar-cell-border-radius );
-        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
-        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        white-space: normal;
-        position: relative;
-        overflow: hidden;
-    }
-
-
-    // Calendar header
-    .k-calendar .k-header {
-        padding-block: $kendo-calendar-header-padding-y;
-        padding-inline: $kendo-calendar-header-padding-x;
-        border-bottom-width: $kendo-calendar-header-border-width;
-        border-bottom-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $kendo-calendar-nav-gap;
-        align-items: center;
-        position: relative;
-        z-index: 2;
-    }
-
-
-    // Calendar header
-    .k-calendar-header {
-        padding-block: $kendo-calendar-header-padding-y;
-        padding-inline: $kendo-calendar-header-padding-x;
-        min-width: ($kendo-calendar-cell-size * 8);
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        flex: 0 0 auto;
-
-        .k-calendar-nav {
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            gap: $kendo-calendar-nav-gap;
-        }
-    }
-
-
-    // Calendar footer
-    .k-calendar-footer,
-    .k-calendar .k-footer {
-        padding-block: $kendo-calendar-footer-padding-y;
-        padding-inline: $kendo-calendar-footer-padding-x;
-        text-align: center;
-        clear: both;
-    }
-
-
-    // Calendar view wrapper
-    .k-calendar-view {
-        margin: auto;
-        padding-block: 0;
-        padding-inline: $kendo-calendar-header-padding-x;
-        // setting width / height prevents layout changes in meta views
-        width: $kendo-calendar-view-width;
-        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
-        min-height: $kendo-calendar-view-height;
-        box-sizing: content-box;
-        gap: $kendo-calendar-view-gap;
-        position: relative;
-        z-index: 1;
-        overflow: hidden;
-
-        .k-today {
-            font-weight: bold;
-        }
-    }
-
-
-    // Month view
-    .k-month-calendar,
-    .k-calendar-monthview {
-        $_month-cell-size: $kendo-calendar-cell-size;
-
-        .k-calendar-td {
-            width: $_month-cell-size;
-            height: $_month-cell-size;
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
-        }
-    }
-
-
-    // Year view
-    .k-year-calendar,
-    .k-calendar-yearview {
-        $_year-cell-size: ( 2 * $kendo-calendar-cell-size );
-
-        .k-calendar-td {
-            width: $_year-cell-size;
-            height: $_year-cell-size;
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
-        }
-    }
-
-
-    // Decade view
-    .k-decade-calendar,
-    .k-calendar-decadeview {
-        $_decade-cell-size: ( 2 * $kendo-calendar-cell-size );
-
-        .k-calendar-td {
-            width: $_decade-cell-size;
-            height: $_decade-cell-size;
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-        }
-    }
-
-
-    // Century view
-    .k-century-calendar,
-    .k-calendar-centuryview {
-        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );
-
-        .k-calendar-td {
-            width: $_century-cell-size;
-            height: $_century-cell-size;
-            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
-            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
-        }
-        .k-calendar-cell-inner {
-            text-align: start;
-        }
-    }
-
-
-    // Calendar in popup
-    .k-popup .k-calendar {
-        height: 100%;
-    }
-    .k-calendar-container,
-    .k-datetime-container {
-        padding: 0;
-
-        .k-calendar {
-            border-width: 0;
-        }
-    }
-
-
-
-
-    .k-calendar .k-content.k-scrollable,
-    .k-calendar .k-calendar-content.k-scrollable {
-        box-sizing: content-box;
-        overflow-x: hidden;
-        overflow-y: auto;
-        display: block;
-
-        @include hide-scrollbar("right");
-    }
-
-    // scoped in calendar until it is used elsewhere
-    .k-calendar .k-scrollable-placeholder {
-        position: absolute;
-        z-index: -1;
-        width: 1px;
-        top: 0;
-        right: 0;
-    }
-
-
-
-
-    // Calendar sizes
-    @each $size, $size-props in $kendo-calendar-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_cell-size: map.get( $size-props, cell-size );
-        $_cell-padding-x: map.get( $size-props, cell-padding-x );
-        $_cell-padding-y: map.get( $size-props, cell-padding-y );
-
-        $_month-cell-size: $_cell-size;
-        $_year-cell-size: ( 2 * $_cell-size );
-        $_decade-cell-size: ( 2 * $_cell-size );
-        $_century-cell-size: ( 2 * $_cell-size );
-
-        .k-calendar-#{$size} {
-            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
-            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
-            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            &.k-month-calendar,
-            .k-calendar-monthview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
-            }
-            &.k-year-calendar,
-            .k-calendar-yearview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
-            }
-            &.k-decade-calendar,
-            .k-calendar-decadeview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
-            }
-            &.k-century-calendar,
-            .k-calendar-centuryview {
-                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
-            }
-        }
-    }
-
-
-
-
-    // Legacy aliases
-    .k-link {
-        @extend .k-calendar-cell-inner !optional;
-    }
-
-
-
-
-    // Infinite calendar
-    .k-calendar-infinite {
-        box-sizing: content-box;
-        display: inline-flex;
-        flex-flow: row nowrap;
-
-        .k-calendar-view {
-            padding-block: $kendo-infinite-calendar-view-padding-y;
-            padding-inline: $kendo-infinite-calendar-view-padding-x;
-            height: $kendo-infinite-calendar-view-height;
-            flex: 0 0 auto;
-            display: flex;
-            flex-flow: column nowrap;
-            gap: 0;
-            overflow: hidden;
-
-            .k-content.k-scrollable {
-                position: relative;
-            }
-
-            &::after {
-                display: block;
-                position: absolute;
-                bottom: 0;
-                content: "\200b";
-                height: 0;
-                line-height: 0;
-                z-index: 1;
-                width: 150%;
-                left: -25%;
-                box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
-            }
-        }
-
-        .k-calendar-header {
-            margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
-            margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
-            padding-block: $kendo-infinite-calendar-header-padding-y;
-            padding-inline: $kendo-infinite-calendar-header-padding-x;
-            width: auto;
-            min-width: 0;
-        }
-
-        .k-calendar-weekdays {
-            flex: 0 0 auto;
-        }
-    }
-
-
-    // Calendar navigation
-    .k-calendar-navigation {
-        width: $kendo-calendar-navigation-width;
-        text-align: center;
-        flex: 0 0 auto;
-        display: block;
-        overflow: hidden;
-        position: relative;
-        z-index: 1;
-
-        &::before,
-        &::after {
-            display: block;
-            position: absolute;
-            content: "\200b";
-            height: 0;
-            line-height: 0;
-            z-index: 1;
-            width: 200%;
-            left: -50%;
-            $shadow-size: 3 * $kendo-calendar-navigation-item-height;
-            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-calendar-navigation-bg;
-        }
-
-        &::before { top: 0; }
-        &::after { bottom: 0; }
-
-        .k-content,
-        .k-calendar-content {
-            background: transparent;
-            height: auto;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-
-            ul {
-                width: $kendo-calendar-navigation-width;
-            }
-
-            li {
-                height: $kendo-calendar-navigation-item-height;
-                line-height: $kendo-calendar-navigation-item-height;
-                cursor: pointer;
-                padding-block: 0;
-                padding-inline: 1em;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: clip;
-            }
-        }
-
-        .k-calendar-navigation-marker {
-            font-weight: bold;
-        }
-
-        .k-calendar-navigation-highlight {
-            width: 100%;
-            border-width: 1px 0;
-            border-style: solid;
-            height: $kendo-calendar-navigation-item-height;
-            box-sizing: border-box;
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-        }
-
-        // // styles are applied to the k-link element inside
-        // .k-selected {
-        //     color: inherit;
-        //     background: transparent;
-        //     border-color: transparent;
-        // }
-    }
-
-    // Multiview calendar
-    .k-calendar-range {
-        width: auto;
-
-        .k-calendar-view {
-            width: auto;
-            white-space: nowrap;
-
-            &::after {
-                display: none;
-            }
-
-            &:focus {
-                outline: 0;
-            }
-        }
-    }
-
-    // Range Selection
-    .k-range-start {
-        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
-
-        .k-calendar-cell-inner,
-        .k-link {
-            border-color: inherit;
-            border-radius: inherit;
-        }
-    }
-    .k-range-end {
-        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
-
-        .k-calendar-cell-inner,
-        .k-link {
-            border-color: inherit;
-            border-radius: inherit;
-        }
-    }
-    .k-range-mid {
-        border-color: inherit;
-        border-radius: 0;
-    }
-    .k-range-start.k-range-end {
-        border-radius: $kendo-calendar-range-cell-border-radius;
-    }
-
-    // RTL
-    .k-rtl .k-calendar,
-    [dir="rtl"] .k-calendar,
-    .k-calendar.k-rtl,
-    .k-calendar[dir="rtl"] {
-
-        .k-content.k-scrollable,
-        .k-calendar-content.k-scrollable {
-            @include hide-scrollbar("left");
-        }
-
-        // Range Selection RTL
-        .k-range-start {
-            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
-        }
-        .k-range-end {
-            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
-        }
-
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *;
 
 
 @mixin kendo-calendar--layout() {