open-consul/ui/styles/_buttons.scss

81 lines
1.7 KiB
SCSS
Raw Normal View History

2014-04-22 18:11:54 +00:00
.btn {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
2014-04-25 19:12:21 +00:00
border-width: 2px;
2014-04-22 18:11:54 +00:00
color: $gray;
@include transition(background-color .2s ease-in-out);
@include transition(border-color .2s ease-in-out);
@include transition(color .2s ease-in-out);
2014-04-25 20:24:36 +00:00
outline: none;
2014-05-01 03:02:25 +00:00
outline-color: white;
2014-04-22 18:11:54 +00:00
&:hover {
color: darken($gray, 10%);
background-color: lighten($gray-background, 5%);
}
2014-05-01 03:02:25 +00:00
&:focus {
outline: none;
outline-color: white;
outline: none;
box-shadow: none;
2014-04-22 18:11:54 +00:00
}
&.active {
2014-05-01 03:02:25 +00:00
outline-color: white;
outline: none;
box-shadow: none;
}
&.btn-primary, &.active {
2014-04-25 19:12:21 +00:00
color: $purple-dark;
2014-04-22 18:11:54 +00:00
background-color: transparent;
2014-04-29 20:17:28 +00:00
border: 2px solid $purple;
2014-04-22 18:11:54 +00:00
&:hover {
background-color: $light-purple;
color: darken($purple, 10%);
}
}
&.btn-warning {
color: $orange-faded;
background-color: transparent;
border: 2px solid $orange-faded;
&:hover {
background-color: lighten($orange-faded, 29%);
color: darken($orange-faded, 10%);
}
}
&.btn-success {
color: $green-dark;
background-color: transparent;
border: 2px solid $green-dark;
&:hover {
background-color: lighten($green-faded, 24%);
color: darken($green-dark, 10%);
}
}
2014-04-30 14:16:50 +00:00
&.btn-danger {
color: $red;
background-color: transparent;
border: 2px solid $red;
&:hover {
background-color: lighten($red, 38%);
color: darken($red, 10%);
}
}
2014-04-22 18:11:54 +00:00
}