diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js index d56ae7f90..4c2411155 100644 --- a/docs/3df57813b7ec2de885ea6075ff46ed46.js +++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js @@ -1,6 +1,6 @@ -require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}function f(e){return r[n][1][e]||e}if(!e[n]){if(!r[n]){var c="function"==typeof require&&require;if(!o&&c)return c(n,!0);if(u)return u(n,!0);var l=new Error("Cannot find module '"+n+"'");throw l.code="MODULE_NOT_FOUND",l}i.resolve=f;var s=e[n]=new t.Module(n);r[n][0].call(s.exports,i,s,s.exports)}return e[n].exports}function o(r){this.id=r,this.bundle=t,this.exports={}}var u="function"==typeof require&&require;t.isParcelRequire=!0,t.Module=o,t.modules=r,t.cache=e,t.parent=u;for(var i=0;im;m++)if((d=n?g(o(u=e[m])[0],u[1]):g(e[m]))===y||d===p)return d}else for(f=v.call(e);!(u=f.next()).done;)if((d=l(f,g,u.value,n))===y||d===p)return d}).BREAK=y,n.RETURN=p},function(e,n){var i=Math.ceil,t=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?t:i)(e)}},function(e,n){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,n,i){"use strict";var t=i(52),l=i(3),r=i(10),o=i(8),a=i(6),c=i(13),y=i(53),p=i(24),h=i(59),x=i(0)("iterator"),s=!([].keys&&"next"in[].keys()),u=function(){return this};e.exports=function(e,n,i,f,d,v,g){y(i,n,f);var m,M,w,b=function(e){if(!s&&e in k)return k[e];switch(e){case"keys":case"values":return function(){return new i(this,e)}}return function(){return new i(this,e)}},A=n+" Iterator",_="values"==d,z=!1,k=e.prototype,S=k[x]||k["@@iterator"]||d&&k[d],H=!s&&S||b(d),V=d?_?b("entries"):H:void 0,O="Array"==n&&k.entries||S;if(O&&(w=h(O.call(new e)))!==Object.prototype&&w.next&&(p(w,A,!0),t||a(w,x)||o(w,x,u)),_&&S&&"values"!==S.name&&(z=!0,H=function(){return S.call(this)}),t&&!g||!s&&!z&&k[x]||o(k,x,H),c[n]=H,c[A]=u,d)if(m={values:_?H:b("values"),keys:v?H:b("keys"),entries:V},g)for(M in m)M in k||r(k,M,m[M]);else l(l.P+l.F*(s||z),n,m);return m}},function(e,n,i){var t=i(55),l=i(37);e.exports=Object.keys||function(e){return t(e,l)}},function(e,n,i){var t=i(18),l=Math.min;e.exports=function(e){return e>0?l(t(e),9007199254740991):0}},function(e,n,i){var t=i(36)("keys"),l=i(15);e.exports=function(e){return t[e]||(t[e]=l(e))}},function(e,n,i){var t=i(4).f,l=i(6),r=i(0)("toStringTag");e.exports=function(e,n,i){e&&!l(e=i?e:e.prototype,r)&&t(e,r,{configurable:!0,value:n})}},function(e,n,i){var t=i(19);e.exports=function(e){return Object(t(e))}},function(e,n,i){var t=i(35),l=i(0)("toStringTag"),r="Arguments"==t(function(){return arguments}());e.exports=function(e){var n,i,o;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(i=function(e,n){try{return e[n]}catch(e){}}(n=Object(e),l))?i:r?t(n):"Object"==(o=t(n))&&"function"==typeof n.callee?"Arguments":o}},function(e,n,i){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=o(i(86)),l=o(i(88)),r=o(i(89));function o(e){return e&&e.__esModule?e:{default:e}}n.default=Object.keys(l.default).map(function(e){return new t.default(e,l.default[e],r.default[e])}).reduce(function(e,n){return e[n.name]=n,e},{})},function(e,n,i){"use strict";var t=i(51)(!0);i(20)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,n=this._t,i=this._i;return i>=n.length?{value:void 0,done:!0}:(e=t(n,i),this._i+=e.length,{value:e,done:!1})})},function(e,n,i){e.exports=!i(5)&&!i(12)(function(){return 7!=Object.defineProperty(i(30)("div"),"a",{get:function(){return 7}}).a})},function(e,n,i){var t=i(2),l=i(1).document,r=t(l)&&t(l.createElement);e.exports=function(e){return r?l.createElement(e):{}}},function(e,n,i){var t=i(2);e.exports=function(e,n){if(!t(e))return e;var i,l;if(n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;if("function"==typeof(i=e.valueOf)&&!t(l=i.call(e)))return l;if(!n&&"function"==typeof(i=e.toString)&&!t(l=i.call(e)))return l;throw TypeError("Can't convert object to primitive value")}},function(e,n){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,n,i){var t=i(9),l=i(54),r=i(37),o=i(23)("IE_PROTO"),a=function(){},c=function(){var e,n=i(30)("iframe"),t=r.length;for(n.style.display="none",i(58).appendChild(n),n.src="javascript:",(e=n.contentWindow.document).open(),e.write("

30 Seconds of CSS

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Star

Bouncing loaderanimation

Creates a bouncing loader animation.

HTML

<div class="bouncing-loader">
+     30 Seconds of CSS         
 
 
  
30 Seconds of CSS
 
 A curated collection of useful CSS snippets you can understand in 30 seconds or less. 
 
 Star 
 
 
 
 
  
 
Bouncing loaderanimation
 
Creates a bouncing loader animation.
 
HTML
<div class="bouncing-loader">
   <div></div>
   <div></div>
   <div></div>
@@ -421,7 +421,7 @@ li:not(:last-child) {
   line-height: 1.2;
   text-align: center;
 }
-
 
Demo
 
 
 
 Content to be scrolled 
 
 
   
Explanation
 
     
  1. position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
    2.  
  2. ::after defines a pseudo element.
    3.  
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
    6.  
  6. height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
    7.  
  7. bottom: 0 positions the pseudo-element at the bottom of the parent.
    8.  
  8. pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
    9.  
 
Browser support
 
 
 95.4% 
 
 
✅ No caveats.
   
 
 
Popout menuinteractivity
 
Reveals an interactive popout menu on hover.
 
HTML
<div class="reference">
+
 
Demo
 
 
 
 Content to be scrolled 
 
 
   
Explanation
 
     
  1. position: relative on the parent establishes a Cartesian positioning context for pseudo-elements.
    2.  
  2. ::after defines a pseudo element.
    3.  
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
    4.  
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    5.  
  5. width: 240px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
    6.  
  6. height: 25px is the height of the fading gradient pseudo-element, which should be kept relatively small.
    7.  
  7. bottom: 0 positions the pseudo-element at the bottom of the parent.
    8.  
  8. pointer-events: none specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
    9.  
 
Browser support
 
 
 95.4% 
 
 
✅ No caveats.
   
 
 
Popout menuinteractivity
 
Reveals an interactive popout menu on hover.
 
HTML
<div class="reference">
   <div class="popout-menu">
     Popout menu
   </div>
diff --git a/index.html b/index.html
index 628ee0daa..07832337d 100644
--- a/index.html
+++ b/index.html
@@ -1413,6 +1413,7 @@ el.style.setProperty('--max-height', height + 'px')
               }