diff options
11 files changed, 729 insertions, 213 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index 4ac0e4c16f..eb57e20d2a 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -164,7 +164,7 @@ /** * Outputs the styles for a button variant. * - * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds the its height + * @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 diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 19fc135f61..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,7 +352,7 @@ // closing when the user selects an item } - .#{$primary-stylename}-suggestmenu { + [class$="suggestmenu"] { @include valo-selection-overlay-style($animate-in: false, $animate-out: false); @include box-sizing(border-box); position: relative; @@ -359,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%); @@ -453,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 377261e4e6..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; @@ -254,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; @@ -410,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); @@ -430,21 +479,45 @@ } } + +/** + * 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); @@ -452,6 +525,12 @@ 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; position: relative; // Show above other cells @@ -462,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 00ba01248f..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, @@ -173,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 { @@ -196,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 e86d017404..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} { diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index f4fee96041..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) { @@ -139,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); @@ -160,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; @@ -249,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)); @@ -332,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 { @@ -432,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, @@ -471,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 { @@ -494,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; @@ -505,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/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index dd2eb60d16..574c14b3b6 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -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; |