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

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { element, font } from '../../theme/reset/index.js';
import { transparentize } from 'polished';

var baseStyles = function baseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.fi-error-summary {\n    ", "\n    ", "\n    width: 100%;\n    padding: 5px 0px 4px 0px;\n    border: 1px solid;\n\n    background-color: ", ";\n    border-color: ", ";\n    border-left: 4px solid ", ";\n\n    & .fi-error-summary_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n    }\n\n    & .fi-error-summary_icon {\n      margin-left: ", ";\n      margin-top: ", ";\n      min-height: 24px;\n      min-width: 24px;\n      height: 24px;\n      width: 24px;\n\n      & .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n\n    & .fi-error-summary_text-content-wrapper {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      padding: 0 ", ";\n      margin: ", " 0;\n\n      & .fi-error-summary_heading {\n        ", "\n        margin-bottom: ", ";\n\n        position: relative;\n        display: inline-block;\n        max-width: 100%;\n        &:focus {\n          outline: 0;\n          &:after {\n            ", "\n          }\n        }\n      }\n\n      & .fi-error-summary_content {\n        ", "\n        vertical-align: middle;\n\n        ul {\n          margin: 0;\n          padding: 0;\n        }\n      }\n    }\n\n    &.fi-error-summary--small-screen {\n      & .fi-error-summary_icon {\n        margin-left: ", ";\n      }\n      & .fi-error-summary_text-content-wrapper {\n        padding: 0 ", " 0 ", ";\n      }\n    }\n  }\n"], ["\n  &.fi-error-summary {\n    ", "\n    ", "\n    width: 100%;\n    padding: 5px 0px 4px 0px;\n    border: 1px solid;\n\n    background-color: ", ";\n    border-color: ", ";\n    border-left: 4px solid ", ";\n\n    & .fi-error-summary_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n    }\n\n    & .fi-error-summary_icon {\n      margin-left: ", ";\n      margin-top: ", ";\n      min-height: 24px;\n      min-width: 24px;\n      height: 24px;\n      width: 24px;\n\n      & .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n\n    & .fi-error-summary_text-content-wrapper {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      padding: 0 ", ";\n      margin: ", " 0;\n\n      & .fi-error-summary_heading {\n        ", "\n        margin-bottom: ", ";\n\n        position: relative;\n        display: inline-block;\n        max-width: 100%;\n        &:focus {\n          outline: 0;\n          &:after {\n            ", "\n          }\n        }\n      }\n\n      & .fi-error-summary_content {\n        ", "\n        vertical-align: middle;\n\n        ul {\n          margin: 0;\n          padding: 0;\n        }\n      }\n    }\n\n    &.fi-error-summary--small-screen {\n      & .fi-error-summary_icon {\n        margin-left: ", ";\n      }\n      & .fi-error-summary_text-content-wrapper {\n        padding: 0 ", " 0 ", ";\n      }\n    }\n  }\n"])), element(theme), font(theme)('bodyTextSmall'), theme.colors.alertLight1, transparentize(0.8, theme.colors.alertBase), theme.colors.alertBase, theme.spacing.m, theme.spacing.insetXl, theme.colors.alertBase, theme.spacing.s, theme.spacing.s, font(theme)('bodySemiBold'), theme.spacing.xxs, theme.focuses.absoluteFocus, font(theme)('bodyTextSmall'), theme.spacing.s, theme.spacing.xs, theme.spacing.xs);
};
var templateObject_1;

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