diff options
| author | Jouni Koivuviita <jouni@vaadin.com> | 2014-08-29 13:57:46 +0300 |
|---|---|---|
| committer | Vaadin Code Review <review@vaadin.com> | 2014-08-30 08:09:22 +0000 |
| commit | eac8c5a24f0bb93139a53aebd19ee91ed4ac4d16 (patch) | |
| tree | a40db580360c7ae09516ab5711772559f10f62a2 /WebContent/VAADIN | |
| parent | f50b07abc784ae54af4ce7609d49013319eca57a (diff) | |
| download | vaadin-framework-eac8c5a24f0bb93139a53aebd19ee91ed4ac4d16.tar.gz vaadin-framework-eac8c5a24f0bb93139a53aebd19ee91ed4ac4d16.zip | |
First batch of Valo Sass API documentation, plus bug fixes
Also updates the test to always scroll the left panel to the top after
opening a section.
Change-Id: Icdb42795b8ec347b91694c162898f41aa8d80152
Diffstat (limited to 'WebContent/VAADIN')
34 files changed, 1565 insertions, 403 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..4ac0e4c16f 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 the 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..19fc135f61 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -333,9 +333,13 @@ .#{$primary-stylename}-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; @@ -371,7 +375,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 +400,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 { diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 391ffb8595..377261e4e6 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -241,8 +241,9 @@ width: auto; table { - border-collapse: collapse; + border-collapse: collapse; border-spacing: 0; + margin: 0 auto; } td { @@ -360,7 +361,7 @@ } td.#{$primary-stylename}-month { - width: round($v-unit-size * 3.5); + width: round($v-unit-size * 4); @include valo-datefield-calendarpanel-month-style; } @@ -452,7 +453,7 @@ } @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 & { diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index fc065cec3d..00ba01248f 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -156,6 +156,10 @@ background: transparent; border: none; color: inherit; + + &:focus { + box-shadow: none; + } } > .v-textfield-prompt, diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 7f4fef58d9..e86d017404 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -34,7 +34,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 +65,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..f4fee96041 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -77,7 +77,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 +85,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; } } @@ -168,7 +148,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; @@ -387,7 +367,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 +378,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 +409,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 +417,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; } diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 9a9e597888..6429dc0896 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -271,7 +271,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 +297,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..dd2eb60d16 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) 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; |