suomifi-ui-components/dist/esm/core/LoadingSpinner/LoadingSpinner.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  line-height: 1;\n  &.fi-loadingSpinner {\n    display: block;\n    text-align: center;\n    & .fi-loadingSpinner_icon {\n      display: inline-block;\n      width: 40px;\n      height: 40px;\n    }\n    & .fi-loadingSpinner_text {\n      font-size: 18px;\n      font-weight: 600;\n      text-align: center;\n      margin-top: 6px;\n    }\n    &.fi-loadingSpinner-textAlign--right {\n      display: flex;\n      align-items: center;\n\n      & .fi-loadingSpinner_text {\n        margin-left: 10px;\n        margin-top: 0;\n        line-height: 1.5em;\n      }\n    }\n    &.fi-loadingSpinner--small {\n      .fi-loadingSpinner_icon {\n        width: 24px;\n        height: 24px;\n      }\n      & .fi-loadingSpinner_text {\n        font-size: 16px;\n        font-weight: normal;\n        margin-top: 0;\n      }\n    }\n    &.fi-loadingSpinner--loading {\n      & .fi-loadingSpinner_icon {\n        animation: rotation 1.5s infinite linear;\n      }\n    }\n    &.fi-loadingSpinner--success {\n      .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &.fi-loadingSpinner--failed {\n      .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n  }\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  }\n  @media (prefers-reduced-motion) {\n    &.fi-loadingSpinner.fi-loadingSpinner--loading {\n      .fi-loadingSpinner_icon {\n        animation: rotation 10s infinite linear;\n      }\n    }\n  }\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  line-height: 1;\n  &.fi-loadingSpinner {\n    display: block;\n    text-align: center;\n    & .fi-loadingSpinner_icon {\n      display: inline-block;\n      width: 40px;\n      height: 40px;\n    }\n    & .fi-loadingSpinner_text {\n      font-size: 18px;\n      font-weight: 600;\n      text-align: center;\n      margin-top: 6px;\n    }\n    &.fi-loadingSpinner-textAlign--right {\n      display: flex;\n      align-items: center;\n\n      & .fi-loadingSpinner_text {\n        margin-left: 10px;\n        margin-top: 0;\n        line-height: 1.5em;\n      }\n    }\n    &.fi-loadingSpinner--small {\n      .fi-loadingSpinner_icon {\n        width: 24px;\n        height: 24px;\n      }\n      & .fi-loadingSpinner_text {\n        font-size: 16px;\n        font-weight: normal;\n        margin-top: 0;\n      }\n    }\n    &.fi-loadingSpinner--loading {\n      & .fi-loadingSpinner_icon {\n        animation: rotation 1.5s infinite linear;\n      }\n    }\n    &.fi-loadingSpinner--success {\n      .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &.fi-loadingSpinner--failed {\n      .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n  }\n  @keyframes rotation {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(359deg);\n    }\n  }\n  @media (prefers-reduced-motion) {\n    &.fi-loadingSpinner.fi-loadingSpinner--loading {\n      .fi-loadingSpinner_icon {\n        animation: rotation 10s infinite linear;\n      }\n    }\n  }\n"])), element(theme), font(theme)('bodyTextSmall'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), theme.colors.successBase, theme.colors.alertBase);
};
var templateObject_1;

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