react-background-animation/dist/cssEffects/rain/rainStyled.js

React effect components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Rain = void 0;

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n.rain {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.rain.back-row {\n  display: none;\n  z-index: 1;\n  bottom: 60px;\n  opacity: 0.5;\n}\n\nbody.back-row-toggle .rain.back-row {\n  display: block;\n}\n\n.drop {\n  position: absolute;\n  bottom: 100%;\n  width: 15px;\n  height: 120px;\n  pointer-events: none;\n  animation: drop 0.5s linear infinite;\n}\n\n@keyframes drop {\n  0% {\n    transform: translateY(0vh);\n  }\n  75% {\n    transform: translateY(90vh);\n  }\n  100% {\n    transform: translateY(90vh);\n  }\n}\n\n.stem {\n  width: 1px;\n  height: 60%;\n  margin-left: 7px;\n  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));\n  animation: stem 0.5s linear infinite;\n}\n\n@keyframes stem {\n  0% {\n    opacity: 1;\n  }\n  65% {\n    opacity: 1;\n  }\n  75% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.splat {\n  width: 15px;\n  height: 10px;\n  border-top: 2px dotted rgba(255, 255, 255, 0.5);\n  border-radius: 50%;\n  opacity: 1;\n  transform: scale(0);\n  animation: splat 0.5s linear infinite;\n  display: none;\n}\n\nbody.splat-toggle .splat {\n  display: block;\n}\n\n@keyframes splat {\n  0% {\n    opacity: 1;\n    transform: scale(0);\n  }\n  80% {\n    opacity: 1;\n    transform: scale(0);\n  }\n  90% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.5);\n  }\n}\n\n.toggles {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 3;\n}\n\n.toggle {\n  position: absolute;\n  left: 20px;\n  width: 50px;\n  height: 50px;\n  line-height: 51px;\n  box-sizing: border-box;\n  text-align: center;\n  font-family: sans-serif;\n  font-size: 10px;\n  font-weight: bold;\n  background-color: rgba(255, 255, 255, 0.2);\n  color: rgba(0, 0, 0, 0.5);\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.3s;\n}\n\n.toggle:hover {\n  background-color: rgba(255, 255, 255, 0.25);\n}\n\n.toggle:active {\n  background-color: rgba(255, 255, 255, 0.3);\n}\n\n.toggle.active {\n  background-color: rgba(255, 255, 255, 0.4);\n}\n\n.splat-toggle {\n  top: 20px;\n}\n\n.back-row-toggle {\n  top: 0;\n  line-height: 14px;\n}\n\n.single-toggle {\n  top: 160px;\n}\n\nbody.single-toggle .drop {\n  display: none;\n}\n\nbody.single-toggle .drop:nth-child(10) {\n  display: block;\n}\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Rain = _styledComponents["default"].div(_templateObject());

