Files
atom/packages/atom-light-ui/styles/buttons.less
2018-09-24 16:22:47 -07:00

61 lines
1.7 KiB
Plaintext

.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
@border-shadow: inset 0 0 0 1px @border-color;
@active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
color: @text-color;
background-color: transparent;
background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
box-shadow: @border-shadow;
&:hover {
color: @text-color-hover;
background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 8%));
}
&:active,
&.selected:hover:active {
box-shadow: @active-shadow, @border-shadow;
}
&.selected,
&.selected:hover {
color: @text-color-selected;
box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
background-image: -webkit-linear-gradient(darken(@selected-color, 8%), @selected-color);
}
&.selected:hover {
box-shadow: @border-shadow;
background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 8%));
}
}
.btn-variant (@color) {
@bg: darken(@color, 10%);
@hover: @color;
@selected: @color;
@border: fadeout(darken(@color, 20%), 50%);
.btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
}
.btn {
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
}
.btn.btn-primary {
.btn-variant(@background-color-info);
}
.btn.btn-info {
.btn-variant(@background-color-info);
}
.btn.btn-success {
.btn-variant(@background-color-success);
}
.btn.btn-warning {
.btn-variant(@background-color-warning);
}
.btn.btn-error {
.btn-variant(@background-color-error);
}
.btn-group > .btn {
border: none;
}