Change-Id: Id621c25cae3314dc44a700e1e9dcdae97cda5bfbtags/7.4.0.beta1
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-absolutelayout) - | |||
* | |||
* @group absolutelayout | |||
*/ | |||
@mixin valo-absolutelayout ($primary-stylename: v-absolutelayout) { | |||
.#{$primary-stylename}-wrapper { |
@@ -475,6 +475,12 @@ | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group combobox | |||
*/ | |||
@mixin valo-combobox-no-input-style { | |||
cursor: pointer; | |||
text-shadow: valo-text-shadow(); |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-customcomponent) - | |||
* | |||
* @group customcomponent | |||
*/ | |||
@mixin valo-customcomponent ($primary-stylename: v-customcomponent) { | |||
} |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-customlayout) - | |||
* | |||
* @group customlayout | |||
*/ | |||
@mixin valo-customlayout ($primary-stylename: v-customlayout) { | |||
} |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primaryStyleName (v-escalator) - | |||
* | |||
* @group escalator | |||
*/ | |||
@mixin valo-escalator($primaryStyleName : v-escalator) { | |||
$background-color: white; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-form) - | |||
* | |||
* @group form | |||
*/ | |||
@mixin valo-form ($primary-stylename: v-form) { | |||
.#{$primary-stylename} fieldset { |
@@ -1,5 +1,12 @@ | |||
@import "escalator"; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-styleName (v-grid) - | |||
* | |||
* @group grid | |||
*/ | |||
@mixin valo-grid($primary-styleName : v-grid) { | |||
@include valo-escalator($primary-styleName); | |||
} |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-gridlayout) - | |||
* | |||
* @group gridlayout | |||
*/ | |||
@mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) { | |||
.#{$primary-stylename} { | |||
position: relative; | |||
@@ -20,6 +27,13 @@ | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-gridlayout) - | |||
* | |||
* @group gridlayout | |||
*/ | |||
@mixin valo-gridlayout($primary-stylename : v-gridlayout) { | |||
.#{$primary-stylename}-margin-top { |
@@ -1,8 +1,30 @@ | |||
/** | |||
* | |||
* @group link | |||
*/ | |||
$v-link-font-color: $v-focus-color !default; | |||
/** | |||
* | |||
* @group link | |||
*/ | |||
$v-link-text-decoration: underline !default; | |||
/** | |||
* | |||
* @group link | |||
*/ | |||
$v-link-cursor: pointer !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-link) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group link | |||
*/ | |||
@mixin valo-link ($primary-stylename: v-link, $include-additional-styles: contains($v-included-additional-styles, link)) { | |||
.#{$primary-stylename} { | |||
@include valo-link-style; | |||
@@ -33,6 +55,12 @@ $v-link-cursor: pointer !default; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group link | |||
*/ | |||
@mixin valo-link-style { | |||
cursor: $v-link-cursor; | |||
color: $v-link-font-color; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-loginform) - | |||
* | |||
* @group loginform | |||
*/ | |||
@mixin valo-loginform ($primary-stylename: v-loginform) { | |||
} |
@@ -1,3 +1,11 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-menubar) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) { | |||
.#{$primary-stylename} { | |||
@@ -85,6 +93,15 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-menubar) - | |||
* @param {color} $background-color ($v-background-color) - | |||
* @param {size} $unit-size ($v-unit-size) - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) { | |||
@include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size); | |||
padding: 0; | |||
@@ -106,6 +123,12 @@ | |||
/** | |||
* | |||
* | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-menuitem-style { | |||
$border-width: first-number($v-border); | |||
position: relative; | |||
@@ -193,6 +216,13 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-menubar) - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-popup-style ($primary-stylename: v-menubar) { | |||
@include valo-selection-overlay-style; | |||
@@ -252,18 +282,37 @@ | |||
/** | |||
* | |||
* | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-submenu-indicator-style { | |||
font-family: FontAwesome; | |||
content: "\f054"; | |||
line-height: $v-selection-item-height + 2px; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-checked-icon-style { | |||
content: "\f00c"; | |||
font-family: FontAwesome; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {list} $background-color - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) { | |||
$grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; | |||
@include box-shadow(none); | |||
@@ -271,6 +320,13 @@ | |||
color: valo-font-color($background-color, 0.9); | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-menubar) - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { | |||
.#{$primary-stylename}-menuitem-checked { | |||
@include valo-menubar-menuitem-checked-style($background-color: $background-color); | |||
@@ -278,6 +334,13 @@ | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-menubar) - | |||
* | |||
* @group menubar | |||
*/ | |||
@mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) { | |||
border: none; | |||
border-radius: 0; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-nativebutton) - | |||
* | |||
* @group nativebutton | |||
*/ | |||
@mixin valo-nativebutton ($primary-stylename: v-nativebutton) { | |||
.#{$primary-stylename} { | |||
-webkit-touch-callout: none; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-select) - | |||
* | |||
* @group nativeselect | |||
*/ | |||
@mixin valo-nativeselect ($primary-stylename: v-select) { | |||
.#{$primary-stylename} select { | |||
@include valo-nativeselect-select-style; | |||
@@ -20,6 +27,12 @@ | |||
/** | |||
* | |||
* | |||
* | |||
* @group nativeselect | |||
*/ | |||
@mixin valo-nativeselect-select-style { | |||
border: valo-border(); | |||
@include valo-gradient; |
@@ -1,6 +1,18 @@ | |||
/** | |||
* | |||
* @group notification | |||
*/ | |||
$v-notification-title-color: $v-focus-color !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-Notification) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) { | |||
// Positional offsets | |||
@@ -200,6 +212,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-closable-style { | |||
padding-right: $v-unit-size + round($v-unit-size/1.7); | |||
overflow: hidden !important; // Override GWT PopupPanel | |||
@@ -244,6 +262,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-style { | |||
background: $v-overlay-background-color; | |||
@include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); | |||
@@ -259,6 +283,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-bar-style { | |||
left: 0 !important; | |||
right: 0; | |||
@@ -301,6 +331,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-dark-style { | |||
background-color: #444; | |||
background-color: rgba(#444, .9); | |||
@@ -317,6 +353,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-system-style { | |||
@include valo-notification-dark-style; | |||
@@ -326,8 +368,20 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-tray-style {} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-warning-style { | |||
background: #FFF3D2; | |||
@@ -340,6 +394,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-error-style { | |||
background: $v-error-indicator-color; | |||
font-weight: $v-font-weight + 100; | |||
@@ -354,6 +414,12 @@ $v-notification-title-color: $v-focus-color !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group notification | |||
*/ | |||
@mixin valo-notification-small-style { | |||
padding: round($v-unit-size/3.3) round($v-unit-size/2.8); | |||
@@ -1,3 +1,11 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-select-optiongroup) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group optiongroup | |||
*/ | |||
@mixin valo-optiongroup ($primary-stylename: v-select-optiongroup, $include-additional-styles: contains($v-included-additional-styles, optiongroup)) { | |||
.v-radiobutton { | |||
@@ -28,6 +36,15 @@ | |||
} | |||
/** | |||
* | |||
* | |||
* @param {color} $background-color ($v-background-color) - | |||
* @param {size} $unit-size ($v-unit-size) - | |||
* @param {color} $selection-color ($v-selection-color) - | |||
* | |||
* @group optiongroup | |||
*/ | |||
@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { | |||
@include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color); | |||
@@ -52,6 +69,14 @@ | |||
/** | |||
* | |||
* | |||
* @param {size} $unit-size ($v-unit-size) - | |||
* @param {size} $font-size ($v-font-size) - | |||
* | |||
* @group optiongroup | |||
*/ | |||
@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) { | |||
@if $unit-size != $v-unit-size { | |||
@@ -83,6 +108,12 @@ | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group optiongroup | |||
*/ | |||
@mixin valo-optiongroup-horizontal { | |||
white-space: nowrap; | |||
@@ -1,3 +1,9 @@ | |||
/** | |||
* | |||
* | |||
* | |||
* @group orderedlayout | |||
*/ | |||
@mixin valo-orderedlayout-global { | |||
div.v-layout.v-horizontal.v-widget { | |||
@@ -140,6 +146,13 @@ | |||
/** | |||
* | |||
* | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group 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 { | |||
@@ -184,6 +197,12 @@ | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group orderedlayout | |||
*/ | |||
@mixin valo-horizontallayout-wrapping-style { | |||
white-space: normal !important; | |||
@@ -1,6 +1,23 @@ | |||
/** | |||
* | |||
* @group panel | |||
*/ | |||
$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default; | |||
$v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* @group panel | |||
*/ | |||
$v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-panel) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group panel | |||
*/ | |||
@mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) { | |||
.#{$primary-stylename} { | |||
@@ -52,13 +69,18 @@ $v-panel-border: $v-border !default; | |||
@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 | |||
) { | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-panel) - | |||
* @param {color} $background-color ($v-panel-background-color) - | |||
* @param {list} $shadow ($v-shadow) - | |||
* @param {list} $border ($v-panel-border) - | |||
* @param {string} $border-radius ($v-border-radius) - | |||
* | |||
* @group panel | |||
*/ | |||
@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 ) { | |||
background: $background-color; | |||
color: valo-font-color($background-color); | |||
border-radius: $border-radius; | |||
@@ -68,12 +90,17 @@ $v-panel-border: $v-border !default; | |||
@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 | |||
) { | |||
/** | |||
* | |||
* | |||
* @param {color} $background-color ($v-background-color) - | |||
* @param {list} $bevel ($v-bevel) - | |||
* @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) - | |||
* @param {list} $border ($v-panel-border) - | |||
* | |||
* @group panel | |||
*/ | |||
@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 ) { | |||
@include box-sizing(border-box); | |||
padding: 0 round($v-unit-size/3); | |||
line-height: $v-unit-size - first-number($v-border); | |||
@@ -102,6 +129,13 @@ $v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* | |||
* @param {list} $shadow (false) - | |||
* | |||
* @group panel | |||
*/ | |||
@mixin valo-panel-well-style ($shadow: false) { | |||
@if $shadow == false { | |||
$new-shadow: (); | |||
@@ -130,6 +164,12 @@ $v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* | |||
* | |||
* @group panel | |||
*/ | |||
@mixin valo-panel-borderless-style { | |||
background: transparent; | |||
color: inherit; | |||
@@ -149,6 +189,13 @@ $v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* | |||
* @param {size} $border-width (max(1px, first-number($v-panel-border))) - | |||
* | |||
* @group panel | |||
*/ | |||
@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) { | |||
> [class*="-captionwrap"] { | |||
position: relative; | |||
@@ -183,6 +230,12 @@ $v-panel-border: $v-border !default; | |||
/** | |||
* | |||
* | |||
* | |||
* @group panel | |||
*/ | |||
@mixin valo-panel-adjust-content-margins { | |||
> .v-margin-top { | |||
padding-top: round($v-unit-size/3); |
@@ -4,6 +4,13 @@ | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-popupview) - | |||
* | |||
* @group popupview | |||
*/ | |||
@mixin valo-popupview ($primary-stylename: v-popupview) { | |||
.#{$primary-stylename} { | |||
@include valo-link-style; |
@@ -1,6 +1,17 @@ | |||
/** | |||
* | |||
* @group progressbar | |||
*/ | |||
$v-progressbar-border-radius: $v-border-radius !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-progressbar) - | |||
* | |||
* @group progressbar | |||
*/ | |||
@mixin valo-progressbar ($primary-stylename: v-progressbar) { | |||
.#{$primary-stylename}-wrapper { | |||
@@ -44,6 +55,13 @@ $v-progressbar-border-radius: $v-border-radius !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {color} $background-color ($v-background-color) - | |||
* | |||
* @group progressbar | |||
*/ | |||
@mixin valo-progressbar-track-style ($background-color: $v-background-color) { | |||
border-radius: $v-progressbar-border-radius; | |||
height: round($v-unit-size/4); | |||
@@ -53,6 +71,14 @@ $v-progressbar-border-radius: $v-border-radius !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {color} $background-color ($v-selection-color) - | |||
* @param {string} $border ($v-border) - | |||
* | |||
* @group progressbar | |||
*/ | |||
@mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) { | |||
border-radius: $v-progressbar-border-radius; | |||
height: inherit; |
@@ -1,5 +1,16 @@ | |||
/** | |||
* | |||
* @group richtextarea | |||
*/ | |||
$valo-richtextarea-use-font-awesome: true !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-richtextarea) - | |||
* | |||
* @group richtextarea | |||
*/ | |||
@mixin valo-richtextarea ($primary-stylename: v-richtextarea) { | |||
.#{$primary-stylename} { | |||
@include valo-textfield-style($states: normal, $padding: 0); |
@@ -1,13 +1,54 @@ | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$v-slider-track-size: round($v-unit-size/8) !default; | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$v-slider-track-border-radius: null !default; | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$v-slider-handle-width: round($v-unit-size/1.8) !default; | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$v-slider-handle-height: round($v-unit-size/1.8) !default; | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2); | |||
/** | |||
* | |||
* @group slider | |||
*/ | |||
$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) { | |||
// Round to an even number | |||
@@ -185,6 +226,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* @param {color} $background-color ($v-background-color) - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) { | |||
.#{$primary-stylename}-base { | |||
@include valo-progressbar-track-style($background-color: $background-color); | |||
@@ -199,6 +248,15 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* @param {color} $background-color ($v-selection-color) - | |||
* @param {list} $border ($v-border) - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) { | |||
.#{$primary-stylename}-base { | |||
&:before { | |||
@@ -220,6 +278,13 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider-no-indicator ($primary-stylename: v-slider) { | |||
.#{$primary-stylename}-base:before, | |||
.#{$primary-stylename}-base:after { | |||
@@ -228,6 +293,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* @param {color} $background-color ($v-background-color) - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) { | |||
.#{$primary-stylename}-handle { | |||
&:before { | |||
@@ -242,6 +315,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-slider) - | |||
* @param {number} $tick-count (5) - | |||
* | |||
* @group slider | |||
*/ | |||
@mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) { | |||
$tick-size: max(1px, first-number($v-border)); | |||
$tick-color: first-color(valo-border($strength: 0.7)); |
@@ -1,3 +1,11 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-splitpanel) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group splitpanel | |||
*/ | |||
@mixin valo-splitpanel($primary-stylename : v-splitpanel, $include-additional-styles: contains($v-included-additional-styles, splitpanel)) { | |||
.#{$primary-stylename}-horizontal { | |||
@include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal); | |||
@@ -21,6 +29,13 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-splitpanel) - | |||
* | |||
* @group splitpanel | |||
*/ | |||
@mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) { | |||
.#{$primary-stylename}-vertical, | |||
.#{$primary-stylename}-horizontal { | |||
@@ -99,7 +114,18 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-splitpanel) - | |||
* @param {size} $splitter-size (max(1px, first-number($v-border)) - | |||
* @param {list} $splitter-active-size (round($v-unit-size/3)) - | |||
* @param {bool} $splitter-handle-visible (false) - | |||
* @param {list} $splitter-shadow (none) - | |||
* @param {list} $orientation (vertical horizontal) - | |||
* | |||
* @group splitpanel | |||
*/ | |||
@mixin valo-splitpanel-style( | |||
$primary-stylename : v-splitpanel, | |||
$splitter-size: max(1px, first-number($v-border)), | |||
@@ -171,6 +197,14 @@ | |||
/** | |||
* | |||
* | |||
* @param {bool} $horizontal (false) - | |||
* @param {bool} $include-common (true) - | |||
* | |||
* @group splitpanel | |||
*/ | |||
@mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) { | |||
@if $include-common { | |||
content: ""; |
@@ -1,15 +1,66 @@ | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-row-height: $v-unit-size !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-border-width: first-number($v-border) !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-border-color: null !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-border-radius: 0 !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-cell-padding-horizontal: round($v-unit-size/3) !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-resizer-width: round($v-unit-size/4.5) !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-sort-indicator-width: round($v-unit-size/2) !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-header-font-size: round($v-font-size * 0.86) !default; | |||
/** | |||
* | |||
* @group table | |||
*/ | |||
$v-table-background-color: null !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-global ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-header table, | |||
@@ -51,6 +102,15 @@ $v-table-background-color: null !default; | |||
/** | |||
* | |||
* | |||
* @param {color} $context ($v-background-color) - | |||
* | |||
* @return {color} - | |||
* | |||
* @group table | |||
*/ | |||
@function valo-table-background-color($context: $v-background-color) { | |||
@if is-dark-color($context) { | |||
@return darken($context, 2%); | |||
@@ -59,6 +119,14 @@ $v-table-background-color: null !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* @param {bool} $include-additional-styles - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) { | |||
$background-color: $v-table-background-color or valo-table-background-color(); | |||
@@ -529,21 +597,45 @@ $v-table-background-color: null !default; | |||
/** | |||
* | |||
* | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-sort-asc-icon-style { | |||
content: '\f0dd'; | |||
font-family: FontAwesome; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-sort-desc-icon-style { | |||
content: '\f0de'; | |||
font-family: FontAwesome; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-column-selector-icon-style { | |||
font-family: FontAwesome; | |||
content: "\f013"; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-column-visible-icon-style { | |||
content: "\f00c"; | |||
font-family: FontAwesome; | |||
@@ -552,6 +644,13 @@ $v-table-background-color: null !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-no-stripes-style ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-row, | |||
.#{$primary-stylename}-row-odd { | |||
@@ -560,6 +659,13 @@ $v-table-background-color: null !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-cell-content { | |||
border-left: none; | |||
@@ -574,6 +680,13 @@ $v-table-background-color: null !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-cell-content { | |||
border-top: none; | |||
@@ -582,6 +695,13 @@ $v-table-background-color: null !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-no-header-style ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-header-wrap { | |||
display: none; | |||
@@ -589,6 +709,13 @@ $v-table-background-color: null !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-table) - | |||
* | |||
* @group table | |||
*/ | |||
@mixin valo-table-borderless-style ($primary-stylename: v-table) { | |||
.#{$primary-stylename}-header-wrap, | |||
.#{$primary-stylename}-footer-wrap, |
@@ -1,5 +1,19 @@ | |||
/** | |||
* | |||
* @group tree | |||
*/ | |||
$v-tree-row-height: round($v-unit-size/1.3) !default; | |||
/** | |||
* | |||
* @group tree | |||
*/ | |||
$v-tree-animations-enabled: true !default; | |||
/** | |||
* | |||
* @group tree | |||
*/ | |||
$v-tree-expand-animation-enabled: false !default; | |||
@@ -24,6 +38,13 @@ $v-tree-expand-animation-enabled: false !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-tree) - | |||
* | |||
* @group tree | |||
*/ | |||
@mixin valo-tree ($primary-stylename: v-tree) { | |||
.#{$primary-stylename} { | |||
@@ -261,11 +282,24 @@ $v-tree-expand-animation-enabled: false !default; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group tree | |||
*/ | |||
@mixin valo-tree-collapsed-icon-style { | |||
content: "\f0da"; | |||
font-family: FontAwesome; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {bool} $force (false) - | |||
* | |||
* @group tree | |||
*/ | |||
@mixin valo-tree-expanded-icon-style ($force: false) { | |||
@if $v-tree-animations-enabled == false or $force { | |||
content: "\f0d7"; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-treetable) - | |||
* | |||
* @group treetable | |||
*/ | |||
@mixin valo-treetable ($primary-stylename: v-treetable) { | |||
.#{$primary-stylename} { | |||
[class*="caption-container"], |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-select-twincol) - | |||
* | |||
* @group twin-column-select | |||
*/ | |||
@mixin valo-twincolselect ($primary-stylename: v-select-twincol) { | |||
.#{$primary-stylename} { | |||
@@ -75,11 +82,23 @@ | |||
/** | |||
* | |||
* | |||
* | |||
* @group twin-column-select | |||
*/ | |||
@mixin valo-twincolselect-add-icon-style { | |||
font-family: FontAwesome; | |||
content: "\f054"; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group twin-column-select | |||
*/ | |||
@mixin valo-twincolselect-remove-icon-style { | |||
font-family: FontAwesome; | |||
content: "\f053"; |
@@ -1,3 +1,10 @@ | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-upload) - | |||
* | |||
* @group upload | |||
*/ | |||
@mixin valo-upload ($primary-stylename: v-upload) { | |||
.#{$primary-stylename} .v-button { | |||
@include valo-widget-style; |
@@ -1,5 +1,16 @@ | |||
/** | |||
* @group valo-menu | |||
*/ | |||
$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default; | |||
/** | |||
* | |||
* | |||
* @param {string} $bg ($valo-menu-background-color) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu ($bg: $valo-menu-background-color) { | |||
.valo-menu { | |||
@@ -134,6 +145,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-responsive { | |||
.v-ui { | |||
@include width-range($min: 801px, $max: 1100px) { | |||
@@ -239,6 +256,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* @param {string} $bg ($valo-menu-background-color) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-style ($bg: $valo-menu-background-color) { | |||
height: 100%; | |||
@include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg); | |||
@@ -251,6 +275,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-title-style { | |||
line-height: 1.2; | |||
@include valo-gradient($color: $v-selection-color); | |||
@@ -265,6 +295,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* @param {color} $bg ($valo-menu-background-color) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-subtitle-style ($bg: $valo-menu-background-color) { | |||
color: valo-font-color($bg, 0.33); | |||
margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); | |||
@@ -277,6 +314,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* @param {color} $bg ($valo-menu-background-color) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-item-style ($bg: $valo-menu-background-color) { | |||
$font-color: valo-font-color($bg, 0.5); | |||
outline: none; | |||
@@ -353,6 +397,15 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* @param {string} $states (inactive active) - | |||
* @param {color} $background-color (null) - | |||
* @param {color} $active-color ($v-selection-color) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) { | |||
@if contains($states, inactive) { | |||
background-color: $background-color; | |||
@@ -373,6 +426,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* @param {color} $bg (darken($valo-menu-background-color, 4%)) - | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) { | |||
background-color: $bg; | |||
min-width: $v-unit-size * 2; | |||
@@ -470,6 +530,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if | |||
/** | |||
* | |||
* | |||
* | |||
* @group valo-menu | |||
*/ | |||
@mixin valo-menu-logo-style { | |||
display: block; | |||
overflow: hidden; |
@@ -1,5 +1,6 @@ | |||
// | |||
// @mixin valo-widget-style | |||
/** | |||
* | |||
*/ | |||
@mixin valo-widget-style { | |||
// Baseline expectations for all Vaadin widgets | |||
@include box-sizing(border-box); | |||
@@ -12,7 +13,9 @@ | |||
white-space: normal; | |||
} | |||
/** | |||
* | |||
*/ | |||
@mixin valo-widget { | |||
.v-widget { | |||
@include valo-widget-style; |
@@ -1,8 +1,31 @@ | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-background-color: $v-panel-background-color !default; | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-border-radius: $v-border-radius !default; | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default; | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-animate-in: valo-animate-in-fade 140ms !default; | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default; | |||
/** | |||
* @group window | |||
*/ | |||
$v-window-modality-curtain-background-color: #222 !default; | |||
@@ -21,6 +44,13 @@ $v-window-modality-curtain-background-color: #222 !default; | |||
} | |||
/** | |||
* | |||
* | |||
* @param {string} $primary-stylename (v-window) - | |||
* | |||
* @group window | |||
*/ | |||
@mixin valo-window ($primary-stylename: v-window) { | |||
.#{$primary-stylename} { | |||
@@ -345,6 +375,12 @@ $v-window-modality-curtain-background-color: #222 !default; | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group window | |||
*/ | |||
@mixin valo-window-close-icon-style { | |||
&:before { | |||
// times cross | |||
@@ -352,12 +388,24 @@ $v-window-modality-curtain-background-color: #222 !default; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group window | |||
*/ | |||
@mixin valo-window-maximize-icon-style { | |||
&:before { | |||
content: "+"; | |||
} | |||
} | |||
/** | |||
* | |||
* | |||
* | |||
* @group window | |||
*/ | |||
@mixin valo-window-restore-icon-style { | |||
&:before { | |||
// en-dash |