You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

94 lines
1.8 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. .btn {
  2. display: inline-block;
  3. font-weight: 400;
  4. color: $body-color;
  5. text-align: center;
  6. vertical-align: middle;
  7. user-select: none;
  8. background-color: transparent;
  9. border: 1px solid transparent;
  10. @include button-size( $input-btn-padding-y , $input-btn-padding-x, $input-btn-font-size, $input-btn-line-height, $input-btn-border-radius );
  11. @include transition();
  12. &:hover {
  13. color: $body-color;
  14. text-decoration: none;
  15. }
  16. &:focus,
  17. &.focus {
  18. outline: 0;
  19. box-shadow:none;
  20. }
  21. &.disabled,
  22. &:disabled {
  23. opacity: 0.4;
  24. box-shadow:none;
  25. }
  26. &:not(:disabled):not(.disabled) {
  27. cursor: pointer;
  28. }
  29. &:not(:disabled):not(.disabled):active,
  30. &:not(:disabled):not(.disabled).active {
  31. &:focus {
  32. }
  33. }
  34. }
  35. // Future-proof disabling of clicks on `<a>` elements
  36. a.btn.disabled,
  37. fieldset:disabled a.btn {
  38. pointer-events: none;
  39. }
  40. @each $color, $value in $theme-colors {
  41. .btn-#{$color} {
  42. @include button-variant($value, $value);
  43. }
  44. }
  45. .btn-link {
  46. padding:0;
  47. }
  48. .btn-default {
  49. @include button-variant(#fff, #979797);
  50. }
  51. .btn-xs {
  52. @include button-size($input-btn-padding-y-xs, $input-btn-padding-x-xs, $input-btn-font-size-xs, $input-btn-line-height-xs, $input-btn-border-radius-xs);
  53. }
  54. .btn-lg {
  55. @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $input-btn-font-size-lg, $input-btn-line-height-lg, $input-btn-border-radius-lg);
  56. }
  57. .btn-sm {
  58. @include button-size(3px, 5px, $input-btn-font-size-sm, $input-btn-line-height-sm, $input-btn-border-radius-sm);
  59. }
  60. .btn-block {
  61. display: block;
  62. width: 100%;
  63. + .btn-block {
  64. margin-top: 10px;
  65. }
  66. }
  67. // Specificity overrides
  68. input[type="submit"],
  69. input[type="reset"],
  70. input[type="button"] {
  71. &.btn-block {
  72. width: 100%;
  73. }
  74. }
  75. .btn-group {
  76. display:inline-block;
  77. position:relative;
  78. }