Fixed the message headers design (markup and scss)

Create a "PseudoField" component that mimics Material Design input fields
2026-10-09 13:57:12 +00:00 · 2015-06-11 15:57:25 -04:00
1 parent e429dc3ff1
commit 4f2fc5c99e
@@ -8,57 +8,61 @@
   xmlns:uix="OGo:uix">

 <md-content md-scroll-y="md-scroll-y"  class="md-padding">
-    <header class="msg-header">
-      <hgroup>
-        <h3 class="sg-md-headline" data-ng-bind="message.subject"><!-- subject --></h3>
-        <div class="msg-header-group">
-          <div layout="row" layout-align="start center">
-            <label>
-              <var:string label:value="From"/>
-            </label>
-            <div class="sg-avatar">
-              <!--avatar-->
-            </div>
-            <div class="sg-md-body-multi name">
-              <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
-            </div>
-          </div>
+  <header class="msg-header">

-          <div layout="row" layout-align="start center">
-            <label>
-              <var:string label:value="To"/>
-            </label>
-            <div class="sg-md-body-multi">
-              <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
-            </div>
+      <div class="msg-header-content">
+        <h3 class="sg-md-title-msg" data-ng-bind="message.subject"><!-- subject --></h3>
+        <div class="PseudoField--compact">
+          <label class="PseudoField-label">
+            <var:string label:value="From"/>
+          </label>
+          <div class="PseudoField-inputLike">
+            <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
          </div>
        </div>

-        <p class="flags">
-          <span class="label radius" data-ng-repeat="flag in message.flags">{{flag}}</span>
-        </p>
-      </hgroup>
-      <div class="sg-icon-bar">
-
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"><i class="md-icon-reply"><!-- reply --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i></a>
-          <a class="button tiny radius"
-              data-ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
-              data-ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i></a>
-          <span class="button tiny radius alert"
-              data-ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i></span>
-        <span class="button tiny radius"
-              data-ng-show="message.hasUnsafeContent"
-              data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
+        <div class="PseudoField--compact">
+          <label class="PseudoField-label">
+            <var:string label:value="To"/>
+          </label>
+          <div class="PseudoField-inputLike">
+            <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
+          </div>
+        </div>
      </div>
-    </header>
+
+<!--      <p class="flags">
+        &lt;!&ndash; Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place&ndash;&gt;
+        <span class="PseudoField-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
+      </p>
+-->
+
+    <div class="sg-icon-bar">
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'reply'})"><i class="md-icon-reply"><!-- reply --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'replyall'})"><i class="md-icon-reply-all"><!-- reply all --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.action({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid, actionName: 'forward'})"><i class="md-icon-forward"><!-- forward --></i></a>
+        <a class="button tiny radius"
+            data-ui-sref="mail.account.mailbox.message.edit({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
+            data-ng-show="message.isDraft"><i class="md-icon-create"><!-- edit --></i></a>
+        <span class="button tiny radius alert"
+            data-ng-click="doDelete(message)"><i class="md-icon-delete"><!-- delete --></i></span>
+      <span class="button tiny radius"
+            data-ng-show="message.hasUnsafeContent"
+            data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
+    </div>
+  </header>
  <md-divider><!-- divider --></md-divider>
-  <div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
-  <div class="mailer_mailcontent"
-       data-ng-bind-html="message.$content()"><!-- msg --></div>
+
+  <div class="msg-body">
+    <div class="msg-date sg-md-body-multi">
+      <date data-ng-bind="message.date"><!-- date --></date>
+    </div>
+    <div class="mailer_mailcontent"
+         data-ng-bind-html="message.$content()"><!-- msg --></div>
+  </div>
+
 </md-content>
 </container>
