_buttons.scss 1.7 KB

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