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

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  width: 100%;\n  box-shadow: ", ";\n  border-radius: 4px;\n  padding-bottom: 10px;\n\n  @media (forced-colors: active) {\n    border: solid 1px ButtonBorder; /* For high contrast mode */\n  }\n\n  &.fi-notification {\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    & .fi-notification_style-wrapper {\n      padding: 0 10px 10px 40px;\n      display: flex;\n      align-items: flex-start;\n      overflow: hidden;\n    }\n\n    & .fi-notification_icon-wrapper {\n      padding-top: 20px;\n      flex: none;\n      & .fi-notification_icon {\n        height: 24px;\n        width: 24px;\n      }\n    }\n\n    & .fi-notification_text-content-wrapper {\n      padding-top: 20px;\n      padding-left: 20px;\n      flex-grow: 1;\n      & .fi-notification_content {\n        vertical-align: middle;\n        & .fi-notification_contentWrapper {\n          ", "\n        }\n      }\n    }\n    & .fi-notification_heading {\n      ", "\n      margin: 0;\n      margin-bottom: ", ";\n    }\n    & .fi-notification_action-element-wrapper {\n      padding: 20px 26px 19px 84px;\n      & .fi-button {\n        margin: ", " ", " 0 0;\n      }\n      & .fi-button:first-child {\n        margin-top: 0;\n      }\n    }\n\n    & .fi-notification_close-button {\n      height: 40px;\n      padding: 7px ", ";\n      margin: 0;\n      margin-top: 6px;\n      border: 1px solid transparent;\n      white-space: nowrap;\n      color: ", ";\n\n      &:focus-visible {\n        outline: 0;\n        position: relative;\n\n        &:after {\n          ", "\n          ", " /* For high contrast mode */\n        }\n      }\n    }\n\n    /* Status variant styles */\n    &--neutral {\n      border-top: 4px solid ", ";\n      & .fi-notification_icon-wrapper .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &--error {\n      border-top: 4px solid ", ";\n      & .fi-notification_icon-wrapper .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    /** Small screen variant styles */\n    &.fi-notification--small-screen {\n      padding-bottom: 20px;\n      & .fi-notification_text-content-wrapper {\n        padding-top: 15px;\n        padding-left: 12px;\n        padding-right: 12px;\n        display: flex;\n        flex-direction: column;\n      }\n      & .fi-notification_close-button {\n        margin: 3px;\n        padding: 3px;\n\n        & .fi-icon {\n          margin: 0 ", ";\n          font-size: 16px;\n        }\n      }\n      & .fi-notification_style-wrapper {\n        padding: 0;\n      }\n      & .fi-notification_icon-wrapper {\n        padding-top: 17px;\n        padding-left: 17px;\n      }\n      & .fi-notification_action-element-wrapper {\n        padding: 0 15px;\n        & .fi-button {\n          width: 100%;\n          margin-top: ", ";\n          margin-right: 0;\n        }\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  width: 100%;\n  box-shadow: ", ";\n  border-radius: 4px;\n  padding-bottom: 10px;\n\n  @media (forced-colors: active) {\n    border: solid 1px ButtonBorder; /* For high contrast mode */\n  }\n\n  &.fi-notification {\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    & .fi-notification_style-wrapper {\n      padding: 0 10px 10px 40px;\n      display: flex;\n      align-items: flex-start;\n      overflow: hidden;\n    }\n\n    & .fi-notification_icon-wrapper {\n      padding-top: 20px;\n      flex: none;\n      & .fi-notification_icon {\n        height: 24px;\n        width: 24px;\n      }\n    }\n\n    & .fi-notification_text-content-wrapper {\n      padding-top: 20px;\n      padding-left: 20px;\n      flex-grow: 1;\n      & .fi-notification_content {\n        vertical-align: middle;\n        & .fi-notification_contentWrapper {\n          ", "\n        }\n      }\n    }\n    & .fi-notification_heading {\n      ", "\n      margin: 0;\n      margin-bottom: ", ";\n    }\n    & .fi-notification_action-element-wrapper {\n      padding: 20px 26px 19px 84px;\n      & .fi-button {\n        margin: ", " ", " 0 0;\n      }\n      & .fi-button:first-child {\n        margin-top: 0;\n      }\n    }\n\n    & .fi-notification_close-button {\n      height: 40px;\n      padding: 7px ", ";\n      margin: 0;\n      margin-top: 6px;\n      border: 1px solid transparent;\n      white-space: nowrap;\n      color: ", ";\n\n      &:focus-visible {\n        outline: 0;\n        position: relative;\n\n        &:after {\n          ", "\n          ", " /* For high contrast mode */\n        }\n      }\n    }\n\n    /* Status variant styles */\n    &--neutral {\n      border-top: 4px solid ", ";\n      & .fi-notification_icon-wrapper .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &--error {\n      border-top: 4px solid ", ";\n      & .fi-notification_icon-wrapper .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    /** Small screen variant styles */\n    &.fi-notification--small-screen {\n      padding-bottom: 20px;\n      & .fi-notification_text-content-wrapper {\n        padding-top: 15px;\n        padding-left: 12px;\n        padding-right: 12px;\n        display: flex;\n        flex-direction: column;\n      }\n      & .fi-notification_close-button {\n        margin: 3px;\n        padding: 3px;\n\n        & .fi-icon {\n          margin: 0 ", ";\n          font-size: 16px;\n        }\n      }\n      & .fi-notification_style-wrapper {\n        padding: 0;\n      }\n      & .fi-notification_icon-wrapper {\n        padding-top: 17px;\n        padding-left: 17px;\n      }\n      & .fi-notification_action-element-wrapper {\n        padding: 0 15px;\n        & .fi-button {\n          width: 100%;\n          margin-top: ", ";\n          margin-right: 0;\n        }\n      }\n    }\n  }\n"])), element(theme), font(theme)('bodyTextSmall'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), theme.shadows.wideBoxShadow, theme.colors.whiteBase, font(theme)('bodyTextSmall'), font(theme)('bodySemiBold'), theme.spacing.xxs, theme.spacing.xs, theme.spacing.s, theme.spacing.insetL, theme.colors.highlightBase, theme.focuses.absoluteFocus, theme.focuses.highContrastFocus, theme.colors.infoBase, theme.colors.infoBase, theme.colors.alertBase, theme.colors.alertBase, theme.spacing.insetM, theme.spacing.s);
};
var templateObject_1;

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