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

A flexible stacked navigation menu.

{"version":3,"sources":["_core.scss","_variables.scss","_mixins.scss","_collapsible.scss","_hoverable.scss","_direction.scss"],"names":[],"mappings":"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","file":"stacked-menu.css","sourcesContent":["/** The root StackedMenu */\n.#{$stacked-menu-class-prefix} {\n  position: relative;\n  padding: .25rem 0;\n  background-color: $stacked-menu-bg;\n\n  ul.menu {\n    display: block;\n    padding-left: 0;\n    margin-bottom: 0;\n    list-style: none;\n\n    + .menu {\n      margin-top: 1em;\n    }\n  }\n\n  .menu-header {\n    margin: .5em 0 0;\n    padding: $stacked-menu-padding;\n    color: $stacked-menu-color-disabled;\n    font-size: $stacked-menu-header-font-size;\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n\n    > .badge,\n    > .label {\n      position: absolute;\n      right: $stacked-menu-padder + ($stacked-menu-padder/2);\n      z-index: 2;\n    }\n  }\n\n  .menu-subhead {\n    display: none;\n    padding: $stacked-menu-padding;\n    font-size: $stacked-menu-font-size;\n    color: $stacked-menu-child-active-color;\n    line-height: 1.75em;\n    overflow: hidden;\n  }\n\n  .menu-link {\n    position: relative;\n    display: block;\n    padding: $stacked-menu-padding;\n    font-size: $stacked-menu-font-size;\n    color: $stacked-menu-child-color;\n    text-decoration: none;\n    line-height: 1.75em;\n    overflow: hidden;\n    outline: 0;\n\n    > .menu-icon {\n      width: 1.25em;\n      margin-right: .5em;\n      text-align: center;\n      font-size: $stacked-menu-icon-size;\n      color: $stacked-menu-icon-color;\n    }\n\n    > .badge,\n    > .label {\n      position: absolute;\n      right: $stacked-menu-padder + ($stacked-menu-padder/2);\n      margin-top: .25em;\n      z-index: 2;\n    }\n\n    @include hover-focus {\n      color: $stacked-menu-child-hover-color;\n      background-color: $stacked-menu-child-hover-bg;\n      text-decoration: none;\n      overflow: visible;\n\n      .menu-icon {\n        color: $stacked-menu-icon-hover-color;\n      }\n    }\n  }\n\n  /* global state */\n  .menu-item {\n\n    + .menu-item {\n      margin-top: 0;\n    }\n\n    &.has-open:not(.has-active) {\n      > .menu-link {\n        background-color: $stacked-menu-child-hover-bg;\n        color: $stacked-menu-child-hover-color;\n        .menu-icon {\n          color: $stacked-menu-icon-hover-color;\n        }\n      }\n    }\n\n    &.has-active {\n      > .menu-link {\n        background-color: $stacked-menu-child-active-bg;\n        color: $stacked-menu-child-active-color;\n        .menu-icon {\n          color: $stacked-menu-icon-active-color;\n        }\n      }\n    }\n  }\n\n  /* nav child */\n  .has-child {\n    position: relative;\n    > .menu {\n      height: 0;\n      visibility: hidden;\n      opacity: 0;\n      background-color: $stacked-menu-child-bg;\n    }\n    &.has-active:hover > .menu,\n    &.has-open > .menu {\n      overflow: visible;\n    }\n    &.has-active > .menu {\n      height: auto;\n      visibility: visible;\n      opacity: 1;\n    }\n  }\n\n  /* nav level 1 */\n  > .menu > .menu-item {\n    > .menu-link {\n      color: $stacked-menu-color;\n      @include hover-focus {\n        color: $stacked-menu-hover-color;\n        background-color: $stacked-menu-hover-bg;\n      }\n    }\n    &.has-open > .menu-link {\n      color: $stacked-menu-hover-color;\n      background-color: $stacked-menu-hover-bg;\n    }\n\n    &.has-active > .menu-link {\n      background-color: $stacked-menu-active-bg;\n      color: $stacked-menu-active-color;\n      @include box-shadow(inset 3px 0 0 $stacked-menu-accent-color);\n    }\n\n    /* level 1 */\n    > .menu {\n      .menu-link {\n        padding-left: ($stacked-menu-padder * 6);\n      }\n\n      /* level 2 */\n      .menu {\n        .menu-link {\n          padding-left: ($stacked-menu-padder * 8);\n        }\n\n        /* level 3 */\n        .menu {\n          .menu-link {\n            padding-left: ($stacked-menu-padder * 10);\n          }\n        }\n      }\n    }\n  }\n\n  /* disabled state */\n  .menu-item.disabled > .menu-link,\n  .menu-item > .menu-link.disabled {\n    color: $stacked-menu-color-disabled;\n\n    .menu-icon {\n      color: $stacked-menu-color-disabled;\n    }\n\n    @include hover-focus {\n      &,\n      .menu-icon {\n        background-color: transparent;\n        color: $stacked-menu-color-disabled;\n      }\n    }\n  }\n}\n\n\n/* Compact */\n.#{$stacked-menu-class-prefix}-has-compact {\n  .has-child.has-active > .menu {\n    visibility: hidden;\n    height: 0;\n    opacity: 0;\n  }\n\n  .has-child {\n    &.has-active {\n      .menu-subhead {\n        background-color: $stacked-menu-active-bg;\n      }\n    }\n    .menu-subhead {\n      display: block;\n    }\n  }\n\n  > .menu {\n    > .menu-item > .menu-link {\n      text-align: center;\n      padding-right: 0;\n      padding-left: 0;\n      max-height: 40px;\n\n      > .badge,\n      > .label {\n        top: 0;\n        right: ($stacked-menu-padder/2);\n      }\n\n      .menu-icon {\n        margin: 0;\n        font-size: 1.25em;\n        line-height: 1.5em;\n      }\n    }\n    > .menu-item.has-child > .menu-link .menu-text {\n      display: none;\n    }\n    > .menu-header {\n      // transform to empty space\n      margin: 0;\n      height: 0;\n      overflow: hidden;\n      visibility: hidden;\n      opacity: 0;\n      user-select: none;\n    }\n    > .menu-item:not(.has-child) > .menu-link {\n      .menu-text {\n        position: absolute;\n        display: block;\n        top: 0;\n        left: 100%;\n        padding: $stacked-menu-padder ($stacked-menu-padder*1.5) $stacked-menu-padder 0;\n        border-radius: 0 $stacked-menu-border-radius $stacked-menu-border-radius 0;\n        width: 0;\n        height: 0;\n        visibility: hidden;\n        opacity: 0;\n        background-color: $stacked-menu-hover-bg;\n        line-height: 1.75em;\n        white-space: nowrap;\n        @include transition(opacity 150ms linear);\n      }\n\n      @include hover {\n        .menu-text {\n          width: auto;\n          height: auto;\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n    }\n    > .menu-item.has-active > .menu-link .menu-text {\n      background-color: $stacked-menu-active-bg;\n    }\n    > .menu-item.disabled > .menu-link,\n    > .menu-item > .menu-link.disabled {\n      .menu-text {\n        background-color: $stacked-menu-bg;\n      }\n    }\n    > .menu-item.has-child {\n      > .menu-link {\n        &:before {\n          content: none;\n        }\n        .menu-text {\n          padding: $stacked-menu-padding;\n          text-align: left;\n          width: 200px;\n        }\n      }\n    }\n  }\n}\n","$enable-shadows:              true !default;\n$enable-transitions:          true !default;\n$transition-base:             all 150ms linear !default;\n\n$stacked-menu-class-prefix:         'stacked-menu' !default;\n$stacked-menu-breakpoint:           992px !default;\n$stacked-menu-padder:               .5rem !default;\n$stacked-menu-border-radius:        0 !default;\n$stacked-menu-bg:                   #15191d !default;\n$stacked-menu-child-bg:             lighten($stacked-menu-bg, 3) !default;\n$stacked-menu-accent-color:         #5d67ad !default;\n// nav menu\n$stacked-menu-font-size:          .875rem !default;\n$stacked-menu-header-font-size:   .8125rem !default;\n$stacked-menu-padding:            $stacked-menu-padder ($stacked-menu-padder * 2) !default;\n\n$stacked-menu-icon-size:            1rem !default;\n\n// theme\n$stacked-menu-hover-bg:           darken($stacked-menu-bg, 3) !default;\n$stacked-menu-active-bg:          lighten($stacked-menu-bg, 5) !default;\n$stacked-menu-color:              #ccc !default;\n$stacked-menu-hover-color:        #eee !default;\n$stacked-menu-active-color:       #eee !default;\n$stacked-menu-color-disabled:     #555 !default;\n// icon\n$stacked-menu-icon-color:          #999 !default;\n$stacked-menu-icon-hover-color:    $stacked-menu-hover-color !default;\n$stacked-menu-icon-active-color:   $stacked-menu-active-color !default;\n// child\n$stacked-menu-child-hover-bg:           transparent !default;\n$stacked-menu-child-active-bg:          transparent !default;\n$stacked-menu-child-color:              #999 !default;\n$stacked-menu-child-hover-color:        $stacked-menu-accent-color !default;\n$stacked-menu-child-active-color:       #fff !default;","@mixin breakpoint-up($breakpoint) {\n  @media (min-width: ($breakpoint + 1px)) {\n    @content;\n  }\n}\n\n@mixin breakpoint-down($breakpoint) {\n  @media (max-width: ($breakpoint - 1px)) {\n    @content;\n  }\n}\n\n@mixin box-shadow($shadow...) {\n  @if $enable-shadows {\n    box-shadow: $shadow;\n  }\n}\n\n@mixin transition($transition...) {\n  @if $enable-transitions {\n    @if length($transition) == 0 {\n      transition: $transition-base;\n    } @else {\n      transition: $transition;\n    }\n  }\n}\n\n@mixin hover {\n  &:hover { @content }\n}\n\n@mixin hover-focus {\n  &:focus { @content }\n  @include hover { @content }\n}\n\n@mixin active {\n  &:active,\n  &.active { @content }\n}\n\n@mixin hover-focus-active {\n  &:focus,\n  &:active,\n  &.active {\n    @content\n  }\n  @include hover { @content }\n}\n","/* Behavior */\n.#{$stacked-menu-class-prefix}-has-collapsible {\n  /** caret angle, Only show on collapsible mode */\n  .has-child {\n    > .menu-link::after {\n      display: inline-block;\n      content: '+';\n      position: absolute;\n      right: ($stacked-menu-padder*1.5);\n      top: 50%;\n      transform: translateY(-.5em);\n      height: 1em;\n      width: 1em;\n      line-height: 1em;\n      text-align: center;\n    }\n\n    &.has-active > .menu-link::after,\n    &.has-open > .menu-link::after {\n      content: '-'\n    }\n  }\n\n  .has-child > .menu {\n    visibility: visible;\n    opacity: 1;\n    overflow: hidden;\n  }\n  .has-child.has-open:not(.has-active) {\n    > .menu {\n      height: auto;\n    }\n  }\n}\n\n/** collapsible on compact mode */\n.#{$stacked-menu-class-prefix}-has-collapsible.#{$stacked-menu-class-prefix}-has-compact {\n  /** hide caret on level 1 */\n  > .menu > .has-child {\n    > .menu {\n      transform-origin: 0 0;\n      transform: scale(.6);\n      transition: opacity 150ms linear, transform 150ms linear;\n    }\n\n    &.has-open > .menu {\n      transform: scale(1);\n    }\n\n    > .menu-link:after {\n      display: none;\n    }\n  }\n  .has-child {\n    &.has-open > .menu {\n      position: absolute;\n      width: 200px;\n      top: 0;\n      left: 100%;\n      height: auto;\n      visibility: visible;\n      opacity: 1;\n      border-radius: 0 $stacked-menu-border-radius $stacked-menu-border-radius 0;\n    }\n    > .menu .menu-link {\n      padding-left: ($stacked-menu-padder * 2);\n    }\n  }\n  /** child level 2 up */\n  .menu .menu .has-child {\n    &.has-open > .menu {\n      position: static;\n      width: auto;\n      top: auto;\n      left: auto;\n    }\n    > .menu {\n      .menu-link {\n        padding-left: ($stacked-menu-padder * 4);\n      }\n      .menu {\n        .menu-link {\n          padding-left: ($stacked-menu-padder * 6);\n        }\n      }\n    }\n  }\n}\n","/* Give a transition */\n.#{$stacked-menu-class-prefix}-has-hoverable {\n  .has-child > .menu {\n    transform-origin: 0 0;\n    @include transition(opacity 150ms linear, transform 150ms linear);\n  }\n  /** except level 1 .has-active */\n  .has-child:not(.has-active) > .menu {\n    transform: scale(.6);\n  }\n}\n.#{$stacked-menu-class-prefix}-has-hoverable.#{$stacked-menu-class-prefix}-has-compact {\n  /** level 1 */\n  > .menu > .has-child > .menu {\n    @include transition(opacity 150ms linear, transform 150ms linear);\n  }\n  /** overwrite for all */\n  .has-child > .menu {\n    transform: scale(.6);\n  }\n}\n\n/* Behavior */\n.#{$stacked-menu-class-prefix}-has-hoverable,\n.#{$stacked-menu-class-prefix}-has-compact {\n  /** except level 1 .has-active */\n  .has-child {\n    &.has-open:not(.has-active) > .menu {\n      position: absolute;\n      width: 200px;\n      top: 0;\n      left: 100%;\n      height: auto;\n      visibility: visible;\n      opacity: 1;\n      transform: scale(1);\n    }\n    > .menu {\n      .menu-item > .menu .menu-link,\n      .menu-item > .menu .menu .menu-link {\n        padding-left: ($stacked-menu-padder * 2);\n      }\n    }\n    /** caret */\n    > .menu-link {\n      &:before {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 50%;\n        width: 0;\n        height: 0;\n        border-top: 8px solid transparent;\n        border-bottom: 8px solid transparent;\n        /** the caret */\n        border-right:8px solid $stacked-menu-child-bg;\n        transform: translateY(-8px);\n      }\n    }\n  }\n}\n\n/** hoverable on compact mode */\n.#{$stacked-menu-class-prefix}-has-hoverable.#{$stacked-menu-class-prefix}-has-compact {\n  /** overwrite for all */\n  .has-child.has-open {\n    > .menu {\n      position: absolute;\n      width: 200px;\n      top: 0;\n      left: 100%;\n      height: auto;\n      visibility: visible;\n      opacity: 1;\n      border-radius: 0 $stacked-menu-border-radius $stacked-menu-border-radius 0;\n      transform: scale(1);\n\n      .menu-item > .menu-link {\n        padding-left: ($stacked-menu-padder * 2);\n      }\n    }\n  }\n}\n","/** open menu to left direction */\n/** Core */\n.#{$stacked-menu-class-prefix}-has-left {\n  > .menu > .menu-item {\n    &.has-active > .menu-link {\n      @include box-shadow(inset -3px 0 0 $stacked-menu-accent-color);\n    }\n  }\n  /** compact */\n  &.#{$stacked-menu-class-prefix}-has-compact {\n    > .menu {\n      > .menu-item > .menu-link > .badge {\n        right: auto;\n        left: ($stacked-menu-padder/2);\n      }\n      > .menu-item:not(.has-child) > .menu-link {\n        .menu-text {\n          right: 100%;\n          left: auto;\n          padding: $stacked-menu-padder 0 $stacked-menu-padder ($stacked-menu-padder*1.5);\n          border-radius: $stacked-menu-border-radius 0 0 $stacked-menu-border-radius;\n        }\n      }\n    }\n  }\n}\n\n/** Behavior */\n.#{$stacked-menu-class-prefix}-has-left {\n  &.#{$stacked-menu-class-prefix}-has-hoverable {\n    .has-child > .menu {\n      transform-origin: 100% 0;\n    }\n  }\n  &.#{$stacked-menu-class-prefix}-has-collapsible.#{$stacked-menu-class-prefix}-has-compact {\n    > .menu > .has-child > .menu {\n      transform-origin: 100% 0;\n    }\n  }\n\n  &.#{$stacked-menu-class-prefix}-has-hoverable,\n  &.#{$stacked-menu-class-prefix}-has-compact {\n    .has-child.has-open:not(.has-active) {\n      > .menu {\n        left: auto;\n        right: 100%;\n      }\n      // caret\n      > .menu-link {\n        &:before {\n          right: auto;\n          left: 0;\n          // the caret\n          border-right: 0 solid transparent;\n          border-left: 8px solid $stacked-menu-child-bg;\n        }\n      }\n    }\n  }\n  /** both hoverable & collapsible on compact mode */\n  &.#{$stacked-menu-class-prefix}-has-hoverable.#{$stacked-menu-class-prefix}-has-compact,\n  &.#{$stacked-menu-class-prefix}-has-collapsible.#{$stacked-menu-class-prefix}-has-compact {\n    .has-child.has-open {\n      > .menu {\n        left: auto;\n        right: 100%;\n      }\n    }\n  }\n}\n"]}