suomifi-ui-components/dist/cjs/core/Form/DateInput/DateInput.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styledComponents = require('styled-components');
var index = require('../../theme/reset/index.js');
var spacing = require('../../theme/utils/spacing.js');

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styledComponents.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n  width: 150px;\n  ", "\n  ", ";\n  ", "\n\n  &.fi-date-input--full-width {\n    width: 100%;\n  }\n\n  & .fi-date-input_wrapper {\n    width: 100%;\n    display: inline-block;\n\n    & .fi-date-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-date-input_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  & .fi-date-input_input-element-container {\n    ", "\n\n    &:focus-within {\n      position: relative;\n      ", "\n\n      &::after {\n        ", "\n      }\n    }\n\n    width: 100%;\n  }\n\n  & .fi-date-input_picker-element-container {\n    flex: 1;\n  }\n\n  & .fi-date-input_input-and-picker-wrapper {\n    display: flex;\n  }\n\n  & .fi-date-input_input {\n    ", "\n    background-color: ", ";\n    min-width: 40px;\n    width: 100%;\n    min-height: 40px;\n    padding-left: ", ";\n    border-color: ", ";\n    border-radius: ", ";\n\n    &::placeholder {\n      font-style: italic;\n      color: ", ";\n      opacity: 1;\n    }\n  }\n\n  & .fi-date-input_picker-button {\n    ", "\n\n    &:focus-within {\n      position: relative;\n\n      &::after {\n        ", "\n      }\n    }\n\n    height: 100%;\n    width: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    &:focus {\n      ", "\n    }\n  }\n\n  & .fi-date-input_picker-icon {\n    color: ", ";\n  }\n\n  & .fi-date-input_picker-button--disabled {\n    cursor: default;\n    border-color: ", ";\n\n    .fi-date-input_picker-icon {\n      color: ", ";\n    }\n  }\n\n  &.fi-date-input--error {\n    & .fi-date-input_input {\n      border: 2px solid ", ";\n    }\n\n    & .fi-date-input_picker-button {\n      border: 2px solid ", ";\n      border-left: 1px solid ", ";\n      border-radius: 0 ", " ", " 0;\n    }\n  }\n\n  &.fi-date-input--success {\n    & .fi-date-input_input {\n      border: 2px solid ", ";\n    }\n\n    & .fi-date-input_picker-button {\n      border: 2px solid ", ";\n      border-left: 1px solid ", ";\n      border-radius: 0 ", " ", " 0;\n    }\n  }\n  &.fi-date-input--disabled {\n    & .fi-date-input_input {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.fi-date-input--has-picker {\n    & .fi-date-input_input {\n      border-right: none;\n      border-radius: ", " 0 0 ", ";\n    }\n  }\n"], ["\n  ", "\n  width: 150px;\n  ", "\n  ", ";\n  ", "\n\n  &.fi-date-input--full-width {\n    width: 100%;\n  }\n\n  & .fi-date-input_wrapper {\n    width: 100%;\n    display: inline-block;\n\n    & .fi-date-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-date-input_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  & .fi-date-input_input-element-container {\n    ", "\n\n    &:focus-within {\n      position: relative;\n      ", "\n\n      &::after {\n        ", "\n      }\n    }\n\n    width: 100%;\n  }\n\n  & .fi-date-input_picker-element-container {\n    flex: 1;\n  }\n\n  & .fi-date-input_input-and-picker-wrapper {\n    display: flex;\n  }\n\n  & .fi-date-input_input {\n    ", "\n    background-color: ", ";\n    min-width: 40px;\n    width: 100%;\n    min-height: 40px;\n    padding-left: ", ";\n    border-color: ", ";\n    border-radius: ", ";\n\n    &::placeholder {\n      font-style: italic;\n      color: ", ";\n      opacity: 1;\n    }\n  }\n\n  & .fi-date-input_picker-button {\n    ", "\n\n    &:focus-within {\n      position: relative;\n\n      &::after {\n        ", "\n      }\n    }\n\n    height: 100%;\n    width: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    border: 1px solid ", ";\n    border-radius: ", ";\n    &:focus {\n      ", "\n    }\n  }\n\n  & .fi-date-input_picker-icon {\n    color: ", ";\n  }\n\n  & .fi-date-input_picker-button--disabled {\n    cursor: default;\n    border-color: ", ";\n\n    .fi-date-input_picker-icon {\n      color: ", ";\n    }\n  }\n\n  &.fi-date-input--error {\n    & .fi-date-input_input {\n      border: 2px solid ", ";\n    }\n\n    & .fi-date-input_picker-button {\n      border: 2px solid ", ";\n      border-left: 1px solid ", ";\n      border-radius: 0 ", " ", " 0;\n    }\n  }\n\n  &.fi-date-input--success {\n    & .fi-date-input_input {\n      border: 2px solid ", ";\n    }\n\n    & .fi-date-input_picker-button {\n      border: 2px solid ", ";\n      border-left: 1px solid ", ";\n      border-radius: 0 ", " ", " 0;\n    }\n  }\n  &.fi-date-input--disabled {\n    & .fi-date-input_input {\n      color: ", ";\n      background-color: ", ";\n    }\n  }\n\n  &.fi-date-input--has-picker {\n    & .fi-date-input_input {\n      border-right: none;\n      border-radius: ", " 0 0 ", ";\n    }\n  }\n"])), index.font(theme)('bodyText'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), index.fixInternalMargins(), theme.spacing.xs, theme.spacing.xs, theme.spacing.xxs, index.containerIEFocus(theme), theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, index.input(theme), theme.colors.whiteBase, theme.spacing.insetL, theme.colors.depthDark3, theme.radiuses.basic, theme.colors.depthDark2, index.containerIEFocus(theme), theme.focuses.absoluteFocus, theme.spacing.xs, theme.colors.highlightBase, theme.radiuses.basic, theme.focuses.highContrastFocus, theme.colors.highlightBase, theme.colors.depthBase, theme.colors.depthBase, theme.colors.alertBase, theme.colors.alertBase, theme.colors.highlightBase, theme.radiuses.basic, theme.radiuses.basic, theme.colors.successBase, theme.colors.successBase, theme.colors.highlightBase, theme.radiuses.basic, theme.radiuses.basic, theme.colors.depthBase, theme.colors.depthLight3, theme.radiuses.basic, theme.radiuses.basic);
};
var templateObject_1;

exports.baseStyles = baseStyles;
//# sourceMappingURL=DateInput.baseStyles.js.map