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   &:focus {
  15     background-color: lighten($backgroundColor, 4%);
  16     box-shadow: $bs-light;
  17     text-decoration: none;
  18     color: $textColor;
  19   }
  20 }
  21
  22 // Button Specific Variables
  23 $button-border-radius: 2px;
  24
  25 .button-base {
  26   text-decoration: none;
  27   font-size: $fs-m;
  28   line-height: 1.4em;
  29   padding: $-xs $-m;
  30   margin: $-xs $-xs $-xs 0;
  31   display: inline-block;
  32   border: none;
  33   font-weight: 500;
  34   outline: 0;
  35   border-radius: $button-border-radius;
  36   cursor: pointer;
  37   transition: all ease-in-out 120ms;
  38   box-shadow: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.21);
  39   @include generate-button-colors(#EEE, $primary);
  40 }
  41
  42 .button, input[type="button"], input[type="submit"]  {
  43   @extend .button-base;
  44   &.pos {
  45     @include generate-button-colors(#EEE, $positive);
  46   }
  47   &.neg {
  48     @include generate-button-colors(#EEE, $negative);
  49   }
  50   &.secondary {
  51     @include generate-button-colors(#EEE, $secondary);
  52   }
  53   &.muted {
  54     @include generate-button-colors(#EEE, #888);
  55   }
  56   &.muted-light {
  57     @include generate-button-colors(#666, #e4e4e4);
  58   }
  59 }
  60
  61 .text-button {
  62   @extend .link;
  63   background-color: transparent;
  64   padding: 0;
  65   margin: 0;
  66   border: none;
  67   &:focus, &:active {
  68     outline: 0;
  69   }
  70   &:hover {
  71     text-decoration: none;
  72   }
  73   &.neg {
  74     color: $negative;
  75   }
  76 }
  77
  78 .button-group {
  79   @include clearfix;
  80   .button, button[type="button"] {
  81     margin: $-xs 0 $-xs 0;
  82     float: left;
  83     border-radius: 0;
  84     &:first-child {
  85       border-radius: $button-border-radius 0 0 $button-border-radius;
  86     }
  87     &:last-child {
  88       border-radius: 0 $button-border-radius $button-border-radius 0;
  89     }
  90   }
  91 }
  92
  93 .button.block {
  94   width: 100%;
  95   text-align: center;
  96   display: block;
  97   &.text-left {
  98     text-align: left;
  99   }
 100 }
 101
 102 .button.icon {
 103   i {
 104     padding-right: 0;
 105   }
 106 }
 107
 108 .button.svg {
 109   svg {
 110     display: inline-block;
 111     position: absolute;
 112     left: $-m;
 113     top: $-s - 2px;
 114     width: 24px;
 115   }
 116   padding: $-s $-m;
 117   padding-bottom: $-s - 2px;
 118   padding-left: $-m*2 + 24px;
 119 }
 120
 121 .button[disabled] {
 122   background-color: #BBB;
 123   cursor: default;
 124   &:hover {
 125     background-color: #BBB;
 126     cursor: default;
 127     box-shadow: none;
 128   }
 129 }