feat(notification): Updating styles - FRONT-4270 (#3245)

* feat(notification): Updating styles - FRONT-4270 * feat(notification): Using logical properties for RTL support - FRONT-4270
ec-europa · Feb 19, 2024 · 2a96e4d · 2a96e4d · github-actions · Feb 19, 2024
1 parent 0a72cd5
commit 2a96e4d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/src/implementations/vanilla/components/notification/notification.scss b/src/implementations/vanilla/components/notification/notification.scss
@@ -19,7 +19,10 @@ $notification: null !default;
   display: flex;
   font: map.get($notification, 'font');
   margin: 0;
-  padding: map.get($notification, 'padding');
+  padding-bottom: map.get($notification, 'padding');
+  padding-inline-start: map.get($notification, 'padding-start');
+  padding-inline-end: map.get($notification, 'padding-end');
+  padding-top: map.get($notification, 'padding');
   position: relative;
 }
 
@@ -55,6 +58,7 @@ $notification: null !default;
   grid-column-start: 2;
   grid-row-end: span 2;
   grid-row-start: 1;
+  margin-inline-end: map.get($notification, 'close-offset');
   margin-top: map.get($notification, 'close-offset');
 
   .no-js & {
@@ -136,6 +140,8 @@ $notification: null !default;
     grid-row-start: 3;
     justify-self: end;
     margin-bottom: map.get($notification, 'close-offset');
+    margin-inline-end: 0;
+    margin-top: map.get($notification, 'close-offset');
   }
 
   @include breakpoints.up('m') {

diff --git a/src/themes/ec/variables/_notification.scss b/src/themes/ec/variables/_notification.scss
@@ -4,6 +4,8 @@
 $notification: (
   radius: 0,
   padding: var(--s-xl),
+  padding-end: var(--s-xl),
+  padding-start: var(--s-3xl),
   border-width: 1px,
   border-color: var(--c-n),
   font: var(--f-m),
@@ -12,7 +14,7 @@ $notification: (
   title-font-weight: map.get($font-weight, 'regular'),
   title-spacing: var(--s-s),
   close-color: var(--c-d),
-  close-offset: calc(var(--s-m) - var(--s-2xl)),
+  close-offset: calc(var(--s-m) - var(--s-xl)),
   info: (
     background: var(--c-n-20),
     color: var(--c-in),

diff --git a/src/themes/eu/variables/_notification.scss b/src/themes/eu/variables/_notification.scss
@@ -3,7 +3,9 @@
 
 $notification: (
   radius: 4px,
-  padding: var(--s-l) var(--s-xs) var(--s-l) var(--s-l),
+  padding: var(--s-l),
+  padding-end: var(--s-xs),
+  padding-start: var(--s-l),
   border-width: 0,
   border-color: transparent,
   font: var(--f-p-m),