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

var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  border-top: 4px solid ", ";\n  width: 100%;\n  box-shadow: ", ";\n  border-radius: 4px;\n  &.fi-toast {\n    background-color: ", ";\n    & .fi-toast-wrapper {\n      padding: 20px 15px;\n      display: flex;\n      align-items: flex-start;\n      & .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n      & .fi-toast-content-wrapper {\n        vertical-align: middle;\n        ", "\n        flex-grow: 1;\n      }\n      & .fi-toast-heading {\n        ", "\n        margin-top: -1px;\n        padding-bottom: ", ";\n      }\n      & .fi-toast_icon-wrapper {\n        flex: 0;\n        padding-right: ", ";\n        & .fi-toast_icon {\n          height: 24px;\n          width: 24px;\n        }\n      }\n      & .fi-toast_close-button {\n        height: 40px;\n        padding: 3px 6px 3px 6px;\n        margin-right: -15px;\n        margin-top: -20px;\n        border: 1px solid transparent;\n        color: ", ";\n\n        & .fi-icon {\n          margin: 0 ", ";\n          font-size: 16px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n\n        &:focus-visible {\n          outline: 0;\n          position: relative;\n\n          &:after {\n            ", "\n            ", " /* For high contrast mode */\n          }\n        }\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  border-top: 4px solid ", ";\n  width: 100%;\n  box-shadow: ", ";\n  border-radius: 4px;\n  &.fi-toast {\n    background-color: ", ";\n    & .fi-toast-wrapper {\n      padding: 20px 15px;\n      display: flex;\n      align-items: flex-start;\n      & .fi-icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n      & .fi-toast-content-wrapper {\n        vertical-align: middle;\n        ", "\n        flex-grow: 1;\n      }\n      & .fi-toast-heading {\n        ", "\n        margin-top: -1px;\n        padding-bottom: ", ";\n      }\n      & .fi-toast_icon-wrapper {\n        flex: 0;\n        padding-right: ", ";\n        & .fi-toast_icon {\n          height: 24px;\n          width: 24px;\n        }\n      }\n      & .fi-toast_close-button {\n        height: 40px;\n        padding: 3px 6px 3px 6px;\n        margin-right: -15px;\n        margin-top: -20px;\n        border: 1px solid transparent;\n        color: ", ";\n\n        & .fi-icon {\n          margin: 0 ", ";\n          font-size: 16px;\n          & .fi-icon-base-fill {\n            fill: ", ";\n          }\n        }\n\n        &:focus-visible {\n          outline: 0;\n          position: relative;\n\n          &:after {\n            ", "\n            ", " /* For high contrast mode */\n          }\n        }\n      }\n    }\n  }\n"])), index.element(theme), index.font(theme)('bodyTextSmall'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), theme.colors.successBase, theme.shadows.wideBoxShadow, theme.colors.whiteBase, theme.colors.successBase, index.font(theme)('bodyTextSmall'), index.font(theme)('bodySemiBold'), theme.spacing.xxs, theme.spacing.xs, theme.colors.highlightBase, theme.spacing.xxs, theme.colors.highlightBase, theme.focuses.absoluteFocus, theme.focuses.highContrastFocus);
};
var templateObject_1;

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