From a191c7a3828540f79959d5cb6a01b899b1edd42a Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Mon, 2 Feb 2015 23:47:08 -0500
Subject: [PATCH] Typography : Google Material Design standard styles - Layout
 is broken

---
 .../MailerUI/UIxMailFolderTemplate.wox        |  4 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |  6 +-
 .../scss/core/typography/typography.scss      | 63 +++++++++++++------
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 6b8c08dff..ef2086fe5 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -20,11 +20,11 @@
           <div class = "sg-tile-content">
             <a data-ui-sref = "mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
                 data-ui-sref-active = "_selected">
-              <div class = "name">
+              <div class = "sg-md-subhead-multi">
                 {{currentMessage.$shortAddress('from')}}
                 <span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
               </div>
-              <div class = "subject">{{currentMessage.subject}}</div>
+              <div class = "sg-md-body-multi">{{currentMessage.subject}}</div>
               <i class = "icon-ion-refresh"
                   data-ng-hide = "mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
             </a>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 03db39f41..a2e6e2263 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -266,7 +266,7 @@
     <md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
       <md-toolbar class="md-tall" layout-align="end start">
         <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
-          <span class="md-flex">{{activeUser.identification}}</span>
+          <span class="sg-md-title md-flex">{{activeUser.identification}}</span>
         </h2>
       </md-toolbar>
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-padding" ng-controller="LeftCtrl">
@@ -276,7 +276,7 @@
             <md-item-content>
               <div class="md-tile-content">
                 <md-button>
-                  <h3>{{account.name}}</h3>
+                  <span>{{account.name}}</span>
                 </md-button>
               </div>
             </md-item-content>
@@ -294,7 +294,7 @@
             <md-button ng-click="toggleLeft()" class="md-primary md-hide-gt-md">
               <span class="icon-ic_menu_24px"></span>
             </md-button>
-            <div class="display-1" style="font-size: 2em; font-weight: 300">
+            <div class="sg-md-display-1">
               [[Calendar]]
             </div>
           </span>
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
index 041a170bc..aa96eb6e1 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -140,7 +140,9 @@
 // We assume users are setting browser's base font-size according to their needs
 // The default rem size in use for most browsers is 16 css pixels
 // Body font size is defined as 100%, so it won't changege users'settings
-
+$md-prefix : 'sg-md';
+/// @alias $md-prefix
+$md: $md-prefix;
 $sg-rem-Base-value: 16 !global;
 $sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
 
@@ -221,27 +223,28 @@ $h6-margin-Base: 2.33em 0;
 
 /// Gogle Material Design Standard styles
 /// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
+/// Some specification class names are counterintuitive. We provide some aliases
 //  -------------------------------------------------------------------------------------------------
-.sg-md {
-  &-.caption {
+
+  .#{$md}-caption {
     font-size: $sg-font-size-1;
     line-height: $sg-line-height-1;
     font-weight: $sg-font-regular;
     white-space: nowrap;
     }
-  &-.menu {
+  .#{$md}-menu {
     font-size: $sg-font-size-2;
     line-height: $sg-line-height-1;
     font-weight: $sg-font-medium;
     white-space: nowrap;}
-  &-.button {
+  .#{$md}-button {
     font-size: $sg-font-size-2;
     line-height: $sg-line-height-1;
     font-weight: $sg-font-medium;
     white-space: nowrap;
     text-transform: capitalize;
   }
-  &-.body-1 {
+  .#{$md}-body-1 {
     font-size: $sg-font-size-1;
     line-height: $sg-line-height-2;
     font-weight: $sg-font-regular;
@@ -249,10 +252,10 @@ $h6-margin-Base: 2.33em 0;
     margin-bottom: $sg-line-height-2;
   }
   /// @alias .body-1
-  &-.body-multi {
-    @extend .body-1;
+  .#{$md}-body-multi {
+    @extend .#{$md}-body-1;
   }
-  &-.body-2 {
+  .#{$md}-body-2 {
     $lineHeight : $sg-line-height-2 + $sg-md-baseline;
     font-size: $sg-font-size-1;
     line-height: $lineHeight;
@@ -260,7 +263,11 @@ $h6-margin-Base: 2.33em 0;
     margin-top: ($lineHeight * -1);
     margin-bottom: $lineHeight;
   }
-  &-.subhead-1 {
+  /// @alias .body-2
+  .#{$md}-body-solo {
+    @extend .#{$md}-body-2;
+  }
+  .#{$md}-subhead-1 {
     $lineHeight : $sg-line-height-3;
     font-size: $sg-font-size-3;
     line-height: $lineHeight;
@@ -268,7 +275,11 @@ $h6-margin-Base: 2.33em 0;
     margin-top: ($lineHeight * -1);
     margin-bottom: $lineHeight;
   }
-  &-.subhead-2 {
+  /// @alias .subhead-1
+  .#{$md}-subhead-multi {
+    @extend .#{$md}-subhead-1;
+  }
+  .#{$md}-subhead-2 {
     $lineHeight : $sg-line-height-3 + $sg-md-baseline;
     font-size: $sg-font-size-3;
     line-height: $lineHeight;
@@ -276,14 +287,18 @@ $h6-margin-Base: 2.33em 0;
     margin-top: ($lineHeight * -1);
     margin-bottom: $lineHeight;
   }
-  &-.title {
+  /// @alias .subhead-2
+  .#{$md}-subhead-solo {
+    @extend .#{$md}-subhead-2;
+  }
+  .#{$md}-title {
     $lineHeight : $sg-line-height-4;
     font-size: $sg-font-size-4;
     line-height: $lineHeight;
     font-weight: $sg-font-medium;
     white-space: nowrap;
   }
-  &-.headline {
+  .#{$md}-headline {
     $lineHeight : $sg-line-height-5;
     font-size: $sg-font-size-5;
     line-height: $lineHeight;
@@ -291,7 +306,7 @@ $h6-margin-Base: 2.33em 0;
     margin-top: ($lineHeight * -1);
     margin-bottom: $lineHeight;
   }
-  &-.display-1 {
+  .#{$md}-display-1 {
     $lineHeight : $sg-line-height-6;
     font-size: $sg-font-size-6;
     line-height: $lineHeight;
@@ -299,27 +314,35 @@ $h6-margin-Base: 2.33em 0;
     margin-top: ($lineHeight * -1);
     margin-bottom: $lineHeight;
   }
-  &-.display-2 {
+  .#{$md}-display-2 {
     $lineHeight: $sg-line-height-7;
     font-size: $sg-font-size-7;
     line-height: $lineHeight;
     font-weight: $sg-font-regular;
     white-space: nowrap;
   }
-  &-.display-3 {
+  .#{$md}-display-3 {
     $lineHeight : $sg-line-height-8;
     font-size: $sg-font-size-8;
     line-height: $lineHeight;
     font-weight: $sg-font-regular;
     white-space: nowrap;
   }
-  &-.display-4 {
+  .#{$md}-display-4 {
     $lineHeight : $sg-line-height-9;
     font-size: $sg-font-size-9;
     line-height: $lineHeight;
     font-weight: $sg-font-light;
     white-space: nowrap;
   }
-}
-/// Some specification class names are counterintuitive. Here are some aliases
-// ----------------------------------------------------------------------------
+
+  a,
+  a:hover,
+  a:active,
+  a:visited,
+  link {
+    color: inherit;
+    text-decoration: none;
+    border: none;
+    outline: none;
+  }