Modularized notification toast and menu components.

scss/menus/audiomenu.scss

@@ -32,7 +32,7 @@
 }
 .menu-section-container.playback {
     margin-top: 0em;
-    margin-bottom: 1.35em;
+    margin-bottom: 1em;
 }
 .menu-section-container.input {
     margin-top: 0em;

scss/menus/bluetooth.scss

@@ -3,7 +3,7 @@
 .menu-items-container.bluetooth {
     font-size: 1.3em;
     .menu-section-container {
-        margin: 1.35em 0em;
+        margin: 1em 0em;
     }
 
     .menu-label-container {

scss/menus/calendar.scss

@@ -74,7 +74,7 @@
   }
   .clock-content-period {
     font-size: 1.75em;
-    margin-bottom: 1.3em;
+    margin-bottom: 1.35em;
     margin-right: -0.875em;
     color: $teal;
   }

scss/menus/media.scss

@@ -5,7 +5,7 @@
   min-height: 18em;
 
   .menu-section-container {
-    margin: 1.3em 0em;
+    margin: 1em 0em;
   }
 
   .menu-items-section {

scss/menus/menu.scss

@@ -104,7 +104,7 @@ tooltip label {
 }
 
 .menu-section-container {
-    margin: 1.35em 0em;
+    margin: 1em 0em;
 
     .menu-label {
         color: $text;
@@ -117,7 +117,7 @@ tooltip label {
         border-radius: 0.4em;
         border-bottom-left-radius: 0em;
         border-bottom-right-radius: 0em;
-        margin: 0em 1.35em ;
+        margin: 0em 1em ;
         min-height: 2em;
     }
 
@@ -130,7 +130,7 @@ tooltip label {
     }
 
     &:nth-child(2) {
-        margin-top: 1.35em;
+        margin-top: 1em;
     }
 
     .menu-items-section {
@@ -139,7 +139,7 @@ tooltip label {
         border-top-left-radius: 0em;
         border-top-right-radius: 0em;
         padding: 0.9em;
-        margin: 0em 1.35em;
+        margin: 0em 1em;
     }
 }
 

scss/menus/notifications.scss

@@ -2,7 +2,7 @@
 
 .notification-card-container.menu {
   margin: 0em;
-  min-width: 28.6em;
+  min-width: 30.5em;
   min-height: 48em;
   background: $crust;
   border: 0.13em solid $surface0;
@@ -14,14 +14,14 @@
   }
 
   .menu-content-container.notifications {
-    margin: 1.35em;
+    margin: 1em;
     margin-bottom: 0em;
     min-height: 4em;
   }
 
   .notification-menu-controls {
     background: $base;
-    margin: 1em 1.3em;
+    margin: 1em 1em;
     margin-bottom: 0.5em;
     border-radius: 0.4em;
     padding: 0.4em 0.75em;
@@ -29,7 +29,7 @@
 
   .notification-card.menu {
     background: $base;
-    min-width: 23.5em;
+    min-width: 26.2em;
     border: 0.15em solid $base;
     border-radius: 0em;
     border-bottom-left-radius: 0.4em;
@@ -40,7 +40,7 @@
   .notification-card-content-container {
     margin-bottom: 0.65em;
     &:last-child {
-      margin-bottom: 1.3em;
+      margin-bottom: 1em;
     }
   }
   .notification-card-content {
@@ -92,3 +92,18 @@
     font-size: 1.5em;
   }
 }
+
+.close-notification-button.menu {
+  background: $red;
+  color: $crust;
+  min-width: 2.1em;
+  border-radius: 0rem 0.35em 0.35em 0em;
+
+  label {
+    font-size: 1.5em;
+  }
+
+  &:hover {
+    background: $maroon;
+  }
+}

scss/notifications/popups.scss

@@ -21,7 +21,6 @@
   padding: 1px;
 }
 
-
 .notification-card-image-container {
   margin: 0.65em 0.65em;
   border-radius: 0.4em;
@@ -84,6 +83,8 @@
 
 .notification-icon {
   margin-bottom: 0.4em;
+  min-width: 1em;
+  min-height: 1em;
   font-size: 1.3em;
 }