legion-phoenix-dates/dist/cjs/components/datepicker/picker-style.js

Legion UI date component

"use strict";
exports.__esModule = true;
exports.Wrapper = void 0;
var tslib_1 = require("tslib");
var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
exports.Wrapper = styled_1["default"].div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: inline-block;\n  padding: ", ";\n  background-color: #ffffff;\n\n  .legion-picker__label {\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 8px;\n    display: block;\n  }\n\n  .legion-picker__label,\n  .legion-picker__hint,\n  .legion-picker__message {\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .legion-picker__inner {\n    box-sizing: border-box;\n    line-height: 1;\n    overflow: hidden;\n    width: 100%;\n    display: inline-flex;\n    justify-content: space-between;\n    align-items: center;\n    background: ", ";\n    border-color: ", ";\n    border-style: solid;\n    color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: transparent;\n    font-style: normal;\n\n    &:hover,\n    &:focus-within {\n      border-color: ", ";\n    }\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n\n    input {\n      border: 0;\n      ::placeholder,\n      ::-webkit-input-placeholder,\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .legion-picker__base {\n    box-sizing: border-box;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: fill-available;\n    position: relative;\n\n    input {\n      border: 0;\n      outline: none;\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      padding: 8px 12px;\n      background: transparent;\n      ::placeholder,\n      ::-webkit-input-placeholder,\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .legion-picker__icon {\n    display: flex;\n    align-items: center;\n\n    &:first-of-type,\n    &:nth-of-type(2) {\n      padding-left: 12px;\n    }\n\n    &:last-child,\n    &:nth-of-type(4) {\n      padding-right: 12px;\n    }\n  }\n\n  .legion-picker__message,\n  .legion-picker__hint {\n    display: block;\n    margin-top: 8px;\n    font-weight: 400;\n  }\n\n  .legion-picker_message {\n    color: ", ";\n  }\n\n  .legion-picker__hint {\n    color: ", ";\n  }\n\n  /* BLOCK */\n  &.legion-picker--block {\n    display: block;\n    width: 100%;\n  }\n\n  /* DISABLED */\n  &.legion-picker--disabled .legion-picker__inner {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  /* SIZE SMALL*/\n  &.legion-picker--sm .legion-picker__inner {\n    border-radius: ", "px;\n    height: 36px;\n  }\n  &.legion-picker--sm input {\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  /* SIZE MEDIUM*/\n  &.legion-picker--md .legion-picker__inner {\n    border-radius: ", "px;\n    height: 44px;\n  }\n  &.legion-picker--md input {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  /* SIZE LARGE*/\n  &.legion-picker--lg .legion-picker__inner {\n    border-radius: ", "px;\n    height: 52px;\n  }\n  &.legion-picker--lg input {\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  /* STATUS ERROR */\n  &[class*='-error'] .legion-picker__inner {\n    border-color: ", ";\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n  }\n  &[class*='-error'] .legion-picker__message {\n    color: ", ";\n  }\n\n  /* STATUS SUCCESS */\n  &[class*='-success'] .legion-picker__inner {\n    border-color: ", ";\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n  }\n  &[class*='-success'] .legion-picker__message {\n    color: ", ";\n  }\n\n  /* VARIANT OUTLINE */\n  &.legion-picker--outline-normal .legion-picker__inner,\n  &.legion-picker--outline-error .legion-picker__inner,\n  &.legion-picker--outline-success .legion-picker__inner {\n    border-width: 1px;\n  }\n\n  /* VARIANT INLINE */\n  &.legion-picker--inline-normal .legion-picker_inner,\n  &.legion-picker--inline-error .legion-picker__inner,\n  &.legion-picker--inline-success .legion-picker__inner {\n    background-color: ", ";\n    border-width: 0 0 1px 0;\n  }\n"], ["\n  display: inline-block;\n  padding: ", ";\n  background-color: #ffffff;\n\n  .legion-picker__label {\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 8px;\n    display: block;\n  }\n\n  .legion-picker__label,\n  .legion-picker__hint,\n  .legion-picker__message {\n    font-family: ", ";\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .legion-picker__inner {\n    box-sizing: border-box;\n    line-height: 1;\n    overflow: hidden;\n    width: 100%;\n    display: inline-flex;\n    justify-content: space-between;\n    align-items: center;\n    background: ", ";\n    border-color: ", ";\n    border-style: solid;\n    color: ", ";\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: transparent;\n    font-style: normal;\n\n    &:hover,\n    &:focus-within {\n      border-color: ", ";\n    }\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n\n    input {\n      border: 0;\n      ::placeholder,\n      ::-webkit-input-placeholder,\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .legion-picker__base {\n    box-sizing: border-box;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: fill-available;\n    position: relative;\n\n    input {\n      border: 0;\n      outline: none;\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      padding: 8px 12px;\n      background: transparent;\n      ::placeholder,\n      ::-webkit-input-placeholder,\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  .legion-picker__icon {\n    display: flex;\n    align-items: center;\n\n    &:first-of-type,\n    &:nth-of-type(2) {\n      padding-left: 12px;\n    }\n\n    &:last-child,\n    &:nth-of-type(4) {\n      padding-right: 12px;\n    }\n  }\n\n  .legion-picker__message,\n  .legion-picker__hint {\n    display: block;\n    margin-top: 8px;\n    font-weight: 400;\n  }\n\n  .legion-picker_message {\n    color: ", ";\n  }\n\n  .legion-picker__hint {\n    color: ", ";\n  }\n\n  /* BLOCK */\n  &.legion-picker--block {\n    display: block;\n    width: 100%;\n  }\n\n  /* DISABLED */\n  &.legion-picker--disabled .legion-picker__inner {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  /* SIZE SMALL*/\n  &.legion-picker--sm .legion-picker__inner {\n    border-radius: ", "px;\n    height: 36px;\n  }\n  &.legion-picker--sm input {\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  /* SIZE MEDIUM*/\n  &.legion-picker--md .legion-picker__inner {\n    border-radius: ", "px;\n    height: 44px;\n  }\n  &.legion-picker--md input {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  /* SIZE LARGE*/\n  &.legion-picker--lg .legion-picker__inner {\n    border-radius: ", "px;\n    height: 52px;\n  }\n  &.legion-picker--lg input {\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  /* STATUS ERROR */\n  &[class*='-error'] .legion-picker__inner {\n    border-color: ", ";\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n  }\n  &[class*='-error'] .legion-picker__message {\n    color: ", ";\n  }\n\n  /* STATUS SUCCESS */\n  &[class*='-success'] .legion-picker__inner {\n    border-color: ", ";\n\n    &:focus-within {\n      outline-color: ", ";\n    }\n  }\n  &[class*='-success'] .legion-picker__message {\n    color: ", ";\n  }\n\n  /* VARIANT OUTLINE */\n  &.legion-picker--outline-normal .legion-picker__inner,\n  &.legion-picker--outline-error .legion-picker__inner,\n  &.legion-picker--outline-success .legion-picker__inner {\n    border-width: 1px;\n  }\n\n  /* VARIANT INLINE */\n  &.legion-picker--inline-normal .legion-picker_inner,\n  &.legion-picker--inline-error .legion-picker__inner,\n  &.legion-picker--inline-success .legion-picker__inner {\n    background-color: ", ";\n    border-width: 0 0 1px 0;\n  }\n"])), function (props) { return props.padding || '0'; }, function (props) { return props.theme.tokens.fieldDefaultLabelColor; }, function (props) { return props.theme.tokens.typographyBody; }, function (props) { return props.theme.tokens.fieldDefaultBackgroundColor; }, function (props) { return props.theme.tokens.fieldDefaultOutlineColor; }, function (props) { return props.theme.tokens.tertiary800; }, function (props) { return props.theme.tokens.fieldActiveOutlineColor; }, function (props) { return props.theme.tokens.primary50; }, function (props) { return props.theme.tokens.fieldDefaultPlaceholderColor; }, function (props) { return props.theme.tokens.typographyBody; }, function (props) { return props.theme.tokens.tertiary400; }, function (props) { return props.theme.tokens.tertiary600; }, function (props) { return props.theme.tokens.baseblack; }, function (props) { return props.theme.tokens.fieldDisableBackgroundColor; }, function (props) { return props.theme.tokens.fieldDisableOutlineColor; }, function (props) { return +props.theme.tokens.fieldBorderRadius - 2; }, function (props) { return props.theme.tokens.fieldBorderRadius; }, function (props) { return +props.theme.tokens.fieldBorderRadius + 2; }, function (props) { return props.theme.tokens.error500; }, function (props) { return props.theme.tokens.error50; }, function (props) { return props.theme.tokens.error500; }, function (props) { return props.theme.tokens.success500; }, function (props) { return props.theme.tokens.success50; }, function (props) { return props.theme.tokens.success500; }, function (props) { return props.theme.tokens.tertiary50; });
var templateObject_1;