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 }
  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 }
  62
  63 // Floating action button
  64 //.fab {
  65 //  $size: 70px;
  66 //  button.button {
  67 //    border-radius: 100%;
  68 //    width: $size;
  69 //    height: $size;
  70 //    font-size: 48px;
  71 //    text-align: center;
  72 //    margin: 0;
  73 //    padding: 0;
  74 //    border: 0;
  75 //    box-shadow: 0 0 2px 2px #DDD;
  76 //    transition: all ease-in-out 160ms;
  77 //    i {
  78 //      transform: rotate(0deg);
  79 //      transition: all ease-in-out 160ms;
  80 //    }
  81 //    &:hover {
  82 //      box-shadow: 0 2px 4px 2px #CCC;
  83 //      i {
  84 //        transform: rotate(180deg);
  85 //      }
  86 //    }
  87 //  }
  88 //}