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 552628bb61..660c30a4cf 100644 --- a/WebContent/VAADIN/themes/base/table/table.scss +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -1,4 +1,4 @@ -@mixin base-table($name : v-table) { +@mixin base-table($primaryStyleName : 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 .#{$name}-header-wrap and .#{$name}-body + * - 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: .#{$name}-cell-content) + * - 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: .#{$name}-cell-wrapper) element + * - 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 .#{$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 + * - 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. * */ -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; text-align: left; /* Force default alignment */ } -.#{$name}-header-wrap { +.#{$primaryStyleName}-header-wrap { overflow: hidden; border: 1px solid #aaa; border-bottom: none; background: #efefef; } -.#{$name}-header table, -.#{$name}-table { +.#{$primaryStyleName}-header table, +.#{$primaryStyleName}-table { border-spacing: 0; border-collapse: separate; margin: 0; padding: 0; border: 0; } -.#{$name}-header td { +.#{$primaryStyleName}-header td { padding: 0; } -.#{$name}-header-cell, -.#{$name}-header-cell-asc, -.#{$name}-header-cell-desc { +.#{$primaryStyleName}-header-cell, +.#{$primaryStyleName}-header-cell-asc, +.#{$primaryStyleName}-header-cell-desc { cursor: pointer; } -.#{$name}.v-disabled .#{$name}-header-cell, -.#{$name}.v-disabled .#{$name}-header-cell-asc, -.#{$name}.v-disabled .#{$name}-header-cell-desc { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell, +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-asc, +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-desc { cursor: default; } -.#{$name}-footer-wrap { +.#{$primaryStyleName}-footer-wrap { overflow: hidden; border: 1px solid #aaa; border-top: none; background: #efefef; } -.#{$name}-footer table { +.#{$primaryStyleName}-footer table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; border: 0; } -.#{$name}-footer td { +.#{$primaryStyleName}-footer td { padding: 0; border-right: 1px solid #aaa; } -.#{$name}-footer-cell { +.#{$primaryStyleName}-footer-cell { cursor: pointer; } -.#{$name}-footer-container { +.#{$primaryStyleName}-footer-container { float:right; padding-right:6px; overflow:hidden; white-space:nowrap; } -.#{$name}-resizer { +.#{$primaryStyleName}-resizer { display: block; height: 1.2em; float: right; @@ -93,53 +93,53 @@ width: 1px; overflow: hidden; } -.#{$name}.v-disabled .#{$name}-resizer { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-resizer { cursor: default; } -.#{$name}-caption-container { +.#{$primaryStyleName}-caption-container { overflow: hidden; white-space: nowrap; margin-left: 6px; } -.#{$name}-caption-container-align-right { +.#{$primaryStyleName}-caption-container-align-right { float: right; } -.#{$name}-sort-indicator { +.#{$primaryStyleName}-sort-indicator { width: 0px; height: 1.2em; float: right; } -.#{$name}-header-cell-asc .#{$name}-sort-indicator, -.#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator, +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { width: 16px; height: 1.2em; float: right; } -.#{$name}-header-cell-asc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right 6px; } -.#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right -10px; } -.#{$name}-caption-container-align-center { +.#{$primaryStyleName}-caption-container-align-center { text-align: center; } -.#{$name}-caption-container-align-right { +.#{$primaryStyleName}-caption-container-align-right { text-align: right; } -.#{$name}-caption-container .v-icon, -.#{$name}-header-drag .v-icon { +.#{$primaryStyleName}-caption-container .v-icon, +.#{$primaryStyleName}-header-drag .v-icon { vertical-align: middle; } -.#{$name}-body { +.#{$primaryStyleName}-body { border: 1px solid #aaa; } -.#{$name}-row-spacer { +.#{$primaryStyleName}-row-spacer { height: 10px; overflow: hidden; /* IE hack to allow < one line height divs */ } -.#{$name}-row, -.#{$name}-row-odd { +.#{$primaryStyleName}-row, +.#{$primaryStyleName}-row-odd { background: #fff; border: 0; margin: 0; @@ -147,36 +147,36 @@ cursor: pointer; } -.#{$name}-generated-row { +.#{$primaryStyleName}-generated-row { background: #efefef; } -.#{$name}-body-noselection .#{$name}-row, -.#{$name}-body-noselection .#{$name}-row-odd { +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row, +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd { cursor: default; } -.#{$name} .v-selected { +.#{$primaryStyleName} .v-selected { background: #999; color: #fff; } -.#{$name}-cell-content { +.#{$primaryStyleName}-cell-content { white-space: nowrap; overflow: hidden; padding: 0 6px; border-right: 1px solid #aaa; } -.#{$name}-cell-wrapper { +.#{$primaryStyleName}-cell-wrapper { /* Do not specify any margins, paddings or borders here */ white-space: nowrap; overflow: hidden; } -.#{$name}-cell-wrapper-align-center { +.#{$primaryStyleName}-cell-wrapper-align-center { text-align: center; } -.#{$name}-cell-wrapper-align-right { +.#{$primaryStyleName}-cell-wrapper-align-right { text-align: right; } -.#{$name}-column-selector { +.#{$primaryStyleName}-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; } -.#{$name}.v-disabled .#{$name}-column-selector { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-column-selector { cursor: default; } -.#{$name}-focus-slot-left { +.#{$primaryStyleName}-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; } -.#{$name}-focus-slot-right { +.#{$primaryStyleName}-focus-slot-right { border-right: 2px solid #999; margin-left: -2px; } -.#{$name}-header-drag { +.#{$primaryStyleName}-header-drag { position: absolute; background: #efefef; border: 1px solid #eee; @@ -209,30 +209,30 @@ margin-top: 20px; z-index: 30000; } -.#{$name}-header-drag .v-icon { +.#{$primaryStyleName}-header-drag .v-icon { vertical-align: middle; } -.#{$name}-scrollposition { +.#{$primaryStyleName}-scrollposition { width: 160px; background: #eee; border: 1px solid #aaa; } -.#{$name}-scrollposition span { +.#{$primaryStyleName}-scrollposition span { display: block; text-align: center; } -.#{$name}-body:focus, -.#{$name}-body-wrapper:focus { +.#{$primaryStyleName}-body:focus, +.#{$primaryStyleName}-body-wrapper:focus { outline: none; } -.#{$name}-body.focused { +.#{$primaryStyleName}-body.focused { border-color: #388ddd; } -.#{$name}-focus .#{$name}-cell-content { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-content { border-top: 1px dotted #0066bd; border-bottom: 1px dotted #0066bd; } -.#{$name}-focus .#{$name}-cell-wrapper { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-wrapper { margin-top: -1px; margin-bottom: -1px; } @@ -246,26 +246,26 @@ /************************************* * Drag'n'drop styles *************************************/ -.#{$name}-drag .#{$name}-body { +.#{$primaryStyleName}-drag .#{$primaryStyleName}-body { border-color: #1d9dff; } -.#{$name}-row-drag-middle .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-middle .#{$primaryStyleName}-cell-content { background-color: #bcdcff; } -.#{$name}-row-drag-top .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content { border-top: 2px solid #1d9dff; } -.#{$name}-row-drag-top .#{$name}-cell-wrapper { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-wrapper { margin-top: -2px; /* compensate the space consumed by border hint */ } -.#{$name}-row-drag-bottom .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content { border-bottom: 2px solid #1d9dff; } -.#{$name}-row-drag-bottom .#{$name}-cell-wrapper { +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-wrapper { margin-bottom: -2px; /* compensate the space consumed by border hint */ } -.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before, -.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content:first-child:before, +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-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 .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after, -.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { +.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; } |