BookStack Code Mirror - bookstack/blob - resources/assets/sass/_buttons.scss

   1 button {
   2   background-color: transparent;
   3   border: 0;
   4   font-size: 100%;
   5 }
   6
   7 @mixin generate-button-colors($textColor, $backgroundColor) {
   8   background-color: $backgroundColor;
   9   color: $textColor;
  10   fill: $textColor;
  11   border: 1px solid $backgroundColor;
  12   &:hover {
  13     background-color: lighten($backgroundColor, 8%);
  14     color: $textColor;
  15   }
  16   &:active {
  17     background-color: darken($backgroundColor, 8%);
  18   }
  19   &:focus {
  20     background-color: lighten($backgroundColor, 4%);
  21     box-shadow: $bs-light;
  22     color: $textColor;
  23   }
  24 }
  25
  26 // Button Specific Variables
  27 $button-border-radius: 2px;
  28
  29 .button  {
  30   text-decoration: none;
  31   font-size: 0.85rem;
  32   line-height: 1.4em;
  33   padding: $-xs*1.3 $-m;
  34   margin-top: $-xs;
  35   margin-bottom: $-xs;
  36   display: inline-block;
  37   font-weight: 400;
  38   outline: 0;
  39   border-radius: $button-border-radius;
  40   cursor: pointer;
  41   transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
  42   box-shadow: none;
  43   background-color: $primary;
  44   color: #FFF;
  45   fill: #FFF;
  46   text-transform: uppercase;
  47   border: 1px solid $primary;
  48   vertical-align: top;
  49   &:hover, &:focus {
  50     text-decoration: none;
  51   }
  52   &:focus {
  53     outline: 1px dotted currentColor;
  54     outline-offset: -$-xs;
  55   }
  56   &:active {
  57     outline: 0;
  58     background-color: darken($primary, 8%);
  59   }
  60 }
  61 .button.primary {
  62   @include generate-button-colors(#FFFFFF, $primary);
  63 }
  64 .button.outline {
  65   background-color: transparent;
  66   color: #888;
  67   fill: #888;
  68   border: 1px solid #DDD;
  69   &:hover, &:focus, &:active {
  70     box-shadow: none;
  71     background-color: #EEE;
  72   }
  73 }
  74
  75 .button + .button {
  76   margin-left: $-s;
  77 }
  78
  79 .button.small {
  80   font-size: 0.75rem;
  81   padding: $-xs*1.2 $-s;
  82 }
  83
  84 .text-button {
  85   cursor: pointer;
  86   background-color: transparent;
  87   padding: 0;
  88   margin: 0;
  89   border: none;
  90   user-select: none;
  91   font-size: 0.75rem;
  92   line-height: 1.4em;
  93     &:active {
  94     outline: 0;
  95   }
  96   &:hover {
  97     text-decoration: none;
  98   }
  99 }
 100
 101 .button.block {
 102   width: 100%;
 103   text-align: left;
 104   display: block;
 105 }
 106
 107 .button.icon {
 108   .svg-icon {
 109     margin-right: 0;
 110   }
 111 }
 112
 113 .button.svg {
 114   svg {
 115     display: inline-block;
 116     position: absolute;
 117     left: $-m;
 118     top: $-s - 2px;
 119     width: 24px;
 120     height: 24px;
 121   }
 122   padding: $-s $-m ($-s - 2px) ($-m*2 + 24px);
 123 }
 124
 125 .button[disabled] {
 126   background-color: #BBB;
 127   cursor: default;
 128   &:hover {
 129     background-color: #BBB;
 130     cursor: default;
 131     box-shadow: none;
 132   }
 133 }