refactor(buttons): buttons focus colur

pull/3/head
alex 2016-02-23 11:30:31 +03:00
parent be07b772b9
commit beadcb5c42
1 changed files with 29 additions and 12 deletions

View File

@ -27,6 +27,9 @@ $hover: 24;
&[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active, &[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active,
fieldset[disabled] &.active { fieldset[disabled] &.active {
@include styleButton($color, $borderColor + $hover/2); @include styleButton($color, $borderColor + $hover/2);
&:hover {
transform: none;
}
} }
&:hover, &:focus, &.focus, &:active, &.active { &:hover, &:focus, &.focus, &:active, &.active {
@ -71,26 +74,38 @@ button.btn.btn-primary {
button.btn.btn-default { button.btn.btn-default {
border-width: 1px; border-width: 1px;
@include buttonColor(transparent, $default); @include buttonColor(transparent, $default);
&:active, &:target, &:focus { &:active, &:target {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
color: $default ; color: $default ;
} }
} }
.btn-success { button.btn.btn-success {
@include buttonColor($success, $success); @include buttonColor($success, $success);
&:active, &:target {
background-color: $success-dark;
}
} }
.btn-info { button.btn.btn-info {
@include buttonColor($info, $info); @include buttonColor($info, $info);
&:active, &:target {
background-color: $info-dark;
}
} }
.btn-warning { button.btn.btn-warning {
@include buttonColor($warning, $warning); @include buttonColor($warning, $warning);
&:active, &:target {
background-color: $warning-dark;
}
} }
.btn-danger { button.btn.btn-danger {
@include buttonColor($danger, $danger); @include buttonColor($danger, $danger);
&:active, &:target {
background-color: $danger-dark;
}
} }
.btn-with-icon { .btn-with-icon {
@ -120,6 +135,7 @@ button.btn.btn-default {
} }
@mixin progressButtonColor($btnColor) { @mixin progressButtonColor($btnColor) {
border-radius: 0;
.content { .content {
&:after, &:before { &:after, &:before {
color: darken($btnColor, 40); color: darken($btnColor, 40);
@ -153,7 +169,8 @@ button.btn.btn-default {
} }
} }
.progress-button { button.progress-button {
.progress { .progress {
margin-bottom: 0; margin-bottom: 0;
border-radius: 0; border-radius: 0;
@ -162,27 +179,27 @@ button.btn.btn-default {
transform: none; transform: none;
} }
&.btn-primary { &.btn.btn-primary {
@include progressButtonColor($primary); @include progressButtonColor($primary);
} }
&.btn-default { &.btn.btn-default {
@include progressButtonColor($default); @include progressButtonColor($default);
} }
&.btn-success { &.btn.btn-success {
@include progressButtonColor($success); @include progressButtonColor($success);
} }
&.btn-info { &.btn.btn-info {
@include progressButtonColor($info); @include progressButtonColor($info);
} }
&.btn-warning { &.btn.btn-warning {
@include progressButtonColor($warning); @include progressButtonColor($warning);
} }
&.btn-danger { &.btn.btn-danger {
@include progressButtonColor($danger); @include progressButtonColor($danger);
} }
} }