diff options
17 files changed, 389 insertions, 196 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index 619e799bc7..9dfe2984a0 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -1,7 +1,6 @@ @mixin valo-checkbox ($primary-stylename: v-checkbox) { - .#{$primary-stylename}, - .v-radiobutton { + .#{$primary-stylename} { @include valo-checkbox-style; } @@ -14,10 +13,10 @@ } -@mixin valo-checkbox-style ($background-color: $v-background-color, $size: $v-unit-size, $selection-color: $v-selection-color) { +@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { // So that we can use the same 'unit-size' for all component sizes - $size: $size/2; + $size: $unit-size/2; position: relative; line-height: round($size); diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 9fc1f7fe9d..63ddbe98df 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -20,6 +20,10 @@ cursor: pointer; text-shadow: valo-text-shadow(); + @if $v-border-radius != $v-textfield-border-radius { + border-radius: $v-border-radius; + } + .#{$primary-stylename}-input { @include user-select(none); @include valo-gradient; @@ -28,9 +32,7 @@ @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; - } + border-radius: inherit; &:focus { @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color); @@ -104,6 +106,8 @@ span.v-icon { color: valo-font-color($background-color); width: $unit-size; + line-height: 1; + padding-top: .12em; } &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss index ceaa732f3f..c73fff9b9a 100644 --- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -25,6 +25,12 @@ .v-caption { padding-bottom: 0; } + + .v-caption-h2, + .v-caption-h3, + .v-caption-h4 { + height: 3em; + } } .#{$primary-stylename}-contentcell { @@ -33,13 +39,14 @@ font-weight: $v-font-weight + 100; } + > .h2, + > .h3, > .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); } } @@ -138,7 +145,8 @@ > .v-textfield, > .v-textarea, > .v-filterselect input, - > .v-datefield input { + > .v-datefield input, + > .v-richtextarea { @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null); background: transparent; border: none; @@ -152,7 +160,8 @@ @include valo-textfield-prompt-style; } - > .v-textarea { + > .v-textarea, + > .v-richtextarea { height: auto; } } @@ -179,9 +188,17 @@ 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; + > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell { + > .h2, + > .h3, + > .h4 { + border-bottom: none; + color: $v-selection-color; + } + + > .h3, + > .h4 { + margin-top: 0; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss index b254f097c5..b1365e0011 100644 --- a/WebContent/VAADIN/themes/valo/components/_label.scss +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -120,4 +120,12 @@ $v-letter-spacing--h4: 0 !default; } } + .#{$primary-stylename}-align-right { + text-align: right; + } + + .#{$primary-stylename}-align-center { + text-align: center; + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss index bd6029700e..71c67cd9d8 100644 --- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -1,47 +1,68 @@ @mixin valo-optiongroup ($primary-stylename: v-optiongroup) { .v-radiobutton { - :root & > input { - &:checked ~ label:after { - $size: ceil($v-unit-size/6); - $offset: round($v-unit-size/6); - width: $size; - height: $size; - top: $offset; - left: $offset; - background: $v-selection-color; - } - - & ~ label:before, - & ~ label:after { - border-radius: 50%; - content: ""; - } - } + @include valo-radiobutton-style; } .v-select-optiongroup { + @include valo-optiongroup-style; + } - .v-radiobutton, - .v-checkbox { - display: block; - margin: round($v-unit-size/4) $v-font-size 0 0; +} + + +@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { + @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color); + + :root & > input { + &:checked ~ label:after { + $size: ceil($unit-size/6); + $offset: round($unit-size/6); + width: $size; + height: $size; + top: $offset; + left: $offset; + background: $selection-color; + } + + & ~ label:before, + & ~ label:after { + border-radius: 50%; + content: ""; + } + } +} - &:first-child { - margin-top: round($v-unit-size/6); - } - &:last-child { - margin-bottom: round($v-unit-size/6); - } + +@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) { + + @if $unit-size != $v-unit-size { + .v-checkbox { + @include valo-checkbox-style($unit-size: $unit-size); } + .v-radiobutton { + @include valo-radiobutton-style($unit-size: $unit-size); + } + } + + .v-radiobutton, + .v-checkbox { + display: block; + margin: round($unit-size/4) $font-size 0 0; - &.v-has-width label { - white-space: normal; + &:first-child { + margin-top: round($unit-size/6); } + &:last-child { + margin-bottom: round($unit-size/6); + } } + &.v-has-width label { + white-space: normal; + } } @@ -55,7 +76,7 @@ &.v-has-width { white-space: normal; - + label { white-space: nowrap; } diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 437706ee86..cb344b6404 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -106,8 +106,8 @@ $v-panel-border: $v-border !default; bottom: -$border-width; right: 0; left: 0; - height: $border-width; - background: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); + height: 0; + border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); } } @@ -117,8 +117,8 @@ $v-panel-border: $v-border !default; position: absolute; z-index: 2; top: 0; - height: $border-width; - background: $v-app-background-color; + height: 0; + border-top: $border-width solid $v-app-background-color; left: 0; right: 0; } diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 9e7a90fb0a..5807e16aa7 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -88,4 +88,9 @@ $valo-richtextarea-use-font-awesome: true !default; display: block; } + .#{$primary-stylename}-readonly { + padding: ceil($v-unit-size/9) ceil($v-unit-size/6); + background: transparent; + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss index 856e6eb08c..b4785a8471 100644 --- a/WebContent/VAADIN/themes/valo/components/_slider.scss +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -86,7 +86,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); &:after { border: valo-border(); - @include valo-button-focus-style(); + @include valo-button-focus-style($border-fallback: null); opacity: 0; @if $v-animations-enabled { @include transition(opacity 200ms); @@ -229,7 +229,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); &:after { border: valo-border($color: $background-color); - @include valo-button-focus-style($background-color: $background-color); + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); } } } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 7aa2d127da..c952a4bdda 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -33,6 +33,10 @@ $v-table-background-color: null !default; overflow: hidden; } + .#{$primary-stylename}-caption-container-align-center { + text-align: center; + } + .#{$primary-stylename}-caption-container-align-right { text-align: right; } @@ -89,7 +93,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-text-shadow; + text-shadow: valo-text-shadow(); } .#{$primary-stylename}-header-wrap { @@ -115,49 +119,48 @@ $v-table-background-color: null !default; .#{$primary-stylename}-caption-container { overflow: hidden; line-height: 1; + @include box-sizing(border-box); } .#{$primary-stylename}-footer-container { $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); - padding-top: $vertical-padding - $v-table-border-width; - padding-bottom: $vertical-padding; + padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding; float: right; - padding-right: $v-table-cell-padding-horizontal + $v-table-border-width; } [class^="#{$primary-stylename}-header-cell"] { position: relative; - display: inline-block; } .#{$primary-stylename}-caption-container, .#{$primary-stylename}-header-drag { $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); - padding-top: $vertical-padding; - padding-bottom: $vertical-padding - $v-table-border-width; - padding-left: $v-table-cell-padding-horizontal; - padding-right: $v-table-cell-padding-horizontal; + padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width; border-left: $v-table-border-width solid $border-color; } + .#{$primary-stylename}-caption-container-align-right { + padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width; + } + .#{$primary-stylename}-resizer { height: $v-table-row-height; - background: transparent; width: $v-table-resizer-width; cursor: e-resize; cursor: col-resize; position: absolute; + top: 0; right: 0; z-index: 1; } .#{$primary-stylename}-cell-content { border-left: $v-table-border-width solid $border-color; - padding: 0 $v-table-cell-padding-horizontal; + overflow: hidden; &:first-child { border-left: none; - padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + padding-left: $v-table-border-width; } } @@ -168,10 +171,11 @@ $v-table-background-color: null !default; .#{$primary-stylename}-cell-wrapper { - white-space: nowrap; line-height: 1; $vertical-padding: round(($v-table-row-height - $v-font-size)/2); - padding: $vertical-padding 0; + padding: $vertical-padding $v-table-cell-padding-horizontal; + @include box-sizing(border-box); + margin-right: 0 !important; } .#{$primary-stylename}-body { @@ -180,6 +184,7 @@ $v-table-background-color: null !default; .#{$primary-stylename}-table { background-color: $background-color; + white-space: nowrap; } .#{$primary-stylename}-table td { @@ -234,10 +239,6 @@ $v-table-background-color: null !default; line-height: $v-table-row-height; position: absolute; right: 0; - - + .#{$primary-stylename}-caption-container { - padding-right: $v-table-sort-indicator-width; - } } .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before, @@ -256,9 +257,14 @@ $v-table-background-color: null !default; } + [class*="rowheader"] span.v-icon { + min-width: 1em; + } + + .#{$primary-stylename}-focus { $outline-width: max($v-table-border-width, 1px); - outline: $outline-width solid valo-focus-color(); + outline: $outline-width solid $v-focus-color; outline-offset: -$outline-width; } @@ -276,11 +282,11 @@ $v-table-background-color: null !default; } .#{$primary-stylename}-focus-slot-right { - border-right: 2px solid rgba(valo-focus-color(), .5); + border-right: 2px solid rgba($v-focus-color, .5); } .#{$primary-stylename}-focus-slot-left { - border-left: 2px solid rgba(valo-focus-color(), .5); + border-left: 2px solid rgba($v-focus-color, .5); left: 0; right: auto; margin-left: 0 !important; @@ -399,14 +405,14 @@ $v-table-background-color: null !default; // Drag'n'drop styles .#{$primary-stylename}-drag .#{$primary-stylename}-body { - box-shadow: 0 0 0 2px rgba(valo-focus-color(), .5); + box-shadow: 0 0 0 2px rgba($v-focus-color, .5); - @if color-luminance(valo-focus-color()) + 50 < color-luminance($background-color) { - border-color: valo-focus-color(); + @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) { + border-color: $v-focus-color; } .v-ie8 & { - border-color: valo-focus-color(); + border-color: $v-focus-color; } .#{$primary-stylename}-focus { @@ -421,7 +427,7 @@ $v-table-background-color: null !default; height: $v-table-row-height + $v-table-border-width; left: 0; right: 0; - background: valo-focus-color(); + background: $v-focus-color; @include opacity(.2); } @@ -433,10 +439,10 @@ $v-table-background-color: null !default; height: 2px; left: 0; right: 0; - background: valo-focus-color(); + background: $v-focus-color; font-size: $v-font-size * 2; line-height: 2px; - color: valo-focus-color(); + color: $v-focus-color; text-indent: round($v-font-size/-4); text-shadow: 0 0 1px $background-color, 0 0 1px $background-color; } @@ -483,7 +489,7 @@ $v-table-background-color: null !default; -@mixin valo-table-no-stripes ($primary-stylename: v-table) { +@mixin valo-table-no-stripes-style ($primary-stylename: v-table) { .#{$primary-stylename}-row, .#{$primary-stylename}-row-odd { background: transparent; @@ -491,19 +497,23 @@ $v-table-background-color: null !default; } - - -@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) { +@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) { .#{$primary-stylename}-cell-content, [class*="row"].v-selected .#{$primary-stylename}-cell-content { 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; + padding-left: $v-table-border-width; + } + + &.v-treetable { + .#{$primary-stylename}-cell-content, + [class*="row"].v-selected .#{$primary-stylename}-cell-content { + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + } } } -@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) { + +@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) { .#{$primary-stylename}-cell-content, [class*="row"].v-selected .#{$primary-stylename}-cell-content { border-top: none; @@ -511,13 +521,15 @@ $v-table-background-color: null !default; } } -@mixin valo-table-no-header ($primary-stylename: v-table) { + +@mixin valo-table-no-header-style ($primary-stylename: v-table) { .#{$primary-stylename}-header-wrap { display: none; } } -@mixin valo-table-borderless ($primary-stylename: v-table) { + +@mixin valo-table-borderless-style ($primary-stylename: v-table) { .#{$primary-stylename}-header-wrap, .#{$primary-stylename}-footer-wrap, .#{$primary-stylename}-header-drag, @@ -538,13 +550,16 @@ $v-table-background-color: null !default; } } -@mixin valo-table-compact-style ( + +@mixin valo-table-spacing-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 ) { + $vertical-padding: round(($row-height - $header-font-size)/2); + .#{$primary-stylename}-header-wrap, .#{$primary-stylename}-footer-wrap, .#{$primary-stylename}-header-drag { @@ -552,36 +567,27 @@ $v-table-background-color: null !default; } .#{$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; + padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding; } .#{$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}-caption-container-align-right { + padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width); + } + .#{$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; - } + padding: $vertical-padding $cell-padding-horizontal; } .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, @@ -597,4 +603,25 @@ $v-table-background-color: null !default; .#{$primary-stylename}-row-drag-middle td:first-child:before { height: $row-height + $v-table-border-width; } + + &.v-treetable { + .#{$primary-stylename}-cell-wrapper { + padding-left: 0; + padding-right: 0; + } + + .#{$primary-stylename}-cell-content { + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + + &:first-child { + padding-left: $cell-padding-horizontal + $v-table-border-width; + } + } + + .#{$primary-stylename}-footer-container { + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + } + } } diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss index bb79f0b6a7..32b06a06cc 100644 --- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -80,22 +80,42 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @include valo-anim-fade-in(300ms); } + $spinner-size: round($v-unit-size/2); + $spinner-size: $spinner-size + $spinner-size % 2; + .#{$primary-stylename}-deco { - @include valo-spinner($size: $v-unit-size/2); + @include valo-spinner($size: $spinner-size); + height: 0 !important; + border-style: none; display: block; position: absolute; z-index: -1; bottom: 50%; - margin-bottom: round($v-unit-size/2 + $v-unit-size/4) * -1; + margin-bottom: round($v-unit-size/-2) - $spinner-size/2; left: 50%; - margin-left: round($v-unit-size/-4); + margin-left: $spinner-size/-2; opacity: 0; + + .v-ie8 & { + min-height: 0; + } } .#{$primary-stylename}-loading .#{$primary-stylename}-deco { @include transition(opacity 200ms 200ms); opacity: 1; z-index: 1; + height: $spinner-size !important; + border-style: solid; + + .v-ie8 &, + .v-ie9 & { + border-style: none; + } + + .v-ie8 & { + min-height: 30px; + } } } @@ -110,21 +130,22 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; &:before { content: ""; position: absolute; - height: max(1px, first-number($v-border)); - background: first-color(valo-border($strength: 0.5)); + height: 0; + // iOS panics with background color, creating black line artifacts + border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5)); bottom: 0; left: 0; right: 0; } .#{$primary-stylename}-tabs { - height: $v-unit-size; position: relative; } } @mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) { + vertical-align: bottom; .#{$primary-stylename}-tabitem { line-height: 0; @@ -132,7 +153,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } .v-caption { - height: $v-unit-size; margin-left: round($v-unit-size/2); padding: 0 round($v-unit-size/10); @include box-sizing(border-box); @@ -144,11 +164,17 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; color: valo-font-color($v-app-background-color, 0.58); width: auto !important; overflow: hidden; + text-overflow: ellipsis; + border-bottom: max(1px, first-number($v-border))*2 solid transparent; @if $v-animations-enabled { @include transition(border-bottom 200ms, color 200ms); } + .v-captiontext { + display: inline; + } + .v-icon + .v-captiontext { margin-left: round($v-unit-size/4); } @@ -175,12 +201,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; .v-caption { 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: max(1px, first-number($v-border))*2 solid $v-selection-color; + border-bottom-color: $v-selection-color; color: $v-selection-color; } @@ -212,12 +237,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; $border-color: first-color(valo-border($strength: 0.5)); position: absolute; + top: 0; right: 0; bottom: 0; padding-left: round($v-unit-size/2); @include linear-gradient(to left, $v-background-color 70%, rgba($v-background-color, 0) 100%, $fallback: transparent); pointer-events: none; - line-height: $v-unit-size; &:after { content: ""; @@ -245,8 +270,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; background: transparent; font: inherit; color: inherit; - height: $v-unit-size; - line-height: $v-unit-size; + height: 100%; margin: 0; padding: 0 round($v-unit-size/4); outline: none; @@ -310,11 +334,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; -@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet) { +@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) { > .#{$primary-stylename}-tabcontainer { .v-caption { position: relative; - margin-left: first-number($v-border) * 2; + margin-left: $tab-spacing or first-number($v-border) * -1; padding: 0 $v-layout-spacing-horizontal; border: first-number($v-border) solid transparent; line-height: $v-unit-size - first-number($v-border); @@ -336,10 +360,16 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; margin-left: 0; } + @if $frame-inactive-tabs { + .#{$primary-stylename}-tabitem .v-caption { + border-color: first-color(valo-border($strength: 0.5)); + } + } + .#{$primary-stylename}-tabitem-selected .v-caption { background: $v-panel-background-color; border-color: first-color(valo-border($strength: 0.5)); - border-bottom: none; + border-bottom: first-number($v-border) solid transparent; } .v-caption-closable { @@ -355,15 +385,25 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; } > .#{$primary-stylename}-content { - background: $v-panel-background-color; - border: valo-border($strength: 0.5); - border-top: none; + // iOS panics with black line artifacts, + // moving the background color to an inner element fixes it + > div { + background: $v-panel-background-color; + } + + @if $outer-frame { + border: valo-border($strength: 0.5); + border-top: none; + } } &.padded-tabbar { > .#{$primary-stylename}-tabcontainer { - border: valo-border($strength: 0.5); - border-bottom: none; + @if $outer-frame { + border: valo-border($strength: 0.5); + border-bottom: none; + } + background: $v-background-color; padding-top: round($v-unit-size/6); } @@ -416,38 +456,20 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default; @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) { > div > .#{$primary-stylename}-tabs { - height: $v-unit-size * 2; - .v-caption { - height: $v-unit-size * 2; - padding-top: $v-unit-size; + padding-top: round($v-unit-size/6); + padding-bottom: round($v-unit-size/6); + line-height: 1.2; } .v-icon { display: block; - font-size: $v-font-size * 2; - $_offset: round($v-unit-size/4); - margin: -($v-unit-size - $_offset) auto #{-$_offset}; - min-height: $v-unit-size; + .v-captiontext.v-captiontext { margin-left: 0; } } } - - .#{$primary-stylename}-scroller { - line-height: $v-unit-size*2; - - button[class] { - padding: 0 round($v-unit-size/4); - display: block; - } - } - - > .#{$primary-stylename}-deco { - margin-bottom: -$v-unit-size - round($v-unit-size/4); - } } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 3ed553b1fa..e6514f9ec6 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -118,7 +118,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @include transition(none); } - $focus-color: valo-focus-color(); + $focus-color: $v-focus-color; @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) { border-color: $focus-color; @@ -181,15 +181,30 @@ $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-font-size, $image-icon-size: 16px) { - .v-slot-#{$stylename} { + + + + +@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) { + $slot-selector: ""; + $caption-selector: ""; + $text-input-selector: ""; + + @each $style in $stylenames { + $slot-selector: $slot-selector + ".v-slot-" + $style; + $caption-selector: $caption-selector + ".v-caption-" + $style; + $text-input-selector: $text-input-selector + "." + $primary-stylename + "-" + $style; + } + + #{$slot-selector} { position: relative; } - .v-caption-#{$stylename} { + #{$caption-selector} { padding: 0; .v-captiontext { + // Need to include to get the default padding back @include valo-caption-style; margin: 0; } @@ -217,8 +232,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; } } - .#{$primary-stylename}-#{$stylename}, - .v-textarea-#{$stylename} { + #{$text-input-selector} #{$input-selector} { padding-left: $unit-size; } } diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss index e8cd22fa9a..0423b37ab1 100644 --- a/WebContent/VAADIN/themes/valo/components/_treetable.scss +++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss @@ -1,20 +1,41 @@ @mixin valo-treetable ($primary-stylename: v-treetable) { - .v-table-cell-wrapper { - //position: relative; + .#{$primary-stylename} { + [class*="caption-container"], + [class*="footer-container"], + [class*="cell-wrapper"] { + @include box-sizing(content-box); + padding-left: 0; + padding-right: 0; + } + + [class*="caption-container"] { + padding-left: $v-table-cell-padding-horizontal; + } + + [class*="caption-container-align-right"] { + padding-left: $v-table-cell-padding-horizontal + $v-table-resizer-width; + } + + [class*="footer-container"] { + padding-right: $v-table-cell-padding-horizontal; + } + + [class*="cell-content"] { + padding-left: $v-table-cell-padding-horizontal; + padding-right: $v-table-cell-padding-horizontal; + + &:first-child { + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + } + } } .#{$primary-stylename}-treespacer { display: inline-block; - background: transparent; - width: round($v-unit-size/2); - //left: round($v-unit-size/-8); - left: 0; position: absolute; - text-align: right; - - &:before { - - } + width: round($v-unit-size/2); + margin-left: round($v-unit-size/-2) - round($v-table-cell-padding-horizontal/2); + text-align: center; } .#{$primary-stylename}-node-closed:before { @@ -24,4 +45,4 @@ .#{$primary-stylename}-node-open:before { @include valo-tree-expanded-icon-style($force: true); } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index 64ded990c2..79fb500804 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -93,9 +93,9 @@ $v-window-modality-curtain-background-color: #222 !default; bottom: -$scroll-divider-width; right: 0; left: 0; - height: $scroll-divider-width; + height: 0; $_bg: $v-window-background-color; - background: first-color(valo-border($strength: 0.5)); + border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5)); } } @@ -133,10 +133,6 @@ $v-window-modality-curtain-background-color: #222 !default; @include transition(color 140ms); } - @if $v-window-border-radius > 0 { - border-radius: 0 0 0 $v-window-border-radius; - } - &:focus { outline: none; } @@ -154,6 +150,10 @@ $v-window-modality-curtain-background-color: #222 !default; .#{$primary-stylename}-closebox { padding-right: round($v-unit-size/9); @include valo-window-close-icon-style; + + @if $v-window-border-radius > 0 { + border-radius: 0 $v-window-border-radius 0 $v-window-border-radius; + } } .#{$primary-stylename}-maximizebox, @@ -161,8 +161,12 @@ $v-window-modality-curtain-background-color: #222 !default; right: $v-unit-size - round($v-unit-size/9); padding-left: round($v-unit-size/9); - + .#{$primary-stylename}-closebox { - border-bottom-left-radius: 0; + @if $v-window-border-radius > 0 { + border-radius: 0 0 0 $v-window-border-radius; + + + .#{$primary-stylename}-closebox { + border-bottom-left-radius: 0; + } } } @@ -215,18 +219,18 @@ $v-window-modality-curtain-background-color: #222 !default; position: absolute; z-index: 2; top: 0; - height: $scroll-divider-width; - background: $v-window-background-color; + height: 0; + border-top: $scroll-divider-width solid $v-window-background-color; left: 0; right: 0; } .v-panel-captionwrap:after { - background: first-color(valo-border($strength: 0.5)); + border-color: first-color(valo-border($strength: 0.5)); } .v-panel-content:before { - background: $v-window-background-color; + border-color: $v-window-background-color; } } } diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss index f4157d954f..704b6c8469 100644 --- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -1,5 +1,5 @@ // Common styles for components -// About 50KB of CSS output +// About 90KB of CSS output @import "valo-menu"; @@ -79,6 +79,14 @@ &.v-button-small { width: $v-unit-size--small; } + + &.v-button-large { + width: $v-unit-size--large; + } + + .v-button-caption { + display: none; + } } .v-link-small { @@ -89,6 +97,10 @@ font-size: $v-font-size--large; } + .v-tabsheet-equal-width-tabs { + @include valo-tabsheet-equal-width-tabs-style($flex: false); + } + .v-tabsheet-framed { @include valo-tabsheet-framed-style; } @@ -97,10 +109,6 @@ @include valo-tabsheet-centered-tabs-style; } - .v-tabsheet-equal-width-tabs { - @include valo-tabsheet-equal-width-tabs-style($flex: false); - } - .v-tabsheet-padded-tabbar { @include valo-tabsheet-padded-tabbar-style; } @@ -109,6 +117,12 @@ @include valo-tabsheet-icons-on-top-style; } + .v-tabsheet-compact-tabbar { + > .v-tabsheet-tabcontainer-compact-tabbar .v-caption { + line-height: 1.8; + } + } + .v-tabsheet-only-selected-closable { @include valo-tabsheet-only-selected-closable-style; } @@ -122,10 +136,17 @@ } .v-textfield-borderless, - .v-textarea-borderless { + .v-textarea-borderless, + .v-datefield-borderless .v-datefield-textfield, + .v-filterselect-borderless .v-filterselect-input { @include valo-textfield-borderless-style; } + .v-datefield-borderless .v-datefield-button, + .v-filterselect-borderless .v-filterselect-button { + border: none; + } + .v-textfield-small { @include valo-textfield-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; @@ -136,7 +157,9 @@ font-size: $v-font-size--large; } - @include valo-textfield-inline-icon($stylename: inline-icon); + @include valo-textfield-inline-icon($stylenames: inline-icon); + @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); + @include valo-textfield-inline-icon($stylenames: inline-icon large, $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); @@ -149,12 +172,16 @@ } .v-textfield-align-right, - .v-textarea-align-right { + .v-textarea-align-right, + .v-datefield-align-right input, + .v-filterselect-align-right input { text-align: right; } .v-textfield-align-center, - .v-textarea-align-center { + .v-textarea-align-center, + .v-datefield-align-center input, + .v-filterselect-align-center input { text-align: center; } @@ -179,12 +206,22 @@ } .v-checkbox-small { - @include valo-checkbox-style($size: $v-unit-size--small); + @include valo-checkbox-style($unit-size: $v-unit-size--small); font-size: $v-font-size--small; } .v-checkbox-large { - @include valo-checkbox-style($size: $v-unit-size--large); + @include valo-checkbox-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } + + .v-select-optiongroup-small { + @include valo-optiongroup-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } + + .v-select-optiongroup-large { + @include valo-optiongroup-style($unit-size: $v-unit-size--large); font-size: $v-font-size--large; } @@ -204,12 +241,16 @@ @include valo-panel-scroll-divider-style; } - .v-csslayout-well { + .v-csslayout-well, + .v-verticallayout-well, + .v-horizontallayout-well { @include valo-panel-well-style; @include valo-panel-adjust-content-margins; } - .v-csslayout-card { + .v-csslayout-card, + .v-verticallayout-card, + .v-horizontallayout-card { @include valo-panel-style; @include valo-panel-adjust-content-margins; } @@ -347,28 +388,28 @@ .v-table-no-stripes { - @include valo-table-no-stripes; + @include valo-table-no-stripes-style; } .v-table-no-vertical-lines { - @include valo-table-no-vertical-lines; + @include valo-table-no-vertical-lines-style; } .v-table-no-horizontal-lines { - @include valo-table-no-horizontal-lines; + @include valo-table-no-horizontal-lines-style; } .v-table-no-header { - @include valo-table-no-header; + @include valo-table-no-header-style; } .v-table-borderless { - @include valo-table-borderless; + @include valo-table-borderless-style; } .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)); + @include valo-table-spacing-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 { @@ -386,6 +427,10 @@ } } + .v-slider-no-indicator { + @include valo-slider-no-indicator; + } + @include valo-menu; diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index 1aca0dd117..0e55402449 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -28,6 +28,11 @@ $valo-global-included: false !default; height: 100%; // Cancel tap highlight from all elements inside the app -webkit-tap-highlight-color: rgba(0,0,0,0); + + // Prevent iOS text size adjust after orientation change, without disabling user zoom + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } .v-ui { diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index 5d92f4c974..53b7586ce4 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -17,7 +17,7 @@ $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: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default; +$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default; $v-selection-overlay-background-color: $v-overlay-background-color !default; $v-selection-overlay-padding: $v-overlay-padding !default; diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss index 270be09b4f..bf5b9b78bd 100644 --- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -220,10 +220,11 @@ $color: $background-color; @each $b in $bevel { + $strength: 1; @if type-of($b) == list { $strength: first-number($b); - $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); } + $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); } @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color; |