suomifi-ui-components/dist/cjs/core/Pagination/PageInput/PageInput.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 baseStyles = function baseStyles(theme) {
  return styledComponents.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n\n  & .fi-page-input {\n    &_wrapper {\n      width: 100%;\n      min-width: 105px;\n      display: inline-block;\n\n      & .fi-page-input_label--visible {\n        margin-bottom: ", ";\n      }\n\n      & .fi-page-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        ", " /* For hight contrast mode */\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      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      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  &.fi-page-input--error {\n    & .fi-page-input_input-element-container {\n      border: 1px solid ", ";\n      border-right: 0;\n    }\n    & .fi-page-input_button {\n      border: 1px solid ", ";\n      border-left: 0;\n    }\n  }\n\n  &.fi-page-input--not-empty {\n    & .fi-page-input_input-element-container {\n      width: calc(100% - 40px);\n      border-radius: ", " 0 0 ", ";\n      border-right: 0;\n    }\n\n    & .fi-page-input_button {\n      cursor: pointer;\n      pointer-events: all;\n      background: ", ";\n\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n\n      &:focus {\n        &:after {\n          ", "\n          ", " /* For hight contrast mode */\n        }\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-page-input_button-icon .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n  }\n"], ["\n  ", "\n\n  & .fi-page-input {\n    &_wrapper {\n      width: 100%;\n      min-width: 105px;\n      display: inline-block;\n\n      & .fi-page-input_label--visible {\n        margin-bottom: ", ";\n      }\n\n      & .fi-page-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        ", " /* For hight contrast mode */\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      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      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  &.fi-page-input--error {\n    & .fi-page-input_input-element-container {\n      border: 1px solid ", ";\n      border-right: 0;\n    }\n    & .fi-page-input_button {\n      border: 1px solid ", ";\n      border-left: 0;\n    }\n  }\n\n  &.fi-page-input--not-empty {\n    & .fi-page-input_input-element-container {\n      width: calc(100% - 40px);\n      border-radius: ", " 0 0 ", ";\n      border-right: 0;\n    }\n\n    & .fi-page-input_button {\n      cursor: pointer;\n      pointer-events: all;\n      background: ", ";\n\n      @media (forced-colors: active) {\n        border: solid 1px ButtonBorder;\n      }\n\n      &:focus {\n        &:after {\n          ", "\n          ", " /* For hight contrast mode */\n        }\n      }\n      &:hover {\n        background: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n      & .fi-page-input_button-icon .fi-icon-base-fill {\n        fill: ", ";\n\n        @media (forced-colors: active) {\n          fill: ButtonText;\n        }\n      }\n    }\n  }\n"])), index.font(theme)('bodyText'), theme.spacing.xs, theme.spacing.xxs, theme.colors.whiteBase, theme.colors.blackBase, index.containerIEFocus(theme), theme.shadows.actionElementBoxShadow, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.depthDark3, theme.radiuses.basic, index.input(theme), theme.spacing.insetS, theme.spacing.insetS, theme.colors.depthDark2, 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;

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