app.js

!function(e){function t(t){for(var a,c,i=t[0],s=t[1],m=t[2],o=0,d=[];o<i.length;o++)c=i[o],n[c]&&d.push(n[c][0]),n[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(u&&u(t);d.length;)d.shift()();return r.push.apply(r,m||[]),l()}function l(){for(var e,t=0;t<r.length;t++){for(var l=r[t],a=!0,i=1;i<l.length;i++){var s=l[i];0!==n[s]&&(a=!1)}a&&(r.splice(t--,1),e=c(c.s=l[0]))}return e}var a={},n={0:0},r=[];function c(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,c),l.l=!0,l.exports}c.m=e,c.c=a,c.d=function(e,t,l){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:l})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(l,a,function(t){return e[t]}.bind(null,a));return l},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="";var i=window.webpackJsonp=window.webpackJsonp||[],s=i.push.bind(i);i.push=t,i=i.slice();for(var m=0;m<i.length;m++)t(i[m]);var u=s;r.push([21,3]),l()}([,,,function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Typography"),e.createElement("p",null),e.createElement("div",null,e.createElement("h1",null,"This is h1"),e.createElement("h2",null,"This is h2"),e.createElement("h3",null,"This is h3"),e.createElement("h4",null,"This is h4"),e.createElement("h5",null,"This is h5"),e.createElement("h6",null,"This is h6"),e.createElement("p",null,"this is a paragraph normal text"),e.createElement("pre",null,"this is pre formated text, use for 'code', 'kbd', 'samp'")))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Button types and colors"),e.createElement("p",null),e.createElement("div",null,e.createElement("button",null,"Button"),e.createElement("button",{className:"success"},"Button"),e.createElement("button",{className:"warning"},"Button"),e.createElement("button",{className:"error"},"Button"),e.createElement("button",{className:"pseudo"},"Button"),e.createElement("button",{disabled:!0},"Button")),e.createElement("div",null,e.createElement("a",{className:"button"},"Link"),e.createElement("a",{className:"button success"},"Link"),e.createElement("a",{className:"button warning"},"Link"),e.createElement("a",{className:"button error"},"Link"),e.createElement("a",{className:"button pseudo"},"Link"),e.createElement("a",{className:"button",disabled:!0},"Link")),e.createElement("div",null,e.createElement("input",{type:"submit",value:"Submit"}),e.createElement("input",{type:"submit",className:"success",value:"Submit"}),e.createElement("input",{type:"submit",className:"warning",value:"Submit"}),e.createElement("input",{type:"submit",className:"error",value:"Submit"}),e.createElement("input",{type:"submit",className:"pseudo",value:"Submit"}),e.createElement("input",{disabled:!0,type:"submit",value:"Submit"})),e.createElement("div",null,e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"toggle button"},"Toggle")),e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"toggle button success"},"Toggle")),e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"toggle button warning"},"Toggle")),e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"toggle button error"},"Toggle")),e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"toggle button pseudo"},"Toggle")),e.createElement("label",null,e.createElement("input",{disabled:!0,type:"checkbox"}),e.createElement("span",{disabled:!0,className:"toggle button"},"Toggle"))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){function l(){return e.createElement("div",{className:"full half-600 third-800"},e.createElement("article",{className:"card"},e.createElement("img",{alt:"forest",src:"assets/images/forest.jpg"}),e.createElement("section",null,"This is a nice forest. What do you want to do with it?"),e.createElement("footer",null,e.createElement("button",null,"Enjoy"),e.createElement("button",{className:"dangerous"},"Go away"))))}function a(){return e.createElement("div",{className:"full half-600 third-800"},e.createElement("article",{className:"card"},e.createElement("header",null,e.createElement("h3",null,"A more elaborate card")),e.createElement("section",null,e.createElement("code",null,"It has some text")),e.createElement("footer",null,"And even a footer! Oh, dear lord. What next?")),e.createElement("div",null,e.createElement("article",{className:"card"},e.createElement("p",null,"Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore..."))))}function n(){return e.createElement("div",{className:"full half-600 third-800"},e.createElement("article",{className:"card"},e.createElement("header",null,e.createElement("h1",null,"Header 1"))),e.createElement("article",{className:"card"},e.createElement("header",null,e.createElement("h2",null,"Header 2"))),e.createElement("article",{className:"card"},e.createElement("header",null,e.createElement("h3",null,"Header 3"))),e.createElement("article",{className:"card"},e.createElement("header",null,e.createElement("h4",null,"Header 4"))))}function r(){return e.createElement("div",{className:"card"},e.createElement("p",null,"This is a one line card"))}t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Card"),e.createElement("p",null),e.createElement("div",{className:"flex three"},e.createElement(l,null),e.createElement(a,null),e.createElement(n,null)),e.createElement(r,null))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Checkbox"),e.createElement("p",null),e.createElement("label",null,e.createElement("input",{type:"checkbox"}),e.createElement("span",{className:"checkable"},"Check me out (;")),e.createElement("br",null),e.createElement("input",{id:"checktest",type:"checkbox",defaultChecked:!0}),e.createElement("label",{htmlFor:"checktest",className:"checkable"},"Uncheck me"))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Flex Layout"),e.createElement("p",null),e.createElement("h3",null,"Mobile first layout is default"),e.createElement("div",{className:"flex two four-600 six-800 demo"},e.createElement("div",null,e.createElement("span",null,"1")),e.createElement("div",null,e.createElement("span",null,"2")),e.createElement("div",{className:"full half-600 third-800"},e.createElement("span",null,"3")),e.createElement("div",null,e.createElement("span",null,"4")),e.createElement("div",null,e.createElement("span",null,"5")),e.createElement("div",null,e.createElement("span",null,"6")),e.createElement("div",null,e.createElement("span",null,"7")),e.createElement("div",null,e.createElement("span",null,"8")),e.createElement("div",null,e.createElement("span",null,"9")),e.createElement("div",{className:"off-half off-fourth-600 off-sixth-800"},e.createElement("span",null,"10"))),e.createElement("h3",null,"Content can be centered"),e.createElement("div",{className:"flex three justify-center demo"},e.createElement("div",null,e.createElement("span",null,"1")),e.createElement("div",null,e.createElement("span",null,"2")),e.createElement("div",null,e.createElement("span",null,"3")),e.createElement("div",null,e.createElement("span",null,"4")),e.createElement("div",null,e.createElement("span",null,"5"))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){var l={display:"flex",flex:1,alignSelf:"stretch"},a={alignSelf:"stretch",justifyContent:"center",alignItems:"stretch"},n={display:"flex",flex:1,alignSelf:"center"},r={display:"flex",flex:1,alignSelf:"flex-end"};t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"More Flex Layout"),e.createElement("p",null),e.createElement("h3",null,"Basic Grids"),e.createElement("p",null,"The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default."),e.createElement("div",{className:"flex grow demo"},e.createElement("div",null,e.createElement("div",null,"1/2")),e.createElement("div",null,e.createElement("div",null,"1/2"))),e.createElement("div",{className:"flex grow demo"},e.createElement("div",null,e.createElement("div",null,"1/3")),e.createElement("div",null,e.createElement("div",null,"1/3")),e.createElement("div",null,e.createElement("div",null,"1/3"))),e.createElement("div",{className:"flex grow demo"},e.createElement("div",null,e.createElement("div",null,"1/4")),e.createElement("div",null,e.createElement("div",null,"1/4")),e.createElement("div",null,e.createElement("div",null,"1/4")),e.createElement("div",null,e.createElement("div",null,"1/4"))),e.createElement("div",{className:"flex two align-top demo"},e.createElement("div",{style:l},e.createElement("div",null,"Full-height, even when my content doesn't fill the space. Cheating a bit by using inline style. TODO: fix me!")),e.createElement("div",null,e.createElement("div",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque."))),e.createElement("h3",null,"Individual Sizing"),e.createElement("p",null,"When equal widths aren’t what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal."),e.createElement("p",null,"The cells below labeled “auto” do not have sizing classes specified."),e.createElement("div",{className:"flex grow demo"},e.createElement("div",{className:"half"},e.createElement("div",null,"1/2")),e.createElement("div",null,e.createElement("div",null,"auto")),e.createElement("div",null,e.createElement("div",null,"auto"))),e.createElement("div",{className:"flex grow demo"},e.createElement("div",null,e.createElement("div",null,"auto")),e.createElement("div",{className:"third"},e.createElement("div",null,"1/3"))),e.createElement("div",{className:"flex three grow demo"},e.createElement("div",{className:"fourth"},e.createElement("div",null,"1/4")),e.createElement("div",null,e.createElement("div",null,"auto")),e.createElement("div",{className:"third"},e.createElement("div",null,"1/3"))),e.createElement("h3",null,"Responsive"),e.createElement("p",null,"Responsive Grids work by adding media classes to the Grid cells or containers. When those media values are met, the grids automatically adjust accordingly."),e.createElement("p",null,"The cells below should be full width by default and scaled to fit above ",e.createElement("code",null,"48em"),". Resize your browser to see them in action."),e.createElement("div",{className:"flex demo"},e.createElement("div",{className:"full half-800"},e.createElement("div",{className:"Demo"},"Full / Halves")),e.createElement("div",{className:"full half-800"},e.createElement("div",{className:"Demo"},"Full / Halves"))),e.createElement("div",{className:"flex demo"},e.createElement("div",{className:"full third-800"},e.createElement("div",null,"Full / Thirds")),e.createElement("div",{className:"full third-800"},e.createElement("div",null,"Full / Thirds")),e.createElement("div",{className:"full third-800"},e.createElement("div",null,"Full / Thirds"))),e.createElement("h3",null,"Flex-ception"),e.createElement("p",null,"Flex layouts are infinitely nestable inside of other flex components. TODO: fix me!"),e.createElement("div",{className:"flex grow three align-center demo"},e.createElement("div",{className:"two-third"},e.createElement("div",null,e.createElement("div",{className:"flex two demo"},e.createElement("div",{className:"third"},e.createElement("div",null,"1/3")),e.createElement("div",{className:"two-third"},e.createElement("div",null,e.createElement("div",{className:"flex demo"},e.createElement("div",{className:"half"},e.createElement("div",null,"1/2")),e.createElement("div",{className:"half"},e.createElement("div",null,"1/2")))))))),e.createElement("div",{className:"third",style:a},e.createElement("div",null,"1/3"))),e.createElement("h2",null,"Alignment Features"),e.createElement("h3",null,"Top-aligned Grid Cells"),e.createElement("div",{className:"flex three align-top demo"},e.createElement("div",null,e.createElement("div",null,"This cell should be top-aligned.")),e.createElement("div",null,e.createElement("div",null,"Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.")),e.createElement("div",null,e.createElement("div",null,"This cell should be top-aligned."))),e.createElement("h3",null,"Bottom-aligned Grid Cells"),e.createElement("div",{className:"flex three align-bottom demo"},e.createElement("div",null,e.createElement("div",null,"This cell should be bottom-aligned.")),e.createElement("div",null,e.createElement("div",null,"Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in.")),e.createElement("div",null,e.createElement("div",null,"This cell should be bottom-aligned."))),e.createElement("h3",null,"Vertically Centered Grid Cells"),e.createElement("div",{className:"flex three align-center demo"},e.createElement("div",null,e.createElement("div",null,"This cell should be vertically-centered with the cell to its right.")),e.createElement("div",null,e.createElement("div",null,"Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus. Nullam vel facilisis libero. Duis semper lobortis elit, vitae dictum erat."))),e.createElement("h3",null,"Mixed Vertical Alignment"),e.createElement("div",{className:"flex four align-top demo"},e.createElement("div",null,e.createElement("div",null,"This cell should be top aligned.")),e.createElement("div",null,e.createElement("div",null,"Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh. Ut interdum ligula id metus hendrerit cursus. Integer eu leo felis. Aenean commodo ultrices nunc, sit amet blandit elit gravida in. Sed est ligula, ornare ac nisi adipiscing, iaculis facilisis tellus.")),e.createElement("div",{style:n},e.createElement("div",null,"This cell should be center-aligned.")),e.createElement("div",{style:r},e.createElement("div",null,"This cell should be bottom-aligned."))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",{id:"input-test"},"Input"),e.createElement("p",null),e.createElement("form",null,e.createElement("div",{className:"flex two"},e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{placeholder:"Full name"})),e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{type:"number",placeholder:"Number"}))),e.createElement("div",{className:"flex two"},e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{type:"email",placeholder:"Email"})),e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{type:"password",placeholder:"Password"}))),e.createElement("div",{className:"flex two"},e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{type:"file"})),e.createElement("label",{"aria-describedby":"input-test"},e.createElement("input",{type:"color"}))),e.createElement("div",{className:"flex one"},e.createElement("label",{"aria-describedby":"input-test"},e.createElement("textarea",{placeholder:"Full description"})))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Label"),e.createElement("p",null),e.createElement("div",null,e.createElement("h1",null,"h1 is important",e.createElement("span",{className:"label"},"Normal")),e.createElement("h2",null,"h2 is important too",e.createElement("span",{className:"label success"},"Success")),e.createElement("h3",null,"Is h3 important?",e.createElement("span",{className:"label warning"},"Warning")),e.createElement("h4",null,"h4 is not so important",e.createElement("span",{className:"label error"},"Error")),e.createElement("p",null,"p is normal text",e.createElement("span",{className:"label"},"Normal"))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Modal"),e.createElement("p",null,e.createElement("label",{htmlFor:"modal-test",className:"button"},"Show modal")),e.createElement("div",{className:"modal"},e.createElement("input",{id:"modal-test",type:"checkbox"}),e.createElement("label",{htmlFor:"modal-test",className:"overlay"}),e.createElement("article",null,e.createElement("header",null,e.createElement("h3",null,"Great offer"),e.createElement("label",{htmlFor:"modal-test",className:"close"},"×")),e.createElement("section",null,"We have a special offer for you. I am sure you will love it! However this does look spammy..."),e.createElement("footer",null,e.createElement("a",{className:"button",href:"#"},"See offer"),e.createElement("label",{htmlFor:"modal-test",className:"button dangerous"},"Cancel")))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Nav"),e.createElement("p",null),e.createElement("nav",{style:{position:"relative",zIndex:9}},e.createElement("a",{href:"#",className:"brand"},e.createElement("img",{className:"logo",alt:"logo",src:"assets/branding/kiscss.svg.png"})),e.createElement("input",{id:"demo-nav",type:"checkbox",className:"show"}),e.createElement("label",{htmlFor:"demo-nav",className:"burger icon-menu"}),e.createElement("ul",{className:"menu"},e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-login"},"Login")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-logout"},"Logout")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-cog"},"Settings")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-cloud"},"Cloud")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-user-add"},"Add User")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-user-remove"},"Remove User")),e.createElement("li",null,e.createElement("a",{href:"#",className:"icon-list"},"List")))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Radio button"),e.createElement("p",null),e.createElement("label",null,e.createElement("input",{type:"radio",name:"radiodemo"}),e.createElement("span",{className:"checkable"},"Select me")),e.createElement("br",null),e.createElement("label",null,e.createElement("input",{defaultChecked:!0,type:"radio",name:"radiodemo"}),e.createElement("span",{className:"checkable"},"Or me")))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Select"),e.createElement("p",null),e.createElement("select",null,e.createElement("option",null,"Select an option"),e.createElement("option",null,"Good option"),e.createElement("option",null,"Nice option"),e.createElement("option",null,"Cheap option")))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Table"),e.createElement("p",null),e.createElement("table",{className:"primary"},e.createElement("thead",null,e.createElement("tr",null,e.createElement("th",null,"Name"),e.createElement("th",null,"City"),e.createElement("th",null,"Age"))),e.createElement("tbody",null,e.createElement("tr",null,e.createElement("td",null,"Francisco"),e.createElement("td",null,"Valencia, Spain"),e.createElement("td",null,"23")),e.createElement("tr",null,e.createElement("td",null,"Eve"),e.createElement("td",null,"San Francisco, USA"),e.createElement("td",null,"22")),e.createElement("tr",null,e.createElement("td",null,"Martin"),e.createElement("td",null,"New York, USA"),e.createElement("td",null,"45")),e.createElement("tr",null,e.createElement("td",null,"Sarah"),e.createElement("td",null,"London, UK"),e.createElement("td",null,"25")))))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){function l(){return e.createElement("div",{className:"tabs"},e.createElement("input",{id:"tab-1",type:"radio",name:"tabgroupB",defaultChecked:!0}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tab-1"},"Forest"),e.createElement("div",{className:"tab"},e.createElement("img",{alt:"forrest",src:"assets/images/forest.jpg"})),e.createElement("input",{id:"tab-2",type:"radio",name:"tabgroupB"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tab-2"},"Lake"),e.createElement("div",{className:"tab"},e.createElement("img",{alt:"lake",src:"assets/images/lake.jpg"})),e.createElement("input",{id:"tab-3",type:"radio",name:"tabgroupB"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tab-3"},"Balloon"),e.createElement("div",{className:"tab"},e.createElement("img",{alt:"balloon",src:"assets/images/balloon.jpg"})))}function a(){return e.createElement("div",{className:"tabs"},e.createElement("input",{id:"tabC-1",type:"radio",name:"tabgroupC",defaultChecked:!0}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabC-1"},"1"),e.createElement("div",{className:"tab card"},e.createElement("header",null,e.createElement("h3",null,"Super important notice!")),e.createElement("p",null,"Thank you for registering! By doing so you agree to the ",e.createElement("a",{href:"#"},"Terms and conditions")),e.createElement("footer",null,e.createElement("label",{className:"button",htmlFor:"tabC-2"},"Agree"))),e.createElement("input",{id:"tabC-2",type:"radio",name:"tabgroupC"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabC-2"},"2"),e.createElement("div",{className:"tab card"},e.createElement("header",null,e.createElement("h3",null,"Your basic data")),e.createElement("section",null,e.createElement("label",null,e.createElement("input",{type:"text",placeholder:"Full Name"}))),e.createElement("section",null,e.createElement("select",null,e.createElement("option",null,"Where did you find us?"),e.createElement("option",null,"Facebook"),e.createElement("option",null,"Twitter"),e.createElement("option",null,"Linkedin"))),e.createElement("footer",null,e.createElement("label",{className:"button",htmlFor:"tabC-3"},"Next"),e.createElement("label",{className:"button dangerous",htmlFor:"tabC-1"},"Back"))),e.createElement("input",{id:"tabC-3",type:"radio",name:"tabgroupC"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabC-3"},"3"),e.createElement("div",{className:"tab card"},e.createElement("header",null,e.createElement("h3",null,"Create account")),e.createElement("form",null,e.createElement("section",null,e.createElement("label",null,e.createElement("input",{type:"email",placeholder:"Email"}))),e.createElement("section",null,e.createElement("label",null,e.createElement("input",{type:"password",placeholder:"Password"})))),e.createElement("footer",null,e.createElement("button",{className:"success"},"Finish!"),e.createElement("label",{className:"button dangerous",htmlFor:"tabC-2"},"Back"))))}function n(){return e.createElement("div",{className:"tabs"},e.createElement("input",{id:"tabA-1",type:"radio",name:"tabgroupA",defaultChecked:!0}),e.createElement("label",{className:"button toggle",htmlFor:"tabA-1"},"Tab 1"),e.createElement("div",{className:"tab"},e.createElement("h3",null,"This is the first tab"),e.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),e.createElement("input",{id:"tabA-2",type:"radio",name:"tabgroupA"}),e.createElement("label",{className:"button toggle",htmlFor:"tabA-2"},"Tab 2"),e.createElement("div",{className:"tab"},e.createElement("h3",null,"This is the second tab"),e.createElement("p",null,"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")))}function r(){return e.createElement("div",{className:"tabs"},e.createElement("input",{id:"tabD-1",type:"radio",name:"tabgroupD",defaultChecked:!0}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabD-1"},"•"),e.createElement("section",{className:"tab"},e.createElement("h2",null,"This is the first tab"),e.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),e.createElement("input",{id:"tabD-2",type:"radio",name:"tabgroupD"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabD-2"},"•"),e.createElement("section",{className:"tab"},e.createElement("h2",null,"This is the second tab"),e.createElement("p",null,"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")),e.createElement("input",{id:"tabD-3",type:"radio",name:"tabgroupD"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabD-3"},"•"),e.createElement("section",{className:"tab"},e.createElement("h2",null,"This is the third tab"),e.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")),e.createElement("input",{id:"tabD-4",type:"radio",name:"tabgroupD"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabD-4"},"•"),e.createElement("section",{className:"tab"},e.createElement("h2",null,"This is the fourth tab"),e.createElement("p",null,"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.")),e.createElement("input",{id:"tabD-5",type:"radio",name:"tabgroupD"}),e.createElement("label",{className:"pseudo button toggle",htmlFor:"tabD-5"},"•"),e.createElement("section",{className:"tab"},e.createElement("h2",null,"This is the fifth tab"),e.createElement("p",null,"To illustrate that we can have more than 4 tabs")))}function c(){return e.createElement("div",{className:"tabs"},e.createElement("input",{name:"tabs-a",type:"radio",id:"tab-1a",defaultChecked:!0}),e.createElement("label",{htmlFor:"tab-1a",className:"pseudo button toggle"},"Orange"),e.createElement("section",{className:"card tab"},e.createElement("h1",null,"Orange"),e.createElement("p",null,"The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae"),e.createElement("p",null,"The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.")),e.createElement("input",{name:"tabs-a",type:"radio",id:"tab-2a"}),e.createElement("label",{htmlFor:"tab-2a",className:"pseudo button toggle"},"Tangerine"),e.createElement("section",{className:"card tab"},e.createElement("h1",null,"Tangerine"),e.createElement("p",null,"The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata)."),e.createElement("p",null,"The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.")),e.createElement("input",{name:"tabs-a",type:"radio",id:"tab-3a"}),e.createElement("label",{htmlFor:"tab-3a",className:"pseudo button toggle"},"Clemantine"),e.createElement("section",{className:"card tab"},e.createElement("h1",null,"Clemantine"),e.createElement("p",null,"A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.")))}function i(){return e.createElement("div",{className:"tabs"},e.createElement("input",{name:"tabs-b",type:"radio",id:"tab-1b",defaultChecked:!0}),e.createElement("label",{htmlFor:"tab-1b",className:"pseudo button toggle"},"Orange"),e.createElement("div",{className:"tab"},e.createElement("h1",null,"Orange"),e.createElement("p",null,"The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae"),e.createElement("p",null,"The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.")),e.createElement("input",{name:"tabs-b",type:"radio",id:"tab-2b"}),e.createElement("label",{htmlFor:"tab-2b",className:"pseudo button toggle"},"Tangerine"),e.createElement("div",{className:"tab"},e.createElement("h1",null,"Tangerine"),e.createElement("p",null,"The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata)."),e.createElement("p",null,"The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.")),e.createElement("input",{name:"tabs-b",type:"radio",id:"tab-3b"}),e.createElement("label",{htmlFor:"tab-3b",className:"pseudo button toggle"},"Clemantine"),e.createElement("div",{className:"tab"},e.createElement("h1",null,"Clemantine"),e.createElement("p",null,"A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.")))}t.a=function(){return e.createElement("div",{className:"container"},e.createElement("h2",null,"Simple CSS only Tabs"),e.createElement("p",null),e.createElement("h3",null,"Tabs can contain images and forms"),e.createElement("div",{className:"flex one two-600 align-top"},e.createElement(l,null),e.createElement(a,null)),e.createElement("h3",null,"Tab controls (switchers) can be styled"),e.createElement("div",{className:"flex one two-600 align-top"},e.createElement(n,null),e.createElement(r,null)),e.createElement("h3",null,"Tabs can contain cards or not"),e.createElement("div",{className:"flex one two-600 align-top"},e.createElement(c,null),e.createElement(i,null)))}}).call(this,l(0))},function(e,t,l){"use strict";(function(e){t.a=function(){return e.createElement("div",{className:"container",style:{textAlign:"center"}},e.createElement("h2",null,"Tooltip"),e.createElement("p",null),e.createElement("button",{"data-tooltip":"This is a great tooltip","data-tooltip-left":!0},"Left"),e.createElement("button",{"data-tooltip":"This is a great tooltip","data-tooltip-bottom":!0},"Bottom"),e.createElement("button",{"data-tooltip":"This is a great tooltip","data-tooltip-top":!0},"Top"),e.createElement("button",{"data-tooltip":"This is a great tooltip","data-tooltip-right":!0},"Right"),e.createElement("br",null),e.createElement("br",null),e.createElement("br",null))}}).call(this,l(0))},function(e,t,l){"use strict";function a(e){return function(t){var l=new FileReader;l.onloadend=function(){e.current.style.backgroundImage="url("+l.result+")"},l.readAsDataURL(t.target.files[0])}}function n(){var e=h.a.createRef(),t=a(e);return h.a.createElement("div",null,h.a.createElement("label",{ref:e,className:"dropzone",style:{backgroundImage:"url(assets/images/forest.jpg)"}},h.a.createElement("input",{onChange:t,name:"filea",title:"Drop image or click me",type:"file"})))}function r(){var e=h.a.createRef(),t=a(e);return h.a.createElement("div",null,h.a.createElement("label",{ref:e,className:"dropzone"},h.a.createElement("input",{onChange:t,name:"fileb",title:"Drop image or click me",type:"file"})))}function c(){var e=h.a.createRef(),t=a(e);return h.a.createElement("div",null,h.a.createElement("label",{ref:e,className:"dropzone"},h.a.createElement("input",{onChange:t,name:"filec",title:"Drop image or click me",type:"file"})))}function i(){return h.a.createElement("div",{className:"container"},h.a.createElement("h2",null,"Dropzone"),h.a.createElement("p",null),h.a.createElement("div",{className:"flex three"},h.a.createElement(n,null),h.a.createElement(r,null),h.a.createElement(c,null)))}function s(e){return function(t){var l=new FileReader;l.onloadend=function(){e.current.style.backgroundImage="url("+l.result+")"},l.readAsDataURL(t.target.files[0])}}function m(){return h.a.createElement(h.a.Fragment,null,h.a.createElement("h3",null,"Buttons stack"),h.a.createElement("p",null),h.a.createElement("div",{className:"flex two four-800"},h.a.createElement("div",null,h.a.createElement("span",{className:"stack button icon-puzzle"},"Plugins"),h.a.createElement("span",{className:"stack button icon-picture"},"Demo"),h.a.createElement("span",{className:"stack button icon-spin-1 spin"},"I can spin")),h.a.createElement("div",null,h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"radio",name:"stack",defaultChecked:!0}),h.a.createElement("span",{className:"button toggle icon-videocam"},"Record")),h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"radio",name:"stack"}),h.a.createElement("span",{className:"button toggle icon-play"},"Play")),h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"radio",name:"stack"}),h.a.createElement("span",{className:"button toggle icon-stop"},"Stop"))),h.a.createElement("div",null,h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"checkbox",defaultChecked:!0}),h.a.createElement("span",{className:"button toggle icon-login"},"Login")),h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"checkbox",defaultChecked:!0}),h.a.createElement("span",{className:"button toggle icon-logout"},"Logout")),h.a.createElement("label",{className:"stack"},h.a.createElement("input",{type:"checkbox"}),h.a.createElement("span",{className:"button toggle icon-cog"},"Settings"))),h.a.createElement("div",null,h.a.createElement("span",{className:"stack pseudo button icon-paper-plane"},"Activate"),h.a.createElement("span",{className:"stack pseudo button icon-mobile"},"Mobile"),h.a.createElement("span",{className:"stack pseudo button icon-list"},"List"))))}function u(){return h.a.createElement(h.a.Fragment,null,h.a.createElement("h3",null,"Image stack"),h.a.createElement("p",null),h.a.createElement("div",{className:"flex two four-800"},h.a.createElement("div",null,h.a.createElement("img",{className:"stack",alt:"forest",src:"assets/images/forest.jpg"}),h.a.createElement("a",{className:"stack button"},"Forest")),h.a.createElement("div",null,h.a.createElement("img",{className:"stack",alt:"balloon",src:"assets/images/balloon.jpg"}),h.a.createElement("a",{className:"stack button"},"Balloon")),h.a.createElement("div",null,h.a.createElement("img",{className:"stack",alt:"lake",src:"assets/images/lake.jpg"}),h.a.createElement("a",{className:"stack button"},"Lake")),h.a.createElement("div",null,h.a.createElement("img",{className:"stack",alt:"halong",src:"assets/images/halong.jpg"}),h.a.createElement("a",{className:"stack button"},"Halong bay"))))}function o(){var e=h.a.createRef(),t=h.a.createRef(),l=h.a.createRef();return h.a.createElement(h.a.Fragment,null,h.a.createElement("h3",{id:"stack-test"},"Form stack"),h.a.createElement("p",null),h.a.createElement("form",null,h.a.createElement("div",{className:"flex one two-600 four-800"},h.a.createElement("div",null,h.a.createElement("label",{"aria-describedby":"stack-test"},h.a.createElement("input",{className:"stack",placeholder:"Name"})),h.a.createElement("label",{"aria-describedby":"stack-test"},h.a.createElement("input",{className:"stack",type:"email",placeholder:"Email"})),h.a.createElement("label",{"aria-describedby":"stack-test"},h.a.createElement("input",{className:"stack",type:"password",placeholder:"Password"}))),h.a.createElement("div",null,h.a.createElement("select",{className:"stack","aria-describedby":"stack-test"},h.a.createElement("option",null,"Select an option"),h.a.createElement("option",null,"Good option"),h.a.createElement("option",null,"Nice option"),h.a.createElement("option",null,"Cheap option")),h.a.createElement("select",{className:"stack","aria-describedby":"stack-test"},h.a.createElement("option",null,"Select an option"),h.a.createElement("option",null,"Good option"),h.a.createElement("option",null,"Nice option"),h.a.createElement("option",null,"Cheap option")),h.a.createElement("select",{className:"stack","aria-describedby":"stack-test"},h.a.createElement("option",null,"Select an option"),h.a.createElement("option",null,"Good option"),h.a.createElement("option",null,"Nice option"),h.a.createElement("option",null,"Cheap option"))),h.a.createElement("div",null,h.a.createElement("textarea",{"aria-describedby":"stack-test",className:"stack",placeholder:"Textarea"}),h.a.createElement("textarea",{"aria-describedby":"stack-test",className:"stack",placeholder:"Textarea"}),h.a.createElement("textarea",{"aria-describedby":"stack-test",className:"stack",placeholder:"Textarea"})),h.a.createElement("div",null,h.a.createElement("label",{ref:e,onChange:s(e),className:"dropzone stack","aria-describedby":"stack-test"},h.a.createElement("input",{name:"filea",title:"Drop image or click me",type:"file"})),h.a.createElement("label",{ref:t,onChange:s(t),className:"dropzone stack","aria-describedby":"stack-test"},h.a.createElement("input",{name:"filea",title:"Drop image or click me",type:"file"})),h.a.createElement("label",{ref:l,onChange:s(l),className:"dropzone stack","aria-describedby":"stack-test"},h.a.createElement("input",{name:"filea",title:"Drop image or click me",type:"file"}))))))}function d(){return h.a.createElement("div",{className:"container"},h.a.createElement("h2",null,"Stack"),h.a.createElement("p",null),h.a.createElement(m,null),h.a.createElement(u,null),h.a.createElement(o,null))}function E(){return h.a.createElement("nav",null,h.a.createElement("a",{href:"index.html",className:"brand"},h.a.createElement("img",{className:"logo",alt:"logo",height:"2.4rem",src:"assets/branding/kiscss.svg.png"})),h.a.createElement("input",{id:"nav",type:"checkbox",className:"show"}),h.a.createElement("label",{htmlFor:"nav",className:"burger icon-menu"}),h.a.createElement("ul",{className:"menu"},h.a.createElement("li",null,h.a.createElement("a",{href:"kitchen-sink.html",className:"icon-docs"},"Kitchen-Sink-Test")),h.a.createElement("li",null,h.a.createElement("a",{href:"https://github.com/million-views/kis.css",target:"_blank",rel:"noreferrer",className:"icon-puzzle"},"GitHub")),h.a.createElement("li",null,h.a.createElement("a",{href:"https://github.com/million-views/kis.css/blob/master/README.md",className:"icon-help"},"Documentation"))))}var p=l(0),h=l.n(p),b=l(3),g=l(4),f=l(5),v=l(6),N=l(7),y=l(8),k=l(9),x=l(10),w=l(11),T=l(12),C=l(13),F=l(14),S=l(15),q=l(16),D=l(17);l(27),t.a=function(){return h.a.createElement(h.a.Fragment,null,h.a.createElement(E,null),h.a.createElement("main",{className:"intro test"},h.a.createElement("h1",null,"Keep it Simple CSS"),h.a.createElement("blockquote",null,h.a.createElement("p",null,"Simplicity is the glory of expression."),h.a.createElement("cite",null,"Walt Whitman")),h.a.createElement("br",null),h.a.createElement(b.a,null),h.a.createElement("hr",null),h.a.createElement(g.a,null),h.a.createElement("hr",null),h.a.createElement(f.a,null),h.a.createElement("hr",null),h.a.createElement(v.a,null),h.a.createElement("hr",null),h.a.createElement(i,null),h.a.createElement("hr",null),h.a.createElement(N.a,null),h.a.createElement("hr",null),h.a.createElement(y.a,null),h.a.createElement("hr",null),h.a.createElement(k.a,null),h.a.createElement("hr",null),h.a.createElement(x.a,null),h.a.createElement("hr",null),h.a.createElement(w.a,null),h.a.createElement("hr",null),h.a.createElement(T.a,null),h.a.createElement("hr",null),h.a.createElement(C.a,null),h.a.createElement("hr",null),h.a.createElement(F.a,null),h.a.createElement("hr",null),h.a.createElement(d,null),h.a.createElement("hr",null),h.a.createElement(S.a,null),h.a.createElement("hr",null),h.a.createElement(q.a,null),h.a.createElement("hr",null),h.a.createElement(D.a,null),h.a.createElement("hr",null)))}},,,function(e,t,l){"use strict";l.r(t),function(e){var t=l(2),a=l(18);Object(t.render)(e.createElement(a.a,null),document.getElementById("root"))}.call(this,l(0))},,,,,,function(e,t,l){}]);