<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kManalli/pen/zKxjjJ?depth=everything&order=popularity&page=15&q=statistics&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">/* Estilos Generales */
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
max-width:100%;
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 10px;
background: #e0e0e0;
display: grid;
grid-template-columns: 4.6rem 15.4rem calc(100vw - 20rem);
grid-template-rows: auto;
}
h1, h2, p {
line-height: 1.5;
margin-bottom: .8rem;
margin-top: 1.2rem;
}
h1 {
font-size: 3.2rem;
}
h2 {
font-size: 2rem;
}
ul {
list-style: none;
}
img {
border-style: none;
}
/* Barra Lateral */
.sidebar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
font-size: 1.4rem;
width: 100%;
color: #b0b0b0;
background-color: #212121;
/*overflow: hide;*/
}
.sidebar a {
text-decoration: none;
color: #b0b0b0;
}
.sidebar-avatar img {
border-radius: 50%;
height: 100%;
width: 100%;
margin: 0;
}
.sidebar-avatar {
border-radius: 50%;
margin: 0;
position: relative;
}
.sidebar-avatar-in{
background: #e0e0e0;
padding: 3%;
}
.sidebar-avatar-in:hover{
background: #ff88f0;
cursor: pointer;
}
.sidebar-avatar .sidebar-avatar-logo {
background: #e0e0e0;
bottom: -.8rem;
height: 35%;
padding: 2%;
position: absolute;
right: -.8rem;
width: 35%;
cursor: pointer;
}
.sidebar-avatar-logo:hover {
background: #ff88f0;
cursor: pointer;
}
.sidebar-title {
margin: -2rem 0 0 0;
font-size: 1.6rem;
}
.sidebar-title:hover {
color: #ff88f0;
cursor: pointer;
}
.sidebar-header {
margin: .8rem 0 .8rem 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.sidebar-nav {
flex-grow: 1;
width: 100%;
}
.sidebar-nav-item {
}
.sidebar-nav-item:hover {
background-color: #323232;
cursor: pointer;
}
.sidebar-nav-item-icon {
position: absolute;
font-size: 1.8rem;
}
.sidebar-nav-item-zelda {
position: absolute;
font-size: 1.6rem;
padding: .2rem 0 0 3rem;
}
.sidebar-footer {
height: 3rem;
width: 100%;
font-size: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sidebar-footer:hover {
cursor: pointer;
background-color: #0f0f0f;
}
/* Iconos de colores */
.active .fa-th-large, .active > .fa-th-large + a {
color: #000000;
}
.active .fa-code, .active > .fa-code + a {
color: #80deea;
}
.active .fa-umbrella, .active > .fa-umbrella + a {
color: #ba68C8;
}
.active .fa-envira, .active > .fa-envira + a {
color: #adff2f;
}
.active .fa-link, .active > .fa-link + a {
color: #2196F3;
}
.active .fa-fire, .active > .fa-fire + a {
color: #f44336;
}
.active .fa-area-chart, .active > .fa-area-chart + a {
color: #ffd54f;
}
.active .fa-cog, .active > .fa-cog + a {
color: #8d6e63;
}
.active .fa-sign-out, .active > .fa-sign-out + a {
}
/* Contenido */
.main {
padding: 2rem 2rem 2rem 2rem;
font-size: 1.4rem;
}
.toggle {
font-size: 2rem;
}
.content {
text-align: justify;
}
/********************************************
Inicio Primer Estado: Colapsado (Default:MOE)
*********************************************/
.sidebar.moe {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sidebar-header.moe {
height: 4.5rem;
width: 4.5rem;
color: rgba(255, 0, 0, 0);
}
.sidebar-avatar.moe {
height: 85%;
width: 85%;
}
.sidebar-avatar-logo.moe {
display: none;
}
.sidebar-title.moe {
display: none;
}
.sidebar-nav-item.moe {
padding: 1rem 0 2.8rem 1.5rem;
}
.sidebar-nav-item-zelda.moe {
opacity: 0;
width: 0rem;
}
.sidebar-footer-icon.moe {
display: block;
font-size: 1.5rem;
}
.sidebar-footer-label.moe {
display: none;
}
.main.moe {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
.content.moe {
padding: 1.5rem 4rem 1.5rem 4rem;
transition: .8s ease;
}
/************************************
Inicio Segundo Estado: Expandido (EX)
*************************************/
.sidebar.ex {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.sidebar-header.ex {
height: 20rem;
width: 20rem;
transition: .2s ease;
}
.sidebar-avatar.ex {
height: 60%;
width: 60%;
transition: 1.2s ease;
}
.sidebar-avatar-logo.ex {
display: block;
}
.sidebar-title.ex {
display: block;
transition: 4s ease;
}
.sidebar-nav-item.ex {
padding: 1rem 0 2.8rem 4.5rem;
transition: 1.2s ease;
}
.sidebar-nav-item-zelda.ex {
transition: .6s ease;
}
.sidebar-footer-icon.ex {
display: none;
}
.sidebar-footer-label.ex {
display: block;
font-size: 1.5rem;
}
.main.ex {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
.content.ex {
padding: 0 2rem 0 2rem;
transition: .8s ease;
}
/************************************
Inicio Tercer Estado: Oculto (OK)
*************************************/
.sidebar.ok {
display: none;
}
.sidebar-header.ok {
display: none;
}
.sidebar-avatar.ok {
display: none;
}
.sidebar-avatar-logo.ok {
display: none;
}
.sidebar-title.ok {
display: none;
}
.sidebar-nav-item.ok {
display: none;
}
.sidebar-nav-item-zelda.ok {
display: none;
}
.sidebar-footer-icon.ok {
display: none;
}
.sidebar-footer-label.ok {
display: none;
}
.main.ok {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.content.ok {
padding: 2.5rem 5rem 2.5rem 5rem;
transition: 1.2s ease;
}</style></head><body>
<aside class="sidebar moe">
<header class="sidebar-header moe">
<figure class="sidebar-avatar moe">
<img class="sidebar-avatar-in" src="http://vignette1.wikia.nocookie.net/adventuretimewithfinnandjake/images/e/ec/Princess_Bubblegum_7.png/revision/latest?cb=20130206231030" />
<img class="sidebar-avatar-logo moe" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-256.png" />
</figure>
<div class="sidebar-title moe">Bonnibel Bubblegum</div>
</header>
<nav class="sidebar-nav" role="navigation">
<ul>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-th-large"></i><a class="sidebar-nav-item-zelda moe">Dashboard</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-code"></i><a class="sidebar-nav-item-zelda moe" href="#">Experiments</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-umbrella"></i><a class="sidebar-nav-item-zelda moe">Previews</a>
</li>
<li class="sidebar-nav-item moe active">
<i class="sidebar-nav-item-icon fa fa-envira"></i><a class="sidebar-nav-item-zelda moe">Journals</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-link"></i><a class="sidebar-nav-item-zelda moe">Assets</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-fire"></i><a class="sidebar-nav-item-zelda moe">Milestones</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-area-chart"></i><a class="sidebar-nav-item-zelda moe">Statistics</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-cog"></i><a class="sidebar-nav-item-zelda moe">Settings</a>
</li>
<li class="sidebar-nav-item moe">
<i class="sidebar-nav-item-icon fa fa-sign-out"></i><a class="sidebar-nav-item-zelda moe">Logout</a>
</li>
</ul>
</nav>
<footer class="sidebar-footer">
<span class="sidebar-footer-icon moe">···</span>
<span class="sidebar-footer-label moe">· · ·</span>
</footer>
</aside>
<main class="main moe">
<span class="toggle">
<!-- fa-angle-double-left fa-bars fa-th-list -->
<i class="fa fa-bars"></i>
</span>
<article class="content moe">
<h1>Proin ut feugiat nisl</h1>
<h2>Lorem ipsum dolor sit amet, consectetur elit</h2>
<p>...nunc consectetur tempor nulla. Etiam sed nisi eget lectus vestibulum finibus sit amet tincidunt velit. Maecenas mauris lacus, venenatis et dui ut, efficitur dictum quam. Nam rutrum in ex accumsan varius. Maecenas ac velit ante. Donec tristique
dui mi. Donec fringilla eros vitae orci tempus fringilla. In feugiat ante sit amet nunc vehicula tempus. Aenean eu enim sed magna venenatis consectetur. Morbi accumsan sollicitudin felis, ut lacinia libero consequat eu.</p>
<p>Fusce cursus tincidunt odio, vitae viverra libero faucibus sit amet. Suspendisse velit libero, semper sed nisl ac, sollicitudin volutpat ligula. In hac habitasse platea dictumst. Nullam vitae quam maximus erat sodales condimentum nec vel odio. Aenean
non facilisis elit, et scelerisque tellus. Vivamus pretium pulvinar ipsum eget feugiat. Nullam cursus nisl at lacus imperdiet rutrum. Sed faucibus elit a nulla commodo, vel mattis est suscipit. Proin iaculis pretium mattis.</p>
<p>Nulla sed aliquet dui. Integer vel malesuada ligula. Sed placerat dapibus lacus a molestie. Duis auctor diam imperdiet felis varius, tristique fringilla nulla fringilla. Mauris molestie volutpat dui, ac ornare nibh venenatis nec. Quisque non posuere
nulla. In bibendum imperdiet nisl eu varius. Etiam maximus egestas accumsan. Proin ac viverra massa. Maecenas eget ante at elit dictum vehicula. Nam augue mauris, ullamcorper in nisi a, interdum placerat urna. Vestibulum efficitur lectus a ex finibus,
vitae lacinia orci blandit. Maecenas ut ligula quis ligula accumsan facilisis. Donec scelerisque ligula congue ligula cursus luctus. Nam a diam libero.</p>
</br>
<hr>
</article>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >/*
Este script lo conservo unicamente como referente personal didactico.
En su momento estaba experimentando con el salto entre multiples clases. Consegui hacer un version mucho más util/eficiente en el siguiente pen:
https://codepen.io/kManalli/pen/GjOkdb
*/
var hamburguesa = document.querySelector('.toggle');
hamburguesa.addEventListener('click', function() {
if(document.querySelector('.ex')){
var expandida = document.querySelector('.ex');
var pivote = expandida.classList.contains('ex');
console.log('Existe un elemento ocultable: ' + pivote);
while (pivote == true) {if (window.CP.shouldStopExecution(1)){break;}
expandida.classList.remove('ex');
expandida.classList.add('ok');
if(document.querySelector('.ex')){
var expandida = document.querySelector('.ex');
console.log('Aun existe un elemento ocutable.');
} else {
var pivote = false;
var expandida = false;
console.log('Ya no existe ningun elemento ocutable.');
if(document.querySelector('.fa-angle-double-left')){
var fonta = document.querySelector('.fa-angle-double-left');
fonta.classList.remove('fa-angle-double-left');
fonta.classList.add('fa-list-ul');
console.log('Cambiado Icono Toggle');
}
} // else
}
window.CP.exitedLoop(1);
// end while 1
} else if(document.querySelector('.moe')){
var colapsada = document.querySelector('.moe');
var pivote = colapsada.classList.contains('moe');
console.log('No existe un elemento ocultable, encontrado uno expandible: ' + pivote);
while (pivote == true) {if (window.CP.shouldStopExecution(2)){break;}
colapsada.classList.remove('moe');
colapsada.classList.add('ex');
if(document.querySelector('.moe')){
var colapsada = document.querySelector('.moe');
console.log('Aun existe un elemento expandible.');
} else {
var pivote = false;
var colapsada = false;
console.log('Ya no existe ningun elemento expandible.');
if(document.querySelector('.fa-bars')){
var fonta = document.querySelector('.fa-bars');
fonta.classList.remove('fa-bars');
fonta.classList.add('fa-angle-double-left');
console.log('Cambiado Icono Toggle');
}
} // end else
}
window.CP.exitedLoop(2);
// end while 2
} else if(document.querySelector('.ok')){
var oculta = document.querySelector('.ok');
var pivote = oculta.classList.contains('ok');
console.log('No existe un elemento expandible, encontrado uno mostrable: ' + pivote);
while (pivote == true) {if (window.CP.shouldStopExecution(3)){break;}
oculta.classList.remove('ok');
oculta.classList.add('moe');
if(document.querySelector('.ok')){
var oculta = document.querySelector('.ok');
console.log('Aun existe un elemento mostrable.');
} else {
var pivote = false;
var oculta = false;
console.log('Ya no existe ningun elemento mostrable.');
if(document.querySelector('.fa-list-ul')){
var fonta = document.querySelector('.fa-list-ul');
fonta.classList.remove('fa-list-ul');
fonta.classList.add('fa-bars');
console.log('Cambiado Icono Toggle');
}
} // end else
}
window.CP.exitedLoop(3);
// end while 3
} else {
console.log('NO debes ver esto');
}
})
var nav = document.querySelectorAll('.sidebar-nav-item');
nav[0].addEventListener('click', function(){ var clica = nav[0];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("1 activado"); } else { console.log("nulo"); } })
nav[1].addEventListener('click', function(){ var clica = nav[1];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("2 activado"); } else { console.log("nulo"); } })
nav[2].addEventListener('click', function(){ var clica = nav[2];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("3 activado"); } else { console.log("nulo"); } })
nav[3].addEventListener('click', function(){ var clica = nav[3];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("4 activado"); } else { console.log("nulo"); } })
nav[4].addEventListener('click', function(){ var clica = nav[4];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("5 activado"); } else { console.log("nulo"); } })
nav[5].addEventListener('click', function(){ var clica = nav[5];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("6 activado"); } else { console.log("nulo"); } })
nav[6].addEventListener('click', function(){ var clica = nav[6];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("7 activado"); } else { console.log("nulo"); } })
nav[7].addEventListener('click', function(){ var clica = nav[7];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("8 activado"); } else { console.log("nulo"); } })
nav[8].addEventListener('click', function(){ var clica = nav[8];var activo = document.querySelector('.active');if( clica !== activo) { activo.classList.remove('active');clica.classList.add('active');console.log("9 activado"); } else { console.log("nulo"); } })
//# sourceURL=pen.js
</script>
</body></html>