@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": ";;;;;;;;;;;;;;AAsYI,eAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,eAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,IAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,IAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,IAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,IAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,IAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,IAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,kBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,kBAAqB;EACnB,gBAAgB,EALV,OAAuB;;;;;;;AChYnC;;;;;;;;;;;;wBAYyB;EACvB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,OAAO;EACb,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,QAAQ;;;AAI1B,IAAK;EACH,WAAW,EAAE,CAAC;;;AAIhB,MAAO;EACL,UAAU,EAAE,IAAI;;;AAIlB,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC;;;AAInB,eAAgB;EACd,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,MAAM;EACnB,cAAc,EAAE,MAAM;;;AAIxB,aAAc;EACZ,MAAM,EAAE,IAAI;;;AAGd,sDAAuD;EACrD,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,IAAI;;;AAIf,KAAM;EACJ,MAAM,EAAE,IAAI;;;AAId,sGAAuG;EACrG,OAAO,EAAE,KAAK;;;;;;;;;ADoUZ,eAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,eAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,gBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,gBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EAFC,OAAuB;;AAI/B,iBAAqB;EACnB,gBAAgB,EALV,OAAuB;;AAC/B,iBAAqB;EACnB,KAAK,EALine truncated
-"sources": ["../scss/components/_palette.scss","../scss/core/reset.scss","../angular-material/src/core/style/structure.scss","../scss/core/mixins.scss","../scss/core/variables.scss","../angular-material/src/core/style/layout.scss","../scss/core/layout.scss","../scss/core/typography/typography.scss","../angular-material/src/components/backdrop/backdrop.scss","../scss/components/backdrop/backdrop.scss","../angular-material/src/components/bottomSheet/bottomSheet.scss","../angular-material/src/components/button/button.scss","../scss/components/button/_button.scss","../angular-material/src/components/card/card.scss","../scss/components/card/card.scss","../angular-material/src/components/checkbox/checkbox.scss","../angular-material/src/components/content/content.scss","../scss/components/content/content.scss","../angular-material/src/components/dialog/dialog.scss","../angular-material/src/components/divider/divider.scss","../scss/components/divider/divider.scss","../angular-material/src/components/icon/icon.scss","../bower_components/material-design-iconic-font/scss/_core.scss","../bower_components/material-design-iconic-font/scss/_sizes.scss","../bower_components/material-design-iconic-font/scss/_border.scss","../bower_components/material-design-iconic-font/scss/_pulled.scss","../bower_components/material-design-iconic-font/scss/_spinned.scss","../bower_components/material-design-iconic-font/scss/_rotated.scss","../bower_components/material-design-iconic-font/scss/_mixins.scss","../bower_components/material-design-iconic-font/scss/icons/_actions.scss","../bower_components/material-design-iconic-font/scss/icons/_alert.scss","../bower_components/material-design-iconic-font/scss/icons/_audio-video.scss","../bower_components/material-design-iconic-font/scss/icons/_communication.scss","../bower_components/material-design-iconic-font/scss/icons/_content.scss","../bower_components/material-design-iconic-font/scss/icons/_device.scss","../bower_components/material-design-iconic-font/scss/icons/_editor.scss","../bower_components/material-design-iconic-font/scss/icons/_file.scss","../bower_components/material-design-iconic-font/scss/icons/_hardware.scss","../bower_components/material-design-iconic-font/scss/icons/_image.scss","../bower_components/material-design-iconic-font/scss/icons/_maps.scss","../bower_components/material-design-iconic-font/scss/icons/_navigation.scss","../bower_components/material-design-iconic-font/scss/icons/_notification.scss","../bower_components/material-design-iconic-font/scss/icons/_social.scss","../bower_components/material-design-iconic-font/scss/icons/_toggle.scss","../scss/components/icon/icon.scss","../scss/components/input/input.scss","../angular-material/src/components/list/list.scss","../scss/components/list/list.scss","../scss/components/autoScrollList/autoScrollList.scss","../angular-material/src/components/progressCircular/progressCircular.scss","../angular-material/src/components/progressLinear/progressLinear.scss","../angular-material/src/components/radioButton/radio-button.scss","../angular-material/src/components/sidenav/sidenav.scss","../scss/components/sidenav/sidenav.scss","../angular-material/src/components/slider/slider.scss","../angular-material/src/components/sticky/sticky.scss","../angular-material/src/components/subheader/subheader.scss","../scss/components/subheader/subheader.scss","../angular-material/src/components/switch/switch.scss","../angular-material/src/components/tabs/tabs.scss","../angular-material/src/components/textField/textField.scss","../angular-material/src/components/toast/toast.scss","../angular-material/src/components/toolbar/toolbar.scss","../scss/components/toolbar/toolbar.scss","../scss/components/bottombar/_extends.scss","../scss/components/bottombar/bottombar-theme.scss","../angular-material/src/components/tooltip/tooltip.scss","../angular-material/src/components/whiteframe/whiteframe.scss","../scss/views/MailerUI.scss","../scss/views/_view.scss","../scss/core/base_styles/_base_style.scss","../scss/_shame.scss","../scss/_devtools.scss"],
-"names": [],
-"file": "styles.css"
-}
@@ -20,7 +20,7 @@
  md-item-content {
    padding: 0 0 0 $mg;
    margin: $mg 0;
-    transition: all 0.35s $swift-ease-in-timing-function 0.15s;
+    transition: all 0.20s $swift-ease-in-timing-function 0.12s;
    &:hover {
      background-color: sg-color($sogoPaper, 300);
      color: sg-color($sogoBlue, 800);
@@ -6,7 +6,7 @@ md-toolbar {
 }
 header {
  flex-direction: row;
-  align-items: flex-start;
+  align-items: stretch;
  justify-content: space-between;
  display: flex;
 }
@@ -24,8 +24,7 @@ hgroup {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
-  height:(2 * $pitch);
-  margin-left: $mg;
+  margin: 0 0 $mg $mg;
    }
 .sg-icon-bar *.button {
  display: block;
@@ -222,22 +222,22 @@ $sg-font-bold: $sg-font-medium;
 // h elements definitions
 // ----------------------------------------------------------------------------
 $h1-font-size-Base: $sg-font-size-9;
-//$h1-margin-Base: 0.67em 0;
+$h1-margin-Base: 0;

 $h2-font-size-Base: $sg-font-size-8;
-//$h2-margin-Base: 0.83em 0;
+$h2-margin-Base: 0;

 $h3-font-size-Base: $sg-font-size-7;
-//$h3-margin-Base: 1em 0;
+$h3-margin-Base: 0;

 $h4-font-size-Base: $sg-font-size-6;
-//$h4-margin-Base: 1.33em 0;
+$h4-margin-Base: 0;

 $h5-font-size-Base: $sg-font-size-5;
-//$h5-margin-Base: 1.67em 0;
+$h5-margin-Base: 0;

 $h6-font-size-Base: $sg-font-size-4;
-//$h6-margin-Base: 2.33em 0;
+$h6-margin-Base: 0;

 /// Gogle Material Design Standard styles
 /// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
@@ -24,7 +24,7 @@ $bottombar-color: #212121;
 // Layout
 // ------------------------------

-$baseline-grid:            8px !default;
+$baseline-grid: 8px !default;
 // shortcut aliases for $baseline-grid
 $bl: $baseline-grid;
 $line: $baseline-grid;
@@ -9,37 +9,81 @@
 [data-ui-view="message"] {
  max-width: grid-step(8);
 }
+
+// Message view header
+// Could be made into a more generic component
+// ----------------------------------------------------------------------------
 .msg-header {
-  padding-bottom: $mg;
+//  padding-bottom: $mg; We should add a padding class to preserve genericity
 }
-.msg-header-group {
+
+.msg-header-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
-
-
-
-  [layout="row"] + [layout="row"] {
-    margin-top: -1 * 1em;
-  }
 }
-.msg-header-group .sg-md-body-multi.name {}
+
+.msg-body {
+  padding-top: $mg;
+}
+
 .msg-date {
-  margin: $mg 0;
  text-align: right;
 }
+// sg-md title don't fit in message headers
+.sg-md-title-msg {
+  @extend .sg-md-title;
+  margin: 0;
+  margin-bottom: $line;
+  font-weight: $sg-font-regular;
+  white-space: normal;
+}

-.msg-header label {
-  font-size: sg-size(caption) - 1; // -1px to compensate for the uppercase and simulate Small caps
-  text-transform: uppercase;
-  margin-right: $mg;
-  width: ($pitch + $bl);
-  text-align: right;
-  line-height: $sg-line-height-2;
-  font-weight: 600;
+// Component: PseudoField
+// This component mimics the presentation of form fields according to Google's
+// Material Design specs (www.google.com/design/spec/components/text-fields.html)
+// It's used in message headers but could --and should-- be reused
+// The PseudoField element serves as a container for it's two children:
+// --label and --inputLike
+//
+// Typical use:
+// <div class="PseudoField">
+//   <label class="PseudoField-label">Some text</label>
+//   <p class="PseudoField-inputLike">Other input-like text</p>
+// </div>
+//
+// ----------------------------------------------------------------------------
+
+.PseudoField {
+  display: block; // Should be (reset to ?) a plain block element
+}
+.PseudoField-label {
+  display: inline-block;
+  margin-top: $mg;
+  font-size: sg-size(caption);
+  line-height: $sg-line-height-1; // 16px;
+  font-weight: $sg-font-bold;
  color: $colorGray;
 }
+.PseudoField-inputLike {
+  display: block;
+  padding: $line 0;
+  margin-bottom: $line;
+  font-size: sg-size(subhead);
+  line-height: 1;
+}
+.PseudoField-inputLike--underline {
+  @extend .PseudoField-inputLike;
+  border-bottom: 1px solid $colorGrayLight;
+}
+// The specs dimensions are too large to fit with angular-material
+// Here's a modifier
+.PseudoField--compact {
+  .PseudoField-label {
+    margin-top: 0;
+  }
+}

 .mailer_mailcontent {
  @extend .sg-md-body-multi;