git.r.bdr.sh - rbdr/dotfiles/blob - 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 }