(css) Improve subheader with icon buttons

pull/210/head
Francis Lachapelle 2016-05-17 15:10:09 -04:00
parent 8c4d4e0e2d
commit 87fbedb89d
4 changed files with 15 additions and 11 deletions

View File

@ -31,7 +31,7 @@
md-colors="::{ backgroundColor: 'default-background-300' }">
<!-- User's addressbooks -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Address Books"/></span>
@ -113,7 +113,7 @@
</section>
<!-- Subscriptions -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
@ -174,7 +174,7 @@
</section>
<!-- Remote/domain addressbooks -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<var:string label:value="Global Addressbooks"/>
</md-subheader>

View File

@ -38,10 +38,11 @@
md-colors="::{ backgroundColor: 'default-background-300' }">
<section class="md-flex" layout="column"
ng-repeat="account in app.accounts track by account.id">
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
ng-class="{ 'sg-md-subheader--with-icon': account.id == 0 }"
md-colors="::{ backgroundColor: 'default-background-300' }">
<div layout="row" layout-align="start center">
<md-button class="md-icon-button"
<md-button class="sg-icon-button"
ng-show="account.id == 0"
label:aria-label="Delegation..."
ng-click="app.delegate(account)">

View File

@ -41,7 +41,7 @@
md-colors="::{ backgroundColor: 'default-background-300' }">
<!-- User's calendars -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Calendars"/></span>
@ -138,7 +138,7 @@
</section>
<!-- Subscriptions -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Subscriptions"/></span>
@ -213,7 +213,7 @@
</section>
<!-- Web Calendars -->
<section>
<md-subheader class="sg-md-subheader--icon-button"
<md-subheader class="sg-md-subheader--with-secondary-icon"
md-colors="::{background: 'default-background-300'}">
<div layout="row" layout-align="space-between center">
<span><var:string label:value="Web Calendars"/></span>

View File

@ -6,12 +6,15 @@ $sg-subheader-padding-left-right: $baseline-grid;
.sg-md-subheader {
&--icon-button ._md-subheader-inner {
&--with-icon ._md-subheader-inner,
&--with-secondary-icon ._md-subheader-inner {
line-height: $sg-avatar-width + ($sg-subheader-padding-top-bottom)*2;
padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
padding: $sg-subheader-padding-top-bottom $sg-subheader-padding-left-right;
padding: 0;
padding-left: $subheader-padding;
padding-right: 0;
}
&--with-icon ._md-subheader-inner {
padding-left: 0;
}
&--fixed {
position: fixed;