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   fill: $textColor;
   6   text-transform: uppercase;
   7   border: 1px solid $backgroundColor;
   8   vertical-align: top;
   9   &:hover {
  10     background-color: lighten($backgroundColor, 8%);
  11     //box-shadow: $bs-med;
  12     text-decoration: none;
  13     color: $textColor;
  14   }
  15   &:active {
  16     background-color: darken($backgroundColor, 8%);
  17   }
  18   &:focus {
  19     background-color: lighten($backgroundColor, 4%);
  20     box-shadow: $bs-light;
  21     text-decoration: none;
  22     color: $textColor;
  23   }
  24 }
  25
  26 // Button Specific Variables
  27 $button-border-radius: 2px;
  28
  29 .button-base {
  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   border: none;
  38   font-weight: 400;
  39   outline: 0;
  40   border-radius: $button-border-radius;
  41   cursor: pointer;
  42   transition: all ease-in-out 120ms;
  43   box-shadow: 0;
  44   @include generate-button-colors(#EEE, $primary);
  45 }
  46
  47 .button, input[type="button"], input[type="submit"]  {
  48   @extend .button-base;
  49   &.pos {
  50     @include generate-button-colors(#EEE, $positive);
  51   }
  52   &.neg {
  53     @include generate-button-colors(#EEE, $negative);
  54   }
  55   &.secondary {
  56     @include generate-button-colors(#EEE, $secondary);
  57   }
  58   &.muted {
  59     @include generate-button-colors(#EEE, #AAA);
  60   }
  61   &.muted-light {
  62     @include generate-button-colors(#666, #e4e4e4);
  63   }
  64 }
  65
  66 .button + .button {
  67   margin-left: $-s;
  68 }
  69
  70 .button.small {
  71   font-size: 0.75rem;
  72   padding: $-xs*1.2 $-s;
  73 }
  74
  75 .button.outline {
  76   background-color: transparent;
  77   color: #888;
  78   fill: #888;
  79   border: 1px solid #DDD;
  80   &:hover, &:focus, &:active {
  81     box-shadow: none;
  82     background-color: #EEE;
  83   }
  84   &.page {
  85     border-color: $color-page;
  86     color: $color-page;
  87     fill: $color-page;
  88     &:hover, &:focus, &:active {
  89       background-color: $color-page;
  90       color: #FFF;
  91       fill: #FFF;
  92     }
  93   }
  94   &.chapter {
  95     border-color: $color-chapter;
  96     color: $color-chapter;
  97     fill: $color-chapter;
  98     &:hover, &:focus, &:active {
  99       background-color: $color-chapter;
 100       color: #FFF;
 101       fill: #FFF;
 102     }
 103   }
 104   &.book {
 105     border-color: $color-book;
 106     color: $color-book;
 107     fill: $color-book;
 108     &:hover, &:focus, &:active {
 109       background-color: $color-book;
 110       color: #FFF;
 111       fill: #FFF;
 112     }
 113   }
 114 }
 115
 116 .text-button {
 117   @extend .link;
 118   background-color: transparent;
 119   padding: 0;
 120   margin: 0;
 121   border: none;
 122   user-select: none;
 123   font-size: 0.75rem;
 124   &:focus, &:active {
 125     outline: 0;
 126   }
 127   &:hover {
 128     text-decoration: none;
 129   }
 130   &.neg {
 131     color: $negative;
 132   }
 133   &.muted {
 134     color: #666;
 135   }
 136 }
 137
 138 .button-group {
 139   @include clearfix;
 140   .button, button[type="button"] {
 141     margin: $-xs 0 $-xs 0;
 142     float: left;
 143     border-radius: 0;
 144     &:first-child {
 145       border-radius: $button-border-radius 0 0 $button-border-radius;
 146     }
 147     &:last-child {
 148       border-radius: 0 $button-border-radius $button-border-radius 0;
 149     }
 150   }
 151 }
 152
 153 .button.block {
 154   width: 100%;
 155   text-align: center;
 156   display: block;
 157   &.text-left {
 158     text-align: left;
 159   }
 160 }
 161
 162 .button.icon {
 163   .svg-icon {
 164     margin-right: 0;
 165   }
 166 }
 167
 168 .button.svg {
 169   svg {
 170     display: inline-block;
 171     position: absolute;
 172     left: $-m;
 173     top: $-s - 2px;
 174     width: 24px;
 175     height: 24px;
 176   }
 177   padding: $-s $-m;
 178   padding-bottom: $-s - 2px;
 179   padding-left: $-m*2 + 24px;
 180 }
 181
 182 .button[disabled] {
 183   background-color: #BBB;
 184   cursor: default;
 185   &:hover {
 186     background-color: #BBB;
 187     cursor: default;
 188     box-shadow: none;
 189   }
 190 }