dev/scss/base/menu.scss

@charset "utf-8";
@import "choose";
@import "lengths";
@import "icons";

/**
 * Definitions for menu design.
 */

ul.menu {
  position: absolute;
  padding: 0;
  margin: 0;
  text-indent: 0;

  opacity: 0;
  &.visible {
    opacity: 1;
  }

  list-style: {
    type:     none;
    position: outside;
  }

  &,
  > span.pref:not(:empty) {
    box-sizing:  border-box;
    text-shadow: none;
    font-weight: normal;
    z-index:     120;
  }
  
  > li,
  > span.pref:not(.active) {
    @include choose-item;
  }

  > li,
  > span.pref:not(:empty) {
    @include choose-item;
    box-shadow:  $choose-box-shadow;
    cursor:      pointer;
    padding:     $item-padding;
    white-space: normal;
    border: {
      width:        $border-size;
      bottom-width: 0px;
      top-width:    0px;
      style:        solid;
    }
  }
  span.desc {
    display:   block;
    font-size: 75%;
  }

  div.lengthField {
    border: {
      color: transparent;
      width: $border-size;
    }
    padding: $item-padding;
    padding-top: 0;
    padding-bottom: 0;
    span {
      display:     block !important;
      line-height: 0;
      color:       transparent;
    }
  }

  /**
   * Ruler
   */
  > div.ruler {
    position:         absolute;
    right:            0px;
    margin-right:     -14px;
    background-color: transparent;
    width:            14px;
    height:           100%;
    opacity:          0;
    cursor:           pointer;
    transition:       opacity .5s ease 1s;

    > span {
      @include choose-active;
      position: absolute;
      display:  block;
      right:    0;
      width:    10px;
      z-index:  115;
      border: {
	      radius: 4px;
	      width:  2px;
	      style:  solid;
      }
    }

    &.active > span {
      @include choose-hover;
    }

    > div {
      @include choose-item;
      box-shadow: $choose-box-shadow;
      position:   absolute;
      right:      0;
      width:      10px;
      height:     100%;
      border: {
        radius: 4px;
	      width:  2px;
	      style:  solid;
      }
    }
  }

  &:active > div.ruler,
  &:hover > div.ruler,
  > div.ruler.active {
    transition: opacity .1s ease;
    opacity:    1;
  }


  /**
   * List items
   */
  > li,
  div.lengthField {
    padding-right: 1.6em;
  }

  > li {
    &:first-of-type {
      border-top: {
	      width:        $border-size;
	      left-radius:  $standard-border-radius;
	      right-radius: $standard-border-radius;
      }
    }

    &:last-of-type {
      border-bottom: {
	      width:        $border-size;
	      left-radius:  $standard-border-radius;
	      right-radius: $standard-border-radius;
      }
    }
    mark {
      text-decoration:  underline;
      background-color: transparent;
      color:            inherit;
      font-weight:      bold;
    }
  }

  > li.active,
  > span.pref.active {
    @include choose-active;
  }

  > li:hover,
  > span.pref:hover {
    @include choose-hover;
  }

  /**
   * Default prefix view
   */
  > span.pref:not(:empty) {
    position:      absolute;
    min-width:     5px;
    font-size:     80%;
    left:          0;
    bottom:        0;
    display:       block;
    margin-bottom: -2.1em;
    padding:       2px 6px;
    border: {
      radius: $standard-border-radius;
      width:  $border-size;
    }
  }
}


/**
 * Rolling menu
 */
ul.menu.roll {
  > li:first-of-type {
    &:not(.no-more):before {
      position:    absolute;
      font-family: "FontAwesome";
      content:     $fa-up;
      right:       .5em;
      top:         .4em;
    }
  }
  > li:last-of-type {
    &:not(.no-more):before {
      position:    absolute;
      font-family: "FontAwesome";
      content:     $fa-down;
      right:       .5em;
      bottom:      .4em;
    }
  }
  &:not(.visible) {
    height: 0;
  }
}


/**
 * Sorting menu
 */
ul.menu.sort {
  position: relative;
  display:  inline-block;
  > li::before {
    content: '';
  }
  > li.active:hover {
    @include choose-remove;
  }
}


/**
 * select menu
 */
span.menu.select {
  > span {
    z-index: 105;
  }
  > ul.menu.roll {
    display: none;
    z-index: -100;
    &.visible {
      display: block;
      z-index: 110;
    }
  }
}