| /** |
| * @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 { |
| @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; |
| } |
| } |