color

functions

color-luminance 

@function color-luminance($color) { ... }

Description

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)

Parameters

Name Description Type Default value
$color

the color whose luminance value to get

 Color —

Returns

the luminance value of the color, in the range of 0-255

Number

Used by

is-dark-color 

@function is-dark-color($color) { ... }

Description

Checks whether the color is considered dark or light, according to it's luminance and saturation.

Parameters

Name Description Type Default value
$color

the color to check

 Color —

Returns

true if the color is considered dark, false if considered light

Bool

Requires

Used by

darkest-color 

@function darkest-color($colors) { ... }

Description

Get the darkest color (by luminance) from a list of colors.

Parameters

Name Description Type Default value
$colors

a list of CSS colors

 List —

Returns

darkest color (by luminance) from a list of colors

Color

Requires

Used by

valo-font-color 

@function valo-font-color($bg-color, $contrast: 0.8) { ... }

Description

Returns a font color with enough contrast for the given background color.

Parameters

Name Description Type Default value
$bg-color

the background color for which to compute a suitable font color

 Color —
$contrast

the contrast of the font color compared to the background color

 Number 0.8

Returns

a suitable font color for the given background color

Color

Requires

Used by

valo-focus-color 

@function valo-focus-color($context: $v-app-background-color) { ... }

Description

Returns a suitable focus color for the given background color.

Parameters

Name Description Type Default value
$context

the background color for which to compute a suitable focus color

 Color $v-app-background-color

Returns

a suitable focus color for the given background color

Color

Requires

variables

v-background-color 

$v-background-color: hsl(210, 0%, 98%) !default;

Description

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.

Type

Color

Used by

v-app-background-color 

$v-app-background-color: $v-background-color !default;

Description

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.

Type

Color

Used by

v-font-color 

$v-font-color: valo-font-color($v-app-background-color) !default;

Description

Base font color for the theme. Can be any valid CSS color.

Type

Color

Used by

v-focus-color 

$v-focus-color: valo-focus-color() !default;

Description

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.

Type

Color

Used by

v-selection-color 

$v-selection-color: $v-focus-color !default;

Description

Color for indicating selection in selection components.

Type

Color

Used by

v-error-indicator-color 

$v-error-indicator-color: #ed473b !default;

Description

Color of the component error indicator and other error indications, such as the error style notification.

Type

Color

Used by

v-required-field-indicator-color 

$v-required-field-indicator-color: $v-error-indicator-color !default;

Description

Color of the required indicator in field components.

Type

Color

Used by

v-friendly-color 

$v-friendly-color: #2c9720 !default;

Description

Color used for success states and to indicate safe actions (i.e. actions that will not cause any data loss).

Type

Color

Used by

v-color-keywords 

$v-color-keywords: v-tint, v-shade, v-tone;

Description

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)

v-luminance-threshold 

$v-luminance-threshold: 150 !default;

Description

Luminance value after which colors will be considered light (i.e. not dark).

Used by

lists

functions

contains 

@function contains($list, $var, $recursive: false) { ... }

Description

Checks if a list contains a certain value.

Parameters

Name Description Type Default value
$list

the list to check

 List —
$var

the value to search for

 Value —
$recursive

should any contained lists be checked for the value

 Bool false

Returns

true if the value is found from the list, false otherwise

Bool

Requires

Used by

list-of-lists 

@function list-of-lists($list) { ... }

Description

Check whether a list contains nested lists.

Parameters

Name Description Type Default value
$list

the list to check

 List —

Returns

true of the list contains other nested lists, false otherwise

Bool

Used by

first-color 

@function first-color($list) { ... }

Description

Get the first color value from a list.

Parameters

Name Description Type Default value
$list

a list which should contain a color value

 List —

Returns

The first color encountered in the list

Color

Requires

Used by

first-number 

@function first-number($list) { ... }

Description

Get the first number value from a list.

Parameters

Name Description Type Default value
$list

a list which should contain a number value

 List —

Returns

The first number encountered in the list

Number

Requires

Used by

first-string 

@function first-string($list) { ... }

Description

Get the first string value from a list.

Parameters

Name Description Type Default value
$list

a list which should contain a string value

 List —

Returns

The first string encountered in the list

String

Requires

Used by

first-list 

@function first-list($list) { ... }

Description

Get the first contained list from the list passed as the parameter.

Parameters

Name Description Type Default value
$list

a list which should contain a nested list

 List —

Returns

The first list encountered in the list passed as the parameter

List

Requires

first-of-type 

@function first-of-type($list, $type) { ... }

Description

Get the first value of a certain type from a list.

Parameters

Name Description Type Default value
$list

a list which should contain a value of the certain type

 List —
$type

the type of value to search for

 String —

Returns

The first item of the certain type encountered in the list

Value

Requires

Used by

flatten-list 

@function flatten-list($list) { ... }

Description

Flatten nested lists to one list, while maintaining the original list separators.

Parameters

Name Description Type Default value
$list

the list to flatten

 List —

Returns

the same list with all nested lists flattened

List

Requires

Used by

optimization

functions

v-is-included 

@function v-is-included($component-name, $is-included: $v-included-components) { ... }

Description

Checks if a given component is included in the compilation. Used by the collection mixins that include all components (i.e. valo-components).

Parameters

Name Description Type Default value
$component-name

the name of the component to check

 String —
$is-included

the list of components which is checked

 List $v-included-components

Returns

true if the component is included in the compilation, false if not

Bool

Example

 @if v-is-included(button) {
   // The Button component is included in the compilation
 }

Requires

Used by

variables

v-animations-enabled 

$v-animations-enabled: true !default;

Description

Specifies whether various CSS animations are used. Not all animations are disabled when set to false, such as the default loading indicator animations.

Type

Bool

Used by

v-hover-styles-enabled 

$v-hover-styles-enabled: true !default;

Description

Specifies whether various :hover styles are used for indicating that mouse pointer hovers over an element.

Type

Bool

Used by

v-included-components 

$v-included-components: absolutelayout,
    accordion,
    button,
    calendar,
    checkbox,
    colorpicker,
    combobox,
    csslayout,
    customcomponent,
    customlayout,
    datefield,
    dragwrapper,
    form,
    formlayout,
    grid,
    gridlayout,
    label,
    link,
    menubar,
    nativebutton,
    nativeselect,
    notification,
    optiongroup,
    orderedlayout,
    panel,
    popupview,
    progressbar,
    slider,
    splitpanel,
    table,
    tabsheet,
    textfield,
    textarea,
    richtextarea,
    tree,
    treetable,
    twincolselect,
    upload,
    window,
    valo-menu !default;

Description

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.

Type

List

Example

// Remove the Calendar component styles from the output (must be declared after importing Valo)
$v-included-components: remove($v-included-components, calendar);
// Only include the Label, Button and Vertical and Horizontal layouts in the compilation
$v-included-components: label, button, orderedlayout;

Used by

v-included-additional-styles 

$v-included-additional-styles: $v-included-components !default;

Description

List of components whose additional styles should be included in the compilation.

Type

List

style

functions

valo-border 

@function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) { ... }

Description

Computes a CSS border property value for the given base color.

Parameters

Name Description Type Default value
$border

CSS border value which can contain any of the color keywords

 List $v-border
$color

the base color to which the color keywords are applied to

 Color $v-background-color
$context

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.

 Color null
$strength

adjustment for the border contrast

 Number 1

Returns

The input $border value with any color keyword replaced with the corresponding actual color

List

Requires

Used by

valo-bevel-and-shadow 

@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) - should the box-shadow value include $v-focus-style as well (only added if $v-focus-style is a) { ... }

Description

Computes a CSS box-shadow value according to the specified style parameters.

Parameters

Name Description Type Default value
$bevel

box-shadow value according to $v-bevel documentation

 List null
$bevel-depth

percentage defining the depth/amount of the bevel effect. Affects the color keywords specified in the $bevel parameter.

 Number $v-bevel-depth
$shadow

box-shadow value according to $v-shadow documentation

 List null
$shadow-opacity

percentage defining the opacity/amount of the shadow effect. Affects the color keywords specified in the $shadow parameter.

 Number $v-shadow-opacity
$background-color

the base color to which the color keywords are applied to

 Color $v-background-color
$gradient

Valo specific gradient value. See the documentation for $v-gradient. Affects the color keywords specified in the $bevel parameter.

 List null
$include-focus — Bool false) - should the box-shadow value include $v-focus-style as well (only added if $v-focus-style is a

Returns

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

List

Requires

Used by

valo-replace-tones 

@function valo-replace-tones($list, $color, $gradient: null) { ... }

Description

Replaces color keywords in the given list.

Parameters

Name Description Type Default value
$list

any CSS list with possible color keywords

 List —
$color

The color to which color keywords are applied to

 Color —
$gradient

Valo specific gradient value. See the documentation for $v-gradient. Affects the replacement colors to accommodate the gradient.

 List null

Returns

The input $list parameter with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color

List

Requires

Used by

valo-replace-shadow 

@function valo-replace-shadow($shadow) { ... }

Description

Replace color keywords in the given box-shadow parameter.

Parameters

Name Description Type Default value
$shadow

CSS box-shadow value, or any other CSS list which might contain either the v-tint or the v-shade color keywords.

 List —

Returns

the input $shadow parameter with all occurences of v-tint and v-shade color keywords replaced with the corresponding actual color

List

Requires

Used by

valo-text-shadow 

@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $offset: -1px, $opacity: $v-shadow-opacity) { ... }

