diff options
Diffstat (limited to 'WebContent/VAADIN/themes/base/table/table.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/base/table/table.scss | 142 |
1 files changed, 71 insertions, 71 deletions
diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss index fd3c0af0e1..552628bb61 100644 --- a/WebContent/VAADIN/themes/base/table/table.scss +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -1,4 +1,4 @@ -@mixin base-table { +@mixin base-table($name : v-table) { /* Table theme building instructions * @@ -8,82 +8,82 @@ * 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 + * - specify vertical borders on .#{$name}-header-wrap and .#{$name}-body * * Table cells in body: - * - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content) + * - padding/border for cells is to be defined for td elements (class name: .#{$name}-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 + * - no padding or border is allowed for div inside cells (class name: .#{$name}-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 + * - table cells in header contain .#{$name}-resizer and + * .#{$name}-caption-container div elements, which are both floated to right + * - to align header caption to body content resizer width + .#{$name}-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 { +.#{$name} { overflow: hidden; text-align: left; /* Force default alignment */ } -.v-table-header-wrap { +.#{$name}-header-wrap { overflow: hidden; border: 1px solid #aaa; border-bottom: none; background: #efefef; } -.v-table-header table, -.v-table-table { +.#{$name}-header table, +.#{$name}-table { border-spacing: 0; border-collapse: separate; margin: 0; padding: 0; border: 0; } -.v-table-header td { +.#{$name}-header td { padding: 0; } -.v-table-header-cell, -.v-table-header-cell-asc, -.v-table-header-cell-desc { +.#{$name}-header-cell, +.#{$name}-header-cell-asc, +.#{$name}-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 { +.#{$name}.v-disabled .#{$name}-header-cell, +.#{$name}.v-disabled .#{$name}-header-cell-asc, +.#{$name}.v-disabled .#{$name}-header-cell-desc { cursor: default; } -.v-table-footer-wrap { +.#{$name}-footer-wrap { overflow: hidden; border: 1px solid #aaa; border-top: none; background: #efefef; } -.v-table-footer table { +.#{$name}-footer table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; border: 0; } -.v-table-footer td { +.#{$name}-footer td { padding: 0; border-right: 1px solid #aaa; } -.v-table-footer-cell { +.#{$name}-footer-cell { cursor: pointer; } -.v-table-footer-container { +.#{$name}-footer-container { float:right; padding-right:6px; overflow:hidden; white-space:nowrap; } -.v-table-resizer { +.#{$name}-resizer { display: block; height: 1.2em; float: right; @@ -93,53 +93,53 @@ width: 1px; overflow: hidden; } -.v-table.v-disabled .v-table-resizer { +.#{$name}.v-disabled .#{$name}-resizer { cursor: default; } -.v-table-caption-container { +.#{$name}-caption-container { overflow: hidden; white-space: nowrap; margin-left: 6px; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { float: right; } -.v-table-sort-indicator { +.#{$name}-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 { +.#{$name}-header-cell-asc .#{$name}-sort-indicator, +.#{$name}-header-cell-desc .#{$name}-sort-indicator { width: 16px; height: 1.2em; float: right; } -.v-table-header-cell-asc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right 6px; } -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-desc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right -10px; } -.v-table-caption-container-align-center { +.#{$name}-caption-container-align-center { text-align: center; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { text-align: right; } -.v-table-caption-container .v-icon, -.v-table-header-drag .v-icon { +.#{$name}-caption-container .v-icon, +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-body { +.#{$name}-body { border: 1px solid #aaa; } -.v-table-row-spacer { +.#{$name}-row-spacer { height: 10px; overflow: hidden; /* IE hack to allow < one line height divs */ } -.v-table-row, -.v-table-row-odd { +.#{$name}-row, +.#{$name}-row-odd { background: #fff; border: 0; margin: 0; @@ -147,36 +147,36 @@ cursor: pointer; } -.v-table-generated-row { +.#{$name}-generated-row { background: #efefef; } -.v-table-body-noselection .v-table-row, -.v-table-body-noselection .v-table-row-odd { +.#{$name}-body-noselection .#{$name}-row, +.#{$name}-body-noselection .#{$name}-row-odd { cursor: default; } -.v-table .v-selected { +.#{$name} .v-selected { background: #999; color: #fff; } -.v-table-cell-content { +.#{$name}-cell-content { white-space: nowrap; overflow: hidden; padding: 0 6px; border-right: 1px solid #aaa; } -.v-table-cell-wrapper { +.#{$name}-cell-wrapper { /* Do not specify any margins, paddings or borders here */ white-space: nowrap; overflow: hidden; } -.v-table-cell-wrapper-align-center { +.#{$name}-cell-wrapper-align-center { text-align: center; } -.v-table-cell-wrapper-align-right { +.#{$name}-cell-wrapper-align-right { text-align: right; } -.v-table-column-selector { +.#{$name}-column-selector { float: right; background: transparent url(../common/img/sprites.png) no-repeat 4px -37px; margin: -1.2em 0 0 0; @@ -185,10 +185,10 @@ position: relative; /* hide this from IE, it works without it */ cursor: pointer; } -.v-table.v-disabled .v-table-column-selector { +.#{$name}.v-disabled .#{$name}-column-selector { cursor: default; } -.v-table-focus-slot-left { +.#{$name}-focus-slot-left { border-left: 2px solid #999; float: none; margin-bottom: -1.2em; @@ -196,11 +196,11 @@ background: transparent; border-right: 1px solid #aaa; } -.v-table-focus-slot-right { +.#{$name}-focus-slot-right { border-right: 2px solid #999; margin-left: -2px; } -.v-table-header-drag { +.#{$name}-header-drag { position: absolute; background: #efefef; border: 1px solid #eee; @@ -209,30 +209,30 @@ margin-top: 20px; z-index: 30000; } -.v-table-header-drag .v-icon { +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-scrollposition { +.#{$name}-scrollposition { width: 160px; background: #eee; border: 1px solid #aaa; } -.v-table-scrollposition span { +.#{$name}-scrollposition span { display: block; text-align: center; } -.v-table-body:focus, -.v-table-body-wrapper:focus { +.#{$name}-body:focus, +.#{$name}-body-wrapper:focus { outline: none; } -.v-table-body.focused { +.#{$name}-body.focused { border-color: #388ddd; } -.v-table-focus .v-table-cell-content { +.#{$name}-focus .#{$name}-cell-content { border-top: 1px dotted #0066bd; border-bottom: 1px dotted #0066bd; } -.v-table-focus .v-table-cell-wrapper { +.#{$name}-focus .#{$name}-cell-wrapper { margin-top: -1px; margin-bottom: -1px; } @@ -246,26 +246,26 @@ /************************************* * Drag'n'drop styles *************************************/ -.v-table-drag .v-table-body { +.#{$name}-drag .#{$name}-body { border-color: #1d9dff; } -.v-table-row-drag-middle .v-table-cell-content { +.#{$name}-row-drag-middle .#{$name}-cell-content { background-color: #bcdcff; } -.v-table-row-drag-top .v-table-cell-content { +.#{$name}-row-drag-top .#{$name}-cell-content { border-top: 2px solid #1d9dff; } -.v-table-row-drag-top .v-table-cell-wrapper { +.#{$name}-row-drag-top .#{$name}-cell-wrapper { margin-top: -2px; /* compensate the space consumed by border hint */ } -.v-table-row-drag-bottom .v-table-cell-content { +.#{$name}-row-drag-bottom .#{$name}-cell-content { border-bottom: 2px solid #1d9dff; } -.v-table-row-drag-bottom .v-table-cell-wrapper { +.#{$name}-row-drag-bottom .#{$name}-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 { +.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before, +.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { display: block; position: absolute; @@ -275,8 +275,8 @@ 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 { +.v-ff .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after, +.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { margin-top: -2px; } |