diff options
author | Jouni Koivuviita <jouni@vaadin.com> | 2015-03-27 15:09:41 +0200 |
---|---|---|
committer | Henrik Paul <henrik@vaadin.com> | 2015-04-01 07:50:18 +0000 |
commit | 0ca0240a30a9701cdf9fb071594a9e24ee810ad9 (patch) | |
tree | 4d024f00f988c5fd55b58963003803ed80c01788 /WebContent/VAADIN/themes | |
parent | 849c92d431ca2d4d591b2ca61c541aa40f754e83 (diff) | |
download | vaadin-framework-0ca0240a30a9701cdf9fb071594a9e24ee810ad9.tar.gz vaadin-framework-0ca0240a30a9701cdf9fb071594a9e24ee810ad9.zip |
Adds theme to details in Grid (#16644)
Change-Id: I84628ee5840b71f2ff889037a525d43f9e86af46
Diffstat (limited to 'WebContent/VAADIN/themes')
-rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 48 | ||||
-rw-r--r-- | WebContent/VAADIN/themes/valo/components/_grid.scss | 13 |
2 files changed, 57 insertions, 4 deletions
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss index ccb7043c50..7dc877dca5 100644 --- a/WebContent/VAADIN/themes/base/grid/grid.scss +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -24,6 +24,12 @@ $v-grid-cell-padding-horizontal: 5px !default; $v-grid-editor-background-color: $v-grid-row-background-color !default; +$v-grid-details-marker-width: 2px !default; +$v-grid-details-marker-color: $v-grid-row-selected-background-color !default; +$v-grid-details-border-top: $v-grid-cell-horizontal-border !default; +$v-grid-details-border-top-stripe: $v-grid-cell-horizontal-border !default; +$v-grid-details-border-bottom: 1px solid darken($v-grid-row-stripe-background-color, 10%) !default; +$v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-color, 10%) !default; @import "../escalator/escalator"; @@ -392,9 +398,45 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default; .#{$primaryStyleName}-editor-save { margin-right: 4px; } - - .#{$primaryStyleName}-spacer { - border: $v-grid-border; + + .#{$primaryStyleName}-spacer > td { + display: block; + padding: 0; + + background-color: $v-grid-row-background-color; + border-top: $v-grid-details-border-top; + border-bottom: $v-grid-details-border-bottom; + } + + .#{$primaryStyleName}-spacer.stripe > td { + background-color: $v-grid-row-stripe-background-color; + border-top: $v-grid-details-border-top-stripe; + border-bottom: $v-grid-details-border-bottom-stripe; + } + + .#{$primaryStyleName}-spacer .deco { + top: 0; // this will be overridden by code, but it's a good default. + left: 0; + width: $v-grid-details-marker-width; + background-color: $v-grid-details-marker-color; + position: absolute; + height: 100%; // this will be overridden by code, but it's a good default. + pointer-events: none; + + // IE 8-10 apply "pointer-events" only to SVG elements. + // Using an empty SVG instead of an empty text node makes IE + // obey the "pointer-events: none" and forwards click events + // to the underlying element. The data decodes to: + // <svg xmlns="http://www.w3.org/2000/svg"></svg> + .ie8 &:before, + .ie9 &:before, + .ie10 &:before { + content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==); + } + } + + .#{$primaryStyleName}-spacer .content { + padding-left: $v-grid-details-marker-width; } // Renderers diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index 0d6d2ff0a6..0adfdd27ab 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -3,7 +3,8 @@ $v-grid-row-background-color: valo-table-background-color() !default; $v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default; -$v-grid-border: flatten-list(valo-border($color: $v-grid-row-background-color, $strength: 0.8)) !default; +$v-grid-border-color-source: $v-grid-row-background-color !default; +$v-grid-border: flatten-list(valo-border($color: $v-grid-border-color-source, $strength: 0.8)) !default; $v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default; $v-grid-row-height: $v-table-row-height !default; @@ -16,6 +17,12 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default; $v-grid-animations-enabled: $v-animations-enabled !default; +$v-grid-details-marker-width: first-number($v-grid-border) * 2 !default; +$v-grid-details-marker-color: $v-selection-color !default; +$v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default; +$v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default; +$v-grid-details-border-bottom: $v-grid-cell-horizontal-border !default; +$v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default; @import "../../base/grid/grid"; @@ -177,6 +184,10 @@ $v-grid-animations-enabled: $v-animations-enabled !default; outline: none; } + .#{$primary-stylename}-spacer { + margin-top: first-number($v-grid-border) * -1; + } + // Customize scrollbars .#{$primary-stylename}-scroller { &::-webkit-scrollbar { |