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

Suomi.fi UI component library

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

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 290px;\n  ", "\n  ", "\n  line-height: 0;\n  ", "\n\n  & .fi-text-input_character-counter {\n    ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n    flex: none;\n    margin-top: ", ";\n\n    &.fi-text-input_character-counter--error {\n      color: ", ";\n      ", ";\n      font-size: 14px;\n      line-height: 20px;\n    }\n  }\n\n  & .fi-text-input_bottom-wrapper {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  & .fi-text-input_wrapper {\n    width: 100%;\n    display: inline-block;\n\n    & .fi-text-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-text-input_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  & .fi-text-input_input-element-container {\n    ", "\n\n    &:focus-within {\n      position: relative;\n      ", "\n\n      &::after {\n        ", "\n      }\n    }\n  }\n\n  &.fi-text-input--full-width {\n    width: 100%;\n  }\n\n  & .fi-text-input_input {\n    ", "\n    background-color: ", ";\n    min-width: 40px;\n    width: 100%;\n    min-height: 40px;\n    padding-left: ", ";\n    border-color: ", ";\n\n    &::placeholder {\n      font-style: italic;\n      color: ", ";\n      opacity: 1;\n    }\n    &::-ms-clear {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n  }\n\n  &.fi-text-input_with-icon {\n    & .fi-text-input_input-element-container {\n      position: relative;\n    }\n\n    & .fi-text-input_input {\n      padding-right: ", ";\n    }\n\n    & .fi-icon {\n      position: absolute;\n      width: 18px;\n      height: 18px;\n      top: ", ";\n      right: ", ";\n    }\n  }\n\n  &.fi-text-input--error {\n    & .fi-text-input_input {\n      border: 2px solid ", ";\n      padding-left: 9px;\n      padding-top: 7px;\n      padding-bottom: 7px;\n    }\n  }\n  &.fi-text-input--success {\n    & .fi-text-input_input {\n      border: 2px solid ", ";\n      padding-left: 9px;\n      padding-top: 7px;\n      padding-bottom: 7px;\n    }\n  }\n  &.fi-text-input--disabled {\n    & .fi-text-input_input {\n      color: ", ";\n      background-color: ", ";\n    }\n    & .fi-icon-base-fill {\n      fill: ", ";\n    }\n  }\n"], ["\n  width: 290px;\n  ", "\n  ", "\n  line-height: 0;\n  ", "\n\n  & .fi-text-input_character-counter {\n    ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 20px;\n    flex: none;\n    margin-top: ", ";\n\n    &.fi-text-input_character-counter--error {\n      color: ", ";\n      ", ";\n      font-size: 14px;\n      line-height: 20px;\n    }\n  }\n\n  & .fi-text-input_bottom-wrapper {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  & .fi-text-input_wrapper {\n    width: 100%;\n    display: inline-block;\n\n    & .fi-text-input_label--visible {\n      margin-bottom: ", ";\n    }\n\n    & .fi-hint-text {\n      margin-bottom: ", ";\n    }\n\n    & .fi-text-input_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  & .fi-text-input_input-element-container {\n    ", "\n\n    &:focus-within {\n      position: relative;\n      ", "\n\n      &::after {\n        ", "\n      }\n    }\n  }\n\n  &.fi-text-input--full-width {\n    width: 100%;\n  }\n\n  & .fi-text-input_input {\n    ", "\n    background-color: ", ";\n    min-width: 40px;\n    width: 100%;\n    min-height: 40px;\n    padding-left: ", ";\n    border-color: ", ";\n\n    &::placeholder {\n      font-style: italic;\n      color: ", ";\n      opacity: 1;\n    }\n    &::-ms-clear {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n    &::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n  }\n\n  &.fi-text-input_with-icon {\n    & .fi-text-input_input-element-container {\n      position: relative;\n    }\n\n    & .fi-text-input_input {\n      padding-right: ", ";\n    }\n\n    & .fi-icon {\n      position: absolute;\n      width: 18px;\n      height: 18px;\n      top: ", ";\n      right: ", ";\n    }\n  }\n\n  &.fi-text-input--error {\n    & .fi-text-input_input {\n      border: 2px solid ", ";\n      padding-left: 9px;\n      padding-top: 7px;\n      padding-bottom: 7px;\n    }\n  }\n  &.fi-text-input--success {\n    & .fi-text-input_input {\n      border: 2px solid ", ";\n      padding-left: 9px;\n      padding-top: 7px;\n      padding-bottom: 7px;\n    }\n  }\n  &.fi-text-input--disabled {\n    & .fi-text-input_input {\n      color: ", ";\n      background-color: ", ";\n    }\n    & .fi-icon-base-fill {\n      fill: ", ";\n    }\n  }\n"])), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), fixInternalMargins(), font(theme)('bodyTextSmall'), theme.colors.blackBase, theme.spacing.xxs, theme.colors.alertBase, font(theme)('bodySemiBoldSmall'), 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.colors.depthDark2, math("".concat(theme.spacing.insetXl, " * 2 + ").concat(theme.spacing.insetM)), theme.spacing.insetL, theme.spacing.insetL, theme.colors.alertBase, theme.colors.successBase, theme.colors.depthBase, theme.colors.depthLight3, theme.colors.depthBase);
};
var templateObject_1;

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