_buttons.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. // Buttons
  2. .btn {
  3. margin: $btn-margin-basic;
  4. color: inherit;
  5. text-transform: uppercase;
  6. word-wrap: break-word;
  7. white-space: normal;
  8. cursor: pointer;
  9. border: 0;
  10. border-radius: $border-radius-base;
  11. box-shadow: $z-depth-1;
  12. transition: $btn-transition;
  13. @include button-size($btn-padding-y-basic, $btn-padding-x-basic, $btn-font-size-basic);
  14. @include hover-focus-active {
  15. outline: 0;
  16. box-shadow: $z-depth-1-half;
  17. }
  18. &.btn-block {
  19. margin: inherit;
  20. }
  21. .fas,
  22. .fab,
  23. .far {
  24. &.right {
  25. margin-left: $btn-icon-margin;
  26. }
  27. &.left {
  28. margin-right: $btn-icon-margin;
  29. }
  30. }
  31. &.btn-lg {
  32. @include button-size($btn-padding-y-large, $btn-padding-x-large, $btn-font-size-large);
  33. }
  34. &.btn-md {
  35. @include button-size($btn-padding-y-medium, $btn-padding-x-medium, $btn-font-size-medium);
  36. }
  37. &.btn-sm {
  38. @include button-size($btn-padding-y-small, $btn-padding-x-small, $btn-font-size-small);
  39. }
  40. &.disabled,
  41. &:disabled {
  42. @include hover-focus-active {
  43. box-shadow: $z-depth-1;
  44. }
  45. }
  46. &[class*="btn-outline-"] {
  47. padding-top: $btn-outline-padding-y-basic;
  48. padding-bottom: $btn-outline-padding-y-basic;
  49. &.btn-lg {
  50. padding-top: $btn-outline-padding-y-large;
  51. padding-bottom: $btn-outline-padding-y-large;
  52. }
  53. &.btn-md {
  54. padding-top: $btn-outline-padding-y-medium;
  55. padding-bottom: $btn-outline-padding-y-medium;
  56. }
  57. &.btn-sm {
  58. padding-top: $btn-outline-padding-y-small;
  59. padding-bottom: $btn-outline-padding-y-small;
  60. }
  61. }
  62. }
  63. .btn-link {
  64. color: $black-base;
  65. background-color: transparent;
  66. box-shadow: none;
  67. @include hover-focus-active {
  68. color: $black-base;
  69. background-color: transparent;
  70. box-shadow: none;
  71. }
  72. }
  73. .btn-group {
  74. > .btn:not(:first-child),
  75. > .btn-group:not(:first-child) {
  76. margin-left: -$btn-group-margin;
  77. }
  78. }
  79. @each $btn_name, $color_value in $mdb-colors {
  80. @include make-button($btn_name, $color_value);
  81. @include make-outline-button($btn_name, $color_value);
  82. }
  83. @each $name, $val in $gradients {
  84. @include make-gradient-button($name, $val);
  85. }
  86. .btn-warning:not(:disabled):not(.disabled).active,
  87. .btn-warning:not(:disabled):not(.disabled):active,
  88. .show > .btn-warning.dropdown-toggle {
  89. color: $white-base;
  90. }