/* 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-ie7 .v-table { overflow: visible; } .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-ie7 .v-table-caption-container-align-right { margin-left: 0px; padding-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-ie6 .v-table-column-selector, .v-ie7 .v-table-column-selector { position: static; } .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; }