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, 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   &.muted {
  47     @include generate-button-colors(#EEE, #888);
  48   }
  49 }
  50
  51 .button-group {
  52   @include clearfix;
  53   .button, button[type="button"] {
  54     margin: $-xs 0 $-xs 0;
  55     float: left;
  56     border-radius: 0;
  57     &:first-child {
  58       border-radius: $button-border-radius 0 0 $button-border-radius;
  59     }
  60     &:last-child {
  61       border-radius: 0 $button-border-radius $button-border-radius 0;
  62     }
  63   }
  64 }
  65
  66 .button.block {
  67   width: 100%;
  68   text-align: center;
  69   display: block;
  70 }
  71
  72 // Floating action button
  73 //.fab {
  74 //  $size: 70px;
  75 //  button.button {
  76 //    border-radius: 100%;
  77 //    width: $size;
  78 //    height: $size;
  79 //    font-size: 48px;
  80 //    text-align: center;
  81 //    margin: 0;
  82 //    padding: 0;
  83 //    border: 0;
  84 //    box-shadow: 0 0 2px 2px #DDD;
  85 //    transition: all ease-in-out 160ms;
  86 //    i {
  87 //      transform: rotate(0deg);
  88 //      transition: all ease-in-out 160ms;
  89 //    }
  90 //    &:hover {
  91 //      box-shadow: 0 2px 4px 2px #CCC;
  92 //      i {
  93 //        transform: rotate(180deg);
  94 //      }
  95 //    }
  96 //  }
  97 //}