From ce123e02d70d8e439e0bd445346be91b95b8ce69 Mon Sep 17 00:00:00 2001 From: Jakob Stendahl Date: Sun, 13 Oct 2019 13:26:59 +0200 Subject: :lipstick: Add themer-things, to be customized later --- .../themer-dark-ui/styles/buttons.less | 52 ++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less (limited to 'themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less') diff --git a/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less b/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less new file mode 100644 index 0000000..e33fd93 --- /dev/null +++ b/themer/gen/themer-atom-ui/themer-dark-ui/styles/buttons.less @@ -0,0 +1,52 @@ + +.btn { + color: lighten(@text-color, 6%); + background-color: @button-background-color; + &:hover, + &:focus { + color: @text-color-highlight; + background-color: @button-background-color-hover; + } + &:active { + color: fade(@text-color-selected, 66%); + background-color: darken(@button-background-color, 2%); + } + &.selected { + color: @text-color-selected; + background-color: @button-background-color-selected; + } + &:focus, + &:focus:active { + outline: none; + } +} + +.btn.btn-primary { .btn-color(@background-color-info); } +.btn.btn-info { .btn-color(@background-color-info); } +.btn.btn-success { .btn-color(@background-color-success); } +.btn.btn-warning { .btn-color(@background-color-warning); } +.btn.btn-error { .btn-color(@background-color-error); } + +.btn-color(@bg) { + color: @base-background-color; + background-color: @bg; + &:hover, + &:focus { + background-color: lighten(@bg, 4%); + color: @base-background-color; + } + &:active { + background-color: darken(@bg, 4%); + } + &.selected { + background-color: lighten(@bg, 4%); + } + &.selected:focus, + &.selected:hover { + background-color: lighten(@bg, 8%); + } +} + +.btn-group > .btn { + border-color: hsla(0,0%,0%,.2);; +} -- cgit v1.2.3