@procore/core-react/dist/Spinner/Spinner.styles.js

React library of Procore Design Guidelines

import styled, { css, keyframes } from 'styled-components';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var duration = 1500;
var durationOffset = 500;
var transition = '0.5s ease';
var zContainer = 3;
var zOverlay = 2;
var dash = /*#__PURE__*/keyframes(["0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}"]);
export var StyledCircle = /*#__PURE__*/styled.circle.withConfig({
  displayName: "StyledCircle",
  componentId: "core-12_44_0__sc-1igww3-0"
})(["", " stroke-linecap:round;"], function (p) {
  if (p.$animate) {
    var animationDelay = -(p.$mountTime % duration);
    return css(["animation:", " ", "ms ease-in-out ", "ms infinite;"], dash, duration, animationDelay);
  }
});
export var spinnerDimensions = {
  xs: spacing.md,
  sm: spacing.lg,
  md: spacing.xl,
  lg: 48
};
var spinnerColorMap = {
  "default": 'gray60',
  button: 'gray15',
  light: 'white',
  focus: 'blue50'
};
var spinnerStroke = {
  xs: 10,
  sm: 8,
  md: 8,
  lg: 6
};
function getHeightWidthStroke(_ref) {
  var $size = _ref.$size;
  var dimension = spinnerDimensions[$size];
  var strokeWidth = spinnerStroke[$size];
  return css(["height:", "px;width:", "px;stroke-width:", "px;"], dimension, dimension, strokeWidth);
}
function getStrokeColor(_ref2) {
  var $color = _ref2.$color,
    $variant = _ref2.$variant;
  if ($color) {
    return css(["stroke:", ";"], colors[$color]);
  }
  return css(["stroke:", ";"], colors[spinnerColorMap[$variant]]);
}
export var StyledSpinnerContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinnerContainer",
  componentId: "core-12_44_0__sc-1igww3-1"
})(["border-radius:100%;box-sizing:border-box;display:block;flex-shrink:0;position:relative;", " ", "{", "}"], getHeightWidthStroke, StyledCircle, getStrokeColor);
export var StyledSpinnerOverlayLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSpinnerOverlayLabel",
  componentId: "core-12_44_0__sc-1igww3-2"
})(["", " color:", ";display:block;min-height:20px;padding-top:", "px;text-align:center;transition:opacity ", ";"], getTypographyIntent('body'), colors.gray15, spacing.md, transition);
var rotate = /*#__PURE__*/keyframes(["to{transform:rotate(360deg);}"]);
export var StyledSpinnerSVG = /*#__PURE__*/styled.svg.withConfig({
  displayName: "StyledSpinnerSVG",
  componentId: "core-12_44_0__sc-1igww3-3"
})(["", " fill:none;height:100%;left:0;margin:auto;position:absolute;right:0;top:0;width:100%;z-index:2;"], function (p) {
  if (p.$animate) {
    var animationDelay = -(p.$mountTime % (duration - durationOffset));
    return css(["animation:", " ", "ms linear ", "ms infinite;"], rotate, duration - durationOffset, animationDelay);
  }
});
var startsWithNoInteraction = /*#__PURE__*/css(["opacity:0;pointer-events:none;transition:opacity ", ";"], transition);
export var StyledSpinnerOverlay = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinnerOverlay",
  componentId: "core-12_44_0__sc-1igww3-4"
})(["", ";background-color:", ";bottom:0;left:0;position:absolute;right:0;top:0;z-index:", ";"], startsWithNoInteraction, colors.white, zOverlay);
export var StyledSpinnerContainerWithLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinnerContainerWithLabel",
  componentId: "core-12_44_0__sc-1igww3-5"
})(["", ";align-items:center;display:flex;flex-direction:column;height:100%;max-height:400px;justify-content:center;position:absolute;top:0;width:100%;z-index:", ";"], startsWithNoInteraction, zContainer);
export var StyledSpinnerOverlayContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinnerOverlayContainer",
  componentId: "core-12_44_0__sc-1igww3-6"
})(["min-height:150px;position:relative;", " ", ""], function (_ref3) {
  var $loading = _ref3.$loading;
  if ($loading) {
    return css(["", ",", "{opacity:1;pointer-events:auto;}"], StyledSpinnerContainerWithLabel, StyledSpinnerOverlay);
  }
}, function (_ref4) {
  var $centered = _ref4.$centered;
  if ($centered) {
    return css(["", "{position:absolute;top:50%;transform:translateY(-50%);}"], StyledSpinnerContainerWithLabel);
  }
});
//# sourceMappingURL=Spinner.styles.js.map