@cimpress/react-components/dist/src/DatePicker/styles.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.timeToggle = exports.datePicker = exports.datetime = exports.controlLabel = exports.formGroupActive = exports.formGroup = exports.clearIconStyle = exports.calendarIconStyle = void 0;
const css_1 = require("@emotion/css");
const cvar_1 = __importDefault(require("../theme/cvar"));
exports.calendarIconStyle = (0, css_1.css)({
    top: '24px',
    position: 'absolute',
    transform: ' translateY(-50%)',
    right: (0, cvar_1.default)('spacing-16'),
    pointerEvents: 'none',
    fill: (0, cvar_1.default)('color-icon-interactive'),
});
exports.clearIconStyle = (0, css_1.css) `
  color: ${(0, cvar_1.default)('color-button-primary')};
  position: absolute;
  top: 26px;
  transform: translateY(-50%);
  right: 48px;
  z-index: 1;
  cursor: pointer;
`;
exports.formGroup = (0, css_1.css) `
  position: relative;
  margin-bottom: ${(0, cvar_1.default)('spacing-16')};

  input {
    box-shadow: none;
    padding: ${(0, cvar_1.default)('spacing-16')};
    transition: all 0.2s ease-out;
    width: 100%;
    &:focus {
      outline: none;
      box-shadow: none;
      border-color: ${(0, cvar_1.default)('color-button-primary-active')};
    }
  }
  label {
    color: ${(0, cvar_1.default)('color-text-label')};
    font-weight: normal;
    position: absolute;
    left: ${(0, cvar_1.default)('spacing-16')};
    top: ${(0, cvar_1.default)('spacing-16')};
    line-height: 14px;
    margin-bottom: 0;
    transition: all 0.2s ease-out;
    z-index: 5;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90%;
  }
`;
exports.formGroupActive = (0, css_1.css) `
  input {
    padding: ${(0, cvar_1.default)('spacing-24')} ${(0, cvar_1.default)('spacing-16')} ${(0, cvar_1.default)('spacing-8')};
    width: 100%;
  }
  label {
    top: ${(0, cvar_1.default)('spacing-4')};
    font-size: 12px;
  }
`;
exports.controlLabel = (0, css_1.css) `
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
`;
exports.datetime = (0, css_1.css) `
  position: relative;
  display: inline-block;

  & > i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 27px;
    pointer-events: none;
    width: 100%;
  }

  &.datepicker--disabled {
    svg {
      fill: ${(0, cvar_1.default)('color-icon-disabled')};
    }
  }
`;
exports.datePicker = (0, css_1.css) `
  width: 100%;

  .rdtPicker {
    width: 300px;
  }
  .rdtPicker table {
    border: none;
    border-collapse: separate;
    display: table;
    border-spacing: 3px;
    width: 100%;
    margin: 0;
  }
  .rdtPicker td {
    border: none;
    border-radius: 2px;
    min-width: 38px;
    height: 38px;
  }
  .rdtPicker th {
    min-width: 38px;
    height: 38px;
    border: none;
  }

  .rdtPicker tr {
    background: none;
    border: none;
  }

  /* These look funky and should maybe be fixed */
  .rdtPicker td.rdtMonth {
    height: 67px;
    width: 67px;
  }
  .rdtPicker td.rdtYear {
    height: 67px;
    width: 67px;
  }
  .rdtDay {
    color: ${(0, cvar_1.default)('color-button-primary')};
    min-width: 35px;
    height: 35px;
  }
  .rdtDay.rdtDisabled {
    color: ${(0, cvar_1.default)('color-button-disabled')};
  }
  .rdtPicker thead tr {
    border: none;
  }
  .rdtPicker thead tr:first-child {
    color: ${(0, cvar_1.default)('color-button-primary')};
  }
  .rdtPicker thead tr:first-child th:hover {
    background: none;
    color: ${(0, cvar_1.default)('color-button-primary-hover')};
  }
  .rdtPicker td.rdtActive,
  .rdtPicker td.rdtActive:hover {
    background-color: ${(0, cvar_1.default)('color-background-info')};
    text-shadow: none;
  }
  .rdtPicker {
    top: 50px;
  }
  .rdt th {
    vertical-align: middle;
  }
`;
exports.timeToggle = (0, css_1.css) `
  .form-control {
    width: 100%;
    height: 48px;
    font-size: 14px;
    line-height: 1.286;
    background-image: none;
    border: 1px solid ${(0, cvar_1.default)('color-border-default')};
    border-radius: 2px;
    transition: border-color ease-in-out 0.15s;
  }
  .rdtPicker {
    display: none;
    position: absolute;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    background: ${(0, cvar_1.default)('color-background')};
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    border: 1px solid ${(0, cvar_1.default)('color-interactive')};
  }
  .rdtPicker td {
    text-align: center;
    height: 28px;
  }
  .rdtPicker td.rdtToday {
    font-weight: 700;
  }
  .rdtPicker td.rdtOld:not(.rdtDisabled) {
    color: ${(0, cvar_1.default)('color-text-label')};
  }
  .rdtPicker .rdtTimeToggle {
    color: ${(0, cvar_1.default)('color-interactive')};
    border: 1px solid ${(0, cvar_1.default)('color-interactive')};
    text-align: center;
  }
  .rdtPicker td.rdtActive,
  .rdtPicker td.rdtActive:hover {
    background-color: ${(0, cvar_1.default)('color-interactive-hover')};
    color: ${(0, cvar_1.default)('color-background')};
  }
  .rdt {
    position: relative;
  }
  .rdtPicker {
    display: none;
    position: absolute;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    background: ${(0, cvar_1.default)('color-background')};
    box-shadow: 0 1px 3px ${(0, cvar_1.default)('color-text-default')};
    border: 1px solid ${(0, cvar_1.default)('color-interactive')};
  }
  .rdtOpen .rdtPicker {
    display: block;
  }
  .rdtStatic .rdtPicker {
    box-shadow: none;
    position: static;
  }

  .rdtPicker td,
  .rdtPicker th {
    padding: 0;
    text-align: center;
    height: 28px;
  }
  .rdtPicker td {
    cursor: pointer;
  }
  .rdtPicker td.rdtDay:hover,
  .rdtPicker td.rdtHour:hover,
  .rdtPicker td.rdtMinute:hover,
  .rdtPicker td.rdtSecond:hover,
  .rdtPicker .rdtTimeToggle:hover {
    background: ${(0, cvar_1.default)('color-hover')};
    cursor: pointer;
  }
  .rdtPicker td.rdtDay.rdtDisabled:hover,
  .rdtPicker td.rdtHour.rdtDisabled:hover,
  .rdtPicker td.rdtMinute.rdtDisabled:hover,
  .rdtPicker td.rdtSecond.rdtDisabled:hover,
  .rdtPicker .rdtTimeToggle.rdtDisabled:hover {
    background: none;
    cursor: not-allowed;
  }
  .rdtPicker td.rdtOld:not(.rdtDisabled),
  .rdtPicker td.rdtNew:not(.rdtDisabled) {
    color: ${(0, cvar_1.default)('color-text-label')};
  }
  .rdtPicker td.rdtToday {
    position: relative;
  }
  .rdtPicker td.rdtToday:before {
    content: '';
    display: inline-block;
    border-left: 8px solid transparent;
    border-bottom: 8px solid ${(0, cvar_1.default)('color-interactive')};
    border-top-color: transparent;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }

  .rdtPicker .row {
    width: 14.2857%;
    border-bottom: none;
    cursor: default;
  }
  .rdtPicker th.rdtSwitch {
    width: 100px;
  }
  .rdtPicker th.rdtNext,
  .rdtPicker th.rdtPrev {
    font-size: 21px;
    vertical-align: top;
  }
  .rdtPicker thead tr:first-child th {
    cursor: pointer;
  }
  .rdtPicker thead tr:first-child th:hover {
    background: ${(0, cvar_1.default)('color-hover')};
  }

  .rdtPicker button {
    border: none;
    background: none;
    cursor: pointer;
  }
  .rdtPicker button:hover {
    background-color: ${(0, cvar_1.default)('color-hover')};
  }

  .rdtPicker thead button {
    width: 100%;
    height: 100%;
  }

  td.rdtMonth,
  td.rdtYear {
    height: 50px;
    width: 25%;
    cursor: pointer;
  }
  td.rdtMonth:hover,
  td.rdtYear:hover {
    background: ${(0, cvar_1.default)('color-hover')};
  }

  .rdtCounters {
    color: ${(0, cvar_1.default)('color-interactive')};
    display: inline-block;
  }

  .rdtCounters > div {
    float: left;
  }

  .rdtCounter {
    width: 40px;
    height: 100px;
  }

  .rdtCounterSeparator {
    line-height: 100px;
  }

  .rdtCounter .rdtBtn {
    height: 40%;
    line-height: 40px;
    cursor: pointer;
    display: block;
    user-select: none;
  }
  .rdtCounter .rdtBtn:hover {
    background: ${(0, cvar_1.default)('color-hover')};
  }

  .rdtCounter .rdtCount {
    height: 20%;
    font-size: 1.2em;
  }

  .rdtCount {
    color: ${(0, cvar_1.default)('color-text-label')};
  }

  .rdtTime td {
    cursor: default;
  }
  .rdtPicker thead tr:not(:first-child) th {
    color: ${(0, cvar_1.default)('color-text-label')};
    font-weight: 700;
    font-size: 10px;
  }
  .rdtNext span,
  .rdtPrev span {
    display: block;
    user-select: none;
  }
`;
//# sourceMappingURL=styles.js.map