summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/base/grid/grid.scss
diff options
context:
space:
mode:
authorJouni Koivuviita <jouni@vaadin.com>2015-02-06 00:05:21 +0200
committerVaadin Code Review <review@vaadin.com>2015-02-06 07:43:44 +0000
commit0c82dad0ab225aeb9920b2e5c6f061da871bea66 (patch)
treeeecfb95c58e2d4e75e6dc5eba84f930dedeb98e3 /WebContent/VAADIN/themes/base/grid/grid.scss
parentbc9db74216f654901154a08ad877d74bf63c64b5 (diff)
downloadvaadin-framework-0c82dad0ab225aeb9920b2e5c6f061da871bea66.tar.gz
vaadin-framework-0c82dad0ab225aeb9920b2e5c6f061da871bea66.zip
Grid editor theme redesign (#16593)
Editor theme is now more flexible with regards to CSS. There are now separate elements for containing the edited cells and the “footer” which contains an optional message area and the save and cancel buttons. Change-Id: I9addcb6adca792a9251ffada99fbe9b77502c77a
Diffstat (limited to 'WebContent/VAADIN/themes/base/grid/grid.scss')
-rw-r--r--WebContent/VAADIN/themes/base/grid/grid.scss90
1 files changed, 70 insertions, 20 deletions
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index ed068a5efc..a79420f7a9 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -85,7 +85,8 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
// Rows
- .#{$primaryStyleName}-row > td {
+ .#{$primaryStyleName}-row > td,
+ .#{$primaryStyleName}-editor-cells > div {
border-left: $v-grid-cell-vertical-border;
border-bottom: $v-grid-cell-horizontal-border;
@@ -221,22 +222,35 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
// Editor
.#{$primaryStyleName}-editor {
- // TODO should be fixed in offset calculations
- margin-top: -1px;
position: absolute;
- overflow-y: visible;
- background: $v-grid-editor-background-color;
- @include box-shadow(0 0 10px 1px rgba(0,0,0,.3));
+ z-index: 20;
+ overflow: hidden;
+ left: 0;
+ right: 0;
+ border: $v-grid-border;
+ margin-top: nth($v-grid-border, 1) * -1;
+ @include box-shadow(0 0 9px rgba(0,0,0,.2));
+ }
+
+ .#{$primaryStyleName}-editor-cells {
+ position: relative;
+ white-space: nowrap;
> div {
- position: absolute;
+ display: inline-block;
@include box-sizing(border-box);
- border-left: $v-grid-cell-vertical-border;
+ vertical-align: middle;
+ background: $v-grid-editor-background-color;
&:first-child {
border-left: none;
}
+ > * {
+ vertical-align: middle;
+ display: inline-block;
+ }
+
.v-textfield,
.v-datefield,
.v-filterselect {
@@ -244,24 +258,60 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
max-width: 100%;
min-height: 100%;
max-height: 100%;
- border: none;
- border-radius: 0;
}
- .v-textfield-focus,
- .v-filterselect-focus input {
- position: relative;
- z-index: 1;
+ .v-select,
+ .v-select-select {
+ min-width: 100%;
+ max-width: 100%;
}
}
}
- .#{$primaryStyleName}-editor-save,
- .#{$primaryStyleName}-editor-cancel {
- position: absolute;
- // TODO remove the inline size from the widgets
- width: auto !important;
- height: auto !important;
+ .#{$primaryStyleName}-editor-footer {
+ display: table;
+ height: $v-grid-row-height;
+ border-top: $v-grid-cell-horizontal-border;
+ margin-top: nth($v-grid-cell-horizontal-border, 1) * -1;
+ background: $v-grid-row-background-color;
+ padding: 0 5px;
+
+ + .#{$primaryStyleName}-editor-cells > div {
+ border-bottom: none;
+ border-top: $v-grid-cell-horizontal-border;
+ }
+
+ &:first-child {
+ border-top: none;
+ margin-top: 0;
+ border-bottom: $v-grid-cell-horizontal-border;
+ margin-bottom: nth($v-grid-cell-horizontal-border, 1) * -1;
+ }
+ }
+
+ .#{$primaryStyleName}-editor-message,
+ .#{$primaryStyleName}-editor-buttons {
+ display: table-cell;
+ white-space: nowrap;
+ vertical-align: middle;
+ }
+
+ .#{$primaryStyleName}-editor-message {
+ width: 100%;
+ position: relative;
+
+ > div {
+ position: absolute;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: $v-grid-row-height;
+ top: 0;
+ }
+ }
+
+ .#{$primaryStyleName}-editor-save {
+ margin-right: 4px;
}
// Renderers