_buttons.scss 1.9 KB

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