NxTIC/css/menu-side/expanded.css

/* [1] COULEURS
=========================================================*/
/* (1) COULEURS DU THEME $DEFAULT */
/* (2) COULEURS DE THEME $DARK */
/* (3) Couleurs du theme pour la timeline */
/* [2] DIMENSIONS
=========================================================*/
/* (1) Layout de base */
/* [3] Mixins
=========================================================*/
/* [4] Functions
=========================================================*/
#WRAPPER > #MENU-SIDE {
  /* [1] Elements du menu
	=========================================================*/
  /* [2] Gestion du menu deroulant
	=========================================================*/
  /* (1) Quand le menu est deroule */
}

#WRAPPER > #MENU-SIDE > span {
  display: block;
  position: relative;
  width: calc( 100% - 2*1em - 2*1.5em);
  padding: .8em 1.5em;
  padding-left: calc( 1.5em + 2*1em);
  border-bottom: 1px solid transparent;
  background: url("/src/static/menu-side/sub@aaaaaa.svg") right 1.5em center no-repeat;
  background-size: .5em .5em;
  color: #666;
  font-size: .85em;
  -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out;
  cursor: pointer;
  /* (1) Icone svg */
  /* (2) Animation de @hover */
  /* (3) Animation quand .active */
}

#WRAPPER > #MENU-SIDE > span > svg, #WRAPPER > #MENU-SIDE > span > svg * {
  position: absolute;
  top: calc( 50% - 1em/2);
  left: 1.5em;
  width: 1em;
  height: 1em;
  fill: #939393 !important;
  -webkit-transition: fill 0.2s ease-in-out;
  transition: fill 0.2s ease-in-out;
}

#WRAPPER > #MENU-SIDE > span:not(.active):hover {
  background-image: url("/src/static/menu-side/sub@000000.svg");
  color: #000;
}

#WRAPPER > #MENU-SIDE > span:not(.active):hover > svg, #WRAPPER > #MENU-SIDE > span:not(.active):hover > svg * {
  fill: #000 !important;
}

#WRAPPER > #MENU-SIDE > span.active {
  border-bottom-color: #0c5fa7;
  background-color: #0e6dbf;
  background-image: url("/src/static/menu-side/sub-active@ffffff.svg");
  color: #ffffff;
}

#WRAPPER > #MENU-SIDE > span.active > svg, #WRAPPER > #MENU-SIDE > span.active > svg * {
  fill: #fff !important;
}

#WRAPPER > #MENU-SIDE > span:not(.icon) + div.sub > span {
  display: block;
  position: relative;
  width: calc( 100% - 1.5em - 2.5em);
  padding: .5em 1.5em;
  padding-left: 2.5em;
  background: #eee url("/src/static/menu-side/sub@777777.svg") 1.5em center no-repeat;
  background-size: .5em;
  color: #777777;
  font-size: .85em;
  cursor: pointer;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}

#WRAPPER > #MENU-SIDE > span:not(.icon) + div.sub > span:hover, #WRAPPER > #MENU-SIDE > span:not(.icon) + div.sub > span.active {
  color: #000;
  background-image: url("/src/static/menu-side/sub@000000.svg");
}

#WRAPPER > #MENU-SIDE > span:not(.icon):not(.active) + div.sub > span {
  display: none;
}

