luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: button default focus states

This commit is contained in:
Jack Pearkes 2014-04-30 23:02:25 -04:00
parent 5015650e5b
commit 716064c8d9
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/index.html
View File

@ -53,11 +53,11 @@
</div> </div>
<div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-6"> <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-6">
{{#link-to 'services'}}<button {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}} {{#link-to 'services'}}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</a>{{/link-to}}
</div> </div>
<div class="col-md-2 col-sm-3 col-xs-6"> <div class="col-md-2 col-sm-3 col-xs-6">
<button type="button" {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button> <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </a>
{{#if isDropdownVisible}} {{#if isDropdownVisible}}
<ul class="dropdown-menu col-xs-12" style="display:block;"> <ul class="dropdown-menu col-xs-12" style="display:block;">

10
ui/styles/_buttons.scss
View File

@ -9,18 +9,24 @@
@include transition(color .2s ease-in-out); @include transition(color .2s ease-in-out);
outline: none; outline: none;
outline-color: white;
&:hover { &:hover {
color: darken($gray, 10%); color: darken($gray, 10%);
background-color: lighten($gray-background, 5%); background-color: lighten($gray-background, 5%);
} }
.btn-default { &:focus {
outline: none;
outline-color: white;
outline: none;
box-shadow: none;
} }
&.active { &.active {
outline-color: white;
outline: none;
box-shadow: none; box-shadow: none;
-webkit-box-shadow: none;
} }
&.btn-primary, &.active { &.btn-primary, &.active {