consul/ui/styles/_buttons.scss

123 lines
2.4 KiB
SCSS

.btn {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
border-width: 2px;
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);
outline: none;
outline-color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: darken($gray, 10%);
background-color: lighten($gray-background, 5%);
}
&:focus {
outline: none;
outline-color: white;
outline: none;
box-shadow: none;
}
&.active {
outline-color: white;
outline: none;
box-shadow: none;
}
&.btn-primary {
color: $purple-dark;
background-color: transparent;
border: 2px solid $purple;
&: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%);
}
}
&.btn-danger {
color: $red;
background-color: transparent;
border: 2px solid $red;
&:hover {
background-color: lighten($red, 38%);
color: darken($red, 10%);
}
}
&.active {
color: $purple-dark;
background-color: transparent;
border: 2px solid $purple;
&:hover {
background-color: $light-purple;
color: darken($purple, 10%);
}
&.btn-noactive {
color: inherit;
background-color: inherit;
border: 2px solid #ccc;
}
}
&.btn-mini {
font-size: 10px;
padding: 8px;
}
&.btn-list {
font-size: 10px;
padding: 3px 5px 3px 5px;
margin-right: 5px;
border-radius: 3px;
}
}
.topbar {
.btn.icon {
min-width: 50px;
height: 33px;
padding: 6px 0;
svg {
height: 20px;
fill: currentColor;
}
}
}