/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiZXhwYW5kZWQuY3NzIiwKCSJzb3VyY2VzIjogWwoJCSIuLi9tZW51LXNpZGUuc2NzcyIsCgkJIi4uL2NvbnN0YW50cy5zY3NzIgoJXSwKCSJzb3VyY2VzQ29udGVudCI6IFsKCQkiQGltcG9ydCAnY29uc3RhbnRzJztcblxuI1dSQVBQRVIgPiAjTUVOVS1TSURFe1xuXG5cdC8qIFsxXSBFbGVtZW50cyBkdSBtZW51XG5cdD09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PSovXG5cdCYgPiBzcGFue1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdHdpZHRoOiBjYWxjKCAxMDAlIC0gMioxZW0gLSAyKjEuNWVtICk7XG5cblx0XHRwYWRkaW5nOiAuOGVtIDEuNWVtO1xuXHRcdHBhZGRpbmctbGVmdDogY2FsYyggMS41ZW0gKyAyKjFlbSApO1xuXG5cdFx0Ym9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXG5cdFx0YmFja2dyb3VuZDogdXJsKCcvc3JjL3N0YXRpYy9tZW51LXNpZGUvc3ViQGFhYWFhYS5zdmcnKSByaWdodCAxLjVlbSBjZW50ZXIgbm8tcmVwZWF0O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogLjVlbSAuNWVtO1xuXG5cblx0XHRjb2xvcjogIzY2Njtcblx0XHRmb250LXNpemU6IC44NWVtO1xuXG5cdFx0QGluY2x1ZGUgdHJhbnNpdGlvbiggY29sb3IgLjJzIGVhc2UtaW4tb3V0LCBiYWNrZ3JvdW5kIC4ycyBlYXNlLWluLW91dCwgYm94LXNoYWRvdyAuMnMgZWFzZS1pbi1vdXQsIGJvcmRlciAuMnMgZWFzZS1pbi1vdXQgKTtcblxuXHRcdGN1cnNvcjogcG9pbnRlcjtcblxuXHRcdC8qICgxKSBJY29uZSBzdmcgKi9cblx0XHQmID4gc3ZnLCAmID4gc3ZnICp7XG5cdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdHRvcDogY2FsYyggNTAlIC0gMWVtLzIgKTtcblx0XHRcdFx0bGVmdDogMS41ZW07XG5cdFx0XHRcdHdpZHRoOiAxZW07XG5cdFx0XHRcdGhlaWdodDogMWVtO1xuXG5cdFx0XHRmaWxsOiAkZGFyay1mZyAhaW1wb3J0YW50O1xuXHRcdFx0QGluY2x1ZGUgdHJhbnNpdGlvbiggZmlsbCAuMnMgZWFzZS1pbi1vdXQgKTtcblx0XHR9XG5cblxuXHRcdC8qICgyKSBBbmltYXRpb24gZGUgQGhvdmVyICovXG5cdFx0Jjpub3QoLmFjdGl2ZSk6aG92ZXJ7XG5cdFx0XHRiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9zcmMvc3RhdGljL21lbnUtc2lkZS9zdWJAMDAwMDAwLnN2ZycpO1xuXHRcdFx0Y29sb3I6ICMwMDA7XG5cblx0XHRcdCYgPiBzdmcsICYgPiBzdmcgKntcblx0XHRcdFx0ZmlsbDogIzAwMCAhaW1wb3J0YW50O1xuXHRcdFx0fVxuXHRcdH1cblxuXHRcdC8qICgzKSBBbmltYXRpb24gcXVhbmQgLmFjdGl2ZSAqL1xuXHRcdCYuYWN0aXZle1xuXHRcdFx0Ym9yZGVyLWJvdHRvbS1jb2xvcjogZGFya2VuKCR0aGVtZS1mZy1wcmltYXJ5LCA1KTtcblx0XHRcdC8vIGJveC1zaGFkb3c6IGluc2V0IDAgMCAxZW0gZGFya2VuKCRkYXJrLWJnLXByaW1hcnksIDEpO1xuXG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkdGhlbWUtZmctcHJpbWFyeTtcblx0XHRcdGJhY2tncm91bmQtaW1hZ2U6IHVybCgnL3NyYy9zdGF0aWMvbWVudS1zaWRlL3N1Yi1hY3RpdmVAZmZmZmZmLnN2ZycpO1xuXHRcdFx0Y29sb3I6ICRkYXJrLWZnLXByaW1hcnk7XG5cblx0XHRcdCYgPiBzdmcsICYgPiBzdmcgKntcblx0XHRcdFx0ZmlsbDogI2ZmZiAhaW1wb3J0YW50O1xuXHRcdFx0fVxuXHRcdH1cblxuXG5cdH1cblxuXG5cblx0LyogWzJdIEdlc3Rpb24gZHUgbWVudSBkZXJvdWxhbnRcblx0PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09Ki9cblx0LyogKDEpIFF1YW5kIGxlIG1lbnUgZXN0IGRlcm91bGUgKi9cblx0JiA+IHNwYW46bm90KC5pY29uKSArIGRpdi5zdWI+c3Bhbntcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0XHR3aWR0aDogY2FsYyggMTAwJSAtIDEuNWVtIC0gMi41ZW0gKTtcblxuXHRcdHBhZGRpbmc6IC41ZW0gMS41ZW07XG5cdFx0cGFkZGluZy1sZWZ0OiAyLjVlbTtcblxuXHRcdGJhY2tncm91bmQ6ICNlZWUgdXJsKCcvc3JjL3N0YXRpYy9tZW51LXNpZGUvc3ViQDc3Nzc3Ny5zdmcnKSAxLjVlbSBjZW50ZXIgbm8tcmVwZWF0Oztcblx0XHRiYWNrZ3JvdW5kLXNpemU6IC41ZW07XG5cblx0XHRjb2xvcjogIzc3Nzc3Nztcblx0XHRmb250LXNpemU6IC44NWVtO1xuXG5cdFx0Y3Vyc29yOiBwb2ludGVyO1xuXG5cdFx0QGluY2x1ZGUgdHJhbnNpdGlvbiggY29sb3IgLjJzIGVhc2UtaW4tb3V0ICk7XG5cblx0XHQvLyBBbmltYXRpb24gZGUgQGhvdmVyIG91IC5hY3RpdmVcblx0XHQmOmhvdmVyLFxuXHRcdCYuYWN0aXZle1xuXHRcdFx0Y29sb3I6ICMwMDA7XG5cdFx0XHRiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJy9zcmMvc3RhdGljL21lbnUtc2lkZS9zdWJAMDAwMDAwLnN2ZycpO1xuXHRcdH1cblx0fVxuXG5cblx0JiA+IHNwYW46bm90KC5pY29uKTpub3QoLmFjdGl2ZSkgKyBkaXYuc3ViPnNwYW57XG5cdFx0ZGlzcGxheTogbm9uZTtcblx0fVxufVxuIiwKCQkiLyogWzFdIENPVUxFVVJTXG49PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0qL1xuLyogKDEpIENPVUxFVVJTIERVIFRIRU1FICRERUZBVUxUICovXG4kdGhlbWUtYmc6ICAgICAgICAgI2U4ZThlODtcbiR0aGVtZS1iZy1wcmltYXJ5OiAjZmZmZmZmO1xuJHRoZW1lLWZnOiAgICAgICAgICM1MTUxNTE7XG4kdGhlbWUtZmctcHJpbWFyeTogIzBlNmRiZjtcblxuLyogKDIpIENPVUxFVVJTIERFIFRIRU1FICREQVJLICovXG4kZGFyay1iZzogICAgICAgICAjMzEzNTQxO1xuJGRhcmstYmctcHJpbWFyeTogIzI5MjgyZTtcbiRkYXJrLWZnOiAgICAgICAgICM5MzkzOTM7XG4kZGFyay1mZy1wcmltYXJ5OiAjZmZmZmZmO1xuXG4kaGVhZGVyLWRhcms6ICAgICAjRjhGOEZBO1xuXG4vKiAoMykgQ291bGV1cnMgZHUgdGhlbWUgcG91ciBsYSB0aW1lbGluZSAqL