mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-07-07 01:15:09 +00:00
Fixed the message headers design (markup and scss)
Create a "PseudoField" component that mimics Material Design input fields
This commit is contained in:
iRouge
committed by
Francis Lachapelle
Francis Lachapelle
parent
e429dc3ff1
commit
4f2fc5c99e
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user