fix(styles): fixed an issue where a title in a cvi-toast could overla…

…p with a close button
e-gov · Oct 5, 2023 · b008ac4 · b008ac4
1 parent 45a0abf
commit b008ac4
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/libs/styles/src/lib/scss/components/_toast.scss b/libs/styles/src/lib/scss/components/_toast.scss
@@ -1,10 +1,13 @@
 @mixin cvi-toast($base: &) {
   --comment: 'A toast aka floating notification';
 
+  --padding: var(--cvi-spacing-haapsalu);
+  --close-button-size: 16px;
+
   position: relative;
   width: 350px;
   overflow: hidden;
-  padding: var(--cvi-spacing-haapsalu);
+  padding: var(--padding);
   margin-bottom: var(--cvi-spacing-paldiski);
   border-radius: var(--cvi-radius-m);
   color: var(--cvi-color-black-coral-18);
@@ -28,8 +31,8 @@
 
     #{$base}__icon {
       display: block;
-      width: 16px;
-      height: 16px;
+      width: var(--close-button-size);
+      height: var(--close-button-size);
     }
 
     #{$base}--appearance-success {
@@ -71,6 +74,7 @@
     #{$base}__title {
       display: flex;
       align-items: center;
+      margin-right: calc(var(--close-button-size) + var(--cvi-spacing-rapla));
     }
 
     #{$base}__title-text {
@@ -82,8 +86,8 @@
 
     #{$base}__close-button {
       position: absolute;
-      top: 20px;
-      right: 20px;
+      top: var(--padding);
+      right: var(--padding);
       cursor: pointer;
     }