alert.css in coveragebook_components-0.8.0.beta.1

- old
+ new

@@ -1,11 +1,11 @@
 @layer components {
   [data-coco][data-component="app-alert"] {
     @apply rounded-xl overflow-hidden border border-transparent @container;
 
     .alert-container {
-      @apply flex items-start p-4 relative;
+      @apply flex items-start px-4 py-2 relative;
     }
 
     .alert-icon {
       @apply flex items-center p-2 rounded-full;
 
@@ -21,25 +21,21 @@
     .alert-content {
       @apply text-content-dark-1 w-full;
     }
 
     .alert-title {
-      @apply text-para-md font-bold;
+      @apply text-heading-6 font-bold;
     }
 
     .alert-message {
       @apply text-para-md;
 
       a {
         @apply text-current;
       }
     }
 
-    &.with-title .alert-message {
-      @apply mt-1;
-    }
-
     .alert-actions {
       @apply space-x-1 flex items-center;
     }
 
     &.vivid .alert-actions {
@@ -54,11 +50,11 @@
 
     &[data-banner="true"] {
       @apply rounded-none;
 
       .alert-container {
-        @apply @[1000px]:justify-center;
+        @apply @[1000px]:justify-center px-app;
       }
 
       .alert-body {
         @apply @[1000px]:w-auto;
       }
@@ -69,18 +65,40 @@
     &[data-dismissable="true"] {
       .alert-dismiss {
         @apply flex-none;
 
         .coco-button .button-element {
-          @apply text-content-dark-2 hover:text-content-dark-1;
+          @apply text-content-dark-2 hover:text-content-dark-1 bg-transparent hover:bg-white/10 transition;
         }
       }
     }
 
+    /* Condensed */
+
+    &[data-condensed="true"] {
+      .alert-icon {
+        .coco-icon {
+          @apply w-4 h-4;
+        }
+      }
+
+      .alert-body {
+        @apply pl-3;
+      }
+
+      .alert-title {
+        @apply text-para-sm;
+      }
+
+      .alert-message {
+        @apply text-para-sm;
+      }
+    }
+
     /* Layout */
 
-    @apply app-alert-stacked @[500px]:app-alert-multi-line;
+    @apply app-alert-stacked @[576px]:app-alert-multi-line;
 
     &[data-single-line="true"]:not(.force-multi-line) {
       @apply @[1000px]:app-alert-single-line;
     }
 
@@ -93,11 +111,11 @@
     &[data-theme] {
       @apply transition-all;
     }
 
     &[data-theme*="vivid"] {
-      @apply border-none;
+      @apply border-none antialiased;
 
       .alert-content {
         @apply text-content-light-1;
       }
 
@@ -184,19 +202,22 @@
   }
 }
 
 @layer utilities {
   .app-alert-stacked {
-    .alert-title {
-      matgin-top: -1px;
-      margin-bottom: 2px;
+    .alert-container {
+      @apply py-4;
     }
 
     .alert-actions {
-      @apply mt-2;
+      @apply mt-3;
     }
 
+    &.with-title .alert-message {
+      @apply mt-1;
+    }
+
     &[data-dismissable="true"] {
       .alert-container {
         @apply pr-12;
       }
 
@@ -206,11 +227,11 @@
     }
   }
 
   .app-alert-multi-line {
     .alert-container {
-      @apply items-center;
+      @apply items-center py-2.5;
     }
 
     .alert-icon {
       @apply self-center;
     }
@@ -225,34 +246,60 @@
 
     .alert-title {
       margin-bottom: 0;
     }
 
+    &.with-title .alert-message {
+      @apply mt-1;
+    }
+
+    &[data-condensed="true"].with-title .alert-message {
+      @apply mt-0.5;
+    }
+
     .alert-actions {
       @apply mt-0 ml-auto;
     }
 
     &[data-dismissable="true"] {
-      .alert-container {
-        @apply pr-3;
+      .alert-body {
+        @apply pr-10;
       }
 
       .alert-dismiss {
-        @apply relative top-auto right-auto flex flex-col;
+        @apply absolute right-3 top-1/2 -translate-y-1/2;
       }
     }
   }
 
   .app-alert-single-line {
+    .alert-container {
+      @apply py-3;
+    }
+
     .alert-content {
       @apply flex items-center w-full space-x-2;
     }
 
     .alert-title {
       @apply whitespace-nowrap;
     }
 
+    &.with-title .alert-message {
+      @apply mt-0;
+    }
+
     .alert-link {
       @apply hidden;
+    }
+
+    &[data-dismissable="true"] {
+      .alert-container {
+        @apply px-12;
+      }
+
+      .alert-dismiss {
+        @apply absolute right-[21px] top-1/2 -translate-y-1/2;
+      }
     }
   }
 }