(css) Adapt to latest md changes

pull/206/head
Francis Lachapelle 2016-04-01 16:05:55 -04:00
parent 2844732b6f
commit bd1fae0baf
11 changed files with 32 additions and 61 deletions

View File

@ -30,7 +30,7 @@
<md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
<!-- User's addressbooks -->
<section>
<md-subheader class="sg-md-subheader md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Address Books"/></span>
<md-button class="sg-icon-button"
@ -111,7 +111,7 @@
</section>
<!-- Subscriptions -->
<section>
<md-subheader class="sg-md-subheader md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
@ -171,7 +171,7 @@
</section>
<!-- Remote/domain addressbooks -->
<section>
<md-subheader class="sg-md-subheader md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<var:string label:value="Global Addressbooks"/>
</md-subheader>
<md-list>

View File

@ -52,12 +52,12 @@
<md-card-content>
<header class="msg-header">
<div ng-show="editor.card.c_component == 'vcard'">
<sg-avatar-image class="md-tile-left"
<sg-avatar-image class="md-avatar md-tile-left"
sg-email="editor.card.$preferredEmail()"
sg-src="editor.card.photoURL"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<div class="md-tile-left sg-avatar-list" ng-show="editor.card.$isList()">
<div class="md-tile-left md-avatar sg-avatar-list" ng-show="editor.card.$isList()">
<!--list avatar-->
</div>
<div class="msg-header-content">

View File

@ -324,8 +324,8 @@
layout="column" layout-align="start center"
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
ui-view="message">
<md-content class="hide-xs md-flex layout-fill md-hue-2"
layout="column" layout-align="center center">
<md-content class="hide-xs md-flex md-hue-2"
layout="column" layout-align="center center" layout-fill="layout-fill">
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No message selected"/></div>
</md-content>
</div>

View File

@ -37,7 +37,7 @@
<md-content class="md-flex md-hue-2" layout="column" md-scroll-y="md-scroll-y">
<section class="md-flex" layout="column"
ng-repeat="account in app.accounts track by account.id">
<md-subheader class="md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="start center">
<md-button class="md-icon-button"
ng-show="account.id == 0"

View File

@ -39,7 +39,7 @@
<md-content class="md-flex md-hue-2" md-scroll-y="md-scroll-y">
<!-- User's calendars -->
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
<md-button class="sg-icon-button"
@ -134,7 +134,7 @@
</section>
<!-- Subscriptions -->
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
<md-button class="sg-icon-button"
@ -202,7 +202,7 @@
</section>
<!-- Web Calendars -->
<section class="sg-section-list">
<md-subheader class="md-hue-2">
<md-subheader class="sg-md-subheader--icon-button md-hue-2">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>
<md-button class="sg-icon-button"

View File

@ -41,7 +41,7 @@
<md-toolbar class="monthView">
<div layout="row" layout-align="center center"
class="md-flex md-default-theme md-fg md-hue-1">
class="md-default-theme md-fg md-hue-1">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
@ -62,7 +62,7 @@
var:class="dayCellClasses"
var:id="currentDayId"
>
<sg-calendar-day layout="column" layout-fill="true"
<sg-calendar-day layout="column" layout-fill="layout-fill"
var:sg-day="currentTableDay.shortDateString"
var:sg-day-number="currentDayNumber"
var:sg-day-string="currentTableDay.iso8601DateString">
@ -71,12 +71,11 @@
<span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
<var:if condition="currentTableDay.isToday" const:negate="YES">
<span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
<span><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
</var:if>
</div>
<md-content
sg-draggable-calendar-block="sg-draggable-calendar-block"
class="clickableDayCell">
<md-content class="clickableDayCell"
sg-draggable-calendar-block="sg-draggable-calendar-block">
<sg-calendar-month-day
sg-blocks="calendar.views[0].blocks"
sg-click="list.openEvent(event, component)"

View File

@ -9,7 +9,7 @@
"angular-sanitize": "1.4.x",
"angular-ui-router": "latest",
"angular-file-upload": "latest",
"angular-material": "master",
"angular-material": ">v1.1.0-rc2-master",
"lodash": "latest",
"Sortable": "latest",
"breakpoint-sass": ">=2.4.2"

View File

@ -12,11 +12,6 @@ md-sidenav md-list .md-button {
}
}
.view-list md-list .md-button {
// Gain some space in lists
padding-right: 0;
}
// Expandable button for a collapsable list
.sg-expandable {
width: 100%;

View File

@ -18,18 +18,7 @@ $sg-avatar-width: 40px;
$sg-color-chip-width: 16px;
md-list-item {
&.md-with-secondary {
&.md-accent.md-bg {
.md-button {
// List items with a secondary button must have a transparent background when highlighted
// in order to honor the contrast color
background-color: transparent;
}
}
}
._md-list-item-inner {
flex-grow: 1; // use all column space
overflow: hidden;
// Gain some space since we want small list items
@ -261,10 +250,10 @@ sg-avatar-image {
.md-avatar:before,
.md-avatar md-icon,
sg-avatar-image md-icon,
.sg-avatar-list {
sg-avatar-image md-icon.material-icons {
color: rgba(0, 0, 0, 0.26);
font-family: 'Material Icons';
font-size: $sg-avatar-width;
color: rgba(0, 0, 0, 0.26);
}
.sg-avatar-list {
&:before {

View File

@ -1,24 +1,11 @@
/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
.md-subheader {
margin-right: 0;
}
.md-subheader {
.md-subheader-inner {
padding: 0 0 0 $layout-gutter-width;
}
}
md-tab-content {
.md-subheader {
.md-subheader-inner {
padding-left: $layout-gutter-width/2;
}
}
}
.sg-md-subheader {
&--icon-button ._md-subheader-inner {
padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
padding-left: $subheader-padding;
}
&--fixed {
position: fixed;
z-index: auto;

View File

@ -52,17 +52,18 @@ $listView-width: grid-step(6) !global;
z-index: ($z-index-view - 1);
min-width: ($listView-width - ($pitch * 2));
// With Material, when a button inside a md-list uses the class md-secondary, it has an absolute position on the
// right side of the list item. Since we define the avatar as the secondary button, we must move it to the left
// side of the list item and add some padding to the main button (.md-no-style).
// With Material, when a button inside a md-list uses the class md-secondary, it is moved inside a container
// on the right side of the list item. Since we define the avatar as the secondary button, we must move it to
// the left side of the list item.
.md-with-secondary {
._md-no-style {
min-height: $baseline-grid * 7; // 56px
padding-left: 40 + $baseline-grid * 2 !important; // 56px
._md-list-item-inner {
padding-left: $baseline-grid;
}
._md-secondary-container {
left: $baseline-grid * 2;
right: initial;
order: -1; // move secondary container to the left
}
.md-secondary {
margin: 0;
padding: 0;
}
}