add button active states

This commit is contained in:
Felix Niklas 2015-01-14 23:45:08 +01:00
parent f9f0da8c27
commit 62de61f508

View file

@ -265,7 +265,7 @@ span[data-tooltip]:hover:before {
color: hsl(202,68%,54%); color: hsl(202,68%,54%);
background: white; background: white;
border-color: rgba(0,0,0,.1); border-color: rgba(0,0,0,.1);
outline: none; outline: none !important;
&.is-disabled { &.is-disabled {
pointer-events: none; pointer-events: none;
@ -275,6 +275,7 @@ span[data-tooltip]:hover:before {
&:active { &:active {
box-shadow: none; box-shadow: none;
background: hsl(0,0%,98%);
} }
&.btn--action { &.btn--action {
@ -284,18 +285,26 @@ span[data-tooltip]:hover:before {
&.btn--primary { &.btn--primary {
color: white; color: white;
background: #419ed7; background: hsl(203,65%,55%);
border-color: #419ed7; &:active {
background: hsl(203,65%,45%);
}
} }
&.btn--success { &.btn--success {
color: white; color: white;
background: hsl(145,51%,45%); background: hsl(145,51%,45%);
&:active {
background: hsl(145,51%,35%);
}
} }
&.btn--danger { &.btn--danger {
color: white; color: white;
background: hsl(0,65%,55%); background: hsl(0,65%,55%);
&:active {
background: hsl(0,65%,45%);
}
} }
&.btn--subtle { &.btn--subtle {
@ -307,6 +316,10 @@ span[data-tooltip]:hover:before {
background: none; background: none;
@extend .u-clickable; @extend .u-clickable;
&:active {
color: rgba(0,0,0,.42);
}
&:hover { &:hover {
color: rgba(0,0,0,.5); color: rgba(0,0,0,.5);
} }