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