alert.css in coveragebook_components-0.8.0.beta.2

- old
+ new

@@ -73,26 +73,29 @@
     }
 
     /* Condensed */
 
     &[data-condensed="true"] {
+      .alert-container {
+        min-height: theme(spacing.12);
+        @apply py-1.5;
+      }
+
       .alert-icon {
-        .coco-icon {
-          @apply w-4 h-4;
-        }
+        @apply p-0 !bg-transparent;
       }
 
       .alert-body {
         @apply pl-3;
       }
 
       .alert-title {
-        @apply text-para-sm;
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
       }
 
       .alert-message {
-        @apply text-para-sm;
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
       }
     }
 
     /* Layout */
 
@@ -214,19 +217,51 @@
 
     &.with-title .alert-message {
       @apply mt-1;
     }
 
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-3;
+      }
+
+      .coco-icon {
+        @apply mt-1.5;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
+    }
+
     &[data-dismissable="true"] {
       .alert-container {
         @apply pr-12;
       }
 
       .alert-dismiss {
         @apply ml-auto absolute top-2 right-2;
       }
     }
+
+    &:not(.with-title) {
+      &:not(.with-action) {
+        .alert-container {
+          @apply items-center;
+        }
+
+        .alert-icon {
+          @apply self-center;
+        }
+
+        &[data-dismissable="true"] {
+          .alert-dismiss {
+            @apply absolute right-3 top-1/2 -translate-y-1/2;
+          }
+        }
+      }
+    }
   }
 
   .app-alert-multi-line {
     .alert-container {
       @apply items-center py-2.5;
@@ -250,32 +285,42 @@
 
     &.with-title .alert-message {
       @apply mt-1;
     }
 
-    &[data-condensed="true"].with-title .alert-message {
-      @apply mt-0.5;
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-2;
+      }
+
+      .coco-icon {
+        @apply mt-0;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
     }
 
     .alert-actions {
       @apply mt-0 ml-auto;
     }
 
     &[data-dismissable="true"] {
       .alert-body {
-        @apply pr-10;
+        @apply pr-2;
       }
 
       .alert-dismiss {
         @apply absolute right-3 top-1/2 -translate-y-1/2;
       }
     }
   }
 
   .app-alert-single-line {
     .alert-container {
-      @apply py-3;
+      @apply py-2;
     }
 
     .alert-content {
       @apply flex items-center w-full space-x-2;
     }
@@ -291,15 +336,19 @@
     .alert-link {
       @apply hidden;
     }
 
     &[data-dismissable="true"] {
+      .alert-body {
+        @apply pr-2;
+      }
+
       .alert-container {
         @apply px-12;
       }
 
       .alert-dismiss {
-        @apply absolute right-[21px] top-1/2 -translate-y-1/2;
+        @apply absolute right-3 top-1/2 -translate-y-1/2;
       }
     }
   }
 }