diff options
Diffstat (limited to 'WebContent')
| -rw-r--r-- | WebContent/VAADIN/themes/base/base.scss | 4 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/escalator/escalator.scss | 120 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 38 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer-tests/styles.css | 4 | ||||
| -rw-r--r-- | WebContent/release-notes.html | 5 |
5 files changed, 167 insertions, 4 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 3570c5efec..6263646ce1 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -16,8 +16,10 @@ @import "inlinedatefield/inlinedatefield.scss"; @import "dragwrapper/dragwrapper.scss"; @import "embedded/embedded.scss"; +@import "escalator/escalator.scss"; @import "fonts/fonts.scss"; @import "formlayout/formlayout.scss"; +@import "grid/grid.scss"; @import "gridlayout/gridlayout.scss"; @import "label/label.scss"; @import "link/link.scss"; @@ -90,7 +92,9 @@ $line-height: normal; @include base-inline-datefield; @include base-dragwrapper; @include base-embedded; + @include base-escalator; @include base-formlayout; + @include base-grid; @include base-gridlayout; @include base-label; @include base-link; diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss new file mode 100644 index 0000000000..c6438ac9cc --- /dev/null +++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss @@ -0,0 +1,120 @@ +@mixin base-escalator($primaryStyleName : v-escalator) { + +$background-color: white; +$border-color: #aaa; + +.#{$primaryStyleName} { + position: relative; + background-color: $background-color; +} + +.#{$primaryStyleName}-scroller { + position: absolute; + overflow: auto; + z-index: 20; +} + +.#{$primaryStyleName}-scroller-horizontal { + left: 0; /* Left position adjusted to align with frozen columns */ + right: 0; + bottom: 0; + overflow-y: hidden; + -ms-overflow-y: hidden; +} + +.#{$primaryStyleName}-scroller-vertical { + right: 0; + top: 0; /* this will be overridden by code, but it's a good default behavior */ + bottom: 0; /* this will be overridden by code, but it's a good default behavior */ + overflow-x: hidden; + -ms-overflow-x: hidden; +} + +.#{$primaryStyleName}-tablewrapper { + position: absolute; + overflow: hidden; +} + +.#{$primaryStyleName}-tablewrapper > table { + border-spacing: 0; + table-layout: fixed; + width: inherit; /* a decent default fallback */ +} + +.#{$primaryStyleName}-header, +.#{$primaryStyleName}-body, +.#{$primaryStyleName}-footer { + position: absolute; + left: 0; + width: inherit; + z-index: 10; +} + +.#{$primaryStyleName}-header { top: 0; } +.#{$primaryStyleName}-footer { bottom: 0; } + +.#{$primaryStyleName}-body { + z-index: 0; + top: 0; + + .#{$primaryStyleName}-row { + position: absolute; + top: 0; + left: 0; + } +} + +.#{$primaryStyleName}-row { + display: block; + + .v-ie8 &, .v-ie9 & { + /* + * Neither IE8 nor IE9 let table rows be longer than tbody, with only + * "display: block". Moar hax. + */ + float: left; + clear: left; + + /* + * The inline style of margin-top from the <tbody> to offset the + * header's dimension is, for some strange reason, inherited into each + * contained <tr>. We need to cancel it: + */ + margin-top: 0; + } + + > td, > th { + /* IE8 likes the bgcolor here instead of on the row */ + background-color: $background-color; + } +} + + +.#{$primaryStyleName}-row { + width: inherit; +} + +.#{$primaryStyleName}-cell { + display: block; + float: left; + border: 1px solid $border-color; + padding: 2px; + white-space: nowrap; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow:hidden; + + /* + * Because Vaadin changes the font size after the initial render, we + * need to mention the font size here explicitly, otherwise automatic + * row height detection gets broken. + */ + font-size: $font-size; +} + +.#{$primaryStyleName}-cell.frozen { + position: relative; + z-index: 0; +} + +} diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss new file mode 100644 index 0000000000..88c7754a10 --- /dev/null +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -0,0 +1,38 @@ +@mixin base-grid($primaryStyleName : v-grid) { + @include base-escalator($primaryStyleName); + + .#{$primaryStyleName} { + + th { + position: relative; + } + + th.sort-asc:after { + content: "\25B2" attr(sort-order); + position: absolute; + right: 5px; + } + + th.sort-desc:after { + content: "\25BC" attr(sort-order); + position: absolute; + right: 5px; + } + + .#{$primaryStyleName}-cell-active { + border-color: blue; + } + + .#{$primaryStyleName}-header-active { + background: lightgray; + } + + .#{$primaryStyleName}-row-active > td { + background: rgb(244,244,244); + } + } + + .#{$primaryStyleName}-row-selected > td { + background: lightblue; + } +} diff --git a/WebContent/VAADIN/themes/reindeer-tests/styles.css b/WebContent/VAADIN/themes/reindeer-tests/styles.css index 679de01b9c..9dd88707d1 100644 --- a/WebContent/VAADIN/themes/reindeer-tests/styles.css +++ b/WebContent/VAADIN/themes/reindeer-tests/styles.css @@ -32,3 +32,7 @@ .popup-style .v-datefield-calendarpanel-body { background: yellow; } + +#escalator .v-escalator-body .v-escalator-cell { + height: 50px; +}
\ No newline at end of file diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html index ac4e27d8a3..3fa008f3f3 100644 --- a/WebContent/release-notes.html +++ b/WebContent/release-notes.html @@ -97,10 +97,7 @@ enhancements. Below is a list of the most notable changes:</p> <ul> - <li>Valo is a brand new built-in theme for Vaadin. It leverages - the Sass CSS preprocessor heavily, - providing a variety of ways to customize the look and feel of your theme. - See <a href="https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started">the Valo theme tutorial</a> or <a href="https://vaadin.com/book/-/page/themes.valo.html">the Valo theme section</a> in Book of Vaadin for information on how to get started.</li> + <li>Grid</li> </ul> <p> |