ui-kit-ck-consultant 0.5.262 → 0.5.263

package/css/style.css

@@ -1588,3 +1588,8 @@ h3 {
 }
 
 /* end color */
+
+.sky > canvas{
+  pointer-events: none;
+  z-index: 10;
+}

package/dist/index.js

@@ -1088,14 +1088,109 @@ var Header = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Header, _React$Component);
 
   function Header() {
-    return _React$Component.apply(this, arguments) || this;
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _this.snowflake = function () {
+      var COUNT = 125;
+      var masthead = document.querySelector('.sky');
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      var width = masthead.clientWidth;
+      var height = masthead.clientHeight;
+      var i = 0;
+      var active = false;
+
+      function onResize() {
+        width = masthead.clientWidth;
+        height = masthead.clientHeight;
+        canvas.width = width;
+        canvas.height = height;
+        ctx.fillStyle = '#FFF';
+        var wasActive = active;
+        active = width > 600;
+        if (!wasActive && active) requestAnimFrame(update);
+      }
+
+      var Snowflake = function Snowflake() {
+        this.x = 0;
+        this.y = 0;
+        this.vy = 0;
+        this.vx = 0;
+        this.r = 0;
+        this.reset();
+      };
+
+      Snowflake.prototype.reset = function () {
+        this.x = Math.random() * width;
+        this.y = Math.random() * -height;
+        this.vy = 1 + Math.random() * 3;
+        this.vx = 0.5 - Math.random();
+        this.r = 1 + Math.random() * 2;
+        this.o = 0.5 + Math.random() * 0.5;
+      };
+
+      canvas.style.position = 'absolute';
+      canvas.style.left = canvas.style.top = '0';
+      var snowflakes = [],
+          snowflake;
+
+      for (i = 0; i < COUNT; i++) {
+        snowflake = new Snowflake();
+        snowflake.reset();
+        snowflakes.push(snowflake);
+      }
+
+      function update() {
+        ctx.clearRect(0, 0, width, height);
+        if (!active) return;
+
+        for (i = 0; i < COUNT; i++) {
+          snowflake = snowflakes[i];
+          snowflake.y += snowflake.vy;
+          snowflake.x += snowflake.vx;
+          ctx.globalAlpha = snowflake.o;
+          ctx.beginPath();
+          ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
+          ctx.closePath();
+          ctx.fill();
+
+          if (snowflake.y > height) {
+            snowflake.reset();
+          }
+        }
+
+        requestAnimFrame(update);
+      }
+
+      window.requestAnimFrame = function () {
+        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+          window.setTimeout(callback, 1000 / 60);
+        };
+      }();
+
+      onResize();
+      window.addEventListener('resize', onResize, false);
+      masthead.appendChild(canvas);
+    };
+
+    return _this;
   }
 
   var _proto = Header.prototype;
 
+  _proto.componentDidMount = function componentDidMount() {
+    this.snowflake();
+  };
+
   _proto.render = function render() {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classNames$1(style$b.header, this.props.className)
+      className: classNames$1(style$b.header, this.props.className, "sky")
     }, /*#__PURE__*/React__default.createElement("div", {
       className: style$b.header_absolute,
       style: this.props.styleBackground