_buttons.scss 1.4 KB

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