feat(md-button): enhance button focus appearance.

This commit is contained in:
Jeremy Elbourn
2015-07-31 14:11:35 -07:00
parent 7354206c74
commit 6d280ea31f
3 changed files with 126 additions and 35 deletions

View File

@ -7,6 +7,7 @@
position: relative !important;
padding-bottom: 10px;
}
.label {
position: absolute;
bottom: 5px;
@ -14,6 +15,16 @@
color: #ccc;
font-size: 14px;
}
.custom {
background-color: #ae0001;
color: #eeba30;
}
.custom:hover, .custom.md-button-focus {
background-color: #740001;
color: #d3a625;
}
</style>
<h1>Button demo</h1>
@ -40,6 +51,7 @@
<button md-button disabled="disabled" (^click)="click('disabled')">DISABLED</button>
<button md-button class="md-accent" (^click)="click('accent')">ACCENT</button>
<button md-button class="md-warn" (^click)="click('warn')">WARN</button>
<button md-button class="custom" (^click)="click('custom')">CUSTOM</button>
</section>
<section>
@ -49,6 +61,7 @@
<button md-raised-button disabled="disabled" (^click)="click('raised disabled')">DISABLED</button>
<button md-raised-button class="md-accent" (^click)="click('raised accent')">ACCENT</button>
<button md-raised-button class="md-warn" (^click)="click('raised warn')">WARN</button>
<button md-raised-button class="custom" (^click)="click('custom raised')">CUSTOM</button>
</section>
<section>
<span class="label">Fab button</span>
@ -57,6 +70,7 @@
<button md-fab disabled="disabled" (^click)="click('fab disabled')">DIS</button>
<button md-fab class="md-accent" (^click)="click('fab accent')">ACC</button>
<button md-fab class="md-warn" (^click)="click('fab warn')">WRN</button>
<button md-fab class="custom" (^click)="click('custom fab')">CSTM</button>
</section>
<section>
<span class="label">Anchor / hyperlink</span>
@ -65,9 +79,10 @@
<a md-raised-button target="_blank" href="http://google.com">RAISED HREF</a>
</section>
<section dir="rtl">
<span class="label" dir="ltr">Right-to-left</span>
<button md-button (^click)="click('Hebrew button')">לחצן</button>
<button md-raised-button (^click)="click('Hebrew raised button')">העלה</button>
<a md-button href="http://translate.google.com">עוגן</a>
</section>
<p template="ng-for #item of items">
Repeated button:
<button md-button tabindex="-1" (^click)="increment()">{{action}}</button>
{{clickCount}}
</p>