Lungo.js/src/stylesheets/css/Lungo.layout.aside.css

/**
 * Stylesheet
 *
 * @namespace Lungo.Layout
 * @class Aside
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
/* DIMENSIONS */
/* COLORS */
section.aside:not(.small) {
  -webkit-transform: translate(256px, 0);
  -moz-transform: translate(256px, 0);
  -ms-transform: translate(256px, 0);
  -o-transform: translate(256px, 0);
  transform: translate(256px, 0);
  -webkit-transform: translate(256px, 0);
  -moz-transform: translate(256px, 0);
  -ms-transform: translate(256px, 0);
  -o-transform: translate(256px, 0);
  transform: translate(256px, 0);
}
section.aside.small {
  -webkit-transform: translate(64px, 0);
  -moz-transform: translate(64px, 0);
  -ms-transform: translate(64px, 0);
  -o-transform: translate(64px, 0);
  transform: translate(64px, 0);
  -webkit-transform: translate(64px, 0);
  -moz-transform: translate(64px, 0);
  -ms-transform: translate(64px, 0);
  -o-transform: translate(64px, 0);
  transform: translate(64px, 0);
}
section.aside.right {
  -webkit-transform: translate(-256px, 0);
  -moz-transform: translate(-256px, 0);
  -ms-transform: translate(-256px, 0);
  -o-transform: translate(-256px, 0);
  transform: translate(-256px, 0);
  -webkit-transform: translate(-256px, 0);
  -moz-transform: translate(-256px, 0);
  -ms-transform: translate(-256px, 0);
  -o-transform: translate(-256px, 0);
  transform: translate(-256px, 0);
}
section.aside.right.small {
  -webkit-transform: translate(-64px, 0);
  -moz-transform: translate(-64px, 0);
  -ms-transform: translate(-64px, 0);
  -o-transform: translate(-64px, 0);
  transform: translate(-64px, 0);
  -webkit-transform: translate(-64px, 0);
  -moz-transform: translate(-64px, 0);
  -ms-transform: translate(-64px, 0);
  -o-transform: translate(-64px, 0);
  transform: translate(-64px, 0);
}
aside {
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  display: none;
  z-index: -1;
  width: 256px;
}
aside.right {
  right: 0px;
}
aside.show {
  z-index: 0;
  display: block;
}
aside header,
aside footer {
  position: relative;
  left: none;
  height: 44px;
}
aside footer {
  position: absolute;
  bottom: 0;
}
aside .bubble {
  float: right;
}
aside.small {
  width: 64px;
}
aside.small nav {
  width: 64px;
}
aside.small nav a {
  padding: 0px;
  width: 64px;
  height: 64px;
}
aside.small nav .icon {
  font-size: 48px;
  text-align: center;
}
aside.small nav .bubble {
  top: 4px;
  left: -22px;
}
/*
@TODO: Tablets & TV on final release
@media handheld, only screen and (min-width: 768px) {
    .autohide[data-router="aside"] {  display: none !important; }

    section.aside {
        width: auto !important;
        left: @aside-width;
        right: 0px !important;
        .transform(translate3d(0px, 0, 0));
        -webkit-transition: none;

        &.small{ left: @aside-width-small; }
    }
}
*/