_buttons.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. @charset "UTF-8";
  2. /// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
  3. ///
  4. /// @example scss - Usage
  5. /// #{$all-buttons} {
  6. /// background-color: #f00;
  7. /// }
  8. ///
  9. /// #{$all-buttons-focus},
  10. /// #{$all-buttons-hover} {
  11. /// background-color: #0f0;
  12. /// }
  13. ///
  14. /// #{$all-buttons-active} {
  15. /// background-color: #00f;
  16. /// }
  17. ///
  18. /// @example css - CSS Output
  19. /// button,
  20. /// input[type="button"],
  21. /// input[type="reset"],
  22. /// input[type="submit"] {
  23. /// background-color: #f00;
  24. /// }
  25. ///
  26. /// button:focus,
  27. /// input[type="button"]:focus,
  28. /// input[type="reset"]:focus,
  29. /// input[type="submit"]:focus,
  30. /// button:hover,
  31. /// input[type="button"]:hover,
  32. /// input[type="reset"]:hover,
  33. /// input[type="submit"]:hover {
  34. /// background-color: #0f0;
  35. /// }
  36. ///
  37. /// button:active,
  38. /// input[type="button"]:active,
  39. /// input[type="reset"]:active,
  40. /// input[type="submit"]:active {
  41. /// background-color: #00f;
  42. /// }
  43. ///
  44. /// @require assign-inputs
  45. ///
  46. /// @type List
  47. ///
  48. /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
  49. $buttons-list: 'button',
  50. 'input[type="button"]',
  51. 'input[type="reset"]',
  52. 'input[type="submit"]';
  53. $all-buttons: assign-inputs($buttons-list);
  54. $all-buttons-active: assign-inputs($buttons-list, active);
  55. $all-buttons-focus: assign-inputs($buttons-list, focus);
  56. $all-buttons-hover: assign-inputs($buttons-list, hover);
  57. $all-button-inputs: $all-buttons;
  58. $all-button-inputs-active: $all-buttons-active;
  59. $all-button-inputs-focus: $all-buttons-focus;
  60. $all-button-inputs-hover: $all-buttons-hover;