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

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styled = 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 styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  width: 290px;\n\n  & .fi-search-input {\n    &_wrapper {\n      width: 100%;\n      display: inline-block;\n\n      & .fi-search-input_label--visible {\n        margin-bottom: ", ";\n      }\n\n      & .fi-search-input_statusText--has-content {\n        margin-top: ", ";\n      }\n    }\n\n    &_functionality-container {\n      position: relative;\n      display: flex;\n      width: 100%;\n\n      &:has(.fi-search-input_input:focus) {\n        box-shadow: ", ";\n        ", "\n        &:after {\n          ", "\n          top: -3px;\n          bottom: -3px;\n          right: -3px;\n          left: -3px;\n        }\n        .fi-search-input_input:focus {\n          outline: none;\n        }\n      }\n    }\n\n    &_input-element-container {\n      background-color: ", ";\n      color: ", ";\n      ", "\n      height: 40px;\n      width: 100%;\n      box-sizing: border-box;\n      border: 1px solid ", ";\n      border-radius: ", " 0 0 ", ";\n\n      & .fi-search-input_search-icon {\n        position: absolute;\n        width: 18px;\n        height: 18px;\n        top: ", ";\n        right: ", ";\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &_input {\n      ", "\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      border: 0;\n      flex-grow: 3;\n      min-width: 105px;\n      width: 100%;\n      min-height: 36px;\n      margin-top: 1px;\n      margin-bottom: 1px;\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      &::-webkit-search-decoration,\n      &::-webkit-search-cancel-button,\n      &::-webkit-search-results-button,\n      &::-webkit-search-results-decoration {\n        display: none;\n      }\n      appearance: none;\n    }\n\n    &_button {\n      flex: 0 0 auto;\n      box-sizing: border-box;\n      outline: none;\n      box-shadow: none;\n      white-space: nowrap;\n      cursor: default;\n      /* Support for high contrast mode */\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n\n      &-clear {\n        position: absolute;\n        top: 0;\n        right: 0px;\n        clip: rect(0 0 0 0);\n        height: 1px;\n        width: 1px;\n        margin: -1px;\n        padding: 0;\n        border: 0;\n        overflow: hidden;\n\n        &:focus {\n          ", "\n        }\n        &-icon {\n          width: 12px;\n          height: 12px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n      &-search {\n        border-radius: 0 ", " ", " 0;\n        border: 0;\n        &-icon {\n          width: 18px;\n          height: 18px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n\n  &.fi-search-input--no-search-button\n    .fi-search-input_functionality-container:has(.fi-search-input_search-icon) {\n    & .fi-search-input_input {\n      padding-right: 68px;\n    }\n    & .fi-search-input_input-element-container {\n      border-radius: ", ";\n    }\n  }\n\n  &.fi-search-input--full-width {\n    width: 100%;\n    max-width: none;\n    & .fi-search-input_wrapper {\n      max-width: none;\n    }\n    & .fi-search-input_input-element-container {\n      max-width: none;\n    }\n  }\n\n  &.fi-search-input--error {\n    & .fi-search-input_input-element-container {\n      border: 1px solid ", ";\n      border-right: 0;\n    }\n    & .fi-search-input_button-search {\n      border: 1px solid ", ";\n      border-left: 0;\n    }\n  }\n\n  &.fi-search-input--not-empty {\n    & .fi-search-input_input-element-container {\n      position: relative;\n    }\n\n    & .fi-search-input_input {\n      padding-right: 38px;\n    }\n\n    & .fi-search-input_button-clear {\n      clip: auto;\n      overflow: visible;\n      height: 20px;\n      width: 20px;\n      margin: 9px;\n      &:hover {\n        background: ", ";\n      }\n\n      & .fi-icon-base-fill {\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n\n    &\n      .fi-search-input_functionality-container:has(.fi-search-input_search-icon)\n      .fi-search-input_button-clear {\n      right: 32px;\n    }\n  }\n\n  &.fi-search-input--suggestions-open {\n    &\n      .fi-search-input_functionality-container[data-floating-ui-placement^='top']\n      > * {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top: 0;\n      border-bottom: 1px solid ", ";\n    }\n\n    & .fi-search-input_functionality-container > * {\n      border-bottom: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    .fi-search-input--error {\n      & .fi-search-input_functionality-container > * {\n        &[data-floating-ui-placement^='top'] {\n          border-bottom: 2px solid ", ";\n        }\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  width: 290px;\n\n  & .fi-search-input {\n    &_wrapper {\n      width: 100%;\n      display: inline-block;\n\n      & .fi-search-input_label--visible {\n        margin-bottom: ", ";\n      }\n\n      & .fi-search-input_statusText--has-content {\n        margin-top: ", ";\n      }\n    }\n\n    &_functionality-container {\n      position: relative;\n      display: flex;\n      width: 100%;\n\n      &:has(.fi-search-input_input:focus) {\n        box-shadow: ", ";\n        ", "\n        &:after {\n          ", "\n          top: -3px;\n          bottom: -3px;\n          right: -3px;\n          left: -3px;\n        }\n        .fi-search-input_input:focus {\n          outline: none;\n        }\n      }\n    }\n\n    &_input-element-container {\n      background-color: ", ";\n      color: ", ";\n      ", "\n      height: 40px;\n      width: 100%;\n      box-sizing: border-box;\n      border: 1px solid ", ";\n      border-radius: ", " 0 0 ", ";\n\n      & .fi-search-input_search-icon {\n        position: absolute;\n        width: 18px;\n        height: 18px;\n        top: ", ";\n        right: ", ";\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &_input {\n      ", "\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      border: 0;\n      flex-grow: 3;\n      min-width: 105px;\n      width: 100%;\n      min-height: 36px;\n      margin-top: 1px;\n      margin-bottom: 1px;\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      &::-webkit-search-decoration,\n      &::-webkit-search-cancel-button,\n      &::-webkit-search-results-button,\n      &::-webkit-search-results-decoration {\n        display: none;\n      }\n      appearance: none;\n    }\n\n    &_button {\n      flex: 0 0 auto;\n      box-sizing: border-box;\n      outline: none;\n      box-shadow: none;\n      white-space: nowrap;\n      cursor: default;\n      /* Support for high contrast mode */\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n\n      &-clear {\n        position: absolute;\n        top: 0;\n        right: 0px;\n        clip: rect(0 0 0 0);\n        height: 1px;\n        width: 1px;\n        margin: -1px;\n        padding: 0;\n        border: 0;\n        overflow: hidden;\n\n        &:focus {\n          ", "\n        }\n        &-icon {\n          width: 12px;\n          height: 12px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n      &-search {\n        border-radius: 0 ", " ", " 0;\n        border: 0;\n        &-icon {\n          width: 18px;\n          height: 18px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n\n  &.fi-search-input--no-search-button\n    .fi-search-input_functionality-container:has(.fi-search-input_search-icon) {\n    & .fi-search-input_input {\n      padding-right: 68px;\n    }\n    & .fi-search-input_input-element-container {\n      border-radius: ", ";\n    }\n  }\n\n  &.fi-search-input--full-width {\n    width: 100%;\n    max-width: none;\n    & .fi-search-input_wrapper {\n      max-width: none;\n    }\n    & .fi-search-input_input-element-container {\n      max-width: none;\n    }\n  }\n\n  &.fi-search-input--error {\n    & .fi-search-input_input-element-container {\n      border: 1px solid ", ";\n      border-right: 0;\n    }\n    & .fi-search-input_button-search {\n      border: 1px solid ", ";\n      border-left: 0;\n    }\n  }\n\n  &.fi-search-input--not-empty {\n    & .fi-search-input_input-element-container {\n      position: relative;\n    }\n\n    & .fi-search-input_input {\n      padding-right: 38px;\n    }\n\n    & .fi-search-input_button-clear {\n      clip: auto;\n      overflow: visible;\n      height: 20px;\n      width: 20px;\n      margin: 9px;\n      &:hover {\n        background: ", ";\n      }\n\n      & .fi-icon-base-fill {\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n\n    &\n      .fi-search-input_functionality-container:has(.fi-search-input_search-icon)\n      .fi-search-input_button-clear {\n      right: 32px;\n    }\n  }\n\n  &.fi-search-input--suggestions-open {\n    &\n      .fi-search-input_functionality-container[data-floating-ui-placement^='top']\n      > * {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: ", ";\n      border-bottom-right-radius: ", ";\n      border-top: 0;\n      border-bottom: 1px solid ", ";\n    }\n\n    & .fi-search-input_functionality-container > * {\n      border-bottom: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    .fi-search-input--error {\n      & .fi-search-input_functionality-container > * {\n        &[data-floating-ui-placement^='top'] {\n          border-bottom: 2px solid ", ";\n        }\n      }\n    }\n  }\n"])), index.font(theme)('bodyText'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), index.fixInternalMargins(), theme.spacing.xs, theme.spacing.xxs, theme.shadows.actionElementBoxShadow, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.whiteBase, theme.colors.blackBase, index.containerIEFocus(theme), theme.colors.depthDark3, theme.radiuses.basic, theme.radiuses.basic, theme.spacing.insetL, theme.spacing.insetL, theme.colors.depthDark1, index.input(theme), theme.spacing.insetS, theme.spacing.insetS, theme.spacing.insetL, theme.colors.depthDark2, theme.gradients.highlightLight1ToHighlightBase, theme.colors.highlightDark1, theme.colors.whiteBase, theme.focuses.highContrastFocus, theme.colors.highlightDark1, theme.radiuses.basic, theme.radiuses.basic, theme.colors.depthDark1, theme.radiuses.basic, theme.colors.alertBase, theme.colors.alertBase, theme.colors.highlightLight3, theme.radiuses.basic, theme.radiuses.basic, theme.colors.depthDark3, theme.colors.alertBase);
};
var templateObject_1;

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