github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-23 05:48:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Buttons for light UI

Browse Source
This commit is contained in:
Ben Ogle
2013-09-04 15:31:24 -07:00
parent 53ab72e058
commit 2912893ac7
1 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
themes/atom-light-ui/buttons.less
View File

@@ -1,21 +1,30 @@
@import "ui-variables";
@import "ui-mixins";
.btn-background (@color, @hover-color, @selected-color, @text-color) {
.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
@border-shadow: inset 0px 0px 0px 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, 5%));
background-image: -webkit-linear-gradient(@color, darken(@color, 8%));
box-shadow: @border-shadow;
&:hover {
color: @text-color-highlight;
background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
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-highlight;
background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
&:hover {
background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
}
color: @text-color-selected;
box-shadow: inset 0 2px 5px rgba(0, 0, 0,.3), @border-shadow;
text-shadow: 0px 0px 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%));
}
}
@@ -23,11 +32,12 @@
@bg: darken(@color, 10%);
@hover: @color;
@selected: @color;
.btn-background(@bg, @hover, @selected, @text-color-highlight);
@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, @text-color);
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
}
.btn.btn-primary {
@@ -45,3 +55,7 @@
.btn.btn-error {
.btn-variant(@background-color-error);
}
.btn-group > .btn {
border: none;
}