_buttons.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. background-color: darken(#f4f4f4, 5%);
  41. }
  42. }
  43. // Application buttons
  44. .btn-app {
  45. @include border-radius(3px);
  46. position: relative;
  47. padding: 15px 5px;
  48. margin: 0 0 10px 10px;
  49. min-width: 80px;
  50. height: 60px;
  51. text-align: center;
  52. color: #666;
  53. border: 1px solid #ddd;
  54. background-color: #f4f4f4;
  55. font-size: 12px;
  56. // Icons within the btn
  57. > .fa,
  58. > .glyphicon,
  59. > .ion {
  60. font-size: 20px;
  61. display: block;
  62. }
  63. &:hover {
  64. background: #f4f4f4;
  65. color: #444;
  66. border-color: #aaa;
  67. }
  68. &:active,
  69. &:focus {
  70. @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
  71. }
  72. // The badge
  73. > .badge {
  74. position: absolute;
  75. top: -3px;
  76. right: -10px;
  77. font-size: 10px;
  78. font-weight: 400;
  79. }
  80. }