]> git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/buttons.less
Update vim plugins
[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / buttons.less
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 }