vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss

/**
 * @group valo-menu
 */

$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default;

/**
 *
 *
 * @param {string} $bg ($valo-menu-background-color) - 
 *
 * @group valo-menu
 */
@mixin valo-menu ($bg: $valo-menu-background-color) {

  .valo-menu {
    @include valo-menu-style($bg);
  }

  .valo-menu-toggle {
    display: none;
    position: fixed;
    z-index: 200;
    $offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2);
    top: $offset;
    left: $offset;
    min-width: 0;
  }

  .valo-menu-part {
    border-left: valo-border($color: $bg, $strength: 0.6);
    height: 100%;
    padding-bottom: $v-unit-size;
    overflow: auto;

    &:first-child {
      border-left: none;
    }
  }

  .valo-menu-title,
  .valo-menu-subtitle,
  .valo-menu-item {
    display: block;
    line-height: inherit;
    white-space: nowrap;
    position: relative;

    .valo-menu-badge {
      position: absolute;
      right: round($v-unit-size/2);
    }
  }

  .valo-menu-title {
    @include valo-menu-title-style;
    text-align: center;

    .v-menubar.v-menubar {
      background: transparent;
      border-color: first-color(valo-border($color: $v-selection-color));
      color: inherit;
      @include box-shadow(none);
      text-shadow: inherit;
    }

    .v-menubar-menuitem {
      background: transparent;
      @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
      text-shadow: inherit;
      font-size: $v-font-size;
      border-color: inherit;
    }

    h1, .v-label-h1,
    h2, .v-label-h2,
    h3, .v-label-h3,
    h4, .v-label-h4 {
      margin-top: 0;
      margin-bottom: 0;
      color: inherit;
    }
  }

  .v-menubar-user-menu {
    @include valo-menubar-borderless-style;
    margin: round($v-unit-size/2) round($v-unit-size/5);
    display: block;
    overflow: hidden;
    text-align: center;
    height: auto;
    color: inherit;

    > .v-menubar-menuitem {
      color: inherit;
      white-space: normal;
      line-height: 1.4;
      margin: 0;

      img.v-icon {
        width: round($v-unit-size * 1.5);
        height: round($v-unit-size * 1.5);
        border-radius: ceil($v-unit-size * 1.5 / 2 + first-number($v-border));
        box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow);
        display: block;
        margin: 0 auto .3em;
        border: valo-border();
      }

      &:after {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }

    .v-menubar-menuitem-selected {
      background: transparent;
    }
  }

  .valo-menu-subtitle {
    @include valo-menu-subtitle-style($bg);
  }

  .valo-menuitems {
    display: block;
  }

  .valo-menu-item {
    @include valo-menu-item-style($bg);
  }

  .valo-menu-part.large-icons {
    @include valo-menu-large-icons-style($bg);
  }

  .valo-menu-logo {
    @include valo-menu-logo-style;
  }

  @include valo-menu-responsive;

}


/**
 *
 *
 *
 * @group valo-menu
 */