Description

Return a CSS text-shadow property value according to the specified style parameters.

Parameters

Name Description Type Default value
$font-color

the color of the text to which the text-shadow is added

 Color $v-font-color
$background-color

the color of the background where the text is to which the text-shadow is added

 Color $v-background-color
$offset

the size of the text shadow vertical offset

 Size -1px
$opacity

the percentage amount of shadow which is applied

 Number (pct) $v-shadow-opacity

Requires

Used by

valo-gradient-color-stops 

@function valo-gradient-color-stops($color, $gradient: $v-gradient) { ... }

Description

Returns a valid CSS, Valo-specific, color stop list to be used in a linear gradient.

Parameters

Name Description Type Default value
$color

the base color for the color stops

 Color —
$gradient

Valo-specific gradient value. See the documentation for $v-gradient.

 List $v-gradient

Requires

Used by

mixins

valo-border-with-gradient 

@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $context: null, $strength: 1, $gradient: $v-gradient) { ... }

Description

Similar to the valo-border function, but adjusts the top and bottom border colors to suit an element with a gradient background-color.

Parameters

Name Description Type Default value
$border

CSS border value which can contain any of the color keywords

 List $v-border
$color

the base color to which the color keywords are applied to

 Color $v-background-color
$context

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.

 Color null
$strength

adjustment for the border contrast

 Number 1
$gradient

Valo specific gradient value. See the documentation for $v-gradient.

 List $v-gradient

Requires

Used by

valo-focus-style 

@mixin valo-focus-style() { ... }

Description

Output the default focus styles (border-color and box-shadow).

Parameters

None.

Requires

valo-gradient 

@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular, $direction: to bottom) { ... }

Description

Outputs cross-browser Valo-specific linear gradient background-image declarations.

Parameters

Name Description Type Default value
$color

The base color for the gradient color stops

 Color $v-background-color
$gradient

Valo-specific gradient value. See the documentation for $v-gradient.

 List $v-gradient
$fallback

. If null, the base $color is used instead.

 Color null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular
$direction

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.

 String to bottom

Requires

Used by

variables

v-border 

$v-border: 1px solid (v-shade 0.7) !default;

Description

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.

Type

List

Used by

v-border-radius 

$v-border-radius: 4px !default;

Description

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).

Type

Size (px)

Used by

v-gradient 

$v-gradient: v-linear 8% !default;

Description

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)

Type

List

Used by

v-bevel 

$v-bevel: inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;

Description

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.

Type

List

Used by

v-bevel-depth 

$v-bevel-depth: 30% !default;

Description

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.

Type

Number (pct)

Used by

v-shadow 

$v-shadow: 0 2px 3px v-shade !default;

Description

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.

Type

List

Used by

v-shadow-opacity 

$v-shadow-opacity: 5% !default;

Description

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.

Type

Number (pct)

Used by

v-focus-style 

$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;

Description

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.

Type

List, Color

Used by

v-disabled-opacity 

$v-disabled-opacity: 0.5 !default;

Description

Opacity of disabled components, from 0 to 1. Not all components have reduced opacity when disabled, such as Labels.

Type

Number

Used by

table

functions

valo-table-background-color 

@function valo-table-background-color($context: $v-background-color) { ... }

Parameters

Name Description Type Default value
$context — Color $v-background-color

Returns

Color

Requires

Used by

mixins

valo-table-global 

