suomifi-ui-components/dist/esm/core/InlineAlert/InlineAlert.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';
import { buildSpacingCSS } from '../theme/utils/spacing.js';

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.fi-inline-alert {\n    ", "\n    ", "\n    ", "\n  ", "\n    width: 100%;\n    padding: 5px 0px 4px 0px;\n    border: 1px solid;\n\n    & .fi-inline-alert_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n    }\n\n    & .fi-inline-alert_icon {\n      margin-left: ", ";\n      margin-top: ", ";\n      min-height: 24px;\n      min-width: 24px;\n      height: 24px;\n      width: 24px;\n    }\n\n    & .fi-inline-alert_text-content-wrapper {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      padding: 0 ", ";\n      margin: ", " 0;\n\n      & .fi-inline-alert_label {\n        ", "\n        margin-bottom: ", ";\n      }\n\n      & .fi-inline-alert_content {\n        ", "\n        vertical-align: middle;\n      }\n    }\n\n    &.fi-inline-alert--neutral {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_text-content-wrapper {\n        padding-left: ", ";\n      }\n    }\n\n    &.fi-inline-alert--error {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_icon--error {\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &.fi-inline-alert--warning {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_icon--warning {\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &.fi-inline-alert--small-screen {\n      & .fi-inline-alert_icon {\n        margin-left: ", ";\n      }\n      & .fi-inline-alert_text-content-wrapper {\n        padding: 0 ", " 0 ", ";\n      }\n    }\n  }\n"], ["\n  &.fi-inline-alert {\n    ", "\n    ", "\n    ", "\n  ", "\n    width: 100%;\n    padding: 5px 0px 4px 0px;\n    border: 1px solid;\n\n    & .fi-inline-alert_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n    }\n\n    & .fi-inline-alert_icon {\n      margin-left: ", ";\n      margin-top: ", ";\n      min-height: 24px;\n      min-width: 24px;\n      height: 24px;\n      width: 24px;\n    }\n\n    & .fi-inline-alert_text-content-wrapper {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      padding: 0 ", ";\n      margin: ", " 0;\n\n      & .fi-inline-alert_label {\n        ", "\n        margin-bottom: ", ";\n      }\n\n      & .fi-inline-alert_content {\n        ", "\n        vertical-align: middle;\n      }\n    }\n\n    &.fi-inline-alert--neutral {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_text-content-wrapper {\n        padding-left: ", ";\n      }\n    }\n\n    &.fi-inline-alert--error {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_icon--error {\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &.fi-inline-alert--warning {\n      background-color: ", ";\n      border-color: ", ";\n      border-left: 4px solid ", ";\n\n      & .fi-inline-alert_icon--warning {\n        & .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n\n    &.fi-inline-alert--small-screen {\n      & .fi-inline-alert_icon {\n        margin-left: ", ";\n      }\n      & .fi-inline-alert_text-content-wrapper {\n        padding: 0 ", " 0 ", ";\n      }\n    }\n  }\n"])), element(theme), font(theme)('bodyTextSmall'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), theme.spacing.m, theme.spacing.insetXl, theme.spacing.s, theme.spacing.s, font(theme)('bodySemiBold'), theme.spacing.xxs, font(theme)('bodyTextSmall'), theme.colors.infoLight1, transparentize(0.8, theme.colors.infoBase), theme.colors.infoBase, theme.spacing.m, theme.colors.alertLight1, transparentize(0.8, theme.colors.alertBase), theme.colors.alertBase, theme.colors.blackBase, theme.colors.warningLight1, transparentize(0.8, theme.colors.warningBase), theme.colors.warningBase, theme.colors.blackBase, theme.spacing.s, theme.spacing.xs, theme.spacing.xs);
};
var templateObject_1;

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