diff options
Diffstat (limited to 'WebContent/VAADIN/themes')
| -rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 90 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/grid/grid.scss | 31 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/runo/grid/grid.scss | 4 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_grid.scss | 105 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/shared/_global.scss | 10 |
5 files changed, 215 insertions, 25 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 diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss index 8dacb3ccce..28c5977fda 100644 --- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss +++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss @@ -57,4 +57,35 @@ background-image: url(img/desc-light.png); } + .#{$primaryStyleName}-editor-footer { + background: #dfe1e3; + } + + .#{$primaryStyleName}-editor-cells > div { + .v-textfield, + .v-textfield-focus, + .v-datefield, + .v-datefield .v-textfield-focus, + .v-filterselect, + .v-filterselect-input, + .v-filterselect-input:focus { + border: none; + border-radius: 0; + background: transparent; + } + + .v-filterselect { + overflow: hidden; + } + + .v-filterselect-input { + height: 100%; + } + + .v-filterselect-button { + // 24px is the height of v-filterselect + margin-top: round((24px - $v-grid-row-height) / -2) + } + } + } diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss index a1081878cc..06a04ec626 100644 --- a/WebContent/VAADIN/themes/runo/grid/grid.scss +++ b/WebContent/VAADIN/themes/runo/grid/grid.scss @@ -50,4 +50,8 @@ background-image: url(img/sort-desc.png); } + .#{$primaryStyleName}-editor-footer { + background: #e7e9ea; + } + } diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index 50c7169225..c481f127a8 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -3,7 +3,7 @@ $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: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default; +$v-grid-border: flatten-list(valo-border($color: $v-grid-row-background-color, $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; @@ -14,6 +14,8 @@ $v-grid-header-background-color: $v-background-color !default; $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default; +$v-grid-animations-enabled: $v-animations-enabled !default; + @import "../../base/grid/grid"; @@ -68,10 +70,91 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default; } } + .#{$primary-stylename}-editor { + @include valo-focus-style; + border-color: $v-focus-color; + } + + .#{$primary-stylename}-editor-footer { + font-size: $v-font-size--small; + padding: 0 round($v-layout-spacing-horizontal / 2); + background: $v-app-background-color; + @if $v-grid-animations-enabled { + @include animation(valo-grid-editor-footer-animate-in 200ms 120ms backwards); + } + } + + @if $v-grid-animations-enabled { + .#{$primary-stylename}-editor-footer:first-child { + @include animation(valo-grid-editor-footer-animate-in-alt 200ms 120ms backwards); + } + } + + .#{$primary-stylename}-editor-cells { + z-index: 1; + } + + .#{$primary-stylename}-editor-cells > div { + // Vertical centering for widgets + &:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + } + + .v-textfield, + .v-textfield-focus, + .v-datefield, + .v-datefield .v-textfield-focus, + .v-filterselect-input, + .v-filterselect-input:focus { + border: none; + border-radius: 0; + background: transparent; + + @if $v-textfield-bevel { + @include box-shadow(valo-bevel-and-shadow($bevel: $v-textfield-bevel)); + } @else { + @include box-shadow(none); + } + } + + .v-textfield-focus, + .v-datefield .v-textfield-focus, + .v-filterselect-input:focus { + position: relative; + } + + .v-select { + padding-left: round($v-grid-cell-padding-horizontal / 2); + padding-right: round($v-grid-cell-padding-horizontal / 2); + } + + .v-checkbox { + margin: 0 round($v-grid-cell-padding-horizontal / 2); + + label { + white-space: nowrap; + } + } + } + + .#{$primary-stylename}-editor-message > div:before { + display: inline-block; + @include valo-error-indicator-style($is-pseudo-element: true); + } + .#{$primary-stylename}-editor-save, .#{$primary-stylename}-editor-cancel { - @include valo-button-static-style; - @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small); + @include valo-link-style; + font-weight: $v-font-weight + 100; + text-decoration: none; + border: none; + background: transparent; + padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2); + margin: 0; + outline: none; } // Customize scrollbars @@ -98,3 +181,19 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default; } } + + +@include keyframes(valo-grid-editor-footer-animate-in) { + 0% { + margin-top: -$v-grid-row-height; + } +} + +@include keyframes(valo-grid-editor-footer-animate-in-alt) { + 0% { + margin-bottom: -$v-grid-row-height - first-number($v-grid-cell-horizontal-border); + } + 100% { + margin-bottom: first-number($v-grid-cell-horizontal-border) * -1; + } +} diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index 4ce294b06a..b4e8564119 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -394,16 +394,22 @@ $valo-shared-pathPrefix: null; /** * Error indicator styles. The error indicator is by default a font character which you can style freely. * + * @param {boolean} $is-pseudo-element (false) - is the selector including this mixin targeting a pseudo element + * * @requires {mixin} valo-error-indicator-icon-style by default */ -@mixin valo-error-indicator-style { +@mixin valo-error-indicator-style ($is-pseudo-element: false) { color: $v-error-indicator-color; font-weight: 600; width: ceil($v-unit-size/2); text-align: center; - &:before { + @if $is-pseudo-element { @include valo-error-indicator-icon-style; + } @else { + &:before { + @include valo-error-indicator-icon-style; + } } } |