| @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; |
| } |
| |
| } |