diff --git a/.prettierignore b/.prettierignore index 5098fa1..10cc54b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ **/*.html **/*.md +demo/lib/* diff --git a/demo/lib/highlight-theme.css b/demo/lib/highlight-theme.css new file mode 100644 index 0000000..d1d9be3 --- /dev/null +++ b/demo/lib/highlight-theme.css @@ -0,0 +1,115 @@ +/* + * Visual Studio 2015 dark style + * Author: Nicolas LLOBERA + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #1E1E1E; + color: #DCDCDC; +} + +.hljs-keyword, +.hljs-literal, +.hljs-symbol, +.hljs-name { + color: #569CD6; +} +.hljs-link { + color: #569CD6; + text-decoration: underline; +} + +.hljs-built_in, +.hljs-type { + color: #4EC9B0; +} + +.hljs-number, +.hljs-class { + color: #B8D7A3; +} + +.hljs-string, +.hljs-meta-string { + color: #D69D85; +} + +.hljs-regexp, +.hljs-template-tag { + color: #9A5334; +} + +.hljs-subst, +.hljs-function, +.hljs-title, +.hljs-params, +.hljs-formula { + color: #DCDCDC; +} + +.hljs-comment, +.hljs-quote { + color: #57A64A; + font-style: italic; +} + +.hljs-doctag { + color: #608B4E; +} + +.hljs-meta, +.hljs-meta-keyword, +.hljs-tag { + color: #9B9B9B; +} + +.hljs-variable, +.hljs-template-variable { + color: #BD63C5; +} + +.hljs-attr, +.hljs-attribute, +.hljs-builtin-name { + color: #9CDCFE; +} + +.hljs-section { + color: gold; +} + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} + +/*.hljs-code { + font-family:'Monospace'; +}*/ + +.hljs-bullet, +.hljs-selector-tag, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #D7BA7D; +} + +.hljs-addition { + background-color: #144212; + display: inline-block; + width: 100%; +} + +.hljs-deletion { + background-color: #600; + display: inline-block; + width: 100%; +} diff --git a/demo/lib/highlight.js b/demo/lib/highlight.js new file mode 100644 index 0000000..dd62ef0 --- /dev/null +++ b/demo/lib/highlight.js @@ -0,0 +1,2 @@ +/*! highlight.js v9.14.2 | BSD3 License | git.io/hljslicense */ +!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/g,"&").replace(//g,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0===t.index}function a(e){return k.test(e)}function i(e){var n,t,r,i,o=e.className+" ";if(o+=e.parentNode?e.parentNode.className:"",t=M.exec(o))return w(t[1])?t[1]:"no-highlight";for(o=o.split(/\s+/),n=0,r=o.length;r>n;n++)if(i=o[n],a(i)||w(i))return i}function o(e){var n,t={},r=Array.prototype.slice.call(arguments,1);for(n in e)t[n]=e[n];return r.forEach(function(e){for(n in e)t[n]=e[n]}),t}function c(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3===i.nodeType?a+=i.nodeValue.length:1===i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function u(e,r,a){function i(){return e.length&&r.length?e[0].offset!==r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"===e.event?o:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substring(s,g[0].offset)),s=g[0].offset,g===e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=i();while(g===e&&g.length&&g[0].offset===s);f.reverse().forEach(o)}else"start"===g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){return e.v&&!e.cached_variants&&(e.cached_variants=e.v.map(function(n){return o(e,{v:null},n)})),e.cached_variants||e.eW&&[o(e)]||[e]}function l(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var o={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");o[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):B(a.k).forEach(function(e){c(e,a.k[e])}),a.k=o}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.endSameAsBegin&&(a.e=a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),null==a.r&&(a.r=1),a.c||(a.c=[]),a.c=Array.prototype.concat.apply([],a.c.map(function(e){return s("self"===e?a:e)})),a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var u=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=u.length?t(u.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e){return new RegExp(e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&"),"m")}function c(e,n){var t,a;for(t=0,a=n.c.length;a>t;t++)if(r(n.c[t].bR,e))return n.c[t].endSameAsBegin&&(n.c[t].eR=o(n.c[t].bR.exec(e)[0])),n.c[t]}function u(e,n){if(r(e.eR,n)){for(;e.endsParent&&e.parent;)e=e.parent;return e}return e.eW?u(e.parent,n):void 0}function s(e,n){return!a&&r(n.iR,e)}function p(e,n){var t=R.cI?n[0].toLowerCase():n[0];return e.k.hasOwnProperty(t)&&e.k[t]}function d(e,n,t,r){var a=r?"":j.classPrefix,i='',i+n+o}function h(){var e,t,r,a;if(!E.k)return n(k);for(a="",t=0,E.lR.lastIndex=0,r=E.lR.exec(k);r;)a+=n(k.substring(t,r.index)),e=p(E,r),e?(M+=e[1],a+=d(e[0],n(r[0]))):a+=n(r[0]),t=E.lR.lastIndex,r=E.lR.exec(k);return a+n(k.substr(t))}function b(){var e="string"==typeof E.sL;if(e&&!L[E.sL])return n(k);var t=e?f(E.sL,k,!0,B[E.sL]):g(k,E.sL.length?E.sL:void 0);return E.r>0&&(M+=t.r),e&&(B[E.sL]=t.top),d(t.language,t.value,!1,!0)}function v(){y+=null!=E.sL?b():h(),k=""}function m(e){y+=e.cN?d(e.cN,"",!0):"",E=Object.create(e,{parent:{value:E}})}function N(e,n){if(k+=e,null==n)return v(),0;var t=c(n,E);if(t)return t.skip?k+=n:(t.eB&&(k+=n),v(),t.rB||t.eB||(k=n)),m(t,n),t.rB?0:n.length;var r=u(E,n);if(r){var a=E;a.skip?k+=n:(a.rE||a.eE||(k+=n),v(),a.eE&&(k=n));do E.cN&&(y+=I),E.skip||E.sL||(M+=E.r),E=E.parent;while(E!==r.parent);return r.starts&&(r.endSameAsBegin&&(r.starts.eR=r.eR),m(r.starts,"")),a.rE?0:n.length}if(s(n,E))throw new Error('Illegal lexeme "'+n+'" for mode "'+(E.cN||"")+'"');return k+=n,n.length||1}var R=w(e);if(!R)throw new Error('Unknown language: "'+e+'"');l(R);var x,E=i||R,B={},y="";for(x=E;x!==R;x=x.parent)x.cN&&(y=d(x.cN,"",!0)+y);var k="",M=0;try{for(var C,A,S=0;;){if(E.t.lastIndex=S,C=E.t.exec(t),!C)break;A=N(t.substring(S,C.index),C[0]),S=C.index+A}for(N(t.substr(S)),x=E;x.parent;x=x.parent)x.cN&&(y+=I);return{r:M,value:y,language:e,top:E}}catch(O){if(O.message&&-1!==O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function g(e,t){t=t||j.languages||B(L);var r={r:0,value:n(e)},a=r;return t.filter(w).filter(x).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function p(e){return j.tabReplace||j.useBR?e.replace(C,function(e,n){return j.useBR&&"\n"===e?"
":j.tabReplace?n.replace(/\t/g,j.tabReplace):""}):e}function d(e,n,t){var r=n?y[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function h(e){var n,t,r,o,s,l=i(e);a(l)||(j.useBR?(n=document.createElementNS("http://www.w3.org/1999/xhtml","div"),n.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):n=e,s=n.textContent,r=l?f(l,s,!0):g(s),t=c(n),t.length&&(o=document.createElementNS("http://www.w3.org/1999/xhtml","div"),o.innerHTML=r.value,r.value=u(t,c(o),s)),r.value=p(r.value),e.innerHTML=r.value,e.className=d(e.className,l,r.language),e.result={language:r.language,re:r.r},r.second_best&&(e.second_best={language:r.second_best.language,re:r.second_best.r}))}function b(e){j=o(j,e)}function v(){if(!v.called){v.called=!0;var e=document.querySelectorAll("pre code");E.forEach.call(e,h)}}function m(){addEventListener("DOMContentLoaded",v,!1),addEventListener("load",v,!1)}function N(n,t){var r=L[n]=t(e);r.aliases&&r.aliases.forEach(function(e){y[e]=n})}function R(){return B(L)}function w(e){return e=(e||"").toLowerCase(),L[e]||L[y[e]]}function x(e){var n=w(e);return n&&!n.disableAutodetect}var E=[],B=Object.keys,L={},y={},k=/^(no-?highlight|plain|text)$/i,M=/\blang(?:uage)?-([\w-]+)\b/i,C=/((^(<[^>]+>|\t|)+|(?:\n)))/gm,I="",j={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0};return e.highlight=f,e.highlightAuto=g,e.fixMarkup=p,e.highlightBlock=h,e.configure=b,e.initHighlighting=v,e.initHighlightingOnLoad=m,e.registerLanguage=N,e.listLanguages=R,e.getLanguage=w,e.autoDetection=x,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("xml",function(s){var e="[A-Za-z0-9\\._:-]+",t={eW:!0,i:/`]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist"],cI:!0,c:[{cN:"meta",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},s.C("",{r:10}),{b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"meta",b:/<\?xml/,e:/\?>/,r:10},{b:/<\?(php)?/,e:/\?>/,sL:"php",c:[{b:"/\\*",e:"\\*/",skip:!0},{b:'b"',e:'"',skip:!0},{b:"b'",e:"'",skip:!0},s.inherit(s.ASM,{i:null,cN:null,c:null,skip:!0}),s.inherit(s.QSM,{i:null,cN:null,c:null,skip:!0})]},{cN:"tag",b:"|$)",e:">",k:{name:"style"},c:[t],starts:{e:"",rE:!0,sL:["css","xml"]}},{cN:"tag",b:"|$)",e:">",k:{name:"script"},c:[t],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars","xml"]}},{cN:"tag",b:"",c:[{cN:"name",b:/[^\/><\s]+/,r:0},t]}]}}); \ No newline at end of file diff --git a/style.css b/demo/style.css similarity index 89% rename from style.css rename to demo/style.css index ce47018..50c5f6f 100644 --- a/style.css +++ b/demo/style.css @@ -96,64 +96,65 @@ div.containers > .nes-container { } .show-code { - font-size: .7em; - height: 34px; + position: absolute; + top: -4px; + right: -4px; display: flex; justify-content: center; width: 40px; - position: absolute; - right: -4px; - top: -4px; + height: 34px; + font-size: 0.7em; } -pre { - white-space: normal; +.sample-code { + margin: 0; +} +.sample-code > code { + padding: 1em 2em; + line-height: 2em; } .code { - display: none; - font-size: .85em; - color: #e76e55; - background-color: rgba(45, 45, 45, .9); - padding: 15px 0px 0px 15px; - margin-top: -20px; box-sizing: border-box; + display: none; + padding: 15px 0 0 15px; + margin-top: -20px; overflow: auto; + font-size: 0.85em; + color: #e76e55; + background-color: rgba(45, 45, 45, 0.9); } .copy { - height: 34px; width: 58px; + height: 34px; } -#form .nes-field, #form .field { +#form .nes-field, +#form .field { margin-top: 20px; } .copied { position: absolute; - bottom: 25px; - padding: 10px; - font-size: .7em; - z-index: 2; right: 35px; - color: #000; + bottom: 25px; + z-index: 2; display: none; + padding: 10px; + font-size: 0.7em; + color: #000; } .balloon .copied { - bottom: -4px; right: 10px; -} - -.code p { - width: 96%; + bottom: -4px; } @media screen and (max-width: 1280px) { .code p:first-child { - padding-top: 2.7em; width: 99%; + padding-top: 2.7em; } } @@ -171,8 +172,8 @@ pre { } .code p { - font-size: .8em; width: 100%; + font-size: 0.8em; } #code-avatars p { diff --git a/index.html b/index.html index 5c8853f..4fe9802 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,10 @@ - + + + + @@ -56,15 +59,14 @@ Copied!
- 

