@helpscout/hsds-react/components/Skeleton/Skeleton.Block.css.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.BlockUI = exports.config = void 0;

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

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

var config = {
  backgroundColor: (0, _color.getColor)('grey.300'),
  backgroundColorShine: (0, _color.getColor)('grey.200'),
  animationDuration: '1000ms',
  size: '20px'
};
exports.config = config;
var BlockUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "SkeletonBlockcss__BlockUI",
  componentId: "sc-1j0puzl-0"
})(["box-sizing:border-box;background:", ";background-image:linear-gradient( to left,", " 0%,", " 20%,", " 40%,", " 100% );background-repeat:no-repeat;background-size:800px 100%;height:", ";position:relative;width:", ";&.is-withAnimations{animation-duration:", ";animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:Blue_Skeleton_Block_shimmer;animation-timing-function:linear;}@keyframes Blue_Skeleton_Block_shimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}"], config.backgroundColor, config.backgroundColor, config.backgroundColorShine, config.backgroundColor, config.backgroundColor, config.size, config.size, config.animationDuration);
exports.BlockUI = BlockUI;