suomifi-ui-components/dist/cjs/core/InlineAlert/InlineAlert.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 spacing = require('../theme/utils/spacing.js');

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

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