-        
<button type="button" class="nes-btn">Normal</button>

-        
<button type="button" class="nes-btn is-primary">Primary</button>

-        
<button type="button" class="nes-btn is-success">Success</button>

-        
<button type="button" class="nes-btn is-warning">Warning</button>

-        
<button type="button" class="nes-btn is-error">Error</button>

-        
<button type="button" class="nes-btn is-disabled">Disabled</button>

-        
-
+ 
<button type="button" class="nes-btn">Normal</button>
+<button type="button" class="nes-btn is-primary">Primary</button>
+<button type="button" class="nes-btn is-success">Success</button>
+<button type="button" class="nes-btn is-warning">Warning</button>
+<button type="button" class="nes-btn is-error">Error</button>
+<button type="button" class="nes-btn is-disabled">Disabled</button>
+
+
@@ -89,23 +91,21 @@ Copied!
- 

-        
<div class="nes-container with-title is-centered">
-          <p class="title">Container.is-centered</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>

-        
<div class="nes-container is-dark with-title">
-          <p class="title">Container.is-dark</p>
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>

-        
<div class="nes-container is-rounded">
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>
-        
<div class="nes-container is-rounded is-dark">
-          <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-        </div>
-        
-
+ 
<div class="nes-container with-title is-centered">
+  <p class="title">Container.is-centered</p>
+  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+</div>
+<div class="nes-container is-dark with-title">
+  <p class="title">Container.is-dark</p>
+  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+</div>
+<div class="nes-container is-rounded">
+  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+</div>
+<div class="nes-container is-rounded is-dark">
+  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+</div>
+

