feat(window): update styles to match updated rendering

BREAKING CHANGE: The following classes are being renamed: * `k-window-actions` renamed to `k-window-titlebar-actions` * `k-window-buttongroup`, `k-window-buttons` renamed to `k-window-actions` BREAKING CHANGE: The following classes are being removed: * `k-window-titleless` removed * `k-dialog-*` classes removed BREAKING CHANGE: By default, the color of the titlebar is now the base color and can be changed via the new themeColor property of the component
telerik · Dec 13, 2022 · 85ed870 · 85ed870
1 parent bd996b2
commit 85ed870
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/packages/default/scss/window/_layout.scss b/packages/default/scss/window/_layout.scss
@@ -73,7 +73,7 @@
 
 
     // Actions
-    .k-window-actions {
+    .k-window-titlebar-actions {
         margin: -5em 0;
         margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
         line-height: 1;
@@ -84,11 +84,11 @@
         align-items: center;
         vertical-align: top;
     }
-    .k-window-action {
+    .k-window-titlebar-action {
         flex-shrink: 0;
         opacity: $kendo-window-action-opacity;
     }
-    .k-window-action:hover {
+    .k-window-titlebar-action:hover {
         opacity: $kendo-window-action-hover-opacity;
     }
 
@@ -129,8 +129,7 @@
     }
 
     // Buttons Layout
-    .k-window-buttons,
-    .k-window-buttongroup {
+    .k-window-actions {
         @include border-bottom-radius( $kendo-window-border-radius );
         padding: $kendo-window-buttongroup-padding-y $kendo-window-buttongroup-padding-x;
         border-width: $kendo-window-buttongroup-border-width 0 0;

diff --git a/packages/fluent/scss/window/_layout.scss b/packages/fluent/scss/window/_layout.scss
@@ -67,7 +67,7 @@
 
 
     // Actions
-    .k-window-actions {
+    .k-window-titlebar-actions {
         margin: -5em 0;
         margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
         line-height: 1;
@@ -78,7 +78,7 @@
         align-items: center;
         vertical-align: top;
     }
-    .k-window-action {
+    .k-window-titlebar-action {
         flex-shrink: 0;
         opacity: var( --kendo-window-action-opacity, #{$kendo-window-action-opacity} );
 
@@ -93,7 +93,7 @@
     .k-window-content,
     .k-prompt-container {
         padding-inline: var( --kendo-window-inner-padding-x, #{$kendo-window-inner-padding-x} );
-        padding-block: 0 var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
+        padding-block: var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
         border-width: 0;
         border-color: inherit;
         color: inherit;
@@ -103,14 +103,9 @@
         position: relative;
         flex: 1 1 auto;
     }
+
     .k-window-content + .k-prompt-container {
-        margin-top: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
-    }
-    .k-window-content:first-child {
-        padding-top: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
-    }
-    .k-window-content:last-child {
-        padding-bottom: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
+        margin-block-start: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
     }
 
     .k-window-iframecontent {
@@ -126,8 +121,7 @@
     }
 
     // Buttons Layout
-    .k-window-buttons,
-    .k-window-buttongroup {
+    .k-window-actions {
         @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
         padding-inline: var( --kendo-window-buttongroup-padding-x, #{$kendo-window-buttongroup-padding-x} );
         padding-block: 0 var( --kendo-window-buttongroup-padding-y, #{$kendo-window-buttongroup-padding-y} );

diff --git a/packages/fluent/scss/window/_variables.scss b/packages/fluent/scss/window/_variables.scss
@@ -56,7 +56,7 @@ $kendo-window-action-hover-opacity: 1 !default;
 $kendo-window-inner-padding-x: map-get( $kendo-spacing, 6 ) !default;
 /// Vertical padding of the content of the window.
 /// @group window
-$kendo-window-inner-padding-y: map-get( $kendo-spacing, 6 ) !default;
+$kendo-window-inner-padding-y: map-get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the window action buttons.
 /// @group window