@nteract/data-explorer/lib/css/index.js

Transform for data resource JSON

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = __importDefault(require("styled-components"));
const react_table_1 = __importDefault(require("./react-table"));
const react_table_hoc_fixed_columns_1 = __importDefault(require("./react-table-hoc-fixed-columns"));
exports.default = styled_components_1.default.div `
  /* React table style customization */
  width: 100%;
  font-family: System-UI, -apple-system, BlinkMacSystemFont, "Source Sans Pro",
    sans-serif;
  font-size: 0.875rem;

  .ReactTable .rt-thead.-header .rt-th {
    color: ${(props) => (props.theme === "dark" ? "#bbb" : "#111")};
    background-color: ${(props) => props.theme === "dark" ? "#1e1e1e" : "#f2f2f2"};
    padding: 2.5rem 0.75rem 0.5rem;
  }
  .ReactTable.-striped .rt-tr.-odd > div {
    color: ${(props) => (props.theme === "dark" ? "#bbb" : "#111")};
    background-color: ${(props) => (props.theme === "dark" ? "#111" : "#fff")};
  }

  .ReactTable.-striped .rt-tr.-even > div {
    color: ${(props) => (props.theme === "dark" ? "#bbb" : "#111")};
    background-color: ${(props) => (props.theme === "dark" ? "#111" : "#fff")};
  }

  .ReactTable.-highlight .rt-tbody .rt-tr:not(.-padRow):hover {
    /* 
    What does this selector do? 
    These classes were in our react-table style sheet previously
    color: var(--theme-app-fg);
    background: var(--cm-background); 
    */
  }

  .ReactTable .-pagination .-btn {
  }

  /* 
  These parts are mostly copied from the dependency packages, 
  but we remove some things that clash with us
  */
  ${react_table_1.default}
  ${react_table_hoc_fixed_columns_1.default}
`;