-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
2 lines (2 loc) · 21.9 KB
/
index.html
1
2
<!DOCTYPE html><html lang="es"><head><meta charset="UTF-8"/><meta name="description" content="Conjunto de checks personalizados, creados con únicamente css."/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><title>Checkbox.css</title><link rel="shortcut icon" href="./public/images/favicon.ico"/><style>/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif;font-size:16px}body{background-color:#f8f8f8;font-family:'Roboto',Arial,Calibri;margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}input[type="checkbox"],input[type="radio"]{opacity:0;outline:none;-ms-touch-action:none;touch-action:none}label{-ms-touch-action:none;touch-action:none}input[class^="custom-check__checkbox"] + span[class^="custom-check__checkbox"] > span[data-ripple="true"]::before,span[data-ripple="true"]::before{background-color:rgba(177,230,254,0.9);-webkit-border-radius:50%;border-radius:50%;content:'';display:block;height:100%;opacity:0;width:100%}input[class^="custom-check__checkbox"]:checked + span[class^="custom-check__checkbox"] > span[data-ripple="true"]::before,input[class^="custom-check__checkbox"]:checked + span[data-ripple="true"]::before{-webkit-animation:ripple .4s ease .1s 1 normal forwards;animation:ripple .4s ease .1s 1 normal forwards}.wrapper{background-color:#fefefe;-webkit-border-radius:.125em;border-radius:.125em;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);margin:4em auto;padding:.5em 0 1.5em 0;text-align:center;width:820px}@media screen and (max-width:53em){.wrapper{width:90%}}.sections-title{border-bottom:1px solid rgba(0,0,0,0.2);color:#808080;display:block;font-size:1.3rem;font-weight:100;line-height:1.3em;margin:.5em 3%;padding:.25em 1%;text-align:left;width:92%}.generic-container{background-color:#fff;-webkit-border-radius:.125em;border-radius:.125em;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:inline-block;height:auto;margin:.5em;padding:.5em 1em;width:9.4em}@media screen and (max-width:30em){.generic-container{width:80%}}.header{background-color:#1976d2;display:block;height:80px;margin:0 0 17em 0;text-align:center;width:100%}@media screen and (max-width:30em){.header{height:100px;margin:0 0 15em 0}}.logo{-webkit-animation:bouncing-item 1s ease-in-out .5s 1 normal forwards;animation:bouncing-item 1s ease-in-out .5s 1 normal forwards;display:inline-block;height:132px;margin:1em 0 0 0;position:relative;width:132px;z-index:3;}.logo__image{max-width:100%;position:relative;z-index:1}.logo__shadow{background-color:rgba(255,255,255,0);-webkit-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);color:rgba(255,255,255,0);height:82%;left:9%;position:absolute;top:9%;width:82%}@media screen and (max-width:30em){.logo{margin-top:-.1em}}.nav{background-color:#03a9f4;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);font-size:1.3rem;font-weight:100;height:32px;overflow:hidden;position:absolute;text-align:center;top:80px;width:100%;z-index:1;}.nav__item{color:#fff;cursor:pointer;display:inline-block;line-height:32px;padding:0 .5em;position:relative;text-align:center;text-decoration:none;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;width:5.5em;}.nav__item:nth-child(2){background-color:none;-webkit-box-shadow:none;box-shadow:none;cursor:auto;opacity:0}.nav__item:hover{background-color:rgba(255,255,255,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}@media screen and (max-width:30em){.nav{height:3.8em;top:100px;}.nav__item{background-color:rgba(255,255,255,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);font-size:1.1rem;font-weight:400;margin-top:1.8em;padding:0;width:6.5em;-webkit-transition:all ease .3s;transition:all ease .3s;}.nav__item:hover{background-color:rgba(255,255,255,0.3);-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.nav__item:nth-child(1)::after,.nav__item:nth-child(3)::after{display:none}.nav__item:nth-child(2){width:2em}}.landing{background-color:rgba(255,255,255,0.9);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);height:200px;position:absolute;text-align:center;top:112px;width:100%;}.landing__title{color:#03a9f4;display:inline-block;font-size:4rem;font-weight:100;margin:.8em auto .2em auto;width:100%}.landing__autor{background-color:#03a9f4;-webkit-border-radius:.125em;border-radius:.125em;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);color:#fff;font-size:1rem;font-weight:400;padding:.5em;text-decoration:none;-webkit-transition:all .2s ease;transition:all .2s ease;}.landing__autor:hover{-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}@media screen and (max-width:30em){.landing{height:140px;top:175px;}.landing__title{font-size:2.9rem;margin:.6em 0 .2em 0}.landing__autor{padding:.3em}}.list{background-color:#fff;-webkit-border-radius:.125em;border-radius:.125em;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);display:inline-block;height:auto;list-style-type:none;margin:.5em;padding:.5em 1em;width:9.4em;}.list__item{text-align:center;width:100%}@media screen and (max-width:30em){.list{width:80%}}.custom-check{color:#727272;display:block;font-size:1.1rem;font-weight:400;height:1.2em;margin:.6em auto;position:relative;text-align:left;width:95%;}.custom-check__checkbox{-webkit-border-radius:.125em;border-radius:.125em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;height:1.1em;left:0;position:absolute;top:0;width:1.1em}.custom-check__text{cursor:pointer;display:block;height:1.1em;left:0;lineheight:1.1em;margin-top:-.02em;padding-left:1.7em;position:absolute;text-align:left;top:0}@media screen and (max-width:30em){.custom-check{font-size:1.5rem}}.footer{background-color:#1976d2;height:60px;position:relative;width:100%;}.footer::after{background-color:#03a9f4;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);content:'';display:block;height:20px;left:0;position:absolute;top:0;width:100%}</style></head><body><header class="header"><figure class="logo"><img src="./public/images/logo.png" alt="logo.png" class="logo__image"/><span class="logo__shadow">a</span></figure><nav class="nav"><a href="https://github.com/jorge8168711/Checkbox.css" target="_blank" class="nav__item">Github</a><span class="nav__item">a</span><a href="https://github.com/jorge8168711/Checkbox.css/archive/master.zip" target="_blank" class="nav__item">Download</a></nav></header><section class="landing"><h1 class="landing__title">Checkbox.css</h1><a href="https://twitter.com/_JorgeBarron" target="_blank" class="landing__autor">@_JorgeBarron</a></section><main class="wrapper"><h2 class="sections-title">Checkbox</h2><ul class="list"><li class="list__item"><label class="custom-check"><input type="checkbox" checked="true" name="check-A" class="custom-check__checkbox check-A"/><span data-ripple="false" class="custom-check__checkbox check-A__background"></span><span class="custom-check__checkbox check-A__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-A" class="custom-check__checkbox check-A"/><span data-ripple="false" class="custom-check__checkbox check-A__background"></span><span class="custom-check__checkbox check-A__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-A" class="custom-check__checkbox check-A"/><span data-ripple="false" class="custom-check__checkbox check-A__background"></span><span class="custom-check__checkbox check-A__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="checkbox" checked="true" name="check-B" class="custom-check__checkbox check-B"/><span data-ripple="false" class="custom-check__checkbox check-B__background"></span><span class="custom-check__checkbox check-B__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-B" class="custom-check__checkbox check-B"/><span data-ripple="false" class="custom-check__checkbox check-B__background"></span><span class="custom-check__checkbox check-B__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-B" class="custom-check__checkbox check-B"/><span data-ripple="false" class="custom-check__checkbox check-B__background"></span><span class="custom-check__checkbox check-B__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="checkbox" checked="true" name="check-C" class="custom-check__checkbox check-C"/><span data-ripple="false" class="custom-check__checkbox check-C__background"></span><span class="custom-check__checkbox check-C__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-C" class="custom-check__checkbox check-C"/><span data-ripple="false" class="custom-check__checkbox check-C__background"></span><span class="custom-check__checkbox check-C__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-C" class="custom-check__checkbox check-C"/><span data-ripple="false" class="custom-check__checkbox check-C__background"></span><span class="custom-check__checkbox check-C__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="checkbox" checked="true" name="check-D" class="custom-check__checkbox check-D"/><span data-ripple="false" class="custom-check__checkbox check-D__background"></span><span class="custom-check__checkbox check-D__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-D" class="custom-check__checkbox check-D"/><span data-ripple="false" class="custom-check__checkbox check-D__background"></span><span class="custom-check__checkbox check-D__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="checkbox" name="check-D" class="custom-check__checkbox check-D"/><span data-ripple="false" class="custom-check__checkbox check-D__background"></span><span class="custom-check__checkbox check-D__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><h2 class="sections-title">Radio</h2><ul class="list"><li class="list__item"><label class="custom-check"><input type="radio" checked="true" name="radio-A" class="custom-check__checkbox radio-A"/><span data-ripple="true" class="custom-check__checkbox radio-A__background"></span><span class="custom-check__checkbox radio-A__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="radio" name="radio-A" class="custom-check__checkbox radio-A"/><span data-ripple="true" class="custom-check__checkbox radio-A__background"></span><span class="custom-check__checkbox radio-A__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="radio" name="radio-A" class="custom-check__checkbox radio-A"/><span data-ripple="true" class="custom-check__checkbox radio-A__background"></span><span class="custom-check__checkbox radio-A__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="radio" checked="true" name="radio-B" class="custom-check__checkbox radio-B"/><span data-ripple="true" class="custom-check__checkbox radio-B__background"></span><span class="custom-check__checkbox radio-B__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="radio" name="radio-B" class="custom-check__checkbox radio-B"/><span data-ripple="true" class="custom-check__checkbox radio-B__background"></span><span class="custom-check__checkbox radio-B__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="radio" name="radio-B" class="custom-check__checkbox radio-B"/><span data-ripple="true" class="custom-check__checkbox radio-B__background"></span><span class="custom-check__checkbox radio-B__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="radio" checked="true" name="radio-C" class="custom-check__checkbox radio-C"/><span data-ripple="true" class="custom-check__checkbox radio-C__background"></span><span class="custom-check__checkbox radio-C__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="radio" name="radio-C" class="custom-check__checkbox radio-C"/><span data-ripple="true" class="custom-check__checkbox radio-C__background"></span><span class="custom-check__checkbox radio-C__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="radio" name="radio-C" class="custom-check__checkbox radio-C"/><span data-ripple="true" class="custom-check__checkbox radio-C__background"></span><span class="custom-check__checkbox radio-C__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><ul class="list"><li class="list__item"><label class="custom-check"><input type="radio" checked="true" name="radio-D" class="custom-check__checkbox radio-D"/><span data-ripple="false" class="custom-check__checkbox radio-D__background"></span><span class="custom-check__checkbox radio-D__checkbox"></span><span class="custom-check__text">Item 1</span></label><li class="list__item"><label class="custom-check"><input type="radio" name="radio-D" class="custom-check__checkbox radio-D"/><span data-ripple="false" class="custom-check__checkbox radio-D__background"></span><span class="custom-check__checkbox radio-D__checkbox"></span><span class="custom-check__text">Item 2</span></label></li><li class="list__item"><label class="custom-check"><input type="radio" name="radio-D" class="custom-check__checkbox radio-D"/><span data-ripple="false" class="custom-check__checkbox radio-D__background"></span><span class="custom-check__checkbox radio-D__checkbox"></span><span class="custom-check__text">Item 3</span></label></li></li></ul><h2 class="sections-title">Switch</h2><div class="generic-container"><label class="custom-check switch-A"><span class="custom-check__text switch-A__text">Opción 1</span><input type="checkbox" name="switch-A" checked="true" class="custom-check__checkbox switch-A"/><span class="custom-check__checkbox switch-A__background"><span data-ripple="true" class="custom-check__checkbox switch-A__checkbox"></span></span></label><label class="custom-check switch-A"><span class="custom-check__text switch-A__text">Opción 2</span><input type="checkbox" name="switch-A" class="custom-check__checkbox switch-A"/><span class="custom-check__checkbox switch-A__background"><span data-ripple="true" class="custom-check__checkbox switch-A__checkbox"></span></span></label><label class="custom-check switch-A"><span class="custom-check__text switch-A__text">Opción 3</span><input type="checkbox" name="switch-A" class="custom-check__checkbox switch-A"/><span class="custom-check__checkbox switch-A__background"><span data-ripple="true" class="custom-check__checkbox switch-A__checkbox"></span></span></label></div><div class="generic-container"><label class="custom-check switch-B"><span class="custom-check__text switch-B__text">Opción 1</span><input type="checkbox" name="switch-B" checked="true" class="custom-check__checkbox switch-B"/><span class="custom-check__checkbox switch-B__background"><span data-ripple="true" class="custom-check__checkbox switch-B__checkbox"></span></span></label><label class="custom-check switch-B"><span class="custom-check__text switch-B__text">Opción 2</span><input type="checkbox" name="switch-B" class="custom-check__checkbox switch-B"/><span class="custom-check__checkbox switch-B__background"><span data-ripple="true" class="custom-check__checkbox switch-B__checkbox"></span></span></label><label class="custom-check switch-B"><span class="custom-check__text switch-B__text">Opción 3</span><input type="checkbox" name="switch-B" class="custom-check__checkbox switch-B"/><span class="custom-check__checkbox switch-B__background"><span data-ripple="true" class="custom-check__checkbox switch-B__checkbox"></span></span></label></div><div class="generic-container"><label class="custom-check switch-C"><span class="custom-check__text switch-C__text">Opción 1</span><input type="checkbox" name="switch-C" checked="true" class="custom-check__checkbox switch-C"/><span class="custom-check__checkbox switch-C__background"><span data-ripple="true" class="custom-check__checkbox switch-C__checkbox"></span></span></label><label class="custom-check switch-C"><span class="custom-check__text switch-C__text">Opción 2</span><input type="checkbox" name="switch-C" class="custom-check__checkbox switch-C"/><span class="custom-check__checkbox switch-C__background"><span data-ripple="true" class="custom-check__checkbox switch-C__checkbox"></span></span></label><label class="custom-check switch-C"><span class="custom-check__text switch-C__text">Opción 3</span><input type="checkbox" name="switch-C" class="custom-check__checkbox switch-C"/><span class="custom-check__checkbox switch-C__background"><span data-ripple="true" class="custom-check__checkbox switch-C__checkbox"></span></span></label></div><div class="generic-container"><label class="custom-check switch-D"><span class="custom-check__text switch-D__text">Opción 1</span><input type="checkbox" name="switch-D" checked="true" class="custom-check__checkbox switch-D"/><span class="custom-check__checkbox switch-D__background"><span data-ripple="true" class="custom-check__checkbox switch-D__checkbox"></span></span></label><label class="custom-check switch-D"><span class="custom-check__text switch-D__text">Opción 2</span><input type="checkbox" name="switch-D" class="custom-check__checkbox switch-D"/><span class="custom-check__checkbox switch-D__background"><span data-ripple="true" class="custom-check__checkbox switch-D__checkbox"></span></span></label><label class="custom-check switch-D"><span class="custom-check__text switch-D__text">Opción 3</span><input type="checkbox" name="switch-D" class="custom-check__checkbox switch-D"/><span class="custom-check__checkbox switch-D__background"><span data-ripple="true" class="custom-check__checkbox switch-D__checkbox"></span></span></label></div></main><footer class="footer"></footer></body></html><link rel="stylesheet" type="text/css" href="./public/css/index.min.css"/>