diff options
4 files changed, 200 insertions, 129 deletions
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..cf2f027cd5 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -1,12 +1,171 @@ -@import "escalator"; - -/** - * - * - * @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 +@import "../../base/escalator/escalator"; + +@mixin valo-grid { + + @include base-escalator(v-grid); + + /* BASE GRID */ + .v-grid { + th { + position: relative; + } + + th.sort-asc:after { + content: "\25B2" attr(sort-order); + /* + position: absolute; + right: 5px; + */ + + font-size: 9px; + float: right; + line-height: 14px; + } + + th.sort-desc:after { + content: "\25BC" attr(sort-order); + /* + position: absolute; + right: 5px; + */ + + font-size: 9px; + float: right; + line-height: 14px; + } + + /*.v-grid-cell-active { + border-color: blue; + } + + .v-grid-header-active { + background: lightgray; + } + + .v-grid-row-active > td { + background: rgb(244,244,244); + }*/ + } + + .v-grid-row-selected > td { + background: lightblue; + } + + + + + + /* CUSTOM STYLES */ + + /* Common styles; empty area before horizontal scroll */ + .v-grid:after { + @include header-style; + content: ""; + width: 100%; + height: 15px; + position: absolute; + bottom: 0; + border-left: 1px solid #d4d4d4; + border-bottom: 1px solid #d4d4d4; + border-right: 1px solid #d4d4d4; + box-sizing: border-box; + } + + /* Common styles; all but first column cells have left border */ + .v-grid-row { + th, td { + background: none; + border-left: none; + border-right: 1px solid #d4d4d4; + border-top: none; + border-bottom: none; + } + + th:last-child, td:last-child { + border-right: none; + } + } + + /* Common styles; clear the float and change display value for all cells */ + .v-grid-cell { + float: none; + display: inline-block; + + &.frozen { + box-shadow: 2px 0 2px rgba(0,0,0,0.1); + } + &.v-grid-cell-active { + box-shadow: inset 2px 2px 0px #77aeee, inset -2px -2px 0px #77aeee; + } + } + + /* Common styles: main border, moved from .v-grid due to scroll div widths */ + .v-grid-tablewrapper { + border: 1px solid #d4d4d4; + box-sizing: border-box; + } + + /* Grid header */ + .v-grid-header { + .v-grid-cell { + @include header-style; + border-bottom: 1px solid #d4d4d4; + } + + th { + @include header-text; + } + } + + /* Grid footer */ + .v-grid-footer { + .v-grid-cell { + @include header-style; + border-top: 1px solid #d4d4d4; + } + + td { + @include header-text; + } + } + + /* Grid body */ + .v-grid-body { + + .v-grid-cell { + padding: 11px 12px 12px 12px; + line-height: 1; + } + + .v-grid-row { + border-bottom: 1px solid #d4d4d4; + + &:nth-child(odd) td { + background: white; + } + + &:nth-child(even) td { + background: #f5f5f5; + } + + &.v-grid-row-active td { + background: #166ed5; + color: white; + border-color: #1d69b4; + } + } + } +} + +@mixin header-style { + background-color: #fafafa; + background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%); + background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%); +} + +@mixin header-text { + font-weight: 300; + font-size: 14px; + line-height: 1; + padding: 12px 12px 11px 12px; +} diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesValo.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesValo.java new file mode 100644 index 0000000000..aef353fe93 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesValo.java @@ -0,0 +1,28 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.components.grid.basicfeatures; + +import com.vaadin.annotations.Theme; +import com.vaadin.ui.themes.ValoTheme; + +@Theme(ValoTheme.THEME_NAME) +public class GridBasicFeaturesValo extends GridBasicFeatures { + @Override + @Deprecated + public String getTheme() { + return ValoTheme.THEME_NAME; + } +} |