_buttons.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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. > .fas,
  60. > .far,
  61. > .fab,
  62. > .glyphicon,
  63. > .ion {
  64. font-size: 20px;
  65. display: block;
  66. }
  67. &:hover {
  68. background: #f4f4f4;
  69. color: #444;
  70. border-color: #aaa;
  71. }
  72. &:active,
  73. &:focus {
  74. @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
  75. }
  76. // The badge
  77. > .badge {
  78. position: absolute;
  79. top: -3px;
  80. right: -10px;
  81. font-size: 10px;
  82. font-weight: 400;
  83. }
  84. }