(css) Improve subheader with icon buttons
parent
8c4d4e0e2d
commit
87fbedb89d
|
@ -31,7 +31,7 @@
|
||||||
md-colors="::{ backgroundColor: 'default-background-300' }">
|
md-colors="::{ backgroundColor: 'default-background-300' }">
|
||||||
<!-- User's addressbooks -->
|
<!-- User's addressbooks -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<div layout="row" layout-align="space-between center">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Address Books"/></span>
|
<span><var:string label:value="Address Books"/></span>
|
||||||
|
@ -113,7 +113,7 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Subscriptions -->
|
<!-- Subscriptions -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<div layout="row" layout-align="space-between center">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Subscriptions"/></span>
|
<span><var:string label:value="Subscriptions"/></span>
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Remote/domain addressbooks -->
|
<!-- Remote/domain addressbooks -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<var:string label:value="Global Addressbooks"/>
|
<var:string label:value="Global Addressbooks"/>
|
||||||
</md-subheader>
|
</md-subheader>
|
||||||
|
|
|
@ -38,10 +38,11 @@
|
||||||
md-colors="::{ backgroundColor: 'default-background-300' }">
|
md-colors="::{ backgroundColor: 'default-background-300' }">
|
||||||
<section class="md-flex" layout="column"
|
<section class="md-flex" layout="column"
|
||||||
ng-repeat="account in app.accounts track by account.id">
|
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' }">
|
md-colors="::{ backgroundColor: 'default-background-300' }">
|
||||||
<div layout="row" layout-align="start center">
|
<div layout="row" layout-align="start center">
|
||||||
<md-button class="md-icon-button"
|
<md-button class="sg-icon-button"
|
||||||
ng-show="account.id == 0"
|
ng-show="account.id == 0"
|
||||||
label:aria-label="Delegation..."
|
label:aria-label="Delegation..."
|
||||||
ng-click="app.delegate(account)">
|
ng-click="app.delegate(account)">
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
md-colors="::{ backgroundColor: 'default-background-300' }">
|
md-colors="::{ backgroundColor: 'default-background-300' }">
|
||||||
<!-- User's calendars -->
|
<!-- User's calendars -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<div layout="row" layout-align="space-between center">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Calendars"/></span>
|
<span><var:string label:value="Calendars"/></span>
|
||||||
|
@ -138,7 +138,7 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Subscriptions -->
|
<!-- Subscriptions -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<div layout="row" layout-align="space-between center">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Subscriptions"/></span>
|
<span><var:string label:value="Subscriptions"/></span>
|
||||||
|
@ -213,7 +213,7 @@
|
||||||
</section>
|
</section>
|
||||||
<!-- Web Calendars -->
|
<!-- Web Calendars -->
|
||||||
<section>
|
<section>
|
||||||
<md-subheader class="sg-md-subheader--icon-button"
|
<md-subheader class="sg-md-subheader--with-secondary-icon"
|
||||||
md-colors="::{background: 'default-background-300'}">
|
md-colors="::{background: 'default-background-300'}">
|
||||||
<div layout="row" layout-align="space-between center">
|
<div layout="row" layout-align="space-between center">
|
||||||
<span><var:string label:value="Web Calendars"/></span>
|
<span><var:string label:value="Web Calendars"/></span>
|
||||||
|
|
|
@ -6,12 +6,15 @@ $sg-subheader-padding-left-right: $baseline-grid;
|
||||||
|
|
||||||
|
|
||||||
.sg-md-subheader {
|
.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;
|
line-height: $sg-avatar-width + ($sg-subheader-padding-top-bottom)*2;
|
||||||
padding: ($subheader-padding - ($icon-button-height - $subheader-font-size)/2) $baseline-grid;
|
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-left: $subheader-padding;
|
||||||
padding-right: 0;
|
}
|
||||||
|
&--with-icon ._md-subheader-inner {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
&--fixed {
|
&--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
Loading…
Reference in New Issue