From e95965a10bb6070096ee239ba22cc0e038874bde Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:32:34 +0300 Subject: Add two new size variants for Valo, tiny and huge Available as additional style names for buttons, text fields/text areas, combo boxes, date fields and labels. Change-Id: I12f36935a690f5bf3f12333f5bd4ac986d4efd1f --- WebContent/VAADIN/themes/valo/components/_button.scss | 16 ++++++++++++++++ WebContent/VAADIN/themes/valo/components/_combobox.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_datefield.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_label.scss | 8 ++++++++ WebContent/VAADIN/themes/valo/components/_textarea.scss | 10 ++++++++++ WebContent/VAADIN/themes/valo/components/_textfield.scss | 12 ++++++++++++ WebContent/VAADIN/themes/valo/shared/_variables.scss | 12 +++++++++--- 7 files changed, 75 insertions(+), 3 deletions(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index ec74f70eaf..42953ea610 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -45,6 +45,10 @@ @include valo-link-style; } + .#{$primary-stylename}-tiny { + @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null); + } + .#{$primary-stylename}-small { @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null); } @@ -53,6 +57,10 @@ @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null); } + .#{$primary-stylename}-huge { + @include valo-button-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--huge, $font-weight: null); + } + .#{$primary-stylename}-icon-align-right { @include valo-button-icon-align-right-style; } @@ -65,6 +73,10 @@ width: $v-unit-size; padding: 0; + &.#{$primary-stylename}-tiny { + width: $v-unit-size--tiny; + } + &.#{$primary-stylename}-small { width: $v-unit-size--small; } @@ -73,6 +85,10 @@ width: $v-unit-size--large; } + &.#{$primary-stylename}-huge { + width: $v-unit-size--huge; + } + .#{$primary-stylename}-caption { display: none; } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 4e5cd5bbac..538a5e2694 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -78,6 +78,11 @@ text-align: center; } + .#{$primary-stylename}-tiny { + @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); font-size: $v-font-size--small; @@ -87,6 +92,11 @@ @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); font-size: $v-font-size--large; } + + .#{$primary-stylename}-huge { + @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); + font-size: $v-font-size--huge; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 1538681740..8854992032 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -59,6 +59,11 @@ text-align: center; } + .#{$primary-stylename}-tiny { + @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); font-size: $v-font-size--small; @@ -68,6 +73,11 @@ @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); font-size: $v-font-size--large; } + + .#{$primary-stylename}-huge { + @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + font-size: $v-font-size--huge; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 29d811fc9a..51e7026834 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -112,6 +112,14 @@ $v-letter-spacing--h4: 0 !default; font-size: $v-font-size--small; } + .#{$primary-stylename}-tiny { + font-size: $v-font-size--tiny; + } + + .#{$primary-stylename}-huge { + font-size: $v-font-size--huge; + } + .#{$primary-stylename}-bold { font-weight: $v-font-weight + 200; } diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 4c5d99b8e2..5e524bfb9e 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -19,6 +19,11 @@ @include valo-textfield-borderless-style; } + .#{$primary-stylename}-tiny { + @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; @@ -29,6 +34,11 @@ font-size: $v-font-size--large; } + .#{$primary-stylename}-huge { + @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--huge; + } + .#{$primary-stylename}-align-right { text-align: right; } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 75cfc5ef85..dc516048e7 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -30,6 +30,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @include valo-textfield-borderless-style; } + .#{$primary-stylename}-tiny { + @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--tiny; + } + .#{$primary-stylename}-small { @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); font-size: $v-font-size--small; @@ -40,9 +45,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; font-size: $v-font-size--large; } + .#{$primary-stylename}-huge { + @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--huge; + } + @include valo-textfield-inline-icon($stylenames: inline-icon); + @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny); @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); + @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge); .#{$primary-stylename}-align-right { text-align: right; diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index b1c113b2cc..7dd3827298 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -60,14 +60,20 @@ $v-required-field-indicator-color : $v-error-indicator-color $v-friendly-color : #2c9720 !default; -$v-scaling-factor--small : 0.8 !default; +$v-scaling-factor--tiny : 0.75 !default; +$v-scaling-factor--small : 0.85 !default; $v-scaling-factor--large : 1.2 !default; +$v-scaling-factor--huge : 1.6 !default; +$v-unit-size--tiny : round($v-unit-size * $v-scaling-factor--tiny) !default; $v-unit-size--small : round($v-unit-size * $v-scaling-factor--small) !default; $v-unit-size--large : round($v-unit-size * $v-scaling-factor--large) !default; +$v-unit-size--huge : round($v-unit-size * $v-scaling-factor--huge) !default; -$v-font-size--small : round($v-font-size * $v-scaling-factor--small) !default; -$v-font-size--large : round($v-font-size * $v-scaling-factor--large) !default; +$v-font-size--tiny : ceil($v-font-size * $v-scaling-factor--tiny) !default; +$v-font-size--small : ceil($v-font-size * $v-scaling-factor--small) !default; +$v-font-size--large : ceil($v-font-size * $v-scaling-factor--large) !default; +$v-font-size--huge : ceil($v-font-size * $v-scaling-factor--huge) !default; -- cgit v1.2.3 From 726f77cce759feeaf78e4f92119b60ad33e0079d Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:28:07 +0300 Subject: Valo Tree Drag & Drop styles broken (#14360) Change-Id: Iafee03aaea3266ab32edb407e605ff3d8de474e1 --- WebContent/VAADIN/themes/valo/components/_tree.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 7e00f4ec09..93553fe55a 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -218,7 +218,8 @@ $v-tree-expand-animation-enabled: false !default; // Drag'n'drop styles .#{$primary-stylename}-node-drag-top:before, - .#{$primary-stylename}-node-drag-bottom:after { + .#{$primary-stylename}-node-drag-bottom:after, + .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children:before { content: "\2022"; display: block; position: absolute; @@ -230,6 +231,12 @@ $v-tree-expand-animation-enabled: false !default; color: $v-focus-color; text-indent: round($v-font-size/-4); text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color; + opacity: 1; + visibility: visible; + } + + .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded:after { + content: none; } .#{$primary-stylename}-node-caption-drag-center { -- cgit v1.2.3 From 9f1f5c5638757f7b727e300c7f437fd805914c54 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:07:45 +0300 Subject: Add new "colored" style for Label (Valo) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Makes any Label text colored, by default the same as $v-selection-color. Modify the Forms and Labels examples to use the new style, and remove the fixed color from “light” style form layout for header labels. Change-Id: I27a4fce56b1f734aa5c2c837bf1684284b0d96cc --- WebContent/VAADIN/themes/valo/components/_formlayout.scss | 1 - WebContent/VAADIN/themes/valo/components/_label.scss | 5 +++++ server/src/com/vaadin/ui/themes/ValoTheme.java | 5 +++++ uitest/src/com/vaadin/tests/themes/valo/Forms.java | 3 +++ uitest/src/com/vaadin/tests/themes/valo/Labels.java | 5 +++++ 5 files changed, 18 insertions(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index 25dbfbef28..fc065cec3d 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -198,7 +198,6 @@ > .v-label-h3, > .v-label-h4 { border-bottom: none; - color: $v-selection-color; } > .v-label-h3, diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 51e7026834..e61aa4ec11 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -1,6 +1,7 @@ $v-font-weight--header: $v-font-weight - 100 !default; $v-line-height--header: 1.1 !default; $v-font-family--header: null !default; +$v-font-color--colored: $v-selection-color !default; $v-font-size--h1: 2.4em !default; $v-font-size--h2: 1.6em !default; @@ -104,6 +105,10 @@ $v-letter-spacing--h4: 0 !default; @if $include-additional-styles { + .#{$primary-stylename}-colored { + color: $v-font-color--colored; + } + .#{$primary-stylename}-large { font-size: $v-font-size--large; } diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java index ea6b9082f8..d6bd97ed72 100644 --- a/server/src/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -185,6 +185,11 @@ public class ValoTheme { */ public static final String LABEL_BOLD = "bold"; + /** + * Colored text. Can be combined with any other Label style. + */ + public static final String LABEL_COLORED = "colored"; + /** * Success badge style. Adds a border around the label and an icon next to * the text. Suitable for UI notifications that need to in the direct diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java index c5b08902be..90a6c51496 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Forms.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java @@ -59,6 +59,7 @@ public class Forms extends VerticalLayout implements View { Label section = new Label("Personal Info"); section.addStyleName("h2"); + section.addStyleName("colored"); form.addComponent(section); StringGenerator sg = new StringGenerator(); @@ -85,6 +86,7 @@ public class Forms extends VerticalLayout implements View { section = new Label("Contact Info"); section.addStyleName("h3"); + section.addStyleName("colored"); form.addComponent(section); TextField email = new TextField("Email"); @@ -125,6 +127,7 @@ public class Forms extends VerticalLayout implements View { section = new Label("Additional Info"); section.addStyleName("h4"); + section.addStyleName("colored"); form.addComponent(section); TextField website = new TextField("Website"); diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java index 63c138093c..b5bab3a1d3 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Labels.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java @@ -102,6 +102,11 @@ public class Labels extends VerticalLayout implements View { label.addStyleName("light"); right.addComponent(label); + label = new Label( + "Colored type for highlighted text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + label.addStyleName("colored"); + right.addComponent(label); + label = new Label("A label for success"); label.addStyleName("success"); right.addComponent(label); -- cgit v1.2.3 From 56c98c7bf18a2aa2b5e86db0f46b1cdb3f900822 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:27:06 +0300 Subject: Make read only textfield visually different from normal text fields If the background color of the app is the same as the textfield background color, make the textfield background color slightly darker. Change-Id: I4870c3e396cdd8c586bfd3f0e812cf1f5ebab1eb --- WebContent/VAADIN/themes/valo/components/_textfield.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index dc516048e7..0b4fa50fb2 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -1,5 +1,5 @@ $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default; -$v-textfield-background-color--readonly: $v-app-background-color; +$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%)); $v-textfield-bevel: inset 0 1px 0 v-shade !default; $v-textfield-shadow: 0 1px 0 (v-tint 2) !default; $v-textfield-font-weight: 400 !default; -- cgit v1.2.3 From 12a588b53e53bc883be08298554a6adeedc5946b Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 12 Aug 2014 15:02:40 +0300 Subject: Modularize menubar mixins and add submenu indicator for top level items MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactored menubar mixins so that less overrides are necessary from normal button styles, and so that custom colored and custom sized menu bars are possible. Add new examples to test app for “drop down buttons” and “split buttons” using MenuBar. Change-Id: I2b0b76817d1c9119f82b2c2f4d7e5b95a9f05a5c --- WebContent/VAADIN/themes/tests-valo/_valotest.scss | 4 + .../VAADIN/themes/valo/components/_menubar.scss | 85 ++++++++++++---------- .../src/com/vaadin/tests/themes/valo/MenuBars.java | 71 ++++++++++++++++++ 3 files changed, 121 insertions(+), 39 deletions(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss index 7c024b323e..568dfec0b8 100644 --- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss +++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss @@ -141,4 +141,8 @@ .v-accordion-item-color1 .v-accordion-item-caption { @include valo-accordion-item-caption-style($background-color: $color2); } + + .v-menubar-color1 { + @include valo-menubar-style($background-color: $v-selection-color, $unit-size: null); + } } diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index e79e6898a9..7d7e854989 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -1,24 +1,8 @@ @mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) { .#{$primary-stylename} { - @include valo-button-static-style($states: normal, $vertical-centering: false); - @include valo-button-style($states: normal, $cursor: default); - padding: 0; - text-align: left; - overflow: hidden; - - &:focus:not(.v-disabled) { - @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false); - $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient); - @if type-of($v-focus-style) == list { - $box-shadow: $box-shadow, $v-focus-style; - } - @include box-shadow($box-shadow); - } - - &.v-disabled { - @include opacity($v-disabled-opacity); - } + @include valo-button-static-style($states: normal focus disabled, $vertical-centering: false); + @include valo-menubar-style; } .#{$primary-stylename}:active:after { @@ -60,6 +44,20 @@ .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator { display: none; + + + .#{$primary-stylename}-menuitem-caption:after { + font-family: FontAwesome; + content: "\f078"; + font-size: 0.7em; + vertical-align: .15em; + margin: 0 -.2em 0 .5em; + // IE filters are not supported on pseudo elements + opacity: .5; + } + + + .#{$primary-stylename}-menuitem-caption:empty:after { + margin-left: -.2em; + } } .#{$primary-stylename}-popup { @@ -70,10 +68,10 @@ } } - + @if $include-additional-styles { .#{$primary-stylename}-small { - @include valo-menubar-small-style($unit-size: $v-unit-size--small); + @include valo-menubar-style($background-color: null, $unit-size: $v-unit-size--small); font-size: $v-font-size--small; } @@ -87,6 +85,27 @@ +@mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) { + @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size); + padding: 0; + text-align: left; + + @if $unit-size { + line-height: $unit-size - first-number($v-border) * 2 - 1px; + + > .#{$primary-stylename}-menuitem { + padding: 0 round($unit-size/2.6); + + &[class*="-icon-only"] { + width: $unit-size; + } + } + } +} + + + + @mixin valo-menubar-menuitem-style { $border-width: first-number($v-border); position: relative; @@ -95,10 +114,12 @@ @include box-sizing(border-box); @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer); background: transparent; + @include box-shadow(none); border-width: 0 $border-width 0 0; + border-color: inherit; height: 100%; + line-height: inherit; vertical-align: top; - line-height: $v-unit-size - $border-width*2 - 1px; text-align: center; @if $border-width == 0 { @@ -253,20 +274,6 @@ } - -@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) { - height: $unit-size; - - .#{$primary-stylename}-menuitem { - line-height: $unit-size - first-number($v-border)*2; - padding: 0 round($unit-size/2.5); - - &[class*="-icon-only"] { - width: $unit-size; - } - } -} - @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) { border: none; border-radius: 0; @@ -275,9 +282,8 @@ background: transparent; color: inherit; - &:not(.v-disabled):focus { - border: none; - @include box-shadow(none); + &:focus:after { + display: none; } .#{$primary-stylename}-menuitem { @@ -294,7 +300,8 @@ } &:first-child, - &:last-child { + &:last-child, + &:first-child:last-child { border-radius: $v-border-radius; } diff --git a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java index 88eea73513..4a0130931e 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java +++ b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java @@ -18,6 +18,7 @@ package com.vaadin.tests.themes.valo; import com.vaadin.navigator.View; import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; import com.vaadin.server.FontAwesome; +import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.MenuBar; import com.vaadin.ui.MenuBar.Command; @@ -53,6 +54,62 @@ public class MenuBars extends VerticalLayout implements View { menuBar.addStyleName("borderless"); menuBar.addStyleName("small"); addComponent(menuBar); + + Label h2 = new Label("Drop Down Button"); + h2.addStyleName("h2"); + addComponent(h2); + + HorizontalLayout wrap = new HorizontalLayout(); + wrap.addStyleName("wrapping"); + wrap.setSpacing(true); + addComponent(wrap); + + wrap.addComponent(getMenuButton("Normal", false)); + + MenuBar split = getMenuButton("Small", false); + split.addStyleName("small"); + wrap.addComponent(split); + + split = getMenuButton("Borderless", false); + split.addStyleName("borderless"); + wrap.addComponent(split); + + split = getMenuButton("Themed", false); + split.addStyleName("color1"); + wrap.addComponent(split); + + split = getMenuButton("Small", false); + split.addStyleName("color1"); + split.addStyleName("small"); + wrap.addComponent(split); + + h2 = new Label("Split Button"); + h2.addStyleName("h2"); + addComponent(h2); + + wrap = new HorizontalLayout(); + wrap.addStyleName("wrapping"); + wrap.setSpacing(true); + addComponent(wrap); + + wrap.addComponent(getMenuButton("Normal", true)); + + split = getMenuButton("Small", true); + split.addStyleName("small"); + wrap.addComponent(split); + + split = getMenuButton("Borderless", true); + split.addStyleName("borderless"); + wrap.addComponent(split); + + split = getMenuButton("Themed", true); + split.addStyleName("color1"); + wrap.addComponent(split); + + split = getMenuButton("Small", true); + split.addStyleName("color1"); + split.addStyleName("small"); + wrap.addComponent(split); } static MenuBar getMenuBar() { @@ -180,6 +237,20 @@ public class MenuBars extends VerticalLayout implements View { return menubar; } + static MenuBar getMenuButton(String caption, boolean splitButton) { + MenuBar split = new MenuBar(); + MenuBar.MenuItem dropdown = split.addItem(caption, null); + if (splitButton) { + dropdown = split.addItem("", null); + } + dropdown.addItem("Another Action", null); + dropdown.addItem("Secondary Action", null); + dropdown.addSeparator(); + dropdown.addItem("Last Action", null); + + return split; + } + @Override public void enter(ViewChangeEvent event) { // TODO Auto-generated method stub -- cgit v1.2.3 From e75aa11368629324e0f06708cce12a4d7d4e8d9c Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Fri, 15 Aug 2014 12:23:49 +0300 Subject: Remove unnecessary negative border radius declarations from menu bar (Valo) Change-Id: I3739cdacf6a117cd0d75cab3566a82ee0fedd6bd --- WebContent/VAADIN/themes/valo/components/_menubar.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) (limited to 'WebContent') diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 7d7e854989..f03bc3d022 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -126,21 +126,25 @@ margin-right: 1px; } - $br: $v-border-radius - $border-width - 1px; + $br: max(0, $v-border-radius - $border-width); &:first-child { border-left-width: 0; - border-radius: $br 0 0 $br; + @if $v-border-radius > 0 { + border-radius: $br 0 0 $br; + } } &:last-child { - border-radius: 0 $br $br 0; - margin-right: -$border-width; + @if $v-border-radius > 0 { + border-radius: 0 $br $br 0; + } + border-right-width: 0; } &:first-child:last-child { - border-radius: $br; - border-right-width: 0; - margin-right: 0; + @if $v-border-radius > 0 { + border-radius: $br; + } } &:before { -- cgit v1.2.3