@helpscout/hsds-react/components/List/List.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ListUI = exports.ItemUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var config = {
  size: {
    xl: {
      padding: '16px'
    },
    lg: {
      padding: '8px'
    },
    md: {
      padding: '4px'
    },
    sm: {
      padding: '2px'
    },
    xs: {
      padding: '0px'
    }
  }
};
exports.config = config;

var ItemUI = _styledComponents.default.li.withConfig({
  displayName: "Listcss__ItemUI",
  componentId: "eike6p-0"
})(["box-sizing:border-box;display:block;margin:0;padding:4px 0;", ";&.is-listItem{display:list-item;}&.is-inline{display:inline-block;padding-left:4px;vertical-align:middle;&:first-child{padding-left:0;}}&.is-inline-sm >{padding-left:3px;}&.is-inline-xs >{padding-left:2px;}&.is-border-dot{border-bottom:1px dotted;border-color:#eee;}&.is-border-line{border-bottom:1px solid;border-color:#eee;}&.is-bordered{&:last-child{border-bottom:none;}}"], makeSizeStyles);

exports.ItemUI = ItemUI;
var ListUI = (0, _styledComponents.default)('ul').withConfig({
  displayName: "Listcss__ListUI",
  componentId: "eike6p-1"
})(["box-sizing:border-box;display:block;list-style:none;margin-bottom:0;margin-top:0;padding-left:0;&.is-display-block{display:block;}&.is-display-flex{display:flex;}&.is-bullet,&.is-number{list-style-type:decimal;padding-left:16px;}"]);
exports.ListUI = ListUI;

function makeSizeStyles() {
  return (0, _forEach.default)(config.size, function (size, values) {
    return "\n      &.is-" + size + " {\n        padding-top: " + values.padding + ";\n        padding-bottom: " + values.padding + ";\n      }\n    ";
  });
}