Radios

@@ -123,17 +123,15 @@ Copied!
- 

-        
<label>
-          <input type="radio" class="nes-radio" name="answer" checked />
-          <span>Yes</span>
-        </label>

-        
<label>
-          <input type="radio" class="nes-radio" name="answer" />
-          <span>No</span>
-        </label>

-        
-
+ 
<label>
+  <input type="radio" class="nes-radio" name="answer" checked />
+  <span>Yes</span>
+</label>
+<label>
+  <input type="radio" class="nes-radio" name="answer" />
+  <span>No</span>
+</label>
+
@@ -152,17 +150,15 @@ Copied!
- 

-        
<label>
-          <input type="checkbox" class="nes-checkbox" checked />
-          <span>Enable</span>
-        </label>

-        
<label>
-          <input type="checkbox" class="nes-checkbox is-dark" checked />
-          <span>Dark</span>
-        </label>

-        
-
+ 
<label>
+  <input type="checkbox" class="nes-checkbox" checked />
+  <span>Enable</span>
+</label>
+<label>
+  <input type="checkbox" class="nes-checkbox is-dark" checked />
+  <span>Dark</span>
+</label>
+
@@ -181,17 +177,15 @@ Copied!
- 

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">

-        
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">

-        
-
+ 
<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
+<img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
+
@@ -255,59 +249,58 @@ Copied!
- 

