@helpscout/hsds-react/components/LoadingDots/LoadingDots.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.LoadingDotUI = exports.LoadingDotsUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var gap = 3;
var size = 5;

var LoadingDotsUI = _styledComponents.default.div.withConfig({
  displayName: "LoadingDotscss__LoadingDotsUI",
  componentId: "sc-1x00fmz-0"
})(["color:", ";display:flex;width:", "px;&.is-left{margin-right:auto;}&.is-center{margin-left:auto;margin-right:auto;}&.is-right{margin-left:auto;}"], (0, _color.getColor)('grey.800'), size * 3 + gap * 2);

exports.LoadingDotsUI = LoadingDotsUI;

var LoadingDotUI = _styledComponents.default.div.withConfig({
  displayName: "LoadingDotscss__LoadingDotUI",
  componentId: "sc-1x00fmz-1"
})(["background-color:currentColor;border-radius:200%;display:block;margin-right:", "px;height:", "px;width:", "px;animation-direction:normal;&:last-child{margin-right:0;}&.is-one{animation:dotOne 1s ease-in-out infinite;}&.is-two{animation:dotTwo 1s ease-in-out infinite;}&.is-three{animation:dotThree 1s ease-in-out infinite;}@keyframes dotOne{0%{opacity:0.4;}33.333%{opacity:1;}66.6667%{opacity:0.4;}100%{opacity:0.4;}}@keyframes dotTwo{0%{opacity:0.4;}33.333%{opacity:0.4;}66.6667%{opacity:1;}100%{opacity:0.4;}}@keyframes dotThree{0%{opacity:0.4;}33.333%{opacity:0.4;}66.6667%{opacity:0.4;}100%{opacity:1;}}"], gap, size, size);

exports.LoadingDotUI = LoadingDotUI;