kwikid-components-react/components/kwikui/inputs/input-date/InputDate.style.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.KwikUIStyleInputDateWrapper = exports.KwikUIStyleInputDateMessagesContainer = exports.KwikUIStyleInputDateLabel = exports.KwikUIStyleInputDateContainer = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Input = require("../../../../shared/styles/Input.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIStyleInputDateWrapper = exports.KwikUIStyleInputDateWrapper = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;

  & > *:not(:last-child) {
    margin-bottom: 0.5rem;
  }
`;
const KwikUIStyleInputDateLabel = exports.KwikUIStyleInputDateLabel = _styledComponents.default.label`
  ${_Input.KwikUIStyleInputLabel}

  position: absolute;
  top: 0px;
  margin-left: -0.15rem;
  transform: translate(0px, -50%);
`;
const KwikUIStyleInputDateContainer = exports.KwikUIStyleInputDateContainer = _styledComponents.default.div`
  ${_Input.KwikUIStyleInputContainerBase}
  ${_Input.KwikUIStyleInputStatus}
  ${_Input.KwikUIStyleInputContainerDisabled}
  ${_Input.KwikUIStyleInputContainerSize}
  ${_Input.KwikUIStyleInputContainerShape}
  #prefix {
    ${_Input.KwikUIStyleInputPrefix}
  }
  #postfix {
    ${_Input.KwikUIStyleInputPostfix}
  }

  input {
    ${_Input.KwikUIStyleInputReset}
    ${_Input.KwikUIStyleInputBase}
    ${_Input.KwikUIStyleInputSize}
    &::placeholder {
      ${_Input.KwikUIStyleInputPlaceholder}
    }
  }
`;
const KwikUIStyleInputDateMessagesContainer = exports.KwikUIStyleInputDateMessagesContainer = _styledComponents.default.div`
  width: 100%;
  margin-left: 0.25rem;
  font-size: 0.9rem;
`;