diff options
| author | Jouni Koivuviita <jouni@vaadin.com> | 2014-06-02 14:35:38 +0300 |
|---|---|---|
| committer | Jouni Koivuviita <jouni@vaadin.com> | 2014-06-04 06:58:45 +0000 |
| commit | faaa02e1937f88c184ce4e88a548c9348de8f375 (patch) | |
| tree | eeceb60b3ca58b43a2b42f932f22566521c19b53 /WebContent/VAADIN | |
| parent | 3a234228a3df575ce49b90368f966e6458fee757 (diff) | |
| download | vaadin-framework-faaa02e1937f88c184ce4e88a548c9348de8f375.tar.gz vaadin-framework-faaa02e1937f88c184ce4e88a548c9348de8f375.zip | |
Valo Sass API refactoring (#13668)
Also fixes #13672 (added ‘notification’ v-included-components list)
Fixes #13746 as well (DragAndDropWrapper won’t hide the drag source any
more)
Loads of smaller tweaks and fixes, went through almost all components
again and fixed any issues I could find in testing.
Testing done with the following:
Desktop (OS X Mavericks)
-Safari 7
-Chrome 35
-Firefox 24.5
-Opera 21, 12
-Internet Explorer 8,10
Mobile:
-iOS 7
-Android 4
-Android 2.3
-Windows Phone 8
Change-Id: Ide32cacd1958b5b8db85afe23f455ad3140a7d21
Diffstat (limited to 'WebContent/VAADIN')
46 files changed, 2574 insertions, 1384 deletions
diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss index 0f13891274..802b8cf54e 100644 --- a/WebContent/VAADIN/themes/valo/_valo.scss +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -56,7 +56,10 @@ @mixin valo { @include valo-common; @include valo-components; - @include valo-notification; + + @if v-is-included(notification) { + @include valo-notification; + } @if $valo-include-common-stylenames { @include valo-common-stylenames; diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss index 4a9c7a6bf4..dbddbc3295 100644 --- a/WebContent/VAADIN/themes/valo/components/_accordion.scss +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -1,11 +1,13 @@ -$v-accordion-content-shadow-style: join(inset, $v-shadow-style) !default; -$v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; +$v-accordion-content-shadow: join(inset, $v-shadow) !default; +$v-accordion-content-shadow-opacity: $v-shadow-opacity/2 !default; @mixin valo-accordion ($primary-stylename: v-accordion) { .#{$primary-stylename} { @include valo-panel-style; - @include valo-gradient($color: $v-background-color, $depth: $v-gradient-depth/2); + $grad-style: valo-gradient-style($v-gradient); + $grad-opacity: valo-gradient-opacity($v-gradient); + @include valo-gradient($color: $v-background-color, $gradient: ($grad-style $grad-opacity/2)); overflow: hidden; } @@ -14,9 +16,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; overflow: hidden; @if $v-border-radius > 0 { - $_br: $v-border-radius - $v-border-width; + $_br: $v-border-radius - first-number($v-border); &:first-child { border-radius: $_br $_br 0 0; + + .#{$primary-stylename}-item-caption { + border-radius: inherit; + } } &:last-child { border-radius: 0 0 $_br $_br; @@ -26,9 +32,10 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; .#{$primary-stylename}-item-caption .v-caption { @include valo-panel-caption-style; + border-radius: inherit; display: block; background: transparent; - border-bottom-color: valo-panel-border-color($background-color: valo-panel-background-color()); + border-bottom-color: first-color(valo-border($color: $v-panel-background-color)); cursor: pointer; @include user-select(none);; @@ -63,13 +70,13 @@ $v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; width: 100%; bottom: 0; right: 0; - box-shadow: valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth); - background-color: valo-panel-background-color(); + box-shadow: valo-bevel-and-shadow($shadow: $v-accordion-content-shadow, $shadow-opacity: $v-accordion-content-shadow-opacity); + background-color: $v-panel-background-color; @include box-sizing(border-box); @include valo-panel-adjust-content-margins; } .#{$primary-stylename}-item-open + .#{$primary-stylename}-item { - border-top: $v-panel-border-width solid valo-panel-border-color($background-color: valo-panel-background-color()); + border-top: valo-border($color: $v-panel-background-color, $strength: 0.7); } -}
\ 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 9d63de6fbc..1509724f04 100644 --- a/WebContent/VAADIN/themes/valo/components/_all.scss +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -42,171 +42,174 @@ @mixin valo-components { - + @if v-is-included(absolutelayout) { @include valo-absolutelayout; } - + @if v-is-included(orderedlayout) { @include valo-orderedlayout; } - + @if v-is-included(button) { @include valo-button; } - + @if v-is-included(checkbox) or v-is-included(optiongroup) { @include valo-checkbox; } - + @if v-is-included(combobox) { @include valo-combobox; } - + @if v-is-included(csslayout) { @include valo-csslayout; } - + @if v-is-included(customcomponent) { @include valo-customcomponent; } - + @if v-is-included(customlayout) { @include valo-customlayout; } - + @if v-is-included(form) { @include valo-form; } - + @if v-is-included(formlayout) { @include valo-formlayout; } - + @if v-is-included(grid) { @include valo-grid(v-escalator); } - + @if v-is-included(textfield) { @include valo-textfield; } - + @if v-is-included(textarea) { @include valo-textarea; } - + @if v-is-included(datefield) { @include valo-datefield; @include valo-inline-datefield; } - + @if v-is-included(orderedlayout) { @include valo-orderedlayout; } - + @if v-is-included(gridlayout) { @include valo-gridlayout; } - + @if v-is-included(menubar) { @include valo-menubar; } - + @if v-is-included(optiongroup) { @include valo-optiongroup; } - + @if v-is-included(link) { @include valo-link; } - + @if v-is-included(window) { @include valo-window; } - + @if v-is-included(tree) { @include valo-tree; } - + @if v-is-included(table) or v-is-included(treetable) { @include valo-table; } - + @if v-is-included(treetable) { @include valo-treetable; } - + @if v-is-included(splitpanel) { @include valo-splitpanel; } - - @if v-is-included(progressbar) or v-is-included(progressindicator) { + + @if v-is-included(progressbar) { @include valo-progressbar; - @include valo-progressbar(v-progressindicator); } - + + @if v-is-included(progressindicator) { + @include valo-progressbar($primary-stylename: v-progressindicator); + } + @if v-is-included(slider) { @include valo-slider; } - + @if v-is-included(tabsheet) { @include valo-tabsheet; } - + @if v-is-included(colorpicker) { @include valo-colorpicker; } - + @if v-is-included(panel) { @include valo-panel; } - + @if v-is-included(accordion) { @include valo-accordion; } - + @if v-is-included(twincolselect) { @include valo-twincolselect; } - + @if v-is-included(nativeselect) { @include valo-nativeselect; } - + @if v-is-included(calendar) { @include valo-calendar; } - + @if v-is-included(label) { @include valo-label; } - + @if v-is-included(dragwrapper) { @include valo-dragwrapper; } - + @if v-is-included(loginform) { @include valo-loginform; } - + @if v-is-included(nativebutton) { @include valo-nativebutton; } - + @if v-is-included(nativeselect) { @include valo-nativeselect; } - + @if v-is-included(popupview) { @include valo-popupview; } - + @if v-is-included(richtextarea) { @include valo-richtextarea; } - + @if v-is-included(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 c826517c16..5d61d37bd0 100644 --- a/WebContent/VAADIN/themes/valo/components/_button.scss +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -1,30 +1,6 @@ -// @category Button - -// Values default to global values (evaluated when the mixins are called) -$v-button-background-color: null !default; -$v-button-bevel-style: null !default; -$v-button-bevel-depth: null !default; -$v-button-gradient-style: null !default; -$v-button-gradient-depth: null !default; -$v-button-shadow-style: null !default; -$v-button-shadow-depth: null !default; -$v-button-border-radius: $v-border-radius !default; -$v-button-unit-size: null !default; - -$v-button-font-weight: max(400, $v-font-weight + 100) !default; -$v-button-cursor: pointer !default; -$v-button-hover-style-enabled: $v-hover-styles-enabled !default; -$v-button-border-width: $v-border-width !default; -$v-button-disabled-opacity: $v-disabled-opacity !default; - - - -// The main mixin for Valo buttons -// @mixin valo-button -// @param $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code> @mixin valo-button ($primary-stylename: v-button) { .#{$primary-stylename} { - @include valo-button-common-properties; + @include valo-button-static-style; @include valo-button-style; } } @@ -33,58 +9,50 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin valo-button-common-properties { - @include valo-tappable; - cursor: $v-button-cursor; - font-weight: $v-button-font-weight; - position: relative; - text-align: center; - white-space: nowrap; - - // Generated element for :hover, :focus and :active styles - &:after { - content: ""; - position: absolute; - top: -$v-button-border-width; - right: -$v-button-border-width; - bottom: -$v-button-border-width; - left: -$v-button-border-width; - border-radius: inherit; - border: inherit; - border-width: 0; - @if $v-animations-enabled { - @include transition(box-shadow 180ms, border 180ms); +@mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) { + @if contains($states, normal) { + position: relative; + text-align: center; + white-space: nowrap; + outline: none; + @include valo-tappable; + @if $vertical-centering { + @include valo-button-vertical-centering; } } - &.v-disabled { - @include opacity($v-button-disabled-opacity); - + @if contains($states, hover) or contains($states, focus) or contains($states, active) { + // Generated element for :hover, :focus and :active styles &:after { - display: none; + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } } } - @include 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); - - // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust - .v-sa &:before { - height: 110%; + @if contains($states, focus) { + &:focus:after { + @if $v-animations-enabled { + @include transition(none); + } + } } - // Firefox needs a bit of adjusting as well - .v-ff &:before { - height: 105%; - } + @if contains($states, disabled) { + &.v-disabled { + @include opacity($v-disabled-opacity); - // ...and so does IE. Who knew? - .v-ie &:before { - margin-top: 4px; + &:after { + display: none; + } + } } } @@ -92,129 +60,140 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; -@mixin valo-button-size ($unit-size, $border-radius) { - height: $unit-size; - - $padding-width: ceil($unit-size/2.4); - $padding-width: $padding-width + ceil($border-radius/3); - padding: 0 $padding-width; - - .v-icon { - margin: 0 ceil($padding-width/-5); - } +@mixin valo-button-style ( + $unit-size : $v-unit-size, + $padding : null, // Computed by default - .v-icon + span:not(:empty) { - margin-left: ceil($padding-width/1.5); - } -} + $font-color : null, // Computed by default + $font-weight : $v-font-weight + 100, + $font-size : null, // Inherited by default + $cursor : null, + $background-color : $v-background-color, + $border : $v-border, + $border-radius : $v-border-radius, + $gradient : $v-gradient, + $bevel : $v-bevel, + $shadow : $v-shadow, -@function valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, - $background-color: $v-button-background-color) { + $states : (normal, hover, focus, active, disabled) +) { - $background-color: $background-color or $v-background-color; - $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-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); - @if contains($bevel-style, v-shade, true) { - $border-color: $border-color $border-color blend-multiply(transparentize(#000, max(0.8, 1-$bevel-depth/200%)), $border-color); + @if contains($states, focus) or contains($states, active) { + $border-width: first-number($border); + &:after { + border: inherit; + top: -$border-width; + right: -$border-width; + bottom: -$border-width; + left: -$border-width; + } } - @return $border-color; -} - + @if contains($states, normal) { + @if $unit-size { + height: $unit-size; + padding: if(type-of($padding) == number, $padding, (0 round($unit-size/2.4) + round($border-radius/3))); + } + $_font-color: $font-color or valo-font-color($background-color, 0.9); + color: $_font-color; + font-weight: $font-weight; + font-size: $font-size; + cursor: $cursor; + border-radius: $border-radius; -@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) { + @if type-of($background-color) == color { + @include valo-border-with-gradient($border: $border, $color: darker-of($background-color, $v-background-color), $gradient: $gradient); + @include valo-gradient($background-color, $gradient); + box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient); + } - // Set up variable defaults - $background-color: $background-color or $v-background-color; - $gradient-style: $gradient-style or $v-gradient-style; - $gradient-depth: $gradient-depth or $v-gradient-depth; - $bevel-style: $bevel-style or $v-bevel-style; - $bevel-depth: $bevel-depth or $v-bevel-depth; - $unit-size: $unit-size or $v-unit-size; - - @include valo-button-size($unit-size, $border-radius); + @if $bevel and type-of($_font-color) == color and type-of($background-color) == color { + text-shadow: valo-text-shadow($_font-color, $background-color, $bevel); + } - border-radius: $border-radius; - border: $v-button-border-width solid; - border-color: valo-button-border-color($bevel-style, $bevel-depth, $background-color); + @if $bevel == none and $shadow == none { + box-shadow: none; + } + } - @include valo-gradient($background-color, $gradient-style, $gradient-depth); - color: valo-font-color($background-color, 0.9); + @if $background-color { + @if contains($states, hover) { + &:hover:after { + @include valo-button-hover-style($background-color); + } + } - 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 valo-button-hover-style($background-color: $background-color); + @if contains($states, focus) { + &:focus:after { + @include valo-button-focus-style($background-color); + } } - } - &:focus { - outline: none; - &:after { - @include valo-button-focus-style($background-color: $background-color); + @if contains($states, active) { + &:active:after { + @include valo-button-active-style($background-color); + } } } +} + - &:active:after, - &.v-pressed:after { - @include valo-button-active-style($background-color: $background-color); + + +@mixin valo-button-hover-style ($background-color: $v-background-color) { + $bg: darken($background-color, 25%); + @if is-dark-color($background-color) { + $bg: lighten($background-color, 15%); } - + background-color: rgba($bg, .1); } -@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) { + +@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) { $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 valo-button-border-color($background-color: $background-color); + border-color: $focus-color; + } @else if $border-fallback != none { + border: $border-fallback or valo-border($color: $background-color); } - box-shadow: valo-focus-box-shadow($color: $focus-color); - - @if $v-animations-enabled { - @include transition(none); - } + @include valo-focus-style($include-box-shadow: $include-box-shadow); } @mixin valo-button-active-style ($background-color: $v-background-color) { - $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-background-color)); - background-color: rgba($bg, .1); - - .v-ie8 & { - background-color: $bg; - filter: alpha(opacity=10); - } + $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color)); + background-color: rgba($bg, .2); } -@mixin valo-button-hover-style ($background-color: $v-background-color) { - $bg: lighten($background-color, 15%); - background-color: rgba($bg, .1); - border: inherit; - - @if $v-animations-enabled { - @include transition(none); + + +@mixin valo-button-vertical-centering { + // Vertical centering of icon and caption, independent of the height of the button + @include valo-vertical-align-guide($to-align: div, $pseudo-element: before); + + // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust + .v-sa &:before { + height: 110%; + } + + // Firefox needs a bit of adjusting as well + .v-ff &:before { + height: 107%; } - - .v-ie8 & { - background-color: $bg; - filter: alpha(opacity=20); + + // ...and so does IE. Who knew? + .v-ie &:before { + margin-top: 4px; } } @@ -244,19 +223,3 @@ $v-button-disabled-opacity: $v-disabled-opacity !default; } } } - - - -@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 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 { - @return 0 1px 0 transparentize(lighten($background-color, $bevel-depth), 1-($bevel-depth/100%)); - } -} diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss index 0ba1326499..c6c689d8d8 100644 --- a/WebContent/VAADIN/themes/valo/components/_calendar.scss +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -5,12 +5,12 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename}-month-day-scrollable { overflow-y: scroll; } - + .#{$primary-stylename}-week-wrapper { position: relative; overflow: hidden; } - + .#{$primary-stylename}-current-time { position: absolute; left: 0; @@ -19,7 +19,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb background: red; z-index: 2; } - + .#{$primary-stylename}-event-resizetop, .#{$primary-stylename}-event-resizebottom { position: absolute; @@ -28,7 +28,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb width: 100%; z-index: 1; } - + .#{$primary-stylename}-event-resizetop { cursor: row-resize; top: 0; @@ -38,8 +38,8 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb cursor: row-resize; bottom: 0; } - - + + // What a truckload of magic numbers! // TODO Try to find out what these actually do, and how to make them dissappear @@ -51,50 +51,50 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename}-week-numbers { //border-right: 1px solid; } - + .#{$primary-stylename}-month-sizedheight .#{$primary-stylename}-month-day { height: 100px; } - + .#{$primary-stylename}-month-sizedwidth .#{$primary-stylename}-month-day { width: 100px; } - + .#{$primary-stylename}-header-month-Hsized .#{$primary-stylename}-header-day { width: 101px; } - + .#{$primary-stylename}-header-month-Hsized td:first-child { padding-left: 21px; } - + .#{$primary-stylename}-header-day-Hsized { width: 200px; } - + .#{$primary-stylename}-week-numbers-Vsized .#{$primary-stylename}-week-number { height: 100px; line-height: 100px; } - + .#{$primary-stylename}-week-wrapper-Vsized { height: 400px; overflow-x: hidden !important; } - + .#{$primary-stylename}-times-Vsized .#{$primary-stylename}-time { height: 38px; } - + .#{$primary-stylename}-times-Hsized .#{$primary-stylename}-time { width: 42px; } - + .#{$primary-stylename}-day-times-Vsized .v-datecellslot, .#{$primary-stylename}-day-times-Vsized .v-datecellslot-even { height: 18px; } - + .#{$primary-stylename}-day-times-Hsized, .#{$primary-stylename}-day-times-Hsized .v-datecellslot, .#{$primary-stylename}-day-times-Hsized .v-datecellslot-even { @@ -237,7 +237,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb } .#{$primary-stylename}-month-day-selected { - background-color: blend-normal(rgba(valo-selection-color(), .1), $v-background-color); + background-color: blend-normal(rgba($v-selection-color, .1), $v-background-color); } .#{$primary-stylename}-month-day-dragemphasis { @@ -347,7 +347,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename} .v-daterange { position: relative; - + &:before { content: ""; position: absolute; @@ -355,7 +355,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb right: 0; bottom: -1px; left: 0; - background: valo-selection-color(); + background: $v-selection-color; @include opacity(.5); @if $v-border-radius > 0 { border-radius: $v-border-radius $v-border-radius 0 0; @@ -483,7 +483,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-content { margin-top: -1px; border-radius: $v-border-radius + 1px; - border: 1px solid $v-background-color; + border: 1px solid $v-app-background-color; padding-top: 3px; margin-right: round($v-unit-size/8); //margin-left: round($v-unit-size/8); diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 7ffd501dc8..619e799bc7 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -1,10 +1,10 @@ @mixin valo-checkbox ($primary-stylename: v-checkbox) { - + .#{$primary-stylename}, .v-radiobutton { - @include valo-checkbox-style; + @include valo-checkbox-style; } - + } @@ -14,11 +14,13 @@ } -@mixin valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) { - $background-color: $background-color or $v-background-color; - +@mixin valo-checkbox-style ($background-color: $v-background-color, $size: $v-unit-size, $selection-color: $v-selection-color) { + + // So that we can use the same 'unit-size' for all component sizes + $size: $size/2; + position: relative; - line-height: round($unit-size/2); + line-height: round($size); white-space: nowrap; &.v-has-width label { @@ -26,13 +28,13 @@ } :root & { - padding-left: round($unit-size/1.5); + padding-left: round($size*1.33); label { @include valo-tappable; } } - + :root & > input { position: absolute; clip: rect(0,0,0,0); @@ -42,8 +44,8 @@ margin: 0; &:focus ~ label:before { - @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); - box-shadow: valo-button-box-shadow($background-color), valo-focus-box-shadow(); + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false); + box-shadow: valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true); } & ~ label:before, @@ -51,20 +53,20 @@ content: ""; display: inline-block; @include box-sizing(border-box); - width: round($unit-size/2); - height: round($unit-size/2); + width: round($size); + height: round($size); position: absolute; top: 0; left: 0; - border-radius: min(round($unit-size/6), $v-border-radius); - font-size: round($v-font-size * 0.8 * ($unit-size/$v-unit-size)); + border-radius: min(round($size/3), $v-border-radius); + font-size: round($v-font-size * 0.8 * ($size*2/$v-unit-size)); text-align: center; } - + & ~ label:before { - @include valo-button-style($background-color: $background-color, $unit-size: $unit-size); + @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius)); padding: 0; - height: round($unit-size/2); + height: round($size); } & ~ label:after { @@ -74,16 +76,22 @@ @include transition(color 100ms); } } - + &:active ~ label:after { @include valo-button-active-style($background-color: $background-color); } - + &:checked ~ label:after { - color: valo-selection-color($context: $background-color); + color: $selection-color; } &[disabled] { + ~ label, + ~ label .v-icon, + ~ .v-icon { + cursor: default; + } + ~ label:before, ~ label:after { @include opacity($v-disabled-opacity); @@ -95,11 +103,12 @@ } } - + & > .v-icon, & > label .v-icon { - margin: 0 round($unit-size/6) 0 round($unit-size/12); + margin: 0 round($size/3) 0 round($size/6); min-width: 1em; + cursor: pointer; } } diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index b24fbb922c..a8a5dde076 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -7,37 +7,45 @@ .#{$primary-stylename}-popup.v-window { min-width: 220px !important; } - + + .#{$primary-stylename}-gradient-container { + overflow: visible !important; + } + .#{$primary-stylename}-gradient-clicklayer { @include opacity(0); } - + .rgb-gradient .#{$primary-stylename}-gradient-background { background: url(#{$valo-colorpicker-pathPrefix}gradient2.png); } - + .hsv-gradient .#{$primary-stylename}-gradient-foreground { background: url(#{$valo-colorpicker-pathPrefix}gradient.png); } - - .#{$primary-stylename}-gradient-lowerbox { - border-right: 1px solid rgba(122,122,122,.5); - border-top: 1px solid rgba(122,122,122,.5); - } - + .#{$primary-stylename}-gradient-higherbox { - border-left: 1px solid rgba(122,122,122,.5); - border-bottom: 1px solid rgba(122,122,122,.5); + &:before { + content: ""; + width: 11px; + height: 11px; + border-radius: 7px; + border: 1px solid #fff; + box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3); + position: absolute; + bottom: -6px; + left: -6px; + } } .#{$primary-stylename}-popup .v-slider.v-slider-red:before { background-color: red; } - + .#{$primary-stylename}-popup .v-slider.v-slider-green:before { background-color: green; } - + .#{$primary-stylename}-popup .v-slider.v-slider-blue:before { background-color: blue; } @@ -46,19 +54,19 @@ background: url(#{$valo-colorpicker-pathPrefix}slider_hue_bg.png); } - .#{$primary-stylename}-popup .v-textfield-dark { + .#{$primary-stylename}-popup input.v-textfield-dark { color: #fff; } - - .#{$primary-stylename}-popup .v-textfield-light { + + .#{$primary-stylename}-popup input.v-textfield-light { color: #000; } - + // TODO magic numbers .#{$primary-stylename}-grid { height: 319px; } - + .#{$primary-stylename}-popup .colorselect td { line-height: 15px; } @@ -154,7 +162,7 @@ height: auto !important; padding: round($v-unit-size/4) 0; background-color: $v-background-color; - border-top: $v-border-width solid scale-color($v-background-color, $lightness: -5%); + border-top: first-number($v-border) solid scale-color($v-background-color, $lightness: -5%); .v-expand { overflow: visible; @@ -167,7 +175,7 @@ } .#{$primary-stylename}-preview { - width: auto !important; + width: 100% !important; height: auto !important; padding: round($v-unit-size/4); } @@ -197,4 +205,4 @@ } } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 853dd8bfd2..976dd7e1d4 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -1,8 +1,3 @@ -$v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; - - - - @mixin valo-combobox ($primary-stylename: v-filterselect) { .#{$primary-stylename} { @@ -13,13 +8,44 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; .v-icon { position: absolute; + pointer-events: none; } } - + .#{$primary-stylename}-suggestpopup { @include valo-combobox-popup-style; } + .#{$primary-stylename}-no-input { + cursor: pointer; + text-shadow: valo-text-shadow(); + + .#{$primary-stylename}-input { + @include user-select(none); + @include valo-gradient; + cursor: inherit; + box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient); + @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient); + text-shadow: inherit; + text-overflow: ellipsis; + @if $v-border-radius != $v-textfield-border-radius { + border-radius: $v-border-radius; + } + + &:focus { + @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color); + } + } + + .#{$primary-stylename}-button { + border-left: none !important; + } + + &:hover .#{$primary-stylename}-button:before { + color: inherit; + } + } + } @@ -27,45 +53,67 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@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) { +@mixin valo-combobox-style ( + $unit-size: $v-unit-size, + + $font-color: null, // Computed by default + $font-weight: max(400, $v-font-weight), + $font-size: null, // Inherited by default - $background-color: $background-color or valo-textfield-background-color($v-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; + $background-color: $v-textfield-background-color, + $border: $v-textfield-border, + $border-radius: $v-textfield-border-radius, + + $gradient: none, + $bevel: $v-textfield-bevel, + $shadow: $v-textfield-shadow, + + $primary-stylename: v-filterselect + ) { + + height: $unit-size; + border-radius: $border-radius; .#{$primary-stylename}-input { - @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); + @include valo-combobox-input-style( + $unit-size: $unit-size, + $gradient: $gradient, + $bevel: $bevel, + $shadow: $shadow, + $border: $border, + $border-radius: $border-radius, + $background-color: $background-color, + $font-color: $font-color, + $font-size: $font-size, + $font-weight: $font-weight); } - .v-icon { - max-height: $unit-size; + .v-icon + .#{$primary-stylename}-input { + padding-left: $unit-size; + } + + img.v-icon { $padding-width: ceil($unit-size/6); + max-height: $unit-size; @if $border-radius { $padding-width: $padding-width + ceil($border-radius/3); } margin-left: $padding-width; + } - + .#{$primary-stylename}-input { - padding-left: $padding-width + $unit-size; - } + span.v-icon { + color: valo-font-color($background-color); + width: $unit-size; } - + &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { - @include valo-textfield-prompt-style(valo-textfield-background-color($background-color)); + @include valo-textfield-prompt-style($background-color); } .#{$primary-stylename}-button { - @include valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, - $background-color: $background-color); + @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color); } - + &.v-disabled { @include opacity($v-textfield-disabled-opacity); & .#{$primary-stylename}-button { @@ -106,18 +154,38 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@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) { +@mixin valo-combobox-input-style ( + $unit-size: $v-unit-size, + $padding: null, // Computed by default + + $font-color: null, // Computed by default + $font-weight: null, // Inherited by default + $font-size: null, // Inherited by default + + $background-color: $v-textfield-background-color, + $border: $v-border, + $border-radius: $v-textfield-border-radius, + + $gradient: none, + $bevel: $v-bevel, + $shadow: $v-shadow +) { @include box-sizing(border-box); - @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) ; - width: 100%; + @include valo-textfield-style($unit-size: $unit-size, + $padding: $padding, + $font-color: $font-color, + $font-weight: $font-weight, + $font-size: $font-size, + $background-color: $background-color, + $border: $border, + $border-radius: $border-radius, + $gradient: $gradient, + $bevel: $bevel, + $shadow: $shadow); + width: 100% !important; // Need to override calculated inline style which is sometimes added height: 100%; - padding-right: $unit-size * 1.2; + padding-right: round($unit-size * 1.2); + border-radius: inherit; } @@ -126,21 +194,26 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@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) { +@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) { + $border-width: first-number($v-textfield-border); @include valo-tappable; position: absolute; - top: $v-textfield-border-width; - right: $v-textfield-border-width; - bottom: $v-textfield-border-width; + top: $border-width; + right: $border-width; + bottom: $border-width; width: $unit-size; cursor: pointer; - border-left: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color); + border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); + + .v-ie8 & { + background-color: $background-color; + } @if $v-border-radius > 0 { - border-radius: 0 $v-border-radius $v-border-radius 0; + $br: $v-border-radius - $border-width; + border-radius: 0 $br $br 0; } - + &:before { @include valo-combobox-button-icon-style($background-color); color: mix($background-color, valo-font-color($background-color)); @@ -155,7 +228,7 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; margin-top: -.47em; } - @if $v-combobox-hover-style-enabled { + @if $v-hover-styles-enabled { &:hover:before { color: valo-font-color($background-color); } @@ -184,37 +257,36 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin valo-combobox-popup-style ($background-color: null) { - +@mixin valo-combobox-popup-style { + .v-filterselect-suggestmenu { - @include valo-selection-overlay-style($background-color: $background-color); + @include valo-selection-overlay-style; box-sizing: border-box; position: relative; z-index: 1; } margin-top: ceil($v-unit-size/8) !important; - + table, tbody, tr, td { display: block; } - + .gwt-MenuItem { @include valo-selection-item-style; } - + .gwt-MenuItem-selected { - @include valo-selection-item-selected-style($parent-background-color: $background-color); + @include valo-selection-item-selected-style; } .v-filterselect-status { position: absolute; right: $v-border-radius; - $bg: $background-color or $v-background-color; - $bg: scale-color($bg, $lightness: -15%); + $bg: scale-color($v-background-color, $lightness: -15%); background: transparentize($bg, .1); color: valo-font-color($bg); border-radius: 0 0 $v-border-radius $v-border-radius; @@ -229,13 +301,13 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; @if $v-animations-enabled { @include animation(valo-combobox-show-status 200ms 80ms backwards); } - + > * { color: valo-font-color($bg); text-decoration: none; } } - + div[class*="page"] { position: absolute; z-index: 3; @@ -250,19 +322,19 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; font-family: FontAwesome; @include transform( scale(.8) ); - $bg: $background-color or $v-background-color; - color: valo-font-color($bg); - + color: valo-font-color($v-background-color); + &:hover { @include opacity(1); + background: rgba($v-background-color, .5); } - + span { // Hide text display: none; } } - + &:hover div[class*="page"] { @include transform( scale(1) ); } @@ -270,17 +342,23 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; div[class*="prev"] { top: 0; @include transform-origin( 100% 0% ); + border-radius: 0 $v-border-radius 0 $v-border-radius; &:before { content: "\f0d8"; } - + } - + div[class*="next"] { bottom: 0; @include transform-origin( 100% 100% ); + border-radius: $v-border-radius 0 $v-border-radius 0; &:before { content: "\f0d7"; } } + + div[class*="-off"] { + display: none; + } } diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss index 60193ed3f8..3cefbb0a4b 100644 --- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -23,17 +23,27 @@ border-top-right-radius: 0; border-bottom-right-radius: 0; } + + .v-widget ~ .v-widget.first.first { + border-radius: $v-border-radius 0 0 $v-border-radius; + } + + .v-widget ~ .v-widget.last.last { + border-radius: 0 $v-border-radius $v-border-radius 0; + } } - // Assume most components have borders. + // Assume most components have borders. // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget .v-widget { vertical-align: middle; - + + $v-border-width: first-number($v-border); + @if $v-border-width > 0 { margin-left: -$v-border-width; } @else { - margin-left: round($v-font-size/8); + margin-left: 1px; } &:first-child { @@ -42,11 +52,12 @@ // Focused component should be on top &:focus, + &[class*="focus"], [class*="focus"] { position: relative; - z-index: 1; + z-index: 5; } } } -}
\ 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 74324c1d9f..eafd1c0428 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -1,6 +1,3 @@ -$v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; - - @mixin valo-datefield ($primary-stylename: v-datefield) { .#{$primary-stylename} { @@ -37,45 +34,50 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; @mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) { @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); -} + .#{$primary-stylename}-calendarpanel { + position: relative; + background: $v-overlay-background-color; + padding: round($v-unit-size/6); + } +} -@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 valo-textfield-background-color($v-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; +@mixin valo-datefield-style ( + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, + $unit-size : $v-unit-size, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, + $background-color : $v-textfield-background-color, + $primary-stylename : v-datefield + ) { height: $unit-size; + border-radius: $border-radius; .#{$primary-stylename}-textfield { @include box-sizing(border-box); - @include valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, - $unit-size: $unit-size, $border-radius: $border-radius, - $background-color: $background-color) ; + @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color) ; padding-left: $unit-size * 1.2; width: 100%; height: 100%; + border-radius: inherit; } &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield { - @include valo-textfield-prompt-style(valo-textfield-background-color($background-color)); + @include valo-textfield-prompt-style($background-color); } .#{$primary-stylename}-button { - @include valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, - $background-color: $background-color); + @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius); } &.v-disabled { - @include opacity($v-textfield-disabled-opacity); + @include opacity($v-disabled-opacity); .#{$primary-stylename}-button { cursor: default; @@ -104,28 +106,29 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@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) { +@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) { + $border-width: first-number($v-textfield-border); @include valo-tappable; -webkit-appearance: none; background: transparent; border: none; padding: 0; position: absolute; - top: $v-textfield-border-width; - bottom: $v-textfield-border-width; - left: $v-textfield-border-width; + z-index: 10; + top: $border-width; + bottom: $border-width; + left: $border-width; width: $unit-size; - line-height: $unit-size - ($v-textfield-border-width*2); + line-height: $unit-size - ($border-width*2); text-align: center; cursor: pointer; font: inherit; - border-right: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color); + border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); outline: none; margin: 0; - @if $v-border-radius > 0 { - $br: max(0, $v-border-radius - $v-textfield-border-width); + @if $border-radius > 0 { + $br: max(0, $border-radius - $border-width); border-radius: $br 0 0 $br; } @@ -137,10 +140,8 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } } - @if $v-combobox-hover-style-enabled { - &:hover:before { - color: valo-font-color($background-color); - } + &:hover:before { + color: valo-font-color($background-color); } &:active:after { @@ -151,6 +152,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; bottom: 0; left: 0; @include valo-button-active-style($background-color); + border-radius: inherit; } } @@ -166,10 +168,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; -@mixin valo-datefield-popup-style ($context: $v-background-color) { - $copy: $v-background-color; - $v-background-color: $context; - +@mixin valo-datefield-popup-style { @include valo-overlay-style; @include user-select(none); @@ -188,8 +187,6 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } @include valo-datefield-calendarpanel-style; - - $v-background-color: $copy; } @@ -249,8 +246,6 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; td[class$="year"], td[class$="month"] { - //width: round($v-unit-size * 0.5); - button { @include appearance(none); border: none; @@ -259,17 +254,14 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; margin: 0; cursor: pointer; color: transparent; + font-size: 0; // For IE8, where transparent text is not possible width: round($v-unit-size * 0.5); height: round($v-unit-size * 0.67); outline: none; position: relative; + vertical-align: middle; &:before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; color: mix($v-background-color, valo-font-color($v-background-color)); font-size: round($v-font-size * 1.3); line-height: round($v-font-size * 1.5); @@ -313,15 +305,33 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; width: round($v-unit-size * 2); } - .v-datefield-calendarpanel-weeknumber, - .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child { - width: round($v-unit-size * 0.7); + .#{$primary-stylename}-weeknumber, + .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child { + width: round($v-unit-size * 0.8); color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7)); font-size: ceil($v-font-size * 0.86); display: inline-block; text-align: left; } + .#{$primary-stylename}-weeknumber { + position: relative; + } + + .#{$primary-stylename}-weeknumbers .v-first:before { + content: ""; + position: absolute; + top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical; + bottom: 0; + left: 0; + width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2; + border-top: valo-border($color: $v-app-background-color, $strength: 0.3); + border-right: valo-border($color: $v-app-background-color, $strength: 0.3); + border-top-right-radius: $v-border-radius; + border-bottom-left-radius: $v-border-radius; + background: $v-app-background-color; + } + td.v-datefield-calendarpanel-time { width: 100%; font-size: ceil($v-font-size * 0.86); @@ -339,12 +349,15 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; @mixin valo-datefield-calendarpanel-day-style { + @include box-sizing(border-box); width: round($v-unit-size * 0.8); height: round($v-unit-size * 0.7); + border: first-number(valo-border()) solid transparent; line-height: round($v-unit-size * 0.7); text-align: center; font-size: ceil($v-font-size * 0.86); background: $v-background-color; + @if $v-border-radius > 0 { border-radius: ceil($v-border-radius/2); } @@ -354,7 +367,7 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } @mixin valo-datefield-calendarpanel-day-hover-style { - color: valo-selection-color(); + color: $v-selection-color; } @mixin valo-datefield-calendarpanel-day-offmonth-style { @@ -363,20 +376,24 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } @mixin valo-datefield-calendarpanel-day-today-style { - color: valo-selection-color(); - background: blend-overlay(valo-selection-color(), $v-background-color); - font-weight: $v-font-weight + 100; + color: valo-font-color($v-background-color, 0.9); + font-weight: max(600, $v-font-weight + 100); + border-color: valo-font-color($v-background-color, 0.3); } @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; + color: valo-font-color($v-selection-color); + @include valo-gradient($v-selection-color); + border: none; } @mixin valo-datefield-calendarpanel-day-focused-style { - box-shadow: valo-focus-box-shadow(); + @include valo-focus-style($include-box-shadow: true); position: relative; // Show above other cells + + .v-ie8 & { + border-color: $v-focus-color; + } } @@ -401,5 +418,5 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; } @mixin valo-datefield-calendarpanel-month-style { - color: valo-selection-color(); + color: $v-selection-color; } diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss index 0aa1cf54fd..3bc5e21f8d 100644 --- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss +++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss @@ -7,7 +7,8 @@ } .v-active-drag-source { - @include opacity(0); + // Can't hide since it will hide Tables and Trees as well + //@include opacity(0); } .#{$primary-stylename} { diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index 06b42c6e86..ceaa732f3f 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -1,10 +1,17 @@ @mixin valo-formlayout ($primary-stylename: v-formlayout) { - + @include valo-formlayout-spacing; @include valo-formlayout-margins; .#{$primary-stylename} > table { border-spacing: 0; + position: relative; + padding: 0 $v-layout-spacing-horizontal; + } + + .#{$primary-stylename}.v-has-width > table, + .#{$primary-stylename}.v-has-width .#{$primary-stylename}-contentcell { + width: 100%; } .#{$primary-stylename}-error-indicator { @@ -21,11 +28,23 @@ } .#{$primary-stylename}-contentcell { - .v-checkbox { + .v-checkbox, + .v-radiobutton { font-weight: $v-font-weight + 100; } + + > .h4 { + position: absolute; + left: 0; + margin-top: -0.5em; + padding-bottom: 0.5em; + border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5); + color: valo-font-color($v-app-background-color, .5); + } } + + } @@ -38,7 +57,7 @@ } .#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow { - > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-captioncell, > .#{$primary-stylename}-contentcell, > .#{$primary-stylename}-errorcell { padding-top: $top; @@ -65,7 +84,7 @@ @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}-captioncell, > .#{$primary-stylename}-contentcell, > .#{$primary-stylename}-errorcell { padding-top: $vertical; @@ -78,8 +97,12 @@ @mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { + > table { + padding: 0; + } + > table > tbody > .#{$primary-stylename}-row { - > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-captioncell, > .#{$primary-stylename}-contentcell, > .#{$primary-stylename}-errorcell { padding-top: 0; @@ -88,7 +111,7 @@ } > table > tbody > .#{$primary-stylename}-row td { - border-bottom: $v-border-width solid darken($v-background-color, 5%); + border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3); } > table > tbody > .#{$primary-stylename}-lastrow td { @@ -96,34 +119,46 @@ } > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { - @include opacity(.7); + color: valo-font-color($v-background-color, .5); text-align: right; padding-left: ceil($v-unit-size/3); line-height: $row-height; } - .v-textfield, - .v-textarea, - .v-filterselect, - .v-datefield, - .v-filterselect-input, - .v-datefield-textfield { - width: 100%; - } + .#{$primary-stylename}-contentcell { + > .v-textfield, + > .v-textarea, + > .v-filterselect, + > .v-datefield, + > .v-filterselect-input, + > .v-datefield-textfield { + width: 100%; + } - .v-textfield, - .v-textarea, - .v-filterselect-input, - .v-datefield-textfield { - background: transparent; - border: none; - box-shadow: none; - border-radius: 0; - @include valo-textfield-size($row-height, 0); + > .v-textfield, + > .v-textarea, + > .v-filterselect input, + > .v-datefield input { + @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null); + background: transparent; + border: none; + color: inherit; + } + + > .v-textfield-prompt, + > .v-textarea-prompt, + > .v-filterselect-prompt input, + > .v-datefield-prompt input { + @include valo-textfield-prompt-style; + } + + > .v-textarea { + height: auto; + } } - .v-textarea { - height: auto; + .v-richtextarea { + margin: round($v-unit-size/8) 0; } .v-filterselect-button, @@ -143,5 +178,10 @@ .v-checkbox { margin-left: ceil($v-unit-size/6); } -} + > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell > .h4 { + border-bottom: none; + color: $v-selection-color; + margin-top: -0.2em; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index bb5655e94e..b254f097c5 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -15,7 +15,7 @@ $v-font-family--h3: $v-font-family--header !default; $v-letter-spacing--h1: -0.03em !default; $v-letter-spacing--h2: -0.02em !default; $v-letter-spacing--h3: 0 !default; -$v-letter-spacing--h4: 0.05em !default; +$v-letter-spacing--h4: 0 !default; @mixin valo-label ($primary-stylename: v-label) { @@ -23,15 +23,15 @@ $v-letter-spacing--h4: 0.05em !default; .#{$primary-stylename}-undef-w { white-space: nowrap; } - + h1, .h1, h2, .h2, h3, .h3 { line-height: $v-line-height--header; font-weight: $v-font-weight--header; - color: valo-header-color($v-background-color); + color: valo-header-color($v-app-background-color); } - + h1, .h1 { font-size: $v-font-size--h1; margin-top: 1.4em; @@ -39,7 +39,7 @@ $v-letter-spacing--h4: 0.05em !default; font-family: $v-font-family--h1; letter-spacing: $v-letter-spacing--h1; } - + h2, .h2 { font-size: $v-font-size--h2; font-family: $v-font-family--h2; @@ -47,7 +47,7 @@ $v-letter-spacing--h4: 0.05em !default; margin-bottom: 0.77em; letter-spacing: $v-letter-spacing--h2; } - + h3, .h3 { font-size: $v-font-size--h3; font-family: $v-font-family--h3; @@ -55,12 +55,12 @@ $v-letter-spacing--h4: 0.05em !default; margin-bottom: 0.77em; letter-spacing: $v-letter-spacing--h3; } - + h4, .h4 { line-height: $v-line-height--header; font-weight: $v-font-weight + 200; font-size: $v-font-size--small; - color: valo-header-color($v-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; @@ -91,7 +91,7 @@ $v-letter-spacing--h4: 0.05em !default; margin-top: $v-font-size; } } - + h1, .h1, h2, .h2, h3, .h3, @@ -100,21 +100,24 @@ $v-letter-spacing--h4: 0.05em !default; margin: 0 !important; } } - + .#{$primary-stylename}-large { font-size: $v-font-size--large; } - + .#{$primary-stylename}-small { font-size: $v-font-size--small; } - + .#{$primary-stylename}-bold { font-weight: $v-font-weight + 200; } - + .#{$primary-stylename}-light { font-weight: $v-font-weight - 100; + @if $v-font-weight < 400 { + color: valo-font-color($v-app-background-color, .5); + } } - -}
\ 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 a2612b4b49..d8d48d7f8c 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -1,16 +1,25 @@ @mixin valo-menubar ($primary-stylename: v-menubar) { - $copy: $v-button-hover-style-enabled; - $v-button-hover-style-enabled: false; - .#{$primary-stylename} { - @include valo-button-common-properties; - @include valo-button-style; + @include valo-button-static-style($states: normal, $vertical-centering: false); + @include valo-button-style($states: normal, $cursor: default); padding: 0; text-align: left; - } + overflow: hidden; - $v-button-hover-style-enabled: $copy; + &:focus:not(.v-disabled) { + @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false); + $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient); + @if type-of($v-focus-style) == list { + $box-shadow: $box-shadow, $v-focus-style; + } + box-shadow: $box-shadow; + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + } + } .#{$primary-stylename}:active:after { background: transparent; @@ -24,21 +33,25 @@ @include valo-menubar-menuitem-checked-style; } - .v-disabled > .#{$primary-stylename}-menuitem:before { - display: none; + .v-disabled > .#{$primary-stylename}-menuitem, + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-disabled { + cursor: default; + + &:before { + display: none; + } + } + + .#{$primary-stylename}-menuitem-disabled { + @include opacity($v-disabled-opacity); } .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected { - @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 { - border-color: $bc; - } + @include valo-button-style($states: normal, $background-color: $v-selection-color, $border-radius: 0, $shadow: null, $unit-size: null, $font-weight: null); + border-top-width: 0; + border-left-width: 0; + border-bottom-width: 0; + z-index: 2; &:hover:before { background: none; @@ -51,8 +64,6 @@ .#{$primary-stylename}-popup { @include valo-menubar-popup-style($primary-stylename); - //margin-top: -$v-selection-overlay-padding-vertical !important; - //margin-left: $v-selection-overlay-padding-horizontal !important; } } @@ -61,34 +72,41 @@ @mixin valo-menubar-menuitem-style { + $border-width: first-number($v-border); position: relative; z-index: 1; display: inline-block; - @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; + @include box-sizing(border-box); + @include valo-button-style($border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer); + background: transparent; + border-width: 0 $border-width 0 0; + height: 100%; vertical-align: top; - line-height: $v-unit-size - $v-button-border-width*2 - 1px; - @include user-select(none);; + line-height: $v-unit-size - $border-width*2 - 1px; + text-align: center; + @if $border-width == 0 { + margin-right: 1px; + } - $br: $v-button-border-radius - $v-button-border-width; + $br: $v-border-radius - $border-width - 1px; &:first-child { - border-left: none; + border-left-width: 0; border-radius: $br 0 0 $br; } &:last-child { border-radius: 0 $br $br 0; + margin-right: -$border-width; } &:first-child:last-child { border-radius: $br; + border-right-width: 0; + margin-right: 0; } &:before { content: ""; - content: ""; position: absolute; top: 0; right: 0; @@ -97,11 +115,9 @@ border-radius: inherit; } - @if $v-button-hover-style-enabled { - &:hover:before { - @include valo-button-hover-style; - border: none; - } + &:hover:before { + @include valo-button-hover-style; + border: none; } &:active:before { @@ -111,10 +127,16 @@ $margin-width: ceil($v-unit-size/2.4/5); .v-icon { margin: 0 $margin-width 0 #{-$margin-width}; + cursor: inherit; } - &[class*="-icon-only"] .v-icon { - margin: 0 #{-$margin-width}; + &[class*="-icon-only"] { + width: $v-unit-size; + padding: 0; + + .v-icon { + margin: 0; + } } } @@ -162,7 +184,10 @@ margin: $v-selection-overlay-padding-vertical 0; height: 0; overflow: hidden; - border-bottom: 1px solid darken(valo-overlay-background-color(), 5%); + border-bottom: valo-border($color: $v-overlay-background-color, $strength: 0.5); + @if first-number($v-border) == 0 { + border-bottom-width: 1px; + } } [class*="checked"] .#{$primary-stylename}-menuitem-caption:before { @@ -177,7 +202,6 @@ [class*="disabled"] { cursor: default; - @include opacity($v-disabled-opacity); } $v-background-color: $copy; @@ -197,27 +221,90 @@ } -@mixin valo-menubar-menuitem-checked-style ($background-color: scale-color($v-background-color, $lightness: -5%, $saturation: -5%)) { - @include valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top); +@mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) { + $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; + box-shadow: none; + @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top); + color: valo-font-color($background-color, 0.9); +} - @if color-luminance($background-color) < color-luminance($v-background-color) { - $border-color: valo-button-border-color($background-color: $background-color); - border-color: $border-color; +@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { + .#{$primary-stylename}-menuitem-checked { + @include valo-menubar-menuitem-checked-style($background-color: $background-color); + } +} - + [class*="menuitem"] { - @if length($border-color) > 1 { - $border-color: nth($border-color, 2); - } - border-left-color: $border-color; + + +@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) { + height: $unit-size; + + .#{$primary-stylename}-menuitem { + line-height: $unit-size - first-number($v-border)*2; + + &[class*="-icon-only"] { + width: $unit-size; } } - - color: valo-font-color($background-color, 0.9); - text-shadow: valo-button-text-shadow($background-color: $background-color); } -@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { +@mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) { + border: none; + padding: first-number($v-border); + box-shadow: none; + background: transparent; + color: inherit; + + &:focus:not(.v-disabled) { + border: none; + box-shadow: none; + } + + .#{$primary-stylename}-menuitem { + box-shadow: none; + border: none; + margin-right: max(1px, first-number($v-border)); + border-radius: $v-border-radius; + text-shadow: valo-text-shadow($offset: -1px); + + @if $v-animations-enabled { + @include transition(color 140ms); + } + + &:first-child, + &:last-child { + border-radius: inherit; + } + + &:hover:before { + display: none; + } + + &:active:not(.#{$primary-stylename}-menuitem-disabled):before { + display: block; + } + + &:hover { + color: $v-focus-color; + } + } + .#{$primary-stylename}-menuitem-checked { - @include valo-menubar-menuitem-checked-style($background-color: $background-color); + border: valo-border(); + line-height: $v-unit-size - first-number($v-border)*4 - 1px; + color: $v-selection-color; + } + + .#{$primary-stylename}-menuitem-selected { + $font-color: valo-font-color($v-selection-color, 0.9); + text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color); + + &:hover { + color: $font-color; + } + } + + .#{$primary-stylename}-menuitem-disabled:hover { + color: inherit; } } diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss index 769afb2e44..80e9ab8000 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -21,16 +21,11 @@ @mixin valo-nativeselect-select-style { - $_border-color: darken($v-background-color, $v-bevel-depth); - @if is-dark-color($v-background-color) { - $_border-color: lighten($v-background-color, $v-bevel-depth); - } - border: $v-border-width solid $_border-color; - background-color: valo-textfield-background-color($v-background-color); + border: valo-border(); + @include valo-gradient; &:focus { outline: none; - //@include valo-button-focus-style; - box-shadow: valo-focus-box-shadow(); + @include valo-focus-style($include-box-shadow: true); } -}
\ 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 b6230a1ace..bd6029700e 100644 --- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -1,5 +1,5 @@ @mixin valo-optiongroup ($primary-stylename: v-optiongroup) { - + .v-radiobutton { :root & > input { &:checked ~ label:after { @@ -9,7 +9,7 @@ height: $size; top: $offset; left: $offset; - background: valo-selection-color($v-button-background-color); + background: $v-selection-color; } & ~ label:before, @@ -19,23 +19,45 @@ } } } - + .v-select-optiongroup { - + .v-radiobutton, .v-checkbox { display: block; margin: round($v-unit-size/4) $v-font-size 0 0; - + &:first-child { margin-top: round($v-unit-size/6); } + + &:last-child { + margin-bottom: round($v-unit-size/6); + } } &.v-has-width label { white-space: normal; } - + + } + +} + + +@mixin valo-optiongroup-horizontal { + white-space: nowrap; + + .v-radiobutton, + .v-checkbox { + display: inline-block; + } + + &.v-has-width { + white-space: normal; + + label { + white-space: nowrap; + } } - -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss index 15dd77e432..ddaa5c363e 100644 --- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -3,17 +3,17 @@ div.v-layout.v-horizontal.v-widget { white-space: nowrap; } - + .v-layout.v-vertical > .v-expand, .v-layout.v-horizontal > .v-expand { @include box-sizing(border-box); width: 100%; height: 100%; - + // TODO fixes extra white space issues in some cases (can't remember what anymore), but causes some styles to clip //overflow: hidden; } - + .v-slot, .v-spacing { display: inline-block; @@ -21,7 +21,7 @@ vertical-align: top; line-height: 0; } - + // Clear any floats inside the slot, to prevent unwanted collapsing .v-vertical > .v-slot:after { display: inline-block; @@ -30,30 +30,30 @@ height: 0; overflow: hidden; } - + .v-vertical > .v-slot, .v-vertical > .v-expand > .v-slot { display: block; clear: both; } - + .v-horizontal > .v-slot, .v-horizontal > .v-expand > .v-slot { height: 100%; } - + .v-vertical > .v-spacing, .v-vertical > .v-expand > .v-spacing { width: 0; display: block; clear: both; } - + .v-horizontal > .v-spacing, .v-horizontal > .v-expand > .v-spacing { height: 0; } - + .v-align-middle:before, .v-align-bottom:before, .v-expand > .v-align-middle:before, @@ -65,12 +65,12 @@ width: 0; overflow: hidden; } - + .v-align-middle, .v-align-bottom { white-space: nowrap; } - + .v-align-middle > .v-widget, .v-align-bottom > .v-widget { display: inline-block; @@ -80,106 +80,106 @@ .v-align-middle > .v-widget { vertical-align: middle; } - + //.v-align-bottom, .v-align-bottom > .v-widget { vertical-align: bottom; } - + .v-align-center { text-align: center; } - + .v-align-center > .v-widget { margin-left: auto; margin-right: auto; } - + .v-align-right { text-align: right; } - + .v-align-right > .v-widget { margin-left: auto; } - + .v-has-caption, .v-has-caption > .v-caption { // Force natural width to zero display: inline-block; } - + .v-caption-on-left, .v-caption-on-right { white-space: nowrap; } - + .v-caption-on-top > .v-caption, .v-caption-on-bottom > .v-caption { display: block; } - + .v-caption-on-left > .v-caption { padding-right: .5em; } - + .v-caption-on-right > .v-caption { //vertical-align: top; } - + .v-caption-on-left > .v-widget, .v-caption-on-right > .v-widget { display: inline-block; //vertical-align: middle; } - + .v-has-caption.v-has-width > .v-widget { width: 100% !important; } - + .v-has-caption.v-has-height > .v-widget { height: 100% !important; } - + } @mixin valo-orderedlayout { - + .v-margin-top { padding-top: $v-layout-margin-top; } - + .v-margin-right { padding-right: $v-layout-margin-right; } - + .v-margin-bottom { padding-bottom: $v-layout-margin-bottom; } - + .v-margin-left { padding-left: $v-layout-margin-left; } - + .v-spacing { width: $v-layout-spacing-horizontal; height: $v-layout-spacing-vertical; } - + } @mixin valo-horizontallayout--wrapping { white-space: normal !important; - + & > .v-spacing + .v-slot, & > .v-slot:first-child { margin-bottom: $v-layout-spacing-vertical; } - + & > .v-slot:first-child:last-child { margin-bottom: 0; - } -}
\ No newline at end of file + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 8d70d81071..b18e4f86d1 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -1,13 +1,5 @@ -$v-panel-shadow-style: $v-shadow-style !default; -$v-panel-border-width: $v-border-width !default; -$v-panel-border-radius: $v-border-radius !default; - -$v-panel-caption-background-color: null !default; -$v-panel-caption-gradient-depth: $v-gradient-depth/4 !default; -$v-panel-caption-bevel-style: first($v-bevel-style) !default; -$v-panel-caption-bevel-depth: $v-bevel-depth !default; - - +$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default; +$v-panel-border: $v-border !default; @mixin valo-panel ($primary-stylename: v-panel) { @@ -30,55 +22,50 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; -@function valo-panel-background-color ($context: $v-background-color) { - $bg-color: lighten($context, 5%); - @return $bg-color; -} - - -@function valo-panel-caption-background-color ($background-color) { - @return $background-color or $v-background-color; -} - - -@function valo-panel-border-color ($background-color: $v-background-color) { - $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-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); - @return $border-color; +@mixin valo-panel-style ( + $background-color : $v-panel-background-color, + $shadow : $v-shadow, + $border : $v-panel-border + ) { + background: $background-color; + color: valo-font-color($background-color); + border-radius: $v-border-radius; + border: valo-border($border: $border, $color: darker-of($background-color, $v-app-background-color), $strength: 0.7); + box-shadow: valo-bevel-and-shadow($shadow: $shadow); } -@mixin valo-panel-style { - background: valo-panel-background-color(); - border-radius: $v-panel-border-radius; - 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 valo-panel-caption-style ($background-color: $v-panel-caption-background-color) { +@mixin valo-panel-caption-style ( + $background-color : $v-background-color, + $bevel : first($v-bevel), + $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, + $border : $v-panel-border, + $border-radius : $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0 + ) { @include box-sizing(border-box); padding: 0 round($v-unit-size/3); - line-height: $v-unit-size; - $_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 valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth); - color: valo-font-color($_bg); + line-height: $v-unit-size - first-number($v-border); + $bg: $background-color; + border-bottom: valo-border($border: $border, $color: $bg, $strength: 0.5); + border-radius: $border-radius; + @include valo-gradient($color: $bg, $gradient: $gradient); + color: valo-font-color($bg); font-weight: $v-caption-font-weight; font-size: $v-caption-font-size; - 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); + box-shadow: valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient); + text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel); } -@mixin valo-panel-well-style { - $_bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); - background: $_bg; - box-shadow: valo-shadow($shadow-style: (0 1px 0 0 v-hilite, join(inset, $v-panel-shadow-style))); + +@mixin valo-panel-well-style ($shadow: (0 1px 0 0 v-tint, join(inset, $v-shadow))) { + $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); + background: $bg; + color: valo-font-color($bg); + box-shadow: valo-bevel-and-shadow($shadow: $shadow); border-radius: $v-border-radius; - border: $v-border-width solid valo-panel-border-color(valo-panel-background-color()); + border: valo-border(); .v-panel-caption { background: transparent; @@ -87,18 +74,57 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; } + @mixin valo-panel-borderless-style { background: transparent; + color: inherit; border: none; box-shadow: none; .v-panel-caption { background: transparent; box-shadow: none; + color: inherit; + padding: 0; + margin: 0 round($v-unit-size/3); + border-bottom: none; + } +} + + + +@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) { + > .v-panel-captionwrap { + position: relative; + z-index: 2; + + &:after { + content: ""; + position: absolute; + bottom: -$border-width; + right: 0; + left: 0; + height: $border-width; + background: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); + } + } + + > .v-panel-content { + &:before { + content: ""; + position: absolute; + z-index: 2; + top: 0; + height: $border-width; + background: $v-app-background-color; + left: 0; + right: 0; + } } } + @mixin valo-panel-adjust-content-margins { > .v-margin-top { padding-top: round($v-unit-size/3); @@ -116,4 +142,3 @@ $v-panel-caption-bevel-depth: $v-bevel-depth !default; padding-left: round($v-unit-size/3); } } - diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss index 020c04d927..1a44eb47d6 100644 --- a/WebContent/VAADIN/themes/valo/components/_popupview.scss +++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss @@ -1,3 +1,9 @@ @mixin valo-popupview ($primary-stylename: v-popupview) { - -}
\ No newline at end of file + .#{$primary-stylename}-popup { + @include valo-overlay-style; + + .popupContent { + @include valo-panel-adjust-content-margins; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss index 5d0e27a4f5..2c7e9925e7 100644 --- a/WebContent/VAADIN/themes/valo/components/_progressbar.scss +++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss @@ -2,35 +2,59 @@ $v-progressbar-border-radius: $v-border-radius !default; @mixin valo-progressbar ($primary-stylename: v-progressbar) { - + .#{$primary-stylename}-wrapper { @include valo-progressbar-track-style; + min-width: $v-unit-size * 2; } .#{$primary-stylename}-indicator { @include valo-progressbar-indicator-style; + min-width: max($v-border-radius*2, 3px); + @include transition(width 160ms ); + } + + + .#{$primary-stylename}-point { + .#{$primary-stylename}-indicator { + background: transparent; + box-shadow: none; + border: none; + text-align: right; + overflow: hidden; + + &:before { + content: ""; + display: inline-block; + @include valo-progressbar-indicator-style; + width: round($v-unit-size/4); + vertical-align: top; + } + } } } -@mixin valo-progressbar-track-style { +@mixin valo-progressbar-track-style ($background-color: $v-background-color) { border-radius: $v-progressbar-border-radius; height: round($v-unit-size/4); - min-width: $v-unit-size * 2; - @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); - box-shadow: valo-textfield-box-shadow(); + $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to top); @include box-sizing(border-box); } -@mixin valo-progressbar-indicator-style { +@mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) { border-radius: $v-progressbar-border-radius; height: inherit; - min-width: max($v-border-radius*2, 3px); - @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: valo-button-border-color($v-bevel-style, $v-bevel-depth/2, valo-selection-color()); + @include valo-gradient($color: $background-color); + box-shadow: valo-bevel-and-shadow($background-color: $background-color); + @if $border { + border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color); + } @else { + border: none; + } @include box-sizing(border-box); + max-width: 100%; } diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 4899f210a8..9e7a90fb0a 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -1,6 +1,91 @@ +$valo-richtextarea-use-font-awesome: true !default; + @mixin valo-richtextarea ($primary-stylename: v-richtextarea) { + .#{$primary-stylename} { + @include valo-textfield-style($states: normal, $padding: 0); + height: auto; + overflow: hidden; + } + + .#{$primary-stylename} .gwt-RichTextToolbar { + @include valo-gradient($color: $v-background-color); + box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient); + border-bottom: valo-border(); + color: valo-font-color($v-background-color); + } + .#{$primary-stylename} .gwt-ToggleButton, .#{$primary-stylename} .gwt-PushButton { display: inline-block; + line-height: $v-unit-size; + width: $v-unit-size; + text-align: center; + outline: none; + + &:hover { + color: valo-font-color($v-background-color, 1); + } + } + + .#{$primary-stylename} .gwt-ToggleButton-down, + .#{$primary-stylename} .gwt-ToggleButton-down-hovering { + $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; + //box-shadow: none; + @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top); + } + + @if $valo-richtextarea-use-font-awesome { + + // List of title attribute values and Font Awesome icons for the formatting buttons + $icons: "Toggle Bold" "\f032", + "Toggle Italic" "\f033", + "Toggle Underline" "\f0cd", + "Toggle Subscript" "\f12c", + "Toggle Superscript" "\f12b", + "Left Justify" "\f036", + "Center" "\f037", + "Right Justify" "\f038", + "Toggle Strikethrough" "\f0cc", + "Indent Right" "\f03c", + "Indent Left" "\f03b", + "Insert Horizontal Rule" "—", + "Insert Ordered List" "\f0cb", + "Insert Unordered List" "\f0ca", + "Insert Image" "\f03e", + "Create Link" "\f0c1", + "Remove Link" "\f127", + "Remove Formatting" "\f12d"; + + .#{$primary-stylename} .gwt-RichTextToolbar-top { + img { + display: none; + } + + div:before { + font-family: FontAwesome; + } + + @each $pair in $icons { + div[title="#{first($pair)}"]:before { + content: "#{last($pair)}"; + } + } + } + } // Use FontAwesome + + .#{$primary-stylename} .gwt-RichTextToolbar-bottom { + font-size: round($v-font-size * 0.8); + padding: 0 round($v-unit-size/4) round($v-unit-size/4) 0; + + select { + margin: round($v-unit-size/4) 0 0 round($v-unit-size/4); + } + } + + .#{$primary-stylename} .gwt-RichTextArea { + background: #fff; + border: none; + display: block; } -}
\ No newline at end of file + +} diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss index d2e7b5387d..096f80e909 100644 --- a/WebContent/VAADIN/themes/valo/components/_slider.scss +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -4,6 +4,9 @@ $v-slider-handle-width: round($v-unit-size/1.8) !default; $v-slider-handle-height: round($v-unit-size/1.8) !default; $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; +$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2); +$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); + @mixin valo-slider ($primary-stylename: v-slider) { @@ -36,22 +39,32 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; @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); + margin: $_valo-slider-base-margin-vertical $_valo-slider-base-margin-horizontal; white-space: nowrap; overflow: hidden; border-radius: $v-slider-track-border-radius; + &:before { + content: ""; + position: absolute; + top: $_valo-slider-base-margin-vertical; + bottom: $_valo-slider-base-margin-vertical; + left: $_valo-slider-base-margin-horizontal; + width: $v-border-radius; + border-radius: $v-border-radius; + border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color); + } + &:after { @include valo-progressbar-indicator-style; - min-width: 0; content: ""; display: inline-block; - //position: relative; margin-left: -100%; width: 100%; vertical-align: top; .v-ie8 & { + position: relative; left: round(-$v-slider-handle-width/2); } } @@ -68,7 +81,8 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; } &:after { - @include valo-button-focus-style; + border: valo-border(); + @include valo-button-focus-style(); opacity: 0; @if $v-animations-enabled { @include transition(opacity 200ms); @@ -106,22 +120,34 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; .#{$primary-stylename}-vertical { padding: round($v-slider-handle-width/2) 0; - height: $v-unit-size * 2; // Effectively min-height + height: $v-unit-size * 2 + $v-slider-handle-width; // Effectively min-height .#{$primary-stylename}-base { - @include valo-gradient($color: scale-color($v-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); - min-width: 0; + $bg-lightness: if(color-luminance($v-background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($v-background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left); width: $v-slider-track-size; height: 100% !important; - min-height: $v-unit-size * 2; + min-width: 0; margin: 0 round(($v-unit-size - $v-slider-track-size)/2); + &:before { + top: auto; + bottom: $_valo-slider-base-margin-horizontal; + left: $_valo-slider-base-margin-vertical; + right: $_valo-slider-base-margin-vertical; + width: auto; + height: $v-border-radius; + border-left: none; + border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color); + } + &:after { + height: 101%; margin-left: 0; - @include valo-gradient($color: valo-selection-color(), $direction: to right); + @include valo-gradient($color: $v-selection-color, $direction: to right); .v-ie8 & { - top: round($v-slider-handle-width/2) - 2px; + top: round($v-slider-handle-width/2); left: 0; height: 130%; } @@ -144,4 +170,91 @@ $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; } } -}
\ No newline at end of file +} + + + +@mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) { + .#{$primary-stylename}-base { + @include valo-progressbar-track-style($background-color: $background-color); + height: $v-slider-track-size; + } + + &.#{$primary-stylename}-vertical { + .#{$primary-stylename}-base { + $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left); + } + } +} + +@mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) { + .#{$primary-stylename}-base { + &:before { + border-color: first-color(valo-border($border: $border, $color: $background-color, $context: $v-app-background-color)); + } + + &:after { + @include valo-progressbar-indicator-style($background-color: $background-color, $border: $border); + } + } + + &.#{$primary-stylename}-vertical { + .#{$primary-stylename}-base { + &:after { + @include valo-gradient($color: $background-color, $direction: to right); + } + } + } +} + + +@mixin valo-slider-no-indicator ($primary-stylename: v-slider) { + .#{$primary-stylename}-base:before, + .#{$primary-stylename}-base:after { + display: none; + } +} + + +@mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) { + .#{$primary-stylename}-handle { + &:before { + @include valo-button-style($background-color: $background-color, $unit-size: null, $border-radius: null); + } + + &:after { + border: valo-border($color: $background-color); + @include valo-button-focus-style($background-color: $background-color); + } + } +} + + +@mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) { + $tick-size: max(1px, first-number($v-border)); + $tick-color: first-color(valo-border($strength: 0.7)); + + &:before { + content: ""; + height: 15%; + position: absolute; + @include linear-gradient(to right, $tick-color $tick-size, transparent $tick-size, $fallback: transparent); + background-repeat: repeat-x; + background-size: 100%/($tick-count - 1) - 0.1% 100%; + left: $_valo-slider-base-margin-horizontal; + right: $_valo-slider-base-margin-horizontal; + } + + &.#{$primary-stylename}-vertical:before { + height: auto; + width: 15%; + @include linear-gradient(to bottom, $tick-color $tick-size, transparent $tick-size, $fallback: transparent); + background-repeat: repeat-y; + background-size: 100% 100%/($tick-count - 1) - 0.01%; + right: auto; + left: 0; + top: $_valo-slider-base-margin-horizontal; + bottom: $_valo-slider-base-margin-horizontal; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss index 67c2907897..0b097f71fd 100644 --- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -1,15 +1,12 @@ -$v-splitpanel-splitter-size: round($v-unit-size/5) !default; - - @mixin valo-splitpanel($primary-stylename : v-splitpanel) { + // No need for parent selector + @include valo-splitpanel-style($primary-stylename: $primary-stylename); +} - // Disable splitter shadow (should most likely be a variable) - $copy: $v-shadow-depth; - $v-shadow-depth: 0%; - // Round to even number - $v-splitpanel-splitter-size: $v-splitpanel-splitter-size + $v-splitpanel-splitter-size%2; + +@mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) { .#{$primary-stylename}-vertical, .#{$primary-stylename}-horizontal { overflow: hidden; @@ -17,58 +14,47 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; } .#{$primary-stylename}-hsplitter { - width: $v-splitpanel-splitter-size; + z-index: 100; + cursor: e-resize; + cursor: col-resize; } - .#{$primary-stylename}-hsplitter div, - .#{$primary-stylename}-vsplitter div { - @include valo-button-style; - @include box-sizing(border-box); - height: auto; - padding: 0; - border-radius: 0; - position: absolute; - z-index: 1; - top: 0; - right: 0; - bottom: 0; - left: 0; + .#{$primary-stylename}-vsplitter { + z-index: 100; cursor: s-resize; cursor: row-resize; + } - &:before { + // Element which acts as the active dragging area + .#{$primary-stylename}-hsplitter, + .#{$primary-stylename}-vsplitter { + &:after { content: ""; - width: $v-unit-size; - height: 0; - border: 1px solid; - $color: $v-button-background-color or $v-background-color; - $shade: max($v-bevel-depth, 10%); - $border-color1: scale-color($color, $lightness: -$shade, $saturation: -$shade/2); - $border-color2: scale-color($color, $lightness: -$shade/2, $saturation: -$shade/4); - border-color: $border-color1 $border-color2 $border-color2 $border-color1; position: absolute; - top: 50%; - left: 50%; - margin-left: round(-$v-unit-size/2); - margin-top: -1px; + top: 0; + right: 0; + bottom: 0; + left: 0; } - } - .#{$primary-stylename}-vsplitter { - height: $v-splitpanel-splitter-size; + div { + width: inherit; + height: inherit; + overflow: hidden; + position: relative; + } } - .#{$primary-stylename}-hsplitter div { - cursor: e-resize; - cursor: col-resize; - $color: $v-button-background-color or $v-background-color; - @include valo-gradient($color: $color, $direction: to right); - + .#{$primary-stylename}-hsplitter div, + .#{$primary-stylename}-vsplitter div { &:before { - width: 0; - height: $v-unit-size; - margin-left: -1px; - margin-top: round(-$v-unit-size/2); + @include box-sizing(border-box); + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } } @@ -86,7 +72,6 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; .#{$primary-stylename}-second-container { position: static !important; display: inline-block; - margin-left: $v-splitpanel-splitter-size; /* Match to the width of the splitter element */ vertical-align: top; } @@ -95,83 +80,138 @@ $v-splitpanel-splitter-size: round($v-unit-size/5) !default; vertical-align: top; } } - - $v-shadow-depth: $copy; - } +@mixin valo-splitpanel-style( + $primary-stylename : v-splitpanel, + $splitter-size: max(1px, first-number($v-border)), + $splitter-active-size: round($v-unit-size/3), + $splitter-handle-visible: false, + $splitter-shadow: none, + $orientation: vertical horizontal + ) { + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter { + width: $splitter-size; + } + } -@mixin valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) { - .#{$primary-stylename}-vsplitter-#{$stylename}, - .#{$primary-stylename}-hsplitter-#{$stylename} { - div { - @include opacity(0); - @include transition(opacity 200ms); + @if contains($orientation, vertical) { + .#{$primary-stylename}-vsplitter { + height: $splitter-size; } + } - &:hover div { - @include opacity(1); + $offset: round(($splitter-active-size - $splitter-size)/-2); + + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter:after { + left: $offset; + right: $offset; } } - .#{$primary-stylename}-vsplitter-#{$stylename} { - div { - left: 40%; - right: 40%; - height: $v-splitpanel-splitter-size + 1px; - top: round($v-splitpanel-splitter-size/-2); + @if contains($orientation, vertical) { + .#{$primary-stylename}-vsplitter:after { + top: $offset; + bottom: $offset; + } + } + @if contains($orientation, horizontal) or contains($orientation, vertical) { + .#{$primary-stylename}-hsplitter div, + .#{$primary-stylename}-vsplitter div { &:before { - width: 50%; - left: 25%; - margin-left: 0; + @include valo-button-style($shadow: $splitter-shadow); + height: auto; + padding: 0; + border-radius: 0; } } + } - &:before { - content: ""; - position: absolute; - height: 1px; - left: 0; - right: 0; - background: darken($v-background-color, max($v-bevel-depth/2, 10%)); + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter div { + &:before { + $color: $v-background-color; + @include valo-gradient($color: $color, $direction: to right); + } } } - .#{$primary-stylename}-hsplitter-#{$stylename} { - div { - top: 40%; - bottom: 40%; - width: $v-splitpanel-splitter-size + 1px; - left: round($v-splitpanel-splitter-size/-2); + @if $splitter-handle-visible { + .#{$primary-stylename}-vsplitter div, + .#{$primary-stylename}-hsplitter div { + &:after { + @include valo-splitpanel-splitter-handle-style; + } + } - &:before { - height: 50%; - top: 25%; - margin-top: 0; + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter div { + &:after { + @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false); + } } } + } - &:before { - content: ""; - position: absolute; - width: 1px; - top: 0; - bottom: 0; - background: darken($v-background-color, max($v-bevel-depth/2, 10%)); + @if contains($orientation, horizontal) { + &.#{$primary-stylename}-horizontal { + .#{$primary-stylename}-second-container { + margin-left: $splitter-size; + } } } +} + + + +/* +@mixin valo-splitpanel-style ($splitter-size: ) { + > div > .v-splitpanel-hsplitter { + width: ; + + div:after { + @include valo-splitpanel-splitter-handle-style($horizontal: true); + } - .#{$primary-stylename}-vertical .#{$primary-stylename}-second-container-#{$stylename} { - margin-top: 1px; - position: static !important; + &:after { + left: 0; + right: 0; + } + } + .v-splitpanel-horizontal .v-splitpanel-second-container +} +*/ + + + +@mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) { + @if $include-common { + content: ""; + border: valo-border($strength: 0.6); + $border-color: first-color(valo-border($strength: 1.2)); + border-top-color: $border-color; + border-left-color: $border-color; + position: absolute; + top: 50%; + left: 50%; } - .#{$primary-stylename}-horizontal .#{$primary-stylename}-second-container-#{$stylename} { - margin-left: 1px; + @if $horizontal { + width: 0; + height: $v-unit-size; + margin-left: first-number($v-border)*-1; + margin-top: round(-$v-unit-size/2); + } @else { + width: $v-unit-size; + height: 0; + margin-left: round(-$v-unit-size/2); + margin-top: first-number($v-border)*-1; } } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 4981423a3d..8b155fe525 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -1,5 +1,5 @@ $v-table-row-height: $v-unit-size !default; -$v-table-border-width: $v-border-width !default; +$v-table-border-width: first-number($v-border) !default; $v-table-border-color: null !default; $v-table-border-radius: 0 !default; $v-table-cell-padding-horizontal: round($v-unit-size/3) !default; @@ -63,16 +63,17 @@ $v-table-background-color: null !default; @mixin valo-table ($primary-stylename: v-table) { $background-color: $v-table-background-color or valo-table-background-color(); - $border-color: $v-table-border-color or darken($v-background-color, max(5%, $v-bevel-depth/3)); + $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8)); .#{$primary-stylename} { // For scroll position indicator position: relative; background: $v-background-color; + color: valo-font-color($v-background-color); } - .v-table-header table, - .v-table-footer table, + .v-table-header table, + .v-table-footer table, .v-table-table { outline: $v-table-border-width solid $border-color; } @@ -84,7 +85,7 @@ $v-table-background-color: null !default; @include valo-gradient($v-background-color); white-space: nowrap; font-size: $v-table-header-font-size; - text-shadow: valo-button-text-shadow($v-background-color, $v-bevel-depth); + text-shadow: valo-text-shadow; } .#{$primary-stylename}-header-wrap { @@ -149,14 +150,19 @@ $v-table-background-color: null !default; .#{$primary-stylename}-cell-content { border-left: $v-table-border-width solid $border-color; padding: 0 $v-table-cell-padding-horizontal; + + &:first-child { + border-left: none; + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + } } .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container, - .#{$primary-stylename}-footer td:first-child, - .#{$primary-stylename}-cell-content:first-child { + .#{$primary-stylename}-footer td:first-child { border-left-color: transparent; } + .#{$primary-stylename}-cell-wrapper { white-space: nowrap; line-height: 1; @@ -180,27 +186,32 @@ $v-table-background-color: null !default; border-top: none; } + .#{$primary-stylename}-row { + background-color: $background-color; + } + .#{$primary-stylename}-row-odd { - background-color: darken($background-color, 2%); + $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%); + background-color: scale-color($background-color, $lightness: $bg-lightness); } .#{$primary-stylename} [class*="-row"].v-selected { - $selected-border-color: darken(valo-selection-color(), 8%); + $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); - @include valo-gradient(valo-selection-color()); + @include valo-gradient($v-selection-color); background-origin: border-box; - color: valo-font-color(valo-selection-color(), 0.9); - text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth); + color: valo-font-color($v-selection-color, 0.9); + text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + .v-selected { - $gradient-end: first(last(valo-gradient-color-stops(valo-selection-color()))); + $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); background: $gradient-end; td { border-top-color: $gradient-end; } } - + .#{$primary-stylename}-cell-content { border-color: transparent; border-left-color: $selected-border-color; @@ -293,6 +304,7 @@ $v-table-background-color: null !default; &:after { content: ""; position: absolute; + $v-button-border-width: first-number($v-border); top: -$v-button-border-width; right: -$v-button-border-width; bottom: -$v-button-border-width; @@ -337,7 +349,8 @@ $v-table-background-color: null !default; tr { display: block; - @include valo-drag-element-style; + @include valo-drag-element-style($background-color: null); + background: $background-color; &[style*="hidden"] { @@ -466,16 +479,18 @@ $v-table-background-color: null !default; @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; - border-right-color: transparent; + border-left: none; + border-right: none; + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + padding-right: $v-table-cell-padding-horizontal + $v-table-border-width; } } @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; - border-bottom-color: transparent; + border-top: none; + border-bottom: none; } } @@ -492,4 +507,77 @@ $v-table-background-color: null !default; .#{$primary-stylename}-body { border: none; } + + // TODO copy pasted from the main mixin + $background-color: $v-table-background-color or valo-table-background-color(); + $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7)); + + .#{$primary-stylename}-header-wrap { + border-bottom: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-footer-wrap { + border-top: $v-table-border-width solid $border-color; + } +} + +@mixin valo-table-compact-style ( + $primary-stylename: v-table, + $row-height: $v-table-row-height, + $header-font-size: $v-table-header-font-size, + $cell-padding-horizontal: $v-table-cell-padding-horizontal + ) { + + .#{$primary-stylename}-header-wrap, + .#{$primary-stylename}-footer-wrap, + .#{$primary-stylename}-header-drag { + font-size: $header-font-size; + } + + .#{$primary-stylename}-footer-container { + $vertical-padding: round(($row-height - $header-font-size)/2); + padding-top: $vertical-padding - $v-table-border-width; + padding-bottom: $vertical-padding; + padding-right: $cell-padding-horizontal + $v-table-border-width; + } + + .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-header-drag { + $vertical-padding: round(($row-height - $header-font-size)/2); + padding-top: $vertical-padding; + padding-bottom: $vertical-padding - $v-table-border-width; + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + } + + .#{$primary-stylename}-resizer { + height: $row-height; + } + + .#{$primary-stylename}-cell-wrapper { + $vertical-padding: round(($row-height - $v-font-size)/2); + padding: $vertical-padding 0; + } + + .#{$primary-stylename}-cell-content { + padding: 0 $cell-padding-horizontal; + + &:first-child { + padding-left: $cell-padding-horizontal + $v-table-border-width; + } + } + + .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator { + height: $row-height; + line-height: $row-height; + } + + .#{$primary-stylename}-header-drag { + margin-top: round($row-height/-2); + } + + .#{$primary-stylename}-row-drag-middle td:first-child:before { + height: $row-height + $v-table-border-width; + } } diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index a50d020ed9..185c6fbdc0 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -11,11 +11,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .#{$primary-stylename} .v-disabled .#{$primary-stylename}-caption-close { display: none; } - + .#{$primary-stylename}-content { position: relative; } - + } @@ -40,7 +40,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .#{$primary-stylename}-tabcontainer { position: relative; line-height: $v-unit-size; - @include user-select(none);; + @include user-select(none); table, tbody, @@ -59,7 +59,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:before { content: ""; position: absolute; - height: $v-border-width; + height: max(1px, first-number($v-border)); background: $border-color; bottom: 0; left: 0; @@ -83,6 +83,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; line-height: $v-unit-size; font-size: $v-font-size; font-weight: $v-font-weight; + color: valo-font-color($v-app-background-color, 0.6); width: auto !important; @if $v-animations-enabled { @@ -98,7 +99,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } &:hover { - color: valo-selection-color(); + color: $v-selection-color; } &.v-disabled { @@ -119,14 +120,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; outline: none; .v-caption { - color: valo-selection-color(); - border-bottom: $v-border-width solid valo-selection-color(); + color: $v-selection-color; + border-bottom: max(1px, first-number($v-border)) solid $v-selection-color; } } .#{$primary-stylename}-tabitem-selected .v-caption.v-caption { - border-bottom: $v-border-width*2 solid valo-selection-color(); - color: valo-selection-color(); + border-bottom: max(1px, first-number($v-border))*2 solid $v-selection-color; + color: $v-selection-color; } .#{$primary-stylename}-caption-close { @@ -139,13 +140,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; border-radius: round($v-border-radius/2); &:hover { - background: valo-selection-color(); - color: valo-font-color(valo-selection-color()); + background: $v-selection-color; + color: valo-font-color($v-selection-color); } &:active { - background: darken(valo-selection-color(), 5%); - color: valo-font-color(valo-selection-color()); + background: darken($v-selection-color, 5%); + color: valo-font-color($v-selection-color); } } @@ -160,7 +161,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:after { content: ""; - height: $v-border-width; + height: first-number($v-border); position: absolute; bottom: 0; left: 0; @@ -195,12 +196,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:hover { @include opacity(1); - color: valo-selection-color(); + color: $v-selection-color; } &:active { @include opacity(.7); - color: valo-selection-color(); + color: $v-selection-color; } &::-moz-focus-inner { @@ -226,7 +227,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; [class*="disabled"] { cursor: default; color: inherit !important; - @include opacity(.1, true); + @include opacity(.1 !important); } } @@ -309,17 +310,17 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } @mixin valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) { - .#{$primary-stylename}-caption-close { + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close { visibility: hidden; } - .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close { + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close { visibility: visible; } } @mixin valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) { - .#{$primary-stylename}-tabs { + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs { padding: 0 round($v-unit-size/4); } } diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 3ecf3d80ca..5db4c709fc 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -1,5 +1,5 @@ @mixin valo-textarea ($primary-stylename: v-textarea) { - + .#{$primary-stylename} { @include valo-textarea-style; width: $v-default-field-width; @@ -9,21 +9,45 @@ @include valo-textfield-readonly-style; } + .#{$primary-stylename}-error { + @include valo-textfield-error-style; + } + } -@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) { +@mixin valo-textarea-style ( + $unit-size : $v-unit-size, + $padding : round($v-unit-size/6), // Computed by default + + $font-color : null, // Computed by default + $font-weight : max(400, $v-font-weight), // Inherited by default + $font-size : null, // Inherited by default + + $background-color : $v-textfield-background-color, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, - $unit-size: $unit-size or $v-unit-size; + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, - @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); - display: block; // Fixes extra white-space under the textarea element + $states : (normal, focus, disabled) + ) { + + @include valo-textfield-style($unit-size: $unit-size, $padding: $padding, + $font-color: $font-color, + $font-weight: $font-weight, // Inherited by default + $font-size: $font-size, // Inherited by default + + $background-color: $background-color, + $border: $border, + $border-radius: $border-radius, + + $bevel: $bevel, + $shadow: $shadow, + + $states: $states); + //display: block; // Fixes extra white-space under the textarea element height: auto; resize: none; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 75ef5888d5..f28fee0d1c 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -1,107 +1,96 @@ -$v-textfield-bevel-style: inset 0 1px 0 v-shade, 0 1px 0 v-hilite !default; -$v-textfield-bevel-depth: $v-bevel-depth !default; -$v-textfield-shadow-style: none !default; -$v-textfield-shadow-depth: $v-shadow-depth !default; -$v-textfield-background-color: null !default; -$v-textfield-unit-size: null !default; +$v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default; +$v-textfield-bevel: inset 0 1px 0 v-shade !default; +$v-textfield-shadow: 0 1px 0 (v-tint 2) !default; $v-textfield-font-weight: 400 !default; -$v-textfield-font-size: $v-font-size !default; -$v-textfield-border-width: $v-border-width !default; +$v-textfield-border: $v-border !default; $v-textfield-border-radius: $v-border-radius !default; $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@function valo-textfield-background-color ($context) { - $bg-color: lighten($context, 8%); - @if is-dark-color($context) { - $bg-color: darken($context, 4%); - } - @return $bg-color; -} -@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: 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; - } @else if $_bevel { - @return $_bevel; - } @else if $_shadow { - @return $_shadow; - } @else { - @return null; - } +@mixin valo-textfield-style ( + $unit-size : $v-unit-size, + $padding : null, // Computed by default -} + $font-color : null, // Computed by default + $font-weight : max(400, $v-font-weight), + $font-size : null, // Inherited by default + $background-color : $v-textfield-background-color, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, + $gradient : none, + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, + $states : (normal, focus, disabled) + ) { -@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 { - $padding-width: $padding-width + ceil($border-radius/3); - } - padding: ceil($unit-size/9) $padding-width; -} + @if contains($states, normal) { + @include appearance(none); + margin: 0; + font: inherit; + font-size: $font-size; + font-weight: $font-weight; + line-height: normal; + height: $unit-size; + border-radius: $border-radius; + @if type-of($padding) == number or type-of($padding) == list { + padding: $padding; + } @else { + $padding-width: ceil($unit-size/6); + @if $border-radius { + $padding-width: $padding-width + ceil($border-radius/3); + } + $padding-height: round($unit-size/9); -@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 valo-textfield-background-color($v-background-color); - $border-color: if(color-luminance($background-color) < color-luminance($v-background-color), $background-color, $v-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); - @return $border-color; -} - + padding: $padding-height $padding-width; + // Go ask Mozilla why text alignment in text inputs is so wonky + .v-ff & { + // padding-top: $padding-height - 2px; + // padding-bottom: 0; + } + } + @if $background-color and $border { + border: valo-border($border, darker-of($background-color, $v-app-background-color)); + } -@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) { + @if $gradient == none { + background: $background-color; + } @else if $gradient { + @include valo-gradient($color: $background-color, $gradient: $gradient) + } - $background-color: $background-color or valo-textfield-background-color($v-background-color); - $unit-size: $unit-size or $v-unit-size; - - @include appearance(none); - margin: 0; - font: inherit; - font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null); - font-weight: $v-textfield-font-weight; - @include valo-textfield-size($unit-size, $border-radius); - border-radius: $border-radius; - border: $v-textfield-border-width solid valo-textfield-border-color($bevel-style, $bevel-depth, $background-color); - background: $background-color; - 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); + color: valo-font-color($background-color); + box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient); - @if $v-animations-enabled { - @include transition(box-shadow 180ms, border 180ms); + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } } - &.v-disabled { - @include opacity($v-textfield-disabled-opacity); + @if contains($states, disabled) { + &.v-disabled { + @include opacity($v-textfield-disabled-opacity); + } } - &:focus { - @include valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + @if contains($states, focus) { + &:focus { + @include valo-textfield-focus-style($bevel: $bevel, $shadow: $shadow, $gradient: $gradient, $background-color: $background-color); + } } - + // TODO allow parent selector to be used in interpolation &.v-textfield-prompt, &.v-textarea-prompt { @@ -111,32 +100,34 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } -@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%); +@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) { + @if type-of($background-color) == 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%); + } + $font-color: scale-color($font-color, $saturation: saturation($font-color)); + color: $font-color; } - $font-color: scale-color($font-color, $saturation: saturation($font-color)); - color: $font-color; } -@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) { +@mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) { outline: none; @if $v-animations-enabled { @include transition(none); - } - + } + $focus-color: valo-focus-color(); - + @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) { border-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); + + box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true); + + @include valo-focus-style; } @@ -144,22 +135,26 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; background: transparent; box-shadow: none; &:focus { - box-shadow: valo-focus-box-shadow(); + @include valo-focus-style($include-box-shadow: true); } } @mixin valo-textfield ($primary-stylename: v-textfield) { - + .#{$primary-stylename} { @include valo-textfield-style; width: $v-default-field-width; } - + .#{$primary-stylename}-readonly { @include valo-textfield-readonly-style; } - + + .#{$primary-stylename}-error { + @include valo-textfield-error-style; + } + } @@ -177,7 +172,17 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; -@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) { + +@mixin valo-textfield-error-style { + border-color: $v-error-indicator-color; + $bg: scale-color($v-error-indicator-color, $lightness: 98%); + background: $bg; + color: valo-font-color($bg); +} + + + +@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) { .v-slot-#{$stylename} { position: relative; } @@ -197,10 +202,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; // Font icons span.v-icon { - left: $v-textfield-border-width; - bottom: $v-textfield-border-width; + $border-width: first-number($v-textfield-border); + left: $border-width; + bottom: $border-width; width: $unit-size; - line-height: $unit-size - $v-textfield-border-width*2; + line-height: $unit-size - $border-width*2; text-align: center; font-size: $font-size; } diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index cb0093c8c3..4b9fe33c4a 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -25,17 +25,17 @@ $v-tree-expand-animation-enabled: false !default; @mixin valo-tree ($primary-stylename: v-tree) { - + .#{$primary-stylename} { position: relative; white-space: nowrap; - @include user-select(none);; - + @include user-select(none); + &:focus { outline: none; } } - + .#{$primary-stylename}-node { &:before { content: ""; @@ -50,7 +50,6 @@ $v-tree-expand-animation-enabled: false !default; content: "+"; position: static; margin-left: -1.9em; - //background: red; vertical-align: top; @include valo-tree-collapsed-icon-style; text-align: center; @@ -61,13 +60,13 @@ $v-tree-expand-animation-enabled: false !default; padding-left: 1.9em; } } - + .#{$primary-stylename}-node-caption { height: $v-tree-row-height; line-height: $v-tree-row-height - 1px; overflow: hidden; white-space: nowrap; - + & > div { display: inline-block; width: 100%; @@ -90,7 +89,7 @@ $v-tree-expand-animation-enabled: false !default; } } } - + span { padding-right: $v-tree-row-height; cursor: pointer; @@ -135,7 +134,7 @@ $v-tree-expand-animation-enabled: false !default; display: inline-block; } } - + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before { @include valo-tree-expanded-icon-style; @@ -149,7 +148,10 @@ $v-tree-expand-animation-enabled: false !default; @include valo-tree-expanded-icon-style(true); } - + .#{$primary-stylename}-node-leaf > .#{$primary-stylename}-node-caption > div:before, + .v-ie8 & .#{$primary-stylename}-node-leaf:before { + visibility: hidden; + } .#{$primary-stylename}-node-focused { // This a v-tree-node-caption element @@ -157,17 +159,21 @@ $v-tree-expand-animation-enabled: false !default; opacity: 1; border: 1px solid valo-focus-color(); } + + .v-ie8 & { + outline: 1px dotted $v-focus-color; + } } - - - + + + .#{$primary-stylename}-node-selected { - color: valo-font-color(valo-selection-color(), 0.9); - text-shadow: valo-button-text-shadow(valo-selection-color(), $v-bevel-depth); + color: valo-font-color($v-selection-color, 0.9); + text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); &:after { opacity: 1; - @include valo-gradient(valo-selection-color()); + @include valo-gradient($v-selection-color); border: none; .v-ie8 & { @@ -176,10 +182,10 @@ $v-tree-expand-animation-enabled: false !default; } .v-ie8 & { - @include valo-gradient(valo-selection-color()); + @include valo-gradient($v-selection-color); } } - + .#{$primary-stylename}-node-children { padding-left: round($v-unit-size/2); diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss index b3927576ed..9d434a88fb 100644 --- a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss @@ -1,16 +1,12 @@ @mixin valo-twincolselect ($primary-stylename: v-select-twincol) { - + .#{$primary-stylename} { white-space: normal; - + select { @include valo-nativeselect-select-style; } - &:not(.v-has-width) { - width: auto !important; - } - .v-textfield, .v-nativebutton { width: auto !important; @@ -26,7 +22,7 @@ .#{$primary-stylename}-caption-right { @include valo-caption-style; } - + .#{$primary-stylename}-buttons { white-space: nowrap; display: inline-block; @@ -39,7 +35,7 @@ position: absolute; left: round($v-unit-size/4); right: round($v-unit-size/4); - top: $v-unit-size - $v-button-border-width; + top: $v-unit-size - first-number($v-border); padding: 0; text-align: center; @@ -56,13 +52,13 @@ z-index: 1; } - @if $v-button-border-radius > 0 { + @if $v-border-radius > 0 { .v-button:first-child { - border-radius: $v-button-border-radius $v-button-border-radius 0 0; + border-radius: $v-border-radius $v-border-radius 0 0; } .v-button:last-child { - border-radius: 0 0 $v-button-border-radius $v-button-border-radius; + border-radius: 0 0 $v-border-radius $v-border-radius; } } @@ -74,7 +70,7 @@ @include valo-twincolselect-add-icon-style; } } - + } diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index 236cb35d9e..050a8156d3 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -1,5 +1,6 @@ +$v-window-background-color: $v-panel-background-color !default; $v-window-border-radius: null !default; -$v-window-shadow-style: 0 4px 12px 6px rgba(0,0,0, $v-shadow-depth/100%), $v-overlay-shadow-style !default; +$v-window-shadow: 0 4px 12px 6px rgba(0,0,0, $v-shadow-opacity/100%), $v-overlay-shadow !default; $v-window-open-animation: null !default; $v-window-animations-enabled: $v-animations-enabled !default; @@ -15,20 +16,21 @@ $v-window-animations-enabled: $v-animations-enabled !default; @mixin valo-window ($primary-stylename: v-window) { .#{$primary-stylename} { - @include valo-overlay-style; + @include valo-overlay-style($background-color: $v-window-background-color); @if $v-window-animations-enabled and $v-window-open-animation { @include animation($v-window-open-animation); } - @if $v-window-shadow-style { - @if $v-window-shadow-style == none { + @if $v-window-shadow { + @if $v-window-shadow == none { box-shadow: none; - } @else { - box-shadow: valo-shadow($shadow-style: $v-window-shadow-style); + } @else if $v-window-shadow != $v-overlay-shadow { + box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow); } } border-radius: $v-window-border-radius; + //border: first-number($v-border) solid valo-panel-border-color(); padding: 0; min-width: 4*$v-unit-size !important; min-height: $v-unit-size !important; @@ -46,43 +48,44 @@ $v-window-animations-enabled: $v-animations-enabled !default; right: 0; bottom: 0; left: 0; - background: $v-background-color; - @include opacity(.3); + background: $v-app-background-color; + @include opacity(.5); } .#{$primary-stylename}-draggingCurtain { position: fixed !important; } - + .#{$primary-stylename}-resizingCurtain + .v-window, .#{$primary-stylename}-draggingCurtain + .v-window { @include transition(none); } + $scroll-divider-width: max(1px, first-number($v-border)); + .#{$primary-stylename}-outerheader { position: absolute; z-index: 2; top: 0; left: 0; right: 0; - //height: $v-unit-size - 1px; // Raise above the window content, if that is ever promoted to a layer @include transform(translatez(0)); &:after { content: ""; position: absolute; - bottom: -1px; + bottom: -$scroll-divider-width; right: 0; left: 0; - height: 1px; - $_bg: valo-overlay-background-color(); - background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%); + height: $scroll-divider-width; + $_bg: $v-window-background-color; + background: first-color(valo-border($strength: 0.5)); } } .#{$primary-stylename}-header { - @include user-select(none);; + @include user-select(none); cursor: move; line-height: $v-unit-size - 1px; padding-left: round($v-unit-size/3); @@ -90,9 +93,9 @@ $v-window-animations-enabled: $v-animations-enabled !default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: blend-normal(rgba(valo-font-color(valo-overlay-background-color()), .7), valo-overlay-background-color()); + color: blend-normal(rgba(valo-font-color($v-window-background-color), .7), $v-window-background-color); } - + .#{$primary-stylename}-closebox, .#{$primary-stylename}-maximizebox, .#{$primary-stylename}-restorebox { @@ -111,25 +114,25 @@ $v-window-animations-enabled: $v-animations-enabled !default; @if $v-animations-enabled { @include transition(all 140ms); } - + &:focus { outline: none; } - + &:hover { @include opacity(1); - color: valo-selection-color(); + color: $v-selection-color; } - + &:active { color: inherit; } } - + .#{$primary-stylename}-closebox { @include valo-window-close-icon-style; } - + .#{$primary-stylename}-maximizebox, .#{$primary-stylename}-restorebox { right: $v-unit-size; @@ -143,18 +146,18 @@ $v-window-animations-enabled: $v-animations-enabled !default; .#{$primary-stylename}-maximizebox { @include valo-window-maximize-icon-style; } - + .#{$primary-stylename}-restorebox { @include valo-window-restore-icon-style; } - + .v-window > .popupContent, .#{$primary-stylename}-wrap, .#{$primary-stylename}-contents, .#{$primary-stylename}-contents > .v-scrollable { height: 100%; } - + .#{$primary-stylename}-contents { @include box-sizing(border-box); border-radius: $v-border-radius; @@ -178,11 +181,19 @@ $v-window-animations-enabled: $v-animations-enabled !default; position: absolute; z-index: 2; top: 0; - height: 1px; - background: valo-overlay-background-color(); + height: $scroll-divider-width; + background: $v-window-background-color; left: 0; right: 0; } + + .v-panel-captionwrap:after { + background: first-color(valo-border($strength: 0.5)); + } + + .v-panel-content:before { + background: $v-window-background-color; + } } } @@ -227,7 +238,8 @@ $v-window-animations-enabled: $v-animations-enabled !default; .#{$primary-stylename}-bottom-toolbar { padding: round($v-unit-size/5) round($v-unit-size/3); - background: $v-background-color; + @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color); + border-top: valo-border($strength: 0.5); .v-expand { overflow: visible; diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss index dbcea242d2..43a275bac8 100644 --- a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss +++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss @@ -29,8 +29,7 @@ -moz-osx-font-smoothing: grayscale; display: inline-block; text-align: center; - @include user-select(none);; - cursor: default; + @include user-select(none); } } @@ -38,4 +37,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 valo-fonts;
\ No newline at end of file +@include valo-fonts; diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss index dcfcaf1a4a..5ae20bac0d 100644 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -1,156 +1,342 @@ // Common styles for components -// About 40KB of CSS output +// About 50KB of CSS output + +@import "valo-menu"; @mixin valo-common-stylenames { - $v-scaling-factor--small: 0.8 !default; - $v-scaling-factor--large: 1.2 !default; - - $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small); - $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large); + $v-scaling-factor--small: 0.8 !default; + $v-scaling-factor--large: 1.2 !default; + + $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small); + $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large); + + $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small); + $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large); + + $v-friendly-color: #2c9720; + + + .v-button-primary { + @include valo-button-style($background-color: $v-selection-color); + $padding-width: round($v-unit-size/2); + padding: 0 $padding-width; + font-weight: bold; + $min-width: round($v-unit-size * 2.2); + min-width: $min-width; + + // IE8 + border-box + min-width == fail + .v-ie8 & { + min-width: $min-width - $padding-width*2; + } + } + + .v-button-friendly { + @include valo-button-style($background-color: $v-friendly-color); + } + + .v-button-danger { + @include valo-button-style($background-color: $v-error-indicator-color); + } + + .v-button-borderless { + @include valo-button-borderless-style; + } + + .v-button-link { + @include valo-button-borderless-style; + @include valo-link-style; + } + + .v-button-small { + @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null); + } + + .v-button-large { + @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null); + } + + .v-button-icon-align-right { + @include valo-button-icon-align-right-style; + } + + .v-button-icon-only { + width: $v-unit-size; + padding: 0; + + &.v-button-small { + width: $v-unit-size--small; + } + } + + .v-link-small { + font-size: $v-font-size--small; + } - $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small); - $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large); + .v-link-large { + font-size: $v-font-size--large; + } + .v-tabsheet-centered-tabs { + @include valo-tabsheet-centered-tabs; + } - .v-button-primary { - @include valo-button-style($background-color: valo-selection-color()); - padding: 0 round($v-unit-size/1.4); - font-weight: bold; - } + .v-tabsheet-equal-width-tabs { + @include valo-tabsheet-equal-width-tabs($flex: false); + } - .v-button-friendly { - @include valo-button-style($background-color: #2c9720); - } + .v-tabsheet-padded-tabbar { + @include valo-tabsheet-padded-tabbar; + } - .v-button-danger { - @include valo-button-style($background-color: $v-error-indicator-color); - } + .v-tabsheet-icons-on-top { + @include valo-tabsheet-icons-on-top; + } - .v-button-borderless { - @include valo-button-borderless-style; - } + .v-panel-borderless { + @include valo-panel-borderless-style; + } - .v-button-link { - @include valo-button-borderless-style; - @include valo-link-style; - } + .v-formlayout.light { + @include valo-formlayout-light-style; + } + + .v-textfield-borderless, + .v-textarea-borderless { + @include valo-textfield-borderless-style; + } - .v-button-small { - @include valo-button-style($unit-size: $v-unit-size--small); - font-size: $v-font-size--small; - } + .v-textfield-small { + @include valo-textfield-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } - .v-button-large { - @include valo-button-style($unit-size: $v-unit-size--large); - font-size: $v-font-size--large; - } - - .v-button-icon-align-right { - @include valo-button-icon-align-right-style; - } + .v-textfield-large { + @include valo-textfield-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } - .v-tabsheet-centered-tabs { - @include valo-tabsheet-centered-tabs; - } + @include valo-textfield-inline-icon($stylename: inline-icon); - .v-tabsheet-equal-width-tabs { - @include valo-tabsheet-equal-width-tabs($flex: false); - } + .v-textarea-small { + @include valo-textarea-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } - .v-tabsheet-icons-on-top { - @include valo-tabsheet-icons-on-top; - } + .v-textarea-large { + @include valo-textarea-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } - .v-panel-borderless { - @include valo-panel-borderless-style; - } + .v-textfield-align-right, + .v-textarea-align-right { + text-align: right; + } - .v-formlayout.light { - @include valo-formlayout-light-style; - } + .v-textfield-align-center, + .v-textarea-align-center { + text-align: center; + } - .v-textfield-borderless, - .v-textarea-borderless { - @include valo-textfield-borderless-style; - } + .v-filterselect-small { + @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null); + font-size: $v-font-size--small; + } - .v-textfield-small { - @include valo-textfield-style($unit-size: $v-unit-size--small); - font-size: $v-font-size--small; - } + .v-filterselect-large { + @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null); + font-size: $v-font-size--large; + } - .v-textfield-large { - @include valo-textfield-style($unit-size: $v-unit-size--large); - font-size: $v-font-size--large; - } + .v-datefield-small { + @include valo-datefield-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } - @include valo-textfield-inline-icon($stylename: inline-icon); + .v-datefield-large { + @include valo-datefield-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } - .v-textarea-small { - @include valo-textarea-style($unit-size: $v-unit-size--small); - font-size: $v-font-size--small; - } + .v-checkbox-small { + @include valo-checkbox-style($size: $v-unit-size--small); + font-size: $v-font-size--small; + } - .v-textarea-large { - @include valo-textarea-style($unit-size: $v-unit-size--large); - font-size: $v-font-size--large; - } + .v-checkbox-large { + @include valo-checkbox-style($size: $v-unit-size--large); + font-size: $v-font-size--large; + } - .v-filterselect-small { - @include valo-combobox-style($unit-size: $v-unit-size--small); - font-size: $v-font-size--small; - } + .v-label-spinner { + @include valo-spinner; + } - .v-filterselect-large { - @include valo-combobox-style($unit-size: $v-unit-size--large); - font-size: $v-font-size--large; - } - - .v-datefield-small { - @include valo-datefield-style($unit-size: $v-unit-size--small); - } - - .v-datefield-large { - @include valo-datefield-style($unit-size: $v-unit-size--large); - } - - .v-checkbox-small { - @include valo-checkbox-style($unit-size: $v-unit-size--small); - } - - .v-checkbox-large { - @include valo-checkbox-style($unit-size: $v-unit-size--large); - } - - .v-label-spinner { - @include valo-spinner; - } - - .v-panel-well { - @include valo-panel-well-style; - } - - .v-panel-borderless { - @include valo-panel-borderless-style; - } - - .v-csslayout-well { - @include valo-panel-well-style; - @include valo-panel-adjust-content-margins; - } + .v-panel-well { + @include valo-panel-well-style; + } - .v-csslayout-card { - @include valo-panel-style; - @include valo-panel-adjust-content-margins; - } + .v-panel-borderless { + @include valo-panel-borderless-style; + } - @include valo-splitpanel-small($stylename: small); - - @include valo-component-group; + .v-panel-scroll-divider { + @include valo-panel-scroll-divider-style; + } - .wrapping { + .v-csslayout-well { + @include valo-panel-well-style; + @include valo-panel-adjust-content-margins; + } + + .v-csslayout-card { + @include valo-panel-style; + @include valo-panel-adjust-content-margins; + } + + .v-splitpanel-horizontal.large, + .v-splitpanel-vertical.large { + @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true); + } + + .v-menubar-small { + @include valo-menubar-small-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } + + .v-menubar-borderless { + @include valo-menubar-borderless-style; + } + + @include valo-component-group; + + .wrapping { @include valo-horizontallayout--wrapping; } + .v-Notification.success, + .v-Notification.failure { + background: #fff; + color: #555; + border: 2px solid $v-friendly-color; + + h1 { + color: $v-friendly-color; + font-weight: $v-font-weight + 100; + + &:before { + font-family: FontAwesome; + content: "\f00c"; + margin-right: .5em; + } + } + + &.bar { + margin: -2px !important; + } + } + + .v-Notification.failure { + border-color: $v-error-indicator-color; + + h1 { + color: $v-error-indicator-color; + + &:before { + content: "\f05e"; + } + } + } + + .v-label-success, + .v-label-failure { + background: #fff; + color: #555; + border: 2px solid $v-friendly-color; + border-radius: $v-border-radius; + padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size); + font-weight: $v-font-weight + 100; + font-size: round($v-font-size * 0.95); + + &:before { + font-family: FontAwesome; + content: "\f00c"; + margin-right: .5em; + margin-left: round($v-unit-size/-2); + color: $v-friendly-color; + } + } + + .v-label-failure { + border-color: $v-error-indicator-color; + + &:before { + content: "\f05e"; + color: $v-error-indicator-color; + } + } + + + .v-panel-caption.v-horizontallayout { + height: auto !important; + line-height: 0; + + .v-slot { + vertical-align: middle; + } + + .v-label { + line-height: $v-unit-size; + } + } + + + .v-select-optiongroup-horizontal { + @include valo-optiongroup-horizontal; + } + + + .v-table-no-stripes { + @include valo-table-no-stripes; + } + + .v-table-no-vertical-lines { + @include valo-table-no-vertical-lines; + } + + .v-table-no-horizontal-lines { + @include valo-table-no-horizontal-lines; + } + + .v-table-no-header { + @include valo-table-no-header; + } + + .v-table-borderless { + @include valo-table-borderless; + } + + .v-table-compact, + .v-table-small { + @include valo-table-compact-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); + } + + .v-table-small { + font-size: $v-font-size--small; + } + + + .v-accordion-borderless { + border: none; + border-radius: 0; + box-shadow: none; + + > .v-accordion-item { + border-radius: 0; + } + } + + + @include valo-menu; + } diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss new file mode 100644 index 0000000000..fd230e93c8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss @@ -0,0 +1,105 @@ +$valo-menu-background-color: null !default; + +@mixin valo-menu { + + $bg-lightness: if(color-luminance($v-app-background-color) < 10, 10%, -60%); + $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness); + + .v-slot-valo-menu { + position: fixed; + } + + .valo-menu { + position: fixed; + height: 100%; + overflow: auto; + padding-bottom: $v-unit-size; + @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg); + color: valo-font-color($bg); + font-size: round($v-font-size * 0.9); + line-height: round($v-unit-size * 0.8); + border-right: valo-border($color: $bg); + + .valo-menu-title, + .valo-menu-subtitle, + .valo-menu-item { + display: block; + line-height: inherit; + } + + .valo-menu-title { + line-height: 1.2; + @include valo-gradient($color: $v-selection-color); + $font-color: valo-font-color($v-selection-color, 1); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); + padding: round($v-unit-size/3) round($v-unit-size/2); + font-size: 0.9em; + border-bottom: valo-border($color: $v-selection-color); + box-shadow: valo-bevel-and-shadow($shadow: $v-shadow); + + .v-menubar { + background: transparent; + border-color: first-color(valo-border($color: $v-selection-color)); + color: inherit; + box-shadow: none; + text-shadow: inherit; + } + + .v-menubar-menuitem { + background: transparent; + box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient); + text-shadow: inherit; + font-size: $v-font-size; + border-color: inherit; + } + } + + .valo-menu-subtitle { + color: valo-font-color($bg, 0.5); + margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); + border-bottom: valo-border($color: $bg, $strength: 0.5); + position: relative; + + .badge { + position: absolute; + right: round($v-unit-size/2); + color: mix(valo-font-color($bg),$v-selection-color); + } + } + + .valo-menu-item { + outline: none; + font-weight: $v-font-weight + 100; + padding: 0 round($v-unit-size) 0 round($v-unit-size/2); + cursor: pointer; + position: relative; + + &:before { + content: ""; + $diff: color-luminance($bg) - color-luminance($v-selection-color); + @if abs($diff) < 30 { + background: lighten($v-selection-color, 10%); + } @else { + background: $v-selection-color; + } + position: absolute; + left: 0; + height: 100%; + width: 0; + border-radius: 0 $v-border-radius $v-border-radius 0; + @include transition(width 300ms); + } + + &:hover, + &.selected { + color: valo-font-color($bg, 1); + } + + &.selected:before { + width: round($v-unit-size/8); + } + } + } + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss index 046b5923ad..8a3894b524 100644 --- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss +++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss @@ -1,15 +1,19 @@ @mixin valo-contextmenu { - + .v-contextmenu { @include valo-selection-overlay-style; + + table { + border-spacing: 0; + } } - + .v-contextmenu .gwt-MenuItem { @include valo-selection-item-style; } - + .v-contextmenu .gwt-MenuItem-selected { @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 e685c7fc01..2c71f076e2 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -88,6 +88,10 @@ $valo-global-included: false !default; overflow: hidden; } + .v-icon { + cursor: inherit; + } + .v-icon, .v-errorindicator, .v-required-field-indicator { @@ -95,19 +99,45 @@ $valo-global-included: false !default; line-height: inherit; } - .v-caption, - .v-captiontext { + .v-caption { display: inline-block; + white-space: nowrap; line-height: $v-line-height; } + .v-captiontext { + display: inline-block; + line-height: inherit; + } + // Component global styles should also be included here - @include valo-orderedlayout-global; - @include valo-gridlayout-global; - @include valo-calendar-global; - @include valo-colorpicker-global; - @include valo-table-global; - @include valo-tabsheet-global; + @if v-is-included(orderedlayout) { + @include valo-orderedlayout-global; + } + + @if v-is-included(gridlayout) { + @include valo-gridlayout-global; + } + + @if v-is-included(calendar) { + @include valo-calendar-global; + } + + @if v-is-included(colorpicker) { + @include valo-colorpicker-global; + } + + @if v-is-included(table) or v-is-included(treetable) { + @include valo-table-global; + } + + @if v-is-included(tabsheet) { + @include valo-tabsheet-global; + } + + @if v-is-included(splitpanel) { + @include valo-splitpanel-global; + } $valo-global-included: true; } @@ -225,9 +255,6 @@ $valo-shared-pathPrefix: null; outline: none; } - //.v-captiontext, - //.v-errorindicator, - //.v-required-field-indicator, img.v-icon { vertical-align: middle; } @@ -340,6 +367,7 @@ $valo-shared-pathPrefix: null; .v-generated-body { height: auto; overflow: auto; + background-color: $v-app-background-color; } .v-app, @@ -349,20 +377,4 @@ $valo-shared-pathPrefix: null; overflow: visible !important; } - // Reposition loading indicator so that it doens't scroll with the page - .v-loading-indicator { - position: fixed !important; - } - - .v-overlay-container { - position: absolute; - top: 0; - left: 0; - } - - // Reposition notifications so that they don't scroll with the page - .v-Notification { - position: fixed !important; - } - } diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss index 0b083310fd..9ad3d27e0e 100644 --- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss +++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss @@ -43,6 +43,14 @@ + + +$v-loading-indicator-color: valo-focus-color() !default; +$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default; +$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; + + + @include keyframes(v-progress-start) { 0% { width: 0%; } 100% { width: 50%; } @@ -54,8 +62,9 @@ } @include keyframes(v-progress-wait) { - 0% { width: 90%; } - 100% { width: 96%; } + 0% { width: 90%; height: $v-loading-indicator-bar-height; } + 3% { width: 91%; height: $v-loading-indicator-bar-height--wait; } + 100% { width: 96%; height: $v-loading-indicator-bar-height--wait; } } @include keyframes(v-progress-wait-pulse) { @@ -65,11 +74,9 @@ } -$v-loading-indicator-color: valo-focus-color() !default; -$v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; @mixin valo-loading-bar { - + .v-loading-indicator { position: fixed !important; z-index: 99999; @@ -82,11 +89,11 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; background-color: $v-loading-indicator-color; //@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%); pointer-events: none; - + @include transition(none); @include animation(v-progress-start 1000ms 200ms both); //@include animation-fill-mode(forwards); - + &[style*="none"] { // Chrome skips the transitions because it thinks the element is display: none; display: block !important; @@ -96,7 +103,7 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; @include transition(opacity 500ms 300ms, width 300ms); } } - + .v-loading-indicator-delay { width: 90%; .v-ff & { @@ -104,7 +111,7 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; } @include animation(v-progress-delay 3.8s forwards); } - + .v-loading-indicator-wait { width: 96%; .v-ff & { @@ -112,5 +119,5 @@ $v-loading-indicator-bar-height: ceil($v-unit-size/7) !default; } @include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards); } - -}
\ No newline at end of file + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss index c239a65c11..ff470b8144 100644 --- a/WebContent/VAADIN/themes/valo/shared/_notification.scss +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -1,3 +1,6 @@ +$v-notification-title-color: $v-focus-color !default; + + @mixin valo-notification { @@ -44,7 +47,7 @@ } // 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) { + .v-Notification[style*=" left: 0"]:not(.v-Notification-system):not(.bar) { @include valo-anim-slide-right(600ms); } } @@ -59,12 +62,12 @@ border-radius: $v-border-radius; text-align: center; position: fixed !important; - + -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; - + h1 { margin: 0; display: inline-block; @@ -74,7 +77,7 @@ white-space: nowrap; letter-spacing: 0; } - + p { margin: 0; display: inline-block; @@ -82,11 +85,11 @@ max-width: 30em; text-align: left; } - + h1 ~ p { margin-left: round($v-font-size * 1.5); } - + .v-icon + h1 { margin-left: round($v-font-size); } @@ -103,12 +106,7 @@ // System notification .v-Notification-system { - left: 0 !important; - right: 0; - max-width: 100%; - margin: 0 !important; - border-radius: 0; - + @include valo-notification-bar-style; @include valo-notification-system-style; } @@ -116,7 +114,7 @@ .v-Notification-system.v-Notification-system { margin: 0 !important; } - + @@ -125,24 +123,28 @@ .v-Notification.tray { text-align: left; h1 { - //display: block; + //display: block; } - + h1 + p { display: block; margin: .5em 0 0; } @include valo-notification-tray-style; } - + .v-Notification.warning { @include valo-notification-warning-style; } - + .v-Notification.error { @include valo-notification-error-style; } + .v-Notification.bar { + @include valo-notification-bar-style; + } + .v-Notification.closable { @include valo-notification-closable-style; @@ -177,18 +179,6 @@ overflow: hidden !important; // Override GWT PopupPanel cursor: pointer; - //&:before { - // content: ""; - // position: absolute; - // top: 0; - // right: 0; - // bottom: 0; - // width: $v-unit-size; - // cursor: pointer; - // background: #000; - // @include opacity(.15); - //} - &:after { content: "\00d7"; font-size: 1.5em; @@ -203,7 +193,7 @@ color: #000; @include opacity(.5); text-align: center; - border: $v-border-width solid #000; + border: first-number($v-border) solid #000; border-color: rgba(0,0,0,.3); border-radius: 50%; @include transition(opacity 200ms); @@ -232,11 +222,11 @@ // Make thigns easier to read &[style*="opacity: 0.9;"] { - @include opacity(1, true); + @include opacity(1 !important); } - + h1 { - color: valo-focus-color(); + color: $v-notification-title-color; font-size: round($v-font-size * 1.2); line-height: 1; } @@ -245,11 +235,24 @@ } } +@mixin valo-notification-bar-style { + left: 0 !important; + right: 0; + max-width: 100%; + margin: 0 !important; + border-radius: 0; + box-shadow: 0 0 20px 0 rgba(0,0,0,0.25); + padding: round($v-unit-size/3) round($v-unit-size/2.5); + + p { + max-width: 50em; + } +} + @mixin valo-notification-system-style { background-color: #444; font-weight: $v-font-weight + 100; line-height: round($v-font-size * 1.4); - box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25); h1 { color: #fff; @@ -258,7 +261,6 @@ p { color: #e6e6e6; - max-width: 50em; } // No need to underline the "click here" text, let's imply that the whole banner is clickable diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 35e055516a..6f29b1efef 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -1,13 +1,23 @@ +@function valo-overlay-background-color ($context: $v-background-color) { + @if is-dark-color($context) { + @return darken($context, 3%); + } + @return lighten($context, 2%); +} + + +$v-overlay-background-color: valo-overlay-background-color() !default; $v-overlay-border-radius: $v-border-radius !default; -$v-overlay-border-width: $v-border-width !default; +$v-overlay-border-width: first-number($v-border) !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; $v-overlay-padding-horizontal: $v-overlay-padding !default; -$v-overlay-shadow-style: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade !default; +$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade 2-color-luminance($v-background-color)/255) !default; +$v-selection-overlay-background-color: $v-overlay-background-color !default; $v-selection-overlay-padding: $v-overlay-padding !default; $v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default; $v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default; @@ -16,14 +26,7 @@ $v-selection-item-border-radius: $v-border-radius - 1px !default; $v-selection-item-height: ceil($v-unit-size/1.4) !default; $v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; $v-selection-item-font-weight: max(400, $v-font-weight); - - -@function valo-overlay-background-color ($context: $v-background-color) { - @if is-dark-color($context) { - @return darken($context, 2%); - } - @return lighten($context, 2%); -} +$v-selection-item-selection-color: $v-selection-color !default; @@ -35,17 +38,21 @@ $v-selection-item-font-weight: max(400, $v-font-weight); $shadow-offset-x: nth($shadow, 1); $shadow-offset-y: nth($shadow, 2); $shadow-blur: nth($shadow, 3); + $shadow-spread: 0; + @if length($shadow) > 4 { + $shadow-spread: nth($shadow, 4); + } $shadow-color: last($shadow); - $shadow-color-opacity: opacity($shadow-color); + $shadow-color-opacity: round(opacity($shadow-color) * 100); $shadow-color: opacify($shadow-color, 1); position: absolute; - top: $shadow-offset-y - $shadow-blur; - right: -$shadow-offset-x + $shadow-blur; - bottom: -$shadow-offset-y + $shadow-blur; - left: $shadow-offset-x - $shadow-blur; + top: $shadow-offset-y - $shadow-blur - $shadow-spread; + right: -$shadow-offset-x + $shadow-blur - $shadow-spread; + bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread; + left: $shadow-offset-x - $shadow-blur - $shadow-spread; background: $shadow-color; - filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity}); + filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true); } } @@ -63,7 +70,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); display: block; // Border simulation - .center { + /*.center { position: absolute; top: -$v-overlay-border-width; right: -$v-overlay-border-width; @@ -71,11 +78,11 @@ $v-selection-item-font-weight: max(400, $v-font-weight); left: -$v-overlay-border-width; 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: valo-shadow($shadow-style: $v-overlay-shadow-style); + $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow); @if type-of(last($shadows)) == color { @include valo-ie8-shadow($shadows); @@ -83,7 +90,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); @for $i from 1 through min(length($elements), length($shadows)) { $shadow: nth($shadows, $i); @if length($shadow) == 2 { - $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list + $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list } @if length($shadow) > 3 { @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i)); @@ -98,27 +105,25 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@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 valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { +@mixin valo-overlay-style ( + $background-color: $v-overlay-background-color, + $shadow: $v-overlay-shadow, + $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 valo-overlay-background-color(); - background: $bg; - color: valo-font-color($bg); - box-shadow: valo-overlay-box-shadow($bg); + background-color: $background-color; + color: valo-font-color($background-color); + + box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $shadow); @if $v-animations-enabled and $v-overlay-open-animation { @include animation($open-animation); } - + -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; @@ -141,7 +146,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@mixin valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) { +@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $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; } @@ -167,7 +172,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight); right: 0; bottom: 0; left: 0; - background: scale-color(valo-selection-color(), $lightness: -30%, $saturation: 50%); + background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%); @include opacity(.15); pointer-events: none; border-radius: inherit; @@ -183,10 +188,9 @@ $v-selection-item-font-weight: max(400, $v-font-weight); -@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); +@mixin valo-selection-item-selected-style { + @include valo-gradient($v-selection-item-selection-color); + color: valo-font-color($v-selection-item-selection-color, 0.9); } @@ -202,8 +206,9 @@ $v-selection-item-font-weight: max(400, $v-font-weight); } } -@mixin valo-drag-element-style { - background: #fff; +@mixin valo-drag-element-style ($background-color: $v-app-background-color) { + background: $background-color; + color: valo-font-color($background-color); box-shadow: 0 2px 10px rgba(#000, .2); border-radius: $v-border-radius; overflow: hidden; @@ -211,4 +216,4 @@ $v-selection-item-font-weight: max(400, $v-font-weight); // This has the unfortunate side-effect of selecting an the table row where the drag is dropped //pointer-events: none; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss index 5ba996d42a..197ef4d9d9 100644 --- a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -1,6 +1,6 @@ // @category Tooltip -$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .75) !default; +$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default; $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; diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss index 3bf5f04bdb..b652ea720a 100644 --- a/WebContent/VAADIN/themes/valo/shared/_variables.scss +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -4,13 +4,13 @@ @import "../util/color"; -// List of components to include in the theme compilation. The list can be modified to make +// List of components to include in the theme compilation. The list can be modified to make // the compiled theme smaller by removing unused components from the list. // @variable v-included-components // @usage // // Remove the Calendar component styles from the output // $v-included-components: remove($v-included-components, calendar); -$v-included-components: +$v-included-components: absolutelayout, accordion, button, @@ -29,15 +29,15 @@ $v-included-components: gridlayout, label, link, - loginform, menubar, nativebutton, nativeselect, + notification, optiongroup, orderedlayout, panel, popupview, - progressindicator, + progressbar, slider, splitpanel, table, @@ -52,7 +52,7 @@ $v-included-components: window !default; -// Checks if a given component is included in the compilation. Used by the collection mixins that +// Checks if a given component is included in the compilation. Used by the collection mixins that // include all components, like valo-components and valo-components. // @mixin v-is-included // @param $component-name {String} the name of the component to check @@ -66,66 +66,67 @@ $v-included-components: // A static text that is shown while the application JavaScript is loaded and started // @variable v-app-loading-text // @default "" -$v-app-loading-text: "" !default; +$v-app-loading-text : "" !default; // Base line height used for all widgets // @variable v-line-height // @default 1.55 !default -$v-line-height: 1.55 !default; +$v-line-height : 1.55 !default; -$v-background-color: hsl(210, 0%, 98%) !default; +$v-background-color : hsl(210, 0%, 98%) !default; +$v-app-background-color : $v-background-color !default; -$v-font-size: 16px !default; // Should be specified in pixels -$v-font-weight: 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') -$v-font-color: valo-font-color($v-background-color) !default; -$v-font-family: "Open Sans", sans-serif !default; +$v-font-size : 16px !default; // Should be specified in pixels +$v-font-weight : 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') +$v-font-color : valo-font-color($v-app-background-color) !default; +$v-font-family : "Open Sans", sans-serif !default; -$v-caption-font-size: round($v-font-size * 0.9) !default; // Should be a pixel value -$v-caption-font-weight: max(400, $v-font-weight) !default; +$v-caption-font-size : round($v-font-size * 0.9) !default; // Should be a pixel value +$v-caption-font-weight : max(400, $v-font-weight) !default; -$v-unit-size: round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50) +$v-unit-size : round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50) -$v-layout-margin-top: round($v-unit-size) !default; -$v-layout-margin-right: round($v-unit-size) !default; -$v-layout-margin-bottom: round($v-unit-size) !default; -$v-layout-margin-left: round($v-unit-size) !default; +$v-layout-margin-top : round($v-unit-size) !default; +$v-layout-margin-right : round($v-unit-size) !default; +$v-layout-margin-bottom : round($v-unit-size) !default; +$v-layout-margin-left : round($v-unit-size) !default; -$v-layout-spacing-vertical: round($v-unit-size/3) !default; -$v-layout-spacing-horizontal: round($v-unit-size/3) !default; +$v-layout-spacing-vertical : round($v-unit-size/3) !default; +$v-layout-spacing-horizontal : round($v-unit-size/3) !default; -$v-border-width: 1px !default; // Must be specified in pixels -$v-border-radius: 4px !default; // Must be specified in pixels +$v-border : 1px solid (v-shade 0.7) !default; // Size must be specified in pixels +$v-border-radius : 4px !default; // Must be specified in pixels -$v-gradient-style: v-linear !default; -$v-gradient-depth: 8% !default; +$v-gradient : v-linear 8% !default; -$v-bevel-style: inset 0 1px 0 v-hilite, inset 0 -1px 0 v-shade !default; -$v-bevel-depth: 25% !default; +$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default; +$v-bevel-depth : 25% !default; -$v-shadow-style: 0 2px 3px v-shade !default; -$v-shadow-depth: 5% !default; +$v-shadow : 0 2px 3px v-shade !default; +$v-shadow-opacity : 5% !default; -$v-focus-style: 0 0 0 2px v-focus-color !default; -$v-focus-color: null !default; +$v-focus-color : null !default; +$v-focus-style : 0 0 0 2px rgba(valo-focus-color(), .5) !default; +$v-focus-color : valo-focus-color() !default; -$v-animations-enabled: true !default; -$v-hover-styles-enabled: true !default; +$v-animations-enabled : true !default; +$v-hover-styles-enabled : true !default; -$v-disabled-opacity: 0.7 !default; +$v-disabled-opacity : 0.5 !default; -$v-selection-color: null !default; +$v-selection-color : valo-focus-color() !default; -$v-default-field-width: $v-unit-size * 5 !default; +$v-default-field-width : $v-unit-size * 5 !default; -$v-error-indicator-color: #ed473b !default; -$v-required-field-indicator-color: $v-error-indicator-color !default; +$v-error-indicator-color : #ed473b !default; +$v-required-field-indicator-color : $v-error-indicator-color !default; -$valo-include-common-stylenames: true !default; +$valo-include-common-stylenames : true !default; diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss index 470799a501..b93307a1b1 100644 --- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -1,63 +1,230 @@ -@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; +@function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) { + @if type-of($border) != list { + @return $border; + } + + @if $context { + @if color-luminance($color) > color-luminance($context) { + $color: $context; + } } - - $color-stops: valo-gradient-color-stops($color, $gradient-style, $gradient-depth); - $top-color: first(first($color-stops)); - $bottom-color: first(last($color-stops)); + $ret: null; + @each $part in $border { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); - $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 valo-replace-hilite-and-shade($bevel-style, $top-color, $bottom-color); + $tint: blend-screen(white($v-bevel-depth/100%*$adjust-amount*$strength), $color); + $shade: blend-linearburn(black($v-bevel-depth/100%*$adjust-amount*$strength), $color); + + @if $adjust-type == v-tone { + @if is-dark-color($color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: $ret $color; + } @else { + $ret: $ret $part; + } + } + @return $ret; } +@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient) { + border: valo-border($border, $color); -@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; + // Adjust border-colors for gradient + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); + $top: first(first($color-stops)); + $bottom: first(last($color-stops)); + border-top-color: first-color(valo-border($border, $top)); + border-bottom-color: first-color(valo-border($border, $bottom)); + } +} - @if $shadow-depth == 0% or $shadow-style == none { - @return null; + + + +@function valo-bevel-and-shadow ($bevel: null, $bevel-depth: $v-bevel-depth, $shadow: null, $shadow-opacity: $v-shadow-opacity, $background-color: $v-background-color, $gradient: null, $include-focus: false) { + $box-shadow: null; + + @if $bevel { + @if list-of-lists($bevel) { + @each $b in $bevel { + $this: valo-bevel-and-shadow($bevel: $b, $shadow: null, $background-color: $background-color, $gradient: $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else if $bevel and $bevel != none { + $this: valo-replace-tones($bevel, $background-color, $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } } - @return valo-replace-hilite-and-shade($shadow-style, rgba(#fff, $shadow-depth/100%), rgba(#000, $shadow-depth/100%)); + @if $shadow { + @if list-of-lists($shadow) { + @each $s in $shadow { + $this: valo-bevel-and-shadow($bevel: null, $shadow: $s, $background-color: null, $gradient: null); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else { + $this: valo-replace-shadow($shadow); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } + + @if $include-focus and type-of($v-focus-style) == list { + $box-shadow: $v-focus-style, $box-shadow; + } + + @return $box-shadow; } -@function valo-replace-hilite-and-shade($shadow-list, $hilite, $shade) { - @if $shadow-list == none { +@function valo-replace-tones($list, $tint-color, $gradient: null, $shade-color: null) { + $shade-color: $shade-color or $tint-color; + $ret: (); + + @each $part in $list { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $top-color: $tint-color; + $bottom-color: $shade-color; + + @if $gradient { + $color-stops: valo-gradient-color-stops($tint-color, $gradient); + $top-color: first(first($color-stops)); + $bottom-color: first(last($color-stops)); + } + + $tint: blend-lighten(adjust-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount, $saturation: -$v-bevel-depth/2), scale-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount)); + $shade: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$v-bevel-depth/3*$adjust-amount), $saturation: -$v-bevel-depth/2), $v-bevel-depth/100%), $bottom-color); + + $color: null; + @if $adjust-type == v-tone { + @if is-dark-color($tint-color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + + @return $ret; +} + + +@function valo-replace-shadow ($shadow) { + $ret: (); + @each $part in $shadow { + @if $part == v-tint or $part == v-shade { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $tint: rgba(#fff, $v-shadow-opacity/100% * $adjust-amount); + $shade: rgba(#000, $v-shadow-opacity/100% * $adjust-amount); + + $color: null; + @if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + @return $ret; +} + + +@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $bevel: $v-bevel, $offset: 1px) { + @if type-of($bevel) != list or $v-bevel-depth == 0 { @return null; } - @if type-of(last($shadow-list)) == color { - @return $shadow-list; + $needle: null; + @if color-luminance($font-color) < color-luminance($background-color) { + // Text darker than bg, light shadow. Look for tint + $needle: v-tint; + } @else { + // Text lighter than bg, dark shadow. Look for shade + $needle: v-shade; } - // If the shadow-list only contains one shadow - // (we can't use the recursive replace function because that will mess up the list delimeters) - @if last($shadow-list) == v-hilite { - @return replace($shadow-list, v-hilite, $hilite); - } @else if last($shadow-list) == v-shade { - @return replace($shadow-list, v-shade, $shade); + // Use the first match from the bevel list + @while list-of-lists($bevel) { + $bevel: first($bevel); } - - // If there are multiple shadows in a list, recurse and separate lists with a comma - $new: null; - @each $part in $shadow-list { - @if type-of($part) == list and length($part) > 0 { - $part: valo-replace-hilite-and-shade($part, $hilite, $shade); - @if $part { - $new: $new, $part; - } + + // Remove possible 'inset' + $bevel: remove($bevel, inset); + + $color: $background-color; + @each $b in $bevel { + @if type-of($b) == list { + $strength: first-number($b); + $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); } } - @return $new; + @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color; } diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss index 7828e8fd3a..06c182f81b 100644 --- a/WebContent/VAADIN/themes/valo/util/_color.scss +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -1,10 +1,11 @@ +// "Photoshop" blend modes @import "blend-modes"; // Returns the luminance of a color (0-255) // (perceived brightness, rather than absolute mathematical lightness value) // -// "The luminance calculation is a weighted average of the color channels that approximates -// how humans perceive brightness, while lightness is just an average of the largest and +// "The luminance calculation is a weighted average of the color channels that approximates +// how humans perceive brightness, while lightness is just an average of the largest and // smallest channels without regard to perception." // // Source for equation: http://en.wikipedia.org/wiki/Luminance_(relative) @@ -13,19 +14,6 @@ } -@function luminance-diff($color1, $color2) { - @return abs(color-luminance($color1) - color-luminance($color2)); -} - -@function saturation-diff($color1, $color2) { - @return abs(saturation($color1) - saturation($color2)); -} - -@function hue-diff($color1, $color2) { - @return abs(hue($color1) - hue($color2)); -} - - // Arbitrary luminance threshold after which colors should be adjusted either darker or lighter $v-luminance-threshold: 150 !default; @@ -50,8 +38,15 @@ $v-luminance-threshold: 150 !default; } } + +@function darker-of($c1, $c2) { + @if color-luminance($c1) < color-luminance($c2) { + @return $c1; + } + @return $c2; +} + // Returns a text color with enough contrast for the given background color -// @function valo-font-color ($bg-color, $contrast: 0.8) { @if $bg-color { @if is-dark-color($bg-color) { @@ -77,7 +72,7 @@ $v-luminance-threshold: 150 !default; @function valo-focus-color ($color: null, $context: null) { - $context: $context or $v-background-color; + $context: $context or $v-app-background-color; $fallback: $context; @if is-dark-color($fallback) { @@ -87,25 +82,16 @@ $v-luminance-threshold: 150 !default; } $focus-color: $color or $v-focus-color or $fallback; - //@if luminance-diff($context, $focus-color) < 30 or (luminance-diff($context, $focus-color) < 10 and saturation-diff($context, $focus-color) < 20%) { - // $focus-color: #fff; - //} - @return $focus-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)); + @return $focus-color; } -@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; - //} - @return $selection-color; +@mixin valo-focus-style($include-box-shadow: false) { + @if $include-box-shadow and type-of($v-focus-style) == list { + box-shadow: $v-focus-style; + } @else if type-of($v-focus-style) == color { + border-color: $v-focus-style; + } } diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss index c04930512c..98f1619eff 100644 --- a/WebContent/VAADIN/themes/valo/util/_css3.scss +++ b/WebContent/VAADIN/themes/valo/util/_css3.scss @@ -1,28 +1,10 @@ -@mixin opacity ($o, $important: false) { - $imp: ""; - - @if $important { - $imp: "!important"; - } - - opacity: $o #{unquote($imp)}; - - @if $o < 1 { - filter: alpha(opacity=$o*100) #{unquote($imp)}; - } @else { - filter: none #{unquote($imp)}; - } -} - +@mixin opacity ($o) { + opacity: $o; -@mixin border-radius ($br) { - -webkit-border-radius: $br; - border-radius: $br; -} - - -@mixin width-breakpoint ($point) { - @media (max-width: $point) { - @content; + $value: first-number($o); + @if $value < 1 { + filter: alpha(opacity=$value*100) remove-nth($o, 1); + } @else { + filter: none remove-nth($o, 1); } } diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss index 5611c33da6..df159ad611 100644 --- a/WebContent/VAADIN/themes/valo/util/_gradient.scss +++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss @@ -1,31 +1,46 @@ -@mixin valo-gradient($color, $style: $v-gradient-style, $depth: $v-gradient-depth, $fallback: null, $direction: to bottom) { +@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) { @if $color { - @if $depth <= 0 { - background: $fallback or $color; - } @else { - $color-stops: valo-gradient-color-stops($color, $style, $depth); + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color); + } @else { + background: $fallback or $color; } } } -@function valo-gradient-color-stops($color, $style: $v-gradient-style, $depth: $v-gradient-depth) { - @if $depth > 0 { - +@function valo-gradient-color-stops($color, $gradient: $v-gradient) { + $style: valo-gradient-style($gradient); + $opacity: valo-gradient-opacity($gradient); + + @if $style != none and $opacity > 0 { @if $style == v-linear or $style == v-linear-reverse { - $start: blend-overlay(transparentize(#fff, 1-$depth/100%), $color); - $end: blend-overlay(transparentize(#000, max(0, 1-$depth/100%)), $color); - $end: blend-multiply(transparentize(#000, max(0, 1-$depth/200%)), $end); - + $start: blend-overlay(rgba(#fff, $opacity/100%), $color); + $end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color); + $end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end); + @if $style == v-linear { @return $start 2%, $end 98%; } @else { @return $end 2%, $start 98%; } - } - } @return $color 0%, $color 100%; } + + +@function valo-gradient-style($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return none; + } + @return first-string($gradient); +} + +@function valo-gradient-opacity($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return 0%; + } + @return first-number($gradient); +} diff --git a/WebContent/VAADIN/themes/valo/util/_lists.scss b/WebContent/VAADIN/themes/valo/util/_lists.scss index aad9c2f611..54471b1380 100644 --- a/WebContent/VAADIN/themes/valo/util/_lists.scss +++ b/WebContent/VAADIN/themes/valo/util/_lists.scss @@ -1,4 +1,4 @@ -@function contains ($list, $var, $recursive: false) { +@function contains($list, $var, $recursive: false) { @if $recursive == false { @return (false != index($list, $var)); } @@ -17,6 +17,70 @@ @return false; } + +@function list-of-lists($list) { + @each $part in $list { + @if type-of($part) != list { + @return false; + } + } + @return true; +} + + +@function first-color($list) { + @return first-of-type($list, color); +} + + +@function first-number($list) { + @return first-of-type($list, number); +} + + +@function first-string($list) { + @return first-of-type($list, string); +} + + +@function first-list($list) { + @return first-of-type($list, list); +} + + +@function first-of-type($list, $type) { + @each $item in $list { + @if type-of($item) == $type { + @return $item; + } @else if type-of($item) == list { + $ret: first-of-type($item, $type); + @if $ret { + @return $ret; + } + } + } + @return null; +} + + +@function flatten-list($list) { + $ret: (); + @each $item in $list { + @if type-of($item) != list and $item != null { + $ret: join($ret, $item); + } @else if length($item) > 0 and $item != null { + $t: flatten-list($item); + @if length($t) > 0 { + $ret: join($ret, $t); + } + } + } + @return $ret; +} + + + + // Author: Hugo Giraudel // Repository: https://github.com/Team-Sass/Sass-list-functions // License: MIT @@ -52,7 +116,7 @@ @if type-of($e) == list { $result: $result#{to-string($e, $glue, true)}; } - + @else { $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e}); } @@ -69,7 +133,7 @@ @function insert-nth($list, $index, $value) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `insert-nth`."; @return $result; @@ -87,7 +151,7 @@ @else { $result: (); - + @for $i from 1 through length($list) { @if $i == $index { $result: append($result, $value); @@ -103,7 +167,7 @@ @function replace-nth($list, $index, $value) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `replace-nth`."; @return $result; @@ -113,7 +177,7 @@ @warn "List index 0 must be a non-zero integer for `replace-nth`."; @return $result; } - + @else if abs($index) > length($list) { @warn "List index is #{$index} but list is only #{length($list)} item long for `replace-nth`."; @return $result; @@ -121,19 +185,19 @@ @else { $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); + $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i == $index { $result: append($result, $value); } - + @else { $result: append($result, nth($list, $i)); } } } - + @return $result; } @@ -163,7 +227,7 @@ @function remove-nth($list, $index) { $result: false; - + @if type-of($index) != number { @warn "$index: #{quote($index)} is not a number for `remove-nth`."; @return $result; @@ -181,7 +245,7 @@ @else { $result: (); - $index: if($index < 0, length($list) + $index + 1, $index); + $index: if($index < 0, length($list) + $index + 1, $index); @for $i from 1 through length($list) { @if $i != $index { @@ -189,7 +253,7 @@ } } } - + @return $result; } @@ -213,12 +277,12 @@ @function slice($list, $start: 1, $end: length($list)) { $result: false; - + @if type-of($start) != number or type-of($end) != number { @warn "Either $start or $end are not a number for `slice`."; @return $result; } - + @else if $start > $end { @warn "The start index has to be lesser than or equals to the end index for `slice`."; @return $result; @@ -233,15 +297,15 @@ @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`."; @return $result; } - + @else if $end > length($list) { @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`."; @return $result; } - + @else { $result: (); - + @for $i from $start through $end { $result: append($result, nth($list, $i)); } @@ -249,14 +313,14 @@ @return $result; } - + @function reverse($list, $recursive: false) { $result: (); @for $i from length($list)*-1 through -1 { @if type-of(nth($list, abs($i))) == list and $recursive { - $result: append($result, reverse(nth($list, abs($i)), $recursive)); + $result: append($result, reverse(nth($list, abs($i)), $recursive)); } @else { @@ -270,10 +334,10 @@ @function shift($list, $value: 1) { $result: (); - + @for $i from 0 to length($list) { $result: append($result, nth($list, ($i - $value) % length($list) + 1)); } - + @return $result; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss index c0626e947f..b8512a4f10 100644 --- a/WebContent/VAADIN/themes/valo/util/_util.scss +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -1,5 +1,5 @@ // Align element vertically inside -@mixin vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { +@mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { &:#{$pseudo-element} { content: ""; display: inline-block; @@ -7,7 +7,7 @@ height: 100%; vertical-align: middle; } - + @if length($to-align) > 0 { @each $selector in $to-align { & > #{unquote($selector)} { @@ -18,28 +18,10 @@ } -// Calculates the (approximated) square root for a given number -@function sqrt($number) { - $guess: rand(); - $root: 4; // Academic guess, a.k.a random number - @for $i from 1 through 10 { - $root: $root - ($root*$root - $number) / (2 * $root); - } - @return $root; -} - - - - -@mixin valo-round { - border-radius: 50%; -} - - - @mixin valo-tappable { @include user-select(none); -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -}
\ No newline at end of file + cursor: pointer; +} |