summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
diff options
context:
space:
mode:
authorJouni Koivuviita <jouni@vaadin.com>2014-08-07 22:15:01 +0300
committerVaadin Code Review <review@vaadin.com>2014-08-11 18:26:34 +0000
commitadc6748d6bcd3c4eac50855160ab060e3551d2b3 (patch)
treeaef9fd3438cba75ed6f663f0817c4bebbd4fea8b /WebContent/VAADIN/themes/valo/components/_valo-menu.scss
parent328c4ca30baaf95885b1297ffd2f60f0bb614b52 (diff)
downloadvaadin-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.scss465
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;
+ }
+}