suomifi-ui-components/dist/esm/core/Alert/Alert.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-alert {\n    ", "\n    ", "\n    ", "\n  ", ";\n    width: 100%;\n\n    & .fi-alert_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n      max-width: 1110px; /** Based on Suomi.fi front page header content width on large screens */\n      margin: auto;\n\n      & .fi-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-alert_close-button {\n        ", "\n        height: 40px;\n        display: inline-block;\n        padding: 7px;\n        margin: 7px ", " ", " 0;\n        border: 1px solid transparent;\n        border-radius: ", ";\n        white-space: nowrap;\n\n        &:focus-visible {\n          position: relative;\n          ", " /* For high contrast mode */\n\n          &:after {\n            ", "\n          }\n        }\n        &:active {\n          background: ", ";\n        }\n        &:hover {\n          border-color: ", ";\n        }\n\n        & .fi-icon {\n          width: 14px;\n          height: 14px;\n          margin-left: ", ";\n          transform: translateY(0.1em);\n\n          .fi-icon-base-fill {\n            fill: currentColor;\n          }\n        }\n      }\n\n      & .fi-alert_text-content-wrapper {\n        display: flex;\n        flex-direction: column;\n        padding: 0 ", ";\n        margin: ", " auto ", " 0;\n\n        & .fi-alert_content {\n          vertical-align: middle;\n          ", "\n        }\n      }\n    }\n    /** Status variant styles */\n    &.fi-alert--neutral {\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--neutral {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    &.fi-alert--error {\n      background-color: ", ";\n      color: ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--error {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    &.fi-alert--warning {\n      background-color: ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--warning {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    /** Small screen variant styles */\n    &.fi-alert--small-screen {\n      & .fi-alert_style-wrapper {\n        width: 100%;\n\n        & .fi-alert_text-content-wrapper {\n          padding: 0 0 0 ", ";\n        }\n\n        & .fi-alert_close-button {\n          margin: 0;\n          & .fi-icon {\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  &.fi-alert {\n    ", "\n    ", "\n    ", "\n  ", ";\n    width: 100%;\n\n    & .fi-alert_style-wrapper {\n      display: flex;\n      align-items: flex-start;\n      max-width: 1110px; /** Based on Suomi.fi front page header content width on large screens */\n      margin: auto;\n\n      & .fi-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-alert_close-button {\n        ", "\n        height: 40px;\n        display: inline-block;\n        padding: 7px;\n        margin: 7px ", " ", " 0;\n        border: 1px solid transparent;\n        border-radius: ", ";\n        white-space: nowrap;\n\n        &:focus-visible {\n          position: relative;\n          ", " /* For high contrast mode */\n\n          &:after {\n            ", "\n          }\n        }\n        &:active {\n          background: ", ";\n        }\n        &:hover {\n          border-color: ", ";\n        }\n\n        & .fi-icon {\n          width: 14px;\n          height: 14px;\n          margin-left: ", ";\n          transform: translateY(0.1em);\n\n          .fi-icon-base-fill {\n            fill: currentColor;\n          }\n        }\n      }\n\n      & .fi-alert_text-content-wrapper {\n        display: flex;\n        flex-direction: column;\n        padding: 0 ", ";\n        margin: ", " auto ", " 0;\n\n        & .fi-alert_content {\n          vertical-align: middle;\n          ", "\n        }\n      }\n    }\n    /** Status variant styles */\n    &.fi-alert--neutral {\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--neutral {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    &.fi-alert--error {\n      background-color: ", ";\n      color: ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--error {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    &.fi-alert--warning {\n      background-color: ", ";\n      & .fi-alert_style-wrapper {\n        & .fi-alert_icon--warning {\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n      }\n    }\n\n    /** Small screen variant styles */\n    &.fi-alert--small-screen {\n      & .fi-alert_style-wrapper {\n        width: 100%;\n\n        & .fi-alert_text-content-wrapper {\n          padding: 0 0 0 ", ";\n        }\n\n        & .fi-alert_close-button {\n          margin: 0;\n          & .fi-icon {\n            margin-right: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), element(theme), font(theme)('bodyTextSmall'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), theme.spacing.m, theme.spacing.insetXl, font(theme)('bodyTextSmall'), theme.spacing.xs, theme.spacing.insetM, theme.radiuses.basic, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.gradients.whiteBaseToDepthLight1, theme.colors.blackBase, theme.spacing.xxs, theme.spacing.m, theme.spacing.s, theme.spacing.s, font(theme)('bodyTextSmall'), theme.colors.infoLight1, transparentize(0.8, theme.colors.infoBase), theme.colors.blackBase, theme.colors.alertBase, theme.colors.whiteBase, theme.colors.whiteBase, theme.colors.warningBase, theme.colors.blackBase, theme.spacing.xs, theme.spacing.xxs);
};
var templateObject_1;

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