vaadin-framework/themes/src/main/resources/VAADIN/themes/base/table/table.scss

@mixin base-table($primaryStyleName : v-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 .#{$primaryStyleName}-header-wrap and .#{$primaryStyleName}-body
 *
 * Table cells in body:
 *  - padding/border for cells is to be defined for td elements (class name: .#{$primaryStyleName}-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: .#{$primaryStyleName}-cell-wrapper) element
 *  - background is allowed for both elements
 *
 * Table headers:
 *  - table cells in header contain .#{$primaryStyleName}-resizer and 
 *	  .#{$primaryStyleName}-caption-container div elements, which are both floated to right
 *  - to align header caption to body content resizer width + .#{$primaryStyleName}-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.
 *
 */
.#{$primaryStyleName} {
	overflow: hidden;
	text-align: left; /* Force default alignment */
}
.#{$primaryStyleName}-header-wrap {
	overflow: hidden;
	border: 1px solid #aaa;
	border-bottom: none;
	background: #efefef;
}
.#{$primaryStyleName}-header table,
.#{$primaryStyleName}-table {
	border-spacing: 0;
	border-collapse: separate;
	margin: 0;
	padding: 0;
	border: 0;
}
.#{$primaryStyleName}-table {
   font-size: $font-size;
}

.#{$primaryStyleName}-header td {
	padding: 0;
}
.#{$primaryStyleName}-header-cell,
.#{$primaryStyleName}-header-cell-asc,
.#{$primaryStyleName}-header-cell-desc {
	cursor: pointer;
}

.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell,
.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-asc,
.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-desc {
	cursor: default;
}

.#{$primaryStyleName}-footer-wrap {
	overflow: hidden;
	border: 1px solid #aaa;
	border-top: none;
	background: #efefef;
}
.#{$primaryStyleName}-footer table {
	border-spacing: 0;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border: 0;
}
.#{$primaryStyleName}-footer td {
	padding: 0;
	border-right: 1px solid #aaa;
}
.#{$primaryStyleName}-footer-cell {
	cursor: pointer;
}
.#{$primaryStyleName}-footer-container {	
	float:right;	
	padding-right:6px;
	overflow:hidden;
	white-space:nowrap;
}
.#{$primaryStyleName}-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;
}
.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-resizer {
	cursor: default;	
}
.#{$primaryStyleName}-caption-container {
	overflow: hidden;
	white-space: nowrap;
	margin-left: 6px;
}
.#{$primaryStyleName}-caption-container-align-right {
	float: right;
}
.#{$primaryStyleName}-sort-indicator {
	width: 0px;
	height: 1.2em;
	float: right;
}
.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator,
.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
	width: 16px;
	height: 1.2em;
	float: right;
}		
.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator {
	background: transparent url(../common/img/sprites.png) no-repeat right 6px;
}
.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator {
	background: transparent url(../common/img/sprites.png) no-repeat right -10px;
}
.#{$primaryStyleName}-caption-container-align-center {
	text-align: center;
}
.#{$primaryStyleName}-caption-container-align-right {
	text-align: right;
}
.#{$primaryStyleName}-caption-container .v-icon,
.#{$primaryStyleName}-header-drag .v-icon {
	vertical-align: middle;
}
.#{$primaryStyleName}-body {
	border: 1px solid #aaa;
}
.#{$primaryStyleName}-row-spacer {
	height: 10px;
	overflow: hidden; /* IE hack to allow < one line height divs */
}
.#{$primaryStyleName}-row,
.#{$primaryStyleName}-row-odd {
    background: #fff;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.#{$primaryStyleName}-generated-row {
	   background: #efefef;
}

.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row,
.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd {
	cursor: default;
}
.#{$primaryStyleName} .v-selected {
	background: #999;
	color: #fff;
}
.#{$primaryStyleName}-cell-content {
	white-space: nowrap;
	overflow: hidden;
	padding: 0 6px;
	border-right: 1px solid #aaa;
}
.#{$primaryStyleName}-cell-wrapper {
	/* Do not specify any margins, paddings or borders here */
	white-space: nowrap;
	overflow: hidden;
}
.#{$primaryStyleName}-cell-wrapper-align-center {
	text-align: center;
}
.#{$primaryStyleName}-cell-wrapper-align-right {
	text-align: right;
}
.#{$primaryStyleName}-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;
}
.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-column-selector {
	cursor: default;
}
.#{$primaryStyleName}-focus-slot-left {
	border-left: 2px solid #999;
	float: none;
	margin-bottom: -1.2em;
	width: auto;
	background: transparent;
	border-right: 1px solid #aaa;
}
.#{$primaryStyleName}-focus-slot-right {
	border-right: 2px solid #999;
	margin-left: -2px;
}
.#{$primaryStyleName}-header-drag {
	position: absolute;
	background: #efefef;
	border: 1px solid #eee;
	opacity: 0.9;
	filter: alpha(opacity=90);
	margin-top: 20px;
	z-index: 30000;
}
.#{$primaryStyleName}-header-drag .v-icon {
	vertical-align: middle;
}
.#{$primaryStyleName}-scrollposition {
	width: 160px;
	background: #eee;
	border: 1px solid #aaa;
}
.#{$primaryStyleName}-scrollposition span {
	display: block;
	text-align: center;
}
.#{$primaryStyleName}-body:focus,
.#{$primaryStyleName}-body-wrapper:focus {
	outline: none;
}
.#{$primaryStyleName}-body.focused {
	border-color: #388ddd;
}
.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-content {
	border-top: 1px dotted #0066bd;
	border-bottom: 1px dotted #0066bd;
}
.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-wrapper {
	margin-top: -1px;
	margin-bottom: -1px;
}
/* row in column selector */
.v-on {
	
}
.v-off {
	color: #ddd;
}

/* CheckBox and selection fix #9064 */
.#{$primaryStyleName} .v-checkbox {
    display: inline-block;
}

/*************************************
 * Drag'n'drop styles
 *************************************/
.#{$primaryStyleName}-drag .#{$primaryStyleName}-body {
	border-color: #1d9dff;
}
.#{$primaryStyleName}-row-drag-middle .#{$primaryStyleName}-cell-content {
	background-color: #bcdcff;
}
.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content {
	border-top: 2px solid #1d9dff;
}
.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-wrapper {
	margin-top: -2px; /* compensate the space consumed by border hint */
}
.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content {
	border-bottom: 2px solid #1d9dff;
}
.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-wrapper {
	margin-bottom: -2px; /* compensate the space consumed by border hint */
}
.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content:first-child:before,
.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after {
	display: block;
	
	position: absolute;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	margin-left: -6px;
	background: transparent url(../common/img/drag-slot-dot.png);
}
.v-ff & .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after,
.v-ie & .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after {
	margin-top: -2px;
}

}