| @mixin base-escalator($primaryStyleName: v-escalator, $background-color: #fff) { |
| |
| .#{$primaryStyleName} { |
| position: relative; |
| } |
| |
| .#{$primaryStyleName}-scroller { |
| position: absolute; |
| z-index: 1; |
| outline: none; |
| @include box-sizing(border-box); |
| } |
| |
| .#{$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; |
| @include box-sizing(border-box); |
| z-index: 5; |
| } |
| |
| .#{$primaryStyleName}-tablewrapper > table { |
| border-spacing: 0; |
| table-layout: fixed; |
| width: inherit; // a decent default fallback |
| } |
| |
| .#{$primaryStyleName}-header-deco, |
| .#{$primaryStyleName}-footer-deco { |
| position: absolute; |
| right: 0; |
| @include box-sizing(border-box); |
| } |
| |
| .#{$primaryStyleName}-horizontal-scrollbar-deco { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| @include box-sizing(border-box); |
| } |
| |
| .#{$primaryStyleName}-header, |
| .#{$primaryStyleName}-body, |
| .#{$primaryStyleName}-footer { |
| position: absolute; |
| left: 0; |
| width: inherit; |
| z-index: 10; |
| } |
| |
| .#{$primaryStyleName}-header, |
| .#{$primaryStyleName}-header-deco { |
| top: 0; |
| } |
| |
| .#{$primaryStyleName}-footer, |
| .#{$primaryStyleName}-footer-deco { |
| bottom: 0; |
| } |
| |
| .#{$primaryStyleName}-body { |
| z-index: 0; |
| top: 0; |
| |
| .#{$primaryStyleName}-row { |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| } |
| |
| .#{$primaryStyleName}-row { |
| display: block; |
| |
| .v-ie8 &, .v-ie9 & { |
| // Neither IE8 nor IE9 let table rows be longer than tbody, with only |
| // "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; |
| padding: 2px; |
| white-space: nowrap; |
| @include box-sizing(border-box); |
| overflow: hidden; |
| |
| // Because Vaadin changes the font size after the initial render, we |
| // need to mention the font size here explicitly, otherwise automatic |
| // row height detection gets broken. |
| |
| font-size: $v-font-size; |
| } |
| |
| .#{$primaryStyleName}-cell.frozen { |
| position: relative; |
| z-index: 1; |
| } |
| |
| .#{$primaryStyleName}-spacer { |
| position: absolute; |
| display: block; |
| |
| background-color: $background-color; |
| |
| > td { |
| width: 100%; |
| height: 100%; |
| @include box-sizing(border-box); |
| } |
| |
| .v-ie8 &, .v-ie9 & { |
| // 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; |
| } |
| } |
| } |