ladda-themed.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*!
  2. * Ladda including the default theme.
  3. */
  4. @import "ladda";
  5. /*************************************
  6. * CONFIG
  7. */
  8. $green: #2aca76;
  9. $blue: #53b5e6;
  10. $red: #ea8557;
  11. $purple: #9973C2;
  12. $mint: #16a085;
  13. /*************************************
  14. * BUTTON THEME
  15. */
  16. .ladda-button {
  17. background: #666;
  18. border: 0;
  19. padding: 14px 18px;
  20. font-size: 18px;
  21. cursor: pointer;
  22. color: #fff;
  23. border-radius: 2px;
  24. border: 1px solid transparent;
  25. -webkit-appearance: none;
  26. -webkit-font-smoothing: antialiased;
  27. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  28. &:hover {
  29. border-color: rgba( 0, 0, 0, 0.07 );
  30. background-color: #888;
  31. }
  32. @include buttonColor( 'green', $green );
  33. @include buttonColor( 'blue', $blue );
  34. @include buttonColor( 'red', $red );
  35. @include buttonColor( 'purple', $purple );
  36. @include buttonColor( 'mint', $mint );
  37. &[disabled],
  38. &[data-loading] {
  39. border-color: rgba( 0, 0, 0, 0.07 );
  40. &, &:hover {
  41. cursor: default;
  42. background-color: #999;
  43. }
  44. }
  45. &[data-size=xs] {
  46. padding: 4px 8px;
  47. .ladda-label {
  48. font-size: 0.7em;
  49. }
  50. }
  51. &[data-size=s] {
  52. padding: 6px 10px;
  53. .ladda-label {
  54. font-size: 0.9em;
  55. }
  56. }
  57. &[data-size=l] .ladda-label {
  58. font-size: 1.2em;
  59. }
  60. &[data-size=xl] .ladda-label {
  61. font-size: 1.5em;
  62. }
  63. }