@progress/kendo-theme-default 5.12.1-dev.1 → 5.12.1-dev.3

package/scss/rating/_variables.scss

@@ -1,23 +1,24 @@
 // Rating
-$rating-font-family: $font-family !default;
-$rating-font-size: $font-size !default;
-$rating-line-height: $line-height !default;
 
-$rating-container-margin-x: $kendo-padding-sm-x !default;
+$kendo-rating-font-family: $kendo-font-family !default;
+$kendo-rating-font-size: $kendo-font-size-md !default;
+$kendo-rating-line-height: $kendo-line-height-md !default;
 
-$rating-item-padding-x: $kendo-padding-sm-x !default;
-$rating-item-padding-y: $kendo-padding-md-y !default;
+$kendo-rating-container-margin-x: $kendo-padding-sm-x !default;
 
-$rating-label-margin-x: $kendo-padding-md-x !default;
-$rating-label-margin-y: $kendo-padding-md-y !default;
-$rating-label-line-height: $line-height-lg !default;
+$kendo-rating-item-padding-x: $kendo-padding-sm-x !default;
+$kendo-rating-item-padding-y: $kendo-padding-md-y !default;
 
-$rating-icon-size: ($icon-size * 1.5) !default;
+$kendo-rating-label-margin-x: $kendo-padding-md-x !default;
+$kendo-rating-label-margin-y: $kendo-padding-md-y !default;
+$kendo-rating-label-line-height: $kendo-line-height-lg !default;
 
-$rating-icon-text: $kendo-component-text !default;
-$rating-icon-selected-text: $kendo-selected-bg !default;
-$rating-icon-hover-text: $kendo-selected-bg !default;
-$rating-icon-focus-text: $kendo-selected-bg !default;
+$kendo-rating-icon-size: ($kendo-icon-size * 1.5) !default;
 
-$rating-icon-focus-shadow: 0 2px 4px rgba( $kendo-color-black, .1 ) !default;
-$rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1) !default;
+$kendo-rating-icon-text: $kendo-component-text !default;
+$kendo-rating-icon-selected-text: $kendo-selected-bg !default;
+$kendo-rating-icon-hover-text: $kendo-selected-bg !default;
+$kendo-rating-icon-focus-text: $kendo-selected-bg !default;
+
+$kendo-rating-icon-focus-shadow: 0 2px 4px rgba( $kendo-color-black, .1 ) !default;
+$kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1) !default;

package/scss/scheduler/_layout.scss

