buttons.js 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = buttons;
  4. var _statefulSelectors = _interopRequireDefault(require("../internalHelpers/_statefulSelectors"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. var stateMap = [undefined, null, 'active', 'focus', 'hover'];
  7. function template(state) {
  8. return "button" + state + ",\n input[type=\"button\"]" + state + ",\n input[type=\"reset\"]" + state + ",\n input[type=\"submit\"]" + state;
  9. }
  10. /**
  11. * Populates selectors that target all buttons. You can pass optional states to append to the selectors.
  12. * @example
  13. * // Styles as object usage
  14. * const styles = {
  15. * [buttons('active')]: {
  16. * 'border': 'none'
  17. * }
  18. * }
  19. *
  20. * // styled-components usage
  21. * const div = styled.div`
  22. * > ${buttons('active')} {
  23. * border: none;
  24. * }
  25. * `
  26. *
  27. * // CSS in JS Output
  28. *
  29. * 'button:active,
  30. * 'input[type="button"]:active,
  31. * 'input[type=\"reset\"]:active,
  32. * 'input[type=\"submit\"]:active: {
  33. * 'border': 'none'
  34. * }
  35. */
  36. function buttons() {
  37. for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {
  38. states[_key] = arguments[_key];
  39. }
  40. return (0, _statefulSelectors["default"])(states, template, stateMap);
  41. }
  42. module.exports = exports.default;