diff options
author | Jouni Koivuviita <jouni@vaadin.com> | 2014-08-07 22:15:01 +0300 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2014-08-11 18:26:34 +0000 |
commit | adc6748d6bcd3c4eac50855160ab060e3551d2b3 (patch) | |
tree | aef9fd3438cba75ed6f663f0817c4bebbd4fea8b /WebContent/VAADIN/themes/valo/components/_valo-menu.scss | |
parent | 328c4ca30baaf95885b1297ffd2f60f0bb614b52 (diff) | |
download | vaadin-framework-adc6748d6bcd3c4eac50855160ab060e3551d2b3.tar.gz vaadin-framework-adc6748d6bcd3c4eac50855160ab060e3551d2b3.zip |
Split common-stylenames to individual component files (#14374)
Moved notification and valo-menu styles to the components folder as
well, and added them to the $v-included-components list.
Additional styles are now also controlled with a list variable, which
lists all components whose additional styles should be included in the
build.
Change-Id: Ifb8d49d71622decf8fa0d4875985fcafd908a1f8
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_valo-menu.scss')
-rw-r--r-- | WebContent/VAADIN/themes/valo/components/_valo-menu.scss | 465 |
1 files changed, 465 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss new file mode 100644 index 0000000000..8bd26e2b10 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -0,0 +1,465 @@ +$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default; + +@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; + text-align: center; + height: auto; + color: inherit; + + > .v-menubar-menuitem { + color: inherit; + white-space: normal; + line-height: 1.4; + + 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); + box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow); + display: block; + margin: 0 auto .3em; + } + } + + .v-menubar-menuitem-selected { + background: transparent; + } + } + + .valo-menu-subtitle { + @include valo-menu-subtitle-style($bg); + + .valo-menu-badge { + color: mix(valo-font-color($bg), $v-selection-color); + } + } + + .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; + +} + + +@mixin valo-menu-responsive { + .v-ui { + @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-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; + } + + .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); + + .v-menubar-menuitem { + line-height: $v-unit-size - 1px; + } + + 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); + } + } + + .valo-menuitems { + @include valo-menu-style; + position: fixed; + z-index: 200; + 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; + } + } + } +} + + + +@mixin valo-menu-style ($bg: $valo-menu-background-color) { + height: 100%; + @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 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; +} + + + +@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)); +} + + + +@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); +} + + + +@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; + 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; + } + + &.selected { + background: darken($bg, 3%); + + .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%)); + } +} + + + + +@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); + } +} + + + +@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: darken($bg, 3%); + + .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; + } + } +} + + + +@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; + } +} |