git.roojs.org Git - roojs1/blob - scss/bootstrap/_buttons.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .btn {
   8   display: inline-block;
   9   font-weight: $btn-font-weight;
  10   color: $body-color;
  11   text-align: center;
  12   vertical-align: middle;
  13   user-select: none;
  14   background-color: transparent;
  15   border: $btn-border-width solid transparent;
  16   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  17   @include transition($btn-transition);
  18
  19   @include hover {
  20     color: $body-color;
  21     text-decoration: none;
  22   }
  23
  24   &:focus,
  25   &.focus {
  26     outline: 0;
  27     box-shadow: $btn-focus-box-shadow;
  28   }
  29
  30   // Disabled comes first so active can properly restyle
  31   &.disabled,
  32   &:disabled {
  33     opacity: $btn-disabled-opacity;
  34     @include box-shadow(none);
  35   }
  36
  37   // Opinionated: add "hand" cursor to non-disabled .btn elements
  38   &:not(:disabled):not(.disabled) {
  39     cursor: pointer;
  40   }
  41
  42   &:not(:disabled):not(.disabled):active,
  43   &:not(:disabled):not(.disabled).active {
  44     @include box-shadow($btn-active-box-shadow);
  45
  46     &:focus {
  47       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  48     }
  49   }
  50 }
  51
  52 // Future-proof disabling of clicks on `<a>` elements
  53 a.btn.disabled,
  54 fieldset:disabled a.btn {
  55   pointer-events: none;
  56 }
  57
  58
  59 //
  60 // Alternate buttons
  61 //
  62
  63 @each $color, $value in $theme-colors {
  64   .btn-#{$color} {
  65     @include button-variant($value, $value);
  66   }
  67 }
  68
  69 @each $color, $value in $theme-colors {
  70   .btn-outline-#{$color} {
  71     @include button-outline-variant($value);
  72   }
  73 }
  74
  75
  76 //
  77 // Link buttons
  78 //
  79
  80 // Make a button look and behave like a link
  81 .btn-link {
  82   font-weight: $font-weight-normal;
  83   color: $link-color;
  84
  85   @include hover {
  86     color: $link-hover-color;
  87     text-decoration: $link-hover-decoration;
  88   }
  89
  90   &:focus,
  91   &.focus {
  92     text-decoration: $link-hover-decoration;
  93     box-shadow: none;
  94   }
  95
  96   &:disabled,
  97   &.disabled {
  98     color: $btn-link-disabled-color;
  99     pointer-events: none;
 100   }
 101
 102   // No need for an active state here
 103 }
 104
 105
 106 //
 107 // Button Sizes
 108 //
 109
 110 .btn-lg {
 111   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 112 }
 113
 114 .btn-sm {
 115   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 116 }
 117
 118
 119 //
 120 // Block button
 121 //
 122
 123 .btn-block {
 124   display: block;
 125   width: 100%;
 126
 127   // Vertically space out multiple block buttons
 128   + .btn-block {
 129     margin-top: $btn-block-spacing-y;
 130   }
 131 }
 132
 133 // Specificity overrides
 134 input[type="submit"],
 135 input[type="reset"],
 136 input[type="button"] {
 137   &.btn-block {
 138     width: 100%;
 139   }
 140 }