suomifi-ui-components/dist/cjs/core/LoadingSpinner/LoadingSpinner.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styledComponents = 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 styledComponents.css(templateObject_1 || (templateObject_1 = tslib.__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"])), index.element(theme), index.font(theme)('bodyTextSmall'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), theme.colors.successBase, theme.colors.alertBase);
};
var templateObject_1;

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