suomifi-ui-components/dist/esm/core/Form/SearchInput/SearchInput.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  ", "\n  ", "\n  ", "\n  width: 290px;\n\n  & .fi-search-input {\n    &_wrapper {\n      width: 100%;\n      min-width: 105px;\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    }\n\n    &_input-element-container {\n      background-color: ", ";\n      color: ", ";\n      ", "\n\n      &:focus-within {\n        position: relative;\n        box-shadow: ", ";\n        ", "\n        &:after {\n          ", "\n          top: -3px;\n          bottom: -3px;\n          right: -3px;\n          left: -3px;\n        }\n        > input:focus {\n          outline: none;\n        }\n      }\n      width: 100%;\n      height: 40px;\n      box-sizing: border-box;\n      border: 1px solid ", ";\n      border-radius: ", ";\n    }\n\n    &_input {\n      ", "\n      padding-top: ", ";\n      padding-bottom: ", ";\n      width: calc(100% - 24px);\n      min-width: 65px;\n      border: 0;\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      position: absolute;\n      top: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      box-sizing: border-box;\n      outline: none;\n      box-shadow: none;\n      cursor: default;\n      pointer-events: none;\n      &-clear {\n        right: 40px;\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\n      &-search {\n        right: 0px;\n        height: 40px;\n        width: 40px;\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--full-width {\n    width: 100%;\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      width: calc(100% - 40px);\n      border-radius: ", " 0 0 ", ";\n      border-right: 0;\n    }\n\n    & .fi-search-input_button {\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    & .fi-search-input_button-clear {\n      clip: auto;\n      overflow: visible;\n      height: 20px;\n      width: 20px;\n      margin: 10px;\n\n      & .fi-icon-base-fill {\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n\n    & .fi-search-input_button-search {\n      background: ", ";\n\n      /* Support for high contrast mode */\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n\n      &:focus {\n        &:after {\n          ", "\n        }\n\n        ", "/* For high contrast mode */\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-search-input_button-search-icon .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  width: 290px;\n\n  & .fi-search-input {\n    &_wrapper {\n      width: 100%;\n      min-width: 105px;\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    }\n\n    &_input-element-container {\n      background-color: ", ";\n      color: ", ";\n      ", "\n\n      &:focus-within {\n        position: relative;\n        box-shadow: ", ";\n        ", "\n        &:after {\n          ", "\n          top: -3px;\n          bottom: -3px;\n          right: -3px;\n          left: -3px;\n        }\n        > input:focus {\n          outline: none;\n        }\n      }\n      width: 100%;\n      height: 40px;\n      box-sizing: border-box;\n      border: 1px solid ", ";\n      border-radius: ", ";\n    }\n\n    &_input {\n      ", "\n      padding-top: ", ";\n      padding-bottom: ", ";\n      width: calc(100% - 24px);\n      min-width: 65px;\n      border: 0;\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      position: absolute;\n      top: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      box-sizing: border-box;\n      outline: none;\n      box-shadow: none;\n      cursor: default;\n      pointer-events: none;\n      &-clear {\n        right: 40px;\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\n      &-search {\n        right: 0px;\n        height: 40px;\n        width: 40px;\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--full-width {\n    width: 100%;\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      width: calc(100% - 40px);\n      border-radius: ", " 0 0 ", ";\n      border-right: 0;\n    }\n\n    & .fi-search-input_button {\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    & .fi-search-input_button-clear {\n      clip: auto;\n      overflow: visible;\n      height: 20px;\n      width: 20px;\n      margin: 10px;\n\n      & .fi-icon-base-fill {\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n\n    & .fi-search-input_button-search {\n      background: ", ";\n\n      /* Support for high contrast mode */\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n\n      &:focus {\n        &:after {\n          ", "\n        }\n\n        ", "/* For high contrast mode */\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-search-input_button-search-icon .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n  }\n"])), font(theme)('bodyText'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), fixInternalMargins(), theme.spacing.xs, theme.spacing.xxs, theme.colors.whiteBase, theme.colors.blackBase, containerIEFocus(theme), theme.shadows.actionElementBoxShadow, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.depthDark3, theme.radiuses.basic, input(theme), theme.spacing.insetS, theme.spacing.insetS, theme.colors.depthDark2, theme.focuses.highContrastFocus, theme.colors.highlightDark1, theme.radiuses.basic, theme.radiuses.basic, theme.colors.depthDark1, theme.colors.alertBase, theme.colors.alertBase, theme.radiuses.basic, theme.radiuses.basic, theme.gradients.highlightBaseToHighlightDark1, theme.focuses.absoluteFocus, theme.focuses.highContrastFocus, theme.gradients.highlightLight1ToHighlightBase, theme.colors.highlightDark1, theme.colors.whiteBase);
};
var templateObject_1;

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