]> git.r.bdr.sh - rbdr/dotfiles/blame_incremental - atom/packages/aesthetic-ui/styles/buttons.less
Update atoms
[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / buttons.less
... / ...
CommitLineData
1@import "ui-variables";
2@import "ui-mixins";
3
4.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
5 @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
6 color: @text-color;
7 background-color: transparent;
8 &:active,
9 &.selected:hover:active {
10 }
11 &.selected,
12 &.selected:hover {
13 color: @text-color-selected;
14 text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
15 }
16 &.selected:hover {
17 }
18}
19
20.btn-variant (@color) {
21 @bg: darken(@color, 10%);
22 @hover: @color;
23 @selected: @color;
24 @border: fadeout(darken(@color, 20%), 50%);
25 .btn-background(@bg, @hover, @selected, @border, @text-color-selected, @text-color-selected);
26}
27
28.btn {
29 position: relative;
30 &::after {
31 content: '';
32 display: block;
33 position: absolute;
34 top: 3px; right: 4px; bottom: 4px; left: 3px;
35 pointer-events: none;
36 }
37 &:focus::after {
38 outline: 1px dotted black;
39 }
40 .ui-raised-shadow;
41 &:focus {
42 .ui-raised-shadow-active;
43 outline: none;
44 }
45 &:active {
46 .ui-inset-shadow-active;
47 }
48 .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @button-border-color, @text-color, @text-color-highlight);
49}
50
51.btn.btn-primary {
52 .btn-variant(@background-color-info);
53}
54.btn.btn-info {
55 .btn-variant(@background-color-info);
56}
57.btn.btn-success {
58 .btn-variant(@background-color-success);
59}
60.btn.btn-warning {
61 .btn-variant(@background-color-warning);
62}
63.btn.btn-error {
64 .btn-variant(@background-color-error);
65}
66
67.btn-group > .btn {
68 border: none;
69}