@include valo-global;
-// The main theme mixin
+/**
+ * The main Valo theme mixin, which outputs all the selectors and properties to produce
+ * the variation specified by global variables. Should not be included multiple times
+ * per compilation.
+ */
@mixin valo {
@include valo-common;
@include valo-components;
+/**
+ * Outputs the selectors and properties for the Accordion component.
+ *
+ * @param {string} $primary-stylename (v-accordion) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @group accordion
+ */
@mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) {
.#{$primary-stylename} {
@include valo-accordion-style;
border-radius: 0;
@include box-shadow(none);
- > .#{$primary-stylename}-item {
+ > .#{$primary-stylename}-item,
+ > .#{$primary-stylename}-item > div > .v-caption,
+ > .#{$primary-stylename}-item > .#{$primary-stylename}-item-content {
border-radius: 0;
}
}
}
-
+/**
+ * Outputs the styles for the Accordion component root element.
+ * @group accordion
+ */
@mixin valo-accordion-style {
@include valo-panel-style;
$grad-style: valo-gradient-style($v-gradient);
}
+/**
+ * Outputs the styles for an individual Accordion item root element.
+ * @group accordion
+ */
@mixin valo-accordion-item-style {
+ $_br: $v-border-radius - first-number($v-border);
position: relative;
- overflow: hidden;
@if $v-border-radius > 0 {
- $_br: $v-border-radius - first-number($v-border);
-
&:first-child {
- border-radius: $_br $_br 0 0;
-
- .v-caption {
- border-radius: inherit;
- }
+ border-top-left-radius: $_br;
+ border-top-right-radius: $_br;
}
&:last-child {
- border-radius: 0 0 $_br $_br;
+ border-bottom-left-radius: $_br;
+ border-bottom-right-radius: $_br;
- .v-caption {
- border-radius: 0;
+ [class*="item-content"] {
+ border-radius: inherit;
}
}
}
- &:last-child:not([class*="item-open"]) .v-caption {
+ &[class*="item-open"]:last-child > div > .v-caption {
+ border-radius: 0;
+ }
+
+ &:not([class*="item-open"]):last-child > div > .v-caption {
border-bottom: none;
+ margin-bottom: 0;
}
&[class*="item-open"] + [class*="item"] {
- border-top: valo-border($color: $v-panel-background-color, $strength: 0.7);
+ border-top: valo-border($border: $v-panel-border, $color: $v-panel-background-color, $strength: 0.7);
}
}
-
+/**
+ * Outputs the styles for an individual Accordion item's caption element.
+ *
+ * @param {color} $background-color (null) - the background color of the caption. Other styles (such as font and border colors, gradients and bevels) adapt to the background color automatically.
+ * @group accordion
+ */
@mixin valo-accordion-item-caption-style ($background-color: null) {
- .v-caption {
+ border-radius: inherit;
+
+ > .v-caption {
@include valo-panel-caption-style($background-color: $background-color or $v-background-color);
display: block;
@if $background-color == null {
background: transparent;
}
border-bottom-color: first-color(valo-border($color: $v-panel-background-color));
+ border-radius: inherit;
cursor: pointer;
+ position: relative;
&:hover:before,
&:active:before {
right: 0;
bottom: 0;
left: 0;
+ border-radius: inherit;
}
@if $v-hover-styles-enabled {
}
+/**
+ * Outputs the styles for an individual Accordion item's content element.
+ * @group accordion
+ */
@mixin valo-accordion-item-content-style {
- position: absolute;
- width: 100%;
- bottom: 0;
- right: 0;
@include box-shadow(valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2));
background-color: $v-panel-background-color;
@include box-sizing(border-box);
@import "valo-menu";
+/**
+ * Outputs all the selectors and properties for all individual components to produce
+ * the variation specified by global variables.
+ *
+ * This mixin can be called multiple times for a theme, if you for instance wish to
+ * generate alternative color versions of the components.
+ *
+ * @example scss
+ * .my-theme {
+ * // The default color variation
+ * @include valo;
+ *
+ * .sidebar {
+ * // For the sidebar context, we generate a darker variant of all components
+ * $v-background-color: #696969;
+ * background-color: $v-background-color;
+ * @include valo-components;
+ * }
+ * }
+ */
@mixin valo-components {
@if v-is-included(absolutelayout) {
@include valo-absolutelayout;
}
- @if v-is-included(orderedlayout) {
+ @if v-is-included(orderedlayout) or v-is-included(verticallayout) or v-is-included(horizontallayout) {
@include valo-orderedlayout;
}
+/**
+ * Outputs the selectors and properties for the Button component.
+ *
+ * @param {string} $primary-stylename (v-button) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group button
+ */
@mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) {
.#{$primary-stylename} {
@include valo-button-static-style;
}
-
-
-
+/**
+ * Outputs the static styles (i.e. styles which don't differ between button variants) for a button.
+ *
+ * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding static styles
+ * @param {bool} $vertical-centering (true) - Should the output contain a vertical centering guide
+ *
+ * @group button
+ */
@mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) {
@if contains($states, normal) {
position: relative;
}
-
-
-
+/**
+ * Outputs the styles for a button variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds the its height
+ * @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default.
+ * @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button
+ * @param {size} $font-size (null) - The font size of the button. Inherited from the parent by default.
+ * @param {string} $cursor (null) - The mouse cursor of the button
+ * @param {color} $background-color ($v-background-color) - The background color of the button
+ * @param {list} $border ($v-border) - The border of the button
+ * @param {size} $border-radius ($v-border-radius) - The border-radius of the button
+ * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding styles
+ *
+ * @group button
+ */
@mixin valo-button-style (
$unit-size : $v-unit-size,
- $padding : null, // Computed by default
+ $padding : null,
- $font-color : null, // Computed by default
+ $font-color : null,
$font-weight : $v-font-weight + 100,
$font-size : null, // Inherited by default
$cursor : null,
}
@if $bevel and type-of($_font-color) == color and type-of($background-color) == color {
- text-shadow: valo-text-shadow($_font-color, $background-color, $bevel);
+ text-shadow: valo-text-shadow($_font-color, $background-color);
}
@if $bevel == none and $shadow == none {
}
-
-
+/**
+ * Outputs the hover state styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ */
@mixin valo-button-hover-style ($background-color: $v-background-color) {
$bg: darken($background-color, 25%);
@if is-dark-color($background-color) {
}
-
-@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) {
+/**
+ * Outputs the focus state styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ * @param {list} $border-fallback (inherit) - If the luminance of $v-focus-color is less than the $background-color, the focus color is also used for the border color. If not, then $border-fallback is used for the focus element's border value.
+ */
+@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) {
$focus-color: $v-focus-color;
@if color-luminance($focus-color) + 50 < color-luminance($background-color) {
border: $border-fallback or valo-border($color: $background-color);
}
- @include valo-focus-style($include-box-shadow: $include-box-shadow);
+ @include valo-focus-style;
}
-
+/**
+ * Outputs the active state (pressed/down) styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ */
@mixin valo-button-active-style ($background-color: $v-background-color) {
$bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color));
background-color: rgba($bg, .2);
}
-
-
-
+/**
+ * Outputs styles to allow vertical centering of the icon and the caption, independent of the
+ * height of the button.
+ *
+ * @group button
+ */
@mixin valo-button-vertical-centering {
- // Vertical centering of icon and caption, independent of the height of the button
@include valo-vertical-align-guide($to-align: div, $pseudo-element: before);
// WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust
}
-
-
+/**
+ * Output styles for a borderless button. Expects that the targeted element
+ * already has both valo-button-static-style and valo-button-style included.
+ *
+ * @param {color} $font-color (inherit) - The font color of the borderless button
+ *
+ * @group button
+ */
@mixin valo-button-borderless-style ($font-color: inherit) {
border: none;
@include box-shadow(none);
}
-@mixin valo-button-quiet-style ($primary-stylename: v-button) {
+/**
+ * Output styles for a "quiet" button (a button whose outline is only shown
+ * once the user hovers over the button caption). Expects that the targeted
+ * element already has both valo-button-static-style and valo-button-style
+ * included.
+ *
+ * @group button
+ */
+@mixin valo-button-quiet-style {
visibility: hidden;
&:focus,
visibility: visible;
}
- .#{$primary-stylename}-wrap {
+ [class*="wrap"] {
visibility: visible;
}
- .#{$primary-stylename}-caption {
+ [class*="caption"] {
// For IE8
display: inline-block;
}
}
-@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) {
- .#{$primary-stylename}-wrap {
+/**
+ * Output styles to align a button's icon on the right side of its caption.
+ *
+ * @group button
+ */
+@mixin valo-button-icon-align-right-style {
+ [class*="wrap"] {
display: inline-block;
}
}
-@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) {
+/**
+ * Output styles to align a button's icon on top of its caption.
+ *
+ * @group button
+ */
+@mixin valo-button-icon-align-top-style {
height: auto;
padding-top: ceil($v-unit-size/9);
padding-bottom: ceil($v-unit-size/9);
- .#{$primary-stylename}-wrap {
+ [class*="wrap"] {
display: inline-block;
}
+/**
+ * A list of colors for custom event colors. Can be an empty list of you don't
+ * need any custom event colors.
+ *
+ * @example javascript
+ * // Java code
+ * // 'event' is an instance of EditableCalendarEvent
+ * event.setStyleName("color1"); // 1st color in the list
+ * event.setStyleName("color2"); // 2nd color in the list
+ * // etc.
+ *
+ * @group calendar
+ */
$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
+/**
+ * Outputs the global selectors and properties for the Calendar component - styles which are
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors
+ *
+ * @group calendar
+ */
@mixin valo-calendar-global ($primary-stylename: v-calendar) {
.#{$primary-stylename}-month-day-scrollable {
overflow-y: scroll;
}
-
-
-
-
-
-
+/**
+ * Outputs the selectors and properties for the Calendar component.
+ *
+ * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors
+ *
+ * @group calendar
+ */
@mixin valo-calendar ($primary-stylename: v-calendar) {
}
+/**
+ * Outputs the styles for the previous button.
+ *
+ * @group calendar
+ */
@mixin valo-calendar-prev-style {
&:before {
@include valo-tabsheet-scroller-prev-icon-style;
}
}
+
+/**
+ * Outputs the styles for the next button.
+ *
+ * @group calendar
+ */
@mixin valo-calendar-next-style {
&:before {
@include valo-tabsheet-scroller-next-icon-style;
+/**
+ * Outputs the selectors and properties for the CheckBox component.
+ *
+ * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group checkbox
+ */
@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {
.#{$primary-stylename} {
}
+/**
+ * Outputs the font icon to indicate the checked state.
+ *
+ * @group checkbox
+ */
@mixin valo-checkbox-icon-style {
content: "\f00c";
font-family: FontAwesome;
}
+/**
+ * Outputs the styles for a checkbox variant.
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the checkbox
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.
+ * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon
+ *
+ * @group checkbox
+ */
@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
// So that we can use the same 'unit-size' for all component sizes
margin: 0;
&:focus ~ label:before {
- @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false);
+ @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
@include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true));
}
+/**
+ * Outputs the global selectors and properties for the ColorPicker component - styles which are
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
+ *
+ * @group colorpicker
+ */
@mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) {
$valo-colorpicker-pathPrefix: null;
@if $v-relative-paths == false {
}
-
-
-
-
+/**
+ * Outputs the selectors and properties for the ColorPicker component.
+ *
+ * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
+ *
+ * @group colorpicker
+ */
@mixin valo-colorpicker ($primary-stylename: v-colorpicker) {
.#{$primary-stylename}-popup.v-window {
.#{$primary-stylename}-suggestmenu {
@include valo-selection-overlay-style($animate-in: false, $animate-out: false);
- box-sizing: border-box;
+ @include box-sizing(border-box);
position: relative;
z-index: 1;
+
+ &[style*="height"] {
+ @include box-sizing(content-box);
+ }
}
margin-top: ceil($v-unit-size/8) !important;
pointer-events: none;
@if $v-animations-enabled {
- @include animation(valo-anim-slide-in-down 200ms 80ms backwards);
+ @include animation(valo-animate-in-slide-down 200ms 80ms backwards);
}
> * {
color: valo-font-color($v-background-color);
+ &:after {
+ // Extend click target when hovering over (popup width might change between pages)
+ content: "";
+ position: absolute;
+ display: block;
+ border-radius: 50%;
+ }
+
&:hover {
@include opacity(1);
background: rgba($v-background-color, .5);
+
+ &:after {
+ top: -10px;
+ bottom: -10px;
+ left: -20px;
+ right: -20px;
+ }
}
span {
width: auto;
table {
- border-collapse: collapse;
+ border-collapse: collapse;
border-spacing: 0;
+ margin: 0 auto;
}
td {
}
td.#{$primary-stylename}-month {
- width: round($v-unit-size * 3.5);
+ width: round($v-unit-size * 4);
@include valo-datefield-calendarpanel-month-style;
}
}
@mixin valo-datefield-calendarpanel-day-focused-style {
- @include valo-focus-style($include-box-shadow: true);
+ @include valo-focus-style;
position: relative; // Show above other cells
.v-ie8 & {
background: transparent;
border: none;
color: inherit;
+
+ &:focus {
+ box-shadow: none;
+ }
}
> .v-textfield-prompt,
h3, .#{$primary-stylename}-h3 {
line-height: $v-line-height--header;
font-weight: $v-font-weight--header;
- color: valo-header-color($v-app-background-color);
+ color: valo-font-color($v-app-background-color, 0.92);
}
h1, .#{$primary-stylename}-h1 {
line-height: $v-line-height--header;
font-weight: $v-font-weight + 200;
font-size: $v-font-size--small;
- color: valo-header-color($v-app-background-color, $contrast: 0.12);
+ color: valo-font-color($v-app-background-color, 0.74);
text-transform: uppercase;
letter-spacing: $v-letter-spacing--h4;
margin-top: 2.4em;
border-radius: 0;
padding: first-number($v-border);
@include box-shadow(none);
+ text-shadow: none;
background: transparent;
color: inherit;
margin-right: max(1px, first-number($v-border));
border-radius: $v-border-radius;
color: $v-selection-color;
- text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px);
padding: 0 round($v-unit-size/3);
@if $v-animations-enabled {
&:focus {
outline: none;
- @include valo-focus-style($include-box-shadow: true);
+ @include valo-focus-style;
}
}
@if $v-animations-enabled {
.#{$primary-stylename}-animate-in {
- @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms);
+ @include animation(valo-animate-in-fade 180ms);
- &.v-position-left {
- @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms);
+ &.v-position-top {
+ @include animation(valo-animate-in-slide-down 400ms);
}
- &.v-position-right {
- @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms);
+ &.v-position-bottom {
+ @include animation(valo-animate-in-slide-up 400ms);
}
}
.#{$primary-stylename}-animate-out {
- @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms);
+ @include animation(valo-animate-out-fade 150ms);
- &.v-position-left,
- &.v-position-right {
- @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms);
+ &.v-position-top,
+ &.v-position-bottom {
+ @include animation(valo-animate-out-slide-down-fade 200ms);
}
}
}
height: round($v-unit-size/1.5);
line-height: round($v-unit-size/1.5) - 1px;
cursor: pointer;
- color: #000;
+ $color: if(is-dark-color($v-overlay-background-color), #fff, #000);
+ color: $color;
@include opacity(.5);
text-align: center;
- border: first-number($v-border) solid #000;
- border-color: rgba(0,0,0,.3);
+ border: first-number($v-border) solid $color;
+ border-color: rgba($color, .3);
border-radius: 50%;
@include transition(opacity 200ms);
}
}
&:active:after {
- background-color: #000;
- color: #fff;
+ $color: if(is-dark-color($v-overlay-background-color), #000, #fff);
+ $bg: if(is-dark-color($v-overlay-background-color), #fff, #000);
+ background-color: $bg;
+ color: $color;
@include opacity(.3);
@include transition(none 200ms);
}
@mixin valo-notification-style {
- background: valo-overlay-background-color();
+ background: $v-overlay-background-color;
@include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15));
padding: round($v-unit-size/2) round($v-unit-size/1.7);
@if $v-animations-enabled {
&[class*="animate-in"] {
- @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
+ @include animation(valo-animate-in-slide-down 300ms);
}
&[class*="animate-out"] {
- @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
+ @include animation(valo-animate-out-slide-up 200ms);
}
}
}
@if $v-animations-enabled {
&[class*="animate-in"] {
- @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
+ @include animation(valo-animate-in-slide-up 300ms);
}
&[class*="animate-out"] {
- @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
+ @include animation(valo-animate-out-slide-down 200ms);
}
}
}
-@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) {
+@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout) or contains($v-included-additional-styles, verticallayout) or contains($v-included-additional-styles, horizontallayout)) {
.v-margin-top {
padding-top: $v-layout-margin-top;
font-weight: $v-caption-font-weight;
font-size: $v-caption-font-size;
@include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient));
- text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel);
+ text-shadow: valo-text-shadow(valo-font-color($bg), $bg);
}
.#{$primary-stylename} {
@include valo-link-style;
}
-
+
.#{$primary-stylename}-popup {
- @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms));
+ @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-animate-out-fade 120ms));
.popupContent {
@include valo-panel-adjust-content-margins;
@if $v-tabsheet-content-animation-enabled {
.#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget {
- @include valo-anim-fade-in(300ms);
+ @include valo-animate-in-fade(300ms);
}
$spinner-size: round($v-unit-size/2);
.#{$primary-stylename}-deco {
@include valo-spinner($size: $spinner-size);
- height: 0 !important;
- border-style: none;
- display: block;
+ display: none;
position: absolute;
- z-index: -1;
+ z-index: 1;
bottom: 50%;
margin-bottom: round($v-unit-size/-2) - $spinner-size/2;
left: 50%;
margin-left: $spinner-size/-2;
- opacity: 0;
-
- .v-ie8 & {
- min-height: 0;
- }
}
.#{$primary-stylename}-loading .#{$primary-stylename}-deco {
- @include transition(opacity 200ms 200ms);
- opacity: 1;
- z-index: 1;
- height: $spinner-size !important;
- border-style: solid;
-
- .v-ie8 &,
- .v-ie9 & {
- border-style: none;
- }
-
- .v-ie8 & {
- min-height: 30px;
- }
+ display: block;
}
}
position: absolute;
height: 0;
// iOS panics with background color, creating black line artifacts
- border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5));
+ border-top: max(1px, first-number($v-border)) solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
bottom: 0;
left: 0;
right: 0;
&:hover {
background-color: darken($v-app-background-color, 3%);
- border-bottom-color: first-color(valo-border($strength: 0.5));
+ border-bottom-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
}
}
@if $frame-inactive-tabs {
.#{$primary-stylename}-tabitem .v-caption {
- border-color: first-color(valo-border($strength: 0.5));
+ border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
}
}
.#{$primary-stylename}-tabitem-selected .v-caption {
background: $v-panel-background-color;
- border-color: first-color(valo-border($strength: 0.5));
+ border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
border-bottom: none;
padding-bottom: first-number($v-border);
}
}
@if $outer-frame {
- border: valo-border($strength: 0.5);
+ border: valo-border($color: $v-app-background-color, $strength: 0.5);
border-top: none;
}
}
&.padded-tabbar {
> .#{$primary-stylename}-tabcontainer {
@if $outer-frame {
- border: valo-border($strength: 0.5);
+ border: valo-border($color: $v-app-background-color, $strength: 0.5);
border-bottom: none;
}
padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
cursor: pointer;
position: relative;
- text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
+ text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: 2px);
@include transition(background-color 300ms, color 60ms);
$diff: color-luminance($bg) - color-luminance($v-selection-color);
color: $active-color;
}
}
-
+
&.selected {
background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));
$v-window-background-color: $v-panel-background-color !default;
$v-window-border-radius: $v-border-radius !default;
$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;
-$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default;
-$v-window-animate-out: valo-placeholder-animate-out 100ms, valo-anim-scale-down-fade-out 100ms !default;
+$v-window-animate-in: valo-animate-in-fade 140ms !default;
+$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default;
$v-window-modality-curtain-background-color: #222 !default;
100% { opacity: 1; }
}
- @include keyframes(valo-anim-scale-down-fade-out) {
+ @include keyframes(valo-animate-out-scale-down-fade) {
100% {
@include transform(scale(0.8));
opacity: 0;
left: 0;
@include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color);
@include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%));
- @include valo-anim-fade-in($duration: 400ms, $delay: 100ms);
+ @include valo-animate-in-fade($duration: 400ms, $delay: 100ms);
.v-op12 & {
// Opera 12 has a shitbreak with the fade-in (flickers)
+/**
+ * Outputs the context menu selectors and styles, which is used by Table and Tree for instance.
+ *
+ * @requires {mixin} valo-selection-item-style
+ * @requires {mixin} valo-selection-item-selected-style
+ */
@mixin valo-contextmenu {
.v-contextmenu {
@import "tooltip";
-// Include global styles only once
+/*
+ * A flag which is set to true when the global styles have been included in the compilation.
+ * Used to only include them once, if Valo is imported multiple times during the compilation
+ * (multiple theme support).
+ *
+ * @access private
+ * @type bool
+ */
$valo-global-included: false !default;
+/*
+ * Global Valo related styles, containing styles which are necessary for the application
+ * and widgets to work correctly.
+ *
+ * @access private
+ */
@mixin valo-global {
@if $valo-global-included == false {
}
-
$valo-shared-pathPrefix: null;
@if $v-relative-paths == false {
$valo-shared-pathPrefix: "../valo/shared/";
}
-
+/**
+ * Styles for the application root element. Outputs font, font color, background color and default
+ * cursor styles.
+ */
@mixin valo-app-style {
font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family;
color: $v-font-color;
}
}
-
+/**
+ * Common application styles, such as loading indicators, tooltip and context menu styles,
+ * caption and icon defaults, basic HTML element resets.
+ * Should only be included once (done automatically when including the main valo mixin).
+ *
+ * @requires {mixin} valo-app-style
+ */
@mixin valo-common {
//@if & != null {
-
+/**
+ * Generic component caption styles (captions which are generated by layouts).
+ */
@mixin valo-caption-style {
font-size: $v-caption-font-size;
font-weight: $v-caption-font-weight;
}
-
+/**
+ * Error indicator styles. The error indicator is by default a font character which you can style freely.
+ *
+ * @requires {mixin} valo-error-indicator-icon-style by default
+ */
@mixin valo-error-indicator-style {
color: $v-error-indicator-color;
font-weight: 600;
}
}
+/**
+ * The error indicator icon style. Should be a font character or a font icon.
+ */
@mixin valo-error-indicator-icon-style {
content: "!";
}
-
-// Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens.
-// NOTE: breaks percentage sized overlay elements
-// @mixin valo-natural-page-scrolling
-// @usage
-// // Call without any parent selector somewhere in your theme
-// =valo-natural-page-scrolling;
+/**
+ * Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY usually
+ * works better on touch devices. You loose the ability to control the scroll position from
+ * the server side when using this.
+ *
+ * @example scss
+ * // Include without any parent selector
+ * @include valo-natural-page-scrolling;
+ */
@mixin valo-natural-page-scrolling {
html {
-// TODO make fallbacks for IE 8 & 9
-
@-webkit-keyframes v-rotate-360 {
to {-webkit-transform: rotate(360deg);}
}
to {transform: rotate(360deg);}
}
-
-@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: null, $speed: 500ms) {
- $color: $color or $v-focus-color;
+/**
+ * Creates a spinner to be used as a loading indicator. On browsers which do not
+ * support CSS animations, an animated GIF image is used as a fallback.
+ *
+ * @param {size} $size (24px) - the diameter of the spinner, in pixels. Should be divisible by 2, increased by 1px if not
+ * @param {size} $thickness (2px) - the thickness or width of the border of the spinner
+ * @param {color} $color ($v-focus-color) - the color of the border of the spinner
+ * @param {time} $speed (500ms) - the speed of the spinning animation
+ */
+@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: $v-focus-color, $speed: 500ms) {
// Make size divisible by 2, so that the rotation won't jiggle
$size: round($size) + round($size) % 2;
height: $size !important;
-
+/**
+ * The color of the main loading indicator bar.
+ * @type color
+ */
$v-loading-indicator-color: $v-focus-color !default;
+
+/**
+ * The height of the main loading indicator bar.
+ *
+ * @type size
+ */
$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default;
+
+/**
+ * The height of the main loading indicator bar when the request to the server
+ * is taking longer than usual and the user is notified that they should wait.
+ *
+ * @type size
+ */
$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default;
}
-
+/*
+ * Outputs the necessary styles to create the main loading indicator bar.
+ *
+ * @access private
+ */
@mixin valo-loading-bar {
.v-loading-indicator {
-@function valo-overlay-background-color ($context: $v-background-color) {
- @if is-dark-color($context) {
- @return darken($context, 3%);
- }
- @return lighten($context, 2%);
-}
-
-
-$v-overlay-background-color: valo-overlay-background-color() !default;
+/**
+ * The background color for overlay elements.
+ *
+ * @type color
+ * @group overlay
+ */
+$v-overlay-background-color: if(is-dark-color($v-background-color), darken($v-background-color, 3%), lighten($v-background-color, 2%)) !default;
+
+/**
+ * The corner radius for overlay elements.
+ *
+ * @type size (px)
+ * @group overlay
+ */
$v-overlay-border-radius: $v-border-radius !default;
+
+/**
+ * The border width for overlay elements.
+ *
+ * @type size (px)
+ * @group overlay
+ */
$v-overlay-border-width: first-number($v-border) !default;
+/**
+ * The animation which is used when overlay elements are made visible.
+ *
+ * @type list
+ * @group overlay
+ */
$v-overlay-animate-in: valo-overlay-animate-in 120ms !default;
-$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default;
+/**
+ * The animation which is used when overlay elements are removed.
+ *
+ * @type list
+ * @group overlay
+ */
+$v-overlay-animate-out: valo-animate-out-fade 120ms !default;
+
+/**
+ * The padding on each size of overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-overlay-padding: round($v-unit-size/9) !default;
+
+/**
+ * The padding on the top and bottom edges of overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-overlay-padding-vertical: $v-overlay-padding !default;
+
+/**
+ * The padding on the left and right edges of overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-overlay-padding-horizontal: $v-overlay-padding !default;
+/**
+ * The shadow used for overlay elements.
+ *
+ * @type list
+ * @group overlay
+ */
$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
+/**
+ * The background color for selection overlays, i.e. overlays which present a
+ * list of options for the user to choose from, such as context menus and drop down
+ * menus.
+ *
+ * @type color
+ * @group overlay
+ */
$v-selection-overlay-background-color: $v-overlay-background-color !default;
+
+/**
+ * The padding on each size of selection overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-selection-overlay-padding: $v-overlay-padding !default;
+
+/**
+ * The padding on the top and bottom edges of selection overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default;
+
+/**
+ * The padding on the left and right edges of selection overlay elements.
+ *
+ * @type size
+ * @group overlay
+ */
$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default;
+/**
+ * The corner radius for selection overlay elements.
+ *
+ * @type size (px)
+ * @group overlay
+ */
$v-selection-item-border-radius: $v-border-radius - 1px !default;
+
+/**
+ * The height of individual selection overlay list items.
+ *
+ * @type size (px)
+ * @group overlay
+ */
$v-selection-item-height: ceil($v-unit-size/1.4) !default;
+
+/**
+ * The horizontal padding for individual selection overlay list items.
+ *
+ * @type size
+ * @group overlay
+ */
$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default;
+
+/**
+ * The font weight for individual selection overlay list items.
+ *
+ * @type number | identifier
+ * @group overlay
+ */
$v-selection-item-font-weight: max(400, $v-font-weight);
-$v-selection-item-selection-color: $v-selection-color !default;
+/**
+ * The font color for individual selection overlay list items.
+ *
+ * @type color
+ * @group overlay
+ */
+$v-selection-item-selection-color: $v-selection-color !default;
+/*
+ * Simulates CSS box-shadow using the extraneous shadow elements in the DOM.
+ *
+ * @access private
+ * @deprecated The .v-shadow element is deprecated since 7.3.0
+ * @group overlay
+ */
@mixin valo-ie8-shadow($shadow, $element: top) {
.#{$element} {
$shadow-offset-x: nth($shadow, 1);
-
+/**
+ * Outputs styles for overlay elements
+ *
+ * @group overlay
+ *
+ * @param {color} $background-color ($v-overlay-background-color) - the background color for the overlay
+ * @param {list} $shadow ($v-overlay-shadow) - the shadow for the overlay
+ * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the overlay is made visible
+ * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the overlay is removed
+ */
@mixin valo-overlay-style (
$background-color: $v-overlay-background-color,
$shadow: $v-overlay-shadow,
-
+/**
+ * Outputs styles for selection overlay elements.
+ *
+ * @group overlay
+ *
+ * @param {color} $background-color ($v-selection-overlay-background-color) - the background color for the overlay
+ * @param {list} $animate-in ($v-overlay-animate-in) - the animation used when the selection overlay is made visible
+ * @param {list} $animate-out ($v-overlay-animate-out) - the animation used when the selection overlay is removed
+ */
@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) {
@include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out);
padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
-
+/**
+ * Outputs the styles for selection item elements (i.e. individual items in context menus and drop down menus).
+ *
+ * @group overlay
+ */
@mixin valo-selection-item-style {
cursor: pointer;
line-height: $v-selection-item-height;
-
+/**
+ * Outputs the styles for selected selection item elements.
+ *
+ * @group overlay
+ */
@mixin valo-selection-item-selected-style {
@include valo-gradient($v-selection-item-selection-color);
$font-color: valo-font-color($v-selection-item-selection-color, 0.9);
-
+/**
+ * Outputs the selectors and styles for generic dragging ghost elements.
+ *
+ * @group drag-n-drop
+ */
@mixin valo-drag-element {
.v-drag-element {
@include valo-drag-element-style;
}
}
+/**
+ * Outputs the styles for generic dragging ghost elements.
+ *
+ * @group drag-n-drop
+ *
+ * @param {color} $background-color ($v-app-background-color) - the background color for the ghost element
+ */
@mixin valo-drag-element-style ($background-color: $v-app-background-color) {
background: $background-color;
color: valo-font-color($background-color);
-// @category Tooltip
-
+/**
+ * The backgound color for tooltips.
+ *
+ * @type color
+ * @group tooltip
+ */
$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default;
+
+/**
+ * The font color for tooltips.
+ *
+ * @type color
+ * @group tooltip
+ */
$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default;
+
+/**
+ * The font size for tooltips.
+ *
+ * @type size
+ * @group tooltip
+ */
$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default;
+
+/**
+ * The CSS box shadow for tooltips.
+ *
+ * @type list
+ * @group tooltip
+ */
$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default;
+
+/**
+ * The vertical padding for tooltips.
+ *
+ * @type size
+ * @group tooltip
+ */
$v-tooltip-padding-vertical: round($v-unit-size/8) !default;
+
+/**
+ * The horizontal padding for tooltips.
+ *
+ * @type size
+ * @group tooltip
+ */
$v-tooltip-padding-horizontal: round($v-unit-size/4) !default;
+
+/**
+ * The backgound color for error tooltips.
+ *
+ * @type color
+ * @group tooltip
+ */
$v-tooltip-error-message-background-color: #fff !default;
+
+/**
+ * The font color for error tooltips.
+ *
+ * @type color
+ * @group tooltip
+ */
$v-tooltip-error-message-font-color: $v-error-indicator-color !default;
+
+/**
+ * The corner radius for tooltips.
+ *
+ * @type size
+ * @group tooltip
+ */
$v-tooltip-border-radius: $v-border-radius - 1px !default;
+/**
+ * Outputs the selectors and styles for tooltip elements.
+ *
+ * @group tooltip
+ */
@mixin valo-tooltip {
.v-tooltip {
@include valo-tooltip-style;
}
}
-
+/**
+ * Outputs the main styles for tooltip elements.
+ *
+ * @group tooltip
+ */
@mixin valo-tooltip-style {
background-color: opacify($v-tooltip-background-color, 1); // For IE8
background-color: $v-tooltip-background-color;
// Color functions are used to calculate default font color
@import "../util/color";
-
-
-// A static text that is shown while the application JavaScript is loaded and started
-$v-app-loading-text : "" !default;
-
-
-// Base line height used for all widgets
-$v-line-height : 1.55 !default;
-
-
-$v-background-color : hsl(210, 0%, 98%) !default;
-$v-app-background-color : $v-background-color !default;
-
-$v-font-size : 16px !default; // Should be specified in pixels
-$v-font-weight : 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold')
-$v-font-color : valo-font-color($v-app-background-color) !default;
-$v-font-family : "Open Sans", sans-serif !default;
-
-$v-caption-font-size : round($v-font-size * 0.9) !default; // Should be a pixel value
-$v-caption-font-weight : max(400, $v-font-weight) !default;
-
-$v-unit-size : round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50)
-
-$v-layout-margin-top : round($v-unit-size) !default;
-$v-layout-margin-right : round($v-unit-size) !default;
-$v-layout-margin-bottom : round($v-unit-size) !default;
-$v-layout-margin-left : round($v-unit-size) !default;
-
-$v-layout-spacing-vertical : round($v-unit-size/3) !default;
-$v-layout-spacing-horizontal : round($v-unit-size/3) !default;
-
-$v-border : 1px solid (v-shade 0.7) !default; // Size must be specified in pixels
-$v-border-radius : 4px !default; // Must be specified in pixels
-
-$v-gradient : v-linear 8% !default;
-
-$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;
-$v-bevel-depth : 30% !default;
-
-$v-shadow : 0 2px 3px v-shade !default;
-$v-shadow-opacity : 5% !default;
-
-$v-focus-color : valo-focus-color() !default;
-$v-focus-style : 0 0 0 2px rgba($v-focus-color, .5) !default;
-
-$v-animations-enabled : true !default;
-$v-hover-styles-enabled : true !default;
-
-$v-disabled-opacity : 0.5 !default;
-
-$v-selection-color : $v-focus-color !default;
-
-$v-default-field-width : $v-unit-size * 5 !default;
-
-$v-error-indicator-color : #ed473b !default;
-$v-required-field-indicator-color : $v-error-indicator-color !default;
-$v-friendly-color : #2c9720 !default;
-
-
-$v-scaling-factor--tiny : 0.75 !default;
-$v-scaling-factor--small : 0.85 !default;
-$v-scaling-factor--large : 1.2 !default;
-$v-scaling-factor--huge : 1.6 !default;
-
-$v-unit-size--tiny : round($v-unit-size * $v-scaling-factor--tiny) !default;
-$v-unit-size--small : round($v-unit-size * $v-scaling-factor--small) !default;
-$v-unit-size--large : round($v-unit-size * $v-scaling-factor--large) !default;
-$v-unit-size--huge : round($v-unit-size * $v-scaling-factor--huge) !default;
-
-$v-font-size--tiny : ceil($v-font-size * $v-scaling-factor--tiny) !default;
-$v-font-size--small : ceil($v-font-size * $v-scaling-factor--small) !default;
-$v-font-size--large : ceil($v-font-size * $v-scaling-factor--large) !default;
-$v-font-size--huge : ceil($v-font-size * $v-scaling-factor--huge) !default;
-
-
-
-// List of components to include in the theme compilation. The list can be modified to make
-// the compiled theme smaller by removing unused components from the list.
-//
-// @usage
-// // Remove the Calendar component styles from the output
-// $v-included-components: remove($v-included-components, calendar);
+/**
+ * A static text that is shown under the loading spinned while the client-side
+ * engine is being loaded and started. The text must be given in quotes. The
+ * text can not be localized currently.
+ *
+ * @type string, quoted
+ */
+$v-app-loading-text: "" !default;
+
+/**
+ * Base line height for all widgets. It must be given a unitless number.
+ *
+ * @group typography
+ * @type number
+ */
+$v-line-height: 1.55 !default;
+
+/**
+ * Base font size for the theme. The font size defines the overall sizing of
+ * UI components by default. Must be specified in pixels.
+ *
+ * @group typography
+ * @type size (px)
+ */
+$v-font-size: 16px !default;
+
+/**
+ * Base font weight for plain text.
+ * Must be specified as a numeric value: 100, 200, 300 (light), 400 (regular),
+ * 500, 600, 700 (bold), 800 or 900.
+ *
+ * @group typography
+ * @type number
+ */
+$v-font-weight: 300 !default;
+
+/**
+ * Base font family for the theme. Can be any valid CSS font stack.
+ *
+ * @group typography
+ * @type list
+ */
+$v-font-family: "Open Sans", sans-serif !default;
+
+/**
+ * Font size for generic component captions. Can be any valid CSS font-size. A
+ * round pixel value is recommended.
+ *
+ * @group typography
+ * @type number
+ */
+$v-caption-font-size: round($v-font-size * 0.9) !default;
+
+/**
+ * Font weight for generic component captions. Can be any valid CSS font-weight.
+ *
+ * @group typography
+ * @type number | identifier
+ */
+$v-caption-font-weight: max(400, $v-font-weight) !default;
+
+/**
+ * Border specification for the components that have a border. The border width
+ * must be specified in pixels. For the border color, you can specify any CSS color
+ * or one of the v-tint, v-shade, and v-tone keywords.
+ *
+ * @group style
+ * @type list
+ */
+$v-border: 1px solid (v-shade 0.7) !default;
+
+/**
+ * Corner radius for components that have a border. The measure must be specified as a
+ * single pixel value (i.e. not as a list of values for each corner).
+ *
+ * @group style
+ * @type size (px)
+ */
+$v-border-radius: 4px !default;
+
+/**
+ * Color gradient style for components that have a gradient. The gradient style may use
+ * the following keywords: v-linear and v-linear-reverse. The opacity must be given
+ * as percentage between 0% and 100%.
+ *
+ * #### Gradient styles
+ *
+ * - __v-linear__ - The start of the gradient is a lighter shade of the base color and the end is a darker shade of the base color. A basic linear gradient.
+ * - __v-linear-reverse__ - Same as v-linear, but the color stops are reversed (darker at the start and lighter at the end)
+ *
+ * @group style
+ * @type list
+ */
+$v-gradient: v-linear 8% !default;
+
+/**
+ * Inset shadow style to define how some components are "raised" from the background.
+ * The value follows the syntax of CSS box-shadow, and should be a list of insets.
+ * For the bevel color, you can specify any CSS color or one of the v-tint, v-shade,
+ * and v-tone keywords.
+ *
+ * @group style
+ * @type list
+ */
+$v-bevel: inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;
+
+/**
+ * Specifies the "depth" of the bevel shadow, as applied to one of the color keywords for
+ * the bevel style. The actual amount of tint, shade, or tone is computed from the depth.
+ *
+ * @group style
+ * @type number (pct)
+ */
+$v-bevel-depth: 30% !default;
+
+/**
+ * Default shadow style for all components. As with $v-bevel, the value follows the syntax
+ * of CSS box-shadow, but without the inset. For the shadow color, you can specify any CSS
+ * color or one of the v-tint or v-shade keywords.
+ *
+ * @group style
+ * @type list
+ */
+$v-shadow: 0 2px 3px v-shade !default;
+
+/**
+ * Specifies the opacity of the shadow, as applied to one of the color keywords for the
+ * shadow style. The actual amount of tint or shade is computed from the depth.
+ *
+ * @group style
+ * @type number (pct)
+ */
+$v-shadow-opacity: 5% !default;
+
+/**
+ * The background color is the main control parameter for the Valo theme and
+ * it is used for computing all other colors in the theme. If the color is dark
+ * (has low luminance), * light foreground colors that give high contrast
+ * with the background are automatically used.
+ *
+ * Can be any valid CSS color.
+ *
+ * @group color
+ * @type color
+ */
+$v-background-color: hsl(210, 0%, 98%) !default;
+
+/**
+ * Background color of the UI's root element. You can specify the color in
+ * any way allowed in CSS. Used as the base for other default colors, such
+ * as panel and window content areas.
+ *
+ * Can be any valid CSS color.
+ *
+ * @group color
+ * @type color
+ */
+$v-app-background-color: $v-background-color !default;
+
+/**
+ * Base font color for the theme. Can be any valid CSS color.
+ *
+ * @group color
+ * @type color
+ */
+$v-font-color: valo-font-color($v-app-background-color) !default;
+
+/**
+ * Color for the field focus indicator. The valo-focus-color() function computes a
+ * high-contrast color from the context, which is usually the background color. The color
+ * can be any CSS color.
+ *
+ * @group color
+ * @type color
+ */
+$v-focus-color: valo-focus-color() !default;
+
+/**
+ * Box-shadow specification for the field focus indicator. The space-separated values
+ * are the horizontal shadow position in pixels, vertical shadow position in pixels,
+ * blur distance in pixels, spread distance in pixels, and the color. The color can be
+ * any CSS color. You can only specify the color, in which case defaults for the position
+ * are used. rgba() or hsla() can be used to enable transparency.
+ *
+ * @group style
+ * @type list | color
+ */
+$v-focus-style: 0 0 0 2px rgba($v-focus-color, .5) !default;
+
+/**
+ * Opacity of disabled components, from 0 to 1. Not all components have reduced opacity when disabled, such as Labels.
+ *
+ * @group style
+ * @type number
+ */
+$v-disabled-opacity: 0.5 !default;
+
+/**
+ * Color for indicating selection in selection components.
+ *
+ * @group color
+ * @type color
+ */
+$v-selection-color: $v-focus-color !default;
+
+/**
+ * Color of the component error indicator and other error indications, such as the
+ * error style notification.
+ *
+ * @group color
+ * @type color
+ */
+$v-error-indicator-color: #ed473b !default;
+
+/**
+ * Color of the required indicator in field components.
+ *
+ * @group color
+ * @type color
+ */
+$v-required-field-indicator-color: $v-error-indicator-color !default;
+
+/**
+ * Color used for success states and to indicate safe actions (i.e. actions that
+ * will not cause any data loss).
+ *
+ * @group color
+ * @type color
+ */
+$v-friendly-color: #2c9720 !default;
+
+/**
+ * Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition to CSS colors, the following keywords:
+ *
+ * - __v-tint__ - Lighter than the background color
+ * - __v-shade__ - Darker than the background color
+ * - __v-tone__ - Adaptive color specification: darker on light background and lighter on dark background. Not usable in $v-shadow.
+ *
+ *
+ * These keywords can be further adjusted by combining them with a strength multiplier, specified in parenthesis.
+ *
+ * Examples:
+ *
+ * (v-tint 2)
+ * (v-shade 0.6)
+ * (v-tone 1.1)
+ *
+ * @group color
+ */
+$v-color-keywords: v-tint, v-shade, v-tone;
+
+/**
+ * This is the base size for various layout measures. It is directly used in some
+ * measures, such as button height and layout margins, while other measures are
+ * derived from it. The value must be specified in pixels, with a suitable range
+ * of 18-50.
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-unit-size: round(2.3 * $v-font-size) !default;
+
+/**
+ * Scaling factor for tiny sizes. Must be a unitless number.
+ *
+ * @group layout
+ * @type number
+ */
+$v-scaling-factor--tiny: 0.75 !default;
+
+/**
+ * Scaling factor for small sizes. Must be a unitless number.
+ *
+ * @group layout
+ * @type number
+ */
+$v-scaling-factor--small: 0.85 !default;
+
+/**
+ * Scaling factor for large sizes. Must be a unitless number.
+ *
+ * @group layout
+ * @type number
+ */
+$v-scaling-factor--large: 1.2 !default;
+
+/**
+ * Scaling factor for huge sizes. Must be a unitless number.
+ *
+ * @group layout
+ * @type number
+ */
+$v-scaling-factor--huge: 1.6 !default;
+
+/**
+ * Unit size for tiny components. Must be a pixel value.
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-unit-size--tiny: round($v-unit-size * $v-scaling-factor--tiny) !default;
+
+/**
+ * Unit size for small components. Must be a pixel value.
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-unit-size--small: round($v-unit-size * $v-scaling-factor--small) !default;
+
+/**
+ * Unit size for large components. Must be a pixel value.
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-unit-size--large: round($v-unit-size * $v-scaling-factor--large) !default;
+
+/**
+ * Unit size for huge components. Must be a pixel value.
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-unit-size--huge: round($v-unit-size * $v-scaling-factor--huge) !default;
+
+/**
+ * The top margin size for all built-in layout components, when the margin is
+ * enabled with setMargin(). Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-margin-top: round($v-unit-size) !default;
+
+/**
+ * The right margin size for all built-in layout components, when the margin is
+ * enabled with setMargin(). Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-margin-right: round($v-unit-size) !default;
+
+/**
+ * The bottom margin size for all built-in layout components, when the margin is
+ * enabled with setMargin(). Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-margin-bottom: round($v-unit-size) !default;
+
+/**
+ * The left margin size for all built-in layout components, when the margin is
+ * enabled with setMargin(). Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-margin-left: round($v-unit-size) !default;
+
+/**
+ * Amount of vertical space when spacing is enabled for a layout with setSpacing().
+ * Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-spacing-vertical: round($v-unit-size/3) !default;
+
+/**
+ * Amount of horizontal space when spacing is enabled for a layout with setSpacing().
+ * Can be any valid CSS size.
+ *
+ * @group layout
+ * @type size
+ */
+$v-layout-spacing-horizontal: round($v-unit-size/3) !default;
+
+/**
+ * Tiny font size.
+ *
+ * @group typography
+ * @type size (px)
+ */
+$v-font-size--tiny: ceil($v-font-size * $v-scaling-factor--tiny) !default;
+
+/**
+ * Small font size.
+ *
+ * @group typography
+ * @type size (px)
+ */
+$v-font-size--small: ceil($v-font-size * $v-scaling-factor--small) !default;
+
+/**
+ * Large font size.
+ *
+ * @group typography
+ * @type size (px)
+ */
+$v-font-size--large: ceil($v-font-size * $v-scaling-factor--large) !default;
+
+/**
+ * Huge font size.
+ *
+ * @group typography
+ * @type size (px)
+ */
+$v-font-size--huge: ceil($v-font-size * $v-scaling-factor--huge) !default;
+
+/**
+ * Default width of certain field components, unless overridden with setWidth().
+ *
+ * @group layout
+ * @type size (px)
+ */
+$v-default-field-width: $v-unit-size * 5 !default;
+
+/**
+ * Specifies whether various CSS animations are used. Not all animations are disabled when
+ * set to false, such as the default loading indicator animations.
+ *
+ * @group optimization
+ * @type bool
+ */
+$v-animations-enabled: true !default;
+
+/**
+ * Specifies whether various :hover styles are used for indicating that mouse pointer
+ * hovers over an element.
+ *
+ * @group optimization
+ * @type bool
+ */
+$v-hover-styles-enabled: true !default;
+
+/**
+ * List of components to include in the theme compilation. The list can be modified to make
+ * the compiled theme smaller by removing unused components from the list.
+ *
+ * @group optimization
+ * @type list
+ *
+ * @example scss
+ * // Remove the Calendar component styles from the output (must be declared after importing Valo)
+ * $v-included-components: remove($v-included-components, calendar);
+ *
+ * @example scss
+ * // Only include the Label, Button and Vertical and Horizontal layouts in the compilation
+ * $v-included-components: label, button, orderedlayout;
+ */
$v-included-components:
absolutelayout,
accordion,
window,
valo-menu !default;
-
+/**
+ * List of components whose additional styles should be included in the compilation.
+ *
+ * @group optimization
+ * @type list
+ */
$v-included-additional-styles: $v-included-components !default;
-
-// Checks if a given component is included in the compilation. Used by the collection mixins that
-// include all components, like valo-components and valo-components.
-// @param $component-name {String} the name of the component to check
-// @param $is-included {list} (Optional) the list of components which is checked
-// @return {Boolean} true if the component is included in the compilation, false if not
+/**
+ * Checks if a given component is included in the compilation. Used by the collection mixins that
+ * include all components (i.e. valo-components).
+ *
+ * @requires $v-included-components
+ *
+ * @example scss
+ * @if v-is-included(button) {
+ * // The Button component is included in the compilation
+ * }
+ *
+ * @param {string} $component-name - the name of the component to check
+ * @param {list} $is-included ($v-included-components) - the list of components which is checked
+ *
+ * @return {bool} true if the component is included in the compilation, false if not
+ *
+ * @group optimization
+ */
@function v-is-included ($component-name, $is-included: $v-included-components) {
@return contains($is-included, $component-name);
}
-
-// A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file.
-// The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths).
-// This boolean is used to flag which compiler is used, so that paths are correct for different resources.
-// false == Ruby, true == Vaadin
+/**
+ * A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file.
+ * The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths).
+ * This boolean is used to flag which compiler is used, so that paths are correct for different resources.
+ * false == Ruby, true == Vaadin
+ *
+ * @type bool
+ */
$v-relative-paths: true !default;
-@if $v-animations-enabled {
+$valo-anim-keyframes-included: false !default;
- // 'Placeholder' animation names to trigger VOverlay animation-in and animation-out
- @include keyframes(valo-placeholder-animate-in) {
- 0% {
- visibility: visible;
- }
- }
+@if $v-animations-enabled and $valo-anim-keyframes-included == false{
- @include keyframes(valo-placeholder-animate-out) {
- 100% {
- visibility: visible;
- }
- }
-
- @include keyframes(valo-anim-fade-in) {
+ @include keyframes(valo-animate-in-fade) {
0% {
opacity: 0;
}
}
- @include keyframes(valo-anim-fade-out) {
+ @include keyframes(valo-animate-out-fade) {
100% {
opacity: 0;
}
}
- @include keyframes(valo-anim-slide-in-down) {
+ @include keyframes(valo-animate-in-slide-down) {
0% {
@include transform( translateY(-100%) );
}
}
- @include keyframes(valo-anim-slide-in-up) {
+ @include keyframes(valo-animate-in-slide-up) {
0% {
@include transform( translateY(100%) );
}
}
- @include keyframes(valo-anim-slide-in-left) {
+ @include keyframes(valo-animate-in-slide-left) {
0% {
@include transform( translateX(100%) );
}
}
- @include keyframes(valo-anim-slide-in-right) {
+ @include keyframes(valo-animate-in-slide-right) {
0% {
@include transform( translateX(-100%) );
}
}
- @include keyframes(valo-anim-slide-out-down) {
+ @include keyframes(valo-animate-out-slide-down) {
100% {
@include transform( translateY(100%) );
}
}
- @include keyframes(valo-anim-slide-out-up) {
+ @include keyframes(valo-animate-out-slide-up) {
100% {
@include transform( translateY(-100%) );
}
}
- @include keyframes(valo-anim-slide-out-left) {
+ @include keyframes(valo-animate-out-slide-left) {
100% {
@include transform( translateX(-100%) );
}
}
- @include keyframes(valo-anim-slide-out-right) {
+ @include keyframes(valo-animate-out-slide-right) {
100% {
@include transform( translateX(100%) );
}
}
}
- @include keyframes(valo-anim-drop-fade-out) {
+ @include keyframes(valo-animate-out-slide-down-fade) {
100% {
opacity: 0;
@include transform(translatey(30%));
}
}
-
+
+ $valo-anim-keyframes-included: true;
}
-
-@mixin valo-anim-fade-in ($duration: 120ms, $delay: null){
- @include animation(valo-anim-fade-in $duration $delay);
+/**
+ * Add animate-in-fade animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (180ms) - the duration of the fade
+ * @param {time} $delay (null) - the delay of the fade
+ */
+@mixin valo-animate-in-fade ($duration: 180ms, $delay: null){
+ @include animation(valo-animate-in-fade $duration $delay);
}
-@mixin valo-anim-fade-out ($duration: 120ms, $delay: null){
- @include animation(valo-anim-fade-out $duration $delay);
+/**
+ * Add animate-out-fade animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (180ms) - the duration of the fade
+ * @param {time} $delay (null) - the delay of the fade
+ */
+@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
+ @include animation(valo-animate-out-fade $duration $delay);
}
-@mixin valo-anim-slide-down ($duration: 260ms, $delay: null){
- @include animation(valo-anim-slide-down $duration $delay);
+/**
+ * Add animate-in-slide-down animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (400ms) - the duration of the slide
+ * @param {time} $delay (null) - the delay of the slide
+ */
+@mixin valo-animate-in-slide-down ($duration: 400ms, $delay: null){
+ @include animation(valo-animate-in-slide-down $duration $delay);
}
-@mixin valo-anim-slide-up ($duration: 260ms, $delay: null){
- @include animation(valo-anim-slide-up $duration $delay);
+/**
+ * Add animate-in-slide-up animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (400ms) - the duration of the slide
+ * @param {time} $delay (null) - the delay of the slide
+ */
+@mixin valo-animate-in-slide-up ($duration: 400ms, $delay: null){
+ @include animation(valo-animate-in-slide-up $duration $delay);
}
-@mixin valo-anim-slide-left ($duration: 260ms, $delay: null){
- @include animation(valo-anim-slide-left $duration $delay);
+/**
+ * Add animate-in-slide-left animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (400ms) - the duration of the slide
+ * @param {time} $delay (null) - the delay of the slide
+ */
+@mixin valo-animate-in-slide-left ($duration: 400ms, $delay: null){
+ @include animation(valo-animate-in-slide-left $duration $delay);
}
-@mixin valo-anim-slide-right ($duration: 260ms, $delay: null){
- @include animation(valo-anim-slide-right $duration $delay);
+/**
+ * Add animate-in-slide-right animation to the targeted elements.
+ *
+ * @group animation
+ *
+ * @param {time} $duration (400ms) - the duration of the slide
+ * @param {time} $delay (null) - the delay of the slide
+ */
+@mixin valo-animate-in-slide-right ($duration: 400ms, $delay: null){
+ @include animation(valo-animate-in-slide-right $duration $delay);
}
+/**
+ * Computes a CSS border property value for the given base color.
+ *
+ * @group style
+ *
+ * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
+ * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to
+ * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function.
+ * @param {number} $strength (1) - adjustment for the border contrast
+ *
+ * @return {list} The input $border value with any color keyword replaced with the corresponding actual color
+ */
@function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) {
@if type-of($border) != list {
@return $border;
$adjust-type: first-string($part);
$adjust-amount: first-number($part);
- $tint: blend-screen(white($v-bevel-depth/100%*$adjust-amount*$strength), $color);
- $shade: blend-linearburn(black($v-bevel-depth/100%*$adjust-amount*$strength), $color);
+ $tint: blend-screen(rgba(#fff, $v-bevel-depth/100%*$adjust-amount*$strength), $color);
+ $shade: blend-linearburn(rgba(#000, $v-bevel-depth/100%*$adjust-amount*$strength), $color);
@if $adjust-type == v-tone {
@if is-dark-color($color) {
}
-@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient) {
- border: valo-border($border, $color);
-
- // Adjust border-colors for gradient
+/**
+ * Similar to the valo-border function, but adjusts the top and bottom border colors to suit an element with a gradient background-color.
+ *
+ * @group style
+ *
+ * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
+ * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to
+ * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function.
+ * @param {number} $strength (1) - adjustment for the border contrast
+ * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient.
+ */
+@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $context: null, $strength: 1, $gradient: $v-gradient) {
+ border: valo-border($border, $color, $context, $strength);
+
+ // Adjust border colors for gradient
@if $gradient {
$color-stops: valo-gradient-color-stops($color, $gradient);
$top: first(first($color-stops));
$bottom: first(last($color-stops));
- border-top-color: first-color(valo-border($border, $top));
- border-bottom-color: first-color(valo-border($border, $bottom));
+ border-top-color: first-color(valo-border($border, $top, $context, $strength));
+ border-bottom-color: first-color(valo-border($border, $bottom, $context, $strength));
}
}
-
-
+/**
+ * Computes a CSS box-shadow value according to the specified style parameters.
+ *
+ * @group style
+ *
+ * @param {list} $bevel (null) - box-shadow value according to $v-bevel documentation
+ * @param {number} $bevel-depth ($v-bevel-depth) - percentage defining the depth/amount of the bevel effect. Affects the color keywords specified in the $bevel parameter.
+ * @param {list} $shadow (null) - box-shadow value according to $v-shadow documentation
+ * @param {number} $shadow-opacity ($v-shadow-opacity) - percentage defining the opacity/amount of the shadow effect. Affects the color keywords specified in the $shadow parameter.
+ * @param {color} $background-color ($v-background-color) - the base color to which the color keywords are applied to
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the color keywords specified in the $bevel parameter.
+ * @param {bool} $include-focus (false) - should the box-shadow value include $v-focus-style as well (only added if $v-focus-style is a)
+ *
+ * @return {list} CSS box-shadow value, combined from $bevel and $shadow with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color
+ */
@function valo-bevel-and-shadow ($bevel: null, $bevel-depth: $v-bevel-depth, $shadow: null, $shadow-opacity: $v-shadow-opacity, $background-color: $v-background-color, $gradient: null, $include-focus: false) {
$box-shadow: null;
}
-
-@function valo-replace-tones($list, $tint-color, $gradient: null, $shade-color: null) {
- $shade-color: $shade-color or $tint-color;
+/**
+ * Replaces color keywords in the given list.
+ *
+ * @group style
+ *
+ * @param {list} $list - any CSS list with possible color keywords
+ * @param {color} $color - The color to which color keywords are applied to
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the replacement colors to accommodate the gradient.
+ *
+ * @return {list} The input $list parameter with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color
+ */
+@function valo-replace-tones($list, $color, $gradient: null) {
$ret: ();
@each $part in $list {
$adjust-type: first-string($part);
$adjust-amount: first-number($part);
- $top-color: $tint-color;
- $bottom-color: $shade-color;
+ $top-color: $color;
+ $bottom-color: $color;
@if $gradient {
- $color-stops: valo-gradient-color-stops($tint-color, $gradient);
+ $color-stops: valo-gradient-color-stops($color, $gradient);
$top-color: first(first($color-stops));
$bottom-color: first(last($color-stops));
}
$tint: blend-lighten(adjust-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount, $saturation: -$v-bevel-depth/2), scale-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount));
$shade: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$v-bevel-depth/3*$adjust-amount), $saturation: -$v-bevel-depth/2), $v-bevel-depth/100%), $bottom-color);
- $color: null;
+ $new-color: null;
@if $adjust-type == v-tone {
- @if is-dark-color($tint-color) {
- $color: $tint;
+ @if is-dark-color($color) {
+ $new-color: $tint;
} @else {
- $color: $shade;
+ $new-color: $shade;
}
} @else if $adjust-type == v-tint {
- $color: $tint;
+ $new-color: $tint;
} @else if $adjust-type == v-shade {
- $color: $shade;
+ $new-color: $shade;
}
- $ret: join($ret, $color);
+ $ret: join($ret, $new-color);
} @else {
$ret: join($ret, $part);
}
+/**
+ * Replace color keywords in the given box-shadow parameter.
+ *
+ * @group style
+ *
+ * @param {list} $shadow - CSS box-shadow value, or any other CSS list which might contain either the v-tint or the v-shade color keywords.
+ *
+ * @return {list} the input $shadow parameter with all occurences of v-tint and v-shade color keywords replaced with the corresponding actual color
+ */
@function valo-replace-shadow ($shadow) {
$ret: ();
@each $part in $shadow {
}
-@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $bevel: $v-bevel, $offset: 1px) {
- @if type-of($bevel) != list or $v-bevel-depth == 0 {
- @return null;
- }
-
- $needle: null;
+/**
+ * Return a CSS text-shadow property value according to the specified style parameters.
+ *
+ * @group style
+ *
+ * @param {color} $font-color ($v-font-color) - the color of the text to which the text-shadow is added
+ * @param {color} $background-color ($v-background-color) - the color of the background where the text is to which the text-shadow is added
+ * @param {size} $offset (-1px) - the size of the text shadow vertical offset
+ * @param {number (pct)} $opacity ($v-shadow-opacity) - the percentage amount of shadow which is applied
+ */
+@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $offset: -1px, $opacity: $v-shadow-opacity) {
+ $color: null;
@if color-luminance($font-color) < color-luminance($background-color) {
- // Text darker than bg, light shadow. Look for tint
- $needle: v-tint;
+ $color: rgba(#fff, $opacity / 100%);
+ $offset: $offset * -1;
} @else {
- // Text lighter than bg, dark shadow. Look for shade
- $needle: v-shade;
- }
-
- // Use the first match from the bevel list
- @while list-of-lists($bevel) {
- $bevel: first($bevel);
- }
-
- // Remove possible 'inset'
- $bevel: remove($bevel, inset);
-
- $color: $background-color;
- @each $b in $bevel {
- $strength: 1;
- @if type-of($b) == list {
- $strength: first-number($b);
- }
- $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength));
+ $color: rgba(#000, $opacity / 100%);
}
- @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color;
+ @return 0 $offset 0 $color;
}
// From https://github.com/heygrady/scss-blend-modes
// MIT license
-// Remember to add a license notice to Vaadin
//--------------------------------
// Normal
// "Photoshop" blend modes
@import "blend-modes";
-// Returns the luminance of a color (0-255)
-// (perceived brightness, rather than absolute mathematical lightness value)
-//
-// "The luminance calculation is a weighted average of the color channels that approximates
-// how humans perceive brightness, while lightness is just an average of the largest and
-// smallest channels without regard to perception."
-//
-// Source for equation: http://en.wikipedia.org/wiki/Luminance_(relative)
+/**
+ * Returns the luminance of a color (0-255), i.e. the perceived brightness, rather than
+ * the absolute mathematical lightness value.
+ *
+ * "The luminance calculation is a weighted average of the color channels that approximates
+ * how humans perceive brightness, while lightness is just an average of the largest and
+ * smallest channels without regard to perception."
+ *
+ * Source: http://en.wikipedia.org/wiki/Luminance_(relative)
+ *
+ * @group color
+ *
+ * @param {color} $color - the color whose luminance value to get
+ *
+ * @return {number} the luminance value of the color, in the range of 0-255
+ *
+ */
@function color-luminance ($color) {
@return 0.2126 * red($color) + 0.7152 * green($color) + 0.0722 * blue($color);
}
-// Arbitrary luminance threshold after which colors should be adjusted either darker or lighter
+/**
+ * Luminance value after which colors will be considered light (i.e. not dark).
+ *
+ * @group color
+ */
$v-luminance-threshold: 150 !default;
-
-@function black($opacity: 1) {
- @return transparentize(#000, 1 - $opacity);
-}
-
-@function white($opacity: 1) {
- @return transparentize(#fff, 1 - $opacity);
-}
-
-
-
-@function is-dark-color($bg-color) {
- $luminance: color-luminance($bg-color);
- @if $luminance < $v-luminance-threshold or (saturation($bg-color) > 80% and ($luminance < $v-luminance-threshold + 20)) {
+/**
+ * Checks whether the color is considered dark or light, according to it's luminance and saturation.
+ *
+ * @group color
+ *
+ * @param {color} $color - the color to check
+ *
+ * @return {bool} true if the color is considered dark, false if considered light
+ */
+@function is-dark-color($color) {
+ $luminance: color-luminance($color);
+ @if $luminance < $v-luminance-threshold or (saturation($color) > 80% and ($luminance < $v-luminance-threshold + 20)) {
@return true;
} @else {
@return false;
}
+/**
+ * Get the darkest color (by luminance) from a list of colors.
+ *
+ * @group color
+ *
+ * @param {list} $colors - a list of CSS colors
+ *
+ * @return {color} darkest color (by luminance) from a list of colors
+ */
@function darkest-color($colors...) {
$darkest: first($colors);
@each $color in $colors {
@return $darkest;
}
-// Returns a text color with enough contrast for the given background color
-@function valo-font-color ($bg-color, $contrast: 0.8) {
- @if $bg-color {
+
+/**
+ * Returns a font color with enough contrast for the given background color.
+ *
+ * @group color
+ *
+ * @param {color} $bg-color - the background color for which to compute a suitable font color
+ * @param {number} $contrast (0.8) - the contrast of the font color compared to the background color
+ *
+ * @return {color} a suitable font color for the given background color
+ */
+@function valo-font-color ($bg-color, $contrast: 0.72) {
+ @if type-of($bg-color) == color {
@if is-dark-color($bg-color) {
@return scale-color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast));
} @else {
- @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast * 0.9), $saturation: max(-100%, -50% * $contrast));
+ @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast), $saturation: max(-100%, -50% * $contrast));
}
}
@return null;
}
-@function valo-header-color ($bg-color, $contrast: 1) {
- $font-color: valo-font-color($bg-color);
- @if is-dark-color($bg-color) {
- @return lighten($font-color, 30% * $contrast);
- } @else {
- @return darken($font-color, 20% * $contrast);
- }
-}
-
-
-
-
+/**
+ * Returns a suitable focus color for the given background color.
+ *
+ * @group color
+ *
+ * @param {color} $context ($v-app-background-color) - the background color for which to compute a suitable focus color
+ *
+ * @return {color} a suitable focus color for the given background color
+ */
@function valo-focus-color ($context: $v-app-background-color) {
$color: $context;
@if is-dark-color($context) {
}
-
-@mixin valo-focus-style($include-box-shadow: false) {
- @if $include-box-shadow and type-of($v-focus-style) == list {
+/**
+ * Output the default focus styles (border-color and box-shadow).
+ *
+ * @group style
+ */
+@mixin valo-focus-style {
+ @if type-of($v-focus-style) == list {
@include box-shadow($v-focus-style);
} @else if type-of($v-focus-style) == color {
border-color: $v-focus-style;
+/**
+ * Cross-browser opacity.
+ *
+ * @param {number} $value - opacity value from 0 to 1
+ * @param {bool} $important (false) - should the property value be declared with !important
+ *
+ * @group util
+ */
@mixin opacity ($value, $important: false) {
$importantValue: null;
@if $important {
}
}
-// -webkit-box-shadow still needed for Android 2.3 and 3.0, as well as iOS 5
+/**
+ * Cross-browser box-shadow.
+ * -webkit-box-shadow is still needed for Android 2.3 and 3.0, as well as iOS 5
+ *
+ * @param {list} $shadows - Any valid CSS box-shadow value
+ *
+ * @group util
+ */
@mixin box-shadow ($shadows...) {
@include prefixer(box-shadow, $shadows, webkit spec);
}
+/**
+ * Outputs cross-browser Valo-specific linear gradient background-image declarations.
+ *
+ * @group style
+ *
+ * @param {color} $color ($v-background-color) - The base color for the gradient color stops
+ * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
+ * @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead.
+ * @param {string} $direction (to bottom) - the direction of the linear gradient. The color stops are by default so that a lighter shade is at the start and a darker shade is at the end.
+ */
@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) {
@if $color {
@if $gradient {
}
}
+/**
+ * Returns a valid CSS, Valo-specific, color stop list to be used in a linear gradient.
+ *
+ * @group style
+ *
+ * @param {color} $color - the base color for the color stops
+ * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
+ */
@function valo-gradient-color-stops($color, $gradient: $v-gradient) {
$style: valo-gradient-style($gradient);
$opacity: valo-gradient-opacity($gradient);
}
+/**
+ * Returns the style part of a Valo-specific gradient value.
+ *
+ * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
+ *
+ * @return {string} One of the possible style values for $v-gradient
+ */
@function valo-gradient-style($gradient: $v-gradient) {
@if type-of($gradient) != list {
@return none;
@return first-string($gradient);
}
+/**
+ * Returns the opacity part of a Valo-specific gradient value.
+ *
+ * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
+ *
+ * @return {number} A percentage value from 0% to 100%
+ */
@function valo-gradient-opacity($gradient: $v-gradient) {
@if type-of($gradient) != list {
@return 0%;
-@function contains($list, $var, $recursive: false) {
+/**
+ * Checks if a list contains a certain value.
+ *
+ * @param {list} $list - the list to check
+ * @param {value} $var - the value to search for
+ * @param {bool} $recursive (false) - should any contained lists be checked for the value
+ *
+ * @return {bool} true if the value is found from the list, false otherwise
+ *
+ * @group lists
+ */
+@function contains($list, $value, $recursive: false) {
@if $recursive == false {
- @return (false != index($list, $var));
+ @return (false != index($list, $value));
}
$ret: false;
@each $item in $list {
@if type-of($item) == list and $recursive {
- @if contains($item, $var, true) {
+ @if contains($item, $value, true) {
@return true;
}
- } @else if $item == $var {
+ } @else if $item == $value {
@return true;
}
}
}
+/**
+ * Check whether a list contains nested lists.
+ *
+ * @param {list} $list - the list to check
+ *
+ * @return {bool} true of the list contains other nested lists, false otherwise
+ *
+ * @group lists
+ */
@function list-of-lists($list) {
@each $part in $list {
@if type-of($part) != list {
}
+/**
+ * Get the first color value from a list.
+ *
+ * @param {list} $list - a list which should contain a color value
+ *
+ * @return {color} The first color encountered in the list
+ *
+ * @group lists
+ */
@function first-color($list) {
@return first-of-type($list, color);
}
+/**
+ * Get the first number value from a list.
+ *
+ * @param {list} $list - a list which should contain a number value
+ *
+ * @return {number} The first number encountered in the list
+ *
+ * @group lists
+ */
@function first-number($list) {
@return first-of-type($list, number);
}
+/**
+ * Get the first string value from a list.
+ *
+ * @param {list} $list - a list which should contain a string value
+ *
+ * @return {string} The first string encountered in the list
+ *
+ * @group lists
+ */
@function first-string($list) {
@return first-of-type($list, string);
}
+/**
+ * Get the first contained list from the list passed as the parameter.
+ *
+ * @param {list} $list - a list which should contain a nested list
+ *
+ * @return {list} The first list encountered in the list passed as the parameter
+ *
+ * @group lists
+ */
@function first-list($list) {
@return first-of-type($list, list);
}
+/**
+ * Get the first value of a certain type from a list.
+ *
+ * @param {list} $list - a list which should contain a value of the certain type
+ * @param {string} $type - the type of value to search for
+ *
+ * @return {value} The first item of the certain type encountered in the list
+ *
+ * @group lists
+ */
@function first-of-type($list, $type) {
@each $item in $list {
@if type-of($item) == $type {
}
+/**
+ * Flatten nested lists to one list, while maintaining the original list separators.
+ *
+ * @param {list} $list - the list to flatten
+ *
+ * @return {list} the same list with all nested lists flattened
+ *
+ * @group lists
+ */
@function flatten-list($list) {
$ret: ();
@each $item in $list {
-// Align element vertically inside
+/**
+ * Ouput selectors and properties to vertically center elements inside their parent.
+ *
+ * @param {string} $to-align (()) - The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements.
+ * @param {string} $align (middle) - The vertical-align value, e.g. top, middle, bottom
+ * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide
+ *
+ * @group util
+ */
@mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) {
&:#{$pseudo-element} {
content: "";
}
-
+/**
+ * Indicate that an element is clickable/tappable
+ *
+ * @group util
+ */
@mixin valo-tappable {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
-
+/**
+ * Output Vaadin Responsive extension specific width-range declaration.
+ *
+ * @param {size} $min (0) - The lower bound for the width-range
+ * @param {size} $max (null) - The upper bound for the width-range
+ *
+ * @group util
+ *
+ * @example scss
+ * .v-ui {
+ * font-size: 18px;
+ *
+ * // Make the font-size smaller for 481px-768px wide UIs
+ * @include width-range(481px, 768px) {
+ * font-size: 16px;
+ * }
+ *
+ * // Make it even smaller for UIs narrower than 480px
+ * @include width-range($max: 480px) {
+ * font-size: 14px;
+ * }
+ * }
+ */
@mixin width-range($min: 0, $max: null) {
&[width-range~="#{$min}-#{$max}"] {
@content;
}
}
+/**
+ * Output Vaadin Responsive extension specific height-range declaration.
+ *
+ * @param {size} $min (0) - The lower bound for the height-range
+ * @param {size} $max (null) - The upper bound for the height-range
+ *
+ * @group util
+ *
+ * @example scss
+ * .v-csslayout {
+ * color: red;
+ *
+ * // Make the text color blue when the layout height is between 100px-300px
+ * @include height-range(100px, 300px) {
+ * color: blue;
+ * }
+ * }
+ */
@mixin height-range($min: 0, $max: null) {
&[height-range~="#{$min}-#{$max}"] {
@content;
<td title="Custom web font">Lora</td>
<td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td>
</tr>
+ <tr>
+ <td><a href="https://github.com/heygrady/scss-blend-modes">SCSS Blend Modes</a></td>
+ <td><a href="licenses/the-mit-license.txt">The MIT License</a></td>
+ </tr>
+ <tr>
+ <td><a href="https://github.com/Team-Sass/Sass-list-functions">Sass list functions</a></td>
+ <td><a href="licenses/the-mit-license.txt">The MIT License</a></td>
+ </tr>
<!-- The extracted vaadin-sass-compiler -->
<tr>
<td>Vaadin Sass Compiler</td>
+ getRemoteControlName());
open(link, caption, tries - 1);
+ } else {
+ // Done opening, scroll left panel to the top again for consistency
+ scrollTo(0, 0);
}
}
projects / vaadin-framework.git / commitdiff