@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/calendar/_layout.scss

@@ -1,37 +1,12 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *;
 
 @mixin kendo-calendar--layout() {
+    @include kendo-calendar--layout-base();
 
-    // Calendar
-
-    // Base
     .k-calendar {
-        inline-size: var( --kendo-calendar-width, min-content );
-        block-size: var( --kendo-calendar-height, min-content );
-        border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
-        border-style: solid;
-        border-radius: var( --kendo-calendar-border-radius, #{$kendo-calendar-border-radius} );;
-        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: $kendo-color-rgba-transparent;
-
-
-        // Nested calendar
-        > .k-calendar {
-            border: 0;
-        }
-
         // Common
         .k-link {
             white-space: normal;
@@ -40,157 +15,34 @@
         }
     }
 
-
-    // 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-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;
+        font-size: inherit;
     }
 
-    .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} );
-        inline-size: var( --kendo-calendar-cell-size, var( --kendo-calendar-header-cell-width, #{$kendo-calendar-header-cell-width} ) );
-        block-size: var( --kendo-calendar-cell-size, 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} ));
-        inline-size: var( --kendo-calendar-cell-size, min-content );
-        block-size: var( --kendo-calendar-cell-size, min-content );
-        border-color: transparent;
-        font-size: var( --kendo-calendar-cell-font-size, inherit );
-    }
-
-
-    // Calendar cell inner
-    // Remove .k-calendar once we remove k-link
-    .k-calendar .k-calendar-cell-inner {
-        @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
-        padding-inline: var( --kendo-calendar-cell-padding-x, 0 );
-        padding-block: var( --kendo-calendar-cell-padding-y, 0 );
-        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-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-view-width, #{$kendo-calendar-view-width});
-        box-sizing: border-box;
-        display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        flex: 0 0 auto;
-
-        .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;
+        padding-inline: $kendo-calendar-footer-padding-x;
+        padding-block: $kendo-calendar-footer-padding-y;
     }
 
-
-    // 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
-        inline-size: var( --kendo-calendar-view-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-today {
-            font-weight: var( --kendo-calendar-today-font-weight, #{$kendo-calendar-today-font-weight} );
-        }
-
+        padding-block-end: $kendo-calendar-view-padding-block-end;
 
         .k-link {
-            @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
-            padding-inline: var( --kendo-calendar-cell-padding-x, 0 );
-            padding-block: var( --kendo-calendar-cell-padding-y, 0 );
+            @include border-radius( $kendo-calendar-cell-border-radius );
+            padding-inline: $kendo-calendar-cell-padding-x;
+            padding-block: $kendo-calendar-cell-padding-y;
             width: 100%;
             height: 100%;
             box-sizing: border-box;
@@ -204,199 +56,35 @@
         }
 
         .k-today .k-link {
-            @include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
-        }
-    }
-
-
-    // Month view
-    .k-month-calendar,
-    .k-calendar-monthview {
-        $_month-cell-size: $kendo-calendar-cell-size;
-
-        .k-calendar-td {
-            width: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
-            height: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
-            inline-size: var( --kendo-calendar-cell-size, #{$_month-cell-size} );
-            block-size: var( --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: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
-            height: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
-            inline-size: var( --kendo-calendar-cell-size, #{$_year-cell-size} );
-            block-size: var( --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: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
-            height: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
-            inline-size: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
-            block-size: var( --kendo-calendar-cell-size, #{$_decade-cell-size} );
+            @include border-radius( $kendo-calendar-today-border-radius );
         }
     }
 
-
-    // Century view
     .k-century-calendar,
     .k-calendar-centuryview {
-        $_century-cell-size: ( 2 * $kendo-calendar-cell-size );
-
-        .k-calendar-td {
-            width: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
-            height: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
-            inline-size: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
-            block-size: var( --kendo-calendar-cell-size, #{$_century-cell-size} );
-        }
         .k-link {
             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-dir-agnostic();
     }
 
-    // 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;
+            margin-inline-start: calc( -1 * #{$kendo-infinite-calendar-view-padding-x} );
+            margin-inline-end: calc( -1 * #{$kendo-infinite-calendar-view-padding-x} );
             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: 1;
-
-        .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%);
+        .k-calendar-view::after {
+            display: none;
         }
-
     }
 
-
-    // Multiview calendar
     .k-calendar-range {
-        width: auto;
-
         .k-calendar-header {
             flex-direction: row;
 
@@ -404,25 +92,11 @@
                 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 {
@@ -455,8 +129,8 @@
         border-radius: 0;
 
         @if ( $kendo-enable-rounded ) {
-            border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-start-start-radius: $kendo-calendar-cell-border-radius;
+            border-end-start-radius: $kendo-calendar-cell-border-radius;
         }
     }
 
@@ -467,57 +141,27 @@
         border-radius: 0;
 
         @if ( $kendo-enable-rounded ) {
-            border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-start-end-radius: $kendo-calendar-cell-border-radius;
+            border-end-end-radius: $kendo-calendar-cell-border-radius;
         }
     }
 
     .k-range-start.k-range-end::before {
         border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
+        border-radius: $kendo-calendar-cell-border-radius;
     }
 
+    .k-calendar-navigation::before,
+    .k-calendar-navigation::after {
+        display: none;
+    }
 
-
-
-    // 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 );
-        $_cell-font-size: map.get( $size-props, cell-font-size );
+        $_cell-font-size: map.get($size-props, cell-font-size);
 
-        $_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} {
-            --kendo-calendar-view-width: #{8 * $_cell-size};
-            --kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
-            --kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
-            --kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            &.k-month-calendar,
-            .k-calendar-monthview {
-                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
-            }
-            &.k-year-calendar,
-            .k-calendar-yearview {
-                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
-            }
-            &.k-decade-calendar,
-            .k-calendar-decadeview {
-                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
-            }
-            &.k-century-calendar,
-            .k-calendar-centuryview {
-                --kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
-            }
+        .k-calendar-#{$size} .k-calendar-td {
+            font-size: $_cell-font-size;
         }
     }
+
 }