_buttons.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. %button {
  2. display: inline-block;
  3. padding: 0.5rem 1rem;
  4. font-weight: 400;
  5. cursor: pointer;
  6. vertical-align: middle;
  7. outline: none;
  8. &:active {
  9. margin: 1px 0 -1px 0;
  10. }
  11. i {
  12. //margin-right: 5px;
  13. }
  14. &.button-small {
  15. padding: 4px 8px;
  16. font-size: 95%;
  17. }
  18. &.button-x-small {
  19. padding: 2px 5px;
  20. font-size: 90%;
  21. }
  22. &:disabled {
  23. opacity: .6;
  24. cursor: no-drop;
  25. }
  26. }
  27. @mixin button-color($color, $text:$white, $lighter:null) {
  28. color: rgba($text, 0.85);
  29. border-radius: $border-radius;
  30. background: $color;
  31. @if ($lighter == null) {
  32. $lighter: lightness($color) > 50;
  33. }
  34. @if ($lighter) {
  35. &:hover {
  36. background: shade($color,15%);
  37. color: $text;
  38. }
  39. &.dropdown-toggle {
  40. border-left: 1px solid lighten($color, 5%);
  41. }
  42. } @else {
  43. &:hover {
  44. background: tint($color,15%);
  45. color: $text;
  46. }
  47. &.dropdown-toggle {
  48. border-left: 1px solid darken($color, 5%);
  49. }
  50. }
  51. }