aboutsummaryrefslogtreecommitdiff
path: root/atom/packages/aesthetic-ui/styles/buttons.less
diff options
context:
space:
mode:
authorBen Beltran <ben@nsovocal.com>2017-03-02 23:10:51 -0600
committerBen Beltran <ben@nsovocal.com>2017-03-02 23:10:51 -0600
commit35ab4aab6926fb6cd2b44eda8bc14c72a8759b75 (patch)
tree0c08edd4f9b6a0bc9bb2780b8a496ed8c69e20a4 /atom/packages/aesthetic-ui/styles/buttons.less
parent0b4318740e55d6977d98872eff6bebfe948bf46f (diff)
parent28cc50d9af1fd1314afde30169dc22bba5934380 (diff)
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'atom/packages/aesthetic-ui/styles/buttons.less')
-rw-r--r--atom/packages/aesthetic-ui/styles/buttons.less69
1 files changed, 69 insertions, 0 deletions
diff --git a/atom/packages/aesthetic-ui/styles/buttons.less b/atom/packages/aesthetic-ui/styles/buttons.less
new file mode 100644
index 0000000..8152365
--- /dev/null
+++ b/atom/packages/aesthetic-ui/styles/buttons.less
@@ -0,0 +1,69 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.btn-background (@color, @hover-color, @selected-color, @border-color, @text-color, @text-color-hover) {
+ @active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+ color: @text-color;
+ background-color: transparent;
+ &:active,
+ &.selected:hover:active {
+ }
+ &.selected,
+ &.selected:hover {
+ color: @text-color-selected;
+ text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+ }
+ &.selected:hover {
+ }
+}
+
+.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 {
+ position: relative;
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 3px; right: 4px; bottom: 4px; left: 3px;
+ pointer-events: none;
+ }
+ &:focus::after {
+ outline: 1px dotted black;
+ }
+ .ui-raised-shadow;
+ &:focus {
+ .ui-raised-shadow-active;
+ outline: none;
+ }
+ &:active {
+ .ui-inset-shadow-active;
+ }
+ .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;
+}