-        
<div class="nes-field">
-          <label for="name_field">Your name</label>
-          <input type="text" id="name_field" class="nes-input">
-        </div>

-        
<div class="nes-field is-inline">
-          <label for="inline_field">.input.is-success</label>
-          <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
-        </div>

-        
<div class="nes-field is-inline">
-          <label for="warning_field">.input.is-warning</label>
-          <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
-        </div>

-        
<div class="nes-field is-inline">
-          <label for="error_field">.input.is-error</label>
-          <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
-        </div>

-        
<div class="field">
-          <label for="textarea_field">Textarea</label>
-          <textarea id="textarea_field" class="nes-textarea"></textarea>
-        </div>

+      
<div class="nes-field">
+  <label for="name_field">Your name</label>
+  <input type="text" id="name_field" class="nes-input">
+</div>
+<div class="nes-field is-inline">
+  <label for="inline_field">.input.is-success</label>
+  <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
+</div>
+<div class="nes-field is-inline">
+  <label for="warning_field">.input.is-warning</label>
+  <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
+</div>
+<div class="nes-field is-inline">
+  <label for="error_field">.input.is-error</label>
+  <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
+</div>
+<div class="field">
+  <label for="textarea_field">Textarea</label>
+  <textarea id="textarea_field" class="nes-textarea"></textarea>
+</div>
 
-        
<div id="selects" class="selects">
-          <div class="nes-select">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>

-        
<div class="nes-select is-success">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>

-        
<div class="nes-select is-warning">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>

-        
<div class="nes-select is-error">
-            <select required>
-              <option value="" disabled selected hidden>Select...</option>
-              <option value="0">To be</option>
-              <option value="1">Not to be</option>
-            </select>
-          </div>

-        
-      

+<div id="selects" class="selects">
+  <div class="nes-select">
+    <select required>
+      <option value="" disabled selected hidden>Select...</option>
+      <option value="0">To be</option>
+      <option value="1">Not to be</option>
+    </select>
+  </div>
+  <div class="nes-select is-success">
+    <select required>
+      <option value="" disabled selected hidden>Select...</option>
+      <option value="0">To be</option>
+      <option value="1">Not to be</option>
+    </select>
+  </div>
+  <div class="nes-select is-warning">
+    <select required>
+      <option value="" disabled selected hidden>Select...</option>
+      <option value="0">To be</option>
+      <option value="1">Not to be</option>
+    </select>
+  </div>
+  <div class="nes-select is-error">
+    <select required>
+      <option value="" disabled selected hidden>Select...</option>
+      <option value="0">To be</option>
+      <option value="1">Not to be</option>
+    </select>
+  </div>
+  </div>
+
@@ -330,21 +323,19 @@ Copied!
- 

-        
<div class="message -left">
-          <i class="nes-bcrikko"></i>
-          <div class="nes-balloon from-left">
-            <p>Hello NES.css</p>
-          </div>
-        </div>