@mixin valo-menu-responsive {
  .valo-menu-responsive {
    @include width-range($min: 801px, $max: 1100px) {
      .valo-menu-part {
        @include valo-menu-large-icons-style($valo-menu-background-color);
      }
    }

    @include width-range($max: 800px) {
      padding-top: $v-unit-size;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      .v-loading-indicator {
        top: $v-unit-size;
      }

      > .v-widget {
        position: relative !important
      }

      .valo-menu {
        border-right: none;
      }

      .valo-menu-part {
        overflow: visible;
      }

      .valo-menu-toggle {
        display: inline-block;
      }

      .valo-menu-title {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        height: $v-unit-size !important;
        padding-top: 0;
        padding-bottom: 0;
        -webkit-backface-visibility: hidden;
      }

      .valo-menu .v-menubar-user-menu {
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        height: $v-unit-size;
        color: valo-font-color($v-selection-color, 0.5);
        max-width: 30%;
        -webkit-backface-visibility: hidden;

        .v-menubar-menuitem {
          line-height: $v-unit-size - 1px;
          white-space: nowrap;
        }

        img.v-icon {
          display: inline-block;
          margin: 0 round($v-unit-size / 6) 0 0;
          width: round($v-unit-size / 2);
          height: round($v-unit-size / 2);
          border-radius: ceil($v-unit-size / 4);
          border: none;
        }
      }

      .valo-menuitems {
        @include valo-menu-style;
        position: fixed;
        z-index: 9000;
        top: $v-unit-size;
        bottom: 0;
        height: auto;
        max-width: 100%;
        overflow: auto;
        padding: round($v-unit-size / 2) 0;
        @include transform(translatex(-100%));
        @include transition(all 300ms);
      }

      .valo-menu-visible .valo-menuitems,
      .valo-menu-hover:hover .valo-menuitems {
        @include transform(translatex(0%));
      }
    }

    @include width-range($max: 500px) {
      .valo-menu-toggle .v-button-caption {
        display: none;
      }

      .valo-menu .v-menubar-user-menu .v-menubar-menuitem-caption {
        display: inline-block;
        width: round($v-unit-size / 2);
        overflow: hidden;
      }
    }
  }
}



/**
 *
 *
 * @param {string} $bg ($valo-menu-background-color) - 
 *
 * @group valo-menu
 */
@mixin valo-menu-style ($bg: $valo-menu-background-color) {
  height: 100%;
  @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
  color: valo-font-color($bg, 0.5);
  font-size: round($v-font-size * 0.9);
  line-height: round($v-unit-size * 0.8);
  border-right: valo-border($color: $bg);
  white-space: nowrap;
}



/**
 *
 *
 *
 * @group valo-menu
 */
@mixin valo-menu-title-style {
  line-height: 1.2;
  @include valo-gradient($color: $v-selection-color);
  $font-color: valo-font-color($v-selection-color, 1);
  color: $font-color;
  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
  padding: round($v-unit-size/3) round($v-unit-size/2);
  font-size: round($v-font-size * 0.9);
  border-bottom: valo-border($color: $v-selection-color);
  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
}



/**
 *
 *
 * @param {color} $bg ($valo-menu-background-color) - 
 *
 * @group valo-menu
 */
@mixin valo-menu-subtitle-style ($bg: $valo-menu-background-color) {
  color: valo-font-color($bg, 0.33);
  margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
  border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);

  [class*="badge"] {
    color: mix(valo-font-color($bg), $v-selection-color);
  }
}



/**
 *
 *
 * @param {color} $bg ($valo-menu-background-color) - 
 *
 * @group valo-menu
 */
@mixin valo-menu-item-style ($bg: $valo-menu-background-color) {
  $font-color: valo-font-color($bg, 0.5);
  outline: none;
  font-weight: $v-font-weight + 100;
  padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: 2px);
  @include transition(background-color 300ms, color 60ms);

  $diff: color-luminance($bg) - color-luminance($v-selection-color);
  $active-color: $v-selection-color;
  @if abs($diff) < 30 {
    $active-color: lighten($v-selection-color, 10%);
  }

  [class*="caption"] {
    vertical-align: middle;
    display: inline-block;
    width: 90%;
    max-width: 15em;
    padding-right: round($v-unit-size/2);
    text-overflow: ellipsis;
    overflow: hidden;
  }

  [class*="badge"] {
    @if abs($diff) < 50 {
      color: mix(valo-font-color($bg), $v-selection-color);
    } @else {
      color: $active-color;
    }
  }

  &.selected {
    background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));

    .v-icon {
      color: $active-color;
    }

    [class*="badge"] {
      @include valo-badge-style($states: active, $active-color: $active-color);
    }
  }

  &:focus,
  &:hover,
  &.selected {
    color: valo-font-color($bg, 1);
  }

  // Font icons
  span.v-icon {
    min-width: 1em;
    margin-right: round($v-unit-size/2);
    text-align: center;
    vertical-align: middle;

    @if $v-gradient {
      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0.75)));
    }

    + span {
      margin-left: 0;
    }
  }

  [class*="badge"] {
    @include valo-badge-style($states: inactive, $background-color: lighten($bg, 5%));
  }
}




