_buttons.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. //
  2. // Component: Button
  3. //
  4. .btn {
  5. border-width: 1px;
  6. &.disabled,
  7. &:disabled {
  8. cursor: not-allowed;
  9. }
  10. // Flat buttons
  11. &.btn-flat {
  12. @include border-radius(0);
  13. border-width: 1px;
  14. box-shadow: none;
  15. }
  16. // input file btn
  17. &.btn-file {
  18. overflow: hidden;
  19. position: relative;
  20. > input[type='file'] {
  21. background: $white;
  22. cursor: inherit;
  23. display: block;
  24. font-size: 100px;
  25. min-height: 100%;
  26. min-width: 100%;
  27. opacity: 0;
  28. outline: none;
  29. position: absolute;
  30. right: 0;
  31. text-align: right;
  32. top: 0;
  33. }
  34. }
  35. .text-sm & {
  36. font-size: $font-size-sm !important;
  37. }
  38. }
  39. // Button color variations
  40. .btn-default {
  41. background-color: $button-default-background-color;
  42. border-color: $button-default-background-color;
  43. color: $button-default-color;
  44. &:hover,
  45. &:active,
  46. &.hover {
  47. background-color: darken($button-default-background-color, 5%);
  48. color: darken($button-default-color, 10%);
  49. }
  50. }
  51. // Application buttons
  52. .btn-app {
  53. @include border-radius(3px);
  54. background-color: $button-default-background-color;
  55. border: 1px solid $button-default-border-color;
  56. color: $gray-600;
  57. font-size: 12px;
  58. height: 60px;
  59. margin: 0 0 10px 10px;
  60. min-width: 80px;
  61. padding: 15px 5px;
  62. position: relative;
  63. text-align: center;
  64. // Icons within the btn
  65. > .fa,
  66. > .fas,
  67. > .far,
  68. > .fab,
  69. > .glyphicon,
  70. > .ion {
  71. display: block;
  72. font-size: 20px;
  73. }
  74. &:hover {
  75. background: $button-default-background-color;
  76. border-color: darken($button-default-border-color, 20%);
  77. color: $button-default-color;
  78. }
  79. &:active,
  80. &:focus {
  81. @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
  82. }
  83. // The badge
  84. > .badge {
  85. font-size: 10px;
  86. font-weight: 400;
  87. position: absolute;
  88. right: -10px;
  89. top: -3px;
  90. }
  91. }
  92. // Extra Button Size
  93. .btn-xs {
  94. @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
  95. }