@taiga-ui/core 4.68.0 → 5.0.0-canary.0dce162

package/styles/components/notification.less

@@ -2,7 +2,7 @@
 
 /**
  * @name Notification
- * @selector tui-notification, [tuiNotification]
+ * @selector [tuiNotification]
  *
  * @description
  * A colored rounded block of information with optional icon, title, subtitle and actions
@@ -11,26 +11,25 @@
  * data-size — size (default: 'l') ('s' | 'm' | 'l')
  *
  * @example
- * <tui-notification tuiAppearance data-appearance="negative">
+ * <div tuiNotification tuiAppearance data-appearance="negative">
  *   <span tuiTitle>
  *     Error
  *     <span tuiSubtitle>Something went wrong</span>
  *   </span>
- * </tui-notification>
+ * </div>
  *
  * @see-also
  * Icons, Appearance
  */
-tui-notification,
-[tuiNotification] {
+[tuiNotification]:where(*&) {
     .button-clear();
 
     position: relative;
-    display: block;
+    display: flow-root;
     max-block-size: 100%;
     color: var(--tui-text-primary);
     padding: 1rem;
-    font: var(--tui-font-text-m);
+    font: var(--tui-font-body-m);
     line-height: 1.5rem;
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
@@ -39,63 +38,55 @@ tui-notification,
     border-inline-start: var(--t-start) solid transparent;
     border-inline-end: var(--t-end) solid transparent;
 
+    .interactive({
+        cursor: pointer;
+    });
+
     --t-start: 0;
     --t-end: 0;
 
-    &[style*='--t-icon-start:'] {
+    &[data-icon-start] {
         --t-start: 2rem;
     }
 
-    &[style*='--t-icon-end:'] {
+    &[data-icon-end] {
         --t-end: 1.5rem;
     }
 
     &::before {
         position: absolute;
-        left: -1rem;
         inset-inline-start: -1rem;
     }
 
     &::after {
         .center-top();
 
-        right: -0.5rem;
+        inset-inline-end: -0.5rem;
         font-size: 1rem;
         margin: 0;
         margin-inline-end: -0.25rem;
         margin-inline-start: auto;
         color: var(--tui-text-tertiary) !important;
-
-        @supports (inset-inline-end: 0) {
-            right: unset;
-            inset-inline-end: -0.5rem;
-        }
     }
 
     &[data-size='s'] {
         padding: 0.375rem 0.625rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.5rem;
         }
 
         &::before {
-            top: 0.5rem;
-            left: -0.875rem;
+            inset-block-start: 0.5rem;
             inset-inline-start: -0.875rem;
             font-size: 1rem;
         }
 
         &::after {
-            right: -0.875rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: -0.875rem;
-            }
+            inset-inline-end: -0.875rem;
         }
 
         tui-icon {
@@ -103,12 +94,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -117,39 +108,28 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            top: 0;
-            right: 0;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: 0;
-            }
+            inset-block-start: 0;
+            inset-inline-end: 0;
         }
     }
 
     &[data-size='m'] {
         padding: 0.75rem;
-        font: var(--tui-font-text-s);
+        font: var(--tui-font-body-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &[style*='--t-icon-start:'] {
+        &[data-icon-start] {
             --t-start: 1.625rem;
         }
 
         &::before {
-            left: -0.875rem;
             inset-inline-start: -0.875rem;
             font-size: 1.25rem;
         }
 
         &::after {
-            right: -0.75rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: -0.75rem;
-            }
+            inset-inline-end: -0.75rem;
         }
 
         tui-icon {
@@ -157,12 +137,12 @@ tui-notification,
         }
 
         [tuiTitle] {
-            font: var(--tui-font-text-ui-m);
+            font: var(--tui-font-ui-m);
             font-weight: bold;
         }
 
         [tuiSubtitle] {
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
 
         [tuiSubtitle] + * {
@@ -171,48 +151,34 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            top: 0.375rem;
-            right: 0.5rem;
-
-            @supports (inset-inline-end: 0) {
-                right: unset;
-                inset-inline-end: 0.5rem;
-            }
+            inset-block-start: 0.375rem;
+            inset-inline-end: 0.5rem;
         }
     }
 
     [tuiTitle] {
         gap: 0.125rem;
-        font: var(--tui-font-text-ui-l);
+        font: var(--tui-font-ui-l);
         font-weight: bold;
     }
 
     [tuiSubtitle] {
-        font: var(--tui-font-text-m);
+        font: var(--tui-font-body-m);
 
         + * {
             display: flex;
             align-items: center;
             gap: 1.25rem;
             margin-block-start: 0.625rem;
-            font: var(--tui-font-text-s);
+            font: var(--tui-font-body-s);
         }
     }
 
     > [tuiIconButton] {
         position: absolute;
-        top: 0.75rem;
-        right: 0.75rem;
+        inset-block-start: 0.75rem;
+        inset-inline-end: 0.75rem;
         box-shadow: none !important;
         background: transparent !important;
-
-        @supports (inset-inline-end: 0) {
-            right: unset;
-            inset-inline-end: 0.75rem;
-        }
     }
 }
-
-[tuiNotification] {
-    cursor: pointer;
-}