stacked-menu/dist/css/stacked-menu.css

A flexible stacked navigation menu.

/** The root StackedMenu */
.stacked-menu {
  position: relative;
  background-color: #15191d;
  padding: .25rem 0;
  /* global state */
  /* nav child */
  /* nav level 1 */
  /* disabled state */ }
  .stacked-menu ul.menu {
    display: block;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none; }
    .stacked-menu ul.menu + .menu {
      margin-top: 1em; }
  .stacked-menu .menu-header {
    margin: .5em 0 0;
    padding: 0.5rem 1rem;
    color: #555;
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase; }
    .stacked-menu .menu-header > .badge,
    .stacked-menu .menu-header > .label {
      position: absolute;
      right: 0.75rem;
      z-index: 2; }
  .stacked-menu .menu-subhead {
    display: none;
    padding: 0.5rem 1rem;
    overflow: hidden;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.75em; }
  .stacked-menu .menu-link {
    display: block;
    position: relative;
    outline: 0;
    padding: 0.5rem 1rem;
    overflow: hidden;
    color: #999;
    font-size: 0.875rem;
    line-height: 1.75em;
    text-decoration: none; }
    .stacked-menu .menu-link > .menu-icon {
      margin-right: .5em;
      width: 1.25em;
      color: #999;
      font-size: 1rem;
      text-align: center; }
    .stacked-menu .menu-link > .badge,
    .stacked-menu .menu-link > .label {
      position: absolute;
      right: 0.75rem;
      z-index: 2;
      margin-top: .25em; }
    .stacked-menu .menu-link:focus {
      background-color: transparent;
      overflow: visible;
      color: #5d67ad;
      text-decoration: none; }
      .stacked-menu .menu-link:focus .menu-icon {
        color: #eee; }
    .stacked-menu .menu-link:hover {
      background-color: transparent;
      overflow: visible;
      color: #5d67ad;
      text-decoration: none; }
      .stacked-menu .menu-link:hover .menu-icon {
        color: #eee; }
  .stacked-menu .menu-item + .menu-item {
    margin-top: 0; }
  .stacked-menu .menu-item.has-open:not(.has-active) > .menu-link {
    background-color: transparent;
    color: #5d67ad; }
    .stacked-menu .menu-item.has-open:not(.has-active) > .menu-link .menu-icon {
      color: #eee; }
  .stacked-menu .menu-item.has-active > .menu-link {
    background-color: transparent;
    color: #fff; }
    .stacked-menu .menu-item.has-active > .menu-link .menu-icon {
      color: #eee; }
  .stacked-menu .has-child {
    position: relative; }
    .stacked-menu .has-child > .menu {
      visibility: hidden;
      opacity: 0;
      background-color: #1b2126;
      height: 0; }
    .stacked-menu .has-child.has-active:hover > .menu,
    .stacked-menu .has-child.has-open > .menu {
      overflow: visible; }
    .stacked-menu .has-child.has-active > .menu {
      visibility: visible;
      opacity: 1;
      height: auto; }
  .stacked-menu > .menu > .menu-item {
    /* level 1 */ }
    .stacked-menu > .menu > .menu-item > .menu-link {
      color: #ccc; }
      .stacked-menu > .menu > .menu-item > .menu-link:focus {
        background-color: #0f1114;
        color: #eee; }
      .stacked-menu > .menu > .menu-item > .menu-link:hover {
        background-color: #0f1114;
        color: #eee; }
    .stacked-menu > .menu > .menu-item.has-open > .menu-link {
      background-color: #0f1114;
      color: #eee; }
    .stacked-menu > .menu > .menu-item.has-active > .menu-link {
      -webkit-box-shadow: inset 3px 0 0 #5d67ad;
              box-shadow: inset 3px 0 0 #5d67ad;
      background-color: #20262c;
      color: #eee; }
    .stacked-menu > .menu > .menu-item > .menu {
      /* level 2 */ }
      .stacked-menu > .menu > .menu-item > .menu .menu-link {
        padding-left: 3rem; }
      .stacked-menu > .menu > .menu-item > .menu .menu {
        /* level 3 */ }
        .stacked-menu > .menu > .menu-item > .menu .menu .menu-link {
          padding-left: 4rem; }
        .stacked-menu > .menu > .menu-item > .menu .menu .menu .menu-link {
          padding-left: 5rem; }
  .stacked-menu .menu-item.disabled > .menu-link,
  .stacked-menu .menu-item > .menu-link.disabled {
    color: #555; }
    .stacked-menu .menu-item.disabled > .menu-link .menu-icon,
    .stacked-menu .menu-item > .menu-link.disabled .menu-icon {
      color: #555; }
    .stacked-menu .menu-item.disabled > .menu-link:focus,
    .stacked-menu .menu-item.disabled > .menu-link:focus .menu-icon,
    .stacked-menu .menu-item > .menu-link.disabled:focus,
    .stacked-menu .menu-item > .menu-link.disabled:focus .menu-icon {
      background-color: transparent;
      color: #555; }
    .stacked-menu .menu-item.disabled > .menu-link:hover,
    .stacked-menu .menu-item.disabled > .menu-link:hover .menu-icon,
    .stacked-menu .menu-item > .menu-link.disabled:hover,
    .stacked-menu .menu-item > .menu-link.disabled:hover .menu-icon {
      background-color: transparent;
      color: #555; }

/* Compact */
.stacked-menu-has-compact .has-child.has-active > .menu {
  visibility: hidden;
  opacity: 0;
  height: 0; }

.stacked-menu-has-compact .has-child.has-active .menu-subhead {
  background-color: #20262c; }

.stacked-menu-has-compact .has-child .menu-subhead {
  display: block; }

.stacked-menu-has-compact > .menu > .menu-item > .menu-link {
  padding-right: 0;
  padding-left: 0;
  max-height: 40px;
  text-align: center; }
  .stacked-menu-has-compact > .menu > .menu-item > .menu-link > .badge,
  .stacked-menu-has-compact > .menu > .menu-item > .menu-link > .label {
    top: 0;
    right: 0.25rem; }
  .stacked-menu-has-compact > .menu > .menu-item > .menu-link .menu-icon {
    margin: 0;
    font-size: 1.25em;
    line-height: 1.5em; }

.stacked-menu-has-compact > .menu > .menu-item.has-child > .menu-link .menu-text {
  display: none; }

.stacked-menu-has-compact > .menu > .menu-header {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
  visibility: hidden;
  opacity: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
          user-select: none; }

.stacked-menu-has-compact > .menu > .menu-item:not(.has-child) > .menu-link .menu-text {
  -webkit-transition: opacity 150ms linear;
  -o-transition: opacity 150ms linear;
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms linear;
  border-radius: 0 0 0 0;
  background-color: #0f1114;
  padding: 0.5rem 0.75rem 0.5rem 0;
  width: 0;
  height: 0;
  line-height: 1.75em;
  white-space: nowrap; }

.stacked-menu-has-compact > .menu > .menu-item:not(.has-child) > .menu-link:hover .menu-text {
  visibility: visible;
  opacity: 1;
  width: auto;
  height: auto; }

.stacked-menu-has-compact > .menu > .menu-item.has-active > .menu-link .menu-text {
  background-color: #20262c; }

.stacked-menu-has-compact > .menu > .menu-item.disabled > .menu-link .menu-text,
.stacked-menu-has-compact > .menu > .menu-item > .menu-link.disabled .menu-text {
  background-color: #15191d; }

.stacked-menu-has-compact > .menu > .menu-item.has-child > .menu-link:before {
  content: none; }

.stacked-menu-has-compact > .menu > .menu-item.has-child > .menu-link .menu-text {
  padding: 0.5rem 1rem;
  width: 200px;
  text-align: left; }

/* Behavior */
.stacked-menu-has-collapsible {
  /** caret angle, Only show on collapsible mode */ }
  .stacked-menu-has-collapsible .has-child > .menu-link::after {
    -webkit-transform: translateY(-0.5em);
        -ms-transform: translateY(-0.5em);
         -o-transform: translateY(-0.5em);
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0.75rem;
            transform: translateY(-0.5em);
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    content: '+'; }
  .stacked-menu-has-collapsible .has-child.has-active > .menu-link::after,
  .stacked-menu-has-collapsible .has-child.has-open > .menu-link::after {
    content: '-'; }
  .stacked-menu-has-collapsible .has-child > .menu {
    visibility: visible;
    opacity: 1;
    overflow: hidden; }
  .stacked-menu-has-collapsible .has-child.has-open:not(.has-active) > .menu {
    height: auto; }

/** collapsible on compact mode */
.stacked-menu-has-collapsible.stacked-menu-has-compact {
  /** hide caret on level 1 */
  /** child level 2 up */ }
  .stacked-menu-has-collapsible.stacked-menu-has-compact > .menu > .has-child > .menu {
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
         -o-transform: scale(0.6);
    -webkit-transition: opacity 150ms linear, -webkit-transform 150ms linear;
    -o-transition: opacity 150ms linear, -o-transform 150ms linear;
            transform: scale(0.6);
            transform-origin: 0 0;
    transition: opacity 150ms linear, -webkit-transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear, -o-transform 150ms linear; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact > .menu > .has-child.has-open > .menu {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1); }
  .stacked-menu-has-collapsible.stacked-menu-has-compact > .menu > .has-child > .menu-link:after {
    display: none; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact .has-child.has-open > .menu {
    position: absolute;
    top: 0;
    left: 100%;
    visibility: visible;
    opacity: 1;
    border-radius: 0 0 0 0;
    width: 200px;
    height: auto; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact .has-child > .menu .menu-link {
    padding-left: 1rem; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact .menu .menu .has-child.has-open > .menu {
    position: static;
    top: auto;
    left: auto;
    width: auto; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact .menu .menu .has-child > .menu .menu-link {
    padding-left: 2rem; }
  .stacked-menu-has-collapsible.stacked-menu-has-compact .menu .menu .has-child > .menu .menu .menu-link {
    padding-left: 3rem; }

/* Give a transition */
.stacked-menu-has-hoverable {
  /** except level 1 .has-active */ }
  .stacked-menu-has-hoverable .has-child > .menu {
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
    -webkit-transition: opacity 150ms linear, -webkit-transform 150ms linear;
    -o-transition: opacity 150ms linear, -o-transform 150ms linear;
            transform-origin: 0 0;
    transition: opacity 150ms linear, -webkit-transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear, -o-transform 150ms linear; }
  .stacked-menu-has-hoverable .has-child:not(.has-active) > .menu {
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
         -o-transform: scale(0.6);
            transform: scale(0.6); }

.stacked-menu-has-hoverable.stacked-menu-has-compact {
  /** level 1 */
  /** overwrite for all */ }
  .stacked-menu-has-hoverable.stacked-menu-has-compact > .menu > .has-child > .menu {
    -webkit-transition: opacity 150ms linear, -webkit-transform 150ms linear;
    -o-transition: opacity 150ms linear, -o-transform 150ms linear;
    transition: opacity 150ms linear, -webkit-transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear;
    transition: opacity 150ms linear, transform 150ms linear, -webkit-transform 150ms linear, -o-transform 150ms linear; }
  .stacked-menu-has-hoverable.stacked-menu-has-compact .has-child > .menu {
    -webkit-transform: scale(0.6);
        -ms-transform: scale(0.6);
         -o-transform: scale(0.6);
            transform: scale(0.6); }

/* Behavior */
.stacked-menu-has-hoverable,
.stacked-menu-has-compact {
  /** except level 1 .has-active */ }
  .stacked-menu-has-hoverable .has-child,
  .stacked-menu-has-compact .has-child {
    /** caret */ }
    .stacked-menu-has-hoverable .has-child.has-open:not(.has-active) > .menu,
    .stacked-menu-has-compact .has-child.has-open:not(.has-active) > .menu {
      -webkit-transform: scale(1);
          -ms-transform: scale(1);
           -o-transform: scale(1);
      position: absolute;
      top: 0;
      left: 100%;
              transform: scale(1);
      visibility: visible;
      opacity: 1;
      width: 200px;
      height: auto; }
    .stacked-menu-has-hoverable .has-child > .menu .menu-item > .menu .menu-link,
    .stacked-menu-has-hoverable .has-child > .menu .menu-item > .menu .menu .menu-link,
    .stacked-menu-has-compact .has-child > .menu .menu-item > .menu .menu-link,
    .stacked-menu-has-compact .has-child > .menu .menu-item > .menu .menu .menu-link {
      padding-left: 1rem; }
    .stacked-menu-has-hoverable .has-child > .menu-link:before,
    .stacked-menu-has-compact .has-child > .menu-link:before {
      -webkit-transform: translateY(-8px);
          -ms-transform: translateY(-8px);
           -o-transform: translateY(-8px);
      position: absolute;
      top: 50%;
      right: 0;
              transform: translateY(-8px);
      border-top: 8px solid transparent;
      /** the caret */
      border-right: 8px solid #1b2126;
      border-bottom: 8px solid transparent;
      width: 0;
      height: 0;
      content: ''; }

/** hoverable on compact mode */
.stacked-menu-has-hoverable.stacked-menu-has-compact {
  /** overwrite for all */ }
  .stacked-menu-has-hoverable.stacked-menu-has-compact .has-child.has-open > .menu {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
    position: absolute;
    top: 0;
    left: 100%;
            transform: scale(1);
    visibility: visible;
    opacity: 1;
    border-radius: 0 0 0 0;
    width: 200px;
    height: auto; }
    .stacked-menu-has-hoverable.stacked-menu-has-compact .has-child.has-open > .menu .menu-item > .menu-link {
      padding-left: 1rem; }

/** open menu to left direction */
/** Core */
.stacked-menu-has-left {
  /** compact */ }
  .stacked-menu-has-left > .menu > .menu-item.has-active > .menu-link {
    -webkit-box-shadow: inset -3px 0 0 #5d67ad;
            box-shadow: inset -3px 0 0 #5d67ad; }
  .stacked-menu-has-left.stacked-menu-has-compact > .menu > .menu-item > .menu-link > .badge {
    right: auto;
    left: 0.25rem; }
  .stacked-menu-has-left.stacked-menu-has-compact > .menu > .menu-item:not(.has-child) > .menu-link .menu-text {
    right: 100%;
    left: auto;
    border-radius: 0 0 0 0;
    padding: 0.5rem 0 0.5rem 0.75rem; }

/** Behavior */
.stacked-menu-has-left {
  /** both hoverable & collapsible on compact mode */ }
  .stacked-menu-has-left.stacked-menu-has-hoverable .has-child > .menu {
    -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
         -o-transform-origin: 100% 0;
            transform-origin: 100% 0; }
  .stacked-menu-has-left.stacked-menu-has-collapsible.stacked-menu-has-compact > .menu > .has-child > .menu {
    -webkit-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
         -o-transform-origin: 100% 0;
            transform-origin: 100% 0; }
  .stacked-menu-has-left.stacked-menu-has-hoverable .has-child.has-open:not(.has-active) > .menu, .stacked-menu-has-left.stacked-menu-has-compact .has-child.has-open:not(.has-active) > .menu {
    right: 100%;
    left: auto; }
  .stacked-menu-has-left.stacked-menu-has-hoverable .has-child.has-open:not(.has-active) > .menu-link:before, .stacked-menu-has-left.stacked-menu-has-compact .has-child.has-open:not(.has-active) > .menu-link:before {
    right: auto;
    left: 0;
    border-right: 0 solid transparent;
    border-left: 8px solid #1b2126; }
  .stacked-menu-has-left.stacked-menu-has-hoverable.stacked-menu-has-compact .has-child.has-open > .menu, .stacked-menu-has-left.stacked-menu-has-collapsible.stacked-menu-has-compact .has-child.has-open > .menu {
    right: 100%;
    left: auto; }

/*# sourceMappingURL=stacked-menu.css.map */