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

package/scss/components/button/_variables.scss

@@ -0,0 +1,117 @@
+// Button
+
+$kendo-button-border-width: null !default;
+
+$kendo-button-border-radius: null !default;
+
+$kendo-button-padding-x: null !default;
+$kendo-button-sm-padding-x: null !default;
+$kendo-button-md-padding-x: null !default;
+$kendo-button-lg-padding-x: null !default;
+
+$kendo-button-padding-y: null !default;
+$kendo-button-sm-padding-y: null !default;
+$kendo-button-md-padding-y: null !default;
+$kendo-button-lg-padding-y: null !default;
+
+$kendo-button-font-family: null !default;
+
+$kendo-button-font-size: null !default;
+$kendo-button-sm-font-size: null !default;
+$kendo-button-md-font-size: null !default;
+$kendo-button-lg-font-size: null !default;
+
+$kendo-button-line-height: null !default;
+$kendo-button-sm-line-height: null !default;
+$kendo-button-md-line-height: null !default;
+$kendo-button-lg-line-height: null !default;
+
+$kendo-button-calc-size: null !default;
+$kendo-button-sm-calc-size: null !default;
+$kendo-button-md-calc-size: null !default;
+$kendo-button-lg-calc-size: null !default;
+
+$kendo-button-inner-calc-size: null !default;
+$kendo-button-sm-inner-calc-size: null !default;
+$kendo-button-md-inner-calc-size: null !default;
+$kendo-button-lg-inner-calc-size: null !default;
+
+$kendo-button-sizes: null !default;
+
+$kendo-button-theme-colors: null !default;
+
+$kendo-button-bg: null !default;
+$kendo-button-text: null !default;
+$kendo-button-border: null !default;
+$kendo-button-gradient: null !default;
+$kendo-button-shadow: null !default;
+
+$kendo-button-hover-bg: null !default;
+$kendo-button-hover-text: null !default;
+$kendo-button-hover-border: null !default;
+$kendo-button-hover-gradient: null !default;
+$kendo-button-hover-shadow: null !default;
+
+$kendo-button-active-bg: null !default;
+$kendo-button-active-text: null !default;
+$kendo-button-active-border: null !default;
+$kendo-button-active-gradient: null !default;
+$kendo-button-active-shadow: null !default;
+
+$kendo-button-selected-bg: null !default;
+$kendo-button-selected-text: null !default;
+$kendo-button-selected-border: null !default;
+$kendo-button-selected-gradient: null !default;
+$kendo-button-selected-shadow: null !default;
+
+$kendo-button-focus-bg: null !default;
+$kendo-button-focus-text: null !default;
+$kendo-button-focus-border: null !default;
+$kendo-button-focus-gradient: null !default;
+$kendo-button-focus-shadow: null !default;
+
+$kendo-button-disabled-bg: null !default;
+$kendo-button-disabled-text: null !default;
+$kendo-button-disabled-border: null !default;
+$kendo-button-disabled-gradient: null !default;
+$kendo-button-disabled-shadow: null !default;
+
+// Solid Button
+$kendo-solid-button-gradient: null !default;
+$kendo-solid-button-shade-function: null !default;
+$kendo-solid-button-shade-text-amount: null !default;
+$kendo-solid-button-shade-bg-amount: null !default;
+$kendo-solid-button-shade-border-amount: null !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: null !default;
+$kendo-solid-button-hover-shade-border-amount: null !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: null !default;
+$kendo-solid-button-active-shade-border-amount: null !default;
+$kendo-solid-button-shadow: null !default;
+$kendo-solid-button-shadow-blur: null !default;
+$kendo-solid-button-shadow-spread: null !default;
+$kendo-solid-button-shadow-opacity: null !default;
+
+// Outline Button
+$kendo-outline-button-shadow: null !default;
+$kendo-outline-button-shadow-blur: null !default;
+$kendo-outline-button-shadow-spread: null !default;
+$kendo-outline-button-shadow-opacity: null !default;
+
+// Link Button
+$kendo-link-button-shadow: null !default;
+$kendo-link-button-shadow-blur: null !default;
+$kendo-link-button-shadow-spread: null !default;
+$kendo-link-button-shadow-opacity: null !default;
+
+// Clear Button
+$kendo-clear-button-focus-opacity: null !default;
+
+$kendo-flat-button-hover-opacity: null !default;
+$kendo-flat-button-focus-opacity: null !default;
+$kendo-flat-button-active-opacity: null !default;
+$kendo-flat-button-selected-opacity: null !default;
+$kendo-flat-button-focus-ring-opacity: null !default;
+
+$kendo-button-transition: null !default;

package/scss/components/calendar/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-calendar--styles() {
+    @include import-once( "calendar" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--layout();
+        @include kendo-calendar--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+        @include kendo-utils--interactivity--pointer-events();
+    }
+}

package/scss/components/calendar/_layout.scss

@@ -0,0 +1,529 @@
+@use "sass:map";
+@use "sass:math";
+@use "../../color-system/_constants.scss" as *;
+@use "../../mixins/index.import.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;
+        }
+
+    }
+
+}
+
+
+@mixin kendo-calendar--layout() {
+    @include kendo-calendar--layout-base();
+}