diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components')
42 files changed, 476 insertions, 476 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss index 68ab9a3cf0..1750491196 100755 --- a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss @@ -1,4 +1,4 @@ -@mixin v-valo-absolutelayout ($primary-stylename: v-absolutelayout) { +@mixin valo-absolutelayout ($primary-stylename: v-absolutelayout) { .#{$primary-stylename}-wrapper { position: absolute; diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index 6c624d0968..46a3274f45 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -2,10 +2,10 @@ $v-accordion-content-shadow-style: join(inset, $v-shadow-style) !default; $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; -@mixin v-valo-accordion ($primary-stylename: v-accordion) { +@mixin valo-accordion ($primary-stylename: v-accordion) { .#{$primary-stylename} { - @include v-valo-panel-style; - @include v-valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2); + @include valo-panel-style; + @include valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2); overflow: hidden; } @@ -25,10 +25,10 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; } .#{$primary-stylename}-item-caption .v-caption { - @include v-valo-panel-caption-style; + @include valo-panel-caption-style; display: block; background: transparent; - border-bottom-color: v-valo-panel-border-color($background-color: v-valo-panel-background-color()); + border-bottom-color: valo-panel-border-color($background-color: valo-panel-background-color()); cursor: pointer; @include user-select(none);; @@ -44,13 +44,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; @if $v-hover-styles-enabled { &:hover:before { - @include v-valo-button-hover-style; + @include valo-button-hover-style; border: none; } } &:active:before { - @include v-valo-button-active-style; + @include valo-button-active-style; } } @@ -63,13 +63,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; width: 100%; bottom: 0; right: 0; - box-shadow: v-valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth); - background-color: v-valo-panel-background-color(); + box-shadow: valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth); + background-color: valo-panel-background-color(); @include box-sizing(border-box); - @include v-valo-panel-adjust-content-margins; + @include valo-panel-adjust-content-margins; } .#{$primary-stylename}-item-open + .#{$primary-stylename}-item { - border-top: $v-panel-border-width solid v-valo-panel-border-color($background-color: v-valo-panel-background-color()); + border-top: $v-panel-border-width solid valo-panel-border-color($background-color: valo-panel-background-color()); } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss index f8db4db5d5..9d63de6fbc 100644 --- a/WebContent/VAADIN/themes/valo/components/_all.scss +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -41,172 +41,172 @@ @import "dragwrapper"; -@mixin v-valo-components { +@mixin valo-components { @if v-is-included(absolutelayout) { - @include v-valo-absolutelayout; + @include valo-absolutelayout; } @if v-is-included(orderedlayout) { - @include v-valo-orderedlayout; + @include valo-orderedlayout; } @if v-is-included(button) { - @include v-valo-button; + @include valo-button; } @if v-is-included(checkbox) or v-is-included(optiongroup) { - @include v-valo-checkbox; + @include valo-checkbox; } @if v-is-included(combobox) { - @include v-valo-combobox; + @include valo-combobox; } @if v-is-included(csslayout) { - @include v-valo-csslayout; + @include valo-csslayout; } @if v-is-included(customcomponent) { - @include v-valo-customcomponent; + @include valo-customcomponent; } @if v-is-included(customlayout) { - @include v-valo-customlayout; + @include valo-customlayout; } @if v-is-included(form) { - @include v-valo-form; + @include valo-form; } @if v-is-included(formlayout) { - @include v-valo-formlayout; + @include valo-formlayout; } @if v-is-included(grid) { - @include v-valo-grid(v-escalator); + @include valo-grid(v-escalator); } @if v-is-included(textfield) { - @include v-valo-textfield; + @include valo-textfield; } @if v-is-included(textarea) { - @include v-valo-textarea; + @include valo-textarea; } @if v-is-included(datefield) { - @include v-valo-datefield; - @include v-valo-inline-datefield; + @include valo-datefield; + @include valo-inline-datefield; } @if v-is-included(orderedlayout) { - @include v-valo-orderedlayout; + @include valo-orderedlayout; } @if v-is-included(gridlayout) { - @include v-valo-gridlayout; + @include valo-gridlayout; } @if v-is-included(menubar) { - @include v-valo-menubar; + @include valo-menubar; } @if v-is-included(optiongroup) { - @include v-valo-optiongroup; + @include valo-optiongroup; } @if v-is-included(link) { - @include v-valo-link; + @include valo-link; } @if v-is-included(window) { - @include v-valo-window; + @include valo-window; } @if v-is-included(tree) { - @include v-valo-tree; + @include valo-tree; } @if v-is-included(table) or v-is-included(treetable) { - @include v-valo-table; + @include valo-table; } @if v-is-included(treetable) { - @include v-valo-treetable; + @include valo-treetable; } @if v-is-included(splitpanel) { - @include v-valo-splitpanel; + @include valo-splitpanel; } @if v-is-included(progressbar) or v-is-included(progressindicator) { - @include v-valo-progressbar; - @include v-valo-progressbar(v-progressindicator); + @include valo-progressbar; + @include valo-progressbar(v-progressindicator); } @if v-is-included(slider) { - @include v-valo-slider; + @include valo-slider; } @if v-is-included(tabsheet) { - @include v-valo-tabsheet; + @include valo-tabsheet; } @if v-is-included(colorpicker) { - @include v-valo-colorpicker; + @include valo-colorpicker; } @if v-is-included(panel) { - @include v-valo-panel; + @include valo-panel; } @if v-is-included(accordion) { - @include v-valo-accordion; + @include valo-accordion; } @if v-is-included(twincolselect) { - @include v-valo-twincolselect; + @include valo-twincolselect; } @if v-is-included(nativeselect) { - @include v-valo-nativeselect; + @include valo-nativeselect; } @if v-is-included(calendar) { - @include v-valo-calendar; + @include valo-calendar; } @if v-is-included(label) { - @include v-valo-label; + @include valo-label; } @if v-is-included(dragwrapper) { - @include v-valo-dragwrapper; + @include valo-dragwrapper; } @if v-is-included(loginform) { - @include v-valo-loginform; + @include valo-loginform; } @if v-is-included(nativebutton) { - @include v-valo-nativebutton; + @include valo-nativebutton; } @if v-is-included(nativeselect) { - @include v-valo-nativeselect; + @include valo-nativeselect; } @if v-is-included(popupview) { - @include v-valo-popupview; + @include valo-popupview; } @if v-is-included(richtextarea) { - @include v-valo-richtextarea; + @include valo-richtextarea; } @if v-is-included(upload) { - @include v-valo-upload; + @include valo-upload; } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss index 660a988bb5..b21e6f9a3e 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -20,12 +20,12 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; // The main mixin for Valo buttons -// @mixin v-valo-button +// @mixin valo-button // @param $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code> -@mixin v-valo-button ($primary-stylename: v-button) { +@mixin valo-button ($primary-stylename: v-button) { .#{$primary-stylename} { - @include v-valo-button-common-properties; - @include v-valo-button-style; + @include valo-button-common-properties; + @include valo-button-style; } } @@ -33,8 +33,8 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-common-properties { - @include v-valo-tappable; +@mixin valo-button-common-properties { + @include valo-tappable; cursor: $v-button-cursor; font-weight: $v-button-font-weight; position: relative; @@ -65,10 +65,10 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; } } - @include v-valo-button-vertical-centering; + @include valo-button-vertical-centering; } -@mixin v-valo-button-vertical-centering { +@mixin valo-button-vertical-centering { // Vertical centering of icon and caption, independent of the height of the button @include vertical-align-guide($to-align: div, $pseudo-element: before); @@ -92,7 +92,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-size ($unit-size, $border-radius) { +@mixin valo-button-size ($unit-size, $border-radius) { height: $unit-size; $padding-width: ceil($unit-size/2.4); @@ -110,7 +110,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@function v-valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, +@function valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-button-background-color) { $background-color: $background-color or $v-app-background-color; @@ -127,7 +127,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, +@mixin valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, $bevel-style: $v-button-bevel-style, $bevel-depth: $v-button-bevel-depth, $unit-size: $v-button-unit-size, $border-radius: $v-button-border-radius, $background-color: $v-button-background-color) { @@ -140,49 +140,49 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; $bevel-depth: $bevel-depth or $v-bevel-depth; $unit-size: $unit-size or $v-unit-size; - @include v-valo-button-size($unit-size, $border-radius); + @include valo-button-size($unit-size, $border-radius); border-radius: $border-radius; border: $v-button-border-width solid; - border-color: v-valo-button-border-color($bevel-style, $bevel-depth, $background-color); + border-color: valo-button-border-color($bevel-style, $bevel-depth, $background-color); - @include v-valo-gradient($background-color, $gradient-style, $gradient-depth); - color: v-valo-font-color($background-color, 0.9); + @include valo-gradient($background-color, $gradient-style, $gradient-depth); + color: valo-font-color($background-color, 0.9); - box-shadow: v-valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth); - text-shadow: v-valo-button-text-shadow($background-color, $bevel-depth); + box-shadow: valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth); + text-shadow: valo-button-text-shadow($background-color, $bevel-depth); @if $v-button-hover-style-enabled { &:hover:after { - @include v-valo-button-hover-style($background-color: $background-color); + @include valo-button-hover-style($background-color: $background-color); } } &:focus { outline: none; &:after { - @include v-valo-button-focus-style($background-color: $background-color); + @include valo-button-focus-style($background-color: $background-color); } } &:active:after, &.v-pressed:after { - @include v-valo-button-active-style($background-color: $background-color); + @include valo-button-active-style($background-color: $background-color); } } -@mixin v-valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) { - $focus-color: v-valo-focus-color(); +@mixin valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) { + $focus-color: valo-focus-color(); @if color-luminance($focus-color) + 50 < color-luminance($background-color) { border: $v-button-border-width solid $focus-color; } @else { - border: $border-fallback or v-valo-button-border-color($background-color: $background-color); + border: $border-fallback or valo-button-border-color($background-color: $background-color); } - box-shadow: v-valo-focus-box-shadow($color: $focus-color); + box-shadow: valo-focus-box-shadow($color: $focus-color); @if $v-animations-enabled { @include transition(none); @@ -191,7 +191,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-active-style ($background-color: $v-app-background-color) { +@mixin valo-button-active-style ($background-color: $v-app-background-color) { $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-app-background-color)); background-color: rgba($bg, .1); @@ -203,7 +203,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-hover-style ($background-color: $v-app-background-color) { +@mixin valo-button-hover-style ($background-color: $v-app-background-color) { $bg: lighten($background-color, 15%); background-color: rgba($bg, .1); border: inherit; @@ -221,7 +221,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-button-borderless-style { +@mixin valo-button-borderless-style { border: none; box-shadow: none; background: transparent; @@ -229,7 +229,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; } -@mixin v-valo-button-icon-align-right-style ($primary-stylename: v-button) { +@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) { .#{$primary-stylename}-wrap { display: inline-block; } @@ -247,13 +247,13 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@function v-valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) { - @return v-valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), v-valo-shadow(); +@function valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) { + @return valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), valo-shadow(); } -@function v-valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) { +@function valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) { @if is-dark-color($background-color) { @return 0 -1px 0 transparentize(darken($background-color, $bevel-depth), 1-($bevel-depth/100%)); } @else { diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss index 6429a2f163..29f1e24da8 100644 --- a/WebContent/VAADIN/themes/valo/components/_calendar.scss +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -1,7 +1,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default; -@mixin v-valo-calendar-global ($primary-stylename: v-calendar) { +@mixin valo-calendar-global ($primary-stylename: v-calendar) { .#{$primary-stylename}-month-day-scrollable { overflow-y: scroll; } @@ -109,7 +109,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb -@mixin v-valo-calendar ($primary-stylename: v-calendar) { +@mixin valo-calendar ($primary-stylename: v-calendar) { .#{$primary-stylename}-header-day { @@ -145,11 +145,11 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-header-week .#{$primary-stylename}-back { - @include v-valo-calendar-prev-style; + @include valo-calendar-prev-style; } .#{$primary-stylename}-header-week .#{$primary-stylename}-next { - @include v-valo-calendar-next-style; + @include valo-calendar-next-style; } @@ -205,7 +205,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb cursor: pointer; &:hover { - color: v-valo-focus-color(); + color: valo-focus-color(); } } @@ -219,17 +219,17 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb cursor: pointer; &:hover { - color: v-valo-focus-color(); + color: valo-focus-color(); } } .#{$primary-stylename}-month-day-today { - background: blend-normal(rgba(v-valo-focus-color(), .05), $v-app-background-color); + background: blend-normal(rgba(valo-focus-color(), .05), $v-app-background-color); .#{$primary-stylename}-day-number { font-weight: $v-font-weight + 100; - color: v-valo-focus-color(); - border-top: 2px solid v-valo-focus-color(); + color: valo-focus-color(); + border-top: 2px solid valo-focus-color(); line-height: round($v-unit-size/1.5) - 1px; margin: 0; padding: 0 round($v-unit-size/8); @@ -237,7 +237,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-month-day-selected { - background-color: blend-normal(rgba(v-valo-selection-color(), .1), $v-app-background-color); + background-color: blend-normal(rgba(valo-selection-color(), .1), $v-app-background-color); } .#{$primary-stylename}-month-day-dragemphasis { @@ -311,11 +311,11 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } } - $v-valo-calendar-time-divider-color: darken($v-app-background-color, 5%); + $valo-calendar-time-divider-color: darken($v-app-background-color, 5%); .#{$primary-stylename} .v-datecellslot, .#{$primary-stylename} .v-datecellslot-even { - border-top: 1px solid $v-valo-calendar-time-divider-color; + border-top: 1px solid $valo-calendar-time-divider-color; &:first-child { border-top-color: transparent; @@ -332,14 +332,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-current-time { - background: v-valo-focus-color(); + background: valo-focus-color(); line-height: 1px; pointer-events: none; @include opacity(.5); &:before { content: "\2022"; - color: v-valo-focus-color(); + color: valo-focus-color(); font-size: 22px; margin-left: -0.07em; } @@ -355,7 +355,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb right: 0; bottom: -1px; left: 0; - background: v-valo-selection-color(); + background: valo-selection-color(); @include opacity(.5); @if $v-border-radius > 0 { border-radius: $v-border-radius $v-border-radius 0 0; @@ -472,7 +472,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb // Event is being dragged &[style*=" left:"] .#{$primary-stylename}-event-content { - //box-shadow: v-valo-shadow(); + //box-shadow: valo-shadow(); } } @@ -533,14 +533,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } -@mixin v-valo-calendar-prev-style { +@mixin valo-calendar-prev-style { &:before { - @include v-valo-tabsheet-scroller-prev-icon-style; + @include valo-tabsheet-scroller-prev-icon-style; } } -@mixin v-valo-calendar-next-style { +@mixin valo-calendar-next-style { &:before { - @include v-valo-tabsheet-scroller-next-icon-style; + @include valo-tabsheet-scroller-next-icon-style; } } diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 1fc34dd823..7b93a0c5b4 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -1,20 +1,20 @@ -@mixin v-valo-checkbox ($primary-stylename: v-checkbox) { +@mixin valo-checkbox ($primary-stylename: v-checkbox) { .#{$primary-stylename}, .v-radiobutton { - @include v-valo-checkbox-style; + @include valo-checkbox-style; } } -@mixin v-valo-checkbox-icon-style { +@mixin valo-checkbox-icon-style { content: "\f00c"; font-family: FontAwesome; } -@mixin v-valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) { +@mixin valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) { $background-color: $background-color or $v-app-background-color; position: relative; @@ -29,7 +29,7 @@ padding-left: round($unit-size/1.5); label { - @include v-valo-tappable; + @include valo-tappable; } } @@ -42,8 +42,8 @@ margin: 0; &:focus ~ label:before { - @include v-valo-button-focus-style($background-color: $background-color, $border-fallback: null); - box-shadow: v-valo-button-box-shadow($background-color), v-valo-focus-box-shadow(); + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); + box-shadow: valo-button-box-shadow($background-color), valo-focus-box-shadow(); } & ~ label:before, @@ -62,13 +62,13 @@ } & ~ label:before { - @include v-valo-button-style($background-color: $background-color, $unit-size: $unit-size); + @include valo-button-style($background-color: $background-color, $unit-size: $unit-size); padding: 0; height: round($unit-size/2); } & ~ label:after { - @include v-valo-checkbox-icon-style; + @include valo-checkbox-icon-style; color: transparent; @if $v-animations-enabled { @include transition(color 100ms); @@ -76,11 +76,11 @@ } &:active ~ label:after { - @include v-valo-button-active-style($background-color: $background-color); + @include valo-button-active-style($background-color: $background-color); } &:checked ~ label:after { - color: v-valo-selection-color($context: $background-color); + color: valo-selection-color($context: $background-color); } &[disabled] { diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index 10ba39e16c..7a7b6f2445 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -1,7 +1,7 @@ -@mixin v-valo-colorpicker-global ($primary-stylename: v-colorpicker) { - $v-valo-colorpicker-pathPrefix: null; +@mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) { + $valo-colorpicker-pathPrefix: null; @if $v-relative-paths == false { - $v-valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/"; + $valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/"; } .#{$primary-stylename}-popup.v-window { @@ -13,11 +13,11 @@ } .rgb-gradient .#{$primary-stylename}-gradient-background { - background: url(#{$v-valo-colorpicker-pathPrefix}gradient2.png); + background: url(#{$valo-colorpicker-pathPrefix}gradient2.png); } .hsv-gradient .#{$primary-stylename}-gradient-foreground { - background: url(#{$v-valo-colorpicker-pathPrefix}gradient.png); + background: url(#{$valo-colorpicker-pathPrefix}gradient.png); } .#{$primary-stylename}-gradient-lowerbox { @@ -43,7 +43,7 @@ } .#{$primary-stylename}-popup .v-slider.hue-slider:before { - background: url(#{$v-valo-colorpicker-pathPrefix}slider_hue_bg.png); + background: url(#{$valo-colorpicker-pathPrefix}slider_hue_bg.png); } .#{$primary-stylename}-popup .v-textfield-dark { @@ -69,7 +69,7 @@ -@mixin v-valo-colorpicker ($primary-stylename: v-colorpicker) { +@mixin valo-colorpicker ($primary-stylename: v-colorpicker) { .#{$primary-stylename}-popup.v-window { min-width: 220px !important; diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index ef0542830a..8197a8695f 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -3,12 +3,12 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-combobox ($primary-stylename: v-filterselect) { +@mixin valo-combobox ($primary-stylename: v-filterselect) { .#{$primary-stylename} { position: relative; width: $v-default-field-width; - @include v-valo-combobox-style($primary-stylename: $primary-stylename); + @include valo-combobox-style($primary-stylename: $primary-stylename); white-space: nowrap; .v-icon { @@ -17,7 +17,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; } .#{$primary-stylename}-suggestpopup { - @include v-valo-combobox-popup-style; + @include valo-combobox-popup-style; } } @@ -27,19 +27,19 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) { - $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-app-background-color); $bevel-style: $bevel-style or $v-bevel-style; $bevel-depth: $bevel-depth or $v-bevel-depth; $unit-size: $unit-size or $v-unit-size; $border-radius: $border-radius or $v-border-radius; .#{$primary-stylename}-input { - @include v-valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, + @include valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, $border-radius: $border-radius, $background-color: $background-color); } @@ -58,11 +58,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; } &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { - @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color)); + @include valo-textfield-prompt-style(valo-textfield-background-color($background-color)); } .#{$primary-stylename}-button { - @include v-valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + @include valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $background-color: $background-color); } @@ -79,7 +79,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; &.v-readonly { .#{$primary-stylename}-input { - @include v-valo-textfield-readonly-style; + @include valo-textfield-readonly-style; } .#{$primary-stylename}-button { @@ -96,7 +96,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@include keyframes(v-valo-combobox-show-status) { +@include keyframes(valo-combobox-show-status) { 0% { opacity: 0; @include transform( translatey(-100%) ); @@ -106,12 +106,12 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color) { @include box-sizing(border-box); - @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, $unit-size: $unit-size, $border-radius: $border-radius, $background-color: $background-color) ; @@ -126,9 +126,9 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, +@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-textfield-background-color) { - @include v-valo-tappable; + @include valo-tappable; position: absolute; top: $v-textfield-border-width; right: $v-textfield-border-width; @@ -142,8 +142,8 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; } &:before { - @include v-valo-combobox-button-icon-style($background-color); - color: mix($background-color, v-valo-font-color($background-color)); + @include valo-combobox-button-icon-style($background-color); + color: mix($background-color, valo-font-color($background-color)); @if $v-animations-enabled { @include transition(color 140ms); } @@ -157,7 +157,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; @if $v-combobox-hover-style-enabled { &:hover:before { - color: v-valo-font-color($background-color); + color: valo-font-color($background-color); } } @@ -169,25 +169,25 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; bottom: 0; left: 0; border-radius: inherit; - @include v-valo-button-active-style($background-color); + @include valo-button-active-style($background-color); } } -@mixin v-valo-combobox-button-icon-style ($background-color) { +@mixin valo-combobox-button-icon-style ($background-color) { font-family: FontAwesome; content: "\f078"; - color: v-valo-font-color($background-color); + color: valo-font-color($background-color); } -@mixin v-valo-combobox-popup-style ($background-color: null) { +@mixin valo-combobox-popup-style ($background-color: null) { .v-filterselect-suggestmenu { - @include v-valo-selection-overlay-style($background-color: $background-color); + @include valo-selection-overlay-style($background-color: $background-color); box-sizing: border-box; position: relative; z-index: 1; @@ -203,11 +203,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; } .gwt-MenuItem { - @include v-valo-selection-item-style; + @include valo-selection-item-style; } .gwt-MenuItem-selected { - @include v-valo-selection-item-selected-style($parent-background-color: $background-color); + @include valo-selection-item-selected-style($parent-background-color: $background-color); } .v-filterselect-status { @@ -216,7 +216,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; $bg: $background-color or $v-app-background-color; $bg: scale-color($bg, $lightness: -15%); background: transparentize($bg, .1); - color: v-valo-font-color($bg); + color: valo-font-color($bg); border-radius: 0 0 $v-border-radius $v-border-radius; height: ceil($v-unit-size*0.6); bottom: -(ceil($v-unit-size*0.6)); @@ -227,11 +227,11 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; pointer-events: none; @if $v-animations-enabled { - @include animation(v-valo-combobox-show-status 200ms 80ms backwards); + @include animation(valo-combobox-show-status 200ms 80ms backwards); } > * { - color: v-valo-font-color($bg); + color: valo-font-color($bg); text-decoration: none; } } @@ -251,7 +251,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; @include transform( scale(.8) ); $bg: $background-color or $v-app-background-color; - color: v-valo-font-color($bg); + color: valo-font-color($bg); &:hover { @include opacity(1); diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss index 6537915344..60193ed3f8 100644 --- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -1,9 +1,9 @@ -@mixin v-valo-csslayout ($primary-stylename: v-csslayout){ +@mixin valo-csslayout ($primary-stylename: v-csslayout){ } -@mixin v-valo-component-group ($primary-stylename: v-csslayout) { +@mixin valo-component-group ($primary-stylename: v-csslayout) { .#{$primary-stylename}-v-component-group { white-space: nowrap; position: relative; diff --git a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss index 2a340fc743..34aef09c13 100644 --- a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss +++ b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss @@ -1,3 +1,3 @@ -@mixin v-valo-customcomponent ($primary-stylename: v-customcomponent) { +@mixin valo-customcomponent ($primary-stylename: v-customcomponent) { }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_customlayout.scss b/WebContent/VAADIN/themes/valo/components/_customlayout.scss index 9b28672c35..75eac938f1 100644 --- a/WebContent/VAADIN/themes/valo/components/_customlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_customlayout.scss @@ -1,3 +1,3 @@ -@mixin v-valo-customlayout ($primary-stylename: v-customlayout) { +@mixin valo-customlayout ($primary-stylename: v-customlayout) { }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 9e4328cf40..1664564d70 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -1,13 +1,13 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-datefield ($primary-stylename: v-datefield) { +@mixin valo-datefield ($primary-stylename: v-datefield) { .#{$primary-stylename} { position: relative; width: $v-default-field-width; height: $v-unit-size; - @include v-valo-datefield-style($primary-stylename: $primary-stylename); + @include valo-datefield-style($primary-stylename: $primary-stylename); } // Different widths for different resolutions @@ -28,27 +28,27 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } .v-datefield-popup { - @include v-valo-datefield-popup-style; + @include valo-datefield-popup-style; } - @include v-valo-datefield-calendarpanel-style; + @include valo-datefield-calendarpanel-style; } -@mixin v-valo-inline-datefield ($primary-stylename: v-inline-datefield) { - @include v-valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); +@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) { + @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); } -@mixin v-valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color, $primary-stylename: v-datefield) { - $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-app-background-color); $bevel-style: $bevel-style or $v-bevel-style; $bevel-depth: $bevel-depth or $v-bevel-depth; $unit-size: $unit-size or $v-unit-size; @@ -56,7 +56,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; .#{$primary-stylename}-textfield { @include box-sizing(border-box); - @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, $border-radius: $border-radius, $background-color: $background-color) ; padding-left: $unit-size * 1.2; @@ -65,11 +65,11 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield { - @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color)); + @include valo-textfield-prompt-style(valo-textfield-background-color($background-color)); } .#{$primary-stylename}-button { - @include v-valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + @include valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $background-color: $background-color); } @@ -87,7 +87,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; &.v-readonly { .#{$primary-stylename}-textfield { - @include v-valo-textfield-readonly-style; + @include valo-textfield-readonly-style; } .#{$primary-stylename}-button { @@ -103,9 +103,9 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, +@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-textfield-background-color) { - @include v-valo-tappable; + @include valo-tappable; -webkit-appearance: none; background: transparent; border: none; @@ -129,8 +129,8 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } &:before { - @include v-valo-datefield-button-icon-style($background-color); - color: mix($background-color, v-valo-font-color($background-color)); + @include valo-datefield-button-icon-style($background-color); + color: mix($background-color, valo-font-color($background-color)); @if $v-animations-enabled { @include transition(color 140ms); } @@ -138,7 +138,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; @if $v-combobox-hover-style-enabled { &:hover:before { - color: v-valo-font-color($background-color); + color: valo-font-color($background-color); } } @@ -149,27 +149,27 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; right: 0; bottom: 0; left: 0; - @include v-valo-button-active-style($background-color); + @include valo-button-active-style($background-color); } } -@mixin v-valo-datefield-button-icon-style ($background-color) { +@mixin valo-datefield-button-icon-style ($background-color) { font-family: FontAwesome; content: "\f073"; - color: v-valo-font-color($background-color); + color: valo-font-color($background-color); } -@mixin v-valo-datefield-popup-style ($context: $v-app-background-color) { +@mixin valo-datefield-popup-style ($context: $v-app-background-color) { $copy: $v-app-background-color; $v-app-background-color: $context; - @include v-valo-overlay-style; + @include valo-overlay-style; @include user-select(none); @@ -186,13 +186,13 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; padding: round($v-unit-size/20); } - @include v-valo-datefield-calendarpanel-style; + @include valo-datefield-calendarpanel-style; $v-app-background-color: $copy; } -@mixin v-valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) { +@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) { .#{$primary-stylename} { font-size: $v-font-size; text-align: center; @@ -203,37 +203,37 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } .#{$primary-stylename}-day { - @include v-valo-datefield-calendarpanel-day-style; + @include valo-datefield-calendarpanel-day-style; display: inline-block; @include box-sizing(border-box); cursor: pointer; &:hover { - @include v-valo-datefield-calendarpanel-day-hover-style; + @include valo-datefield-calendarpanel-day-hover-style; } } .#{$primary-stylename}-day-offmonth { - @include v-valo-datefield-calendarpanel-day-offmonth-style; + @include valo-datefield-calendarpanel-day-offmonth-style; } .#{$primary-stylename}-day-today { - @include v-valo-datefield-calendarpanel-day-today-style; + @include valo-datefield-calendarpanel-day-today-style; } .#{$primary-stylename}-day.#{$primary-stylename}-day-selected, .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover { - @include v-valo-datefield-calendarpanel-day-selected-style + @include valo-datefield-calendarpanel-day-selected-style } .#{$primary-stylename}-day.#{$primary-stylename}-day-focused { - @include v-valo-datefield-calendarpanel-day-focused-style; + @include valo-datefield-calendarpanel-day-focused-style; } .#{$primary-stylename}-weekdays { height: round($v-unit-size * 0.7); - color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); + color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); strong { font: inherit; @@ -269,7 +269,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; right: 0; bottom: 0; left: 0; - color: mix($v-app-background-color, v-valo-font-color($v-app-background-color)); + color: mix($v-app-background-color, valo-font-color($v-app-background-color)); font-size: round($v-font-size * 1.3); line-height: round($v-font-size * 1.5); @@ -281,31 +281,31 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; &:hover { @include opacity(1); &:before { - color: v-valo-link-font-color(); + color: valo-link-font-color(); } } } } .v-button-prevyear:before { - @include v-valo-datefield-calendarpanel-prevyear-icon-style; + @include valo-datefield-calendarpanel-prevyear-icon-style; } .v-button-prevmonth:before { - @include v-valo-datefield-calendarpanel-prevmonth-icon-style; + @include valo-datefield-calendarpanel-prevmonth-icon-style; } .v-button-nextyear:before { - @include v-valo-datefield-calendarpanel-nextyear-icon-style; + @include valo-datefield-calendarpanel-nextyear-icon-style; } .v-button-nextmonth:before { - @include v-valo-datefield-calendarpanel-nextmonth-icon-style; + @include valo-datefield-calendarpanel-nextmonth-icon-style; } td.#{$primary-stylename}-month { width: round($v-unit-size * 3.5); - @include v-valo-datefield-calendarpanel-month-style; + @include valo-datefield-calendarpanel-month-style; } .v-datefield-year td.v-datefield-calendarpanel-month { @@ -315,7 +315,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; .v-datefield-calendarpanel-weeknumber, .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child { width: round($v-unit-size * 0.7); - color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); + color: mix(valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); font-size: ceil($v-font-size * 0.86); display: inline-block; text-align: left; @@ -337,7 +337,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin v-valo-datefield-calendarpanel-day-style { +@mixin valo-datefield-calendarpanel-day-style { width: round($v-unit-size * 0.8); height: round($v-unit-size * 0.7); line-height: round($v-unit-size * 0.7); @@ -352,53 +352,53 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } } -@mixin v-valo-datefield-calendarpanel-day-hover-style { - color: v-valo-selection-color(); +@mixin valo-datefield-calendarpanel-day-hover-style { + color: valo-selection-color(); } -@mixin v-valo-datefield-calendarpanel-day-offmonth-style { - color: mix(v-valo-font-color($v-app-background-color), $v-app-background-color); +@mixin valo-datefield-calendarpanel-day-offmonth-style { + color: mix(valo-font-color($v-app-background-color), $v-app-background-color); background: transparent; } -@mixin v-valo-datefield-calendarpanel-day-today-style { - color: v-valo-selection-color(); - background: blend-overlay(v-valo-selection-color(), $v-app-background-color); +@mixin valo-datefield-calendarpanel-day-today-style { + color: valo-selection-color(); + background: blend-overlay(valo-selection-color(), $v-app-background-color); font-weight: $v-font-weight + 100; } -@mixin v-valo-datefield-calendarpanel-day-selected-style { - color: v-valo-font-color(v-valo-selection-color()); - @include v-valo-gradient(v-valo-selection-color()); +@mixin valo-datefield-calendarpanel-day-selected-style { + color: valo-font-color(valo-selection-color()); + @include valo-gradient(valo-selection-color()); font-weight: $v-font-weight + 100; } -@mixin v-valo-datefield-calendarpanel-day-focused-style { - box-shadow: v-valo-focus-box-shadow(); +@mixin valo-datefield-calendarpanel-day-focused-style { + box-shadow: valo-focus-box-shadow(); position: relative; // Show above other cells } -@mixin v-valo-datefield-calendarpanel-nextmonth-icon-style { +@mixin valo-datefield-calendarpanel-nextmonth-icon-style { font-family: FontAwesome; content: "\f105"; } -@mixin v-valo-datefield-calendarpanel-prevmonth-icon-style { +@mixin valo-datefield-calendarpanel-prevmonth-icon-style { font-family: FontAwesome; content: "\f104"; } -@mixin v-valo-datefield-calendarpanel-nextyear-icon-style { +@mixin valo-datefield-calendarpanel-nextyear-icon-style { font-family: FontAwesome; content: "\f101"; } -@mixin v-valo-datefield-calendarpanel-prevyear-icon-style { +@mixin valo-datefield-calendarpanel-prevyear-icon-style { font-family: FontAwesome; content: "\f100"; } -@mixin v-valo-datefield-calendarpanel-month-style { - color: v-valo-selection-color(); +@mixin valo-datefield-calendarpanel-month-style { + color: valo-selection-color(); } diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss index 5a7b34b0f5..9089c47d33 100644 --- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss +++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss @@ -1,4 +1,4 @@ -@mixin v-valo-dragwrapper ($primary-stylename: v-ddwrapper) { +@mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) { // TODO diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss index 30da7bb501..237b53946b 100644 --- a/WebContent/VAADIN/themes/valo/components/_escalator.scss +++ b/WebContent/VAADIN/themes/valo/components/_escalator.scss @@ -1,4 +1,4 @@ -@mixin v-valo-escalator($primaryStyleName : v-escalator) { +@mixin valo-escalator($primaryStyleName : v-escalator) { $background-color: white; $border-color: #aaa; diff --git a/WebContent/VAADIN/themes/valo/components/_form.scss b/WebContent/VAADIN/themes/valo/components/_form.scss index 84dee134a9..36a13dceac 100644 --- a/WebContent/VAADIN/themes/valo/components/_form.scss +++ b/WebContent/VAADIN/themes/valo/components/_form.scss @@ -1,4 +1,4 @@ -@mixin v-valo-form ($primary-stylename: v-form) { +@mixin valo-form ($primary-stylename: v-form) { .#{$primary-stylename} fieldset { border: none; diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index f67f55345a..2253f4437a 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -1,7 +1,7 @@ -@mixin v-valo-formlayout ($primary-stylename: v-formlayout) { +@mixin valo-formlayout ($primary-stylename: v-formlayout) { - @include v-valo-formlayout-spacing; - @include v-valo-formlayout-margins; + @include valo-formlayout-spacing; + @include valo-formlayout-margins; .#{$primary-stylename} > table { border-spacing: 0; @@ -29,7 +29,7 @@ } -@mixin v-valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) { +@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) { @if $all != null { $top: $all; $right: $all; @@ -63,7 +63,7 @@ } -@mixin v-valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) { +@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) { .#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row { > .#{$primary-stylename}-captioncell, > .#{$primary-stylename}-contentcell, @@ -77,7 +77,7 @@ -@mixin v-valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { +@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { > table > tbody > .#{$primary-stylename}-row { > .#{$primary-stylename}-captioncell, > .#{$primary-stylename}-contentcell, @@ -119,7 +119,7 @@ border: none; box-shadow: none; border-radius: 0; - @include v-valo-textfield-size($row-height, 0); + @include valo-textfield-size($row-height, 0); } .v-textarea { diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index 62462642b4..b1f7dbda05 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -1,5 +1,5 @@ @import "escalator"; -@mixin v-valo-grid($primary-styleName : v-grid) { - @include v-valo-escalator($primary-styleName); +@mixin valo-grid($primary-styleName : v-grid) { + @include valo-escalator($primary-styleName); }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss index df964600e9..c8c67b363c 100644 --- a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss @@ -1,4 +1,4 @@ -@mixin v-valo-gridlayout-global ($primary-stylename: v-gridlayout) { +@mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) { .#{$primary-stylename} { position: relative; line-height: 0; @@ -21,7 +21,7 @@ } -@mixin v-valo-gridlayout($primary-stylename : v-gridlayout) { +@mixin valo-gridlayout($primary-stylename : v-gridlayout) { .#{$primary-stylename}-margin-top { padding-top: $v-layout-margin-top; diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index 8bce4da3f7..6dda8f1297 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -18,7 +18,7 @@ $v-letter-spacing--h3: 0 !default; $v-letter-spacing--h4: 0.05em !default; -@mixin v-valo-label ($primary-stylename: v-label) { +@mixin valo-label ($primary-stylename: v-label) { .#{$primary-stylename}-undef-w { white-space: nowrap; @@ -29,7 +29,7 @@ $v-letter-spacing--h4: 0.05em !default; h3, .h3 { line-height: $v-line-height--header; font-weight: $v-font-weight--header; - color: v-valo-header-color($v-app-background-color); + color: valo-header-color($v-app-background-color); } h1, .h1 { @@ -60,7 +60,7 @@ $v-letter-spacing--h4: 0.05em !default; line-height: $v-line-height--header; font-weight: $v-font-weight + 200; font-size: $v-font-size--small; - color: v-valo-header-color($v-app-background-color, $contrast: 0.12); + color: valo-header-color($v-app-background-color, $contrast: 0.12); text-transform: uppercase; letter-spacing: $v-letter-spacing--h4; margin-top: 2.4em; diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss index e02a64f678..73e2cb114a 100644 --- a/WebContent/VAADIN/themes/valo/components/_link.scss +++ b/WebContent/VAADIN/themes/valo/components/_link.scss @@ -3,9 +3,9 @@ $v-link-text-decoration: underline !default; $v-link-cursor: pointer !default; -@mixin v-valo-link ($primary-stylename: v-link) { +@mixin valo-link ($primary-stylename: v-link) { .#{$primary-stylename} { - @include v-valo-link-style; + @include valo-link-style; a { cursor: inherit; @@ -23,9 +23,9 @@ $v-link-cursor: pointer !default; } -@mixin v-valo-link-style { +@mixin valo-link-style { cursor: $v-link-cursor; - color: v-valo-link-font-color(); + color: valo-link-font-color(); text-decoration: $v-link-text-decoration; font-weight: inherit; @@ -34,13 +34,13 @@ $v-link-cursor: pointer !default; } &:hover { - color: lighten(v-valo-link-font-color(), 10%); + color: lighten(valo-link-font-color(), 10%); } } -@function v-valo-link-font-color ($color: null, $context: null) { - $link-color: $color or $v-link-font-color or v-valo-focus-color($color: $color, $context: $context); +@function valo-link-font-color ($color: null, $context: null) { + $link-color: $color or $v-link-font-color or valo-focus-color($color: $color, $context: $context); @return $link-color; }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_loginform.scss b/WebContent/VAADIN/themes/valo/components/_loginform.scss index f52289d606..bf0c06b4d9 100644 --- a/WebContent/VAADIN/themes/valo/components/_loginform.scss +++ b/WebContent/VAADIN/themes/valo/components/_loginform.scss @@ -1,3 +1,3 @@ -@mixin v-valo-loginform ($primary-stylename: v-loginform) { +@mixin valo-loginform ($primary-stylename: v-loginform) { }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index 86f5fe42cc..291a38c366 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -1,11 +1,11 @@ -@mixin v-valo-menubar ($primary-stylename: v-menubar) { +@mixin valo-menubar ($primary-stylename: v-menubar) { $copy: $v-button-hover-style-enabled; $v-button-hover-style-enabled: false; .#{$primary-stylename} { - @include v-valo-button-common-properties; - @include v-valo-button-style; + @include valo-button-common-properties; + @include valo-button-style; padding: 0; text-align: left; } @@ -17,11 +17,11 @@ } .#{$primary-stylename} > .#{$primary-stylename}-menuitem { - @include v-valo-menubar-menuitem-style; + @include valo-menubar-menuitem-style; } .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked { - @include v-valo-menubar-menuitem-checked-style; + @include valo-menubar-menuitem-checked-style; } .v-disabled > .#{$primary-stylename}-menuitem:before { @@ -29,11 +29,11 @@ } .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected { - @include v-valo-gradient($color: v-valo-selection-color()); - box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color()); - text-shadow: v-valo-button-text-shadow($background-color: v-valo-selection-color()); - color: v-valo-font-color(v-valo-selection-color()); - $bc: v-valo-button-border-color($background-color: v-valo-selection-color()); + @include valo-gradient($color: valo-selection-color()); + box-shadow: valo-button-box-shadow($background-color: valo-selection-color()); + text-shadow: valo-button-text-shadow($background-color: valo-selection-color()); + color: valo-font-color(valo-selection-color()); + $bc: valo-button-border-color($background-color: valo-selection-color()); border-color: $bc; + .#{$primary-stylename}-menuitem { @@ -50,7 +50,7 @@ } .#{$primary-stylename}-popup { - @include v-valo-menubar-popup-style($primary-stylename); + @include valo-menubar-popup-style($primary-stylename); //margin-top: -$v-selection-overlay-padding-vertical !important; //margin-left: $v-selection-overlay-padding-horizontal !important; } @@ -60,11 +60,11 @@ -@mixin v-valo-menubar-menuitem-style { +@mixin valo-menubar-menuitem-style { position: relative; z-index: 1; display: inline-block; - @include v-valo-button-size($v-unit-size, $v-border-radius); + @include valo-button-size($v-unit-size, $v-border-radius); height: $v-unit-size - $v-button-border-width*2; border-left: $v-button-border-width solid; border-color: inherit; @@ -98,13 +98,13 @@ @if $v-button-hover-style-enabled { &:hover:before { - @include v-valo-button-hover-style; + @include valo-button-hover-style; border: none; } } &:active:before { - @include v-valo-button-active-style; + @include valo-button-active-style; } $margin-width: ceil($v-unit-size/2.4/5); @@ -121,12 +121,12 @@ -@mixin v-valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) { +@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) { $copy: $v-app-background-color; $v-app-background-color: $context; - @include v-valo-selection-overlay-style; + @include valo-selection-overlay-style; margin: ceil($v-unit-size/8) 0 0 1px !important; @@ -136,7 +136,7 @@ .#{$primary-stylename}-menuitem { display: block; - @include v-valo-selection-item-style; + @include valo-selection-item-style; padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon padding-right: $v-unit-size; position: relative; @@ -148,12 +148,12 @@ + .#{$primary-stylename}-menuitem-caption:after { position: absolute; right: $v-selection-item-padding-horizontal; - @include v-valo-menubar-submenu-indicator-style; + @include valo-menubar-submenu-indicator-style; } } .#{$primary-stylename}-menuitem-selected { - @include v-valo-selection-item-selected-style; + @include valo-selection-item-selected-style; } .#{$primary-stylename}-separator { @@ -161,11 +161,11 @@ margin: $v-selection-overlay-padding-vertical 0; height: 0; overflow: hidden; - border-bottom: 1px solid darken(v-valo-overlay-background-color(), 5%); + border-bottom: 1px solid darken(valo-overlay-background-color(), 5%); } [class*="checked"] .#{$primary-stylename}-menuitem-caption:before { - @include v-valo-menubar-checked-icon-style; + @include valo-menubar-checked-icon-style; position: absolute; left: $v-selection-item-padding-horizontal; } @@ -184,23 +184,23 @@ -@mixin v-valo-menubar-submenu-indicator-style { +@mixin valo-menubar-submenu-indicator-style { font-family: FontAwesome; content: "\f054"; line-height: $v-selection-item-height + 2px; } -@mixin v-valo-menubar-checked-icon-style { +@mixin valo-menubar-checked-icon-style { content: "\f00c"; font-family: FontAwesome; } -@mixin v-valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) { - @include v-valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top); +@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) { + @include valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top); @if color-luminance($background-color) < color-luminance($v-app-background-color) { - $border-color: v-valo-button-border-color($background-color: $background-color); + $border-color: valo-button-border-color($background-color: $background-color); border-color: $border-color; + [class*="menuitem"] { @@ -211,12 +211,12 @@ } } - color: v-valo-font-color($background-color, 0.9); - text-shadow: v-valo-button-text-shadow($background-color: $background-color); + color: valo-font-color($background-color, 0.9); + text-shadow: valo-button-text-shadow($background-color: $background-color); } -@mixin v-valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { +@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { .#{$primary-stylename}-menuitem-checked { - @include v-valo-menubar-menuitem-checked-style($background-color: $background-color); + @include valo-menubar-menuitem-checked-style($background-color: $background-color); } } diff --git a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss index aa00a6206a..69c48d4649 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss @@ -1,4 +1,4 @@ -@mixin v-valo-nativebutton ($primary-stylename: v-nativebutton) { +@mixin valo-nativebutton ($primary-stylename: v-nativebutton) { .#{$primary-stylename} { -webkit-touch-callout: none; } diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss index 89905d985f..c94eaea711 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -1,6 +1,6 @@ -@mixin v-valo-nativeselect ($primary-stylename: v-select) { +@mixin valo-nativeselect ($primary-stylename: v-select) { .#{$primary-stylename} select { - @include v-valo-nativeselect-select-style; + @include valo-nativeselect-select-style; } .#{$primary-stylename}-select { @@ -20,17 +20,17 @@ -@mixin v-valo-nativeselect-select-style { +@mixin valo-nativeselect-select-style { $_border-color: darken($v-app-background-color, $v-bevel-depth); @if is-dark-color($v-app-background-color) { $_border-color: lighten($v-app-background-color, $v-bevel-depth); } border: $v-border-width solid $_border-color; - background-color: v-valo-textfield-background-color($v-app-background-color); + background-color: valo-textfield-background-color($v-app-background-color); &:focus { outline: none; - //@include v-valo-button-focus-style; - box-shadow: v-valo-focus-box-shadow(); + //@include valo-button-focus-style; + box-shadow: valo-focus-box-shadow(); } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss index 14f7fe1d29..b6230a1ace 100644 --- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -1,4 +1,4 @@ -@mixin v-valo-optiongroup ($primary-stylename: v-optiongroup) { +@mixin valo-optiongroup ($primary-stylename: v-optiongroup) { .v-radiobutton { :root & > input { @@ -9,7 +9,7 @@ height: $size; top: $offset; left: $offset; - background: v-valo-selection-color($v-button-background-color); + background: valo-selection-color($v-button-background-color); } & ~ label:before, diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss index 4e62721fe9..15dd77e432 100644 --- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -1,4 +1,4 @@ -@mixin v-valo-orderedlayout-global { +@mixin valo-orderedlayout-global { div.v-layout.v-horizontal.v-widget { white-space: nowrap; @@ -145,7 +145,7 @@ -@mixin v-valo-orderedlayout { +@mixin valo-orderedlayout { .v-margin-top { padding-top: $v-layout-margin-top; @@ -171,7 +171,7 @@ } -@mixin v-valo-horizontallayout--wrapping { +@mixin valo-horizontallayout--wrapping { white-space: normal !important; & > .v-spacing + .v-slot, diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 54fe31975a..b37bbd4ed6 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -9,39 +9,39 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; -@mixin v-valo-panel ($primary-stylename: v-panel) { +@mixin valo-panel ($primary-stylename: v-panel) { .#{$primary-stylename} { - @include v-valo-panel-style; + @include valo-panel-style; } .#{$primary-stylename}-caption { - @include v-valo-panel-caption-style; + @include valo-panel-caption-style; } .#{$primary-stylename}-content { @include box-sizing(border-box); width: 100%; height: 100%; - @include v-valo-panel-adjust-content-margins; + @include valo-panel-adjust-content-margins; } } -@function v-valo-panel-background-color ($context: $v-app-background-color) { +@function valo-panel-background-color ($context: $v-app-background-color) { $bg-color: lighten($context, 5%); @return $bg-color; } -@function v-valo-panel-caption-background-color ($background-color) { +@function valo-panel-caption-background-color ($background-color) { @return $background-color or $v-app-background-color; } -@function v-valo-panel-border-color ($background-color: $v-app-background-color) { +@function valo-panel-border-color ($background-color: $v-app-background-color) { $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-30%, -$v-bevel-depth/2))); $border-color: scale-color($border-color, $saturation: -$v-bevel-depth/2); @@ -49,36 +49,36 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; } -@mixin v-valo-panel-style { - background: v-valo-panel-background-color(); +@mixin valo-panel-style { + background: valo-panel-background-color(); border-radius: $v-panel-border-radius; - border: $v-panel-border-width solid v-valo-panel-border-color(v-valo-panel-background-color()); - box-shadow: v-valo-shadow($shadow-style: $v-panel-shadow-style); + border: $v-panel-border-width solid valo-panel-border-color(valo-panel-background-color()); + box-shadow: valo-shadow($shadow-style: $v-panel-shadow-style); } -@mixin v-valo-panel-caption-style ($background-color: $v-panel-caption-background-color) { +@mixin valo-panel-caption-style ($background-color: $v-panel-caption-background-color) { @include box-sizing(border-box); padding: 0 round($v-unit-size/3); line-height: $v-unit-size; - $_bg: v-valo-panel-caption-background-color($background-color); + $_bg: valo-panel-caption-background-color($background-color); $_border-color: scale-color($_bg, $lightness: -$v-panel-caption-bevel-depth/2, $saturation: -$v-panel-caption-bevel-depth/2); border-bottom: $v-panel-border-width solid $_border-color; border-bottom-color: rgba($_border-color, .8); - @include v-valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth); - color: v-valo-font-color($_bg); + @include valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth); + color: valo-font-color($_bg); font-weight: $v-caption-font-weight; font-size: $v-caption-font-size; - box-shadow: v-valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth); + box-shadow: valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth); } -@mixin v-valo-panel-well-style { +@mixin valo-panel-well-style { $_bg: scale-color(adjust-color($v-app-background-color, $lightness: -2%), $saturation: -1.5%); background: $_bg; - box-shadow: v-valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style))); + box-shadow: valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style))); border-radius: $v-border-radius; - border: $v-border-width solid v-valo-panel-border-color(v-valo-panel-background-color()); + border: $v-border-width solid valo-panel-border-color(valo-panel-background-color()); .v-panel-caption { background: transparent; @@ -87,7 +87,7 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; } -@mixin v-valo-panel-borderless-style { +@mixin valo-panel-borderless-style { background: transparent; border: none; box-shadow: none; @@ -99,7 +99,7 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; } -@mixin v-valo-panel-adjust-content-margins { +@mixin valo-panel-adjust-content-margins { > .v-margin-top { padding-top: round($v-unit-size/3); } diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss index 056906f7c7..020c04d927 100644 --- a/WebContent/VAADIN/themes/valo/components/_popupview.scss +++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss @@ -1,3 +1,3 @@ -@mixin v-valo-popupview ($primary-stylename: v-popupview) { +@mixin valo-popupview ($primary-stylename: v-popupview) { }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss index 5e8fd21fa3..a5b2d98e06 100644 --- a/WebContent/VAADIN/themes/valo/components/_progressbar.scss +++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss @@ -1,36 +1,36 @@ $v-progressbar-border-radius: $v-border-radius !default; -@mixin v-valo-progressbar ($primary-stylename: v-progressbar) { +@mixin valo-progressbar ($primary-stylename: v-progressbar) { .#{$primary-stylename}-wrapper { - @include v-valo-progressbar-track-style; + @include valo-progressbar-track-style; } .#{$primary-stylename}-indicator { - @include v-valo-progressbar-indicator-style; + @include valo-progressbar-indicator-style; } } -@mixin v-valo-progressbar-track-style { +@mixin valo-progressbar-track-style { border-radius: $v-progressbar-border-radius; height: round($v-unit-size/4); min-width: $v-unit-size * 2; - @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); - box-shadow: v-valo-textfield-box-shadow(); + @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); + box-shadow: valo-textfield-box-shadow(); @include box-sizing(border-box); } -@mixin v-valo-progressbar-indicator-style { +@mixin valo-progressbar-indicator-style { border-radius: $v-progressbar-border-radius; height: inherit; min-width: max($v-border-radius*2, 3px); - @include v-valo-gradient($color: v-valo-selection-color()); - box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color(), $bevel-depth: $v-bevel-depth/2); + @include valo-gradient($color: valo-selection-color()); + box-shadow: valo-button-box-shadow($background-color: valo-selection-color(), $bevel-depth: $v-bevel-depth/2); border: $v-button-border-width solid; - border-color: v-valo-button-border-color($v-bevel-style, $v-bevel-depth/2, v-valo-selection-color()); + border-color: valo-button-border-color($v-bevel-style, $v-bevel-depth/2, valo-selection-color()); @include box-sizing(border-box); } diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 49b2eda008..4899f210a8 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -1,4 +1,4 @@ -@mixin v-valo-richtextarea ($primary-stylename: v-richtextarea) { +@mixin valo-richtextarea ($primary-stylename: v-richtextarea) { .#{$primary-stylename} .gwt-ToggleButton, .#{$primary-stylename} .gwt-PushButton { display: inline-block; diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss index bb3fd989a4..de8af384de 100644 --- a/WebContent/VAADIN/themes/valo/components/_slider.scss +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -5,7 +5,7 @@ $v-slider-handle-height: round($v-unit-size/1.8) !default; $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; -@mixin v-valo-slider ($primary-stylename: v-slider) { +@mixin valo-slider ($primary-stylename: v-slider) { // Round to an even number $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2; @@ -33,7 +33,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; } .#{$primary-stylename}-base { - @include v-valo-progressbar-track-style; + @include valo-progressbar-track-style; min-width: $v-unit-size * 2; height: $v-slider-track-size; margin: round(($v-unit-size - $v-slider-track-size)/2) round($v-slider-handle-width/2); @@ -42,7 +42,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; border-radius: $v-slider-track-border-radius; &:after { - @include v-valo-progressbar-indicator-style; + @include valo-progressbar-indicator-style; min-width: 0; content: ""; display: inline-block; @@ -64,11 +64,11 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; vertical-align: top; &:before { - @include v-valo-button-style; + @include valo-button-style; } &:after { - @include v-valo-button-focus-style; + @include valo-button-focus-style; opacity: 0; @if $v-animations-enabled { @include transition(opacity 200ms); @@ -95,7 +95,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; } .#{$primary-stylename}-feedback { - @include v-valo-tooltip-style; + @include valo-tooltip-style; } @@ -109,7 +109,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; height: $v-unit-size * 2; // Effectively min-height .#{$primary-stylename}-base { - @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); + @include valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); min-width: 0; width: $v-slider-track-size; height: 100% !important; @@ -118,7 +118,7 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; &:after { margin-left: 0; - @include v-valo-gradient($color: v-valo-selection-color(), $direction: to right); + @include valo-gradient($color: valo-selection-color(), $direction: to right); .v-ie8 & { top: round($v-slider-handle-width/2) - 2px; diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss index 622b24a3a2..54dcc6c4e2 100644 --- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -1,7 +1,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; -@mixin v-valo-splitpanel($primary-stylename : v-splitpanel) { +@mixin valo-splitpanel($primary-stylename : v-splitpanel) { // Disable splitter shadow (should most likely be a variable) $copy: $v-shadow-depth; @@ -22,7 +22,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; .#{$primary-stylename}-hsplitter div, .#{$primary-stylename}-vsplitter div { - @include v-valo-button-style; + @include valo-button-style; @include box-sizing(border-box); height: auto; padding: 0; @@ -62,7 +62,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; cursor: e-resize; cursor: col-resize; $color: $v-button-background-color or $v-app-background-color; - @include v-valo-gradient($color: $color, $direction: to right); + @include valo-gradient($color: $color, $direction: to right); &:before { width: 0; @@ -105,7 +105,7 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; -@mixin v-valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) { +@mixin valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) { .#{$primary-stylename}-vsplitter-#{$stylename}, .#{$primary-stylename}-hsplitter-#{$stylename} { div { diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 59ad6069af..18d32d82e0 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -11,7 +11,7 @@ $v-table-background-color: null !default; -@mixin v-valo-table-global ($primary-stylename: v-table) { +@mixin valo-table-global ($primary-stylename: v-table) { .#{$primary-stylename}-header table, .#{$primary-stylename}-footer table, @@ -52,7 +52,7 @@ $v-table-background-color: null !default; -@function v-valo-table-background-color($context: $v-app-background-color) { +@function valo-table-background-color($context: $v-app-background-color) { @if is-dark-color($context) { @return darken($context, 2%); } @@ -60,9 +60,9 @@ $v-table-background-color: null !default; } -@mixin v-valo-table ($primary-stylename: v-table) { +@mixin valo-table ($primary-stylename: v-table) { - $background-color: $v-table-background-color or v-valo-table-background-color(); + $background-color: $v-table-background-color or valo-table-background-color(); $border-color: $v-table-border-color or darken($v-app-background-color, max(5%, $v-bevel-depth/3)); .#{$primary-stylename} { @@ -81,10 +81,10 @@ $v-table-background-color: null !default; .#{$primary-stylename}-footer-wrap, .#{$primary-stylename}-header-drag { border: $v-table-border-width solid $border-color; - @include v-valo-gradient($v-app-background-color); + @include valo-gradient($v-app-background-color); white-space: nowrap; font-size: $v-table-header-font-size; - text-shadow: v-valo-button-text-shadow($v-app-background-color, $v-bevel-depth); + text-shadow: valo-button-text-shadow($v-app-background-color, $v-bevel-depth); } .#{$primary-stylename}-header-wrap { @@ -185,15 +185,15 @@ $v-table-background-color: null !default; } .#{$primary-stylename} [class*="-row"].v-selected { - $selected-border-color: darken(v-valo-selection-color(), 8%); + $selected-border-color: darken(valo-selection-color(), 8%); - @include v-valo-gradient(v-valo-selection-color()); + @include valo-gradient(valo-selection-color()); background-origin: border-box; - color: v-valo-font-color(v-valo-selection-color(), 0.9); - text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth); + color: valo-font-color(valo-selection-color(), 0.9); + text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth); + .v-selected { - $gradient-end: first(last(v-valo-gradient-color-stops(v-valo-selection-color()))); + $gradient-end: first(last(valo-gradient-color-stops(valo-selection-color()))); background: $gradient-end; td { @@ -233,17 +233,17 @@ $v-table-background-color: null !default; } .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before { - @include v-valo-table-sort-asc-icon-style; + @include valo-table-sort-asc-icon-style; } .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { - @include v-valo-table-sort-desc-icon-style; + @include valo-table-sort-desc-icon-style; } .#{$primary-stylename}-focus { $outline-width: max($v-table-border-width, 1px); - outline: $outline-width solid v-valo-focus-color(); + outline: $outline-width solid valo-focus-color(); outline-offset: -$outline-width; } @@ -261,18 +261,18 @@ $v-table-background-color: null !default; } .#{$primary-stylename}-focus-slot-right { - border-right: 2px solid rgba(v-valo-focus-color(), .5); + border-right: 2px solid rgba(valo-focus-color(), .5); } .#{$primary-stylename}-focus-slot-left { - border-left: 2px solid rgba(v-valo-focus-color(), .5); + border-left: 2px solid rgba(valo-focus-color(), .5); left: 0; right: auto; margin-left: 0 !important; } .#{$primary-stylename}-column-selector { - @include v-valo-button-style; + @include valo-button-style; position: absolute; z-index: 2; top: round($v-unit-size/-4); @@ -300,10 +300,10 @@ $v-table-background-color: null !default; border-radius: inherit; } &:active:after { - @include v-valo-button-active-style; + @include valo-button-active-style; } &:before { - @include v-valo-table-column-selector-icon-style; + @include valo-table-column-selector-icon-style; } } @@ -315,7 +315,7 @@ $v-table-background-color: null !default; .v-on, .v-off { &:before { - @include v-valo-table-column-visible-icon-style; + @include valo-table-column-visible-icon-style; font-size: 0.9em; margin-right: round($v-unit-size/6); } @@ -337,7 +337,7 @@ $v-table-background-color: null !default; tr { display: block; - @include v-valo-drag-element-style; + @include valo-drag-element-style; &[style*="hidden"] { @@ -369,14 +369,14 @@ $v-table-background-color: null !default; // Drag'n'drop styles .#{$primary-stylename}-drag .#{$primary-stylename}-body { - box-shadow: 0 0 0 2px rgba(v-valo-focus-color(), .5); + box-shadow: 0 0 0 2px rgba(valo-focus-color(), .5); - @if color-luminance(v-valo-focus-color()) + 50 < color-luminance($background-color) { - border-color: v-valo-focus-color(); + @if color-luminance(valo-focus-color()) + 50 < color-luminance($background-color) { + border-color: valo-focus-color(); } .v-ie8 & { - border-color: v-valo-focus-color(); + border-color: valo-focus-color(); } .#{$primary-stylename}-focus { @@ -391,7 +391,7 @@ $v-table-background-color: null !default; height: $v-table-row-height + $v-table-border-width; left: 0; right: 0; - background: v-valo-focus-color(); + background: valo-focus-color(); @include opacity(.2); } @@ -403,10 +403,10 @@ $v-table-background-color: null !default; height: 2px; left: 0; right: 0; - background: v-valo-focus-color(); + background: valo-focus-color(); font-size: $v-font-size * 2; line-height: 2px; - color: v-valo-focus-color(); + color: valo-focus-color(); text-indent: round($v-font-size/-4); text-shadow: 0 0 1px $background-color, 0 0 1px $background-color; } @@ -430,22 +430,22 @@ $v-table-background-color: null !default; -@mixin v-valo-table-sort-asc-icon-style { +@mixin valo-table-sort-asc-icon-style { content: '\f0dd'; font-family: FontAwesome; } -@mixin v-valo-table-sort-desc-icon-style { +@mixin valo-table-sort-desc-icon-style { content: '\f0de'; font-family: FontAwesome; } -@mixin v-valo-table-column-selector-icon-style { +@mixin valo-table-column-selector-icon-style { font-family: FontAwesome; content: "\f013"; } -@mixin v-valo-table-column-visible-icon-style { +@mixin valo-table-column-visible-icon-style { content: "\f00c"; font-family: FontAwesome; } @@ -453,7 +453,7 @@ $v-table-background-color: null !default; -@mixin v-valo-table-no-stripes ($primary-stylename: v-table) { +@mixin valo-table-no-stripes ($primary-stylename: v-table) { .#{$primary-stylename}-row, .#{$primary-stylename}-row-odd { background: transparent; @@ -463,7 +463,7 @@ $v-table-background-color: null !default; -@mixin v-valo-table-no-vertical-lines ($primary-stylename: v-table) { +@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) { .#{$primary-stylename}-cell-content, [class*="row"].v-selected .#{$primary-stylename}-cell-content { border-left-color: transparent; @@ -471,7 +471,7 @@ $v-table-background-color: null !default; } } -@mixin v-valo-table-no-horizontal-lines ($primary-stylename: v-table) { +@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) { .#{$primary-stylename}-cell-content, [class*="row"].v-selected .#{$primary-stylename}-cell-content { border-top-color: transparent; @@ -479,13 +479,13 @@ $v-table-background-color: null !default; } } -@mixin v-valo-table-no-header ($primary-stylename: v-table) { +@mixin valo-table-no-header ($primary-stylename: v-table) { .#{$primary-stylename}-header-wrap { display: none; } } -@mixin v-valo-table-borderless ($primary-stylename: v-table) { +@mixin valo-table-borderless ($primary-stylename: v-table) { .#{$primary-stylename}-header-wrap, .#{$primary-stylename}-footer-wrap, .#{$primary-stylename}-header-drag, diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index af608c8e1d..c78a9567f7 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -3,7 +3,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; -@mixin v-valo-tabsheet-global ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer, .#{$primary-stylename}-spacertd, .#{$primary-stylename}-deco, @@ -22,7 +22,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; -@mixin v-valo-tabsheet ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet ($primary-stylename: v-tabsheet) { $_scale: if( is-dark-color($v-app-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) ); $border-color: scale-color($v-app-background-color, $lightness: $_scale); @@ -98,7 +98,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } &:hover { - color: v-valo-selection-color(); + color: valo-selection-color(); } &.v-disabled { @@ -119,14 +119,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; outline: none; .v-caption { - color: v-valo-selection-color(); - border-bottom: $v-border-width solid v-valo-selection-color(); + color: valo-selection-color(); + border-bottom: $v-border-width solid valo-selection-color(); } } .#{$primary-stylename}-tabitem-selected .v-caption.v-caption { - border-bottom: $v-border-width*2 solid v-valo-selection-color(); - color: v-valo-selection-color(); + border-bottom: $v-border-width*2 solid valo-selection-color(); + color: valo-selection-color(); } .#{$primary-stylename}-caption-close { @@ -139,13 +139,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; border-radius: round($v-border-radius/2); &:hover { - background: v-valo-selection-color(); - color: v-valo-font-color(v-valo-selection-color()); + background: valo-selection-color(); + color: valo-font-color(valo-selection-color()); } &:active { - background: darken(v-valo-selection-color(), 5%); - color: v-valo-font-color(v-valo-selection-color()); + background: darken(valo-selection-color(), 5%); + color: valo-font-color(valo-selection-color()); } } @@ -195,12 +195,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:hover { @include opacity(1); - color: v-valo-selection-color(); + color: valo-selection-color(); } &:active { @include opacity(.7); - color: v-valo-selection-color(); + color: valo-selection-color(); } &::-moz-focus-inner { @@ -212,14 +212,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; [class*="Next"] { padding-left: round($v-unit-size/8); &:before { - @include v-valo-tabsheet-scroller-next-icon-style; + @include valo-tabsheet-scroller-next-icon-style; } } [class*="Prev"] { padding-right: round($v-unit-size/8); &:before { - @include v-valo-tabsheet-scroller-prev-icon-style; + @include valo-tabsheet-scroller-prev-icon-style; } } @@ -233,7 +233,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @if $v-tabsheet-content-animation-enabled { .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget { - @include v-valo-anim-fade-in(300ms); + @include valo-anim-fade-in(300ms); } } @@ -243,13 +243,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; -@mixin v-valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-tabcontainer { text-align: center; } } -@mixin v-valo-tabsheet-equal-width-tabs ($primary-stylename: v-tabsheet, $flex: false) { +@mixin valo-tabsheet-equal-width-tabs ($primary-stylename: v-tabsheet, $flex: false) { .#{$primary-stylename}-tabcontainer { table, tbody, @@ -276,7 +276,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } } -@mixin v-valo-tabsheet-icons-on-top ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-icons-on-top ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-tabs { height: $v-unit-size * 2; @@ -308,7 +308,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } } -@mixin v-valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-caption-close { visibility: hidden; } @@ -318,18 +318,18 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } } -@mixin v-valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) { .#{$primary-stylename}-tabs { padding: 0 round($v-unit-size/4); } } -@mixin v-valo-tabsheet-scroller-prev-icon-style { +@mixin valo-tabsheet-scroller-prev-icon-style { font-family: FontAwesome; content: "\f053"; } -@mixin v-valo-tabsheet-scroller-next-icon-style { +@mixin valo-tabsheet-scroller-next-icon-style { font-family: FontAwesome; content: "\f054"; } diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 00226adcaf..3ecf3d80ca 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -1,25 +1,25 @@ -@mixin v-valo-textarea ($primary-stylename: v-textarea) { +@mixin valo-textarea ($primary-stylename: v-textarea) { .#{$primary-stylename} { - @include v-valo-textarea-style; + @include valo-textarea-style; width: $v-default-field-width; } .#{$primary-stylename}-readonly { - @include v-valo-textfield-readonly-style; + @include valo-textfield-readonly-style; } } -@mixin v-valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color) { $unit-size: $unit-size or $v-unit-size; - @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, $unit-size: $unit-size, $border-radius: $border-radius, $background-color: $background-color); diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 14735a4f9d..3845df5232 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -12,7 +12,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@function v-valo-textfield-background-color ($context) { +@function valo-textfield-background-color ($context) { $bg-color: lighten($context, 8%); @if is-dark-color($context) { $bg-color: darken($context, 4%); @@ -24,13 +24,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@function v-valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@function valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) { @if $bevel-depth == 0 and $shadow-depth == 0 { @return null; } - $_bevel: v-valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%)); - $_shadow: v-valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + $_bevel: valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%)); + $_shadow: valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth); @if $_bevel and $_shadow { @return $_bevel, $_shadow; @@ -47,7 +47,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) { +@mixin valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) { height: $unit-size; $padding-width: ceil($unit-size/6); @if $border-radius { @@ -58,9 +58,9 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@function v-valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, +@function valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $background-color: $v-textfield-background-color) { - $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-app-background-color); $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2))); $border-color: scale-color($border-color, $saturation: -$bevel-depth/2); @@ -70,12 +70,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, $background-color: $v-textfield-background-color) { - $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $background-color: $background-color or valo-textfield-background-color($v-app-background-color); $unit-size: $unit-size or $v-unit-size; @include appearance(none); @@ -83,12 +83,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; font: inherit; font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null); font-weight: $v-textfield-font-weight; - @include v-valo-textfield-size($unit-size, $border-radius); + @include valo-textfield-size($unit-size, $border-radius); border-radius: $border-radius; - border: $v-textfield-border-width solid v-valo-textfield-border-color($bevel-style, $bevel-depth, $background-color); + border: $v-textfield-border-width solid valo-textfield-border-color($bevel-style, $bevel-depth, $background-color); background: $background-color; - color: v-valo-font-color($background-color); - box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + color: valo-font-color($background-color); + box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); @if $v-animations-enabled { @include transition(box-shadow 180ms, border 180ms); @@ -99,20 +99,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } &:focus { - @include v-valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + @include valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); } // TODO allow parent selector to be used in interpolation &.v-textfield-prompt, &.v-textarea-prompt { - @include v-valo-textfield-prompt-style($background-color); + @include valo-textfield-prompt-style($background-color); } } -@mixin v-valo-textfield-prompt-style ($background-color) { - $font-color: v-valo-font-color($background-color); +@mixin valo-textfield-prompt-style ($background-color) { + $font-color: valo-font-color($background-color); $font-color: mix($background-color, $font-color); @if is-dark-color($background-color) and saturation($background-color) > 50% { $font-color: scale-color($font-color, $lightness: 20%); @@ -122,49 +122,49 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } -@mixin v-valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, +@mixin valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) { outline: none; @if $v-animations-enabled { @include transition(none); } - $focus-color: v-valo-focus-color(); + $focus-color: valo-focus-color(); @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) { border-color: $focus-color; } - box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), - v-valo-focus-box-shadow($color: $focus-color); + box-shadow: valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), + valo-focus-box-shadow($color: $focus-color); } -@mixin v-valo-textfield-readonly-style { +@mixin valo-textfield-readonly-style { background: transparent; box-shadow: none; &:focus { - box-shadow: v-valo-focus-box-shadow(); + box-shadow: valo-focus-box-shadow(); } } -@mixin v-valo-textfield ($primary-stylename: v-textfield) { +@mixin valo-textfield ($primary-stylename: v-textfield) { .#{$primary-stylename} { - @include v-valo-textfield-style; + @include valo-textfield-style; width: $v-default-field-width; } .#{$primary-stylename}-readonly { - @include v-valo-textfield-readonly-style; + @include valo-textfield-readonly-style; } } -@mixin v-valo-textfield-borderless-style ($background-color: transparent) { +@mixin valo-textfield-borderless-style ($background-color: transparent) { border: none; border-radius: 0; background: $background-color; @@ -177,7 +177,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@mixin v-valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) { +@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) { .v-slot-#{$stylename} { position: relative; } @@ -186,7 +186,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; padding: 0; .v-captiontext { - @include v-valo-caption-style; + @include valo-caption-style; margin: 0; } diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 0dcabbcf84..a5a2f4e904 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -4,7 +4,7 @@ $v-tree-expand-animation-enabled: false !default; @if $v-tree-expand-animation-enabled { - @include keyframes(v-valo-tree-node-open) { + @include keyframes(valo-tree-node-open) { 0% { max-height: 0; } @@ -13,7 +13,7 @@ $v-tree-expand-animation-enabled: false !default; } } - @include keyframes(v-valo-tree-node-close) { + @include keyframes(valo-tree-node-close) { 0% { max-height: $v-tree-row-height * 10; } @@ -24,7 +24,7 @@ $v-tree-expand-animation-enabled: false !default; } -@mixin v-valo-tree ($primary-stylename: v-tree) { +@mixin valo-tree ($primary-stylename: v-tree) { .#{$primary-stylename} { position: relative; @@ -52,7 +52,7 @@ $v-tree-expand-animation-enabled: false !default; margin-left: -1.9em; //background: red; vertical-align: top; - @include v-valo-tree-collapsed-icon-style; + @include valo-tree-collapsed-icon-style; text-align: center; } } @@ -75,7 +75,7 @@ $v-tree-expand-animation-enabled: false !default; z-index: 2; &:before { - @include v-valo-tree-collapsed-icon-style; + @include valo-tree-collapsed-icon-style; display: inline-block; width: .5em; text-align: center; @@ -137,16 +137,16 @@ $v-tree-expand-animation-enabled: false !default; } .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before { - @include v-valo-tree-expanded-icon-style; + @include valo-tree-expanded-icon-style; @if $v-tree-animations-enabled { @include transform(rotate(90deg)); - @include v-valo-tree-collapsed-icon-style; + @include valo-tree-collapsed-icon-style; } } .v-ie8 & .#{$primary-stylename}-node-expanded:before { - @include v-valo-tree-expanded-icon-style(true); + @include valo-tree-expanded-icon-style(true); } @@ -155,19 +155,19 @@ $v-tree-expand-animation-enabled: false !default; // This a v-tree-node-caption element &:after { opacity: 1; - border: 1px solid v-valo-focus-color(); + border: 1px solid valo-focus-color(); } } .#{$primary-stylename}-node-selected { - color: v-valo-font-color(v-valo-selection-color(), 0.9); - text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth); + color: valo-font-color(valo-selection-color(), 0.9); + text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth); &:after { opacity: 1; - @include v-valo-gradient(v-valo-selection-color()); + @include valo-gradient(valo-selection-color()); border: none; .v-ie8 & { @@ -176,7 +176,7 @@ $v-tree-expand-animation-enabled: false !default; } .v-ie8 & { - @include v-valo-gradient(v-valo-selection-color()); + @include valo-gradient(valo-selection-color()); } } @@ -190,12 +190,12 @@ $v-tree-expand-animation-enabled: false !default; @if $v-tree-expand-animation-enabled { .#{$primary-stylename}-node-children[style*="display: none"] { - @include animation(v-valo-tree-node-close 400ms ease-out forwards); + @include animation(valo-tree-node-close 400ms ease-out forwards); display: block !important; } .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children { - @include animation(v-valo-tree-node-open 400ms ease-in); + @include animation(valo-tree-node-open 400ms ease-in); } } @@ -210,21 +210,21 @@ $v-tree-expand-animation-enabled: false !default; position: absolute; height: 2px; width: 100%; - background: v-valo-focus-color(); + background: valo-focus-color(); font-size: $v-font-size * 2; line-height: 2px; - color: v-valo-focus-color(); + color: valo-focus-color(); text-indent: round($v-font-size/-4); text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color; } .#{$primary-stylename}-node-caption-drag-center { - box-shadow: 0 0 0 2px v-valo-focus-color(); + box-shadow: 0 0 0 2px valo-focus-color(); position: relative; border-radius: $v-border-radius; .v-ie8 & { - outline: 2px solid v-valo-focus-color(); + outline: 2px solid valo-focus-color(); } } @@ -240,12 +240,12 @@ $v-tree-expand-animation-enabled: false !default; } -@mixin v-valo-tree-collapsed-icon-style { +@mixin valo-tree-collapsed-icon-style { content: "\f0da"; font-family: FontAwesome; } -@mixin v-valo-tree-expanded-icon-style ($force: false) { +@mixin valo-tree-expanded-icon-style ($force: false) { @if $v-tree-animations-enabled == false or $force { content: "\f0d7"; font-family: FontAwesome; diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss index a4083a1901..e8cd22fa9a 100644 --- a/WebContent/VAADIN/themes/valo/components/_treetable.scss +++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss @@ -1,4 +1,4 @@ -@mixin v-valo-treetable ($primary-stylename: v-treetable) { +@mixin valo-treetable ($primary-stylename: v-treetable) { .v-table-cell-wrapper { //position: relative; } @@ -18,10 +18,10 @@ } .#{$primary-stylename}-node-closed:before { - @include v-valo-tree-collapsed-icon-style; + @include valo-tree-collapsed-icon-style; } .#{$primary-stylename}-node-open:before { - @include v-valo-tree-expanded-icon-style($force: true); + @include valo-tree-expanded-icon-style($force: true); } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss index e2951802bc..b3927576ed 100644 --- a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss @@ -1,10 +1,10 @@ -@mixin v-valo-twincolselect ($primary-stylename: v-select-twincol) { +@mixin valo-twincolselect ($primary-stylename: v-select-twincol) { .#{$primary-stylename} { white-space: normal; select { - @include v-valo-nativeselect-select-style; + @include valo-nativeselect-select-style; } &:not(.v-has-width) { @@ -24,7 +24,7 @@ .#{$primary-stylename}-caption-left, .#{$primary-stylename}-caption-right { - @include v-valo-caption-style; + @include valo-caption-style; } .#{$primary-stylename}-buttons { @@ -35,7 +35,7 @@ min-width: 3.5em; .v-button { - @include v-valo-widget-style; + @include valo-widget-style; position: absolute; left: round($v-unit-size/4); right: round($v-unit-size/4); @@ -67,11 +67,11 @@ } .v-button-wrap:before { - @include v-valo-twincolselect-remove-icon-style; + @include valo-twincolselect-remove-icon-style; } .v-button:first-child .v-button-wrap:before { - @include v-valo-twincolselect-add-icon-style; + @include valo-twincolselect-add-icon-style; } } @@ -79,12 +79,12 @@ -@mixin v-valo-twincolselect-add-icon-style { +@mixin valo-twincolselect-add-icon-style { font-family: FontAwesome; content: "\f054"; } -@mixin v-valo-twincolselect-remove-icon-style { +@mixin valo-twincolselect-remove-icon-style { font-family: FontAwesome; content: "\f053"; } diff --git a/WebContent/VAADIN/themes/valo/components/_upload.scss b/WebContent/VAADIN/themes/valo/components/_upload.scss index 14a4501966..103c21b6fe 100644 --- a/WebContent/VAADIN/themes/valo/components/_upload.scss +++ b/WebContent/VAADIN/themes/valo/components/_upload.scss @@ -1,5 +1,5 @@ -@mixin v-valo-upload ($primary-stylename: v-upload) { +@mixin valo-upload ($primary-stylename: v-upload) { .#{$primary-stylename} .v-button { - @include v-valo-widget-style; + @include valo-widget-style; } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_widget.scss b/WebContent/VAADIN/themes/valo/components/_widget.scss index fe41bd2f35..20e3b2b3c9 100644 --- a/WebContent/VAADIN/themes/valo/components/_widget.scss +++ b/WebContent/VAADIN/themes/valo/components/_widget.scss @@ -1,6 +1,6 @@ // -// @mixin v-valo-widget-style -@mixin v-valo-widget-style { +// @mixin valo-widget-style +@mixin valo-widget-style { // Baseline expectations for all Vaadin widgets @include box-sizing(border-box); display: inline-block; @@ -19,8 +19,8 @@ } -@mixin v-valo-widget { +@mixin valo-widget { .v-widget { - @include v-valo-widget-style; + @include valo-widget-style; } } diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index a006ca1361..10758c7829 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -5,17 +5,17 @@ $v-window-animations-enabled: $v-animations-enabled !default; @if $v-window-animations-enabled { - @include keyframes(v-valo-modal-window-indication) { + @include keyframes(valo-modal-window-indication) { 0% { opacity: 0; } 100% { opacity: 1; } } } -@mixin v-valo-window ($primary-stylename: v-window) { +@mixin valo-window ($primary-stylename: v-window) { .#{$primary-stylename} { - @include v-valo-overlay-style; + @include valo-overlay-style; @if $v-window-animations-enabled and $v-window-open-animation { @include animation($v-window-open-animation); @@ -25,7 +25,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; @if $v-window-shadow-style == none { box-shadow: none; } @else { - box-shadow: v-valo-shadow($shadow-style: $v-window-shadow-style); + box-shadow: valo-shadow($shadow-style: $v-window-shadow-style); } } border-radius: $v-window-border-radius; @@ -76,7 +76,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; right: 0; left: 0; height: 1px; - $_bg: v-valo-overlay-background-color(); + $_bg: valo-overlay-background-color(); background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%); } } @@ -90,7 +90,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: blend-normal(rgba(v-valo-font-color(v-valo-overlay-background-color()), .7), v-valo-overlay-background-color()); + color: blend-normal(rgba(valo-font-color(valo-overlay-background-color()), .7), valo-overlay-background-color()); } .#{$primary-stylename}-closebox, @@ -118,7 +118,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; &:hover { @include opacity(1); - color: v-valo-selection-color(); + color: valo-selection-color(); } &:active { @@ -127,7 +127,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; } .#{$primary-stylename}-closebox { - @include v-valo-window-close-icon-style; + @include valo-window-close-icon-style; } .#{$primary-stylename}-maximizebox, @@ -141,11 +141,11 @@ $v-window-animations-enabled: $v-animations-enabled !default; } .#{$primary-stylename}-maximizebox { - @include v-valo-window-maximize-icon-style; + @include valo-window-maximize-icon-style; } .#{$primary-stylename}-restorebox { - @include v-valo-window-restore-icon-style; + @include valo-window-restore-icon-style; } .v-window > .popupContent, @@ -161,10 +161,10 @@ $v-window-animations-enabled: $v-animations-enabled !default; margin-top: 0 !important; > .v-scrollable { - @include v-valo-panel-adjust-content-margins; + @include valo-panel-adjust-content-margins; > .v-formlayout { - @include v-valo-formlayout-margins($all: round($v-unit-size/3)); + @include valo-formlayout-margins($all: round($v-unit-size/3)); } position: relative; @@ -179,7 +179,7 @@ $v-window-animations-enabled: $v-animations-enabled !default; z-index: 2; top: 0; height: 1px; - background: v-valo-overlay-background-color(); + background: valo-overlay-background-color(); left: 0; right: 0; } @@ -252,20 +252,20 @@ $v-window-animations-enabled: $v-animations-enabled !default; } -@mixin v-valo-window-close-icon-style { +@mixin valo-window-close-icon-style { &:before { // times cross content: "\00d7"; } } -@mixin v-valo-window-maximize-icon-style { +@mixin valo-window-maximize-icon-style { &:before { content: "+"; } } -@mixin v-valo-window-restore-icon-style { +@mixin valo-window-restore-icon-style { &:before { // en-dash content: "\2013"; |