-        
<div class="message -right">
-          <div class="nes-balloon from-right">
-            <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
-          </div>
-          <i class="nes-bcrikko"></i>
-        </div>

-        
-
+ 
<div class="message -left">
+  <i class="nes-bcrikko"></i>
+  <div class="nes-balloon from-left">
+    <p>Hello NES.css</p>
+  </div>
+</div>
+<div class="message -right">
+  <div class="nes-balloon from-right">
+    <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>
+  <i class="nes-bcrikko"></i>
+</div>
+
@@ -372,26 +363,24 @@ Copied!
- 

-        
<div class="lists">
-          <ul class="nes-list is-disc">
-            <li>Good morning.</li>
-            <li>Thou hast had a good night's sleep, I hope.</li>
-            <li>Thou hast had a good afternoon</li>
-            <li>Good night.</li>
-          </ul>
-        </div>

+      
<div class="lists">
+  <ul class="nes-list is-disc">
+    <li>Good morning.</li>
+    <li>Thou hast had a good night's sleep, I hope.</li>
+    <li>Thou hast had a good afternoon</li>
+    <li>Good night.</li>
+  </ul>
+</div>
 
-        
<div class="lists">
-          <ul class="nes-list is-circle">
-            <li>Good morning.</li>
-            <li>Thou hast had a good night's sleep, I hope.</li>
-            <li>Thou hast had a good afternoon</li>
-            <li>Good night.</li>
-          </ul>
-        </div>

-        
-      

+<div class="lists">
+  <ul class="nes-list is-circle">
+    <li>Good morning.</li>
+    <li>Thou hast had a good night's sleep, I hope.</li>
+    <li>Thou hast had a good afternoon</li>
+    <li>Good night.</li>
+  </ul>
+</div>
+
@@ -452,60 +441,59 @@ Copied!
- 

-        
<div class="nes-table-responsive">
-        <table class="nes-table is-bordered is-centered">
-          <thead>
-            <tr>
-              <th>Table.is-bordered</th>
-              <th>Table.is-centered</th>
-              <th>Table.is-centered</th>
-              <th>Table.is-centered</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Thou hast had a good morning</td>
-              <td>Thou hast had a good afternoon</td>
-              <td>Thou hast had a good evening</td>
-              <td>Thou hast had a good night</td>
-            </tr>
-            <tr>
-              <td>Thou hast had a good morning</td>
-              <td>Thou hast had a good afternoon</td>
-              <td>Thou hast had a good evening</td>
-              <td>Thou hast had a good night</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>

-      
<div class="nes-table-responsive">
-        <table class="nes-table is-bordered is-dark">
-          <thead>
-            <tr>
-              <th>Table.is-dark</th>
-              <th>Table.is-bordered</th>
-              <th>Table.is-bordered</th>
-              <th>Table.is-bordered</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Thou hast had a good morning</td>
-              <td>Thou hast had a good afternon</td>
-              <td>Thou hast had a good evening</td>
-              <td>Thou hast had a good night</td>
-            </tr>
-            <tr>
-              <td>Thou hast had a good morning</td>
-              <td>Thou hast had a good afternoon</td>
-              <td>Thou hast had a good afternoon</td>
-              <td>Thou hast had a good afternoon</td>
-            </tr>
-          </tbody>
-        </table>

-        
-
+ 
<div class="nes-table-responsive">
+<table class="nes-table is-bordered is-centered">
+  <thead>
+    <tr>
+      <th>Table.is-bordered</th>
+      <th>Table.is-centered</th>
+      <th>Table.is-centered</th>
+      <th>Table.is-centered</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Thou hast had a good morning</td>
+      <td>Thou hast had a good afternoon</td>
+      <td>Thou hast had a good evening</td>
+      <td>Thou hast had a good night</td>
+    </tr>
+    <tr>
+      <td>Thou hast had a good morning</td>
+      <td>Thou hast had a good afternoon</td>
+      <td>Thou hast had a good evening</td>
+      <td>Thou hast had a good night</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+<div class="nes-table-responsive">
+  <table class="nes-table is-bordered is-dark">
+    <thead>
+      <tr>
+        <th>Table.is-dark</th>
+        <th>Table.is-bordered</th>
+        <th>Table.is-bordered</th>
+        <th>Table.is-bordered</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Thou hast had a good morning</td>
+        <td>Thou hast had a good afternon</td>
+        <td>Thou hast had a good evening</td>
+        <td>Thou hast had a good night</td>
+      </tr>
+      <tr>
+        <td>Thou hast had a good morning</td>
+        <td>Thou hast had a good afternoon</td>
+        <td>Thou hast had a good afternoon</td>
+        <td>Thou hast had a good afternoon</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
@@ -522,15 +510,13 @@ Copied!
- 

