mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-05-21 11:25:24 +00:00
Typography : Google Material Design standard styles
- Layout is broken
This commit is contained in:
iRouge
committed by
Francis Lachapelle
Francis Lachapelle
parent
907df81436
commit
a191c7a382
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user