@progress/kendo-theme-fluent 5.7.0

package/scss/calendar/_layout.scss

@@ -0,0 +1,456 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-calendar--layout() {
+
+    // Calendar
+
+    // Base
+    .k-calendar {
+        border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-calendar-font-family, #{$kendo-calendar-font-family} );
+        font-size: var( --kendo-calendar-font-size, #{$kendo-calendar-font-size} );
+        line-height: var( --kendo-calendar-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: $rgba-transparent;
+
+
+        // Nested calendar
+        > .k-calendar {
+            border: 0;
+        }
+
+        // Common
+        .k-link {
+            white-space: normal;
+            position: relative;
+            overflow: hidden;
+        }
+    }
+
+
+    // Calendar table
+    .k-calendar-table {
+        margin: 0;
+        border-width: 0;
+        border-color: inherit;
+        border-spacing: 0;
+        border-collapse: separate;
+        table-layout: fixed;
+        text-align: center;
+        outline: 0;
+        display: inline-table;
+        vertical-align: top;
+        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-inline: var( --kendo-calendar-caption-padding-x, #{$kendo-calendar-caption-padding-x} );
+        padding-block: var( --kendo-calendar-caption-padding-y, #{$kendo-calendar-caption-padding-y} );
+        height: var( --kendo-calendar-caption-height, #{$kendo-calendar-caption-height} );
+        box-sizing: border-box;
+        font-size: var( --kendo-calendar-caption-font-size, #{$kendo-calendar-caption-font-size} );
+        line-height: var( --kendo-calendar-caption-line-height, #{$kendo-calendar-caption-line-height} );
+        text-transform: none;
+        text-align: center;
+        font-weight: var( --kendo-calendar-caption-font-weight, #{$kendo-calendar-caption-font-weight} );
+        cursor: default;
+    }
+
+    .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-inline: var( --kendo-calendar-header-cell-padding-x, #{$kendo-calendar-header-cell-padding-x} );
+        padding-block: var( --kendo-calendar-header-cell-padding-y, #{$kendo-calendar-header-cell-padding-y} );
+        width: var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} );
+        height: var( --kendo-calendar-header-cell-height, #{$kendo-calendar-header-cell-height} );
+        font-size: var( --kendo-calendar-header-cell-font-size, #{$kendo-calendar-header-cell-font-size} );
+        line-height: var( --kendo-calendar-header-cell-line-height, #{$kendo-calendar-header-cell-line-height} );
+        text-transform: uppercase;
+    }
+
+    .k-calendar-td {
+        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        border-color: transparent;
+        font-size: var( --kendo-calendar-cell-font-size, #{$kendo-calendar-cell-font-size} );
+    }
+
+
+    // Calendar header
+    .k-calendar .k-header {
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
+        border-bottom-width: var( --kendo-calendar-header-border-width, #{$kendo-calendar-header-border-width} );
+        border-bottom-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
+        align-items: center;
+        position: relative;
+        z-index: 2;
+    }
+
+
+    // Calendar header
+    .k-calendar-header {
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        padding-block: var( --kendo-calendar-header-padding-y, #{$kendo-calendar-header-padding-y} );
+        min-width: var( --kendo-calendar-header-min-width, #{$kendo-calendar-header-min-width} );
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        flex: 0 0 auto;
+
+        .k-title,
+        .k-calendar-title {
+            font-weight: bold;
+        }
+        .k-today,
+        .k-nav-today,
+        .k-calendar-nav-today {
+            text-decoration: none;
+            cursor: pointer;
+            outline: none;
+        }
+
+        .k-calendar-nav {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            gap: var( --kendo-calendar-nav-gap, #{$kendo-calendar-nav-gap} );
+        }
+    }
+
+
+    // Calendar footer
+    .k-calendar-footer,
+    .k-calendar .k-footer {
+        padding-inline: var( --kendo-calendar-header-footer-x, #{$kendo-calendar-footer-padding-x} );
+        padding-block: var( --kendo-calendar-header-footer-y, #{$kendo-calendar-footer-padding-y} );
+        text-align: center;
+        clear: both;
+    }
+
+
+    // Calendar view wrapper
+    .k-calendar-view {
+        margin: auto;
+        padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
+        padding-block-end: var( --kendo-calendar-view-padding-block-end, #{$kendo-calendar-view-padding-block-end} );
+        // setting width / height prevents layout changes in meta views
+        width: $kendo-calendar-view-width;
+        min-height: $kendo-calendar-view-height;
+        box-sizing: content-box;
+        gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+
+        .k-link {
+            @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
+            padding-inline: var( --kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
+            padding-block: var( --kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .k-today .k-link {
+            @include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
+        }
+    }
+    .k-week-number .k-calendar-view {
+        width: calc(8 * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+    }
+
+
+    // Month view
+    .k-calendar-monthview {
+        $_month-cell-size: var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} );
+
+        .k-calendar-td {
+            width: $_month-cell-size;
+            height: $_month-cell-size;
+        }
+        .k-link {
+            width: $_month-cell-size;
+            height: $_month-cell-size;
+        }
+    }
+
+
+    // Year view
+    .k-calendar-yearview {
+        $_year-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_year-cell-size;
+            height: $_year-cell-size;
+        }
+    }
+
+
+    // Decade view
+    .k-calendar-decadeview {
+        $_decade-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_decade-cell-size;
+            height: $_decade-cell-size;
+        }
+    }
+
+
+    // Century view
+    .k-calendar-centuryview {
+        $_century-cell-size: calc( (7 / 4) * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
+
+        .k-calendar-td {
+            width: auto;
+            height: auto;
+        }
+        .k-link {
+            width: $_century-cell-size;
+            height: $_century-cell-size;
+            text-align: left;
+        }
+    }
+
+
+    // 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();
+    }
+
+    // scoped in calendar until it is used elsewhere
+    .k-calendar .k-scrollable-placeholder {
+        position: absolute;
+        z-index: -1;
+        width: 1px;
+        top: 0;
+        right: 0;
+    }
+
+
+    // Infinite calendar
+    .k-calendar-infinite {
+        box-sizing: content-box;
+        display: inline-flex;
+        flex-flow: row nowrap;
+
+        .k-calendar-view {
+            padding-inline: var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} );
+            padding-block: var( --kendo-infinite-calendar-view-padding-y, #{$kendo-infinite-calendar-view-padding-y} );
+            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;
+            }
+        }
+
+        .k-calendar-header {
+            margin-inline-start: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
+            margin-inline-end: calc( -1 * var( --kendo-infinite-calendar-view-padding-x, #{$kendo-infinite-calendar-view-padding-x} ));
+            padding-inline: var( --kendo-infinite-calendar-header-padding-x, #{$kendo-infinite-calendar-header-padding-x} );
+            padding-block: var( --kendo-infinite-calendar-header-padding-y, #{$kendo-infinite-calendar-header-padding-y} );
+            width: auto;
+            min-width: 0;
+            flex-direction: row;
+        }
+
+        .k-calendar-weekdays {
+            flex: 0 0 auto;
+        }
+    }
+
+
+    // Calendar navigation
+    .k-calendar-navigation {
+        width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
+        text-align: center;
+        flex: 0 0 auto;
+        display: block;
+        overflow: hidden;
+        position: relative;
+        z-index: 2;
+
+        .k-content,
+        .k-calendar-content {
+            background: transparent;
+            height: auto;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+
+            ul {
+                width: var( --kendo-calendar-navigation-width, #{$kendo-calendar-navigation-width} );
+            }
+
+            li {
+                height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+                line-height: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+                cursor: pointer;
+                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: var( --kendo-calendar-navigation-item-height, #{$kendo-calendar-navigation-item-height} );
+            box-sizing: border-box;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+        }
+
+    }
+
+
+    // Multiview calendar
+    .k-calendar-range {
+        width: auto;
+
+        .k-calendar-header {
+            flex-direction: row;
+
+            &.k-vstack {
+                flex-direction: column;
+            }
+        }
+
+        .k-calendar-view {
+            width: auto;
+            white-space: nowrap;
+
+            &::after {
+                display: none;
+            }
+
+            &:focus {
+                outline: 0;
+            }
+        }
+
+        .k-range-start,
+        .k-range-end,
+        .k-range-mid {
+
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                z-index: 1;
+                inset: 0px;
+                border-style: solid;
+                border-width: var( --INTERNAL--kendo-calendar-range-border-width, 0 );
+            }
+        }
+
+        .k-range-start::before,
+        .k-range-mid:first-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 0 1px 1px;
+            @include border-left-radius(var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        }
+
+        .k-range-end::before,
+        .k-range-mid:last-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 1px 1px 0;
+            @include border-right-radius(var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
+        }
+
+        .k-range-mid::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px 0;
+        }
+
+        .k-range-start:last-child::before,
+        .k-range-end:first-child::before {
+            --INTERNAL--kendo-calendar-range-border-width: 1px;
+        }
+    }
+
+
+    .k-rtl .k-calendar,
+    .k-calendar[dir="rtl"] {
+
+        .k-nav-prev,
+        .k-nav-next,
+        .k-prev-view,
+        .k-next-view,
+        .k-calendar-nav-prev,
+        .k-calendar-nav-next {
+            transform: scaleX(-1);
+        }
+    }
+}

package/scss/calendar/_theme.scss

@@ -0,0 +1,203 @@
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-calendar--theme() {
+    .k-calendar {
+        @include fill(
+            var(--kendo-calendar-text, #{$kendo-calendar-text}),
+            var(--kendo-calendar-bg, #{$kendo-calendar-bg}),
+            var(--kendo-calendar-border, #{$kendo-calendar-border}),
+        );
+
+        // Header / footer
+        .k-header {
+            @include fill(
+                var(--kendo-calendar-header-text, #{$kendo-calendar-header-text}),
+                var(--kendo-calendar-header-bg, #{$kendo-calendar-header-bg}),
+                inherit,
+            );
+        }
+
+        // Today navigation
+        .k-nav-today,
+        .k-calendar-nav-today {
+            color: var(--kendo-calendar-today-nav-text, #{$kendo-calendar-today-nav-text});
+
+            &:hover,
+            &.k-hover,
+            &:focus,
+            &.k-focus {
+                color: var(--kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text});
+            }
+        }
+
+
+        // Header cells
+        .k-calendar-th {
+            color: var(--kendo-calendar-header-cell-text, #{$kendo-calendar-header-cell-text});
+        }
+
+        .k-calendar-caption,
+        .k-meta-header,
+        .k-month-header {
+            color: var(--kendo-calendar-caption-color, #{$kendo-calendar-caption-color});
+        }
+
+
+        .k-calendar-td {
+            --INTERNAL--kendo-calendar-cell-text: var( --kendo-calendar-cell-text );
+            --INTERNAL--kendo-calendar-cell-bg: var( --kendo-calendar-cell-bg );
+
+            @include fill(
+                var( --INTERNAL--kendo-calendar-cell-text, inherit ),
+                var( --INTERNAL--kendo-calendar-cell-bg, inherit )
+            );
+
+            .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-link-text );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-link-bg );
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-link-shadow );
+
+                @include fill(
+                    var( --INTERNAL--kendo-calendar-cell-link-text, inherit ),
+                    var( --INTERNAL--kendo-calendar-cell-link-bg, inherit )
+                );
+
+                box-shadow: var( --INTERNAL--kendo-calendar-cell-link-shadow, none );
+            }
+
+            &:hover .k-link,
+            &.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-hover-text, #{$kendo-calendar-cell-hover-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-hover-bg, #{$kendo-calendar-cell-hover-bg} );
+            }
+
+            &:focus .k-link,
+            &.k-focus .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-focus-shadow, #{$kendo-calendar-cell-focus-shadow} );
+            }
+
+            &.k-selected .k-link{
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-text, #{$kendo-calendar-cell-selected-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-bg, #{$kendo-calendar-cell-selected-bg} );
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-shadow, #{$kendo-calendar-cell-selected-shadow} );
+            }
+
+            &.k-selected:hover .k-link,
+            &.k-selected.k-hover .k-link {
+                --INTERNAL--kendo-calendar-cell-link-text: var( --kendo-calendar-cell-selected-hover-text, #{$kendo-calendar-cell-selected-hover-text} );
+                --INTERNAL--kendo-calendar-cell-link-bg: var( --kendo-calendar-cell-selected-hover-bg, #{$kendo-calendar-cell-selected-hover-bg} );
+            }
+
+            &.k-selected:focus .k-link,
+            &.k-selected.k-focus .k-link {
+                --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-selected-focus-shadow} );
+            }
+
+            &.k-disabled {
+                --kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
+            }
+        }
+
+        // Special days
+
+        .k-today {
+            --kendo-calendar-cell-link-text: var( --kendo-calendar-today-text, #{$kendo-calendar-today-text} );
+            --kendo-calendar-cell-link-bg: var( --kendo-calendar-today-bg, #{$kendo-calendar-today-bg} );
+            --kendo-calendar-cell-hover-text: var( --kendo-calendar-today-hover-text, #{$kendo-calendar-today-hover-text} );
+            --kendo-calendar-cell-hover-bg: var( --kendo-calendar-today-hover-bg, #{$kendo-calendar-today-hover-bg} );
+        }
+
+        .k-weekend {
+            --kendo-calendar-cell-text: var( --kendo-calendar-weekend-text, #{$kendo-calendar-weekend-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-weekend-bg, #{$kendo-calendar-weekend-bg} );
+        }
+
+        .k-other-month {
+            --kendo-calendar-cell-text: var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-other-month-bg, #{$kendo-calendar-other-month-bg} );
+        }
+
+        .k-alt {
+            // remove default k-alt background color
+            background-color: transparent;
+
+            --kendo-calendar-cell-text: var( --kendo-calendar-week-number-text, #{$kendo-calendar-week-number-text} );
+            --kendo-calendar-cell-bg: var( --kendo-calendar-week-number-bg, #{$kendo-calendar-week-number-bg} );
+        }
+
+
+        // Calendar navigation
+        .k-calendar-navigation {
+            @include fill(
+                var( --kendo-calendar-navigation-text, #{$kendo-calendar-navigation-text} ),
+                var( --kendo-calendar-navigation-bg, #{$kendo-calendar-navigation-bg} ),
+            );
+            box-shadow: inset -1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
+
+            li:hover,
+            li.k-hover {
+                color: var( --kendo-calendar-today-nav-hover-text, #{$kendo-calendar-today-nav-hover-text} );
+            }
+        }
+        .k-calendar-navigation-highlight {
+            @include fill(
+                var( --kendo-calendar-text, #{$kendo-calendar-text} ),
+                var( --kendo-calendar-bg, #{$kendo-calendar-bg} ),
+                var( --kendo-calendar-border, #{$kendo-calendar-border} )
+            );
+        }
+
+
+        &[dir="rtl"],
+        .k-rtl & {
+            .k-calendar-navigation {
+                box-shadow: inset 1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
+            }
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.k-invalid:hover,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-color: var( --kendo-invalid-border, inherit );
+        }
+    }
+
+
+    // Scheduler integration
+    .k-scheduler .k-calendar .k-other-month {
+        @include fill(
+            var( --kendo-calendar-other-month-text, #{$kendo-calendar-other-month-text} ),
+            transparent
+        );
+    }
+
+    // Range Selection
+
+    .k-calendar .k-calendar-td  {
+
+        &.k-range-start,
+        &.k-range-end,
+        &.k-range-mid {
+            --kendo-calendar-cell-bg: var( --kendo-calendar-range-bg, #{$kendo-calendar-range-bg} );
+            --kendo-calendar-cell-text: var( --kendo-calendar-range-text, #{$kendo-calendar-range-text} );
+            --kendo-calendar-cell-link-bg: transparent;
+            --kendo-calendar-cell-selected-shadow: none;
+
+            &::before {
+                border-color: var( --kendo-calendar-range-border, #{$kendo-calendar-range-border} );
+            }
+
+            &.k-disabled {
+                --kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
+            }
+        }
+    }
+
+    .k-out-of-range {
+        pointer-events: none;
+    }
+}