-        
<progress class="nes-progress" value="90" max="100"></progress>

-        
<progress class="nes-progress is-primary" value="80" max="100"></progress>

-        
<progress class="nes-progress is-success" value="50" max="100"></progress>

-        
<progress class="nes-progress is-warning" value="30" max="100"></progress>

-        
<progress class="nes-progress is-error" value="10" max="100"></progress>

-        
<progress class="nes-progress is-pattern" value="50" max="100"></progress>

-        
-
+ 
<progress class="nes-progress" value="90" max="100"></progress>
+<progress class="nes-progress is-primary" value="80" max="100"></progress>
+<progress class="nes-progress is-success" value="50" max="100"></progress>
+<progress class="nes-progress is-warning" value="30" max="100"></progress>
+<progress class="nes-progress is-error" value="10" max="100"></progress>
+<progress class="nes-progress is-pattern" value="50" max="100"></progress>
+
@@ -574,42 +560,40 @@ Copied!
- 

-        
<a href="#" class="nes-badge">
-            <span class="is-dark">NES.css</span>
-        </a>

-        
<a href="#" class="nes-badge">
-            <span class="is-primary">is</span>
-        </a>

-        
<a href="#" class="nes-badge">
-            <span class="is-success">a</span>
-        </a>

-        
<a href="#" class="nes-badge">
-            <span class="is-warning">great</span>
-        </a>

-        
<a href="#" class="nes-badge">
-            <span class="is-error">framework!</span>
-        </a>

-        
<a href="#" class="nes-badge is-splited">
-            <span class="is-dark">npm</span>
-            <span class="is-primary">1.1.0</span>
-        </a>

-        
<a href="#" class="nes-badge is-splited">
-            <span class="is-dark">test</span>
-            <span class="is-success">100%</span>
-        </a>

-        
<a href="#" class="nes-badge is-icon">
-            <span class="is-warning">
-                <i class="nes-icon star is-small"></i>
-            </span>
-            <span class="is-primary">Icons</span>
-        </a>

-        
<a href="#" class="nes-badge is-icon">
-            <span class="is-dark">hi</span>
-            <span class="is-warning">Text</span>
-        </a>

-        
-
+ 
<a href="#" class="nes-badge">
+  <span class="is-dark">NES.css</span>
+</a>
+<a href="#" class="nes-badge">
+  <span class="is-primary">is</span>
+</a>
+<a href="#" class="nes-badge">
+  <span class="is-success">a</span>
+</a>
+<a href="#" class="nes-badge">
+  <span class="is-warning">great</span>
+</a>
+<a href="#" class="nes-badge">
+  <span class="is-error">framework!</span>
+</a>
+<a href="#" class="nes-badge is-splited">
+  <span class="is-dark">npm</span>
+  <span class="is-primary">1.1.0</span>
+</a>
+<a href="#" class="nes-badge is-splited">
+  <span class="is-dark">test</span>
+  <span class="is-success">100%</span>
+</a>
+<a href="#" class="nes-badge is-icon">
+  <span class="is-warning">
+      <i class="nes-icon star is-small"></i>
+  </span>
+  <span class="is-primary">Icons</span>
+</a>
+<a href="#" class="nes-badge is-icon">
+  <span class="is-dark">hi</span>
+  <span class="is-warning">Text</span>
+</a>
+
@@ -650,37 +634,35 @@ Copied!
- 

-          
<i class="nes-icon heart is-small"></i>

-          
<i class="nes-icon heart"></i>

-          
<i class="nes-icon heart is-medium"></i>

-          
<i class="nes-icon heart is-large"></i>

-          
<i class="nes-icon heart is-empty"></i>

+        
<i class="nes-icon heart is-small"></i>
+<i class="nes-icon heart"></i>
+<i class="nes-icon heart is-medium"></i>
+<i class="nes-icon heart is-large"></i>
+<i class="nes-icon heart is-empty"></i>
 
-          
<i class="nes-icon star is-small"></i>

-          
<i class="nes-icon star"></i>

-          
<i class="nes-icon star is-medium"></i>

-          
<i class="nes-icon star is-large"></i>

+<i class="nes-icon star is-small"></i>
+<i class="nes-icon star"></i>
+<i class="nes-icon star is-medium"></i>
+<i class="nes-icon star is-large"></i>
 
-          
<i class="nes-icon star is-half is-small"></i>

