Fine-tune layout

UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss

@@ -10,6 +10,10 @@
 // avoid overspecifying
 // todo: create new classes and refactor templates markup
 // ----------------------------------------------------------------------------
+.vs-repeat-repeated-element {
+  width: 100%;
+}
+
 [id='messagesList'],
 [id='contactsList'] {
   border-top: 44px solid transparent;   // padding for the header.subheader,

UI/WebServerResources/scss/components/button/_button.scss

@@ -32,6 +32,9 @@ md-sidenav md-list button.md-button {
 md-sidenav .md-button [class ^= "md-icon"] {
   margin-right: 1em;
 }
+md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] {
+  margin: 0;
+}
 
 ///
 /// iconButton
@@ -80,7 +83,7 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
   [class ^= md-icon],
   [class *= md-icon-] {
     padding: $iconButton-icon-padding;
-    color: curentColor;
+    color: currentColor;
     font-size: $iconButton-icon-size;
     transition: $iconButton-transition;
   }
@@ -92,13 +95,29 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     border-radius: 50%;
   }
 }
+md-toolbar .md-toolbar-tools:first-of-type .iconButton,
+md-toolbar .md-toolbar-tools:first-child .iconButton,
+md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton,
+md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton {
+  margin-top: ($mg * -1);
+}
 // First button must have it's icon align to margin/padding
-md-content.md-padding > .iconButton:first-child {
-  margin-top: ($iconButton-padding * -1);
-  margin-left: ($iconButton-padding * -1);
+md-toolbar .md-toolbar-tools .iconButton:first-child,
+.sg-toolbar-group-last .iconButton:first-child {
+  margin-left: ($mg * -1);
+}
+md-content.md-padding,
+md-card-content {
+  &> .iconButton:first-child {
+    margin-top: ($mg * -1);
+    margin-left: ($mg * -1);
   }
-
-
+}
+// Last button must have it's icon align to margin/padding
+md-toolbar .md-toolbar-tools .iconButton:last-child,
+.sg-toolbar-group-last .iconButton:last-child {
+  margin-right: ($mg * -1);
+}
 
 // Icon-bars are for iconButtons, by default they're vertical and at the right
 // the modifier class is to reflect those values and leave place to other versions
@@ -133,8 +152,8 @@ md-content.md-padding > .iconButton:first-child {
 }
 
 .sg-button-navicon {
-  top: ($mg * -1);
-  margin-left: ($mg * -1);
+  //top: ($mg * -1);
+  //margin-left: ($mg * -1);
   width: $touch-zone;
   height: $touch-zone;
 }

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

@@ -1,13 +1,33 @@
+$toolbar-tools-height: 100%;
+$toolbar-height: $pitch;
+$toolbar-medium-tall-height: 88px !default;
+$toolbar-tall-height: ($toolbar-height * 2);
+$toolbar-indent-margin: $pitch;
+$toolbar-padding: $mg;
 @import 'extends';
 
+// According to specs, there's no case where toolbars have no padding
+// We overule angular-material way of implenting this by defining padding toolbars
+// instead of toolbar-tools to prevent padding addition
+// INFO: because we make intensive use of border-box box sizing model, horizontal paddings
+// must be declare in containers with sg-padded
 md-toolbar {
-  // todo: create variables scaled z-index
+  padding: $toolbar-padding 0;
   box-shadow: none;
   font-size: initial;
 }
 
+.md-toolbar-tools {
+  padding: 0 initial;
+}
+
+// angular-material is overspecifying so we are
+.md-toolbar-tools[layout-align="start start"] {
+  align-items: flex-start;
+}
+
 .md-toolbar-tools.md-toolbar-tools-top {
-  padding-top: $mg;
+  align-items: flex-start;
 }
 
 .md-toolbar-tools.md-toolbar-tools-bottom {
@@ -46,7 +66,8 @@ hgroup {
   &-2 {
     order: 2;
   }
-  &-3 {
+  &-3,
+  &-last {
     order: 3;
   }
 }