Add toolbars Icons (several bugs, some remaining)

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -4,6 +4,10 @@ md-toolbar {
   z-index: 20;
   box-shadow: none;
 }
+.md-toolbar-tools.md-toolbar-tools-bottom {
+  height: (5 * $line);
+  max-height: (5 * $line);
+}
 header {
   flex-direction: row;
   align-items: stretch;
@@ -17,6 +21,10 @@ hgroup {
     margin-bottom: 0;
   }
 }
+.toolbar-main .md-button {
+  color: inherit;
+  font-size: sg-size(headline);
+}
 .sg-icon-bar {
   font-size: $sg-font-size-3;
   color: $colorGray;
@@ -29,5 +37,21 @@ hgroup {
 .sg-icon-bar *.button {
   display: block;
 }
+.sg-toolbar-group {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  &-1 {
+    order: 1;
+    max-width: $messageList-width;
+  }
+  &-2 {
+    order: 2;
+  }
+  &-3 {
+    order: 3;
+  }
+}
 
 

UI/WebServerResources/scss/core/layout.scss

@@ -16,3 +16,13 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
 .md-flex {
   flex: 1 1 auto;
 }
+
+@for $i from 1 to 20 {
+  .cols-#{$i} {
+  max-width: grid-step($i);
+  flex: 1 1 auto;
+  }
+  .cols-#{$i}.spacer {
+    width: grid-step($i);
+  }
+}

UI/WebServerResources/scss/core/mixins.scss

@@ -29,4 +29,4 @@
       @extend #{'['$selector']'} !optional
     }
   }
-}
+}

UI/WebServerResources/scss/core/variables.scss

@@ -51,6 +51,8 @@ $layout-breakpoint-lg:     1200px !default;
 // App bar variables
 $app-bar-height: 64px;
 
+$messageList-width: grid-step(7);
+
 $toast-height: $baseline-grid * 3 !default;
 $toast-margin: $baseline-grid * 1 !default;
 

UI/WebServerResources/scss/views/MailerUI.scss

@@ -1,8 +1,6 @@
 
-
-
 [id="messagesList"] {
-  max-width: grid-step(7);
+  max-width:$messageList-width;
   flex: 1 1 auto;
 
 }