diff options
Diffstat (limited to 'WebContent/VAADIN/themes/base/table/table.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/base/table/table.scss | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss new file mode 100644 index 0000000000..d521b5ebae --- /dev/null +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -0,0 +1,283 @@ +@mixin base-table { + +/* Table theme building instructions + * + * Vaadin scroll table is very complex widget with dozens of features. These + * features set some limitations for theme builder. To keep things working, it + * is safest to try to just override values used in default theme and comfort to + * these instructions. + * + * Borders in table header and in table body need to be same width + * - specify vertical borders on .v-table-header-wrap and .v-table-body + * + * Table cells in body: + * - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content) + * - in default theme there are no borders, but they should work. Just set border-right or border-bottom + * - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element + * - background is allowed for both elements + * + * Table headers: + * - table cells in header contain .v-table-resizer and + * .v-table-caption-container div elements, which are both floated to right + * - to align header caption to body content resizer width + .v-table-caption-container + * padding right should be equal to content cells padding-right and border-right. + * - Possible cell border in header must be themed into column resizer. + * + */ +.v-table { + overflow: hidden; + text-align: left; /* Force default alignment */ +} +.v-table-header-wrap { + overflow: hidden; + border: 1px solid #aaa; + border-bottom: none; + background: #efefef; +} +.v-table-header table, +.v-table-table { + border-spacing: 0; + border-collapse: separate; + margin: 0; + padding: 0; + border: 0; +} +.v-table-header td { + padding: 0; +} +.v-table-header-cell, +.v-table-header-cell-asc, +.v-table-header-cell-desc { + cursor: pointer; +} + +.v-table.v-disabled .v-table-header-cell, +.v-table.v-disabled .v-table-header-cell-asc, +.v-table.v-disabled .v-table-header-cell-desc { + cursor: default; +} + +.v-table-footer-wrap { + overflow: hidden; + border: 1px solid #aaa; + border-top: none; + background: #efefef; +} +.v-table-footer table { + border-spacing: 0; + border-collapse: collapse; + margin: 0; + padding: 0; + border: 0; +} +.v-table-footer td { + padding: 0; + border-right: 1px solid #aaa; +} +.v-table-footer-cell { + cursor: pointer; +} +.v-table-footer-container { + float:right; + padding-right:6px; + overflow:hidden; + white-space:nowrap; +} +.v-table-resizer { + display: block; + height: 1.2em; + float: right; + background: #aaa; + cursor: e-resize; /* Opera does not support col-resize, so use e-resize instead */ + cursor: col-resize; + width: 1px; + overflow: hidden; +} +.v-table.v-disabled .v-table-resizer { + cursor: default; +} +.v-table-caption-container { + overflow: hidden; + white-space: nowrap; + margin-left: 6px; +} +.v-table-caption-container-align-right { + float: right; +} +.v-table-sort-indicator { + width: 0px; + height: 1.2em; + float: right; +} +.v-table-header-cell-asc .v-table-sort-indicator, +.v-table-header-cell-desc .v-table-sort-indicator { + width: 16px; + height: 1.2em; + float: right; +} +.v-table-header-cell-asc .v-table-sort-indicator { + background: transparent url(../common/img/sprites.png) no-repeat right 6px; +} +.v-table-header-cell-desc .v-table-sort-indicator { + background: transparent url(../common/img/sprites.png) no-repeat right -10px; +} +.v-table-caption-container-align-center { + text-align: center; +} +.v-table-caption-container-align-right { + text-align: right; +} +.v-table-caption-container .v-icon, +.v-table-header-drag .v-icon { + vertical-align: middle; +} +.v-table-body { + border: 1px solid #aaa; +} +.v-table-row-spacer { + height: 10px; + overflow: hidden; /* IE hack to allow < one line height divs */ +} +.v-table-row, +.v-table-row-odd { + background: #fff; + border: 0; + margin: 0; + padding: 0; + cursor: pointer; +} + +.v-table-generated-row { + background: #efefef; +} + +.v-table-body-noselection .v-table-row, +.v-table-body-noselection .v-table-row-odd { + cursor: default; +} +.v-table .v-selected { + background: #999; + color: #fff; +} +.v-table-cell-content { + white-space: nowrap; + overflow: hidden; + padding: 0 6px; + border-right: 1px solid #aaa; +} +.v-table-cell-wrapper { + /* Do not specify any margins, paddings or borders here */ + white-space: nowrap; + overflow: hidden; +} +.v-table-cell-wrapper-align-center { + text-align: center; +} +.v-table-cell-wrapper-align-right { + text-align: right; +} +.v-table-column-selector { + float: right; + background: transparent url(../common/img/sprites.png) no-repeat 4px -37px; + margin: -1.2em 0 0 0; + height: 1.2em; + width: 14px; + position: relative; /* hide this from IE, it works without it */ + cursor: pointer; +} +.v-table.v-disabled .v-table-column-selector { + cursor: default; +} +.v-table-focus-slot-left { + border-left: 2px solid #999; + float: none; + margin-bottom: -1.2em; + width: auto; + background: transparent; + border-right: 1px solid #aaa; +} +.v-table-focus-slot-right { + border-right: 2px solid #999; + margin-left: -2px; +} +.v-table-header-drag { + position: absolute; + background: #efefef; + border: 1px solid #eee; + opacity: 0.9; + filter: alpha(opacity=90); + margin-top: 20px; + z-index: 30000; +} +.v-table-header-drag .v-icon { + vertical-align: middle; +} +.v-table-scrollposition { + width: 160px; + background: #eee; + border: 1px solid #aaa; +} +.v-table-scrollposition span { + display: block; + text-align: center; +} +.v-table-body:focus, +.v-table-body-wrapper:focus { + outline: none; +} +.v-table-body.focused { + border-color: #388ddd; +} +.v-table-focus .v-table-cell-content { + border-top: 1px dotted #0066bd; + border-bottom: 1px dotted #0066bd; +} +.v-table-focus .v-table-cell-wrapper { + margin-top: -1px; + margin-bottom: -1px; +} +/* row in column selector */ +.v-on { + +} +.v-off { + color: #ddd; +} +/************************************* + * Drag'n'drop styles + *************************************/ +.v-table-drag .v-table-body { + border-color: #1d9dff; +} +.v-table-row-drag-middle .v-table-cell-content { + background-color: #bcdcff; +} +.v-table-row-drag-top .v-table-cell-content { + border-top: 2px solid #1d9dff; +} +.v-table-row-drag-top .v-table-cell-wrapper { + margin-top: -2px; /* compensate the space consumed by border hint */ +} +.v-table-row-drag-bottom .v-table-cell-content { + border-bottom: 2px solid #1d9dff; +} +.v-table-row-drag-bottom .v-table-cell-wrapper { + margin-bottom: -2px; /* compensate the space consumed by border hint */ +} +.v-table-row-drag-top .v-table-cell-content:first-child:before, +.v-table-row-drag-bottom .v-table-cell-content:first-child:after { + display: block; + content: ""; + position: absolute; + width: 6px; + height: 6px; + margin-top: -4px; + margin-left: -6px; + background: transparent url(../common/img/drag-slot-dot.png); +} +.v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after, +.v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after { + margin-top: -2px; +} + +}
\ No newline at end of file |