feat(notification): add notification action/s classes

BREAKING CHANGE: The following changes have been made to the notification classes: * removed `k-notification-wrap` * added `k-notification-actions` and `k-notification-action` classes
telerik · Dec 13, 2022 · 46f5154 · 46f5154
1 parent 1142d6f
commit 46f5154
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 76 deletions.
diff --git a/packages/default/scss/notification/_layout.scss b/packages/default/scss/notification/_layout.scss
@@ -31,7 +31,10 @@
         line-height: $kendo-notification-line-height;
         cursor: default;
         position: relative;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $kendo-notification-icon-spacing;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
@@ -40,48 +43,27 @@
         *::after {
             box-sizing: border-box;
         }
-    }
-
-    .k-notification-wrap {
-        display: flex;
-        flex-flow: row nowrap;
-
-        > .k-icon {
-            margin-top: $kendo-notification-icon-offset;
-            margin-right: $kendo-notification-icon-spacing;
-            flex: none;
-        }
-
-        > .k-i-close,
-        > .k-i-x {
-            margin-right: 0;
-            margin-left: $kendo-notification-icon-spacing;
-            flex: none;
-            cursor: pointer;
-        }
 
         > .k-notification-content {
             flex: 1 1 auto;
         }
     }
 
-    // RTL
-    .k-rtl .k-notification,
-    [dir="rtl"] .k-notification {
-
-        .k-notification-wrap {
-
-            > .k-icon {
-                margin-right: 0;
-                margin-left: $kendo-notification-icon-spacing;
-            }
-
-            > .k-i-close,
-            > .k-i-x {
-                margin-left: 0;
-                margin-right: $kendo-notification-icon-spacing;
-            }
-        }
+    .k-notification-actions {
+        flex: none;
+        display: flex;
+        gap: $kendo-notification-icon-spacing;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+        cursor: pointer;
+    }
+    .k-notification-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
     }
 
 }
diff --git a/packages/default/scss/notification/_theme.scss b/packages/default/scss/notification/_theme.scss
@@ -9,12 +9,6 @@
         );
         @include box-shadow( $kendo-notification-shadow );
     }
-    .k-notification-wrap {
-        > .k-i-close,
-        > .k-i-x {
-            color: inherit;
-        }
-    }
 
     @each $name, $props in $kendo-notification-theme {
         .k-notification-#{$name} {

diff --git a/packages/fluent/scss/notification/_layout.scss b/packages/fluent/scss/notification/_layout.scss
@@ -37,7 +37,10 @@
         line-height: var( --kendo-notification-line-height, #{$kendo-notification-line-height} );
         cursor: default;
         position: relative;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
@@ -46,29 +49,26 @@
         *::after {
             box-sizing: border-box;
         }
+
+        > .k-notification-content {
+            flex: 1 1 auto;
+        }
     }
 
-    .k-notification-wrap {
+    .k-notification-actions {
+        flex: none;
         display: flex;
+        gap: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
         flex-flow: row nowrap;
-
-        >.k-icon {
-            margin-inline-end: var( --kendo-notification-icon-spacing, #{$kendo-notification-icon-spacing} );
-            align-self: center;
-            flex: none;
-        }
-
-        >.k-i-close,
-        >.k-i-x {
-            margin-inline-end: 0;
-            margin-inline-start: var( --kendo-notification-close-icon-spacing, #{$kendo-notification-close-icon-spacing} );
-            flex: none;
-            cursor: pointer;
-        }
-
-        >.k-notification-content {
-            flex: 1 1 auto;
-        }
+        align-items: center;
+        cursor: pointer;
+    }
+    .k-notification-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
     }
 
 }
diff --git a/packages/fluent/scss/notification/_theme.scss b/packages/fluent/scss/notification/_theme.scss
@@ -16,19 +16,6 @@
         box-shadow: var( --INTERNAL--kendo-notification-box-shadow, none );
     }
 
-    .k-notification-wrap {
-        >.k-icon {
-            --INTERNAL--kendo-notification-icon-text: var( --kendo-notification-icon-text, #{$kendo-notification-icon-text} );
-
-            color: var( --INTERNAL--kendo-notification-icon-text, initial );
-        }
-
-        >.k-i-close,
-        >.k-i-x {
-            color: inherit;
-        }
-    }
-
     @each $theme-color, $color-props in $kendo-notification-theme-colors {
         $_text: inherit;
         $_bg: map-get( $color-props, bg );