/**
 *
 *
 * @param {string} $states (inactive active) - 
 * @param {color} $background-color (null) - 
 * @param {color} $active-color ($v-selection-color) - 
 *
 * @group valo-menu
 */
@mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) {
  @if contains($states, inactive) {
    background-color: $background-color;
    @include transition(background-color 300ms);
    line-height: 1;
    padding: round($v-unit-size/9) round($v-unit-size/6);
    min-width: round($v-font-size/1.5);
    text-align: center;
    top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
    border-radius: $v-border-radius;
  }

  @if contains($states, active) {
    @include valo-gradient($color: $active-color);
    color: valo-font-color($active-color);
  }
}



/**
 *
 *
 * @param {color} $bg (darken($valo-menu-background-color, 4%)) - 
 *
 * @group valo-menu
 */
@mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) {
  background-color: $bg;
  min-width: $v-unit-size * 2;
  max-width: $v-unit-size * 3;

  .valo-menu-title {
    font-size: round($v-font-size * 0.75);

    .v-label-undef-w {
      white-space: normal;
    }
  }

  .v-menubar-user-menu {
    margin-left: 0;
    margin-right: 0;
    font-size: round($v-font-size * 0.7);

    img.v-icon {
      width: round($v-unit-size/1.3);
      height: round($v-unit-size/1.3);
    }
  }

  [class*="subtitle"] {
    margin: round($v-unit-size/4) 0 0;
    padding: round($v-unit-size/5) round($v-unit-size/1.5) round($v-unit-size/5) round($v-unit-size/4);
    line-height: 1;
    border: none;
    text-overflow: ellipsis;
    overflow: hidden;
    background: darken($bg, 6%);
    font-size: round($v-font-size * 0.8);
    box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);

    [class*="badge"] {
      right: round($v-unit-size/4);
    }

    + .valo-menu-item {
      border-top: none;
    }
  }

  .valo-menu-item {
    display: block;
    font-size: round($v-font-size * 1.6);
    line-height: 1;
    padding: round($v-unit-size/3);
    text-align: center;
    border-top: valo-border($color: $bg, $strength: 0.2, $border: first-number($v-border) solid v-tone);

    &:first-child {
      border-top: none;
    }

    [class*="caption"] {
      display: block;
      width: auto;
      margin: .3em 0 0;
      padding: 0;
      font-size: round($v-font-size * 0.7);
      line-height: 1.3;
    }

    .v-icon {
      margin: 0;
    }

    span.v-icon {
      opacity: 0.8;
    }

    &.selected {
      background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));

      .v-icon {
        opacity: 1;
      }

      [class*="badge"] {
        border-color: darken($bg, 3%);
      }
    }

    [class*="badge"] {
      padding-left: round($v-unit-size/9);
      padding-right: round($v-unit-size/9);
      top: round($v-unit-size/5);
      right: round($v-unit-size/5);
      border: 2px solid $bg;
    }
  }
}



/**
 *
 *
 *
 * @group valo-menu
 */
@mixin valo-menu-logo-style {
  display: block;
  overflow: hidden;
  width: round($v-unit-size * 1.2) !important;
  height: round($v-unit-size * 1.2);
  border-radius: $v-border-radius;
  text-align: center;
  @include valo-gradient($color: $v-selection-color);
  color: valo-font-color($v-selection-color, 1);
  font-size: round($v-unit-size/1.5);
  line-height: round($v-unit-size * 1.2);
  margin: round($v-unit-size/2) auto;
  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));

  &:focus {
    outline: none;
  }
}