fit(design): Alert with details has issues when a lot of texts is pre…

…sent
AxaFrance · Oct 9, 2023 · ac3f4e0 · ac3f4e0
1 parent 50ca843
commit ac3f4e0
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/packages/alert/src/alert.scss b/packages/alert/src/alert.scss
@@ -27,15 +27,15 @@ $typesLite: (
 
         .af-alert__content__left {
           background: nth($typeLite, 2);
-          width: 4.2rem;
+          width: 4.5rem;
         }
       }
 
       .af-alert__title {
         &-icon {
           background-color: nth($typeLite, 2);
           color: $white;
-          width: 4rem;
+          width: 4.5rem;
 
           &::after {
             border-left-color: nth($typeLite, 2);
@@ -54,24 +54,21 @@ $typesLite: (
 
     &-icon {
       position: relative;
-      padding: 0 1.3rem;
+      flex-grow: 0;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.25rem;
 
       &::after {
         content: '';
         position: absolute;
-        right: -1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        height: 0;
-        width: 0;
-        border-top: 2rem solid transparent;
-        border-bottom: 2rem solid transparent;
-        border-left: 1rem solid transparent;
-      }
-
-      .glyphicon {
-        top: 50%;
-        transform: translateY(-50%);
+        right: 0;
+        transform: translateX(100%);
+        border-top: 1.65rem solid transparent;
+        border-bottom: 1.65rem solid transparent;
+        border-left: 1.5rem solid transparent;
       }
 
       &-close {
@@ -96,6 +93,11 @@ $typesLite: (
   &__content {
     display: flex;
 
+    &__left {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+
     .af-alert__content__right {
       padding: 0 1.5rem;
     }