suomifi-ui-components/dist/cjs/core/Form/ErrorSummary/ErrorSummary.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 polished = require('polished');

var baseStyles = function baseStyles(theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__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"])), index.element(theme), index.font(theme)('bodyTextSmall'), theme.colors.alertLight1, polished.transparentize(0.8, theme.colors.alertBase), theme.colors.alertBase, theme.spacing.m, theme.spacing.insetXl, theme.colors.alertBase, theme.spacing.s, theme.spacing.s, index.font(theme)('bodySemiBold'), theme.spacing.xxs, theme.focuses.absoluteFocus, index.font(theme)('bodyTextSmall'), theme.spacing.s, theme.spacing.xs, theme.spacing.xs);
};
var templateObject_1;

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