pure-styled-components/lib/components/Table/Table.js

Styled Component design system based on Pure CSS for React/Preact

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  /* Remove spacing between table cells (from Normalize.css) */\n  border-collapse: collapse;\n  border-spacing: 0;\n  empty-cells: show;\n  border: 1px solid #cbcbcb;\n\n  & caption {\n    color: #000;\n    font: italic 85%/1 arial, sans-serif;\n    padding: 1em 0;\n    text-align: center;\n  }\n\n  & td,\n  & th {\n    border-left: 1px solid #cbcbcb; /*  inner column border */\n    border-width: 0 0 0 1px;\n    font-size: inherit;\n    margin: 0;\n    overflow: visible; /*to make ths where the title is really long work*/\n    padding: 0.5em 1em; /* cell padding */\n  }\n\n  /* Consider removing this next declaration block, as it causes problems when\nthere's a rowspan on the first cell. Case added to the tests. issue#432 */\n  & td:first-child,\n  & th:first-child {\n    border-left-width: 0;\n  }\n\n  & thead {\n    background-color: #e0e0e0;\n    color: #000;\n    text-align: left;\n    vertical-align: bottom;\n  }\n\n  /*\nstriping:\n   even - #fff (white)\n   odd  - #f2f2f2 (light gray)\n*/\n  & td {\n    background-color: transparent;\n  }\n  & td.odd {\n    background-color: #f2f2f2;\n  }\n\n  /* nth-child selector for modern browsers */\n  ", ";\n\n  /* BORDERED TABLES */\n  ", ";\n\n  /* HORIZONTAL BORDERED TABLES */\n\n  ", ";\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
/**
 * Table
 *
 */

var BaseTable = function BaseTable(_ref) {
  var className = _ref.className,
      children = _ref.children;
  return React.createElement("table", {
    className: className
  }, children);
};

var Table = styled(BaseTable)(_templateObject(), function (props) {
  return props.striped ? "& tr:nth-child(2n-1) td {\n    background-color: #f2f2f2;\n  }" : "";
}, function (props) {
  return props.bordered ? "& td {\n    border-bottom: 1px solid #cbcbcb;\n  }\n  &-bordered tbody > tr:last-child > td {\n    border-bottom-width: 0;\n  }" : "";
}, function (props) {
  return props.horizontal ? "\n  & td,\n  & th {\n    border-width: 0 0 1px 0;\n    border-bottom: 1px solid #cbcbcb;\n  }\n  & tbody > tr:last-child > td {\n    border-bottom-width: 0;\n  }" : "";
});
Table.propTypes = {
  /**
   * Child components (array or single element)
   */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
/** @component */

export default Table;
//# sourceMappingURL=Table.js.map