diff options
| author | Teemu Suo-Anttila <teemusa@vaadin.com> | 2014-09-03 11:48:47 +0300 |
|---|---|---|
| committer | Teemu Suo-Anttila <teemusa@vaadin.com> | 2014-09-03 15:33:01 +0300 |
| commit | 927e424acc1e43a12bdbbcd971302d00717af540 (patch) | |
| tree | a91f0486fb646f6d1de9a4d590e25100347cc7ec /WebContent | |
| parent | 600d5b436d7ca33840b1b697082d140a5040bdf3 (diff) | |
| parent | f6282cbe0386d03b57a65450bc163b20bfecfb70 (diff) | |
| download | vaadin-framework-927e424acc1e43a12bdbbcd971302d00717af540.tar.gz vaadin-framework-927e424acc1e43a12bdbbcd971302d00717af540.zip | |
Merge remote-tracking branch 'origin/master' into grid
This merge needs Grid to use elemental.json instead of org.json
Change-Id: Ib3c387c7e282b2502f266bafbdaad8727f5dc6ef
Diffstat (limited to 'WebContent')
39 files changed, 2315 insertions, 615 deletions
diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss index f7d0534da1..8a2da5b789 100644 --- a/WebContent/VAADIN/themes/valo/_valo.scss +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -48,7 +48,11 @@ @include valo-global; -// The main theme mixin +/** + * The main Valo theme mixin, which outputs all the selectors and properties to produce + * the variation specified by global variables. Should not be included multiple times + * per compilation. + */ @mixin valo { @include valo-common; @include valo-components; 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; diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss index 4b737416c2..7fd182b6cd 100644 --- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss +++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss @@ -1,3 +1,9 @@ +/** + * Outputs the context menu selectors and styles, which is used by Table and Tree for instance. + * + * @requires {mixin} valo-selection-item-style + * @requires {mixin} valo-selection-item-selected-style + */ @mixin valo-contextmenu { .v-contextmenu { diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index 5c010c128d..049518af73 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -4,9 +4,22 @@ @import "tooltip"; -// Include global styles only once +/* + * A flag which is set to true when the global styles have been included in the compilation. + * Used to only include them once, if Valo is imported multiple times during the compilation + * (multiple theme support). + * + * @access private + * @type bool + */ $valo-global-included: false !default; +/* + * Global Valo related styles, containing styles which are necessary for the application + * and widgets to work correctly. + * + * @access private + */ @mixin valo-global { @if $valo-global-included == false { @@ -173,14 +186,16 @@ $valo-global-included: false !default; } - $valo-shared-pathPrefix: null; @if $v-relative-paths == false { $valo-shared-pathPrefix: "../valo/shared/"; } - +/** + * Styles for the application root element. Outputs font, font color, background color and default + * cursor styles. + */ @mixin valo-app-style { font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family; color: $v-font-color; @@ -195,7 +210,13 @@ $valo-shared-pathPrefix: null; } } - +/** + * Common application styles, such as loading indicators, tooltip and context menu styles, + * caption and icon defaults, basic HTML element resets. + * Should only be included once (done automatically when including the main valo mixin). + * + * @requires {mixin} valo-app-style + */ @mixin valo-common { //@if & != null { @@ -351,7 +372,9 @@ $valo-shared-pathPrefix: null; - +/** + * Generic component caption styles (captions which are generated by layouts). + */ @mixin valo-caption-style { font-size: $v-caption-font-size; font-weight: $v-caption-font-weight; @@ -362,7 +385,11 @@ $valo-shared-pathPrefix: null; } - +/** + * Error indicator styles. The error indicator is by default a font character which you can style freely. + * + * @requires {mixin} valo-error-indicator-icon-style by default + */ @mixin valo-error-indicator-style { color: $v-error-indicator-color; font-weight: 600; @@ -374,18 +401,23 @@ $valo-shared-pathPrefix: null; } } +/** + * The error indicator icon style. Should be a font character or a font icon. + */ @mixin valo-error-indicator-icon-style { content: "!"; } - -// Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens. -// NOTE: breaks percentage sized overlay elements -// @mixin valo-natural-page-scrolling -// @usage -// // Call without any parent selector somewhere in your theme -// =valo-natural-page-scrolling; +/** + * Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY usually + * works better on touch devices. You loose the ability to control the scroll position from + * the server side when using this. + * + * @example scss + * // Include without any parent selector + * @include valo-natural-page-scrolling; + */ @mixin valo-natural-page-scrolling { html { diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss index 56aab30d2b..645e188b09 100644 --- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss +++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss @@ -1,5 +1,3 @@ -// TODO make fallbacks for IE 8 & 9 - @-webkit-keyframes v-rotate-360 { to {-webkit-transform: rotate(360deg);} } @@ -13,9 +11,16 @@ to {transform: rotate(360deg);} } - -@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: null, $speed: 500ms) { - $color: $color or $v-focus-color; +/** + * Creates a spinner to be used as a loading indicator. On browsers which do not + * support CSS animations, an animated GIF image is used as a fallback. + * + * @param {size} $size (24px) - the diameter of the spinner, in pixels. Should be divisible by 2, increased by 1px if not + * @param {size} $thickness (2px) - the thickness or width of the border of the spinner + * @param {color} $color ($v-focus-color) - the color of the border of the spinner + * @param {time} $speed (500ms) - the speed of the spinning animation + */ +@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: $v-focus-color, $speed: 500ms) { // Make size divisible by 2, so that the rotation won't jiggle $size: round($size) + round($size) % 2; height: $size !important; @@ -59,9 +64,25 @@ - +/** + * The color of the main loading indicator bar. + * @type color + */ $v-loading-indicator-color: $v-focus-color !default; + +/** + * The height of the main loading indicator bar. + * + * @type size + */ $v-loading-indicator-bar-height: ceil($v-unit-size/10) !default; + +/** + * The height of the main loading indicator bar when the request to the server + * is taking longer than usual and the user is notified that they should wait. + * + * @type size + */ $v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; @@ -89,7 +110,11 @@ $v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; } - +/* + * Outputs the necessary styles to create the main loading indicator bar. + * + * @access private + */ @mixin valo-loading-bar { .v-loading-indicator { diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index dc54672cb6..926b00f529 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -1,40 +1,160 @@ -@function valo-overlay-background-color ($context: $v-background-color) { - @if is-dark-color($context) { - @return darken($context, 3%); - } - @return lighten($context, 2%); -} - - -$v-overlay-background-color: valo-overlay-background-color() !default; +/** + * The background color for overlay elements. + * + * @type color + * @group overlay + */ +$v-overlay-background-color: if(is-dark-color($v-background-color), darken($v-background-color, 3%), lighten($v-background-color, 2%)) !default; + +/** + * The corner radius for overlay elements. + * + * @type size (px) + * @group overlay + */ $v-overlay-border-radius: $v-border-radius !default; + +/** + * The border width for overlay elements. + * + * @type size (px) + * @group overlay + */ $v-overlay-border-width: first-number($v-border) !default; +/** + * The animation which is used when overlay elements are made visible. + * + * @type list + * @group overlay + */ $v-overlay-animate-in: valo-overlay-animate-in 120ms !default; -$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default; +/** + * The animation which is used when overlay elements are removed. + * + * @type list + * @group overlay + */ +$v-overlay-animate-out: valo-animate-out-fade 120ms !default; + +/** + * The padding on each size of overlay elements. + * + * @type size + * @group overlay + */ $v-overlay-padding: round($v-unit-size/9) !default; + +/** + * The padding on the top and bottom edges of overlay elements. + * + * @type size + * @group overlay + */ $v-overlay-padding-vertical: $v-overlay-padding !default; + +/** + * The padding on the left and right edges of overlay elements. + * + * @type size + * @group overlay + */ $v-overlay-padding-horizontal: $v-overlay-padding !default; +/** + * The shadow used for overlay elements. + * + * @type list + * @group overlay + */ $v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default; +/** + * The background color for selection overlays, i.e. overlays which present a + * list of options for the user to choose from, such as context menus and drop down + * menus. + * + * @type color + * @group overlay + */ $v-selection-overlay-background-color: $v-overlay-background-color !default; + +/** + * The padding on each size of selection overlay elements. + * + * @type size + * @group overlay + */ $v-selection-overlay-padding: $v-overlay-padding !default; + +/** + * The padding on the top and bottom edges of selection overlay elements. + * + * @type size + * @group overlay + */ $v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default; + +/** + * The padding on the left and right edges of selection overlay elements. + * + * @type size + * @group overlay + */ $v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default; +/** + * The corner radius for selection overlay elements. + * + * @type size (px) + * @group overlay + */ $v-selection-item-border-radius: $v-border-radius - 1px !default; + +/** + * The height of individual selection overlay list items. + * + * @type size (px) + * @group overlay + */ $v-selection-item-height: ceil($v-unit-size/1.4) !default; + +/** + * The horizontal padding for individual selection overlay list items. + * + * @type size + * @group overlay + */ $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; + +/** + * The font weight for individual selection overlay list items. + * + * @type number | identifier + * @group overlay + */ $v-selection-item-font-weight: max(400, $v-font-weight); -$v-selection-item-selection-color: $v-selection-color !default; +/** + * The font color for individual selection overlay list items. + * + * @type color + * @group overlay + */ +$v-selection-item-selection-color: $v-selection-color !default; +/* + * Simulates CSS box-shadow using the extraneous shadow elements in the DOM. + * + * @access private + * @deprecated The .v-shadow element is deprecated since 7.3.0 + * @group overlay + */ @mixin valo-ie8-shadow($shadow, $element: top) { .#{$element} { $shadow-offset-x: nth($shadow, 1); @@ -97,7 +217,16 @@ $v-selection-item-selection-color: $v-selection-color !default; - +/** + * Outputs styles for overlay elements + * + * @group overlay + * + * @param {color} $background-color ($v-overlay-background-color) - the background color for the overlay + * @param {list} $shadow ($v-overlay-shadow) - the shadow for the overlay + * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the overlay is made visible + * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the overlay is removed + */ @mixin valo-overlay-style ( $background-color: $v-overlay-background-color, $shadow: $v-overlay-shadow, @@ -135,7 +264,15 @@ $v-selection-item-selection-color: $v-selection-color !default; - +/** + * Outputs styles for selection overlay elements. + * + * @group overlay + * + * @param {color} $background-color ($v-selection-overlay-background-color) - the background color for the overlay + * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the selection overlay is made visible + * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the selection overlay is removed + */ @mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) { @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out); padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal; @@ -143,7 +280,11 @@ $v-selection-item-selection-color: $v-selection-color !default; - +/** + * Outputs the styles for selection item elements (i.e. individual items in context menus and drop down menus). + * + * @group overlay + */ @mixin valo-selection-item-style { cursor: pointer; line-height: $v-selection-item-height; @@ -178,7 +319,11 @@ $v-selection-item-selection-color: $v-selection-color !default; - +/** + * Outputs the styles for selected selection item elements. + * + * @group overlay + */ @mixin valo-selection-item-selected-style { @include valo-gradient($v-selection-item-selection-color); $font-color: valo-font-color($v-selection-item-selection-color, 0.9); @@ -192,13 +337,24 @@ $v-selection-item-selection-color: $v-selection-color !default; - +/** + * Outputs the selectors and styles for generic dragging ghost elements. + * + * @group drag-n-drop + */ @mixin valo-drag-element { .v-drag-element { @include valo-drag-element-style; } } +/** + * Outputs the styles for generic dragging ghost elements. + * + * @group drag-n-drop + * + * @param {color} $background-color ($v-app-background-color) - the background color for the ghost element + */ @mixin valo-drag-element-style ($background-color: $v-app-background-color) { background: $background-color; color: valo-font-color($background-color); diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss index 7b7b83ff33..3c9c914499 100644 --- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -1,16 +1,81 @@ -// @category Tooltip - +/** + * The backgound color for tooltips. + * + * @type color + * @group tooltip + */ $v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default; + +/** + * The font color for tooltips. + * + * @type color + * @group tooltip + */ $v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; + +/** + * The font size for tooltips. + * + * @type size + * @group tooltip + */ $v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default; + +/** + * The CSS box shadow for tooltips. + * + * @type list + * @group tooltip + */ $v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default; + +/** + * The vertical padding for tooltips. + * + * @type size + * @group tooltip + */ $v-tooltip-padding-vertical: round($v-unit-size/8) !default; + +/** + * The horizontal padding for tooltips. + * + * @type size + * @group tooltip + */ $v-tooltip-padding-horizontal: round($v-unit-size/4) !default; + +/** + * The backgound color for error tooltips. + * + * @type color + * @group tooltip + */ $v-tooltip-error-message-background-color: #fff !default; + +/** + * The font color for error tooltips. + * + * @type color + * @group tooltip + */ $v-tooltip-error-message-font-color: $v-error-indicator-color !default; + +/** + * The corner radius for tooltips. + * + * @type size + * @group tooltip + */ $v-tooltip-border-radius: $v-border-radius - 1px !default; +/** + * Outputs the selectors and styles for tooltip elements. + * + * @group tooltip + */ @mixin valo-tooltip { .v-tooltip { @include valo-tooltip-style; @@ -54,7 +119,11 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default; } } - +/** + * Outputs the main styles for tooltip elements. + * + * @group tooltip + */ @mixin valo-tooltip-style { background-color: opacify($v-tooltip-background-color, 1); // For IE8 background-color: $v-tooltip-background-color; diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index 7dd3827298..4634a71fea 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -1,88 +1,459 @@ // Color functions are used to calculate default font color @import "../util/color"; - - -// A static text that is shown while the application JavaScript is loaded and started -$v-app-loading-text : "" !default; - - -// Base line height used for all widgets -$v-line-height : 1.55 !default; - - -$v-background-color : hsl(210, 0%, 98%) !default; -$v-app-background-color : $v-background-color !default; - -$v-font-size : 16px !default; // Should be specified in pixels -$v-font-weight : 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') -$v-font-color : valo-font-color($v-app-background-color) !default; -$v-font-family : "Open Sans", sans-serif !default; - -$v-caption-font-size : round($v-font-size * 0.9) !default; // Should be a pixel value -$v-caption-font-weight : max(400, $v-font-weight) !default; - -$v-unit-size : round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50) - -$v-layout-margin-top : round($v-unit-size) !default; -$v-layout-margin-right : round($v-unit-size) !default; -$v-layout-margin-bottom : round($v-unit-size) !default; -$v-layout-margin-left : round($v-unit-size) !default; - -$v-layout-spacing-vertical : round($v-unit-size/3) !default; -$v-layout-spacing-horizontal : round($v-unit-size/3) !default; - -$v-border : 1px solid (v-shade 0.7) !default; // Size must be specified in pixels -$v-border-radius : 4px !default; // Must be specified in pixels - -$v-gradient : v-linear 8% !default; - -$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default; -$v-bevel-depth : 30% !default; - -$v-shadow : 0 2px 3px v-shade !default; -$v-shadow-opacity : 5% !default; - -$v-focus-color : valo-focus-color() !default; -$v-focus-style : 0 0 0 2px rgba($v-focus-color, .5) !default; - -$v-animations-enabled : true !default; -$v-hover-styles-enabled : true !default; - -$v-disabled-opacity : 0.5 !default; - -$v-selection-color : $v-focus-color !default; - -$v-default-field-width : $v-unit-size * 5 !default; - -$v-error-indicator-color : #ed473b !default; -$v-required-field-indicator-color : $v-error-indicator-color !default; -$v-friendly-color : #2c9720 !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--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; - - - -// List of components to include in the theme compilation. The list can be modified to make -// the compiled theme smaller by removing unused components from the list. -// -// @usage -// // Remove the Calendar component styles from the output -// $v-included-components: remove($v-included-components, calendar); +/** + * A static text that is shown under the loading spinned while the client-side + * engine is being loaded and started. The text must be given in quotes. The + * text can not be localized currently. + * + * @type string, quoted + */ +$v-app-loading-text: "" !default; + +/** + * Base line height for all widgets. It must be given a unitless number. + * + * @group typography + * @type number + */ +$v-line-height: 1.55 !default; + +/** + * Base font size for the theme. The font size defines the overall sizing of + * UI components by default. Must be specified in pixels. + * + * @group typography + * @type size (px) + */ +$v-font-size: 16px !default; + +/** + * Base font weight for plain text. + * Must be specified as a numeric value: 100, 200, 300 (light), 400 (regular), + * 500, 600, 700 (bold), 800 or 900. + * + * @group typography + * @type number + */ +$v-font-weight: 300 !default; + +/** + * Base font family for the theme. Can be any valid CSS font stack. + * + * @group typography + * @type list + */ +$v-font-family: "Open Sans", sans-serif !default; + +/** + * Font size for generic component captions. Can be any valid CSS font-size. A + * round pixel value is recommended. + * + * @group typography + * @type number + */ +$v-caption-font-size: round($v-font-size * 0.9) !default; + +/** + * Font weight for generic component captions. Can be any valid CSS font-weight. + * + * @group typography + * @type number | identifier + */ +$v-caption-font-weight: max(400, $v-font-weight) !default; + +/** + * Border specification for the components that have a border. The border width + * must be specified in pixels. For the border color, you can specify any CSS color + * or one of the v-tint, v-shade, and v-tone keywords. + * + * @group style + * @type list + */ +$v-border: 1px solid (v-shade 0.7) !default; + +/** + * Corner radius for components that have a border. The measure must be specified as a + * single pixel value (i.e. not as a list of values for each corner). + * + * @group style + * @type size (px) + */ +$v-border-radius: 4px !default; + +/** + * Color gradient style for components that have a gradient. The gradient style may use + * the following keywords: v-linear and v-linear-reverse. The opacity must be given + * as percentage between 0% and 100%. + * + * #### Gradient styles + * + * - __v-linear__ - The start of the gradient is a lighter shade of the base color and the end is a darker shade of the base color. A basic linear gradient. + * - __v-linear-reverse__ - Same as v-linear, but the color stops are reversed (darker at the start and lighter at the end) + * + * @group style + * @type list + */ +$v-gradient: v-linear 8% !default; + +/** + * Inset shadow style to define how some components are "raised" from the background. + * The value follows the syntax of CSS box-shadow, and should be a list of insets. + * For the bevel color, you can specify any CSS color or one of the v-tint, v-shade, + * and v-tone keywords. + * + * @group style + * @type list + */ +$v-bevel: inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default; + +/** + * Specifies the "depth" of the bevel shadow, as applied to one of the color keywords for + * the bevel style. The actual amount of tint, shade, or tone is computed from the depth. + * + * @group style + * @type number (pct) + */ +$v-bevel-depth: 30% !default; + +/** + * Default shadow style for all components. As with $v-bevel, the value follows the syntax + * of CSS box-shadow, but without the inset. For the shadow color, you can specify any CSS + * color or one of the v-tint or v-shade keywords. + * + * @group style + * @type list + */ +$v-shadow: 0 2px 3px v-shade !default; + +/** + * Specifies the opacity of the shadow, as applied to one of the color keywords for the + * shadow style. The actual amount of tint or shade is computed from the depth. + * + * @group style + * @type number (pct) + */ +$v-shadow-opacity: 5% !default; + +/** + * The background color is the main control parameter for the Valo theme and + * it is used for computing all other colors in the theme. If the color is dark + * (has low luminance), * light foreground colors that give high contrast + * with the background are automatically used. + * + * Can be any valid CSS color. + * + * @group color + * @type color + */ +$v-background-color: hsl(210, 0%, 98%) !default; + +/** + * Background color of the UI's root element. You can specify the color in + * any way allowed in CSS. Used as the base for other default colors, such + * as panel and window content areas. + * + * Can be any valid CSS color. + * + * @group color + * @type color + */ +$v-app-background-color: $v-background-color !default; + +/** + * Base font color for the theme. Can be any valid CSS color. + * + * @group color + * @type color + */ +$v-font-color: valo-font-color($v-app-background-color) !default; + +/** + * Color for the field focus indicator. The valo-focus-color() function computes a + * high-contrast color from the context, which is usually the background color. The color + * can be any CSS color. + * + * @group color + * @type color + */ +$v-focus-color: valo-focus-color() !default; + +/** + * Box-shadow specification for the field focus indicator. The space-separated values + * are the horizontal shadow position in pixels, vertical shadow position in pixels, + * blur distance in pixels, spread distance in pixels, and the color. The color can be + * any CSS color. You can only specify the color, in which case defaults for the position + * are used. rgba() or hsla() can be used to enable transparency. + * + * @group style + * @type list | color + */ +$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default; + +/** + * Opacity of disabled components, from 0 to 1. Not all components have reduced opacity when disabled, such as Labels. + * + * @group style + * @type number + */ +$v-disabled-opacity: 0.5 !default; + +/** + * Color for indicating selection in selection components. + * + * @group color + * @type color + */ +$v-selection-color: $v-focus-color !default; + +/** + * Color of the component error indicator and other error indications, such as the + * error style notification. + * + * @group color + * @type color + */ +$v-error-indicator-color: #ed473b !default; + +/** + * Color of the required indicator in field components. + * + * @group color + * @type color + */ +$v-required-field-indicator-color: $v-error-indicator-color !default; + +/** + * Color used for success states and to indicate safe actions (i.e. actions that + * will not cause any data loss). + * + * @group color + * @type color + */ +$v-friendly-color: #2c9720 !default; + +/** + * Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition to CSS colors, the following keywords: + * + * - __v-tint__ - Lighter than the background color + * - __v-shade__ - Darker than the background color + * - __v-tone__ - Adaptive color specification: darker on light background and lighter on dark background. Not usable in $v-shadow. + * + * + * These keywords can be further adjusted by combining them with a strength multiplier, specified in parenthesis. + * + * Examples: + * + * (v-tint 2) + * (v-shade 0.6) + * (v-tone 1.1) + * + * @group color + */ +$v-color-keywords: v-tint, v-shade, v-tone; + +/** + * This is the base size for various layout measures. It is directly used in some + * measures, such as button height and layout margins, while other measures are + * derived from it. The value must be specified in pixels, with a suitable range + * of 18-50. + * + * @group layout + * @type size (px) + */ +$v-unit-size: round(2.3 * $v-font-size) !default; + +/** + * Scaling factor for tiny sizes. Must be a unitless number. + * + * @group layout + * @type number + */ +$v-scaling-factor--tiny: 0.75 !default; + +/** + * Scaling factor for small sizes. Must be a unitless number. + * + * @group layout + * @type number + */ +$v-scaling-factor--small: 0.85 !default; + +/** + * Scaling factor for large sizes. Must be a unitless number. + * + * @group layout + * @type number + */ +$v-scaling-factor--large: 1.2 !default; + +/** + * Scaling factor for huge sizes. Must be a unitless number. + * + * @group layout + * @type number + */ +$v-scaling-factor--huge: 1.6 !default; + +/** + * Unit size for tiny components. Must be a pixel value. + * + * @group layout + * @type size (px) + */ +$v-unit-size--tiny: round($v-unit-size * $v-scaling-factor--tiny) !default; + +/** + * Unit size for small components. Must be a pixel value. + * + * @group layout + * @type size (px) + */ +$v-unit-size--small: round($v-unit-size * $v-scaling-factor--small) !default; + +/** + * Unit size for large components. Must be a pixel value. + * + * @group layout + * @type size (px) + */ +$v-unit-size--large: round($v-unit-size * $v-scaling-factor--large) !default; + +/** + * Unit size for huge components. Must be a pixel value. + * + * @group layout + * @type size (px) + */ +$v-unit-size--huge: round($v-unit-size * $v-scaling-factor--huge) !default; + +/** + * The top margin size for all built-in layout components, when the margin is + * enabled with setMargin(). Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-margin-top: round($v-unit-size) !default; + +/** + * The right margin size for all built-in layout components, when the margin is + * enabled with setMargin(). Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-margin-right: round($v-unit-size) !default; + +/** + * The bottom margin size for all built-in layout components, when the margin is + * enabled with setMargin(). Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-margin-bottom: round($v-unit-size) !default; + +/** + * The left margin size for all built-in layout components, when the margin is + * enabled with setMargin(). Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-margin-left: round($v-unit-size) !default; + +/** + * Amount of vertical space when spacing is enabled for a layout with setSpacing(). + * Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-spacing-vertical: round($v-unit-size/3) !default; + +/** + * Amount of horizontal space when spacing is enabled for a layout with setSpacing(). + * Can be any valid CSS size. + * + * @group layout + * @type size + */ +$v-layout-spacing-horizontal: round($v-unit-size/3) !default; + +/** + * Tiny font size. + * + * @group typography + * @type size (px) + */ +$v-font-size--tiny: ceil($v-font-size * $v-scaling-factor--tiny) !default; + +/** + * Small font size. + * + * @group typography + * @type size (px) + */ +$v-font-size--small: ceil($v-font-size * $v-scaling-factor--small) !default; + +/** + * Large font size. + * + * @group typography + * @type size (px) + */ +$v-font-size--large: ceil($v-font-size * $v-scaling-factor--large) !default; + +/** + * Huge font size. + * + * @group typography + * @type size (px) + */ +$v-font-size--huge: ceil($v-font-size * $v-scaling-factor--huge) !default; + +/** + * Default width of certain field components, unless overridden with setWidth(). + * + * @group layout + * @type size (px) + */ +$v-default-field-width: $v-unit-size * 5 !default; + +/** + * Specifies whether various CSS animations are used. Not all animations are disabled when + * set to false, such as the default loading indicator animations. + * + * @group optimization + * @type bool + */ +$v-animations-enabled: true !default; + +/** + * Specifies whether various :hover styles are used for indicating that mouse pointer + * hovers over an element. + * + * @group optimization + * @type bool + */ +$v-hover-styles-enabled: true !default; + +/** + * List of components to include in the theme compilation. The list can be modified to make + * the compiled theme smaller by removing unused components from the list. + * + * @group optimization + * @type list + * + * @example scss + * // Remove the Calendar component styles from the output (must be declared after importing Valo) + * $v-included-components: remove($v-included-components, calendar); + * + * @example scss + * // Only include the Label, Button and Vertical and Horizontal layouts in the compilation + * $v-included-components: label, button, orderedlayout; + */ $v-included-components: absolutelayout, accordion, @@ -125,23 +496,43 @@ $v-included-components: window, valo-menu !default; - +/** + * List of components whose additional styles should be included in the compilation. + * + * @group optimization + * @type list + */ $v-included-additional-styles: $v-included-components !default; - -// Checks if a given component is included in the compilation. Used by the collection mixins that -// include all components, like valo-components and valo-components. -// @param $component-name {String} the name of the component to check -// @param $is-included {list} (Optional) the list of components which is checked -// @return {Boolean} true if the component is included in the compilation, false if not +/** + * Checks if a given component is included in the compilation. Used by the collection mixins that + * include all components (i.e. valo-components). + * + * @requires $v-included-components + * + * @example scss + * @if v-is-included(button) { + * // The Button component is included in the compilation + * } + * + * @param {string} $component-name - the name of the component to check + * @param {list} $is-included ($v-included-components) - the list of components which is checked + * + * @return {bool} true if the component is included in the compilation, false if not + * + * @group optimization + */ @function v-is-included ($component-name, $is-included: $v-included-components) { @return contains($is-included, $component-name); } - -// A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file. -// The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths). -// This boolean is used to flag which compiler is used, so that paths are correct for different resources. -// false == Ruby, true == Vaadin +/** + * A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file. + * The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths). + * This boolean is used to flag which compiler is used, so that paths are correct for different resources. + * false == Ruby, true == Vaadin + * + * @type bool + */ $v-relative-paths: true !default; diff --git a/WebContent/VAADIN/themes/valo/util/_anim.scss b/WebContent/VAADIN/themes/valo/util/_anim.scss index 430a6e4722..0cb738d832 100644 --- a/WebContent/VAADIN/themes/valo/util/_anim.scss +++ b/WebContent/VAADIN/themes/valo/util/_anim.scss @@ -1,73 +1,62 @@ -@if $v-animations-enabled { +$valo-anim-keyframes-included: false !default; - // 'Placeholder' animation names to trigger VOverlay animation-in and animation-out - @include keyframes(valo-placeholder-animate-in) { - 0% { - visibility: visible; - } - } +@if $v-animations-enabled and $valo-anim-keyframes-included == false{ - @include keyframes(valo-placeholder-animate-out) { - 100% { - visibility: visible; - } - } - - @include keyframes(valo-anim-fade-in) { + @include keyframes(valo-animate-in-fade) { 0% { opacity: 0; } } - @include keyframes(valo-anim-fade-out) { + @include keyframes(valo-animate-out-fade) { 100% { opacity: 0; } } - @include keyframes(valo-anim-slide-in-down) { + @include keyframes(valo-animate-in-slide-down) { 0% { @include transform( translateY(-100%) ); } } - @include keyframes(valo-anim-slide-in-up) { + @include keyframes(valo-animate-in-slide-up) { 0% { @include transform( translateY(100%) ); } } - @include keyframes(valo-anim-slide-in-left) { + @include keyframes(valo-animate-in-slide-left) { 0% { @include transform( translateX(100%) ); } } - @include keyframes(valo-anim-slide-in-right) { + @include keyframes(valo-animate-in-slide-right) { 0% { @include transform( translateX(-100%) ); } } - @include keyframes(valo-anim-slide-out-down) { + @include keyframes(valo-animate-out-slide-down) { 100% { @include transform( translateY(100%) ); } } - @include keyframes(valo-anim-slide-out-up) { + @include keyframes(valo-animate-out-slide-up) { 100% { @include transform( translateY(-100%) ); } } - @include keyframes(valo-anim-slide-out-left) { + @include keyframes(valo-animate-out-slide-left) { 100% { @include transform( translateX(-100%) ); } } - @include keyframes(valo-anim-slide-out-right) { + @include keyframes(valo-animate-out-slide-right) { 100% { @include transform( translateX(100%) ); } @@ -80,36 +69,84 @@ } } - @include keyframes(valo-anim-drop-fade-out) { + @include keyframes(valo-animate-out-slide-down-fade) { 100% { opacity: 0; @include transform(translatey(30%)); } } - + + $valo-anim-keyframes-included: true; } - -@mixin valo-anim-fade-in ($duration: 120ms, $delay: null){ - @include animation(valo-anim-fade-in $duration $delay); +/** + * Add animate-in-fade animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (180ms) - the duration of the fade + * @param {time} $delay (null) - the delay of the fade + */ +@mixin valo-animate-in-fade ($duration: 180ms, $delay: null){ + @include animation(valo-animate-in-fade $duration $delay); } -@mixin valo-anim-fade-out ($duration: 120ms, $delay: null){ - @include animation(valo-anim-fade-out $duration $delay); +/** + * Add animate-out-fade animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (180ms) - the duration of the fade + * @param {time} $delay (null) - the delay of the fade + */ +@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){ + @include animation(valo-animate-out-fade $duration $delay); } -@mixin valo-anim-slide-down ($duration: 260ms, $delay: null){ - @include animation(valo-anim-slide-down $duration $delay); +/** + * Add animate-in-slide-down animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (400ms) - the duration of the slide + * @param {time} $delay (null) - the delay of the slide + */ +@mixin valo-animate-in-slide-down ($duration: 400ms, $delay: null){ + @include animation(valo-animate-in-slide-down $duration $delay); } -@mixin valo-anim-slide-up ($duration: 260ms, $delay: null){ - @include animation(valo-anim-slide-up $duration $delay); +/** + * Add animate-in-slide-up animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (400ms) - the duration of the slide + * @param {time} $delay (null) - the delay of the slide + */ +@mixin valo-animate-in-slide-up ($duration: 400ms, $delay: null){ + @include animation(valo-animate-in-slide-up $duration $delay); } -@mixin valo-anim-slide-left ($duration: 260ms, $delay: null){ - @include animation(valo-anim-slide-left $duration $delay); +/** + * Add animate-in-slide-left animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (400ms) - the duration of the slide + * @param {time} $delay (null) - the delay of the slide + */ +@mixin valo-animate-in-slide-left ($duration: 400ms, $delay: null){ + @include animation(valo-animate-in-slide-left $duration $delay); } -@mixin valo-anim-slide-right ($duration: 260ms, $delay: null){ - @include animation(valo-anim-slide-right $duration $delay); +/** + * Add animate-in-slide-right animation to the targeted elements. + * + * @group animation + * + * @param {time} $duration (400ms) - the duration of the slide + * @param {time} $delay (null) - the delay of the slide + */ +@mixin valo-animate-in-slide-right ($duration: 400ms, $delay: null){ + @include animation(valo-animate-in-slide-right $duration $delay); } diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss index bf5b9b78bd..346a50c9de 100644 --- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -1,3 +1,15 @@ +/** + * Computes a CSS border property value for the given base color. + * + * @group style + * + * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords + * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to + * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function. + * @param {number} $strength (1) - adjustment for the border contrast + * + * @return {list} The input $border value with any color keyword replaced with the corresponding actual color + */ @function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) { @if type-of($border) != list { @return $border; @@ -18,8 +30,8 @@ $adjust-type: first-string($part); $adjust-amount: first-number($part); - $tint: blend-screen(white($v-bevel-depth/100%*$adjust-amount*$strength), $color); - $shade: blend-linearburn(black($v-bevel-depth/100%*$adjust-amount*$strength), $color); + $tint: blend-screen(rgba(#fff, $v-bevel-depth/100%*$adjust-amount*$strength), $color); + $shade: blend-linearburn(rgba(#000, $v-bevel-depth/100%*$adjust-amount*$strength), $color); @if $adjust-type == v-tone { @if is-dark-color($color) { @@ -42,22 +54,46 @@ } -@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient) { - border: valo-border($border, $color); - - // Adjust border-colors for gradient +/** + * Similar to the valo-border function, but adjusts the top and bottom border colors to suit an element with a gradient background-color. + * + * @group style + * + * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords + * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to + * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function. + * @param {number} $strength (1) - adjustment for the border contrast + * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient. + */ +@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $context: null, $strength: 1, $gradient: $v-gradient) { + border: valo-border($border, $color, $context, $strength); + + // Adjust border colors for gradient @if $gradient { $color-stops: valo-gradient-color-stops($color, $gradient); $top: first(first($color-stops)); $bottom: first(last($color-stops)); - border-top-color: first-color(valo-border($border, $top)); - border-bottom-color: first-color(valo-border($border, $bottom)); + border-top-color: first-color(valo-border($border, $top, $context, $strength)); + border-bottom-color: first-color(valo-border($border, $bottom, $context, $strength)); } } - - +/** + * Computes a CSS box-shadow value according to the specified style parameters. + * + * @group style + * + * @param {list} $bevel (null) - box-shadow value according to $v-bevel documentation + * @param {number} $bevel-depth ($v-bevel-depth) - percentage defining the depth/amount of the bevel effect. Affects the color keywords specified in the $bevel parameter. + * @param {list} $shadow (null) - box-shadow value according to $v-shadow documentation + * @param {number} $shadow-opacity ($v-shadow-opacity) - percentage defining the opacity/amount of the shadow effect. Affects the color keywords specified in the $shadow parameter. + * @param {color} $background-color ($v-background-color) - the base color to which the color keywords are applied to + * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the color keywords specified in the $bevel parameter. + * @param {bool} $include-focus (false) - should the box-shadow value include $v-focus-style as well (only added if $v-focus-style is a) + * + * @return {list} CSS box-shadow value, combined from $bevel and $shadow with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color + */ @function valo-bevel-and-shadow ($bevel: null, $bevel-depth: $v-bevel-depth, $shadow: null, $shadow-opacity: $v-shadow-opacity, $background-color: $v-background-color, $gradient: null, $include-focus: false) { $box-shadow: null; @@ -117,9 +153,18 @@ } - -@function valo-replace-tones($list, $tint-color, $gradient: null, $shade-color: null) { - $shade-color: $shade-color or $tint-color; +/** + * Replaces color keywords in the given list. + * + * @group style + * + * @param {list} $list - any CSS list with possible color keywords + * @param {color} $color - The color to which color keywords are applied to + * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the replacement colors to accommodate the gradient. + * + * @return {list} The input $list parameter with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color + */ +@function valo-replace-tones($list, $color, $gradient: null) { $ret: (); @each $part in $list { @@ -130,11 +175,11 @@ $adjust-type: first-string($part); $adjust-amount: first-number($part); - $top-color: $tint-color; - $bottom-color: $shade-color; + $top-color: $color; + $bottom-color: $color; @if $gradient { - $color-stops: valo-gradient-color-stops($tint-color, $gradient); + $color-stops: valo-gradient-color-stops($color, $gradient); $top-color: first(first($color-stops)); $bottom-color: first(last($color-stops)); } @@ -142,20 +187,20 @@ $tint: blend-lighten(adjust-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount, $saturation: -$v-bevel-depth/2), scale-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount)); $shade: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$v-bevel-depth/3*$adjust-amount), $saturation: -$v-bevel-depth/2), $v-bevel-depth/100%), $bottom-color); - $color: null; + $new-color: null; @if $adjust-type == v-tone { - @if is-dark-color($tint-color) { - $color: $tint; + @if is-dark-color($color) { + $new-color: $tint; } @else { - $color: $shade; + $new-color: $shade; } } @else if $adjust-type == v-tint { - $color: $tint; + $new-color: $tint; } @else if $adjust-type == v-shade { - $color: $shade; + $new-color: $shade; } - $ret: join($ret, $color); + $ret: join($ret, $new-color); } @else { $ret: join($ret, $part); @@ -166,6 +211,15 @@ } +/** + * Replace color keywords in the given box-shadow parameter. + * + * @group style + * + * @param {list} $shadow - CSS box-shadow value, or any other CSS list which might contain either the v-tint or the v-shade color keywords. + * + * @return {list} the input $shadow parameter with all occurences of v-tint and v-shade color keywords replaced with the corresponding actual color + */ @function valo-replace-shadow ($shadow) { $ret: (); @each $part in $shadow { @@ -196,36 +250,24 @@ } -@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $bevel: $v-bevel, $offset: 1px) { - @if type-of($bevel) != list or $v-bevel-depth == 0 { - @return null; - } - - $needle: null; +/** + * Return a CSS text-shadow property value according to the specified style parameters. + * + * @group style + * + * @param {color} $font-color ($v-font-color) - the color of the text to which the text-shadow is added + * @param {color} $background-color ($v-background-color) - the color of the background where the text is to which the text-shadow is added + * @param {size} $offset (-1px) - the size of the text shadow vertical offset + * @param {number (pct)} $opacity ($v-shadow-opacity) - the percentage amount of shadow which is applied + */ +@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $offset: -1px, $opacity: $v-shadow-opacity) { + $color: null; @if color-luminance($font-color) < color-luminance($background-color) { - // Text darker than bg, light shadow. Look for tint - $needle: v-tint; + $color: rgba(#fff, $opacity / 100%); + $offset: $offset * -1; } @else { - // Text lighter than bg, dark shadow. Look for shade - $needle: v-shade; - } - - // Use the first match from the bevel list - @while list-of-lists($bevel) { - $bevel: first($bevel); - } - - // Remove possible 'inset' - $bevel: remove($bevel, inset); - - $color: $background-color; - @each $b in $bevel { - $strength: 1; - @if type-of($b) == list { - $strength: first-number($b); - } - $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); + $color: rgba(#000, $opacity / 100%); } - @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color; + @return 0 $offset 0 $color; } diff --git a/WebContent/VAADIN/themes/valo/util/_blend-modes.scss b/WebContent/VAADIN/themes/valo/util/_blend-modes.scss index 3da575660d..40d4defbdb 100644 --- a/WebContent/VAADIN/themes/valo/util/_blend-modes.scss +++ b/WebContent/VAADIN/themes/valo/util/_blend-modes.scss @@ -1,6 +1,5 @@ // From https://github.com/heygrady/scss-blend-modes // MIT license -// Remember to add a license notice to Vaadin //-------------------------------- // Normal diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index 0c80d2f0d0..37612fd48d 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -1,37 +1,48 @@ // "Photoshop" blend modes @import "blend-modes"; -// Returns the luminance of a color (0-255) -// (perceived brightness, rather than absolute mathematical lightness value) -// -// "The luminance calculation is a weighted average of the color channels that approximates -// how humans perceive brightness, while lightness is just an average of the largest and -// smallest channels without regard to perception." -// -// Source for equation: http://en.wikipedia.org/wiki/Luminance_(relative) +/** + * Returns the luminance of a color (0-255), i.e. the perceived brightness, rather than + * the absolute mathematical lightness value. + * + * "The luminance calculation is a weighted average of the color channels that approximates + * how humans perceive brightness, while lightness is just an average of the largest and + * smallest channels without regard to perception." + * + * Source: http://en.wikipedia.org/wiki/Luminance_(relative) + * + * @group color + * + * @param {color} $color - the color whose luminance value to get + * + * @return {number} the luminance value of the color, in the range of 0-255 + * + */ @function color-luminance ($color) { @return 0.2126 * red($color) + 0.7152 * green($color) + 0.0722 * blue($color); } -// Arbitrary luminance threshold after which colors should be adjusted either darker or lighter +/** + * Luminance value after which colors will be considered light (i.e. not dark). + * + * @group color + */ $v-luminance-threshold: 150 !default; - -@function black($opacity: 1) { - @return transparentize(#000, 1 - $opacity); -} - -@function white($opacity: 1) { - @return transparentize(#fff, 1 - $opacity); -} - - - -@function is-dark-color($bg-color) { - $luminance: color-luminance($bg-color); - @if $luminance < $v-luminance-threshold or (saturation($bg-color) > 80% and ($luminance < $v-luminance-threshold + 20)) { +/** + * Checks whether the color is considered dark or light, according to it's luminance and saturation. + * + * @group color + * + * @param {color} $color - the color to check + * + * @return {bool} true if the color is considered dark, false if considered light + */ +@function is-dark-color($color) { + $luminance: color-luminance($color); + @if $luminance < $v-luminance-threshold or (saturation($color) > 80% and ($luminance < $v-luminance-threshold + 20)) { @return true; } @else { @return false; @@ -39,6 +50,15 @@ $v-luminance-threshold: 150 !default; } +/** + * Get the darkest color (by luminance) from a list of colors. + * + * @group color + * + * @param {list} $colors - a list of CSS colors + * + * @return {color} darkest color (by luminance) from a list of colors + */ @function darkest-color($colors...) { $darkest: first($colors); @each $color in $colors { @@ -49,31 +69,38 @@ $v-luminance-threshold: 150 !default; @return $darkest; } -// Returns a text color with enough contrast for the given background color -@function valo-font-color ($bg-color, $contrast: 0.8) { - @if $bg-color { + +/** + * Returns a font color with enough contrast for the given background color. + * + * @group color + * + * @param {color} $bg-color - the background color for which to compute a suitable font color + * @param {number} $contrast (0.8) - the contrast of the font color compared to the background color + * + * @return {color} a suitable font color for the given background color + */ +@function valo-font-color ($bg-color, $contrast: 0.72) { + @if type-of($bg-color) == color { @if is-dark-color($bg-color) { @return scale-color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast)); } @else { - @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast * 0.9), $saturation: max(-100%, -50% * $contrast)); + @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast), $saturation: max(-100%, -50% * $contrast)); } } @return null; } -@function valo-header-color ($bg-color, $contrast: 1) { - $font-color: valo-font-color($bg-color); - @if is-dark-color($bg-color) { - @return lighten($font-color, 30% * $contrast); - } @else { - @return darken($font-color, 20% * $contrast); - } -} - - - - +/** + * Returns a suitable focus color for the given background color. + * + * @group color + * + * @param {color} $context ($v-app-background-color) - the background color for which to compute a suitable focus color + * + * @return {color} a suitable focus color for the given background color + */ @function valo-focus-color ($context: $v-app-background-color) { $color: $context; @if is-dark-color($context) { @@ -85,9 +112,13 @@ $v-luminance-threshold: 150 !default; } - -@mixin valo-focus-style($include-box-shadow: false) { - @if $include-box-shadow and type-of($v-focus-style) == list { +/** + * Output the default focus styles (border-color and box-shadow). + * + * @group style + */ +@mixin valo-focus-style { + @if type-of($v-focus-style) == list { @include box-shadow($v-focus-style); } @else if type-of($v-focus-style) == color { border-color: $v-focus-style; diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss index b1215d735f..dc2dc781a7 100644 --- a/WebContent/VAADIN/themes/valo/util/_css3.scss +++ b/WebContent/VAADIN/themes/valo/util/_css3.scss @@ -1,3 +1,11 @@ +/** + * Cross-browser opacity. + * + * @param {number} $value - opacity value from 0 to 1 + * @param {bool} $important (false) - should the property value be declared with !important + * + * @group util + */ @mixin opacity ($value, $important: false) { $importantValue: null; @if $important { @@ -14,7 +22,14 @@ } } -// -webkit-box-shadow still needed for Android 2.3 and 3.0, as well as iOS 5 +/** + * Cross-browser box-shadow. + * -webkit-box-shadow is still needed for Android 2.3 and 3.0, as well as iOS 5 + * + * @param {list} $shadows - Any valid CSS box-shadow value + * + * @group util + */ @mixin box-shadow ($shadows...) { @include prefixer(box-shadow, $shadows, webkit spec); } diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss index df159ad611..99490046ba 100644 --- a/WebContent/VAADIN/themes/valo/util/_gradient.scss +++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss @@ -1,3 +1,13 @@ +/** + * Outputs cross-browser Valo-specific linear gradient background-image declarations. + * + * @group style + * + * @param {color} $color ($v-background-color) - The base color for the gradient color stops + * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient. + * @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead. + * @param {string} $direction (to bottom) - the direction of the linear gradient. The color stops are by default so that a lighter shade is at the start and a darker shade is at the end. + */ @mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) { @if $color { @if $gradient { @@ -9,6 +19,14 @@ } } +/** + * Returns a valid CSS, Valo-specific, color stop list to be used in a linear gradient. + * + * @group style + * + * @param {color} $color - the base color for the color stops + * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient. + */ @function valo-gradient-color-stops($color, $gradient: $v-gradient) { $style: valo-gradient-style($gradient); $opacity: valo-gradient-opacity($gradient); @@ -31,6 +49,13 @@ } +/** + * Returns the style part of a Valo-specific gradient value. + * + * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient. + * + * @return {string} One of the possible style values for $v-gradient + */ @function valo-gradient-style($gradient: $v-gradient) { @if type-of($gradient) != list { @return none; @@ -38,6 +63,13 @@ @return first-string($gradient); } +/** + * Returns the opacity part of a Valo-specific gradient value. + * + * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient. + * + * @return {number} A percentage value from 0% to 100% + */ @function valo-gradient-opacity($gradient: $v-gradient) { @if type-of($gradient) != list { @return 0%; diff --git a/WebContent/VAADIN/themes/valo/util/_lists.scss b/WebContent/VAADIN/themes/valo/util/_lists.scss index 54471b1380..f82c4f0fe3 100644 --- a/WebContent/VAADIN/themes/valo/util/_lists.scss +++ b/WebContent/VAADIN/themes/valo/util/_lists.scss @@ -1,15 +1,26 @@ -@function contains($list, $var, $recursive: false) { +/** + * Checks if a list contains a certain value. + * + * @param {list} $list - the list to check + * @param {value} $var - the value to search for + * @param {bool} $recursive (false) - should any contained lists be checked for the value + * + * @return {bool} true if the value is found from the list, false otherwise + * + * @group lists + */ +@function contains($list, $value, $recursive: false) { @if $recursive == false { - @return (false != index($list, $var)); + @return (false != index($list, $value)); } $ret: false; @each $item in $list { @if type-of($item) == list and $recursive { - @if contains($item, $var, true) { + @if contains($item, $value, true) { @return true; } - } @else if $item == $var { + } @else if $item == $value { @return true; } } @@ -18,6 +29,15 @@ } +/** + * Check whether a list contains nested lists. + * + * @param {list} $list - the list to check + * + * @return {bool} true of the list contains other nested lists, false otherwise + * + * @group lists + */ @function list-of-lists($list) { @each $part in $list { @if type-of($part) != list { @@ -28,26 +48,72 @@ } +/** + * Get the first color value from a list. + * + * @param {list} $list - a list which should contain a color value + * + * @return {color} The first color encountered in the list + * + * @group lists + */ @function first-color($list) { @return first-of-type($list, color); } +/** + * Get the first number value from a list. + * + * @param {list} $list - a list which should contain a number value + * + * @return {number} The first number encountered in the list + * + * @group lists + */ @function first-number($list) { @return first-of-type($list, number); } +/** + * Get the first string value from a list. + * + * @param {list} $list - a list which should contain a string value + * + * @return {string} The first string encountered in the list + * + * @group lists + */ @function first-string($list) { @return first-of-type($list, string); } +/** + * Get the first contained list from the list passed as the parameter. + * + * @param {list} $list - a list which should contain a nested list + * + * @return {list} The first list encountered in the list passed as the parameter + * + * @group lists + */ @function first-list($list) { @return first-of-type($list, list); } +/** + * Get the first value of a certain type from a list. + * + * @param {list} $list - a list which should contain a value of the certain type + * @param {string} $type - the type of value to search for + * + * @return {value} The first item of the certain type encountered in the list + * + * @group lists + */ @function first-of-type($list, $type) { @each $item in $list { @if type-of($item) == $type { @@ -63,6 +129,15 @@ } +/** + * Flatten nested lists to one list, while maintaining the original list separators. + * + * @param {list} $list - the list to flatten + * + * @return {list} the same list with all nested lists flattened + * + * @group lists + */ @function flatten-list($list) { $ret: (); @each $item in $list { diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss index 1f983c0dad..585504600d 100644 --- a/WebContent/VAADIN/themes/valo/util/_util.scss +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -1,4 +1,12 @@ -// Align element vertically inside +/** + * Ouput selectors and properties to vertically center elements inside their parent. + * + * @param {string} $to-align (()) - The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements. + * @param {string} $align (middle) - The vertical-align value, e.g. top, middle, bottom + * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide + * + * @group util + */ @mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { &:#{$pseudo-element} { content: ""; @@ -18,7 +26,11 @@ } - +/** + * Indicate that an element is clickable/tappable + * + * @group util + */ @mixin valo-tappable { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; @@ -26,13 +38,53 @@ } - +/** + * Output Vaadin Responsive extension specific width-range declaration. + * + * @param {size} $min (0) - The lower bound for the width-range + * @param {size} $max (null) - The upper bound for the width-range + * + * @group util + * + * @example scss + * .v-ui { + * font-size: 18px; + * + * // Make the font-size smaller for 481px-768px wide UIs + * @include width-range(481px, 768px) { + * font-size: 16px; + * } + * + * // Make it even smaller for UIs narrower than 480px + * @include width-range($max: 480px) { + * font-size: 14px; + * } + * } + */ @mixin width-range($min: 0, $max: null) { &[width-range~="#{$min}-#{$max}"] { @content; } } +/** + * Output Vaadin Responsive extension specific height-range declaration. + * + * @param {size} $min (0) - The lower bound for the height-range + * @param {size} $max (null) - The upper bound for the height-range + * + * @group util + * + * @example scss + * .v-csslayout { + * color: red; + * + * // Make the text color blue when the layout height is between 100px-300px + * @include height-range(100px, 300px) { + * color: blue; + * } + * } + */ @mixin height-range($min: 0, $max: null) { &[height-range~="#{$min}-#{$max}"] { @content; diff --git a/WebContent/license.html b/WebContent/license.html index f714e4d64d..0ce22da99c 100644 --- a/WebContent/license.html +++ b/WebContent/license.html @@ -160,6 +160,14 @@ <td title="Custom web font">Lora</td> <td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td> </tr> + <tr> + <td><a href="https://github.com/heygrady/scss-blend-modes">SCSS Blend Modes</a></td> + <td><a href="licenses/the-mit-license.txt">The MIT License</a></td> + </tr> + <tr> + <td><a href="https://github.com/Team-Sass/Sass-list-functions">Sass list functions</a></td> + <td><a href="licenses/the-mit-license.txt">The MIT License</a></td> + </tr> <!-- The extracted vaadin-sass-compiler --> <tr> <td>Vaadin Sass Compiler</td> |