codekingpro/portable-devtools

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