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: 2px;
  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   font-weight: 500;
  28   font-family: $text;
  29   outline: 0;
  30   border-radius: $button-border-radius;
  31   cursor: pointer;
  32   transition: all ease-in-out 120ms;
  33   text-transform: uppercase;
  34   box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
  35   @include generate-button-colors(#EEE, $primary);
  36 }
  37
  38 .button, input[type="button"], input[type="submit"]  {
  39   @extend .button-base;
  40   &.pos {
  41     @include generate-button-colors(#EEE, $positive);
  42   }
  43   &.neg {
  44     @include generate-button-colors(#EEE, $negative);
  45   }
  46   &.secondary {
  47     @include generate-button-colors(#EEE, $secondary);
  48   }
  49   &.muted {
  50     @include generate-button-colors(#EEE, #888);
  51   }
  52 }
  53
  54 .button-group {
  55   @include clearfix;
  56   .button, button[type="button"] {
  57     margin: $-xs 0 $-xs 0;
  58     float: left;
  59     border-radius: 0;
  60     &:first-child {
  61       border-radius: $button-border-radius 0 0 $button-border-radius;
  62     }
  63     &:last-child {
  64       border-radius: 0 $button-border-radius $button-border-radius 0;
  65     }
  66   }
  67 }
  68
  69 .button.block {
  70   width: 100%;
  71   text-align: center;
  72   display: block;
  73 }
  74
  75 // Floating action button
  76 //.fab {
  77 //  $size: 70px;
  78 //  button.button {
  79 //    border-radius: 100%;
  80 //    width: $size;
  81 //    height: $size;
  82 //    font-size: 48px;
  83 //    text-align: center;
  84 //    margin: 0;
  85 //    padding: 0;
  86 //    border: 0;
  87 //    box-shadow: 0 0 2px 2px #DDD;
  88 //    transition: all ease-in-out 160ms;
  89 //    i {
  90 //      transform: rotate(0deg);
  91 //      transition: all ease-in-out 160ms;
  92 //    }
  93 //    &:hover {
  94 //      box-shadow: 0 2px 4px 2px #CCC;
  95 //      i {
  96 //        transform: rotate(180deg);
  97 //      }
  98 //    }
  99 //  }
 100 //}