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   &.neg {
  63     color: $negative;
  64   }
  65 }
  66
  67 .button-group {
  68   @include clearfix;
  69   .button, button[type="button"] {
  70     margin: $-xs 0 $-xs 0;
  71     float: left;
  72     border-radius: 0;
  73     &:first-child {
  74       border-radius: $button-border-radius 0 0 $button-border-radius;
  75     }
  76     &:last-child {
  77       border-radius: 0 $button-border-radius $button-border-radius 0;
  78     }
  79   }
  80 }
  81
  82 .button.block {
  83   width: 100%;
  84   text-align: center;
  85   display: block;
  86 }
  87
  88 // Floating action button
  89 //.fab {
  90 //  $size: 70px;
  91 //  button.button {
  92 //    border-radius: 100%;
  93 //    width: $size;
  94 //    height: $size;
  95 //    font-size: 48px;
  96 //    text-align: center;
  97 //    margin: 0;
  98 //    padding: 0;
  99 //    border: 0;
 100 //    box-shadow: 0 0 2px 2px #DDD;
 101 //    transition: all ease-in-out 160ms;
 102 //    i {
 103 //      transform: rotate(0deg);
 104 //      transition: all ease-in-out 160ms;
 105 //    }
 106 //    &:hover {
 107 //      box-shadow: 0 2px 4px 2px #CCC;
 108 //      i {
 109 //        transform: rotate(180deg);
 110 //      }
 111 //    }
 112 //  }
 113 //}