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

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { font, fixInternalMargins, containerIEFocus, input } from '../../theme/reset/index.js';
import { buildSpacingCSS } from '../../theme/utils/spacing.js';

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __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"])), font(theme)('bodyText'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), fixInternalMargins(), theme.spacing.xs, theme.spacing.xs, theme.spacing.xxs, containerIEFocus(theme), theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, input(theme), theme.colors.whiteBase, theme.spacing.insetL, theme.colors.depthDark3, theme.radiuses.basic, theme.colors.depthDark2, 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;

export { baseStyles };
//# sourceMappingURL=DateInput.baseStyles.js.map