@@ -3,13 +3,13 @@
 
     // Layout
     .k-scheduler {
-        border-width: $scheduler-border-width;
+        border-width: $kendo-scheduler-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $scheduler-font-family;
-        font-size: $scheduler-font-size;
-        line-height: $scheduler-line-height;
+        font-family: $kendo-scheduler-font-family;
+        font-size: $kendo-scheduler-font-size;
+        line-height: $kendo-scheduler-line-height;
         display: flex;
         flex-direction: column;
         -webkit-touch-callout: none;
@@ -46,8 +46,8 @@
 
         td,
         th {
-            padding: $scheduler-cell-padding-y $scheduler-cell-padding-x;
-            height: $scheduler-cell-height;
+            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-x;
+            height: $kendo-scheduler-cell-height;
             overflow: hidden;
             white-space: nowrap;
             border-style: solid;
@@ -140,7 +140,7 @@
         .k-scheduler-cell {
             display: flex;
             flex: 1 1 100%;
-            padding: $scheduler-cell-padding-y $scheduler-cell-padding-y;
+            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-y;
             min-height: 1.5em;
             overflow: hidden;
             white-space: nowrap;
@@ -220,16 +220,8 @@
             display: inline-flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: $icon-spacing;
+            gap: $kendo-icon-spacing;
             cursor: pointer;
-
-            .k-sm-date-format,
-            .k-lg-date-format {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .k-sm-date-format { display: none; }
         }
 
 
@@ -238,17 +230,6 @@
             display: inline-flex;
             flex-flow: row nowrap;
         }
-
-
-        // Responsive scheduler toolbar
-        @media (max-width: 1400px) {
-            .k-nav-current .k-lg-date-format { max-width: 200px; }
-        }
-
-        @media (max-width: 1024px) {
-            .k-nav-current .k-lg-date-format { display: none; }
-            .k-nav-current .k-sm-date-format { display: inline-block; }
-        }
     }
 
 
@@ -335,7 +316,7 @@
     // Scheduler view header
     .k-scheduler-header,
     .k-scheduler-view-header {
-        padding-inline-end: var(--kendo-scrollbar-width, #{$default-scrollbar-width});
+        padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
     }
     .k-scheduler-header th {
         text-align: center;
@@ -379,10 +360,10 @@
     }
 
     .k-scheduler-datecolumn {
-        width: $scheduler-datecolumn-width;
+        width: $kendo-scheduler-datecolumn-width;
     }
     .k-scheduler-timecolumn {
-        width: $scheduler-timecolumn-width;
+        width: $kendo-scheduler-timecolumn-width;
         white-space: nowrap;
     }
 
@@ -403,11 +384,11 @@
     kendo-scheduler .k-event,
     .k-event {
         @include border-radius( $kendo-border-radius );
-        min-height: $scheduler-event-min-height;
+        min-height: $kendo-scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;
         border-style: solid;
-        border-radius: $scheduler-event-border-radius;
+        border-radius: $kendo-scheduler-event-border-radius;
         text-align: left;
         outline: 0;
         cursor: default;
@@ -422,10 +403,10 @@
 
         // Template
         .k-event-template {
-            line-height: $scheduler-event-line-height;
+            line-height: $kendo-scheduler-event-line-height;
             padding: $kendo-padding-md-y $kendo-padding-md-x;
             // TODO: incompatible units
-            // padding-right: $kendo-padding-sm-x + $spacer;
+            // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
         }
         .k-event-time {
             padding-bottom: 0;
@@ -495,7 +476,7 @@
         }
         .k-resize-n::before,
         .k-resize-s::before {
-            width: $spacer * 2;
+            width: k-map-get( $kendo-spacing, 8 );
             border-bottom-width: 1px;
         }
         .k-resize-w {
@@ -508,7 +489,7 @@
         }
         .k-resize-w::before,
         .k-resize-e::before {
-            height: $spacer * 2;
+            height: k-map-get( $kendo-spacing, 8 );
             border-left-width: 1px;
         }
 
@@ -826,7 +807,7 @@
     // Year view
     .k-scheduler-yearview {
         .k-scheduler-body {
-            padding: $scheduler-yearview-padding-y $scheduler-yearview-padding-x;
+            padding: $kendo-scheduler-yearview-padding-y $kendo-scheduler-yearview-padding-x;
             justify-content: center;
         }
 
@@ -837,7 +818,7 @@
             .k-calendar-view {
                 flex-wrap: wrap;
                 justify-content: center;
-                gap: $scheduler-yearview-calendar-gap;
+                gap: $kendo-scheduler-yearview-calendar-gap;
             }
 
             .k-content {
@@ -854,12 +835,12 @@
         }
 
         .k-day-indicator {
-            margin-top: $scheduler-yearview-indicator-calc-offset-top;
-            width: $scheduler-yearview-indicator-size;
-            height: $scheduler-yearview-indicator-size;
-            border-radius: $scheduler-yearview-indicator-border-radius;
+            margin-top: $kendo-scheduler-yearview-indicator-calc-offset-top;
+            width: $kendo-scheduler-yearview-indicator-size;
+            height: $kendo-scheduler-yearview-indicator-size;
+            border-radius: $kendo-scheduler-yearview-indicator-border-radius;
             position: absolute;
-            left: $scheduler-yearview-indicator-calc-offset-left;
+            left: $kendo-scheduler-yearview-indicator-calc-offset-left;
         }
     }
 
@@ -869,20 +850,20 @@
 @include exports("scheduler-tooltip/layout") {
 
     .k-scheduler-tooltip {
-        padding: $scheduler-tooltip-padding-y $scheduler-tooltip-padding-x;
-        border-width: $scheduler-tooltip-border-width;
+        padding: $kendo-scheduler-tooltip-padding-y $kendo-scheduler-tooltip-padding-x;
+        border-width: $kendo-scheduler-tooltip-border-width;
         color: inherit;
 
         .k-tooltip-title {
-            margin-bottom: $scheduler-tooltip-title-margin-y;
+            margin-bottom: $kendo-scheduler-tooltip-title-margin-y;
 
             .k-month {
-                font-size: $scheduler-tooltip-month-font-size;
+                font-size: $kendo-scheduler-tooltip-month-font-size;
                 text-transform: uppercase;
             }
 
             .k-day {
-                font-size: $scheduler-tooltip-day-font-size;
+                font-size: $kendo-scheduler-tooltip-day-font-size;
             }
         }
 
@@ -891,22 +872,22 @@
         }
 
         .k-tooltip-events {
-            max-height: $scheduler-tooltip-events-max-height;
+            max-height: $kendo-scheduler-tooltip-events-max-height;
             display: flex;
             flex-direction: column;
-            gap: $scheduler-tooltip-events-gap;
+            gap: $kendo-scheduler-tooltip-events-gap;
         }
 
         .k-tooltip-event {
-            padding: $scheduler-tooltip-event-padding-y $scheduler-tooltip-event-padding-x;
-            border-radius: $scheduler-tooltip-event-border-radius;
+            padding: $kendo-scheduler-tooltip-event-padding-y $kendo-scheduler-tooltip-event-padding-x;
+            border-radius: $kendo-scheduler-tooltip-event-border-radius;
             box-sizing: border-box;
             display: flex;
             flex-direction: row;
             align-items: center;
             flex-shrink: 0;
             position: relative;
-            gap: $scheduler-tooltip-event-gap;
+            gap: $kendo-scheduler-tooltip-event-gap;
         }
         .k-tooltip-event .k-event-time {
             display: flex;
@@ -1097,12 +1078,12 @@
 
     .k-safari {
         .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
-            margin-bottom: $scheduler-tooltip-event-gap;
+            margin-bottom: $kendo-scheduler-tooltip-event-gap;
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {
             margin-block: 0;
-            margin-inline: k-math-div( $scheduler-yearview-calendar-gap, 2 );
+            margin-inline: k-math-div( $kendo-scheduler-yearview-calendar-gap, 2 );
         }
     }
 

package/scss/scheduler/_theme.scss

@@ -3,53 +3,53 @@
     // Appearance
     .k-scheduler {
         @include fill(
-            $scheduler-text,
-            $scheduler-bg,
-            $scheduler-border
+            $kendo-scheduler-text,
+            $kendo-scheduler-bg,
+            $kendo-scheduler-border
         );
     }
 
     // Current time
     .k-current-time {
-        background: $scheduler-current-time-color;
+        background: $kendo-scheduler-current-time-color;
 
         &.k-current-time-arrow-left {
-            border-right-color: $scheduler-current-time-color;
+            border-right-color: $kendo-scheduler-current-time-color;
         }
 
         &.k-current-time-arrow-right {
-            border-left-color: $scheduler-current-time-color;
+            border-left-color: $kendo-scheduler-current-time-color;
         }
 
         &.k-current-time-arrow-down {
-            border-top-color: $scheduler-current-time-color;
+            border-top-color: $kendo-scheduler-current-time-color;
         }
     }
 
     // Header and footer
     .k-scheduler-toolbar {
         @include fill(
-            $scheduler-toolbar-text,
-            $scheduler-toolbar-bg,
-            $scheduler-toolbar-border,
-            $scheduler-toolbar-gradient
+            $kendo-scheduler-toolbar-text,
+            $kendo-scheduler-toolbar-bg,
+            $kendo-scheduler-toolbar-border,
+            $kendo-scheduler-toolbar-gradient
         );
     }
     .k-scheduler-footer {
         @include fill(
-            $scheduler-footer-text,
-            $scheduler-footer-bg,
-            $scheduler-footer-border,
-            $scheduler-footer-gradient
+            $kendo-scheduler-footer-text,
+            $kendo-scheduler-footer-bg,
+            $kendo-scheduler-footer-border,
+            $kendo-scheduler-footer-gradient
         );
     }
 
     .k-scheduler-header {
-        background-color: $base-bg;
+        background-color: $kendo-base-bg;
     }
 
     .k-scheduler-header-wrap {
-        background-color: $scheduler-bg;
+        background-color: $kendo-scheduler-bg;
     }
 
 
@@ -70,15 +70,15 @@
     .k-scheduler-nonwork,
     .k-scheduler .k-nonwork-hour {
         @include fill(
-            $scheduler-nonwork-text,
-            $scheduler-nonwork-bg
+            $kendo-scheduler-nonwork-text,
+            $kendo-scheduler-nonwork-bg
         );
     }
     .k-scheduler-other-month,
     .k-scheduler .k-other-month {
         @include fill(
-            $scheduler-othermonth-text,
-            $scheduler-othermonth-bg
+            $kendo-scheduler-othermonth-text,
+            $kendo-scheduler-othermonth-bg
         );
     }
 
@@ -90,7 +90,7 @@
     .k-scheduler-layout-flex {
         .k-scheduler-head,
         .k-sticky-cell {
-            background-color: $scheduler-bg;
+            background-color: $kendo-scheduler-bg;
         }
     }
 
@@ -98,39 +98,39 @@
     // Events
     .k-event {
         @include fill(
-            $scheduler-event-text,
-            $scheduler-event-bg,
-            $scheduler-event-border,
-            $scheduler-event-gradient
+            $kendo-scheduler-event-text,
+            $kendo-scheduler-event-bg,
+            $kendo-scheduler-event-border,
+            $kendo-scheduler-event-gradient
         );
-        @include box-shadow( $scheduler-event-shadow );
+        @include box-shadow( $kendo-scheduler-event-shadow );
 
         &:hover,
         &.k-hover {
             @include fill(
-                $scheduler-event-hover-text,
-                $scheduler-event-hover-bg,
-                $scheduler-event-hover-border,
-                $scheduler-event-hover-gradient
+                $kendo-scheduler-event-hover-text,
+                $kendo-scheduler-event-hover-bg,
+                $kendo-scheduler-event-hover-border,
+                $kendo-scheduler-event-hover-gradient
             );
-            @include box-shadow( $scheduler-event-hover-shadow );
+            @include box-shadow( $kendo-scheduler-event-hover-shadow );
         }
 
         &.k-selected {
             @include fill(
-                $scheduler-event-selected-text,
-                $scheduler-event-selected-bg,
-                $scheduler-event-selected-border,
-                $scheduler-event-selected-gradient
+                $kendo-scheduler-event-selected-text,
+                $kendo-scheduler-event-selected-bg,
+                $kendo-scheduler-event-selected-border,
+                $kendo-scheduler-event-selected-gradient
             );
-            @include box-shadow( $scheduler-event-selected-shadow );
+            @include box-shadow( $kendo-scheduler-event-selected-shadow );
         }
     }
     .k-event-inverse {
-        color: k-contrast-legacy( $scheduler-event-text );
+        color: k-contrast-legacy( $kendo-scheduler-event-text );
     }
     .k-event-ongoing {
-        @include box-shadow( $scheduler-event-ongoing-shadow );
+        @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
     }
 
 
@@ -148,7 +148,7 @@
     // Edit dialog
     .k-scheduler-edit-dialog {
         .k-dialog-actions {
-            border-color: $scheduler-border;
+            border-color: $kendo-scheduler-border;
         }
     }
 
@@ -198,9 +198,9 @@
         .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
-                $scheduler-text,
-                $scheduler-bg,
-                $scheduler-border
+                $kendo-scheduler-text,
+                $kendo-scheduler-bg,
+                $kendo-scheduler-border
             );
         }
 
@@ -210,7 +210,7 @@
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
-            background-color: $scheduler-bg;
+            background-color: $kendo-scheduler-bg;
         }
     }
 
@@ -223,11 +223,11 @@
     .k-scheduler-yearview {
 
         .k-day-indicator {
-            @include fill( $bg: $scheduler-yearview-indicator-bg );
+            @include fill( $bg: $kendo-scheduler-yearview-indicator-bg );
         }
 
         .k-selected .k-day-indicator {
-            @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
+            @include fill( $bg: $kendo-scheduler-yearview-indicator-selected-bg );
         }
     }
 
@@ -240,14 +240,14 @@
 
     .k-tooltip.k-scheduler-tooltip {
         @include fill(
-            $scheduler-tooltip-text,
-            $scheduler-tooltip-bg,
-            $scheduler-tooltip-border
+            $kendo-scheduler-tooltip-text,
+            $kendo-scheduler-tooltip-bg,
+            $kendo-scheduler-tooltip-border
         );
-        @include box-shadow( $scheduler-tooltip-shadow );
+        @include box-shadow( $kendo-scheduler-tooltip-shadow );
 
         .k-callout {
-            @include fill( $color: $scheduler-tooltip-callout-text );
+            @include fill( $color: $kendo-scheduler-tooltip-callout-text );
         }
     }