design-system-simplefi/build/src/components/DataTable/Table.style.js

Design System for SimpleFi Applications

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled, { css } from 'styled-components';
import { getColor } from '../../utils';
export var TableSt = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  background-color: ", ";\n  padding: 0px;\n  clear: both;\n  overflow-x: auto;\n  margin: 0px 4px;\n\n  /* here goes logic for stickyheader */\n  table {\n    width: 100%;\n    text-align: ", ";\n    background-color: ", ";\n    z-index: 1;\n    font-family: ", ";\n\n    thead {\n      ", ";\n    }\n    th {\n      font-size: 18px;\n      min-height: 20px;\n      z-index: 2;\n      text-align: left;\n      justify-content: flex-start;\n      font-weight: normal;\n      padding: 10px 4px;\n      color: ", ";\n      background-color: ", ";\n      text-transform: uppercase;\n\n      &:first-of-type {\n        padding-left: 5px;\n      }\n\n      ", ";\n    }\n\n    th span div,\n    th div {\n      justify-content: flex-end;\n    }\n\n    th:first-child div,\n    th:first-child span div {\n      justify-content: flex-start;\n    }\n\n    td {\n      font-size: 21px;\n      padding: 0px 4px 0px 4px;\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      font-family: ", ";\n\n      &:first-of-type {\n        padding-left: 5px;\n      }\n    }\n\n    td div {\n      justify-content: flex-end;\n    }\n\n    tbody {\n      tr {\n        z-index: 2;\n        &:nth-child(odd) {\n          background-color: ", ";\n        }\n      }\n\n      tr td:first-child div {\n        justify-content: flex-start;\n      }\n    }\n  }\n"], ["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  background-color: ", ";\n  padding: 0px;\n  clear: both;\n  overflow-x: auto;\n  margin: 0px 4px;\n\n  /* here goes logic for stickyheader */\n  table {\n    width: 100%;\n    text-align: ", ";\n    background-color: ", ";\n    z-index: 1;\n    font-family: ", ";\n\n    thead {\n      ", ";\n    }\n    th {\n      font-size: 18px;\n      min-height: 20px;\n      z-index: 2;\n      text-align: left;\n      justify-content: flex-start;\n      font-weight: normal;\n      padding: 10px 4px;\n      color: ", ";\n      background-color: ", ";\n      text-transform: uppercase;\n\n      &:first-of-type {\n        padding-left: 5px;\n      }\n\n      ", ";\n    }\n\n    th span div,\n    th div {\n      justify-content: flex-end;\n    }\n\n    th:first-child div,\n    th:first-child span div {\n      justify-content: flex-start;\n    }\n\n    td {\n      font-size: 21px;\n      padding: 0px 4px 0px 4px;\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      font-family: ", ";\n\n      &:first-of-type {\n        padding-left: 5px;\n      }\n    }\n\n    td div {\n      justify-content: flex-end;\n    }\n\n    tbody {\n      tr {\n        z-index: 2;\n        &:nth-child(odd) {\n          background-color: ", ";\n        }\n      }\n\n      tr td:first-child div {\n        justify-content: flex-start;\n      }\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.white;
}, function (_a) {
    var align = _a.align;
    return align || 'left';
}, getColor('white'), function (_a) {
    var theme = _a.theme;
    return theme.typography.family.base;
}, function (props) {
    return props.stickyHeader && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          top: ", ";\n          position: sticky;\n          z-index: 1;\n        "], ["\n          top: ", ";\n          position: sticky;\n          z-index: 1;\n        "])), props.stickyHeaderTop);
}, getColor('black'), getColor('white'), function (props) {
    return props.stickyHeader && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          top: ", ";\n          position: sticky;\n        "], ["\n          top: ", ";\n          position: sticky;\n        "])), props.stickyHeaderTop);
}, getColor('white'), getColor('darkGrey'), function (_a) {
    var align = _a.align;
    return align || 'left';
}, function (_a) {
    var theme = _a.theme;
    return theme.typography.family.base;
}, getColor('lightestGrey'));
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Table.style.js.map