diff options
Diffstat (limited to 'WebContent/VAADIN')
57 files changed, 661 insertions, 661 deletions
diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss index 41bed8cd5f..814604c03e 100644 --- a/WebContent/VAADIN/themes/valo/_valo.scss +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -53,16 +53,16 @@ // Include global styles directly, without a theme name prefix (this is done only once) -@include v-valo-global; +@include valo-global; // The main theme mixin @mixin v-valo { - @include v-valo-common; - @include v-valo-components; - @include v-valo-notification; + @include valo-common; + @include valo-components; + @include valo-notification; - @if $v-valo-include-common-stylenames { - @include v-valo-common-stylenames; + @if $valo-include-common-stylenames { + @include valo-common-stylenames; } } 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"; diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss index b21d2f0b18..dbcea242d2 100644 --- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss +++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss @@ -6,19 +6,19 @@ @import "lora/lora"; -@mixin v-valo-fonts { - $v-valo-fonts-pathPrefix: null; +@mixin valo-fonts { + $valo-fonts-pathPrefix: null; @if $v-relative-paths == false { - $v-valo-fonts-pathPrefix: "../valo/fonts/"; + $valo-fonts-pathPrefix: "../valo/fonts/"; } // Font Awesome - @include v-valo-icon-font(FontAwesome, #{$v-valo-fonts-pathPrefix}font-awesome/fontawesome-webfont); + @include valo-icon-font(FontAwesome, #{$valo-fonts-pathPrefix}font-awesome/fontawesome-webfont); } -@mixin v-valo-icon-font($font-family, $file-name) { +@mixin valo-icon-font($font-family, $file-name) { @include font-face($font-family, $file-name); .#{$font-family} { @@ -38,4 +38,4 @@ // Include directly to avoid trapping inside a parent selector // TODO move inside the theme main mixin once we can use Sass 3.3 (@at-root) -@include v-valo-fonts;
\ No newline at end of file +@include valo-fonts;
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss index 67a9104482..dcfcaf1a4a 100644 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -1,7 +1,7 @@ // Common styles for components // About 40KB of CSS output -@mixin v-valo-common-stylenames { +@mixin valo-common-stylenames { $v-scaling-factor--small: 0.8 !default; $v-scaling-factor--large: 1.2 !default; @@ -14,143 +14,143 @@ .v-button-primary { - @include v-valo-button-style($background-color: v-valo-selection-color()); + @include valo-button-style($background-color: valo-selection-color()); padding: 0 round($v-unit-size/1.4); font-weight: bold; } .v-button-friendly { - @include v-valo-button-style($background-color: #2c9720); + @include valo-button-style($background-color: #2c9720); } .v-button-danger { - @include v-valo-button-style($background-color: $v-error-indicator-color); + @include valo-button-style($background-color: $v-error-indicator-color); } .v-button-borderless { - @include v-valo-button-borderless-style; + @include valo-button-borderless-style; } .v-button-link { - @include v-valo-button-borderless-style; - @include v-valo-link-style; + @include valo-button-borderless-style; + @include valo-link-style; } .v-button-small { - @include v-valo-button-style($unit-size: $v-unit-size--small); + @include valo-button-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-button-large { - @include v-valo-button-style($unit-size: $v-unit-size--large); + @include valo-button-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } .v-button-icon-align-right { - @include v-valo-button-icon-align-right-style; + @include valo-button-icon-align-right-style; } .v-tabsheet-centered-tabs { - @include v-valo-tabsheet-centered-tabs; + @include valo-tabsheet-centered-tabs; } .v-tabsheet-equal-width-tabs { - @include v-valo-tabsheet-equal-width-tabs($flex: false); + @include valo-tabsheet-equal-width-tabs($flex: false); } .v-tabsheet-icons-on-top { - @include v-valo-tabsheet-icons-on-top; + @include valo-tabsheet-icons-on-top; } .v-panel-borderless { - @include v-valo-panel-borderless-style; + @include valo-panel-borderless-style; } .v-formlayout.light { - @include v-valo-formlayout-light-style; + @include valo-formlayout-light-style; } .v-textfield-borderless, .v-textarea-borderless { - @include v-valo-textfield-borderless-style; + @include valo-textfield-borderless-style; } .v-textfield-small { - @include v-valo-textfield-style($unit-size: $v-unit-size--small); + @include valo-textfield-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-textfield-large { - @include v-valo-textfield-style($unit-size: $v-unit-size--large); + @include valo-textfield-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } - @include v-valo-textfield-inline-icon($stylename: inline-icon); + @include valo-textfield-inline-icon($stylename: inline-icon); .v-textarea-small { - @include v-valo-textarea-style($unit-size: $v-unit-size--small); + @include valo-textarea-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-textarea-large { - @include v-valo-textarea-style($unit-size: $v-unit-size--large); + @include valo-textarea-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } .v-filterselect-small { - @include v-valo-combobox-style($unit-size: $v-unit-size--small); + @include valo-combobox-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-filterselect-large { - @include v-valo-combobox-style($unit-size: $v-unit-size--large); + @include valo-combobox-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } .v-datefield-small { - @include v-valo-datefield-style($unit-size: $v-unit-size--small); + @include valo-datefield-style($unit-size: $v-unit-size--small); } .v-datefield-large { - @include v-valo-datefield-style($unit-size: $v-unit-size--large); + @include valo-datefield-style($unit-size: $v-unit-size--large); } .v-checkbox-small { - @include v-valo-checkbox-style($unit-size: $v-unit-size--small); + @include valo-checkbox-style($unit-size: $v-unit-size--small); } .v-checkbox-large { - @include v-valo-checkbox-style($unit-size: $v-unit-size--large); + @include valo-checkbox-style($unit-size: $v-unit-size--large); } .v-label-spinner { - @include v-valo-spinner; + @include valo-spinner; } .v-panel-well { - @include v-valo-panel-well-style; + @include valo-panel-well-style; } .v-panel-borderless { - @include v-valo-panel-borderless-style; + @include valo-panel-borderless-style; } .v-csslayout-well { - @include v-valo-panel-well-style; - @include v-valo-panel-adjust-content-margins; + @include valo-panel-well-style; + @include valo-panel-adjust-content-margins; } .v-csslayout-card { - @include v-valo-panel-style; - @include v-valo-panel-adjust-content-margins; + @include valo-panel-style; + @include valo-panel-adjust-content-margins; } - @include v-valo-splitpanel-small($stylename: small); + @include valo-splitpanel-small($stylename: small); - @include v-valo-component-group; + @include valo-component-group; .wrapping { - @include v-valo-horizontallayout--wrapping; + @include valo-horizontallayout--wrapping; } } diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss index 7ace0ddb6c..046b5923ad 100644 --- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss +++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss @@ -1,15 +1,15 @@ -@mixin v-valo-contextmenu { +@mixin valo-contextmenu { .v-contextmenu { - @include v-valo-selection-overlay-style; + @include valo-selection-overlay-style; } .v-contextmenu .gwt-MenuItem { - @include v-valo-selection-item-style; + @include valo-selection-item-style; } .v-contextmenu .gwt-MenuItem-selected { - @include v-valo-selection-item-selected-style; + @include valo-selection-item-selected-style; } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index f3de32acdd..ed2e45e244 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -6,13 +6,13 @@ // Include global styles only once -$v-valo-global-included: false !default; -@mixin v-valo-global { - @if $v-valo-global-included == false { +$valo-global-included: false !default; +@mixin valo-global { + @if $valo-global-included == false { // Core widget styles come before any other component (and are always included), // so that it has the least specificity - @include v-valo-widget; + @include valo-widget; .v-generated-body { overflow: hidden; @@ -99,27 +99,27 @@ $v-valo-global-included: false !default; } // Component global styles should also be included here - @include v-valo-orderedlayout-global; - @include v-valo-gridlayout-global; - @include v-valo-calendar-global; - @include v-valo-colorpicker-global; - @include v-valo-table-global; - @include v-valo-tabsheet-global; - - $v-valo-global-included: true; + @include valo-orderedlayout-global; + @include valo-gridlayout-global; + @include valo-calendar-global; + @include valo-colorpicker-global; + @include valo-table-global; + @include valo-tabsheet-global; + + $valo-global-included: true; } } -$v-valo-shared-pathPrefix: null; +$valo-shared-pathPrefix: null; @if $v-relative-paths == false { - $v-valo-shared-pathPrefix: "../valo/shared/"; + $valo-shared-pathPrefix: "../valo/shared/"; } -@mixin v-valo-app-style { +@mixin valo-app-style { font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family; color: $v-font-color; background-color: $v-app-background-color; @@ -134,17 +134,17 @@ $v-valo-shared-pathPrefix: null; } -@mixin v-valo-common { +@mixin valo-common { //@if & != null { // &, // &.v-app-loading { - // @include v-valo-app-style; + // @include valo-app-style; // } //} @else { &.v-app, &.v-app-loading { - @include v-valo-app-style; + @include valo-app-style; } //} @@ -171,7 +171,7 @@ $v-valo-shared-pathPrefix: null; padding: round($v-unit-size/4); margin-top: round($_size/-2); margin-left: round($_size/-2); - background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%; + background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%; border-radius: $v-border-radius; } @@ -189,7 +189,7 @@ $v-valo-shared-pathPrefix: null; } } - @include v-valo-loading-bar; + @include valo-loading-bar; // Fallback spinner for browsers without CSS animations @@ -201,7 +201,7 @@ $v-valo-shared-pathPrefix: null; width: 28px !important; height: 28px; padding: round($v-unit-size/4); - background: #fff url($v-valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%; + background: #fff url($valo-shared-pathPrefix + "img/spinner.gif") no-repeat 50%; border-radius: $v-border-radius; top: round($v-unit-size/4); right: round($v-unit-size/4); @@ -230,7 +230,7 @@ $v-valo-shared-pathPrefix: null; } .v-caption { - @include v-valo-caption-style; + @include valo-caption-style; } .v-caption-on-left .v-caption, @@ -249,7 +249,7 @@ $v-valo-shared-pathPrefix: null; } .v-errorindicator { - @include v-valo-error-indicator-style; + @include valo-error-indicator-style; } .v-required-field-indicator { @@ -266,7 +266,7 @@ $v-valo-shared-pathPrefix: null; margin: 0; border-radius: $v-border-radius; - @include v-valo-nativeselect-select-style; + @include valo-nativeselect-select-style; } button { @@ -279,18 +279,18 @@ $v-valo-shared-pathPrefix: null; cursor: default !important; } - @include v-valo-drag-element; + @include valo-drag-element; - @include v-valo-tooltip; + @include valo-tooltip; - @include v-valo-contextmenu; + @include valo-contextmenu; } -@mixin v-valo-caption-style { +@mixin valo-caption-style { font-size: $v-caption-font-size; font-weight: $v-caption-font-weight; padding-bottom: .3em; @@ -301,18 +301,18 @@ $v-valo-shared-pathPrefix: null; -@mixin v-valo-error-indicator-style { +@mixin valo-error-indicator-style { color: $v-error-indicator-color; font-weight: 600; width: ceil($v-unit-size/2); text-align: center; &:before { - @include v-valo-error-indicator-icon-style; + @include valo-error-indicator-icon-style; } } -@mixin v-valo-error-indicator-icon-style { +@mixin valo-error-indicator-icon-style { content: "!"; } @@ -320,11 +320,11 @@ $v-valo-shared-pathPrefix: null; // Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens. // NOTE: breaks percentage sized overlay elements -// @mixin v-valo-natural-page-scrolling +// @mixin valo-natural-page-scrolling // @usage // // Call without any parent selector somewhere in your theme -// =v-valo-natural-page-scrolling; -@mixin v-valo-natural-page-scrolling { +// =valo-natural-page-scrolling; +@mixin valo-natural-page-scrolling { html { height: auto; diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss index b20dc33300..0b083310fd 100644 --- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss +++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss @@ -14,8 +14,8 @@ } -@mixin v-valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) { - $color: $color or v-valo-focus-color(); +@mixin valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) { + $color: $color or valo-focus-color(); // Make size divisible by 2, so that the rotation won't jiggle $size: $size + $size%2; height: $size !important; @@ -65,10 +65,10 @@ } -$v-loading-indicator-color: v-valo-focus-color() !default; +$v-loading-indicator-color: valo-focus-color() !default; $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; -@mixin v-valo-loading-bar { +@mixin valo-loading-bar { .v-loading-indicator { position: fixed !important; diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss index c546a16225..c239a65c11 100644 --- a/WebContent/VAADIN/themes/valo/shared/_notification.scss +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -1,4 +1,4 @@ -@mixin v-valo-notification { +@mixin valo-notification { @@ -32,20 +32,20 @@ // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always @if $v-animations-enabled { .v-Notification[style*=" top: 0"] { - @include v-valo-anim-slide-down(600ms); + @include valo-anim-slide-down(600ms); } .v-Notification[style*="bottom: 0"] { - @include v-valo-anim-slide-up(600ms); + @include valo-anim-slide-up(600ms); } .v-Notification[style*="right: 0"] { - @include v-valo-anim-slide-left(600ms); + @include valo-anim-slide-left(600ms); } // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always .v-Notification[style*=" left: 0"]:not(.v-Notification-system) { - @include v-valo-anim-slide-right(600ms); + @include valo-anim-slide-right(600ms); } } @@ -91,10 +91,10 @@ margin-left: round($v-font-size); } - @include v-valo-notification-style; + @include valo-notification-style; @if $v-animations-enabled { - @include v-valo-anim-fade-in; + @include valo-anim-fade-in; } } @@ -109,7 +109,7 @@ margin: 0 !important; border-radius: 0; - @include v-valo-notification-system-style; + @include valo-notification-system-style; } // Needs a more specific selector to override positional margins @@ -132,19 +132,19 @@ display: block; margin: .5em 0 0; } - @include v-valo-notification-tray-style; + @include valo-notification-tray-style; } .v-Notification.warning { - @include v-valo-notification-warning-style; + @include valo-notification-warning-style; } .v-Notification.error { - @include v-valo-notification-error-style; + @include valo-notification-error-style; } .v-Notification.closable { - @include v-valo-notification-closable-style; + @include valo-notification-closable-style; &.error, &.system { @@ -172,7 +172,7 @@ -@mixin v-valo-notification-closable-style { +@mixin valo-notification-closable-style { padding-right: $v-unit-size + round($v-unit-size/1.7); overflow: hidden !important; // Override GWT PopupPanel cursor: pointer; @@ -225,8 +225,8 @@ -@mixin v-valo-notification-style { - background: v-valo-overlay-background-color(); +@mixin valo-notification-style { + background: valo-overlay-background-color(); box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15); padding: round($v-unit-size/2) round($v-unit-size/1.7); @@ -236,7 +236,7 @@ } h1 { - color: v-valo-focus-color(); + color: valo-focus-color(); font-size: round($v-font-size * 1.2); line-height: 1; } @@ -245,7 +245,7 @@ } } -@mixin v-valo-notification-system-style { +@mixin valo-notification-system-style { background-color: #444; font-weight: $v-font-weight + 100; line-height: round($v-font-size * 1.4); @@ -268,9 +268,9 @@ } -@mixin v-valo-notification-tray-style {} +@mixin valo-notification-tray-style {} -@mixin v-valo-notification-warning-style { +@mixin valo-notification-warning-style { background: #FFF3D2; h1 { @@ -282,16 +282,16 @@ } } -@mixin v-valo-notification-error-style { +@mixin valo-notification-error-style { background: $v-error-indicator-color; font-weight: $v-font-weight + 100; box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); h1 { - color: v-valo-font-color($v-error-indicator-color, 1); + color: valo-font-color($v-error-indicator-color, 1); } p { - color: v-valo-font-color($v-error-indicator-color, .8); + color: valo-font-color($v-error-indicator-color, .8); } } diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 96aa05ac49..5ac0ce5d9a 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -1,6 +1,6 @@ $v-overlay-border-radius: $v-border-radius !default; $v-overlay-border-width: $v-border-width !default; -$v-overlay-open-animation: v-valo-overlay-open 200ms !default; +$v-overlay-open-animation: valo-overlay-open 200ms !default; $v-overlay-padding: round($v-unit-size/9) !default; $v-overlay-padding-vertical: $v-overlay-padding !default; @@ -18,7 +18,7 @@ $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; $v-selection-item-font-weight: max(400, $v-font-weight); -@function v-valo-overlay-background-color ($context: $v-app-background-color) { +@function valo-overlay-background-color ($context: $v-app-background-color) { @if is-dark-color($context) { @return darken($context, 2%); } @@ -30,7 +30,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@mixin v-valo-ie8-shadow($shadow, $element: top) { +@mixin valo-ie8-shadow($shadow, $element: top) { .#{$element} { $shadow-offset-x: nth($shadow, 1); $shadow-offset-y: nth($shadow, 2); @@ -69,16 +69,16 @@ $v-selection-item-font-weight: max(400, $v-font-weight); right: -$v-overlay-border-width; bottom: -$v-overlay-border-width; left: -$v-overlay-border-width; - background: darken(v-valo-overlay-background-color(), $v-bevel-depth); + background: darken(valo-overlay-background-color(), $v-bevel-depth); filter: alpha(opacity=round($v-bevel-depth/1%)); } // Up to 8 shadows are supported $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right; - $shadows: v-valo-shadow($shadow-style: $v-overlay-shadow-style); + $shadows: valo-shadow($shadow-style: $v-overlay-shadow-style); @if type-of(last($shadows)) == color { - @include v-valo-ie8-shadow($shadows); + @include valo-ie8-shadow($shadows); } @else { @for $i from 1 through min(length($elements), length($shadows)) { $shadow: nth($shadows, $i); @@ -86,7 +86,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list } @if length($shadow) > 3 { - @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i)); + @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i)); } } } @@ -98,22 +98,22 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@function v-valo-overlay-box-shadow ($bg: null) { - $bg: $bg or v-valo-overlay-background-color(); - @return v-valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style)); +@function valo-overlay-box-shadow ($bg: null) { + $bg: $bg or valo-overlay-background-color(); + @return valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style)); } -@mixin v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { +@mixin valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal; border-radius: $v-overlay-border-radius; - $bg: $background-color or v-valo-overlay-background-color(); + $bg: $background-color or valo-overlay-background-color(); background: $bg; - color: v-valo-font-color($bg); + color: valo-font-color($bg); - box-shadow: v-valo-overlay-box-shadow($bg); + box-shadow: valo-overlay-box-shadow($bg); @if $v-animations-enabled and $v-overlay-open-animation { @include animation($open-animation); @@ -128,7 +128,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); @if $v-animations-enabled { - @include keyframes(v-valo-overlay-open) { + @include keyframes(valo-overlay-open) { 0% { @include transform(translatey(-3px)); opacity: 0; @@ -141,15 +141,15 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { - @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation); +@mixin valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { + @include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation); padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal; } -@mixin v-valo-selection-item-style { +@mixin valo-selection-item-style { cursor: pointer; line-height: $v-selection-item-height; padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal; @@ -167,7 +167,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); right: 0; bottom: 0; left: 0; - background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%); + background: scale-color(valo-selection-color(), $lightness: -30%, $saturation: 50%); @include opacity(.15); pointer-events: none; border-radius: inherit; @@ -183,10 +183,10 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@mixin v-valo-selection-item-selected-style ($parent-background-color: null) { - $selection-color: v-valo-selection-color($parent-background-color); - @include v-valo-gradient($selection-color); - color: v-valo-font-color($selection-color, 0.9); +@mixin valo-selection-item-selected-style ($parent-background-color: null) { + $selection-color: valo-selection-color($parent-background-color); + @include valo-gradient($selection-color); + color: valo-font-color($selection-color, 0.9); } @@ -196,13 +196,13 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@mixin v-valo-drag-element { +@mixin valo-drag-element { .v-drag-element { - @include v-valo-drag-element-style; + @include valo-drag-element-style; } } -@mixin v-valo-drag-element-style { +@mixin valo-drag-element-style { background: #fff; box-shadow: 0 2px 10px rgba(#000, .2); border-radius: $v-border-radius; diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss index dab8d5afeb..57d0c97ab3 100644 --- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -1,7 +1,7 @@ // @category Tooltip $v-tooltip-background-color: rgba(if(is-dark-color($v-app-background-color), scale-color($v-app-background-color, $lightness: 80%), scale-color($v-app-background-color, $lightness: -80%)), .75) !default; -$v-tooltip-font-color: v-valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; +$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; $v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default; $v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default; $v-tooltip-padding-vertical: round($v-unit-size/8) !default; @@ -11,9 +11,9 @@ $v-tooltip-error-message-font-color: $v-error-indicator-color !default; $v-tooltip-border-radius: $v-border-radius - 1px !default; -@mixin v-valo-tooltip { +@mixin valo-tooltip { .v-tooltip { - @include v-valo-tooltip-style; + @include valo-tooltip-style; div[style*="width"] { width: auto !important; @@ -55,7 +55,7 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default; } -@mixin v-valo-tooltip-style { +@mixin valo-tooltip-style { background-color: opacify($v-tooltip-background-color, 1); // For IE8 background-color: $v-tooltip-background-color; box-shadow: $v-tooltip-box-shadow; @@ -67,6 +67,6 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default; font-size: $v-tooltip-font-size; @if $v-animations-enabled { - //@include v-valo-anim-fade-in; + //@include valo-anim-fade-in; } } diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index 19f5195acb..11906fe5a5 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -53,7 +53,7 @@ $v-included-components: // Checks if a given component is included in the compilation. Used by the collection mixins that -// include all components, like v-valo-components and v-valo-components. +// include all components, like valo-components and valo-components. // @mixin v-is-included // @param $component-name {String} the name of the component to check // @param $is-included {list} (Optional) the list of components which is checked @@ -79,7 +79,7 @@ $v-app-background-color: hsl(210, 0%, 98%) !default; $v-font-size: 16px !default; // Should be specified in pixels $v-font-weight: 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') -$v-font-color: v-valo-font-color($v-app-background-color) !default; +$v-font-color: valo-font-color($v-app-background-color) !default; $v-font-family: "Open Sans", sans-serif !default; $v-caption-font-size: round($v-font-size * 0.9) !default; // Should be a pixel value @@ -125,7 +125,7 @@ $v-required-field-indicator-color: $v-error-indicator-color !default; -$v-valo-include-common-stylenames: true !default; +$valo-include-common-stylenames: true !default; diff --git a/WebContent/VAADIN/themes/valo/util/_anim.scss b/WebContent/VAADIN/themes/valo/util/_anim.scss index b73d2edf8b..122998e2b6 100644 --- a/WebContent/VAADIN/themes/valo/util/_anim.scss +++ b/WebContent/VAADIN/themes/valo/util/_anim.scss @@ -1,36 +1,36 @@ -@include keyframes(v-valo-anim-fade-in) { +@include keyframes(valo-anim-fade-in) { 0% { opacity: 0; } } -@include keyframes(v-valo-anim-fade-out) { +@include keyframes(valo-anim-fade-out) { 100% { opacity: 0; } } -@include keyframes(v-valo-anim-slide-down) { +@include keyframes(valo-anim-slide-down) { 0% { @include transform( translateY(-100%) ); } } -@include keyframes(v-valo-anim-slide-up) { +@include keyframes(valo-anim-slide-up) { 0% { @include transform( translateY(100%) ); } } -@include keyframes(v-valo-anim-slide-left) { +@include keyframes(valo-anim-slide-left) { 0% { @include transform( translateX(100%) ); } } -@include keyframes(v-valo-anim-slide-right) { +@include keyframes(valo-anim-slide-right) { 0% { @include transform( translateX(-100%) ); } @@ -38,26 +38,26 @@ -@mixin v-valo-anim-fade-in ($duration: 120ms, $delay: null){ - @include animation(v-valo-anim-fade-in $duration $delay); +@mixin valo-anim-fade-in ($duration: 120ms, $delay: null){ + @include animation(valo-anim-fade-in $duration $delay); } -@mixin v-valo-anim-fade-out ($duration: 120ms, $delay: null){ - @include animation(v-valo-anim-fade-out $duration $delay); +@mixin valo-anim-fade-out ($duration: 120ms, $delay: null){ + @include animation(valo-anim-fade-out $duration $delay); } -@mixin v-valo-anim-slide-down ($duration: 260ms, $delay: null){ - @include animation(v-valo-anim-slide-down $duration $delay); +@mixin valo-anim-slide-down ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-down $duration $delay); } -@mixin v-valo-anim-slide-up ($duration: 260ms, $delay: null){ - @include animation(v-valo-anim-slide-up $duration $delay); +@mixin valo-anim-slide-up ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-up $duration $delay); } -@mixin v-valo-anim-slide-left ($duration: 260ms, $delay: null){ - @include animation(v-valo-anim-slide-left $duration $delay); +@mixin valo-anim-slide-left ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-left $duration $delay); } -@mixin v-valo-anim-slide-right ($duration: 260ms, $delay: null){ - @include animation(v-valo-anim-slide-right $duration $delay); +@mixin valo-anim-slide-right ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-right $duration $delay); }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss index f24a40f5b6..470799a501 100644 --- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -1,11 +1,11 @@ -@function v-valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, +@function valo-bevel ($color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) { @if $bevel-depth == 0% or $bevel-style == none { @return null; } - $color-stops: v-valo-gradient-color-stops($color, $gradient-style, $gradient-depth); + $color-stops: valo-gradient-color-stops($color, $gradient-style, $gradient-depth); $top-color: first(first($color-stops)); $bottom-color: first(last($color-stops)); @@ -13,12 +13,12 @@ $top-color: blend-lighten(adjust-color($top-color, $lightness: $bevel-depth/4, $saturation: -$bevel-depth), scale-color($top-color, $lightness: $bevel-depth/4)); $bottom-color: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$bevel-depth/3), $saturation: -$bevel-depth), $bevel-depth/100%), $bottom-color); - @return v-valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color); + @return valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color); } -@function v-valo-shadow ($shadow-style: null, $shadow-depth: null) { +@function valo-shadow ($shadow-style: null, $shadow-depth: null) { $shadow-style: $shadow-style or $v-shadow-style; $shadow-depth: $shadow-depth or $v-shadow-depth; @@ -26,12 +26,12 @@ @return null; } - @return v-valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%)); + @return valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%)); } -@function v-valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) { +@function valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) { @if $shadow-list == none { @return null; } @@ -52,7 +52,7 @@ $new: null; @each $part in $shadow-list { @if type-of($part) == list and length($part) > 0 { - $part: v-valo-replace-hilite-and-shade($part, $hilite, $shade); + $part: valo-replace-hilite-and-shade($part, $hilite, $shade); @if $part { $new: $new, $part; } diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index c2fb9f1a1b..7dc5157cba 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -52,7 +52,7 @@ $v-luminance-threshold: 150 !default; // Returns a text color with enough contrast for the given background color // -@function v-valo-font-color ($bg-color, $contrast: 0.8) { +@function valo-font-color ($bg-color, $contrast: 0.8) { @if $bg-color { @if is-dark-color($bg-color) { @return scale_color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast)); @@ -64,8 +64,8 @@ $v-luminance-threshold: 150 !default; } -@function v-valo-header-color ($bg-color, $contrast: 1) { - $font-color: v-valo-font-color($bg-color); +@function valo-header-color ($bg-color, $contrast: 1) { + $font-color: valo-font-color($bg-color); @if is-dark-color($bg-color) { @return lighten($font-color, 30% * $contrast); } @else { @@ -76,7 +76,7 @@ $v-luminance-threshold: 150 !default; -@function v-valo-focus-color ($color: null, $context: null) { +@function valo-focus-color ($color: null, $context: null) { $context: $context or $v-app-background-color; $fallback: $context; @@ -95,15 +95,15 @@ $v-luminance-threshold: 150 !default; -@function v-valo-focus-box-shadow ($color: null, $focus-style: $v-focus-style) { - $focus-color: v-valo-focus-color($color: $color); +@function valo-focus-box-shadow ($color: null, $focus-style: $v-focus-style) { + $focus-color: valo-focus-color($color: $color); @return replace($focus-style, v-focus-color, transparentize($focus-color, .5)); } -@function v-valo-selection-color ($color: null, $context: null) { - $selection-color: $color or $v-selection-color or v-valo-focus-color($color: $color, $context: $context); +@function valo-selection-color ($color: null, $context: null) { + $selection-color: $color or $v-selection-color or valo-focus-color($color: $color, $context: $context); //@if luminance-diff($context, $selection-color) < 30 or (luminance-diff($context, $selection-color) < 10 and saturation-diff($context, $selection-color) < 20%) { // $selection-color: #fff; //} diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss index 9c738edfe5..5611c33da6 100644 --- a/WebContent/VAADIN/themes/valo/util/_gradient.scss +++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss @@ -1,15 +1,15 @@ -@mixin v-valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) { +@mixin valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) { @if $color { @if $depth <= 0 { background: $fallback or $color; } @else { - $color-stops: v-valo-gradient-color-stops($color, $style, $depth); + $color-stops: valo-gradient-color-stops($color, $style, $depth); @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color); } } } -@function v-valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) { +@function valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) { @if $depth > 0 { @if $style == v-linear or $style == v-linear-reverse { diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss index 0472275c88..c0626e947f 100644 --- a/WebContent/VAADIN/themes/valo/util/_util.scss +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -31,14 +31,14 @@ -@mixin v-valo-round { +@mixin valo-round { border-radius: 50%; } -@mixin v-valo-tappable { +@mixin valo-tappable { @include user-select(none); -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; |