-          
<i class="nes-icon star is-half"></i>

-          
<i class="nes-icon star is-half is-medium"></i>

-          
<i class="nes-icon star is-half is-large"></i>

+<i class="nes-icon star is-half is-small"></i>
+<i class="nes-icon star is-half"></i>
+<i class="nes-icon star is-half is-medium"></i>
+<i class="nes-icon star is-half is-large"></i>
 
-          
<i class="nes-icon star is-transparent is-small"></i>

-          
<i class="nes-icon star is-transparent"></i>

-          
<i class="nes-icon star is-transparent is-medium"></i>

-          
<i class="nes-icon star is-transparent is-large"></i>

+<i class="nes-icon star is-transparent is-small"></i>
+<i class="nes-icon star is-transparent"></i>
+<i class="nes-icon star is-transparent is-medium"></i>
+<i class="nes-icon star is-transparent is-large"></i>
 
-          
<i class="nes-icon star is-empty"></i>

+<i class="nes-icon star is-empty"></i>
 
-          
<i class="nes-icon like is-small"></i>

-          
<i class="nes-icon like"></i>

-          
<i class="nes-icon like is-medium"></i>

-          
<i class="nes-icon like is-large"></i>

-          
<i class="nes-icon like is-empty"></i>

-          
-        

+<i class="nes-icon like is-small"></i>
+<i class="nes-icon like"></i>
+<i class="nes-icon like is-medium"></i>
+<i class="nes-icon like is-large"></i>
+<i class="nes-icon like is-empty"></i>
+
@@ -745,63 +727,61 @@ Copied!
- 

-          
<i class="nes-icon twitter is-small"></i>

-          
<i class="nes-icon twitter"></i>

-          
<i class="nes-icon twitter is-medium"></i>

-          
<i class="nes-icon twitter is-large"></i>

+        
<i class="nes-icon twitter is-small"></i>
+<i class="nes-icon twitter"></i>
+<i class="nes-icon twitter is-medium"></i>
+<i class="nes-icon twitter is-large"></i>
 
-          
<i class="nes-icon facebook is-small"></i>

-          
<i class="nes-icon facebook"></i>

-          
<i class="nes-icon facebook is-medium"></i>

-          
<i class="nes-icon facebook is-large"></i>

+<i class="nes-icon facebook is-small"></i>
+<i class="nes-icon facebook"></i>
+<i class="nes-icon facebook is-medium"></i>
+<i class="nes-icon facebook is-large"></i>
 
-          
<i class="nes-icon github is-small"></i>

-          
<i class="nes-icon github"></i>

-          
<i class="nes-icon github is-medium"></i>

-          
<i class="nes-icon github is-large"></i>

+<i class="nes-icon github is-small"></i>
+<i class="nes-icon github"></i>
+<i class="nes-icon github is-medium"></i>
+<i class="nes-icon github is-large"></i>
 
-          
<i class="nes-icon youtube is-small"></i>

-          
<i class="nes-icon youtube"></i>

-          
<i class="nes-icon youtube is-medium"></i>

-          
<i class="nes-icon youtube is-large"></i>

+<i class="nes-icon youtube is-small"></i>
+<i class="nes-icon youtube"></i>
+<i class="nes-icon youtube is-medium"></i>
+<i class="nes-icon youtube is-large"></i>
 
-          
<i class="nes-icon google is-small"></i>

-          
<i class="nes-icon google"></i>

-          
<i class="nes-icon google is-medium"></i>

-          
<i class="nes-icon google is-large"></i>

+<i class="nes-icon google is-small"></i>
+<i class="nes-icon google"></i>
+<i class="nes-icon google is-medium"></i>
+<i class="nes-icon google is-large"></i>
 
-          
<i class="nes-icon medium is-small"></i>

-          
<i class="nes-icon medium"></i>

-          
<i class="nes-icon medium is-medium"></i>

-          
<i class="nes-icon medium is-large"></i>

+<i class="nes-icon medium is-small"></i>
+<i class="nes-icon medium"></i>
+<i class="nes-icon medium is-medium"></i>
+<i class="nes-icon medium is-large"></i>
 
-          
<i class="nes-icon twitch is-small"></i>

-          
<i class="nes-icon twitch"></i>

-          
<i class="nes-icon twitch is-medium"></i>

-          
<i class="nes-icon twitch is-large"></i>

+<i class="nes-icon twitch is-small"></i>
+<i class="nes-icon twitch"></i>
+<i class="nes-icon twitch is-medium"></i>
+<i class="nes-icon twitch is-large"></i>
 