@mixin valo-table-global($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

Requires

valo-table 

@mixin valo-table($primary-stylename: v-table, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table
$include-additional-styles — Bool —

Requires

valo-table-sort-asc-icon-style 

@mixin valo-table-sort-asc-icon-style() { ... }

Parameters

None.

valo-table-sort-desc-icon-style 

@mixin valo-table-sort-desc-icon-style() { ... }

Parameters

None.

valo-table-column-selector-icon-style 

@mixin valo-table-column-selector-icon-style() { ... }

Parameters

None.

valo-table-column-visible-icon-style 

@mixin valo-table-column-visible-icon-style() { ... }

Parameters

None.

valo-table-no-stripes-style 

@mixin valo-table-no-stripes-style($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

valo-table-no-vertical-lines-style 

@mixin valo-table-no-vertical-lines-style($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

Requires

valo-table-no-horizontal-lines-style 

@mixin valo-table-no-horizontal-lines-style($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

Requires

valo-table-no-header-style 

@mixin valo-table-no-header-style($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

valo-table-borderless-style 

@mixin valo-table-borderless-style($primary-stylename: v-table) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-table

Requires

variables

v-table-row-height 

$v-table-row-height: $v-unit-size !default;

Used by

v-table-border-width 

$v-table-border-width: first-number($v-border) !default;

Used by

v-table-border-color 

$v-table-border-color: null !default;

Used by

v-table-border-radius 

$v-table-border-radius: 0 !default;

Used by

v-table-cell-padding-horizontal 

$v-table-cell-padding-horizontal: round($v-unit-size/3) !default;

Used by

v-table-resizer-width 

$v-table-resizer-width: round($v-unit-size/4.5) !default;

Used by

v-table-sort-indicator-width 

$v-table-sort-indicator-width: round($v-unit-size/2) !default;

Used by

v-table-header-font-size 

$v-table-header-font-size: round($v-font-size * 0.86) !default;

Used by

v-table-background-color 

$v-table-background-color: null !default;

Used by

General

functions

valo-gradient-style 

@function valo-gradient-style($gradient: $v-gradient) { ... }

Description

Returns the style part of a Valo-specific gradient value.

Parameters

Name Description Type Default value
$gradient

Valo-specific gradient value. See the documentation for $v-gradient.

 List $v-gradient

Returns

One of the possible style values for $v-gradient

String

Requires

Used by

valo-gradient-opacity 

@function valo-gradient-opacity($gradient: $v-gradient) { ... }

Description

Returns the opacity part of a Valo-specific gradient value.

Parameters

Name Description Type Default value
$gradient

Valo-specific gradient value. See the documentation for $v-gradient.

 List $v-gradient

Returns

A percentage value from 0% to 100%

Number

Requires

Used by

mixins

valo 

@mixin valo() { ... }

Description

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.

Parameters

None.

valo-components 

@mixin valo-components() { ... }

Description

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.

Parameters

None.

Example

.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;
  }
}

Requires

valo-widget-style 

@mixin valo-widget-style() { ... }

Parameters

None.

valo-widget 

@mixin valo-widget() { ... }

Parameters

None.

valo-contextmenu 

@mixin valo-contextmenu() { ... }

Description

Outputs the context menu selectors and styles, which is used by Table and Tree for instance.

Parameters

None.

Requires

valo-app-style 

@mixin valo-app-style() { ... }

Description

Styles for the application root element. Outputs font, font color, background color and default cursor styles.

Parameters

None.

Requires

Used by

valo-common 

@mixin valo-common() { ... }

Description

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).

Parameters

None.

Requires

valo-caption-style 

@mixin valo-caption-style() { ... }

Description

Generic component caption styles (captions which are generated by layouts).

Parameters

None.

Requires

valo-error-indicator-style 

@mixin valo-error-indicator-style() { ... }

Description

Error indicator styles. The error indicator is by default a font character which you can style freely.

Parameters

None.

Requires

valo-error-indicator-icon-style 

@mixin valo-error-indicator-icon-style() { ... }

Description

The error indicator icon style. Should be a font character or a font icon.

Parameters

None.

Used by

valo-natural-page-scrolling 

@mixin valo-natural-page-scrolling() { ... }

Description

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.

Parameters

None.

Example

 // Include without any parent selector
 @include valo-natural-page-scrolling;

Requires

valo-spinner 

@mixin valo-spinner($size: 24px, $thickness: 2px, $color: $v-focus-color, $speed: 500ms) { ... }

Description

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.

Parameters

Name Description Type Default value
$size

the diameter of the spinner, in pixels. Should be divisible by 2, increased by 1px if not

 Size 24px
$thickness

the thickness or width of the border of the spinner

 Size 2px
$color

the color of the border of the spinner

 Color $v-focus-color
$speed

the speed of the spinning animation

 Time 500ms

Requires

Used by

variables

v-loading-indicator-color 

$v-loading-indicator-color: $v-focus-color !default;

Description

The color of the main loading indicator bar.

Type

Color

v-loading-indicator-bar-height 

$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default;

Description

The height of the main loading indicator bar.

Type

Size

v-loading-indicator-bar-height--wait 

$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default;

Description

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-app-loading-text 

$v-app-loading-text: "" !default;

Description

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

Used by

v-relative-paths 

$v-relative-paths: true !default;

Description

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

Used by

absolutelayout

mixins

valo-absolutelayout 

@mixin valo-absolutelayout($primary-stylename: v-absolutelayout) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-absolutelayout

accordion

mixins

valo-accordion 

@mixin valo-accordion($primary-stylename: v-accordion, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the Accordion component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-accordion
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-accordion-style 

@mixin valo-accordion-style() { ... }

Description

Outputs the styles for the Accordion component root element.

Parameters

None.

Requires

valo-accordion-item-style 

@mixin valo-accordion-item-style() { ... }

Description

Outputs the styles for an individual Accordion item root element.

Parameters

None.

Requires

valo-accordion-item-caption-style 

@mixin valo-accordion-item-caption-style($background-color: null) - the background color of the caption. Other styles (such as font and border colors, gradients and bevels) { ... }

Description

Outputs the styles for an individual Accordion item's caption element.

Parameters

Name Description Type Default value
$background-color

adapt to the background color automatically.

 Color null) - the background color of the caption. Other styles (such as font and border colors, gradients and bevels

Requires

valo-accordion-item-content-style 

@mixin valo-accordion-item-content-style() { ... }

Description

Outputs the styles for an individual Accordion item's content element.

Parameters

None.

Requires

animation

mixins

valo-animate-in-fade 

@mixin valo-animate-in-fade($duration: 180ms, $delay: null) { ... }

Description

Add animate-in-fade animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the fade

 Time 180ms
$delay

the delay of the fade

 Time null

Used by

valo-animate-out-fade 

@mixin valo-animate-out-fade($duration: 180ms, $delay: null) { ... }

Description

Add animate-out-fade animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the fade

 Time 180ms
$delay

the delay of the fade

 Time null

valo-animate-in-slide-down 

@mixin valo-animate-in-slide-down($duration: 400ms, $delay: null) { ... }

Description

Add animate-in-slide-down animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the slide

 Time 400ms
$delay

the delay of the slide

 Time null

valo-animate-in-slide-up 

@mixin valo-animate-in-slide-up($duration: 400ms, $delay: null) { ... }

Description

Add animate-in-slide-up animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the slide

 Time 400ms
$delay

the delay of the slide

 Time null

valo-animate-in-slide-left 

@mixin valo-animate-in-slide-left($duration: 400ms, $delay: null) { ... }

Description

Add animate-in-slide-left animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the slide

 Time 400ms
$delay

the delay of the slide

 Time null

valo-animate-in-slide-right 

@mixin valo-animate-in-slide-right($duration: 400ms, $delay: null) { ... }

Description

Add animate-in-slide-right animation to the targeted elements.

Parameters

Name Description Type Default value
$duration

the duration of the slide

 Time 400ms
$delay

the delay of the slide

 Time null

button

mixins

valo-button 

@mixin valo-button($primary-stylename: v-button, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the Button component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-button
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-button-static-style 

@mixin valo-button-static-style($states: normal hover focus active disabled, $vertical-centering: true) { ... }

Description

Outputs the static styles (i.e. styles which don't differ between button variants) for a button.

Parameters

Name Description Type Default value
$states

The button states for which to output corresponding static styles

 List normal hover focus active disabled
$vertical-centering

Should the output contain a vertical centering guide

 Bool true

Requires

Used by

valo-button-style 

@mixin valo-button-style($unit-size: $v-unit-size, $padding: null, $font-color: null, $font-weight: $v-font-weight + 100, $font-size: null, $cursor: null, $background-color: $v-background-color, $border: $v-border, $border-radius: $v-border-radius, $gradient: $v-gradient, $bevel: $v-bevel, $shadow: $v-shadow, $states: normal hover focus active disabled) { ... }

Description

Outputs the styles for a button variant.

Parameters

Name Description Type Default value
$unit-size

The sizing of the button, which corresponds its height

 Size $v-unit-size
$padding

The padding of the button. Computed from other parameters by default.

 Size, List null
$font-color

The font color of the button. Computed from the $background-color by default.

 Color null
$font-weight

The font weight of the button

 Number $v-font-weight + 100
$font-size

The font size of the button. Inherited from the parent by default.

 Size null
$cursor

The mouse cursor of the button

 String null
$background-color

The background color of the button

 Color $v-background-color
$border

The border of the button

 List $v-border
$border-radius

The border-radius of the button

 Size $v-border-radius
$gradient

Valo specific gradient value. See the documentation for $v-gradient.

 List $v-gradient
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-shadow
$states

The button states for which to output corresponding styles

 List normal hover focus active disabled

Requires

Used by

valo-button-hover-style 

@mixin valo-button-hover-style($background-color: $v-background-color) { ... }

Description

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.

Parameters

Name Description Type Default value
$background-color

The background color of the normal state button

 Color $v-background-color

Requires

Used by

valo-button-focus-style 

@mixin valo-button-focus-style($background-color: $v-background-color, $border-fallback: inherit) { ... }

Description

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.

Parameters

Name Description Type Default value
$background-color

The background color of the normal state button

 Color $v-background-color
$border-fallback

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.

 List inherit

Requires

Used by

valo-button-active-style 

@mixin valo-button-active-style($background-color: $v-background-color) { ... }

Description

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.

Parameters

Name Description Type Default value
$background-color

The background color of the normal state button

 Color $v-background-color

Used by

valo-button-vertical-centering 

@mixin valo-button-vertical-centering() { ... }

Description

Outputs styles to allow vertical centering of the icon and the caption, independent of the height of the button.

Parameters

None.

Requires

valo-button-borderless-style 

@mixin valo-button-borderless-style($font-color: inherit) { ... }

Description

Output styles for a borderless button. Expects that the targeted element already has both valo-button-static-style and valo-button-style included.

Parameters

Name Description Type Default value
$font-color

The font color of the borderless button

 Color inherit

Requires

Used by

valo-button-quiet-style 

@mixin valo-button-quiet-style() { ... }

Description

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.

Parameters

None.

valo-button-icon-align-right-style 

@mixin valo-button-icon-align-right-style() { ... }

Description

Output styles to align a button's icon on the right side of its caption.

Parameters

None.

Requires

valo-button-icon-align-top-style 

@mixin valo-button-icon-align-top-style() { ... }

Description

Output styles to align a button's icon on top of its caption.

Parameters

None.

Requires

calendar

mixins

valo-calendar-global 

@mixin valo-calendar-global($primary-stylename: v-calendar) { ... }

Description

Outputs the global selectors and properties for the Calendar component - styles which are considered mandatory for the component to work properly.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-calendar

valo-calendar 

@mixin valo-calendar($primary-stylename: v-calendar) { ... }

Description

Outputs the selectors and properties for the Calendar component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-calendar

Requires

valo-calendar-prev-style 

@mixin valo-calendar-prev-style() { ... }

Description

Outputs the styles for the previous button.

Parameters

None.

valo-calendar-next-style 

@mixin valo-calendar-next-style() { ... }

Description

Outputs the styles for the next button.

Parameters

None.

variables

v-calendar-event-colors 

$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;

Description

A list of colors for custom event colors. Can be an empty list of you don't need any custom event colors.

Example

// 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.

Used by

checkbox

mixins

valo-checkbox 

@mixin valo-checkbox($primary-stylename: v-checkbox, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the CheckBox component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-checkbox
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-checkbox-icon-style 

@mixin valo-checkbox-icon-style() { ... }

Description

Outputs the font icon to indicate the checked state.

Parameters

None.

valo-checkbox-style 

@mixin valo-checkbox-style($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { ... }

Description

Outputs the styles for a checkbox variant.

Parameters

Name Description Type Default value
$background-color

The background color of the checkbox

 Color $v-background-color
$unit-size

The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.

 Size $v-unit-size
$selection-color

The color of the checked state icon

Color $v-selection-color

Requires

Used by

colorpicker

mixins

valo-colorpicker-global 

@mixin valo-colorpicker-global($primary-stylename: v-colorpicker) { ... }

Description

Outputs the global selectors and properties for the ColorPicker component - styles which are considered mandatory for the component to work properly.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-colorpicker

Requires

valo-colorpicker 

@mixin valo-colorpicker($primary-stylename: v-colorpicker) { ... }

Description

Outputs the selectors and properties for the ColorPicker component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-colorpicker

Requires

combobox

mixins

valo-combobox 

@mixin valo-combobox($primary-stylename: v-filterselect, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the ComboBox component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-filterselect
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-combobox-style 

@mixin valo-combobox-style($unit-size: $v-unit-size, $font-color: null, $font-weight: max(400, $v-font-weight), $font-size: null, $background-color: $v-textfield-background-color, $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $gradient: none, $bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $states: normal focus disabled) { ... }

Description

Outputs the styles for a combobox variant.

Parameters

Name Description Type Default value
$unit-size

The sizing of the combobox, which corresponds its height

 Size $v-unit-size
$font-color

The font color of the combobox. Computed from the $background-color by default.

 Color null
$font-weight

The font weight of the combobox

 Number max(400, $v-font-weight)
$font-size

The font size of the combobox. Inherited from the parent by default.

 Size null
$background-color

The background color of the combobox

 Color $v-textfield-background-color
$border

The border of the combobox

 List $v-textfield-border
$border-radius

The border-radius of the combobox

 Size $v-textfield-border-radius
$gradient

Valo specific gradient value. See the documentation for $v-gradient.

 List none
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$states

The combobox states for which to output corresponding styles

 List normal focus disabled

Requires

Used by

valo-combobox-input-style 

@mixin valo-combobox-input-style($unit-size: $v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%, $padding: null, $font-color: null, $font-weight: null, $font-size: null, $background-color: $v-textfield-background-color, $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $gradient: none, $bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $states: normal focus disabled) { ... }

Description

Outputs the styles for a combobox variant input element.

Parameters

Name Description Type Default value
$unit-size — Size $v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%
$padding

The padding of the input. Computed from other parameters by default.

 Size, List null
$font-color

The font color of the input. Computed from the $background-color by default.

 Color null
$font-weight

The font weight of the input. Inherited from the parent by default.

 Number null
$font-size

The font size of the combobox. Inherited from the parent by default.

 Size null
$background-color

The background color of the input

 Color $v-textfield-background-color
$border

The border of the input

 List $v-textfield-border
$border-radius

The border-radius of the input

 Size $v-textfield-border-radius
$gradient

Valo specific gradient value. See the documentation for $v-gradient.

 List none
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$states

The combobox states for which to output corresponding styles

 List normal focus disabled

Requires

Used by

valo-combobox-button-style 

@mixin valo-combobox-button-style($unit-size: $v-unit-size, $bevel: $v-textfield-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-textfield-border-radius, $border: $v-textfield-border) { ... }

Description

Outputs the styles for a combobox variant button element.

Parameters

Name Description Type Default value
$unit-size

The sizing of the button, which corresponds its width.

 Size $v-unit-size
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$background-color

The background color of the input, which affects the font color of the button

 Color $v-textfield-background-color
$border-radius

The border-radius of the input, which affects the border-radius of the button

 Size $v-textfield-border-radius
$border

The border of the input, which affects the border of the button

 List $v-textfield-border

Requires

Used by

valo-combobox-button-icon-style 

@mixin valo-combobox-button-icon-style() { ... }

Description

Outputs the font icon styles for the combobox drop down button.

Parameters

None.

valo-combobox-popup-style 

@mixin valo-combobox-popup-style() { ... }

Description

Outputs the styles for a combobox popup.

Parameters

None.

Requires

valo-combobox-no-input-style 

@mixin valo-combobox-no-input-style() { ... }

Parameters

None.

Requires

csslayout

mixins

valo-csslayout 

@mixin valo-csslayout($primary-stylename: v-csslayout, $include-additional-styles) { ... }

Description

Outputs the additional styles for the CssLayout component. Does not produce any other output.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-csslayout
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

valo-component-group 

@mixin valo-component-group() { ... }

Description

Outputs the styles for a horizontal component group. The target component is expected to be a CssLayout, which is a single DIV element with child components directly inside.

Parameters

None.

Example

.my-csslayout {
  @include valo-component-group;
}

Requires

variables

v-component-group-spacing 

$v-component-group-spacing: null !default;

Description

The amount of spacing between different widgets in a component group. If null, a computed value is used ($v-border size * -1, or 1px if $v-border size is 0)

Used by

customcomponent

mixins

valo-customcomponent 

@mixin valo-customcomponent($primary-stylename: v-customcomponent) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-customcomponent

customlayout

mixins

valo-customlayout 

@mixin valo-customlayout($primary-stylename: v-customlayout) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-customlayout

datefield

mixins

valo-datefield 

@mixin valo-datefield($primary-stylename: v-datefield, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the DateField component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-datefield
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-inline-datefield 

@mixin valo-inline-datefield($primary-stylename: v-inline-datefield) { ... }

Description

Outputs the selectors and properties for the InlineDateField component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-inline-datefield

Requires

valo-datefield-style 

@mixin valo-datefield-style($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $unit-size: $v-unit-size, $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color, $states: normal focus disabled) { ... }

Description

Outputs the styles for a date field variant.

Parameters

Name Description Type Default value
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$unit-size

The sizing of the datefield, which corresponds its height

 Size $v-unit-size
$border

The border of the datefield

 List $v-textfield-border
$border-radius

The border-radius of the datefield

 Size $v-textfield-border-radius
$background-color

The background color of the datefield

 Color $v-textfield-background-color
$states

The datefield states for which to output corresponding styles

 List normal focus disabled

Requires

Used by

valo-datefield-button-style 

@mixin valo-datefield-button-style($unit-size: $v-unit-size, $bevel: $v-textfield-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-textfield-border-radius, $border: $v-textfield-border) { ... }

Description

Outputs the styles for a date field variant button element.

Parameters

Name Description Type Default value
$unit-size

The sizing of the button, which corresponds its width.

 Size $v-unit-size
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$background-color

The background color of the input, which affects the font color of the button

 Color $v-textfield-background-color
$border-radius

The border-radius of the input, which affects the border-radius of the button

 Size $v-textfield-border-radius
$border

The border of the input, which affects the border of the button

 List $v-textfield-border

Requires

Used by

valo-datefield-button-icon-style 

@mixin valo-datefield-button-icon-style() { ... }

Description

Outputs the font icon styles for the date field drop down button.

Parameters

None.

valo-datefield-popup-style 

@mixin valo-datefield-popup-style() { ... }

Description

Outputs the styles for a date field popup.

Parameters

None.

Requires

valo-datefield-calendarpanel-style 

@mixin valo-datefield-calendarpanel-style($primary-stylename: v-datefield-calendarpanel) { ... }

Description

Outputs the styles for calendar panel (i.e. month view).

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-datefield-calendarpanel

Requires

Used by

valo-datefield-calendarpanel-day-style 

@mixin valo-datefield-calendarpanel-day-style() { ... }

Description

Outputs the styles for an individual day element in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-day-hover-style 

@mixin valo-datefield-calendarpanel-day-hover-style() { ... }

Description

Outputs the hover state styles for an individual day element in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-day-offmonth-style 

@mixin valo-datefield-calendarpanel-day-offmonth-style() { ... }

Description

Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-outside-range-style 

@mixin valo-datefield-calendarpanel-outside-range-style() { ... }

Description

Outputs the styles for an individual day element, which are outside available range.

Parameters

None.

Requires

valo-datefield-calendarpanel-day-today-style 

@mixin valo-datefield-calendarpanel-day-today-style() { ... }

Description

Outputs the styles for todays day element in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-day-selected-style 

@mixin valo-datefield-calendarpanel-day-selected-style() { ... }

Description

Outputs the styles for the selected day element in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-day-focused-style 

@mixin valo-datefield-calendarpanel-day-focused-style() { ... }

Description

Outputs the focus state styles for an individual day element in a calendar panel.

Parameters

None.

Requires

valo-datefield-calendarpanel-nextmonth-icon-style 

@mixin valo-datefield-calendarpanel-nextmonth-icon-style() { ... }

Description

Outputs the font icon styles for the next month button in a calendar panel.

Parameters

None.

valo-datefield-calendarpanel-prevmonth-icon-style 

@mixin valo-datefield-calendarpanel-prevmonth-icon-style() { ... }

Description

Outputs the font icon styles for the previous month button in a calendar panel.

Parameters

None.

valo-datefield-calendarpanel-nextyear-icon-style 

@mixin valo-datefield-calendarpanel-nextyear-icon-style() { ... }

Description

Outputs the font icon styles for the next year button in a calendar panel.

Parameters

None.

valo-datefield-calendarpanel-prevyear-icon-style 

@mixin valo-datefield-calendarpanel-prevyear-icon-style() { ... }

Description

Outputs the font icon styles for the previous year button in a calendar panel.

Parameters

None.

valo-datefield-calendarpanel-month-style 

@mixin valo-datefield-calendarpanel-month-style() { ... }

Description

Outputs the styles for the current month and year title element in a calendar panel.

Parameters

None.

Requires

drag-n-drop

mixins

valo-dragwrapper 

@mixin valo-dragwrapper($primary-stylename: v-ddwrapper) { ... }

Description

Outputs the styles and selectors for the DragAndDropWrapper component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-ddwrapper

Requires

valo-ddwrapper-box-hint-style 

@mixin valo-ddwrapper-box-hint-style() { ... }

Description

Outputs the styles for a drop target when the drag is on top of it.

Parameters

None.

Requires

valo-drag-element 

@mixin valo-drag-element() { ... }

Description

Outputs the selectors and styles for generic dragging ghost elements.

Parameters

None.

valo-drag-element-style 

@mixin valo-drag-element-style($background-color: $v-app-background-color) { ... }

Description

Outputs the styles for generic dragging ghost elements.

Parameters

Name Description Type Default value
$background-color

the background color for the ghost element

 Color $v-app-background-color

Requires

Used by

form

mixins

valo-form 

@mixin valo-form($primary-stylename: v-form) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-form

formlayout

mixins

valo-formlayout 

@mixin valo-formlayout($primary-stylename: v-formlayout, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the FormLayout component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-formlayout
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-formlayout-margin 

@mixin valo-formlayout-margin($margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value) { ... }

Description

Outputs the styles for form layout margin.

Parameters

Name Description Type Default value
$margin — List $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value

Used by

valo-formlayout-spacing 

@mixin valo-formlayout-spacing($vertical: $v-layout-spacing-vertical) { ... }

Description

Outputs the styles for form layout spacing.

Parameters

Name Description Type Default value
$vertical

The vertical spacing between the rows in the form layout

 Size $v-layout-spacing-vertical

valo-formlayout-light-style 

@mixin valo-formlayout-light-style($row-height: $v-unit-size) { ... }

Description

Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied.

Parameters

Name Description Type Default value
$row-height

The height of an individual form layout row

 Size $v-unit-size

Requires

grid

mixins

valo-grid 

@mixin valo-grid($primary-stylename: v-grid) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-grid

Requires

gridlayout

mixins

valo-gridlayout-global 

@mixin valo-gridlayout-global($primary-stylename: v-gridlayout) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-gridlayout

Requires

valo-gridlayout 

@mixin valo-gridlayout($primary-stylename: v-gridlayout) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-gridlayout

Requires

label

mixins

valo-label 

@mixin valo-label($primary-stylename: v-label, $include-additional-styles) { ... }

Description

Outputs the selectors and styles for the Label component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-label
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

variables

v-font-weight--header 

$v-font-weight--header: $v-font-weight - 100 !default;

Description

The font weight for headers.

Used by

v-line-height--header 

$v-line-height--header: 1.1 !default;

Description

The line height for headers.

Used by

v-font-family--header 

$v-font-family--header: null !default;

Description

The font family for headers.

v-font-color--colored 

$v-font-color--colored: $v-selection-color !default;

Description

The font color for colored style labels.

Used by

v-font-size--h1 

$v-font-size--h1: 2.4em !default;

Description

The font size for 1st level headers.

Used by

v-font-size--h2 

$v-font-size--h2: 1.6em !default;

Description

The font size for 2nd level headers.

Used by

v-font-size--h3 

$v-font-size--h3: 1.2em !default;

Description

The font size for 3rd level headers.

Used by

v-font-family--h1 

$v-font-family--h1: $v-font-family--header !default;

Description

The font family for 1st level headers.

Used by

v-font-family--h2 

$v-font-family--h2: $v-font-family--header !default;

Description

The font family for 2nd level headers.

Used by

v-font-family--h3 

$v-font-family--h3: $v-font-family--header !default;

Description

The font family for 3rd level headers.

Used by

v-letter-spacing--h1 

$v-letter-spacing--h1: -0.03em !default;

Description

The letter spacing for 1st level headers.

Used by

v-letter-spacing--h2 

$v-letter-spacing--h2: -0.02em !default;

Description

The letter spacing for 2nd level headers.

Used by

v-letter-spacing--h3 

$v-letter-spacing--h3: 0 !default;

Description

The letter spacing for 3rd level headers.

Used by

v-letter-spacing--h4 

$v-letter-spacing--h4: 0 !default;

Description

The letter spacing for 4th level headers.

Used by

link

mixins

valo-link 

@mixin valo-link($primary-stylename: v-link, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-link
$include-additional-styles — Bool —

Requires

valo-link-style 

@mixin valo-link-style() { ... }

Parameters

None.

Requires

variables

v-link-font-color 

$v-link-font-color: $v-focus-color !default;

Used by

v-link-text-decoration 

$v-link-text-decoration: underline !default;

Used by

v-link-cursor 

$v-link-cursor: pointer !default;

Used by

loginform

mixins

valo-loginform 

@mixin valo-loginform($primary-stylename: v-loginform) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-loginform

menubar

mixins

valo-menubar 

@mixin valo-menubar($primary-stylename: v-menubar, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-menubar
$include-additional-styles — Bool —

Requires

valo-menubar-style 

@mixin valo-menubar-style($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-menubar
$background-color — Color $v-background-color
$unit-size — Size $v-unit-size

Requires

Used by

valo-menubar-menuitem-style 

@mixin valo-menubar-menuitem-style() { ... }

Parameters

None.

Requires

valo-menubar-popup-style 

@mixin valo-menubar-popup-style($primary-stylename: v-menubar) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-menubar

Requires

Used by

valo-menubar-submenu-indicator-style 

@mixin valo-menubar-submenu-indicator-style() { ... }

Parameters

None.

Requires

valo-menubar-checked-icon-style 

@mixin valo-menubar-checked-icon-style() { ... }

Parameters

None.

valo-menubar-menuitem-checked-style 

@mixin valo-menubar-menuitem-checked-style($background-color) { ... }

Parameters

Name Description Type Default value
$background-color — List —

Requires

Used by

valo-menubar-menuitem-checked 

@mixin valo-menubar-menuitem-checked($primary-stylename: v-menubar) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-menubar

Requires

valo-menubar-borderless-style 

@mixin valo-menubar-borderless-style($primary-stylename: v-menubar) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-menubar

Requires

nativebutton

mixins

valo-nativebutton 

@mixin valo-nativebutton($primary-stylename: v-nativebutton) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-nativebutton

nativeselect

mixins

valo-nativeselect 

@mixin valo-nativeselect($primary-stylename: v-select) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-select

Requires

valo-nativeselect-select-style 

@mixin valo-nativeselect-select-style() { ... }

Parameters

None.

Requires

notification

mixins

valo-notification 

@mixin valo-notification($primary-stylename: v-Notification, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-Notification
$include-additional-styles — Bool —

Requires

valo-notification-closable-style 

@mixin valo-notification-closable-style() { ... }

Parameters

None.

Requires

valo-notification-style 

@mixin valo-notification-style() { ... }

Parameters

None.

Requires

valo-notification-bar-style 

@mixin valo-notification-bar-style() { ... }

Parameters

None.

Requires

valo-notification-dark-style 

@mixin valo-notification-dark-style() { ... }

Parameters

None.

Requires

valo-notification-system-style 

@mixin valo-notification-system-style() { ... }

Parameters

None.

valo-notification-tray-style 

@mixin valo-notification-tray-style() { ... }

Parameters

None.

valo-notification-warning-style 

@mixin valo-notification-warning-style() { ... }

Parameters

None.

valo-notification-error-style 

@mixin valo-notification-error-style() { ... }

Parameters

None.

Requires

valo-notification-small-style 

@mixin valo-notification-small-style() { ... }

Parameters

None.

Requires

variables

v-notification-title-color 

$v-notification-title-color: $v-focus-color !default;

Used by

optiongroup

mixins

valo-optiongroup 

@mixin valo-optiongroup($primary-stylename: v-select-optiongroup, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-select-optiongroup
$include-additional-styles — Bool —

Requires

valo-radiobutton-style 

@mixin valo-radiobutton-style($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { ... }

Parameters

Name Description Type Default value
$background-color — Color $v-background-color
$unit-size — Size $v-unit-size
$selection-color — Color $v-selection-color

Requires

Used by

valo-optiongroup-style 

@mixin valo-optiongroup-style($unit-size: $v-unit-size, $font-size: $v-font-size) { ... }

Parameters

Name Description Type Default value
$unit-size — Size $v-unit-size
$font-size — Size $v-font-size

Requires

Used by

valo-optiongroup-horizontal 

@mixin valo-optiongroup-horizontal() { ... }

Parameters

None.

orderedlayout

mixins

valo-orderedlayout-global 

@mixin valo-orderedlayout-global() { ... }

Parameters

None.

valo-orderedlayout 

@mixin valo-orderedlayout($include-additional-styles) { ... }

Parameters

Name Description Type Default value
$include-additional-styles — Bool —

Requires

valo-horizontallayout-wrapping-style 

@mixin valo-horizontallayout-wrapping-style() { ... }

Parameters

None.

Requires

overlay

mixins

valo-overlay-style 

@mixin valo-overlay-style($background-color: $v-overlay-background-color, $shadow: $v-overlay-shadow, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) { ... }

Description

Outputs styles for overlay elements

Parameters

Name Description Type Default value
$background-color

the background color for the overlay

 Color $v-overlay-background-color
$shadow

the shadow for the overlay

 List $v-overlay-shadow
$animate-in

the animation used when the overlay is made visible

 List $v-overlay-animate-in
$animate-out

the animation used when the overlay is removed

 List $v-overlay-animate-out

Requires

Used by

valo-selection-overlay-style 

@mixin valo-selection-overlay-style($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) { ... }

Description

Outputs styles for selection overlay elements.

Parameters

Name Description Type Default value
$background-color

the background color for the overlay

 Color $v-selection-overlay-background-color
$animate-in

the animation used when the selection overlay is made visible

 List $v-overlay-animate-in
$animate-out

the animation used when the selection overlay is removed

 List $v-overlay-animate-out

Requires

Used by

valo-selection-item-style 

@mixin valo-selection-item-style() { ... }

Description

Outputs the styles for selection item elements (i.e. individual items in context menus and drop down menus).

Parameters

None.

Requires

Used by

valo-selection-item-selected-style 

@mixin valo-selection-item-selected-style() { ... }

Description

Outputs the styles for selected selection item elements.

Parameters

None.

Requires

Used by

variables

v-overlay-background-color 

$v-overlay-background-color: if(is-dark-color($v-background-color), darken($v-background-color, 3%), lighten($v-background-color, 2%)) !default;

Description

The background color for overlay elements.

Type

Color

Used by

v-overlay-border-radius 

$v-overlay-border-radius: $v-border-radius !default;

Description

The corner radius for overlay elements.

Type

Size (px)

Used by

v-overlay-border-width 

$v-overlay-border-width: first-number($v-border) !default;

Description

The border width for overlay elements.

Type

Size (px)

v-overlay-animate-in 

$v-overlay-animate-in: valo-overlay-animate-in 120ms !default;

Description

The animation which is used when overlay elements are made visible.

Type

List

Used by

v-overlay-animate-out 

$v-overlay-animate-out: valo-animate-out-fade 120ms !default;

Description

The animation which is used when overlay elements are removed.

Type

List

v-overlay-padding 

$v-overlay-padding: round($v-unit-size/9) !default;

Description

The padding on each size of overlay elements.

Type

Size

v-overlay-padding-vertical 

$v-overlay-padding-vertical: $v-overlay-padding !default;

Description

The padding on the top and bottom edges of overlay elements.

Type

Size

Used by

v-overlay-padding-horizontal 

$v-overlay-padding-horizontal: $v-overlay-padding !default;

Description

The padding on the left and right edges of overlay elements.

Type

Size

Used by

v-overlay-shadow 

$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;

Description

The shadow used for overlay elements.

Type

List

Used by

v-selection-overlay-background-color 

$v-selection-overlay-background-color: $v-overlay-background-color !default;

Description

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

v-selection-overlay-padding 

$v-selection-overlay-padding: $v-overlay-padding !default;

Description

The padding on each size of selection overlay elements.

Type

Size

v-selection-overlay-padding-vertical 

$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;

Description

The padding on the top and bottom edges of selection overlay elements.

Type

Size

Used by

v-selection-overlay-padding-horizontal 

$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;

Description

The padding on the left and right edges of selection overlay elements.

Type

Size

Used by

v-selection-item-border-radius 

$v-selection-item-border-radius: $v-border-radius - 1px !default;

Description

The corner radius for selection overlay elements.

Type

Size (px)

Used by

v-selection-item-height 

$v-selection-item-height: ceil($v-unit-size/1.4) !default;

Description

The height of individual selection overlay list items.

Type

Size (px)

Used by

v-selection-item-padding-horizontal 

$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;

Description

The horizontal padding for individual selection overlay list items.

Type

Size

Used by

v-selection-item-font-weight 

$v-selection-item-font-weight: max(400, $v-font-weight);

Description

The font weight for individual selection overlay list items.

Type

Number, Identifier

Used by

v-selection-item-selection-color 

$v-selection-item-selection-color: $v-selection-color !default;

Description

The font color for individual selection overlay list items.

Type

Color

Used by

panel

mixins

valo-panel 

@mixin valo-panel($primary-stylename: v-panel, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-panel
$include-additional-styles — Bool —

Requires

valo-panel-style 

@mixin valo-panel-style($primary-stylename: v-panel, $background-color: $v-panel-background-color, $shadow: $v-shadow, $border: $v-panel-border, $border-radius: $v-border-radius) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-panel
$background-color — Color $v-panel-background-color
$shadow — List $v-shadow
$border — List $v-panel-border
$border-radius — String $v-border-radius

Requires

valo-panel-caption-style 

@mixin valo-panel-caption-style($background-color: $v-background-color, $bevel: $v-bevel, $gradient: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, $border: $v-panel-border) { ... }

Parameters

Name Description Type Default value
$background-color — Color $v-background-color
$bevel — List $v-bevel
$gradient — List valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4
$border — List $v-panel-border

Requires

Used by

valo-panel-well-style 

@mixin valo-panel-well-style($shadow: false) { ... }

Parameters

Name Description Type Default value
$shadow — List false

Requires

valo-panel-borderless-style 

@mixin valo-panel-borderless-style() { ... }

Parameters

None.

Requires

valo-panel-scroll-divider-style 

@mixin valo-panel-scroll-divider-style($border-width: max(1px, first-number($v-panel-border))) { ... }

Parameters

Name Description Type Default value
$border-width — Size max(1px, first-number($v-panel-border))

Requires

valo-panel-adjust-content-margins 

@mixin valo-panel-adjust-content-margins() { ... }

Parameters

None.

Requires

variables

v-panel-background-color 

$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;

Used by

v-panel-border 

$v-panel-border: $v-border !default;

Used by

popupview

mixins

valo-popupview 

@mixin valo-popupview($primary-stylename: v-popupview) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-popupview

Requires

progressbar

mixins

valo-progressbar 

@mixin valo-progressbar($primary-stylename: v-progressbar) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-progressbar

Requires

Used by

valo-progressbar-track-style 

@mixin valo-progressbar-track-style($background-color: $v-background-color) { ... }

Parameters

Name Description Type Default value
$background-color — Color $v-background-color

Requires

Used by

valo-progressbar-indicator-style 

@mixin valo-progressbar-indicator-style($background-color: $v-selection-color, $border: $v-border) { ... }

Parameters

Name Description Type Default value
$background-color — Color $v-selection-color
$border — String $v-border

Requires

Used by

variables

v-progressbar-border-radius 

$v-progressbar-border-radius: $v-border-radius !default;

Used by

richtextarea

mixins

valo-richtextarea 

@mixin valo-richtextarea($primary-stylename: v-richtextarea) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-richtextarea

Requires

variables

valo-richtextarea-use-font-awesome 

$valo-richtextarea-use-font-awesome: true !default;

Used by

slider

mixins

valo-slider 

@mixin valo-slider($primary-stylename: v-slider, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider
$include-additional-styles — Bool —

Requires

valo-slider-track-style 

@mixin valo-slider-track-style($primary-stylename: v-slider, $background-color: $v-background-color) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider
$background-color — Color $v-background-color

Requires

valo-slider-indicator-style 

@mixin valo-slider-indicator-style($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider
$background-color — Color $v-selection-color
$border — List $v-border

Requires

valo-slider-no-indicator 

@mixin valo-slider-no-indicator($primary-stylename: v-slider) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider

valo-slider-handle-style 

@mixin valo-slider-handle-style($primary-stylename: v-slider, $background-color: $v-background-color) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider
$background-color — Color $v-background-color

Requires

valo-slider-ticks 

@mixin valo-slider-ticks($primary-stylename: v-slider, $tick-count: 5) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-slider
$tick-count — Number 5

Requires

variables

v-slider-track-size 

$v-slider-track-size: round($v-unit-size/8) !default;

Used by

v-slider-track-border-radius 

$v-slider-track-border-radius: null !default;

Used by

v-slider-handle-width 

$v-slider-handle-width: round($v-unit-size/1.8) !default;

Used by

v-slider-handle-height 

$v-slider-handle-height: round($v-unit-size/1.8) !default;

Used by

v-slider-handle-border-radius 

$v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;

Used by

_valo-slider-base-margin-vertical 

$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2);

Used by

_valo-slider-base-margin-horizontal 

$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);

Used by

splitpanel

mixins

valo-splitpanel 

@mixin valo-splitpanel($primary-stylename: v-splitpanel, $include-additional-styles) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-splitpanel
$include-additional-styles — Bool —

Requires

valo-splitpanel-global 

@mixin valo-splitpanel-global($primary-stylename: v-splitpanel) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-splitpanel

valo-splitpanel-style 

@mixin valo-splitpanel-style($primary-stylename: v-splitpanel, $splitter-size: max(1px, first-number($v-border), $splitter-active-size: round($v-unit-size/3), $splitter-handle-visible: false, $splitter-shadow: none, $orientation: vertical horizontal) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-splitpanel
$splitter-size — Size max(1px, first-number($v-border)
$splitter-active-size — List round($v-unit-size/3)
$splitter-handle-visible — Bool false
$splitter-shadow — List none
$orientation — List vertical horizontal

Requires

Used by

valo-splitpanel-splitter-handle-style 

@mixin valo-splitpanel-splitter-handle-style($horizontal: false, $include-common: true) { ... }

Parameters

Name Description Type Default value
$horizontal — Bool false
$include-common — Bool true

Requires

Used by

tabsheet

mixins

valo-tabsheet-global 

@mixin valo-tabsheet-global($primary-stylename: v-tabsheet) { ... }

Description

Outputs the global selectors and properties for the TabSheet component - styles which are considered mandatory for the component to work properly.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-tabsheet

valo-tabsheet 

@mixin valo-tabsheet($primary-stylename: v-tabsheet, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the TabSheet component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-tabsheet
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-tabsheet-tabcontainer-style 

@mixin valo-tabsheet-tabcontainer-style() { ... }

Description

Outputs the styles for the tabcontainer element of a tabsheet.

Parameters

None.

Requires

Used by

valo-tabsheet-tabitemcell-style 

@mixin valo-tabsheet-tabitemcell-style() { ... }

Description

Outputs the styles for the tabitemcell element of a tabsheet.

Parameters

None.

Requires

Used by

valo-tabsheet-scroller-style 

@mixin valo-tabsheet-scroller-style() { ... }

Description

Outputs the styles for the tab scroller element of a tabsheet.

Parameters

None.

Requires

Used by

valo-tabsheet-scroller-prev-icon-style 

@mixin valo-tabsheet-scroller-prev-icon-style() { ... }

Description

Outputs the font icon styles for the previous button element of a tabsheet scroller.

Parameters

None.

valo-tabsheet-scroller-next-icon-style 

@mixin valo-tabsheet-scroller-next-icon-style() { ... }

Description

Outputs the font icon styles for the next button element of a tabsheet scroller.

Parameters

None.

valo-tabsheet-framed-style 

@mixin valo-tabsheet-framed-style($primary-stylename: v-tabsheet, $frame-inactive-tabs: true) - Should inactive tabs be framed as well (the active tab is always framed with this style, $outer-frame: true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content, $tab-spacing: $v-unit-size/10) { ... }

Description

Outputs the styles for the framed tabsheet style.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet
$frame-inactive-tabs — Bool true) - Should inactive tabs be framed as well (the active tab is always framed with this style
$outer-frame

. If false, works like a "borderless" style.

 Bool true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content
$tab-spacing

The spacing between tabs

 Size $v-unit-size/10

Requires

valo-tabsheet-align-tabs-style 

@mixin valo-tabsheet-align-tabs-style($primary-stylename: v-tabsheet, $align: center) { ... }

Description

Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet
$align

The alignment of the tabs inside the tabbar. Possible values: left, right, center.

 String center

Used by

valo-tabsheet-equal-width-tabs-style 

@mixin valo-tabsheet-equal-width-tabs-style($primary-stylename: v-tabsheet, $flex: false) { ... }

Description

Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet
$flex

Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes.

 Bool false

Used by

valo-tabsheet-icons-on-top-style 

@mixin valo-tabsheet-icons-on-top-style($primary-stylename: v-tabsheet) { ... }

Description

Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet

Requires

valo-tabsheet-only-selected-closable-style 

@mixin valo-tabsheet-only-selected-closable-style($primary-stylename: v-tabsheet) { ... }

Description

Outputs the styles for a tabsheet where only the selected tab has the close button visible. Note that the other tabs can still be closed programmatically.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet

valo-tabsheet-padded-tabbar-style 

@mixin valo-tabsheet-padded-tabbar-style($primary-stylename: v-tabsheet) { ... }

Description

Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs inside it from their surrounding container.

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-tabsheet

Requires

variables

v-tabsheet-content-animation-enabled 

$v-tabsheet-content-animation-enabled: $v-animations-enabled !default;

Description

Should the tabsheet content changes be animated.

Used by

text field

mixins

valo-textfield-inline-icon 

@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size) - The font size which the resulting style will support (needed for font icons, $image-icon-size: 16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field) { ... }

Description

Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector).

Parameters

Name Description Type Default value
$primary-stylename

The primary style name for the selectors

 String v-textfield
$stylenames

The additional style names which will define the inline-icon style

 String, List inline-icon
$input-selector

Additional selector for a nested input element which should be targeted

 String null
$unit-size

The unit size which the resulting style will support

 Size $v-unit-size
$font-size — Size $v-font-size) - The font size which the resulting style will support (needed for font icons
$image-icon-size — Size 16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field

Requires

Used by

textarea

mixins

valo-textarea 

@mixin valo-textarea($primary-stylename: v-textarea, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the TextArea component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-textarea
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

textfield

mixins

valo-textarea-style 

@mixin valo-textarea-style($unit-size: $v-unit-size, $padding: null, $font-color: null, $font-weight: max(400, $v-font-weight), $font-size: null, $background-color: $v-textfield-background-color, $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $states: normal focus disabled) { ... }

Description

Outputs the styles for a text area variant.

Parameters

Name Description Type Default value
$unit-size

The sizing of the text area, which corresponds its height

 Size $v-unit-size
$padding

The padding of the text area. Computed from other parameters by default.

 Size, List null
$font-color

The font color of the text area. Computed from the $background-color by default.

 Color null
$font-weight

The font weight of the text area

 Number max(400, $v-font-weight)
$font-size

The font size of the text area. Inherited from the parent by default.

 Size null
$background-color

The background color of the text area

 Color $v-textfield-background-color
$border

The border of the text area

 List $v-textfield-border
$border-radius

The border-radius of the text area

 Size $v-textfield-border-radius
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$states

The text area states for which to output corresponding styles

 List normal focus disabled

Requires

Used by

valo-textfield 

@mixin valo-textfield($primary-stylename: v-textfield, $include-additional-styles) { ... }

Description

Outputs the selectors and properties for the TextField component.

Parameters

Name Description Type Default value
$primary-stylename

the primary style name for the selectors

 String v-textfield
$include-additional-styles

should the mixin output all the different style variations of the component

 Bool —

Requires

valo-textfield-style 

@mixin valo-textfield-style($unit-size: $v-unit-size, $padding: null, $font-color: null, $font-weight: max(400, $v-font-weight), $font-size: null, $background-color: $v-textfield-background-color, $border: $v-textfield-border, $border-radius: $v-textfield-border-radius, $bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $states: normal focus disabled) { ... }

Description

Outputs the styles for a text field variant.

Parameters

Name Description Type Default value
$unit-size

The sizing of the text field, which corresponds its height

 Size $v-unit-size
$padding

The padding of the text field. Computed from other parameters by default.

 Size, List null
$font-color

The font color of the text field. Computed from the $background-color by default.

 Color null
$font-weight

The font weight of the text field

 Number max(400, $v-font-weight)
$font-size

The font size of the text field. Inherited from the parent by default.

 Size null
$background-color

The background color of the text field

 Color $v-textfield-background-color
$border

The border of the text field

 List $v-textfield-border
$border-radius

The border-radius of the text field

 Size $v-textfield-border-radius
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$states

The text field states for which to output corresponding styles

 List normal focus disabled

Requires

Used by

valo-textfield-prompt-style 

@mixin valo-textfield-prompt-style($background-color: $v-textfield-background-color) { ... }

Description

Outputs the styles for a text field input prompt.

Parameters

Name Description Type Default value
$background-color

The background color of the text field

 Color $v-textfield-background-color

Requires

Used by

valo-textfield-focus-style 

@mixin valo-textfield-focus-style($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) { ... }

Description

Outputs the styles for a text field focus state.

Parameters

Name Description Type Default value
$bevel

Box-shadow value according to $v-bevel documentation

 List $v-textfield-bevel
$shadow

Box-shadow value according to $v-shadow documentation

 List $v-textfield-shadow
$background-color

The background color of the text field

 Color $v-textfield-background-color
$gradient

Valo specific gradient value. See the documentation for $v-gradient.

 List null

Requires

Used by

valo-textfield-readonly-style 

@mixin valo-textfield-readonly-style() { ... }

Description

Outputs the styles for a read-only text field.

Parameters

None.

Requires

valo-textfield-borderless-style 

@mixin valo-textfield-borderless-style($background-color: transparent) { ... }

Description

Outputs the styles for a borderless style text field.

Parameters

Name Description Type Default value
$background-color

The background color of the text field

 Color transparent

Requires

valo-textfield-error-style 

@mixin valo-textfield-error-style() { ... }

Description

Outputs the styles for a text field error state.

Parameters

None.

Requires

variables

v-textfield-background-color 

$v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;

Description

The background color for text fields.

Used by

v-textfield-background-color--readonly 

$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));

Description

The background color for read-only text fields.

Used by

v-textfield-bevel 

$v-textfield-bevel: if($v-bevel and ($v-bevel != none), inset 0 1px 0 v-shade, $v-bevel) !default;

Description

The bevel style for text fields. See the documentation for $v-bevel.

v-textfield-shadow 

$v-textfield-shadow: 0 1px 0 (v-tint 2) !default;

Description

The shadow style for text fields. See the documentation for $v-shadow.

v-textfield-font-weight 

$v-textfield-font-weight: 400 !default;

Description

The font-weight for text fields.

v-textfield-border 

$v-textfield-border: $v-border !default;

Description

The border style for text fields. See the documentation for $v-border.

Used by

v-textfield-border-radius 

$v-textfield-border-radius: $v-border-radius !default;

Description

The border-radius for text fields. See the documentation for $v-border-radius;

Used by

v-textfield-disabled-opacity 

$v-textfield-disabled-opacity: $v-disabled-opacity !default;

Description

The opacity for disabled text fields.

Used by

tooltip

mixins

valo-tooltip 

@mixin valo-tooltip() { ... }

Description

Outputs the selectors and styles for tooltip elements.

Parameters

None.

Requires

valo-tooltip-style 

@mixin valo-tooltip-style() { ... }

Description

Outputs the main styles for tooltip elements.

Parameters

None.

Requires

variables

v-tooltip-background-color 

$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;

Description

The backgound color for tooltips.

Type

Color

Used by

v-tooltip-font-color 

$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;

Description

The font color for tooltips.

Type

Color

Used by

v-tooltip-font-size 

$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;

Description

The font size for tooltips.

Type

Size

Used by

v-tooltip-box-shadow 

$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;

Description

The CSS box shadow for tooltips.

Type

List

Used by

v-tooltip-padding-vertical 

$v-tooltip-padding-vertical: round($v-unit-size/8) !default;

Description

The vertical padding for tooltips.

Type

Size

Used by

v-tooltip-padding-horizontal 

$v-tooltip-padding-horizontal: round($v-unit-size/4) !default;

Description

The horizontal padding for tooltips.

Type

Size

Used by

v-tooltip-error-message-background-color 

$v-tooltip-error-message-background-color: #fff !default;

Description

The backgound color for error tooltips.

Type

Color

Used by

v-tooltip-error-message-font-color 

$v-tooltip-error-message-font-color: $v-error-indicator-color !default;

Description

The font color for error tooltips.

Type

Color

Used by

v-tooltip-border-radius 

$v-tooltip-border-radius: $v-border-radius - 1px !default;

Description

The corner radius for tooltips.

Type

Size

Used by

tree

mixins

valo-tree 

@mixin valo-tree($primary-stylename: v-tree) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-tree

Requires

valo-tree-collapsed-icon-style 

@mixin valo-tree-collapsed-icon-style() { ... }

Parameters

None.

valo-tree-expanded-icon-style 

@mixin valo-tree-expanded-icon-style($force: false) { ... }

Parameters

Name Description Type Default value
$force — Bool false

Requires

Used by

variables

v-tree-row-height 

$v-tree-row-height: round($v-unit-size/1.3) !default;

Used by

v-tree-animations-enabled 

$v-tree-animations-enabled: true !default;

Used by

v-tree-expand-animation-enabled 

$v-tree-expand-animation-enabled: false !default;

Used by

treetable

mixins

valo-treetable 

@mixin valo-treetable($primary-stylename: v-treetable) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-treetable

Requires

twin-column-select

mixins

valo-twincolselect 

@mixin valo-twincolselect($primary-stylename: v-select-twincol) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-select-twincol

Requires

valo-twincolselect-add-icon-style 

@mixin valo-twincolselect-add-icon-style() { ... }

Parameters

None.

valo-twincolselect-remove-icon-style 

@mixin valo-twincolselect-remove-icon-style() { ... }

Parameters

None.

upload

mixins

valo-upload 

@mixin valo-upload($primary-stylename: v-upload) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-upload

Requires

util

mixins

opacity 

@mixin opacity($value, $important: false) { ... }

Description

Cross-browser opacity.

Parameters

Name Description Type Default value
$value

opacity value from 0 to 1

 Number —
$important

should the property value be declared with !important

 Bool false

Used by

box-shadow 

@mixin box-shadow($shadows) { ... }

Description

Cross-browser box-shadow. -webkit-box-shadow is still needed for Android 2.3 and 3.0, as well as iOS 5

Parameters

Name Description Type Default value
$shadows

Any valid CSS box-shadow value

 List —

Used by

valo-vertical-align-guide 

@mixin valo-vertical-align-guide($to-align: (), $align: middle, $pseudo-element: after) { ... }

Description

Ouput selectors and properties to vertically center elements inside their parent.

Parameters

Name Description Type Default value
$to-align

The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements.

 String ()
$align

The vertical-align value, e.g. top, middle, bottom

 String middle
$pseudo-element

Which pseudo element to use for the vertical align guide

 String after

Used by

valo-tappable 

@mixin valo-tappable() { ... }

Description

Indicate that an element is clickable/tappable

Parameters

None.

width-range 

@mixin width-range($min: 0, $max: null) { ... }

Description

Output Vaadin Responsive extension specific width-range declaration.

Parameters

Name Description Type Default value
$min

The lower bound for the width-range

 Size 0
$max

The upper bound for the width-range

 Size null

Example

.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;
  }
}

Used by

height-range 

@mixin height-range($min: 0, $max: null) { ... }

Description

Output Vaadin Responsive extension specific height-range declaration.

Parameters

Name Description Type Default value
$min

The lower bound for the height-range

 Size 0
$max

The upper bound for the height-range

 Size null

Example

.v-csslayout {
  color: red;
  
  // Make the text color blue when the layout height is between 100px-300px
  @include height-range(100px, 300px) {
    color: blue;
  }
}

valo-menu

mixins

valo-menu 

@mixin valo-menu($bg: $valo-menu-background-color) { ... }

Parameters

Name Description Type Default value
$bg — String $valo-menu-background-color

Requires

valo-menu-responsive 

@mixin valo-menu-responsive() { ... }

Parameters

None.

Requires

valo-menu-style 

@mixin valo-menu-style($bg: $valo-menu-background-color) { ... }

Parameters

Name Description Type Default value
$bg — String $valo-menu-background-color

Requires

Used by

valo-menu-title-style 

@mixin valo-menu-title-style() { ... }

Parameters

None.

Requires

valo-menu-subtitle-style 

@mixin valo-menu-subtitle-style($bg: $valo-menu-background-color) { ... }

Parameters

Name Description Type Default value
$bg — Color $valo-menu-background-color

Requires

Used by

valo-menu-item-style 

@mixin valo-menu-item-style($bg: $valo-menu-background-color) { ... }

Parameters

Name Description Type Default value
$bg — Color $valo-menu-background-color

Requires

Used by

valo-badge-style 

@mixin valo-badge-style($states: inactive active, $background-color: null, $active-color: $v-selection-color) { ... }

Parameters

Name Description Type Default value
$states — String inactive active
$background-color — Color null
$active-color — Color $v-selection-color

Requires

Used by

valo-menu-large-icons-style 

@mixin valo-menu-large-icons-style($bg: darken($valo-menu-background-color, 4%)) { ... }

Parameters

Name Description Type Default value
$bg — Color darken($valo-menu-background-color, 4%)

Requires

Used by

valo-menu-logo-style 

@mixin valo-menu-logo-style() { ... }

Parameters

None.

Requires

variables

valo-menu-background-color 

$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default;

Used by

window

mixins

valo-window 

@mixin valo-window($primary-stylename: v-window) { ... }

Parameters

Name Description Type Default value
$primary-stylename — String v-window

Requires

valo-window-close-icon-style 

@mixin valo-window-close-icon-style() { ... }

Parameters

None.

valo-window-maximize-icon-style 

@mixin valo-window-maximize-icon-style() { ... }

Parameters

None.

valo-window-restore-icon-style 

@mixin valo-window-restore-icon-style() { ... }

Parameters

None.

variables

v-window-background-color 

$v-window-background-color: $v-panel-background-color !default;

Used by

v-window-border-radius 

$v-window-border-radius: $v-border-radius !default;

Used by

v-window-shadow 

$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;

Used by

v-window-animate-in 

$v-window-animate-in: valo-animate-in-fade 140ms !default;

Used by

v-window-animate-out 

$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default;

Used by

v-window-modality-curtain-background-color 

$v-window-modality-curtain-background-color: #222 !default;

Used by

layout

variables

v-unit-size 

$v-unit-size: round(2.3 * $v-font-size) !default;

Description

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.

Type

Size (px)

Used by

v-scaling-factor--tiny 

$v-scaling-factor--tiny: 0.75 !default;

Description

Scaling factor for tiny sizes. Must be a unitless number.

Type

Number

v-scaling-factor--small 

$v-scaling-factor--small: 0.85 !default;

Description

Scaling factor for small sizes. Must be a unitless number.

Type

Number

v-scaling-factor--large 

$v-scaling-factor--large: 1.2 !default;

Description

Scaling factor for large sizes. Must be a unitless number.

Type

Number

v-scaling-factor--huge 

$v-scaling-factor--huge: 1.6 !default;

Description

Scaling factor for huge sizes. Must be a unitless number.

Type

Number

v-unit-size--tiny 

$v-unit-size--tiny: round($v-unit-size * $v-scaling-factor--tiny) !default;

Description

Unit size for tiny components. Must be a pixel value.

Type

Size (px)

Used by

v-unit-size--small 

$v-unit-size--small: round($v-unit-size * $v-scaling-factor--small) !default;

Description

Unit size for small components. Must be a pixel value.

Type

Size (px)

Used by

v-unit-size--large 

$v-unit-size--large: round($v-unit-size * $v-scaling-factor--large) !default;

Description

Unit size for large components. Must be a pixel value.

Type

Size (px)

Used by

v-unit-size--huge 

$v-unit-size--huge: round($v-unit-size * $v-scaling-factor--huge) !default;

Description

Unit size for huge components. Must be a pixel value.

Type

Size (px)

Used by

v-layout-margin-top 

$v-layout-margin-top: round($v-unit-size) !default;

Description

The top margin size for all built-in layout components, when the margin is enabled with setMargin(). Can be any valid CSS size.

Type

Size

Used by

v-layout-margin-right 

$v-layout-margin-right: round($v-unit-size) !default;

Description

The right margin size for all built-in layout components, when the margin is enabled with setMargin(). Can be any valid CSS size.

Type

Size

Used by

v-layout-margin-bottom 

$v-layout-margin-bottom: round($v-unit-size) !default;

Description

The bottom margin size for all built-in layout components, when the margin is enabled with setMargin(). Can be any valid CSS size.

Type

Size

Used by

v-layout-margin-left 

$v-layout-margin-left: round($v-unit-size) !default;

Description

The left margin size for all built-in layout components, when the margin is enabled with setMargin(). Can be any valid CSS size.

Type

Size

Used by

v-layout-spacing-vertical 

$v-layout-spacing-vertical: round($v-unit-size/3) !default;

Description

Amount of vertical space when spacing is enabled for a layout with setSpacing(). Can be any valid CSS size.

Type

Size

Used by

v-layout-spacing-horizontal 

$v-layout-spacing-horizontal: round($v-unit-size/3) !default;

Description

Amount of horizontal space when spacing is enabled for a layout with setSpacing(). Can be any valid CSS size.

Type

Size

Used by

v-default-field-width 

$v-default-field-width: $v-unit-size * 5 !default;

Description

Default width of certain field components, unless overridden with setWidth().

Type

Size (px)

Used by

typography

variables

v-line-height 

$v-line-height: 1.55 !default;

Description

Base line height for all widgets. It must be given a unitless number.

Type

Number

Used by

v-font-size 

$v-font-size: 16px !default;

Description

Base font size for the theme. The font size defines the overall sizing of UI components by default. Must be specified in pixels.

Type

Size (px)

Used by

v-font-weight 

$v-font-weight: 300 !default;

Description

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.

Type

Number

Used by

v-font-family 

$v-font-family: "Open Sans", sans-serif !default;

Description

Base font family for the theme. Can be any valid CSS font stack.

Type

List

Used by

v-caption-font-size 

$v-caption-font-size: round($v-font-size * 0.9) !default;

Description

Font size for generic component captions. Can be any valid CSS font-size. A round pixel value is recommended.

Type

Number

Used by

v-caption-font-weight 

$v-caption-font-weight: max(400, $v-font-weight) !default;

Description

Font weight for generic component captions. Can be any valid CSS font-weight.

Type

Number, Identifier

Used by

v-font-size--tiny 

$v-font-size--tiny: ceil($v-font-size * $v-scaling-factor--tiny) !default;

Description

Tiny font size.

Type

Size (px)

Used by

v-font-size--small 

$v-font-size--small: ceil($v-font-size * $v-scaling-factor--small) !default;

Description

Small font size.

Type

Size (px)

Used by

v-font-size--large 

$v-font-size--large: ceil($v-font-size * $v-scaling-factor--large) !default;

Description

Large font size.

Type

Size (px)

Used by

v-font-size--huge 

$v-font-size--huge: ceil($v-font-size * $v-scaling-factor--huge) !default;

Description

Huge font size.

Type

Size (px)

Used by