diff options
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/grid/grid.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/grid/grid.scss | 213 |
1 files changed, 43 insertions, 170 deletions
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss index 09bc03ad73..397aa229cd 100644 --- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss +++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss @@ -1,187 +1,60 @@ -@mixin reindeer-grid($primary-stylename : v-grid) { - - $grid-border-main: 1px solid #c2c3c4; - $grid-border-light: 1px solid #d4d4d4; - $grid-background-light: #d4d7d9; - - .#{$primary-stylename} { - outline: none; - } - - // Table wrapper - .#{$primary-stylename}-tablewrapper { - @include box-sizing(border-box); - border: $grid-border-light; - } - - // Grid header. - .#{$primary-stylename}-header, .#{$primary-stylename}-footer { - - .#{$primary-stylename}-cell { - background: $grid-background-light repeat-x; +// Variables defined in reindeer.scss + +@mixin reindeer-grid($primaryStyleName: v-grid) { + + .#{$primaryStyleName}-header, + .#{$primaryStyleName}-footer { + .#{$primaryStyleName}-cell { background-image: url(img/header-bg-light.png); - border: $grid-border-main; - border-right: none; color: #222; - font-size: 10px; font-weight: bold; - line-height: normal; - padding: 4px 4px 5px 6px; text-shadow: #f3f5f8 0 1px 0; text-transform: uppercase; - - &:first-child { - border-left: none; - } } - - .#{$primary-stylename}-cell-active { - border-right: 1px solid transparent; - border-color: #0f68ba; - padding-right: 3px; - } - - .#{$primary-stylename}-cell-active:first-child { - border-left: 1px solid #0f68ba; - padding-left: 5px; - } - - } - - .#{$primary-stylename}-cell.frozen { - /* TODO this probably should be a SCSS mixin */ - -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - } - - .#{$primary-stylename}-header { - border-top: none; } - - .#{$primary-stylename}-footer { - border-bottom: none; + + .#{$primaryStyleName}-header-deco, + .#{$primaryStyleName}-footer-deco, + .#{$primaryStyleName}-horizontal-scrollbar-deco { + background-image: url(img/header-bg-light.png); } - - // Grid body - .#{$primary-stylename}-body { - - // Rows - .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell { - background-color: #eff0f1; - } - - // Cells - .#{$primary-stylename}-cell { - border: none; - border-left: 1px solid #d3d4d5; - padding: 3px 6px; - - &:first-child { - border-left: none; - - input[type="checkbox"] { - margin: 0; - } - } - } - - // Active state - .#{$primary-stylename}-row-active { - - .#{$primary-stylename}-cell { - background: #d6dfe9 url(img/focus-bg-light.png) repeat-x; - } - - .#{$primary-stylename}-cell-active { - border: 1px solid #0f68ba; - - // Adjust padding for 'active' borders. - padding: 2px 5px 2px 6px; - &:first-child { - padding-left: 5px; - } - } - } - - // Selected state - .#{$primary-stylename}-row-selected { - color: #fff; - text-shadow: #3b5a7a 0 1px 0; - - .#{$primary-stylename}-cell { - background: #4d749f url(../common/img/sel-bg.png) repeat-x; - border-color: #466c90; - } - - // Selected and focused - .#{$primary-stylename}-cell-active { - border-color: #b1cde4; - } + + // Selected row + .#{$primaryStyleName}-row-selected { + color: #fff; + text-shadow: #3b5a7a 0 1px 0; + + > .#{$primaryStyleName}-cell { + background: #4d749f url(../common/img/sel-bg.png) repeat-x; + border-color: #466c90; } - - .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell { - background: #d6dfe9 url(img/focus-sel-bg-light.png) repeat-x; + + // Selected and active + > .#{$primaryStyleName}-cell-active:before { + border-color: #b1cde4; } } - + // Sort indicators - .#{$primary-stylename} th.sort-asc:after, - .#{$primary-stylename} th.sort-desc:after { - content: " " attr(sort-order); - position: absolute; - right: 5px; - background: transparent no-repeat right 7px; - width: 16px; - height: 12px; - top: 0px; - } - - .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after, - .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after { - right: 4px; - } - - .#{$primary-stylename} th.sort-asc:after { - background-image: url(img/desc-light.png); + .#{$primaryStyleName} th.sort-asc, + .#{$primaryStyleName} th.sort-desc { + padding-right: 16px + $v-grid-cell-padding-horizontal; + + &:after { + content: " " attr(sort-order); + background: transparent no-repeat right 7px; + width: 16px; + height: 12px; + top: 0; + } } - - .#{$primary-stylename} th.sort-desc:after { + + .#{$primaryStyleName} th.sort-asc:after { background-image: url(img/asc-light.png); } - - // Scrollbars - .#{$primary-stylename}-scroller { - @include box-sizing(border-box); - outline: none; - } - - .#{$primary-stylename}-scroller-vertical { - border-top: $grid-border-main; - border-bottom: $grid-border-light; - } - - .#{$primary-stylename}-scroller-horizontal { - border-left: $grid-border-light; - border-right: $grid-border-light; - } - - // Fillers - .#{$primary-stylename}-horizontalscrollbarbackground, - .#{$primary-stylename}-footercorner, - .#{$primary-stylename}-headercorner { - @include box-sizing(border-box); - background: $grid-background-light repeat-x; - background-image: url(img/header-bg-light.png); - border: $grid-border-light; - } - - .#{$primary-stylename}-footercorner { - border-top: none; + + .#{$primaryStyleName} th.sort-desc:after { + background-image: url(img/desc-light.png); } -} -@mixin box-sizing($value) { - box-sizing: $value; - -moz-box-sizing: $value; - -webkit-box-sizing: $value; -}
\ No newline at end of file +} |