BookStack Code Mirror - bookstack/blob - resources/assets/sass/_buttons.scss

   1
   2 @mixin generate-button-colors($textColor, $backgroundColor) {
   3   background-color: $backgroundColor;
   4   color: $textColor;
   5   &:hover {
   6     background-color: lighten($backgroundColor, 8%);
   7     box-shadow: $bs-med;
   8     text-decoration: none;
   9     color: $textColor;
  10   }
  11   &:active {
  12     background-color: darken($backgroundColor, 8%);
  13   }
  14 }
  15
  16 // Button Specific Variables
  17 $button-border-radius: 3px;
  18
  19 .button-base {
  20   text-decoration: none;
  21   font-size: $fs-m;
  22   line-height: 1.4em;
  23   padding: $-xs $-m;
  24   margin: $-xs $-xs $-xs 0;
  25   display: inline-block;
  26   border: none;
  27   outline: 0;
  28   border-radius: $button-border-radius;
  29   cursor: pointer;
  30   transition: all ease-in-out 80ms;
  31   box-shadow: 0 0 0 0 #000;
  32   @include generate-button-colors(#EEE, $primary);
  33 }
  34
  35 .button, button[type="button"], input[type="button"], input[type="submit"]  {
  36   @extend .button-base;
  37   &.pos {
  38     @include generate-button-colors(#EEE, $positive);
  39   }
  40   &.neg {
  41     @include generate-button-colors(#EEE, $negative);
  42   }
  43   &.secondary {
  44     @include generate-button-colors(#EEE, $secondary);
  45   }
  46 }
  47
  48 .button-group {
  49   @include clearfix;
  50   .button, button[type="button"] {
  51     margin: $-xs 0 $-xs 0;
  52     float: left;
  53     border-radius: 0;
  54     &:first-child {
  55       border-radius: $button-border-radius 0 0 $button-border-radius;
  56     }
  57     &:last-child {
  58       border-radius: 0 $button-border-radius $button-border-radius 0;
  59     }
  60   }
  61 }