feat(calendar): update styles to match design guidelines

telerik · Mar 18, 2024 · 3657cd0 · 3657cd0
1 parent 3d06d34
commit 3657cd0
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 21 deletions.
diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss
@@ -48,6 +48,8 @@ $kendo-calendar-caption-font-size: null !default;
 $kendo-calendar-caption-line-height: null !default;
 $kendo-calendar-caption-font-weight: bold !default;
 
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;

diff --git a/packages/classic/scss/calendar/_variables.scss b/packages/classic/scss/calendar/_variables.scss
@@ -48,6 +48,8 @@ $kendo-calendar-caption-font-size: null !default;
 $kendo-calendar-caption-line-height: null !default;
 $kendo-calendar-caption-font-weight: bold !default;
 
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;

diff --git a/packages/default/scss/calendar/_layout.scss b/packages/default/scss/calendar/_layout.scss
@@ -86,6 +86,9 @@
         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
@@ -133,11 +136,6 @@
         justify-content: space-between;
         flex: 0 0 auto;
 
-        .k-title,
-        .k-calendar-title {
-            font-weight: bold;
-        }
-
         .k-calendar-nav {
             display: flex;
             flex-flow: row nowrap;
@@ -171,6 +169,10 @@
         position: relative;
         z-index: 1;
         overflow: hidden;
+
+        .k-today {
+            font-weight: bold;
+        }
     }
 
 

diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -63,9 +63,6 @@
                 $kendo-calendar-week-number-bg
             );
         }
-        .k-out-of-range {
-            pointer-events: none;
-        }
 
 
         // Interactive states

diff --git a/packages/default/scss/calendar/_variables.scss b/packages/default/scss/calendar/_variables.scss
@@ -49,6 +49,8 @@ $kendo-calendar-caption-font-size: null !default;
 $kendo-calendar-caption-line-height: null !default;
 $kendo-calendar-caption-font-weight: bold !default;
 
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;

diff --git a/packages/fluent/scss/calendar/_layout.scss b/packages/fluent/scss/calendar/_layout.scss
@@ -148,11 +148,6 @@
         justify-content: space-between;
         flex: 0 0 auto;
 
-        .k-title,
-        .k-calendar-title {
-            font-weight: bold;
-        }
-
         .k-calendar-nav {
             display: flex;
             flex-flow: row nowrap;
@@ -186,6 +181,11 @@
         z-index: 1;
         overflow: hidden;
 
+        .k-today {
+            font-weight: bold;
+        }
+
+
         .k-link {
             @include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
             padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );

diff --git a/packages/fluent/scss/calendar/_theme.scss b/packages/fluent/scss/calendar/_theme.scss
@@ -237,7 +237,4 @@
         }
     }
 
-    .k-out-of-range {
-        pointer-events: none;
-    }
 }
diff --git a/packages/fluent/scss/calendar/_variables.scss b/packages/fluent/scss/calendar/_variables.scss
@@ -30,10 +30,10 @@ $kendo-calendar-border: var( --kendo-component-border, initial) !default;
 
 /// Horizontal padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-header-padding-x: map.get( $kendo-spacing, 1 ) !default;
 /// Vertical padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-y: map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
 /// Width of the bottom border of the calendar header.
 /// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
@@ -55,10 +55,10 @@ $kendo-calendar-nav-gap: 0 !default;
 
 /// Horizontal padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-footer-padding-x: map.get( $kendo-spacing, 1 ) !default;
 /// Vertical padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-y: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-footer-padding-y: map.get( $kendo-spacing, 1 ) !default;
 
 /// Font size of the calendar cell.
 /// @group calendar
@@ -128,7 +128,7 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// Bottom padding of calendar views.
 /// @group calendar
-$kendo-calendar-view-padding-block-end: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-view-padding-block-end: map.get( $kendo-spacing, 1 ) !default;
 /// Spacing between the views in the multiview calendar.
 /// @group calendar
 $kendo-calendar-view-gap: map.get( $kendo-spacing, 4 ) !default;

diff --git a/packages/material/scss/calendar/_variables.scss b/packages/material/scss/calendar/_variables.scss
@@ -48,6 +48,8 @@ $kendo-calendar-caption-font-size: null !default;
 $kendo-calendar-caption-line-height: null !default;
 $kendo-calendar-caption-font-weight: bold !default;
 
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;