-          
<i class="nes-icon reddit is-small"></i>

-          
<i class="nes-icon reddit"></i>

-          
<i class="nes-icon reddit is-medium"></i>

-          
<i class="nes-icon reddit is-large"></i>

+<i class="nes-icon reddit is-small"></i>
+<i class="nes-icon reddit"></i>
+<i class="nes-icon reddit is-medium"></i>
+<i class="nes-icon reddit is-large"></i>
 
-          
<i class="nes-icon whatsapp is-small"></i>

-          
<i class="nes-icon whatsapp"></i>

-          
<i class="nes-icon whatsapp is-medium"></i>

-          
<i class="nes-icon whatsapp is-large"></i>

+<i class="nes-icon whatsapp is-small"></i>
+<i class="nes-icon whatsapp"></i>
+<i class="nes-icon whatsapp is-medium"></i>
+<i class="nes-icon whatsapp is-large"></i>
 
-          
<i class="nes-icon gmail is-small"></i>

-          
<i class="nes-icon gmail"></i>

-          
<i class="nes-icon gmail is-medium"></i>

-          
<i class="nes-icon gmail is-large"></i>

+<i class="nes-icon gmail is-small"></i>
+<i class="nes-icon gmail"></i>
+<i class="nes-icon gmail is-medium"></i>
+<i class="nes-icon gmail is-large"></i>
 
-          
<i class="nes-icon linkedin is-small"></i>

-          
<i class="nes-icon linkedin"></i>

-          
<i class="nes-icon linkedin is-medium"></i>

-          
<i class="nes-icon linkedin is-large"></i>

-          
-        

+<i class="nes-icon linkedin is-small"></i>
+<i class="nes-icon linkedin"></i>
+<i class="nes-icon linkedin is-medium"></i>
+<i class="nes-icon linkedin is-large"></i>
+
@@ -835,32 +815,30 @@ Copied!
- 

-          
<i class="nes-icon close is-small"></i>

-          
<i class="nes-icon close"></i>

-          
<i class="nes-icon close is-medium"></i>

-          
<i class="nes-icon close is-large"></i>

+        
<i class="nes-icon close is-small"></i>
+<i class="nes-icon close"></i>
+<i class="nes-icon close is-medium"></i>
+<i class="nes-icon close is-large"></i>
 
-          
<i class="nes-octocat animate"></i>

+<i class="nes-octocat animate"></i>
 
-          
<i class="nes-icon trophy is-small"></i>

-          
<i class="nes-icon trophy"></i>

-          
<i class="nes-icon trophy is-medium"></i>

-          
<i class="nes-icon trophy is-large"></i>

+<i class="nes-icon trophy is-small"></i>
+<i class="nes-icon trophy"></i>
+<i class="nes-icon trophy is-medium"></i>
+<i class="nes-icon trophy is-large"></i>
 
-          
<i class="nes-mario"></i>

-          
<i class="nes-ash"></i>

-          
<i class="nes-pokeball"></i>

+<i class="nes-mario"></i>
+<i class="nes-ash"></i>
+<i class="nes-pokeball"></i>
 
-          
<i class="nes-bulbasaur"></i>

-          
<i class="nes-charmander"></i>

-          
<i class="nes-squirtle"></i>

+<i class="nes-bulbasaur"></i>
+<i class="nes-charmander"></i>
+<i class="nes-squirtle"></i>
 
-          
<i class="nes-smartphone"></i>

-          
<i class="nes-phone"></i>

-          
<i class="nes-kirby"></i>

-          
-        

+<i class="nes-smartphone"></i>
+<i class="nes-phone"></i>
+<i class="nes-kirby"></i>
+
@@ -875,13 +853,11 @@ Copied!
- 

-          
<i class="nes-logo"></i>

-          
<i class="nes-jp-logo"></i>

-          
<i class="snes-logo"></i>

-          
<i class="snes-jp-logo"></i>

-          
-
+ 
<i class="nes-logo"></i>
+<i class="nes-jp-logo"></i>
+<i class="snes-logo"></i>
+<i class="snes-jp-logo"></i>
+
diff --git a/package.json b/package.json index f73b180..f90d045 100644 --- a/package.json +++ b/package.json @@ -146,11 +146,17 @@ "string-quotes": "double", "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true - } + }, + "ignoreFiles": [ + "demo/lib/*" + ] }, "eslintConfig": { "extends": "airbnb-base" }, + "eslintIgnore": [ + "demo/lib/*" + ], "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog"