_buttons.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. // Buttons
  2. .btn {
  3. box-shadow: $z-depth-1;
  4. @include button-size($btn-padding-y-basic, $btn-padding-x-basic, $btn-font-size-basic);
  5. transition: $btn-transition;
  6. margin: $btn-margin-basic;
  7. border: 0;
  8. border-radius: $border-radius-base;
  9. cursor: pointer;
  10. text-transform: uppercase;
  11. white-space: normal;
  12. word-wrap: break-word;
  13. color: inherit;
  14. &:hover,
  15. &:active,
  16. &:focus {
  17. box-shadow: $z-depth-1-half;
  18. outline: 0;
  19. }
  20. &:not([disabled]):not(.disabled):active,
  21. &:not([disabled]):not(.disabled).active {
  22. box-shadow: $z-depth-1-half;
  23. }
  24. .fas, .fab, .far {
  25. position: relative;
  26. font-size: $btn-icon-basic;
  27. &.right {
  28. margin-left: $btn-icon-margin;
  29. }
  30. &.left {
  31. margin-right: $btn-icon-margin;
  32. }
  33. }
  34. &.btn-lg {
  35. @include button-size($btn-padding-y-large, $btn-padding-x-large, $btn-font-size-large);
  36. .fas, .fab, .far {
  37. font-size: $btn-icon-large;
  38. }
  39. }
  40. &.btn-md {
  41. @include button-size($btn-padding-y-medium, $btn-padding-x-medium, $btn-font-size-medium);
  42. .fas, .fab, .far {
  43. font-size: $btn-icon-medium;
  44. }
  45. }
  46. &.btn-sm {
  47. @include button-size($btn-padding-y-small, $btn-padding-x-small, $btn-font-size-small);
  48. .fas, .fab, .far {
  49. font-size: $btn-icon-small;
  50. }
  51. }
  52. &.btn-tb {
  53. padding: $btn-tb-padding-y $btn-tb-padding-x;
  54. }
  55. &.disabled,
  56. &:disabled {
  57. &:active,
  58. &:focus,
  59. &:hover {
  60. box-shadow: $z-depth-1;
  61. }
  62. }
  63. &.btn-block {
  64. margin: inherit;
  65. }
  66. &.btn-link {
  67. @extend .black-text;
  68. box-shadow: none;
  69. background-color: transparent;
  70. &:active,
  71. &:focus,
  72. &:hover {
  73. box-shadow: none !important;
  74. background-color: transparent;
  75. }
  76. }
  77. &[class*="btn-outline-"] {
  78. padding-top: $btn-outline-padding-y-basic;
  79. padding-bottom: $btn-outline-padding-y-basic;
  80. &.btn-lg {
  81. padding-top: $btn-outline-padding-y-large;
  82. padding-bottom: $btn-outline-padding-y-large;
  83. }
  84. &.btn-md {
  85. padding-top: $btn-outline-padding-y-medium;
  86. padding-bottom: $btn-outline-padding-y-medium;
  87. }
  88. &.btn-sm {
  89. padding-top: $btn-outline-padding-y-small;
  90. padding-bottom: $btn-outline-padding-y-small;
  91. }
  92. }
  93. }
  94. .btn-group {
  95. .btn {
  96. margin: 0;
  97. }
  98. }
  99. // Overwrite default button icon size
  100. .btn,
  101. .btn-floating {
  102. .fa-lg {
  103. font-size: 1.33333em !important;
  104. }
  105. .fa-xs {
  106. font-size: .75em !important;
  107. }
  108. .fa-sm {
  109. font-size: .875em !important;
  110. }
  111. .fa-1x {
  112. font-size: 1em !important;
  113. }
  114. .fa-2x {
  115. font-size: 2em !important;
  116. }
  117. .fa-3x {
  118. font-size: 3em !important;
  119. }
  120. .fa-4x {
  121. font-size: 4em !important;
  122. }
  123. .fa-5x {
  124. font-size: 5em !important;
  125. }
  126. .fa-6x {
  127. font-size: 6em !important;
  128. }
  129. .fa-7x {
  130. font-size: 7em !important;
  131. }
  132. .fa-8x {
  133. font-size: 8em !important;
  134. }
  135. .fa-9x {
  136. font-size: 9em !important;
  137. }
  138. .fa-10x {
  139. font-size: 10em !important;
  140. }
  141. }
  142. @each $btn_name, $color_value in $mdb-colors {
  143. @include make-button($btn_name, $color_value);
  144. @include make-outline-button($btn_name, $color_value);
  145. }
  146. .btn-warning:not(:disabled):not(.disabled).active,
  147. .btn-warning:not(:disabled):not(.disabled):active,
  148. .show>.btn-warning.dropdown-toggle {
  149. color: $white-base;
  150. }