exports.Rain = Rain;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jc3NFZmZlY3RzL3JhaW4vcmFpblN0eWxlZC5qcyJdLCJuYW1lcyI6WyJSYWluIiwic3R5bGVkIiwiZGl2Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFTyxJQUFNQSxJQUFJLEdBQUdDLDZCQUFPQyxHQUFWLG1CQUFWIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cydcclxuXHJcbmV4cG9ydCBjb25zdCBSYWluID0gc3R5bGVkLmRpdmBcclxuLnJhaW4ge1xyXG4gIHBvc2l0aW9uOiBmaXhlZDtcclxuICBsZWZ0OiAwO1xyXG4gIHRvcDogMDtcclxuICB3aWR0aDogMTAwdnc7XHJcbiAgaGVpZ2h0OiAxMDB2aDtcclxuICB6LWluZGV4OiAyO1xyXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xyXG59XHJcblxyXG4ucmFpbi5iYWNrLXJvdyB7XHJcbiAgZGlzcGxheTogbm9uZTtcclxuICB6LWluZGV4OiAxO1xyXG4gIGJvdHRvbTogNjBweDtcclxuICBvcGFjaXR5OiAwLjU7XHJcbn1cclxuXHJcbmJvZHkuYmFjay1yb3ctdG9nZ2xlIC5yYWluLmJhY2stcm93IHtcclxuICBkaXNwbGF5OiBibG9jaztcclxufVxyXG5cclxuLmRyb3Age1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBib3R0b206IDEwMCU7XHJcbiAgd2lkdGg6IDE1cHg7XHJcbiAgaGVpZ2h0OiAxMjBweDtcclxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcclxuICBhbmltYXRpb246IGRyb3AgMC41cyBsaW5lYXIgaW5maW5pdGU7XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgZHJvcCB7XHJcbiAgMCUge1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDB2aCk7XHJcbiAgfVxyXG4gIDc1JSB7XHJcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoOTB2aCk7XHJcbiAgfVxyXG4gIDEwMCUge1xyXG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDkwdmgpO1xyXG4gIH1cclxufVxyXG5cclxuLnN0ZW0ge1xyXG4gIHdpZHRoOiAxcHg7XHJcbiAgaGVpZ2h0OiA2MCU7XHJcbiAgbWFyZ2luLWxlZnQ6IDdweDtcclxuICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCByZ2JhKDI1NSwgMjU1LCAyNTUsIDApLCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMjUpKTtcclxuICBhbmltYXRpb246IHN0ZW0gMC41cyBsaW5lYXIgaW5maW5pdGU7XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgc3RlbSB7XHJcbiAgMCUge1xyXG4gICAgb3BhY2l0eTogMTtcclxuICB9XHJcbiAgNjUlIHtcclxuICAgIG9wYWNpdHk6IDE7XHJcbiAgfVxyXG4gIDc1JSB7XHJcbiAgICBvcGFjaXR5OiAwO1xyXG4gIH1cclxuICAxMDAlIHtcclxuICAgIG9wYWNpdHk6IDA7XHJcbiAgfVxyXG59XHJcblxyXG4uc3BsYXQge1xyXG4gIHdpZHRoOiAxNXB4O1xyXG4gIGhlaWdodDogMTBweDtcclxuICBib3JkZXItdG9wOiAycHggZG90dGVkIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC41KTtcclxuICBib3JkZXItcmFkaXVzOiA1MCU7XHJcbiAgb3BhY2l0eTogMTtcclxuICB0cmFuc2Zvcm06IHNjYWxlKDApO1xyXG4gIGFuaW1hdGlvbjogc3BsYXQgMC41cyBsaW5lYXIgaW5maW5pdGU7XHJcbiAgZGlzcGxheTogbm9uZTtcclxufVxyXG5cclxuYm9keS5zcGxhdC10b2dnbGUgLnNwbGF0IHtcclxuICBkaXNwbGF5OiBibG9jaztcclxufVxyXG5cclxuQGtleWZyYW1lcyBzcGxhdCB7XHJcbiAgMCUge1xyXG4gICAgb3BhY2l0eTogMTtcclxuICAgIHRyYW5zZm9ybTogc2NhbGUoMCk7XHJcbiAgfVxyXG4gIDgwJSB7XHJcbiAgICBvcGFjaXR5OiAxO1xyXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcclxuICB9XHJcbiAgOTAlIHtcclxuICAgIG9wYWNpdHk6IDAuNTtcclxuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XHJcbiAgfVxyXG4gIDEwMCUge1xyXG4gICAgb3BhY2l0eTogMDtcclxuICAgIHRyYW5zZm9ybTogc2NhbGUoMS41KTtcclxuICB9XHJcbn1cclxuXHJcbi50b2dnbGVzIHtcclxuICBwb3NpdGlvbjogYWJzb2x1dGU7XHJcbiAgdG9wOiAwO1xyXG4gIGxlZnQ6IDA7XHJcbiAgei1pbmRleDogMztcclxufVxyXG5cclxuLnRvZ2dsZSB7XHJcbiAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gIGxlZnQ6IDIwcHg7XHJcbiAgd2lkdGg6IDUwcHg7XHJcbiAgaGVpZ2h0OiA1MHB4O1xyXG4gIGxpbmUtaGVpZ2h0OiA1MXB4O1xyXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gIGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmO1xyXG4gIGZvbnQtc2l6ZTogMTBweDtcclxuICBmb250LXdlaWdodDogYm9sZDtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7XHJcbiAgY29sb3I6IHJnYmEoMCwgMCwgMCwgMC41KTtcclxuICBib3JkZXItcmFkaXVzOiA1MCU7XHJcbiAgY3Vyc29yOiBwb2ludGVyO1xyXG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcztcclxufVxyXG5cclxuLnRvZ2dsZTpob3ZlciB7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjI1KTtcclxufVxyXG5cclxuLnRvZ2dsZTphY3RpdmUge1xyXG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zKTtcclxufVxyXG5cclxuLnRvZ2dsZS5hY3RpdmUge1xyXG4gIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC40KTtcclxufVxyXG5cclxuLnNwbGF0LXRvZ2dsZSB7XHJcbiAgdG9wOiAyMHB4O1xyXG59XHJcblxyXG4uYmFjay1yb3ctdG9nZ2xlIHtcclxuICB0b3A6IDA7XHJcbiAgbGluZS1oZWlnaHQ6IDE0cHg7XHJcbn1cclxuXHJcbi5zaW5nbGUtdG9nZ2xlIHtcclxuICB0b3A6IDE2MHB4O1xyXG59XHJcblxyXG5ib2R5LnNpbmdsZS10b2dnbGUgLmRyb3Age1xyXG4gIGRpc3BsYXk6IG5vbmU7XHJcbn1cclxuXHJcbmJvZHkuc2luZ2xlLXRvZ2dsZSAuZHJvcDpudGgtY2hpbGQoMTApIHtcclxuICBkaXNwbGF5OiBibG9jaztcclxufVxyXG5gIl19