diff options
Diffstat (limited to 'WebContent')
19 files changed, 799 insertions, 129 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..c5b5d24fa4 --- /dev/null +++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss @@ -0,0 +1,137 @@ +@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}-headercorner, +.#{$primaryStyleName}-footercorner { + position: absolute; + right: 0; + border: 1px solid $border-color; + box-sizing: border-box; +} + +.#{$primaryStyleName}-headercorner { top: 0; } +.#{$primaryStyleName}-footercorner { bottom: 0; } + +.#{$primaryStyleName}-horizontalscrollbarbackground { + position: absolute; + bottom: 0; + width: 100%; +} + +.#{$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: 1; +} + +} diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss new file mode 100644 index 0000000000..de30424d22 --- /dev/null +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -0,0 +1,65 @@ +@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 > td { + background-color: #fff; + } + + .#{$primaryStyleName}-row-stripe > td { + background-color: #eee; + } + + .#{$primaryStyleName}-row-selected > td { + background: lightblue; + } + + .#{$primaryStyleName}-editor-row { + + position: absolute; + overflow-y: visible; + background: #EEE; + box-shadow: 0 0 5px; + + & > div { + position: absolute; + box-sizing: border-box; + border: 1px solid #CCC; + } + + .v-editor-row-save, + .v-editor-row-cancel { + position: absolute; + } + } +} 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/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss new file mode 100644 index 0000000000..1fa0a743a6 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss @@ -0,0 +1,175 @@ +@mixin reindeer-grid($primary-stylename : v-grid) { + + // TODO: check/set these values + $scrollbar-size: 15px; + $header-height: 22px; + + $grid-border-main: 1px solid #c2c3c4; + $grid-border-light: 1px solid #d4d4d4; + + .#{$primary-stylename} { + outline: none; + } + + // Table wrapper + .#{$primary-stylename}-tablewrapper { + @include box-sizing(border-box); + border: $grid-border-light; + } + + // Grid header. + .#{$primary-stylename}-header, .#{$primary-stylename}-footer { + + .#{$primary-stylename}-cell { + background: transparent repeat-x; + background-image: url(img/header-bg-light.png); + border: $grid-border-main; + border-right: none; + color: #222; + font-size: 10px; + font-weight: bold; + line-height: normal; + padding: 4px 4px 5px 6px; + text-shadow: #f3f5f8 0 1px 0; + text-transform: uppercase; + + &:first-child { + border-left: none; + } + } + } + + .#{$primary-stylename}-header { + border-top: none; + } + + .#{$primary-stylename}-footer { + border-bottom: none; + } + + // Grid body + .#{$primary-stylename}-body { + + // Rows + .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell { + background-color: #eff0f1; + } + + // Cells + .#{$primary-stylename}-cell { + border: none; + border-left: 1px solid #d3d4d5; + padding: 3px 6px; + + &:first-child { + border-left: none; + + input[type="checkbox"] { + margin: 0; + } + } + } + + // Active state + .#{$primary-stylename}-row-active { + + .#{$primary-stylename}-cell { + background: none; + } + + .#{$primary-stylename}-cell-active { + border: 1px solid #0f68ba; + + // Adjust padding for 'active' borders. + padding: 2px 5px 2px 6px; + &:first-child { + padding-left: 5px; + } + } + } + + // Selected state + .#{$primary-stylename}-row-selected { + color: #fff; + text-shadow: #3b5a7a 0 1px 0; + + .#{$primary-stylename}-cell { + background: #4d749f url(../common/img/sel-bg.png) repeat-x; + border-color: #466c90; + } + + .#{$primary-stylename}-cell-active { + border-color: #b1cde4; + } + } + } + + // Sort indicators + .#{$primary-stylename} th.sort-asc:after, + .#{$primary-stylename} th.sort-desc:after { + content: " " attr(sort-order); + position: absolute; + right: 5px; + background: transparent no-repeat right 7px; + width: 16px; + height: 12px; + top: 0px; + } + + .#{$primary-stylename} th.sort-asc:after { + background-image: url(img/desc-light.png); + } + + .#{$primary-stylename} th.sort-desc:after { + background-image: url(img/asc-light.png); + } + + // Scrollbars + .#{$primary-stylename}-scroller { + @include box-sizing(border-box); + outline: none; + } + + .#{$primary-stylename}-scroller-vertical { + border-top: $grid-border-main; + border-bottom: $grid-border-light; + } + + .#{$primary-stylename}-scroller-horizontal { + border-left: $grid-border-light; + border-right: $grid-border-light; + } + + // Fillers + .#{$primary-stylename}-filler-x { + @include box-sizing(border-box); + background: transparent repeat-x; + background-image: url(img/header-bg-light.png); + border: $grid-border-light; + border-top: none; + bottom: 0px; + height: $scrollbar-size; + left: 0; + position: absolute; + width: 100%; + } + + .#{$primary-stylename}-filler-y { + @include box-sizing(border-box); + background: transparent repeat-x; + background-image: url(img/header-bg-light.png); + border: $grid-border-light; + border-left: none; + height: $header-height; + position: absolute; + right: 0; + top: 0px; + width: $scrollbar-size; + } +} + +@mixin box-sizing($value) { + box-sizing: $value; + -moz-box-sizing: $value; + -webkit-box-sizing: $value; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png Binary files differnew file mode 100644 index 0000000000..44ed76001a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png Binary files differnew file mode 100644 index 0000000000..84d15a0628 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png Binary files differnew file mode 100644 index 0000000000..0b913e2ef1 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss index 485839ecc7..b49e58c323 100644 --- a/WebContent/VAADIN/themes/reindeer/reindeer.scss +++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss @@ -12,6 +12,7 @@ @import "datefield/datefield.scss"; @import "inlinedatefield/inlinedatefield.scss"; @import "formlayout/formlayout.scss"; +@import "grid/grid.scss"; @import "label/label.scss"; @import "layouts/layouts.scss"; @import "link/link.scss"; @@ -49,6 +50,7 @@ $line-height: normal; @include reindeer-datefield; @include reindeer-inlinedatefield; @include reindeer-formlayout; + @include reindeer-grid; @include reindeer-label; @include reindeer-layouts; @include reindeer-link; diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss new file mode 100644 index 0000000000..c5b3602943 --- /dev/null +++ b/WebContent/VAADIN/themes/runo/grid/grid.scss @@ -0,0 +1,165 @@ +@mixin runo-grid($primary-stylename : v-grid) { + + // TODO: check/set these values + $scrollbar-size: 15px; + $header-height: 38px; + + $grid-border-main: 1px solid #b6bbbc; + + .#{$primary-stylename} { + outline: none; + } + + .#{$primary-stylename}-tablewrapper { + @include box-sizing(border-box); + border: $grid-border-main; + } + + // Grid header. + .#{$primary-stylename}-header, .#{$primary-stylename}-footer { + + .#{$primary-stylename}-cell { + color: #393a3c; + background: #e7e9ea url(img/header-bg.png) repeat-x; + border: none; + font-size: 15px; + font-weight: normal; + padding: 9px 2px 9px 6px; + position: relative; + text-shadow: #ffffff 0 1px 0; + + &:first-child { + &:before, &:after { + content: none; + } + } + + &:before { + background-image: url(img/resizer-bg.png); + content: ""; + height: 100%; + left: 0; + top: 0; + width: 2px; + position: absolute; + } + } + } + + .#{$primary-stylename}-header .#{$primary-stylename}-cell { + border-bottom: $grid-border-main; + } + + .#{$primary-stylename}-footer .#{$primary-stylename}-cell { + border-top: $grid-border-main; + } + + // Sort indicators + .#{$primary-stylename} th.sort-asc:after, + .#{$primary-stylename} th.sort-desc:after { + content: ""; + height: 36px; + position: absolute; + right: 0; + top: 0; + width: 20px; + } + + .#{$primary-stylename} th.sort-asc:after { + background: transparent url(img/sort-asc.png) no-repeat right 50%; + } + + .#{$primary-stylename} th.sort-desc:after { + background: transparent url(img/sort-desc.png) no-repeat right 50%; + } + + // Grid body + .#{$primary-stylename}-body { + + .#{$primary-stylename}-row-stripe(odd) > .#{$primary-stylename}-cell { + background-color: #f6f7f7; + } + + // Cells + .#{$primary-stylename}-cell { + border: none; + line-height: 23px; + padding: 3px 6px 0 6px; + } + + // Active state + .#{$primary-stylename}-row-active { + + .#{$primary-stylename}-cell { + background: none; + } + + .#{$primary-stylename}-cell-active { + border: 1px solid #57a7ed; + + // Adjust padding for 'active' border. + padding: 2px 5px 0 5px; + } + } + + // Selected state + .#{$primary-stylename}-row.#{$primary-stylename}-row-selected { + color: white; + + .#{$primary-stylename}-cell { + background-color: #57a7ed; + } + + .#{$primary-stylename}-cell-active { + border-color: #c5e0f7; + } + } + } + + // Scrollbars + .#{$primary-stylename}-scroller { + @include box-sizing(border-box); + outline: none; + } + + .#{$primary-stylename}-scroller-vertical { + border-top: $grid-border-main; + border-bottom: $grid-border-main; + } + + .#{$primary-stylename}-scroller-horizontal { + border-left: $grid-border-main; + border-right: $grid-border-main; + } + + // Fillers + .#{$primary-stylename}-filler-x { + @include box-sizing(border-box); + background: #e7e9ea url(img/header-bg.png) repeat-x; + border: $grid-border-main; + border-top: none; + bottom: 0px; + height: $scrollbar-size; + left: 0; + position: absolute; + width: 100%; + } + + .#{$primary-stylename}-filler-y { + @include box-sizing(border-box); + background: #e7e9ea url(img/header-bg.png) repeat-x; + border: $grid-border-main; + border-left: none; + height: $header-height; + position: absolute; + right: 0; + top: 0px; + width: $scrollbar-size; + } +} + +@mixin box-sizing($value) { + box-sizing: $value; + -moz-box-sizing: $value; + -webkit-box-sizing: $value; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/grid/img/header-bg.png b/WebContent/VAADIN/themes/runo/grid/img/header-bg.png Binary files differnew file mode 100644 index 0000000000..275fbc4382 --- /dev/null +++ b/WebContent/VAADIN/themes/runo/grid/img/header-bg.png diff --git a/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png b/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png Binary files differnew file mode 100644 index 0000000000..d9089775cb --- /dev/null +++ b/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png diff --git a/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png b/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png Binary files differnew file mode 100644 index 0000000000..44e17d5446 --- /dev/null +++ b/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png diff --git a/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png b/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png Binary files differnew file mode 100644 index 0000000000..35fd0595f8 --- /dev/null +++ b/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss index 33ad35a8af..2294d0329b 100644 --- a/WebContent/VAADIN/themes/runo/runo.scss +++ b/WebContent/VAADIN/themes/runo/runo.scss @@ -9,6 +9,7 @@ @import "datefield/datefield.scss"; @import "inlinedatefield/inlinedatefield.scss"; @import "formlayout/formlayout.scss"; +@import "grid/grid.scss"; @import "gridlayout/gridlayout.scss"; @import "label/label.scss"; @import "link/link.scss"; @@ -50,6 +51,7 @@ $line-height: 18px; @include runo-datefield; @include runo-inline-datefield; @include runo-formlayout; + @include runo-grid; @include runo-gridlayout; @include runo-label; @include runo-link; diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss index 0efc363a82..52f1d696aa 100644 --- a/WebContent/VAADIN/themes/valo/components/_all.scss +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -105,7 +105,7 @@ } @if v-is-included(grid) { - @include valo-grid(v-escalator); + @include valo-grid; } @if v-is-included(textfield) { diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss deleted file mode 100644 index 06ce2e6142..0000000000 --- a/WebContent/VAADIN/themes/valo/components/_escalator.scss +++ /dev/null @@ -1,116 +0,0 @@ -/** - * - * - * @param {string} $primaryStyleName (v-escalator) - - * - * @group escalator - */ -@mixin valo-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 & { - /* IE8 doesn't let table rows be longer than body only with 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; -} - -.#{$primaryStyleName}-cell.frozen { - position: relative; - z-index: 0; -} - -}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index cf06167337..ee973921b9 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -1,12 +1,248 @@ -@import "escalator"; +@import "../../base/escalator/escalator"; +@import "table"; + +$primary-stylename: v-grid; +$grid-background-color: valo-table-background-color(); +$grid-border: valo-border($color: $grid-background-color, $strength: 0.8); + +$grid-cell-active-border-width: round($v-unit-size * 0.05); +$grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2); /** * - * - * @param {string} $primary-styleName (v-grid) - + * + * @param {string} $primary-stylename (v-grid) - * * @group grid - */ -@mixin valo-grid($primary-styleName : v-grid) { - @include valo-escalator($primary-styleName); -}
\ No newline at end of file + */ +@mixin valo-grid($primary-stylename : v-grid) { + + @include base-escalator($primary-stylename); + + // TODO: check/set these values + $scrollbar-size: 15px; + $header-height: 39px; + + .#{$primary-stylename} { + outline: none; + } + + // Table wrapper + .#{$primary-stylename}-tablewrapper { + border: $grid-border; + @include box-sizing(border-box); + } + + // Grid header. + .#{$primary-stylename}-header { + @include valo-grid-header-style; + } + + // Sort indicators + .#{$primary-stylename} th.sort-asc:after, th.sort-desc:after { + font-family: FontAwesome; + float: right; + } + + .#{$primary-stylename} th.sort-asc:after { + content: "\f0dd" attr(sort-order); + } + + .#{$primary-stylename} th.sort-desc:after { + content: "\f0de" attr(sort-order); + } + + // Grid body. + .#{$primary-stylename}-body { + + // Rows + .#{$primary-stylename}-row > td { + background-color: $grid-background-color; + } + + .#{$primary-stylename}-row-stripe > td { + $bg-lightness: if(color-luminance($grid-background-color) < 10, 4%, -4%); + background-color: scale-color($grid-background-color, $lightness: $bg-lightness); + } + + // Cells + .#{$primary-stylename}-cell { + padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal; + } + + + // Active state + .#{$primary-stylename}-row-active .#{$primary-stylename}-cell-active { + border: $grid-cell-active-border-width solid $v-selection-color; + padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width; + padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; + padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width; + padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2); + + &:first-child { + padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; + } + } + + // Selected state + .#{$primary-stylename}-row-selected { + + .#{$primary-stylename}-cell-active { + border-color: adjust-color($v-selection-color, $lightness: 20%); + } + + td { + @include valo-gradient($v-selection-color); + color: $grid-background-color; + border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); + } + } + } + + // Common styles for all cells + .#{$primary-stylename}-cell { + border: none; + border-left: $grid-border; + line-height: 1; + + &.frozen { + @include box-shadow(2px 0 2px rgba(0,0,0,0.1)); + } + + &:first-child { + border-left: none; + position: relative; + + // Position the first column checkboxes + input[type="checkbox"] { + position: absolute; + bottom: 0; + left: 0; + margin: auto; + right: 0; + top: 0; + } + } + } + + // Grid footer. + .#{$primary-stylename}-footer { + @include valo-grid-footer-style; + } + + // Grid editor row + .#{$primary-stylename}-editor-row { + @include box-shadow(0px 0px 6px 2px rgba(0,0,0,0.14)); + position: relative; + outline: none; + + // Ugly fix for correcting editor row position + margin-top: -1px; + + > div { + @include box-sizing(border-box); + display: inline-block; + + .v-textfield, .v-datefield, .v-filterselect { + background: $grid-background-color; + border: none; + border-left: $grid-border; + border-radius: 0; + height: 100%; + width: 100%; + + &:focus, &:active { + @include box-shadow(inset 0 0 0 2px $v-focus-color); + outline: none; + } + } + + &:first-child > * { + border-left: none; + } + } + } + + // Grid editor row buttons + .v-editor-row-save, .v-editor-row-cancel { + @include valo-button-static-style; + @include valo-button-style($unit-size: $v-unit-size--small, $border-radius: 0); + border-right: none; + position: static; + width: auto !important; + + &:after, &:before { + content: none; + } + } + .v-editor-row-save { + border-bottom-left-radius: round($v-unit-size * 0.1); + } + + // Scrollbars + .#{$primary-stylename}-scroller { + @include box-sizing(border-box); + outline: none; + } + + .#{$primary-stylename}-scroller-vertical { + border-top: $grid-border; + border-bottom: $grid-border; + } + + .#{$primary-stylename}-scroller-horizontal { + border-left: $grid-border; + border-right: $grid-border; + } + + // Fillers + .#{$primary-stylename}-filler-x { + @include box-sizing(border-box); + @include valo-gradient($v-background-color); + border: $grid-border; + border-top: none; + bottom: 0px; + height: $scrollbar-size; + left: 0; + position: absolute; + width: 100%; + } + + .#{$primary-stylename}-filler-y { + @include box-sizing(border-box); + @include valo-gradient($v-background-color); + border: $grid-border; + border-left: none; + height: $header-height; + position: absolute; + right: 0; + top: 0px; + width: $scrollbar-size; + } +} + +@mixin valo-grid-header-style { + .#{$primary-stylename}-cell { + @include valo-gradient($v-background-color); + border-bottom: $grid-border; + } + + th { + font-weight: inherit; + font-size: $v-table-header-font-size; + padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width; + } +} + +@mixin valo-grid-footer-style { + .#{$primary-stylename}-cell { + @include valo-gradient($v-background-color); + border-top: $grid-border; + } + + td { + font-weight: inherit; + font-size: $v-table-header-font-size; + padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width; + } +} diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html index 658b61624e..c22f0e5ed4 100644 --- a/WebContent/release-notes.html +++ b/WebContent/release-notes.html @@ -97,11 +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>Support for changing theme on the fly</li> + <li>Grid</li> </ul> <p> |
