diff --git a/docs/464d45b6c0aa745a9d68e563688b3354.png b/docs/464d45b6c0aa745a9d68e563688b3354.png deleted file mode 100644 index ba68eb7be..000000000 Binary files a/docs/464d45b6c0aa745a9d68e563688b3354.png and /dev/null differ diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js index 7bcc14567..323339909 100644 --- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js +++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js @@ -3,17 +3,17 @@ require=function(r,e,n){function t(n,o){function i(r){return t(i.resolve(r))}fun },{}],17:[function(require,module,exports) { var global = (1,eval)("this"); var e=(0,eval)("this"),t="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},a=function(){var e=/\blang(?:uage)?-(\w+)\b/i,a=0,n=t.Prism={manual:t.Prism&&t.Prism.manual,disableWorkerMessageHandler:t.Prism&&t.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A
=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""+i.tag+">"},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/(
.clearfix::after defines a pseudo-element.content: '' allows the pseudo-element to affect layout.clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.✅ No caveats.
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
<div class="constant-width-to-height-ratio"></div>
+ .clearfix::after defines a pseudo-element.content: '' allows the pseudo-element to affect layout.clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.✅ No caveats.
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).
<div class="constant-width-to-height-ratio"></div>
.constant-width-to-height-ratio {
background: #333;
width: 50%;
@@ -26,7 +26,12 @@
background: deeppink;
color: white;
}
- Select some of this text.
::selection defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
⚠️ Requires prefixes for full support and is not actually in any specification.
Creates a donut spinner that can be used to indicate the loading of content.
<div class="donut"></div>
+ Select some of this text.
::selection defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
⚠️ Requires prefixes for full support and is not actually in any specification.
Makes the content unselectable.
<p>You can select me.</p>
+<p class="unselectable">You can't select me!</p>
+ .unselectable {
+ user-select: none;
+}
+ You can select me.
You can't select me!
user-select: none specifies that the text cannot be selected.
⚠️ Requires prefixes for full support.
Creates a donut spinner that can be used to indicate the loading of content.
<div class="donut"></div>
@keyframes donut-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
diff --git a/index.html b/index.html
index 09d5696eb..b6f6d0214 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
Clearfix
Constant width to height ratio
Custom text selection
+ Disable selection
Donut spinner
Easing variables
Etched text
@@ -178,6 +179,41 @@ in any specification.
Makes the content unselectable.
+<p>You can select me.</p>
+<p class="unselectable">You can't select me!</p>
+
+ .unselectable {
+ user-select: none;
+}
+
+ You can select me.
+You can't select me!
+user-select: none specifies that the text cannot be selected.
⚠️ Requires prefixes for full support.
+ +Creates a donut spinner that can be used to indicate the loading of content.