(css) Adapt to latest md changes
parent
2844732b6f
commit
bd1fae0baf
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue