summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes
diff options
context:
space:
mode:
authorJouni Koivuviita <jouni@vaadin.com>2015-03-27 15:09:41 +0200
committerHenrik Paul <henrik@vaadin.com>2015-04-01 07:50:18 +0000
commit0ca0240a30a9701cdf9fb071594a9e24ee810ad9 (patch)
tree4d024f00f988c5fd55b58963003803ed80c01788 /WebContent/VAADIN/themes
parent849c92d431ca2d4d591b2ca61c541aa40f754e83 (diff)
downloadvaadin-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.scss48
-rw-r--r--WebContent/VAADIN/themes/valo/components/_grid.scss13
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 {