diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components')
23 files changed, 1067 insertions, 341 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index e5457a2331..91ce4efe33 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -1,3 +1,10 @@ +/** + * Outputs the selectors and properties for the Accordion component. + * + * @param {string} $primary-stylename (v-accordion) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * @group accordion + */ @mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) { .#{$primary-stylename} { @include valo-accordion-style; @@ -22,7 +29,9 @@ border-radius: 0; @include box-shadow(none); - > .#{$primary-stylename}-item { + > .#{$primary-stylename}-item, + > .#{$primary-stylename}-item > div > .v-caption, + > .#{$primary-stylename}-item > .#{$primary-stylename}-item-content { border-radius: 0; } } @@ -31,7 +40,10 @@ } - +/** + * Outputs the styles for the Accordion component root element. + * @group accordion + */ @mixin valo-accordion-style { @include valo-panel-style; $grad-style: valo-gradient-style($v-gradient); @@ -41,50 +53,64 @@ } +/** + * Outputs the styles for an individual Accordion item root element. + * @group accordion + */ @mixin valo-accordion-item-style { + $_br: $v-border-radius - first-number($v-border); position: relative; - overflow: hidden; @if $v-border-radius > 0 { - $_br: $v-border-radius - first-number($v-border); - &:first-child { - border-radius: $_br $_br 0 0; - - .v-caption { - border-radius: inherit; - } + border-top-left-radius: $_br; + border-top-right-radius: $_br; } &:last-child { - border-radius: 0 0 $_br $_br; + border-bottom-left-radius: $_br; + border-bottom-right-radius: $_br; - .v-caption { - border-radius: 0; + [class*="item-content"] { + border-radius: inherit; } } } - &:last-child:not([class*="item-open"]) .v-caption { + &[class*="item-open"]:last-child > div > .v-caption { + border-radius: 0; + } + + &:not([class*="item-open"]):last-child > div > .v-caption { border-bottom: none; + margin-bottom: 0; } &[class*="item-open"] + [class*="item"] { - border-top: valo-border($color: $v-panel-background-color, $strength: 0.7); + border-top: valo-border($border: $v-panel-border, $color: $v-panel-background-color, $strength: 0.7); } } - +/** + * Outputs the styles for an individual Accordion item's caption element. + * + * @param {color} $background-color (null) - the background color of the caption. Other styles (such as font and border colors, gradients and bevels) adapt to the background color automatically. + * @group accordion + */ @mixin valo-accordion-item-caption-style ($background-color: null) { - .v-caption { + border-radius: inherit; + + > .v-caption { @include valo-panel-caption-style($background-color: $background-color or $v-background-color); display: block; @if $background-color == null { background: transparent; } border-bottom-color: first-color(valo-border($color: $v-panel-background-color)); + border-radius: inherit; cursor: pointer; + position: relative; &:hover:before, &:active:before { @@ -94,6 +120,7 @@ right: 0; bottom: 0; left: 0; + border-radius: inherit; } @if $v-hover-styles-enabled { @@ -110,11 +137,11 @@ } +/** + * Outputs the styles for an individual Accordion item's content element. + * @group accordion + */ @mixin valo-accordion-item-content-style { - position: absolute; - width: 100%; - bottom: 0; - right: 0; @include box-shadow(valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2)); background-color: $v-panel-background-color; @include box-sizing(border-box); diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss index b41a2f3308..0efc363a82 100644 --- a/WebContent/VAADIN/themes/valo/components/_all.scss +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -42,13 +42,33 @@ @import "valo-menu"; +/** + * Outputs all the selectors and properties for all individual components to produce + * the variation specified by global variables. + * + * This mixin can be called multiple times for a theme, if you for instance wish to + * generate alternative color versions of the components. + * + * @example scss + * .my-theme { + * // The default color variation + * @include valo; + * + * .sidebar { + * // For the sidebar context, we generate a darker variant of all components + * $v-background-color: #696969; + * background-color: $v-background-color; + * @include valo-components; + * } + * } + */ @mixin valo-components { @if v-is-included(absolutelayout) { @include valo-absolutelayout; } - @if v-is-included(orderedlayout) { + @if v-is-included(orderedlayout) or v-is-included(verticallayout) or v-is-included(horizontallayout) { @include valo-orderedlayout; } diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index 42953ea610..eb57e20d2a 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -1,3 +1,11 @@ +/** + * Outputs the selectors and properties for the Button component. + * + * @param {string} $primary-stylename (v-button) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group button + */ @mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) { .#{$primary-stylename} { @include valo-button-static-style; @@ -97,9 +105,14 @@ } - - - +/** + * Outputs the static styles (i.e. styles which don't differ between button variants) for a button. + * + * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding static styles + * @param {bool} $vertical-centering (true) - Should the output contain a vertical centering guide + * + * @group button + */ @mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) { @if contains($states, normal) { position: relative; @@ -148,14 +161,30 @@ } - - - +/** + * Outputs the styles for a button variant. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its height + * @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default. + * @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default. + * @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button + * @param {size} $font-size (null) - The font size of the button. Inherited from the parent by default. + * @param {string} $cursor (null) - The mouse cursor of the button + * @param {color} $background-color ($v-background-color) - The background color of the button + * @param {list} $border ($v-border) - The border of the button + * @param {size} $border-radius ($v-border-radius) - The border-radius of the button + * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient. + * @param {list} $bevel ($v-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding styles + * + * @group button + */ @mixin valo-button-style ( $unit-size : $v-unit-size, - $padding : null, // Computed by default + $padding : null, - $font-color : null, // Computed by default + $font-color : null, $font-weight : $v-font-weight + 100, $font-size : null, // Inherited by default $cursor : null, @@ -207,7 +236,7 @@ } @if $bevel and type-of($_font-color) == color and type-of($background-color) == color { - text-shadow: valo-text-shadow($_font-color, $background-color, $bevel); + text-shadow: valo-text-shadow($_font-color, $background-color); } @if $bevel == none and $shadow == none { @@ -237,8 +266,14 @@ } - - +/** + * Outputs the hover state styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + */ @mixin valo-button-hover-style ($background-color: $v-background-color) { $bg: darken($background-color, 25%); @if is-dark-color($background-color) { @@ -248,8 +283,16 @@ } - -@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) { +/** + * Outputs the focus state styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + * @param {list} $border-fallback (inherit) - If the luminance of $v-focus-color is less than the $background-color, the focus color is also used for the border color. If not, then $border-fallback is used for the focus element's border value. + */ +@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) { $focus-color: $v-focus-color; @if color-luminance($focus-color) + 50 < color-luminance($background-color) { @@ -258,22 +301,31 @@ border: $border-fallback or valo-border($color: $background-color); } - @include valo-focus-style($include-box-shadow: $include-box-shadow); + @include valo-focus-style; } - +/** + * Outputs the active state (pressed/down) styles for a button. The styles are by default targeted + * for a pseudo element which is shown on top of the normal state button. + * + * @group button + * + * @param {color} $background-color ($v-background-color) - The background color of the normal state button + */ @mixin valo-button-active-style ($background-color: $v-background-color) { $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color)); background-color: rgba($bg, .2); } - - - +/** + * Outputs styles to allow vertical centering of the icon and the caption, independent of the + * height of the button. + * + * @group button + */ @mixin valo-button-vertical-centering { - // Vertical centering of icon and caption, independent of the height of the button @include valo-vertical-align-guide($to-align: div, $pseudo-element: before); // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust @@ -293,8 +345,14 @@ } - - +/** + * Output styles for a borderless button. Expects that the targeted element + * already has both valo-button-static-style and valo-button-style included. + * + * @param {color} $font-color (inherit) - The font color of the borderless button + * + * @group button + */ @mixin valo-button-borderless-style ($font-color: inherit) { border: none; @include box-shadow(none); @@ -321,7 +379,15 @@ } -@mixin valo-button-quiet-style ($primary-stylename: v-button) { +/** + * Output styles for a "quiet" button (a button whose outline is only shown + * once the user hovers over the button caption). Expects that the targeted + * element already has both valo-button-static-style and valo-button-style + * included. + * + * @group button + */ +@mixin valo-button-quiet-style { visibility: hidden; &:focus, @@ -329,19 +395,24 @@ visibility: visible; } - .#{$primary-stylename}-wrap { + [class*="wrap"] { visibility: visible; } - .#{$primary-stylename}-caption { + [class*="caption"] { // For IE8 display: inline-block; } } -@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) { - .#{$primary-stylename}-wrap { +/** + * Output styles to align a button's icon on the right side of its caption. + * + * @group button + */ +@mixin valo-button-icon-align-right-style { + [class*="wrap"] { display: inline-block; } @@ -357,12 +428,17 @@ } -@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) { +/** + * Output styles to align a button's icon on top of its caption. + * + * @group button + */ +@mixin valo-button-icon-align-top-style { height: auto; padding-top: ceil($v-unit-size/9); padding-bottom: ceil($v-unit-size/9); - .#{$primary-stylename}-wrap { + [class*="wrap"] { display: inline-block; } diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss index 753291eea9..bf1dc1c3dc 100644 --- a/WebContent/VAADIN/themes/valo/components/_calendar.scss +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -1,6 +1,27 @@ +/** + * A list of colors for custom event colors. Can be an empty list of you don't + * need any custom event colors. + * + * @example javascript + * // Java code + * // 'event' is an instance of EditableCalendarEvent + * event.setStyleName("color1"); // 1st color in the list + * event.setStyleName("color2"); // 2nd color in the list + * // etc. + * + * @group calendar + */ $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; +/** + * Outputs the global selectors and properties for the Calendar component - styles which are + * considered mandatory for the component to work properly. + * + * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors + * + * @group calendar + */ @mixin valo-calendar-global ($primary-stylename: v-calendar) { .#{$primary-stylename}-month-day-scrollable { overflow-y: scroll; @@ -103,12 +124,13 @@ $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; } - - - - - - +/** + * Outputs the selectors and properties for the Calendar component. + * + * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors + * + * @group calendar + */ @mixin valo-calendar ($primary-stylename: v-calendar) { @@ -525,12 +547,23 @@ $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; } +/** + * Outputs the styles for the previous button. + * + * @group calendar + */ @mixin valo-calendar-prev-style { &:before { @include valo-tabsheet-scroller-prev-icon-style; } } + +/** + * Outputs the styles for the next button. + * + * @group calendar + */ @mixin valo-calendar-next-style { &:before { @include valo-tabsheet-scroller-next-icon-style; diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 9fe360c6ed..7ad08ad74d 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -1,3 +1,11 @@ +/** + * Outputs the selectors and properties for the CheckBox component. + * + * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group checkbox + */ @mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) { .#{$primary-stylename} { @@ -20,12 +28,26 @@ } +/** + * Outputs the font icon to indicate the checked state. + * + * @group checkbox + */ @mixin valo-checkbox-icon-style { content: "\f00c"; font-family: FontAwesome; } +/** + * Outputs the styles for a checkbox variant. + * + * @param {color} $background-color ($v-background-color) - The background color of the checkbox + * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2. + * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon + * + * @group checkbox + */ @mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { // So that we can use the same 'unit-size' for all component sizes @@ -57,7 +79,7 @@ margin: 0; &:focus ~ label:before { - @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false); + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true)); } diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index 4460aafb21..b859904e59 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -1,3 +1,11 @@ +/** + * Outputs the global selectors and properties for the ColorPicker component - styles which are + * considered mandatory for the component to work properly. + * + * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors + * + * @group colorpicker + */ @mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) { $valo-colorpicker-pathPrefix: null; @if $v-relative-paths == false { @@ -73,10 +81,13 @@ } - - - - +/** + * Outputs the selectors and properties for the ColorPicker component. + * + * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors + * + * @group colorpicker + */ @mixin valo-colorpicker ($primary-stylename: v-colorpicker) { .#{$primary-stylename}-popup.v-window { diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 93cb5393ee..0b756126ff 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -1,9 +1,17 @@ +/** + * Outputs the selectors and properties for the ComboBox component. + * + * @param {string} $primary-stylename (v-filterselect) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group combobox + */ @mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) { .#{$primary-stylename} { position: relative; width: $v-default-field-width; - @include valo-combobox-style($primary-stylename: $primary-stylename); + @include valo-combobox-style; white-space: nowrap; .v-icon { @@ -24,39 +32,11 @@ } .#{$primary-stylename}-suggestpopup { - @include valo-combobox-popup-style($primary-stylename: $primary-stylename); + @include valo-combobox-popup-style; } .#{$primary-stylename}-no-input { - cursor: pointer; - text-shadow: valo-text-shadow(); - - @if $v-border-radius != $v-textfield-border-radius { - border-radius: $v-border-radius; - } - - .#{$primary-stylename}-input { - @include user-select(none); - @include valo-gradient; - cursor: inherit; - @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient)); - @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient); - text-shadow: inherit; - text-overflow: ellipsis; - border-radius: inherit; - - &:focus { - @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color); - } - } - - .#{$primary-stylename}-button { - border-left: none !important; - } - - &:hover .#{$primary-stylename}-button:before { - color: inherit; - } + @include valo-combobox-no-input-style; } @@ -110,16 +90,29 @@ } - - - - +/** + * Outputs the styles for a combobox variant. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height + * @param {color} $font-color (null) - The font color of the combobox. Computed from the $background-color by default. + * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the combobox + * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default. + * @param {color} $background-color ($v-textfield-background-color) - The background color of the combobox + * @param {list} $border ($v-textfield-border) - The border of the combobox + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the combobox + * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient. + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles + * + * @group combobox + */ @mixin valo-combobox-style ( $unit-size: $v-unit-size, - $font-color: null, // Computed by default + $font-color: null, $font-weight: max(400, $v-font-weight), - $font-size: null, // Inherited by default + $font-size: null, $background-color: $v-textfield-background-color, $border: $v-textfield-border, @@ -129,14 +122,13 @@ $bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, - $primary-stylename: v-filterselect, $states: normal focus disabled ) { height: $unit-size; border-radius: $border-radius; - .#{$primary-stylename}-input { + [class*="input"] { @include valo-combobox-input-style( $unit-size: $unit-size, $gradient: $gradient, @@ -151,7 +143,7 @@ $states: $states); } - .v-icon + .#{$primary-stylename}-input { + .v-icon + [class*="input"] { padding-left: $unit-size; } @@ -171,17 +163,17 @@ padding-top: .12em; } - &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { + &[class*="prompt"] > [class*="input"] { @include valo-textfield-prompt-style($background-color); } - .#{$primary-stylename}-button { - @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color); + [class$="button"] { + @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border); } &.v-disabled { @include opacity($v-textfield-disabled-opacity); - & .#{$primary-stylename}-button { + & [class$="button"] { cursor: default; pointer-events: none; &:active:after { @@ -191,11 +183,11 @@ } &.v-readonly { - .#{$primary-stylename}-input { + [class*="input"] { @include valo-textfield-readonly-style; } - .#{$primary-stylename}-button { + [class$="button"] { cursor: default; pointer-events: none; &:active:after { @@ -206,18 +198,34 @@ } - - +/** + * Outputs the styles for a combobox variant input element. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%) + * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default. + * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default. + * @param {number} $font-weight (null) - The font weight of the input. Inherited from the parent by default. + * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default. + * @param {color} $background-color ($v-textfield-background-color) - The background color of the input + * @param {list} $border ($v-textfield-border) - The border of the input + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input + * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient. + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles + * + * @group combobox + */ @mixin valo-combobox-input-style ( $unit-size: $v-unit-size, - $padding: null, // Computed by default + $padding: null, - $font-color: null, // Computed by default - $font-weight: null, // Inherited by default - $font-size: null, // Inherited by default + $font-color: null, + $font-weight: null, + $font-size: null, $background-color: $v-textfield-background-color, - $border: $v-border, + $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $gradient: none, @@ -246,13 +254,19 @@ } - - - - - -@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) { - $border-width: first-number($v-textfield-border); +/** + * Outputs the styles for a combobox variant button element. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width. + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button + * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button + * + * @group combobox + */ +@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) { + $border-width: first-number($v-textfield-border) or 0; @include valo-tappable; position: absolute; top: $border-width; @@ -310,16 +324,23 @@ } - +/** + * Outputs the font icon styles for the combobox drop down button. + * + * @group combobox + */ @mixin valo-combobox-button-icon-style { font-family: FontAwesome; content: "\f078"; } - - -@mixin valo-combobox-popup-style ($primary-stylename: v-filterselect) { +/** + * Outputs the styles for a combobox popup. + * + * @group combobox + */ +@mixin valo-combobox-popup-style { @if $v-animations-enabled { @if $v-overlay-animate-in { @@ -331,11 +352,15 @@ // closing when the user selects an item } - .#{$primary-stylename}-suggestmenu { + [class$="suggestmenu"] { @include valo-selection-overlay-style($animate-in: false, $animate-out: false); - box-sizing: border-box; + @include box-sizing(border-box); position: relative; z-index: 1; + + &[style*="height"] { + @include box-sizing(content-box); + } } margin-top: ceil($v-unit-size/8) !important; @@ -355,7 +380,7 @@ @include valo-selection-item-selected-style; } - .#{$primary-stylename}-status { + [class$="status"] { position: absolute; right: $v-border-radius; $bg: scale-color($v-background-color, $lightness: -15%); @@ -371,7 +396,7 @@ pointer-events: none; @if $v-animations-enabled { - @include animation(valo-anim-slide-in-down 200ms 80ms backwards); + @include animation(valo-animate-in-slide-down 200ms 80ms backwards); } > * { @@ -396,9 +421,24 @@ color: valo-font-color($v-background-color); + &:after { + // Extend click target when hovering over (popup width might change between pages) + content: ""; + position: absolute; + display: block; + border-radius: 50%; + } + &:hover { @include opacity(1); background: rgba($v-background-color, .5); + + &:after { + top: -10px; + bottom: -10px; + left: -20px; + right: -20px; + } } span { @@ -434,3 +474,35 @@ display: none; } } + +@mixin valo-combobox-no-input-style { + cursor: pointer; + text-shadow: valo-text-shadow(); + + @if $v-border-radius != $v-textfield-border-radius { + border-radius: $v-border-radius; + } + + [class*="input"] { + @include user-select(none); + @include valo-gradient; + cursor: inherit; + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient)); + @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient); + text-shadow: inherit; + text-overflow: ellipsis; + border-radius: inherit; + + &:focus { + @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color); + } + } + + [class$="button"] { + border-left: none !important; + } + + &:hover [class$="button"]:before { + color: inherit; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss index b0fa4362e7..3525bcad5a 100644 --- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -1,6 +1,20 @@ +/** + * The amount of spacing between different widgets in a component group. + * If null, a computed value is used ($v-border size * -1, or 1px if $v-border size is 0) + * + * @group csslayout + */ $v-component-group-spacing: null !default; +/** + * Outputs the additional styles for the CssLayout component. Does not produce any other output. + * + * @param {string} $primary-stylename (v-csslayout) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group csslayout + */ @mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){ @if $include-additional-styles { .#{$primary-stylename}-well { @@ -20,6 +34,18 @@ $v-component-group-spacing: null !default; } +/** + * Outputs the styles for a horizontal component group. The target component is + * expected to be a CssLayout, which is a single DIV element with child components + * directly inside. + * + * @group csslayout + * + * @example scss + * .my-csslayout { + * @include valo-component-group; + * } + */ @mixin valo-component-group { white-space: nowrap; position: relative; diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 81c7fa0e5e..b1d5dcce5b 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -1,9 +1,17 @@ +/** + * Outputs the selectors and properties for the DateField component. + * + * @param {string} $primary-stylename (v-datefield) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group datefield + */ @mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) { .#{$primary-stylename} { position: relative; width: $v-default-field-width; - @include valo-datefield-style($primary-stylename: $primary-stylename); + @include valo-datefield-style; } .#{$primary-stylename}-error { @@ -89,6 +97,13 @@ } +/** + * Outputs the selectors and properties for the InlineDateField component. + * + * @param {string} $primary-stylename (v-inline-datefield) - the primary style name for the selectors + * + * @group datefield + */ @mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) { @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); @@ -100,9 +115,19 @@ } - - - +/** + * Outputs the styles for a date field variant. + * + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height + * @param {list} $border ($v-textfield-border) - The border of the datefield + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield + * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield + * @param {list} $states (normal focus disabled) - The datefield states for which to output corresponding styles + * + * @group datefield + */ @mixin valo-datefield-style ( $bevel : $v-textfield-bevel, $shadow : $v-textfield-shadow, @@ -110,14 +135,13 @@ $border : $v-textfield-border, $border-radius : $v-textfield-border-radius, $background-color : $v-textfield-background-color, - $primary-stylename : v-datefield, $states : normal focus disabled ) { height: $unit-size; border-radius: $border-radius; - .#{$primary-stylename}-textfield { + [class*="textfield"] { @include box-sizing(border-box); @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ; padding-left: $unit-size * 1.2; @@ -126,18 +150,18 @@ border-radius: inherit; } - &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield { + &[class*="prompt"] > [class*="textfield"] { @include valo-textfield-prompt-style($background-color); } - .#{$primary-stylename}-button { + [class$="button"] { @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border); } &.v-disabled { @include opacity($v-disabled-opacity); - .#{$primary-stylename}-button { + [class$="button"] { cursor: default; pointer-events: none; &:active:after { @@ -147,11 +171,11 @@ } &.v-readonly { - .#{$primary-stylename}-textfield { + [class*="textfield"] { @include valo-textfield-readonly-style; } - .#{$primary-stylename}-button { + [class$="button"] { cursor: default; pointer-events: none; &:active:after { @@ -162,10 +186,19 @@ } - - +/** + * Outputs the styles for a date field variant button element. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width. + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button + * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button + * + * @group datefield + */ @mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) { - $border-width: first-number($border) or first-number($v-textfield-border); + $border-width: first-number($border) or 0; @include valo-tappable; -webkit-appearance: none; background: transparent; @@ -223,16 +256,22 @@ } - - +/** + * Outputs the font icon styles for the date field drop down button. + * + * @group datefield + */ @mixin valo-datefield-button-icon-style { font-family: FontAwesome; content: "\f073"; } - - +/** + * Outputs the styles for a date field popup. + * + * @group datefield + */ @mixin valo-datefield-popup-style { @include valo-overlay-style; @@ -241,8 +280,9 @@ width: auto; table { - border-collapse: collapse; + border-collapse: collapse; border-spacing: 0; + margin: 0 auto; } td { @@ -253,6 +293,13 @@ } +/** + * Outputs the styles for calendar panel (i.e. month view). + * + * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) { .#{$primary-stylename} { font-size: $v-font-size; @@ -360,7 +407,7 @@ } td.#{$primary-stylename}-month { - width: round($v-unit-size * 3.5); + width: round($v-unit-size * 4); @include valo-datefield-calendarpanel-month-style; } @@ -409,8 +456,11 @@ } - - +/** + * Outputs the styles for an individual day element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-style { @include box-sizing(border-box); width: round($v-unit-size * 0.8); @@ -429,29 +479,60 @@ } } + +/** + * Outputs the hover state styles for an individual day element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-hover-style { color: $v-selection-color; } + +/** + * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-offmonth-style { color: mix(valo-font-color($v-background-color), $v-background-color); background: transparent; } + +/** + * Outputs the styles for todays day element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-today-style { color: valo-font-color($v-background-color, 0.9); font-weight: max(600, $v-font-weight + 100); border-color: valo-font-color($v-background-color, 0.3); } + +/** + * Outputs the styles for the selected day element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-selected-style { color: valo-font-color($v-selection-color); @include valo-gradient($v-selection-color); border: none; + font-weight: max(600, $v-font-weight + 100); } + +/** + * Outputs the focus state styles for an individual day element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-day-focused-style { - @include valo-focus-style($include-box-shadow: true); + @include valo-focus-style; position: relative; // Show above other cells .v-ie8 & { @@ -460,26 +541,55 @@ } +/** + * Outputs the font icon styles for the next month button in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-nextmonth-icon-style { font-family: FontAwesome; content: "\f105"; } + +/** + * Outputs the font icon styles for the previous month button in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-prevmonth-icon-style { font-family: FontAwesome; content: "\f104"; } + +/** + * Outputs the font icon styles for the next year button in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-nextyear-icon-style { font-family: FontAwesome; content: "\f101"; } + +/** + * Outputs the font icon styles for the previous year button in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-prevyear-icon-style { font-family: FontAwesome; content: "\f100"; } + +/** + * Outputs the styles for the current month and year title element in a calendar panel. + * + * @group datefield + */ @mixin valo-datefield-calendarpanel-month-style { color: $v-selection-color; } diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss index 1eaf078661..6e4859b82c 100644 --- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss +++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss @@ -1,3 +1,10 @@ +/** + * Outputs the styles and selectors for the DragAndDropWrapper component. + * + * @param {string} $primary-stylename (v-ddwrapper) - the primary style name for the selectors + * + * @group drag-n-drop + */ @mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) { [draggable=true] { @@ -103,8 +110,11 @@ } - - +/** + * Outputs the styles for a drop target when the drag is on top of it. + * + * @group drag-n-drop + */ @mixin valo-ddwrapper-box-hint-style { border-width: 2px; border-radius: $v-border-radius; diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index fc065cec3d..7a9e81b30a 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -1,7 +1,15 @@ +/** + * Outputs the selectors and properties for the FormLayout component. + * + * @param {string} $primary-stylename (v-formlayout) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group formlayout + */ @mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) { @include valo-formlayout-spacing; - @include valo-formlayout-margins; + @include valo-formlayout-margin; .#{$primary-stylename} > table { border-spacing: 0; @@ -53,91 +61,114 @@ @if $include-additional-styles { .#{$primary-stylename}.light { - @include valo-formlayout-light-style($primary-stylename); + @include valo-formlayout-light-style; } } } -@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) { - @if $all != null { - $top: $all; - $right: $all; - $bottom: $all; - $left: $all; - } - - .#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow { - > .#{$primary-stylename}-captioncell, - > .#{$primary-stylename}-contentcell, - > .#{$primary-stylename}-errorcell { - padding-top: $top; - } - } - - .#{$primary-stylename}-margin-bottom > tbody > .#{$primary-stylename}-lastrow { - > .#{$primary-stylename}-captioncell, - > .#{$primary-stylename}-contentcell, - > .#{$primary-stylename}-errorcell { - padding-bottom: $bottom; - } - } - - .#{$primary-stylename}-margin-left > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { +/** + * Outputs the styles for form layout margin. + * + * @param {list} $margin ($v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value) + * + * @group formlayout + */ +@mixin valo-formlayout-margin ($margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) { + $top: 0; + $right: 0; + $bottom: 0; + $left: 0; + + @if length($margin) == 1 { + $top: $margin; + $right: $margin; + $bottom: $margin; + $left: $margin; + } @else if length($margin) == 2 { + $top: nth($margin, 1); + $right: nth($margin, 2); + $bottom: nth($margin, 1); + $left: nth($margin, 2); + } @else if length($margin) == 3 { + $top: nth($margin, 1); + $right: nth($margin, 2); + $bottom: nth($margin, 3); + $left: nth($margin, 2); + } @else if length($margin) == 4 { + $top: nth($margin, 1); + $right: nth($margin, 2); + $bottom: nth($margin, 3); + $left: nth($margin, 4); + } + + [class*="margin-top"] > tbody > [class*="firstrow"] > td { + padding-top: $top; + } + + [class*="margin-bottom"] > tbody > [class*="lastrow"] > td { + padding-bottom: $bottom; + } + + [class*="margin-left"] > tbody > [class*="row"] > [class*="captioncell"] { padding-left: $left; } - .#{$primary-stylename}-margin-right > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell { + [class*="margin-right"] > tbody > [class*="row"] > [class*="contentcell"] { padding-right: $right; } } -@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) { - .#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row { - > .#{$primary-stylename}-captioncell, - > .#{$primary-stylename}-contentcell, - > .#{$primary-stylename}-errorcell { - padding-top: $vertical; - } +/** + * Outputs the styles for form layout spacing. + * + * @param {size} $vertical ($v-layout-spacing-vertical) - The vertical spacing between the rows in the form layout + * + * @group formlayout + */ +@mixin valo-formlayout-spacing ($vertical: $v-layout-spacing-vertical) { + [class*="spacing"] > tbody > [class*="row"] > td { + padding-top: $vertical; } -} - - + [class*="spacing"] > tbody > [class*="firstrow"] > td { + padding-top: 0; + } +} -@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { +/** + * Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied. + * + * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row + * + * @group formlayout + */ +@mixin valo-formlayout-light-style ($row-height: $v-unit-size) { > table { padding: 0; } - > table > tbody > .#{$primary-stylename}-row { - > .#{$primary-stylename}-captioncell, - > .#{$primary-stylename}-contentcell, - > .#{$primary-stylename}-errorcell { - padding-top: 0; - height: $row-height; // Effectively min-height - } - } - - > table > tbody > .#{$primary-stylename}-row td { + > table > tbody > [class*="row"] > td { + padding-top: 0; + height: $row-height; // Effectively min-height border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3); } - > table > tbody > .#{$primary-stylename}-lastrow td { + > table > tbody > [class*="lastrow"] > td { border-bottom: none; } - > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { + > table > tbody > [class*="row"] > [class*="captioncell"] { color: valo-font-color($v-background-color, .5); text-align: right; padding-left: ceil($v-unit-size/3); line-height: $row-height; } - .#{$primary-stylename}-contentcell { + > table > tbody > [class*="row"] > [class*="contentcell"] { > .v-textfield, > .v-textarea, > .v-filterselect, @@ -156,6 +187,10 @@ background: transparent; border: none; color: inherit; + + &:focus { + box-shadow: none; + } } > .v-textfield-prompt, @@ -169,6 +204,17 @@ > .v-richtextarea { height: auto; } + + > .v-label-h2, + > .v-label-h3, + > .v-label-h4 { + border-bottom: none; + } + + > .v-label-h3, + > .v-label-h4 { + margin-top: 0; + } } .v-richtextarea { @@ -192,17 +238,4 @@ .v-checkbox { margin-left: ceil($v-unit-size/6); } - - > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell { - > .v-label-h2, - > .v-label-h3, - > .v-label-h4 { - border-bottom: none; - } - - > .v-label-h3, - > .v-label-h4 { - margin-top: 0; - } - } } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 7f4fef58d9..b59d3e0e21 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -1,24 +1,110 @@ -$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; -$v-font-size--h3: 1.2em !default; -$v-font-size--large: 1.2em !default; -$v-font-size--small: 0.87em !default; - -$v-font-family--h1: $v-font-family--header !default; -$v-font-family--h2: $v-font-family--header !default; -$v-font-family--h3: $v-font-family--header !default; - -$v-letter-spacing--h1: -0.03em !default; -$v-letter-spacing--h2: -0.02em !default; -$v-letter-spacing--h3: 0 !default; -$v-letter-spacing--h4: 0 !default; - - +/** + * The font weight for headers. + * + * @group label + */ +$v-font-weight--header: $v-font-weight - 100 !default; + +/** + * The line height for headers. + * + * @group label + */ +$v-line-height--header: 1.1 !default; + +/** + * The font family for headers. + * + * @group label + */ +$v-font-family--header: null !default; + +/** + * The font color for colored style labels. + * + * @group label + */ +$v-font-color--colored: $v-selection-color !default; + +/** + * The font size for 1st level headers. + * + * @group label + */ +$v-font-size--h1: 2.4em !default; + +/** + * The font size for 2nd level headers. + * + * @group label + */ +$v-font-size--h2: 1.6em !default; + +/** + * The font size for 3rd level headers. + * + * @group label + */ +$v-font-size--h3: 1.2em !default; + +/** + * The font family for 1st level headers. + * + * @group label + */ +$v-font-family--h1: $v-font-family--header !default; + +/** + * The font family for 2nd level headers. + * + * @group label + */ +$v-font-family--h2: $v-font-family--header !default; + +/** + * The font family for 3rd level headers. + * + * @group label + */ +$v-font-family--h3: $v-font-family--header !default; + +/** + * The letter spacing for 1st level headers. + * + * @group label + */ +$v-letter-spacing--h1: -0.03em !default; + +/** + * The letter spacing for 2nd level headers. + * + * @group label + */ +$v-letter-spacing--h2: -0.02em !default; + +/** + * The letter spacing for 3rd level headers. + * + * @group label + */ +$v-letter-spacing--h3: 0 !default; + +/** + * The letter spacing for 4th level headers. + * + * @group label + */ +$v-letter-spacing--h4: 0 !default; + + +/** + * Outputs the selectors and styles for the Label component. + * + * @param {string} $primary-stylename (v-label) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group label + */ @mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) { .#{$primary-stylename} { @@ -34,7 +120,7 @@ $v-letter-spacing--h4: 0 !default; h3, .#{$primary-stylename}-h3 { line-height: $v-line-height--header; font-weight: $v-font-weight--header; - color: valo-header-color($v-app-background-color); + color: valo-font-color($v-app-background-color, 0.92); } h1, .#{$primary-stylename}-h1 { @@ -65,7 +151,7 @@ $v-letter-spacing--h4: 0 !default; line-height: $v-line-height--header; font-weight: $v-font-weight + 200; font-size: $v-font-size--small; - color: valo-header-color($v-app-background-color, $contrast: 0.12); + color: valo-font-color($v-app-background-color, 0.74); text-transform: uppercase; letter-spacing: $v-letter-spacing--h4; margin-top: 2.4em; diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 7368579d43..fee5b87e84 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -283,6 +283,7 @@ border-radius: 0; padding: first-number($v-border); @include box-shadow(none); + text-shadow: none; background: transparent; color: inherit; @@ -296,7 +297,6 @@ margin-right: max(1px, first-number($v-border)); border-radius: $v-border-radius; color: $v-selection-color; - text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px); padding: 0 round($v-unit-size/3); @if $v-animations-enabled { diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss index 1b7469ed2b..3f24d9293f 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -27,6 +27,6 @@ &:focus { outline: none; - @include valo-focus-style($include-box-shadow: true); + @include valo-focus-style; } } diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss index 3cfa446f7d..ff5e2da8d6 100644 --- a/WebContent/VAADIN/themes/valo/components/_notification.scss +++ b/WebContent/VAADIN/themes/valo/components/_notification.scss @@ -33,23 +33,23 @@ $v-notification-title-color: $v-focus-color !default; @if $v-animations-enabled { .#{$primary-stylename}-animate-in { - @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms); + @include animation(valo-animate-in-fade 180ms); - &.v-position-left { - @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms); + &.v-position-top { + @include animation(valo-animate-in-slide-down 400ms); } - &.v-position-right { - @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms); + &.v-position-bottom { + @include animation(valo-animate-in-slide-up 400ms); } } .#{$primary-stylename}-animate-out { - @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms); + @include animation(valo-animate-out-fade 150ms); - &.v-position-left, - &.v-position-right { - @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms); + &.v-position-top, + &.v-position-bottom { + @include animation(valo-animate-out-slide-down-fade 200ms); } } } @@ -216,11 +216,12 @@ $v-notification-title-color: $v-focus-color !default; height: round($v-unit-size/1.5); line-height: round($v-unit-size/1.5) - 1px; cursor: pointer; - color: #000; + $color: if(is-dark-color($v-overlay-background-color), #fff, #000); + color: $color; @include opacity(.5); text-align: center; - border: first-number($v-border) solid #000; - border-color: rgba(0,0,0,.3); + border: first-number($v-border) solid $color; + border-color: rgba($color, .3); border-radius: 50%; @include transition(opacity 200ms); } @@ -230,8 +231,10 @@ $v-notification-title-color: $v-focus-color !default; } &:active:after { - background-color: #000; - color: #fff; + $color: if(is-dark-color($v-overlay-background-color), #000, #fff); + $bg: if(is-dark-color($v-overlay-background-color), #fff, #000); + background-color: $bg; + color: $color; @include opacity(.3); @include transition(none 200ms); } @@ -242,7 +245,7 @@ $v-notification-title-color: $v-focus-color !default; @mixin valo-notification-style { - background: valo-overlay-background-color(); + background: $v-overlay-background-color; @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); padding: round($v-unit-size/2) round($v-unit-size/1.7); @@ -274,11 +277,11 @@ $v-notification-title-color: $v-focus-color !default; @if $v-animations-enabled { &[class*="animate-in"] { - @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms); + @include animation(valo-animate-in-slide-down 300ms); } &[class*="animate-out"] { - @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms); + @include animation(valo-animate-out-slide-up 200ms); } } } @@ -288,11 +291,11 @@ $v-notification-title-color: $v-focus-color !default; @if $v-animations-enabled { &[class*="animate-in"] { - @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms); + @include animation(valo-animate-in-slide-up 300ms); } &[class*="animate-out"] { - @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms); + @include animation(valo-animate-out-slide-down 200ms); } } } diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss index dbe2490826..ae1347d0e3 100644 --- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -140,7 +140,7 @@ -@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) { +@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout) or contains($v-included-additional-styles, verticallayout) or contains($v-included-additional-styles, horizontallayout)) { .v-margin-top { padding-top: $v-layout-margin-top; diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 07e21cccbf..8a7cd72c7c 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -97,7 +97,7 @@ $v-panel-border: $v-border !default; font-weight: $v-caption-font-weight; font-size: $v-caption-font-size; @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient)); - text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel); + text-shadow: valo-text-shadow(valo-font-color($bg), $bg); } diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss index 794a6997de..12e294e8cc 100644 --- a/WebContent/VAADIN/themes/valo/components/_popupview.scss +++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss @@ -8,9 +8,9 @@ .#{$primary-stylename} { @include valo-link-style; } - + .#{$primary-stylename}-popup { - @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms)); + @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-animate-out-fade 120ms)); .popupContent { @include valo-panel-adjust-content-margins; diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index ccd70c4328..7dafbe4624 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -1,8 +1,19 @@ +/** + * Should the tabsheet content changes be animated. + * + * @group tabsheet + */ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; - - +/** + * Outputs the global selectors and properties for the TabSheet component - styles which are + * considered mandatory for the component to work properly. + * + * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors + * + * @group tabsheet + */ @mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer, .#{$primary-stylename}-spacertd, @@ -48,9 +59,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } - - - +/** + * Outputs the selectors and properties for the TabSheet component. + * + * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group tabsheet + */ @mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) { .#{$primary-stylename} { &:not(.v-has-width) { @@ -77,7 +93,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @if $v-tabsheet-content-animation-enabled { .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget { - @include valo-anim-fade-in(300ms); + @include valo-animate-in-fade(300ms); } $spinner-size: round($v-unit-size/2); @@ -85,37 +101,17 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .#{$primary-stylename}-deco { @include valo-spinner($size: $spinner-size); - height: 0 !important; - border-style: none; - display: block; + display: none; position: absolute; - z-index: -1; + z-index: 1; bottom: 50%; margin-bottom: round($v-unit-size/-2) - $spinner-size/2; left: 50%; margin-left: $spinner-size/-2; - opacity: 0; - - .v-ie8 & { - min-height: 0; - } } .#{$primary-stylename}-loading .#{$primary-stylename}-deco { - @include transition(opacity 200ms 200ms); - opacity: 1; - z-index: 1; - height: $spinner-size !important; - border-style: solid; - - .v-ie8 &, - .v-ie9 & { - border-style: none; - } - - .v-ie8 & { - min-height: 30px; - } + display: block; } } @@ -159,6 +155,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the styles for the tabcontainer element of a tabsheet. + * + * @group tabsheet + */ @mixin valo-tabsheet-tabcontainer-style ($primary-stylename: v-tabsheet) { position: relative; @include box-sizing(border-box); @@ -168,7 +169,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; position: absolute; height: 0; // iOS panics with background color, creating black line artifacts - border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5)); + border-top: max(1px, first-number($v-border)) solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); bottom: 0; left: 0; right: 0; @@ -180,6 +181,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the styles for the tabitemcell element of a tabsheet. + * + * @group tabsheet + */ @mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) { vertical-align: bottom; @@ -269,6 +275,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the styles for the tab scroller element of a tabsheet. + * + * @group tabsheet + */ @mixin valo-tabsheet-scroller-style ($primary-stylename: v-tabsheet) { $border-color: first-color(valo-border($strength: 0.5)); @@ -352,24 +363,38 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the font icon styles for the previous button element of a tabsheet scroller. + * + * @group tabsheet + */ @mixin valo-tabsheet-scroller-prev-icon-style { font-family: FontAwesome; content: "\f053"; } +/** + * Outputs the font icon styles for the next button element of a tabsheet scroller. + * + * @group tabsheet + */ @mixin valo-tabsheet-scroller-next-icon-style { font-family: FontAwesome; content: "\f054"; } - - - - - - +/** + * Outputs the styles for the framed tabsheet style. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * @param {bool} $frame-inactive-tabs (true) - Should inactive tabs be framed as well (the active tab is always framed with this style) + * @param {bool} $outer-frame (true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content). If false, works like a "borderless" style. + * @param {size} $tab-spacing ($v-unit-size/10) - The spacing between tabs + * + * @group tabsheet + */ @mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) { > .#{$primary-stylename}-tabcontainer { .v-caption { @@ -387,7 +412,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:hover { background-color: darken($v-app-background-color, 3%); - border-bottom-color: first-color(valo-border($strength: 0.5)); + border-bottom-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); } } @@ -398,13 +423,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @if $frame-inactive-tabs { .#{$primary-stylename}-tabitem .v-caption { - border-color: first-color(valo-border($strength: 0.5)); + border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); } } .#{$primary-stylename}-tabitem-selected .v-caption { background: $v-panel-background-color; - border-color: first-color(valo-border($strength: 0.5)); + border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); border-bottom: none; padding-bottom: first-number($v-border); } @@ -429,7 +454,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } @if $outer-frame { - border: valo-border($strength: 0.5); + border: valo-border($color: $v-app-background-color, $strength: 0.5); border-top: none; } } @@ -437,7 +462,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &.padded-tabbar { > .#{$primary-stylename}-tabcontainer { @if $outer-frame { - border: valo-border($strength: 0.5); + border: valo-border($color: $v-app-background-color, $strength: 0.5); border-bottom: none; } @@ -452,19 +477,29 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } - - - - - - - +/** + * Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center. + * + * @group tabsheet + */ @mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) { > .#{$primary-stylename}-tabcontainer { text-align: $align; } } + +/** + * Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * @param {bool} $flex (false) - Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes. + * + * @group tabsheet + */ @mixin valo-tabsheet-equal-width-tabs-style ($primary-stylename: v-tabsheet, $flex: false) { > .#{$primary-stylename}-tabcontainer { table, @@ -491,6 +526,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } } + +/** + * Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * + * @group tabsheet + */ @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) { > div > .#{$primary-stylename}-tabs { .v-caption { @@ -514,6 +557,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the styles for a tabsheet where only the selected tab has the close button visible. + * Note that the other tabs can still be closed programmatically. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * + * @group tabsheet + */ @mixin valo-tabsheet-only-selected-closable-style ($primary-stylename: v-tabsheet) { > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close { visibility: hidden; @@ -525,6 +576,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } +/** + * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs + * inside it from their surrounding container. + * + * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors + * + * @group tabsheet + */ @mixin valo-tabsheet-padded-tabbar-style ($primary-stylename: v-tabsheet) { > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs { padding: 0 round($v-unit-size/4); diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 5e524bfb9e..ffd5ba855a 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -1,3 +1,11 @@ +/** + * Outputs the selectors and properties for the TextArea component. + * + * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group textarea + */ @mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) { .#{$primary-stylename} { @@ -51,13 +59,30 @@ } +/** + * Outputs the styles for a text area variant. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height + * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default. + * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default. + * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area + * @param {size} $font-size (null) - The font size of the text area. Inherited from the parent by default. + * @param {color} $background-color ($v-textfield-background-color) - The background color of the text area + * @param {list} $border ($v-textfield-border) - The border of the text area + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text area + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal focus disabled) - The text area states for which to output corresponding styles + * + * @group textfield + */ @mixin valo-textarea-style ( $unit-size : $v-unit-size, - $padding : round($v-unit-size/6), // Computed by default + $padding : round($v-unit-size/6), - $font-color : null, // Computed by default - $font-weight : max(400, $v-font-weight), // Inherited by default - $font-size : null, // Inherited by default + $font-color : null, + $font-weight : max(400, $v-font-weight), + $font-size : null, $background-color : $v-textfield-background-color, $border : $v-textfield-border, @@ -71,8 +96,8 @@ @include valo-textfield-style($unit-size: $unit-size, $padding: $padding, $font-color: $font-color, - $font-weight: $font-weight, // Inherited by default - $font-size: $font-size, // Inherited by default + $font-weight: $font-weight, + $font-size: $font-size, $background-color: $background-color, $border: $border, diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index c194bd715f..f4ca3538bd 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -1,14 +1,60 @@ +/** + * The background color for text fields. + * @group textfield + */ $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; + +/** + * The background color for read-only text fields. + * @group textfield + */ $v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%)); + +/** + * The bevel style for text fields. See the documentation for $v-bevel. + * @group textfield + */ $v-textfield-bevel: inset 0 1px 0 v-shade !default; + +/** + * The shadow style for text fields. See the documentation for $v-shadow. + * @group textfield + */ $v-textfield-shadow: 0 1px 0 (v-tint 2) !default; + +/** + * The font-weight for text fields. + * @group textfield + */ $v-textfield-font-weight: 400 !default; + +/** + * The border style for text fields. See the documentation for $v-border. + * @group textfield + */ $v-textfield-border: $v-border !default; + +/** + * The border-radius for text fields. See the documentation for $v-border-radius; + * @group textfield + */ $v-textfield-border-radius: $v-border-radius !default; -$v-textfield-disabled-opacity: $v-disabled-opacity !default; +/** + * The opacity for disabled text fields. + * @group textfield + */ +$v-textfield-disabled-opacity: $v-disabled-opacity !default; +/** + * Outputs the selectors and properties for the TextField component. + * + * @param {string} $primary-stylename (v-textfield) - the primary style name for the selectors + * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component + * + * @group textfield + */ @mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) { .#{$primary-stylename} { @@ -73,14 +119,30 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } - +/** + * Outputs the styles for a text field variant. + * + * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height + * @param {size | list} $padding (null) - The padding of the text field. Computed from other parameters by default. + * @param {color} $font-color (null) - The font color of the text field. Computed from the $background-color by default. + * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text field + * @param {size} $font-size (null) - The font size of the text field. Inherited from the parent by default. + * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field + * @param {list} $border ($v-textfield-border) - The border of the text field + * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text field + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {list} $states (normal focus disabled) - The text field states for which to output corresponding styles + * + * @group textfield + */ @mixin valo-textfield-style ( $unit-size : $v-unit-size, - $padding : null, // Computed by default + $padding : null, - $font-color : null, // Computed by default + $font-color : null, $font-weight : max(400, $v-font-weight), - $font-size : null, // Inherited by default + $font-size : null, $background-color : $v-textfield-background-color, $border : $v-textfield-border, @@ -163,6 +225,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } +/** + * Outputs the styles for a text field input prompt. + * + * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field + * + * @group textfield + */ @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) { @if $background-color == transparent { color: inherit; @@ -179,6 +248,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } +/** + * Outputs the styles for a text field focus state. + * + * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation + * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation + * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field + * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. + * + * @group textfield + */ @mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) { outline: none; @if $v-animations-enabled { @@ -197,6 +276,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } +/** + * Outputs the styles for a read-only text field. + * + * @group textfield + */ @mixin valo-textfield-readonly-style { background: $v-textfield-background-color--readonly; color: valo-font-color($v-textfield-background-color--readonly); @@ -208,7 +292,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } - +/** + * Outputs the styles for a borderless style text field. + * + * @param {color} $background-color (transparent) - The background color of the text field + * + * @group textfield + */ @mixin valo-textfield-borderless-style ($background-color: transparent) { border: none; border-radius: 0; @@ -231,8 +321,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } - - +/** + * Outputs the styles for a text field error state. + * + * @group textfield + */ @mixin valo-textfield-error-style { border-color: $v-error-indicator-color !important; $bg: scale-color($v-error-indicator-color, $lightness: 98%); @@ -241,11 +334,18 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } - - - - - +/** + * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector). + * + * @param {string} $primary-stylename (v-textfield) - The primary style name for the selectors + * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style + * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted + * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support + * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons) + * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field) + * + * @group text field + */ @mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) { $slot-selector: ""; $caption-selector: ""; diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 9a9e597888..59d3ddca4b 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -75,6 +75,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if @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; @@ -83,6 +84,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if color: inherit; white-space: normal; line-height: 1.4; + margin: 0; img.v-icon { width: round($v-unit-size * 1.5); @@ -93,6 +95,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if margin: 0 auto .3em; border: valo-border(); } + + &:after { + top: 0; + right: 0; + bottom: 0; + left: 0; + } } .v-menubar-menuitem-selected { @@ -150,6 +159,10 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if border-right: none; } + .valo-menu-part { + overflow: visible; + } + .valo-menu-toggle { display: inline-block; } @@ -271,7 +284,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if 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); + 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); @@ -297,7 +310,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if color: $active-color; } } - + &.selected { background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%)); diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index cdd2298499..574c14b3b6 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -1,8 +1,8 @@ $v-window-background-color: $v-panel-background-color !default; $v-window-border-radius: $v-border-radius !default; $v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default; -$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default; -$v-window-animate-out: valo-placeholder-animate-out 100ms, valo-anim-scale-down-fade-out 100ms !default; +$v-window-animate-in: valo-animate-in-fade 140ms !default; +$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default; $v-window-modality-curtain-background-color: #222 !default; @@ -12,7 +12,7 @@ $v-window-modality-curtain-background-color: #222 !default; 100% { opacity: 1; } } - @include keyframes(valo-anim-scale-down-fade-out) { + @include keyframes(valo-animate-out-scale-down-fade) { 100% { @include transform(scale(0.8)); opacity: 0; @@ -59,7 +59,7 @@ $v-window-modality-curtain-background-color: #222 !default; left: 0; @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color); @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%)); - @include valo-anim-fade-in($duration: 400ms, $delay: 100ms); + @include valo-animate-in-fade($duration: 400ms, $delay: 100ms); .v-op12 & { // Opera 12 has a shitbreak with the fade-in (flickers) @@ -205,7 +205,7 @@ $v-window-modality-curtain-background-color: #222 !default; @include valo-panel-adjust-content-margins; > .v-formlayout { - @include valo-formlayout-margins($all: round($v-unit-size/3)); + @include valo-formlayout-margin(round($v-unit-size/3)); } position: relative; |