Clean the left-border of the notification-toast

FlowFuse · Jun 21, 2022 · bb72e12 · bb72e12
1 parent 8634327
commit bb72e12
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/dist/scss/forge-colors.scss b/dist/scss/forge-colors.scss
@@ -59,8 +59,20 @@ $ff-indigo-700: #4338CA;
 $ff-indigo-800: #3730A3;
 $ff-indigo-900: #312E81;
 
+$ff-green-50: #ECFDF5;
+$ff-green-100: #D1FAE5;
+$ff-green-200: #A7F3D0;
+$ff-green-300: #6EE7B7;
+$ff-green-400: #34D399;
+$ff-green-500: #10B981;
+$ff-green-600: #059669;
+$ff-green-700: #047857;
+$ff-green-800: #065F46;
+$ff-green-900: #064E3B;
+
 // Theme Colors
 
 $ff-color--action: $ff-blue-900;
 $ff-color--highlight: $ff-indigo-700;
-$ff-color--danger: $ff-red-500;
+$ff-color--danger: $ff-red-500;
+$ff-color--danger--dark: $ff-red-600;
diff --git a/src/components/NotificationToast.vue b/src/components/NotificationToast.vue
@@ -2,6 +2,7 @@
     <div class="ff-notification-toast" :class="'ff-notification-toast--' + type">
         <div class="ff-notification-toast--message">
             <div>
+                <span class="ff-notification-toast--bar"></span>
                 <slot name="message">
                     {{ message }}
                 </slot>

diff --git a/src/stylesheets/ff-components.scss b/src/stylesheets/ff-components.scss
@@ -430,21 +430,41 @@ li.ff-list-item {
 }
 
 .ff-notification-toast {
+  position: relative;
   background-color: $ff-white;
   border: 1px solid $ff-grey-300;
-  border-left-width: $ff-unit-md;
-  padding: $ff-unit-md $ff-unit-lg;
+  padding: $ff-unit-md $ff-unit-lg $ff-unit-md $ff-unit-xl ;
   box-shadow: -$ff-unit-xs $ff-unit-xs $ff-unit-sm $ff-grey-400;
   border-radius: 0 $ff-unit-sm $ff-unit-sm 0;
   max-width: 475px;
+
+  &--bar {
+    height: 100%;
+    width: $ff-unit-md;
+    background-color: black;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   &--info {
     border-left-color: $ff-grey-400;
+    .ff-notification-toast--bar {
+      background-color: $ff-grey-400;
+    }
   }
   &--warning {
     border-left-color: $ff-red-400;
+    .ff-notification-toast--bar {
+      background-color: $ff-red-400;
+    }
   }
   &--confirmation {
     border-left-color: $ff-green-400;
+    .ff-notification-toast--bar {
+      background-color: $ff-green-400;
+    }
   }
 
   &--message {