| /** |
| * |
| * @group table |
| */ |
| $v-table-row-height: $v-unit-size !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-border-width: first-number($v-border) !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-border-color: null !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-border-radius: 0 !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-cell-padding-horizontal: round($v-unit-size/3) !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-resizer-width: round($v-unit-size/4.5) !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-sort-indicator-width: round($v-unit-size/2) !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-header-font-size: round($v-font-size * 0.86) !default; |
| |
| /** |
| * |
| * @group table |
| */ |
| $v-table-background-color: null !default; |
| |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-global ($primary-stylename: v-table) { |
| |
| .#{$primary-stylename}-header table, |
| .#{$primary-stylename}-footer table, |
| .#{$primary-stylename}-table { |
| border-spacing: 0; |
| border-collapse: separate; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| line-height: $v-line-height; |
| } |
| |
| .#{$primary-stylename}-resizer, |
| .#{$primary-stylename}-sort-indicator { |
| float: right; |
| } |
| |
| .#{$primary-stylename}-caption-container-align-center { |
| text-align: center; |
| } |
| |
| .#{$primary-stylename}-caption-container-align-right { |
| text-align: right; |
| } |
| |
| .#{$primary-stylename}-header td, |
| .#{$primary-stylename}-footer td, |
| .#{$primary-stylename}-cell-content { |
| padding: 0; |
| } |
| |
| .#{$primary-stylename}-sort-indicator { |
| width: 0; |
| } |
| |
| } |
| |
| |
| |
| |
| /** |
| * |
| * |
| * @param {color} $context ($v-background-color) - |
| * |
| * @return {color} - |
| * |
| * @group table |
| */ |
| @function valo-table-background-color($context: $v-background-color) { |
| @if is-dark-color($context) { |
| @return darken($context, 2%); |
| } |
| @return lighten($context, 2%); |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * @param {bool} $include-additional-styles - |
| * |
| * @group table |
| */ |
| @mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) { |
| |
| $background-color: $v-table-background-color or valo-table-background-color(); |
| $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8)); |
| |
| .#{$primary-stylename} { |
| // For scroll position indicator |
| position: relative; |
| background: $v-background-color; |
| color: valo-font-color($v-background-color); |
| } |
| |
| .#{$primary-stylename}-header table, |
| .#{$primary-stylename}-footer table, |
| .#{$primary-stylename}-table { |
| @include box-shadow(0 0 0 $v-table-border-width $border-color); |
| |
| .v-ie8 & { |
| outline: $v-table-border-width solid $border-color; |
| } |
| } |
| |
| .#{$primary-stylename}-header-wrap, |
| .#{$primary-stylename}-footer-wrap, |
| .#{$primary-stylename}-header-drag { |
| border: $v-table-border-width solid $border-color; |
| @include valo-gradient($v-background-color); |
| white-space: nowrap; |
| font-size: $v-table-header-font-size; |
| text-shadow: valo-text-shadow(); |
| } |
| |
| .#{$primary-stylename}-header-wrap { |
| position: relative; |
| border-bottom: none; |
| @if $v-table-border-radius > 0 { |
| border-radius: $v-table-border-radius $v-table-border-radius 0 0; |
| } |
| } |
| |
| .#{$primary-stylename}-footer-wrap { |
| border-top: none; |
| @if $v-table-border-radius > 0 { |
| border-radius: 0 0 $v-table-border-radius $v-table-border-radius; |
| } |
| } |
| |
| .#{$primary-stylename}-footer td { |
| border-left: $v-table-border-width solid $border-color; |
| // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border) |
| @if $v-table-border-width != 1px { |
| display: inline-block; |
| margin-left: ($v-table-border-width - 1px) * -1; |
| |
| &:first-child { |
| margin-left: 0; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-footer-container, |
| .#{$primary-stylename}-caption-container { |
| overflow: hidden; |
| line-height: 1; |
| min-height: $v-table-row-height; |
| @include box-sizing(border-box); |
| |
| .v-ie8 & { |
| // IE8 has issues with border-box and min-height |
| // -> custom calculations to subtract vertical padding from row height. |
| $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); |
| min-height: $v-table-row-height - ($vertical-padding - $v-table-border-width) - $vertical-padding; |
| } |
| } |
| |
| .#{$primary-stylename}-footer-container { |
| $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); |
| padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding; |
| float: right; |
| } |
| |
| [class^="#{$primary-stylename}-header-cell"] { |
| position: relative; |
| } |
| |
| .#{$primary-stylename}-caption-container, |
| .#{$primary-stylename}-header-drag { |
| $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); |
| padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width; |
| border-left: $v-table-border-width solid $border-color; |
| } |
| |
| .#{$primary-stylename}-caption-container-align-right { |
| padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width; |
| } |
| |
| .#{$primary-stylename}-resizer { |
| height: $v-table-row-height; |
| width: $v-table-resizer-width; |
| cursor: e-resize; |
| cursor: col-resize; |
| position: relative; |
| right: round($v-table-resizer-width / -2); |
| z-index: 1; |
| margin-left: -$v-table-resizer-width; |
| } |
| |
| .#{$primary-stylename}-cell-content { |
| border-left: $v-table-border-width solid $border-color; |
| overflow: hidden; |
| height: $v-table-row-height; |
| vertical-align: middle; |
| |
| &:first-child { |
| border-left: none; |
| padding-left: $v-table-border-width; |
| } |
| } |
| |
| .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container, |
| .#{$primary-stylename}-footer td:first-child { |
| border-left-color: transparent; |
| } |
| |
| |
| .#{$primary-stylename}-cell-wrapper { |
| line-height: 1; |
| padding: 0 $v-table-cell-padding-horizontal; |
| @include box-sizing(border-box); |
| margin-right: 0 !important; |
| |
| > .v-widget { |
| // Leave some breathing room around the table cell and the widget |
| margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2); |
| |
| &.v-label, |
| &.v-checkbox, |
| &.v-select-optiongroup { |
| margin: 0; |
| } |
| &.v-progressbar { |
| margin-left: 0; |
| margin-right: 0; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-body { |
| border: $v-table-border-width solid $border-color; |
| @include user-select(text); |
| } |
| |
| .#{$primary-stylename}-table { |
| background-color: $background-color; |
| white-space: nowrap; |
| } |
| |
| .#{$primary-stylename}-table td { |
| border-top: $v-table-border-width solid $border-color; |
| } |
| |
| .#{$primary-stylename}-table tr:first-child td { |
| border-top: none; |
| } |
| |
| .#{$primary-stylename}-row { |
| background-color: $background-color; |
| } |
| |
| .#{$primary-stylename}-row-odd { |
| $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%); |
| background-color: scale-color($background-color, $lightness: $bg-lightness); |
| } |
| |
| .#{$primary-stylename} [class*="-row"].v-selected { |
| $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); |
| |
| @include valo-gradient($v-selection-color); |
| background-origin: border-box; |
| $font-color: valo-font-color($v-selection-color, 0.9); |
| color: $font-color; |
| text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); |
| |
| + .v-selected { |
| $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); |
| background: $gradient-end; |
| |
| td { |
| border-top-color: $gradient-end; |
| } |
| } |
| |
| .#{$primary-stylename}-cell-content { |
| border-color: transparent; |
| border-left-color: $selected-border-color; |
| |
| &:first-child { |
| border-left-color: transparent; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, |
| .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator { |
| background: transparent; |
| width: $v-table-sort-indicator-width; |
| height: $v-table-row-height; |
| line-height: $v-table-row-height; |
| margin-left: -$v-table-sort-indicator-width; |
| } |
| |
| .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before, |
| .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { |
| font-style: normal; |
| font-weight: normal; |
| display: inline-block; |
| } |
| |
| .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before { |
| @include valo-table-sort-asc-icon-style; |
| } |
| |
| .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { |
| @include valo-table-sort-desc-icon-style; |
| } |
| |
| |
| [class*="rowheader"] span.v-icon { |
| min-width: 1em; |
| } |
| |
| |
| .#{$primary-stylename}-focus { |
| $outline-width: max($v-table-border-width, 1px); |
| outline: $outline-width solid $v-focus-color; |
| outline-offset: -$outline-width; |
| } |
| |
| .v-drag-element.#{$primary-stylename}-focus, |
| .v-drag-element .#{$primary-stylename}-focus { |
| outline: none; |
| } |
| |
| .#{$primary-stylename}-header-drag { |
| position: absolute; |
| @include opacity(0.9); |
| margin-top: round($v-table-row-height/-2); |
| z-index: 30000; |
| line-height: 1; |
| } |
| |
| .#{$primary-stylename}-focus-slot-right { |
| border-right: $v-table-border-width + 2px solid $v-focus-color; |
| right: -$v-table-border-width - 1px; |
| margin-left: -$v-table-resizer-width - $v-table-border-width - 2px; |
| } |
| |
| .#{$primary-stylename}-focus-slot-left { |
| float: left; |
| border-left: $v-table-border-width + 2px solid $v-focus-color; |
| left: -$v-table-border-width; |
| right: auto; |
| margin-left: 0 !important; |
| margin-right: -$v-table-resizer-width - $v-table-border-width - 2px; |
| } |
| |
| .#{$primary-stylename}-column-selector { |
| @include valo-button-style; |
| position: absolute; |
| z-index: 2; |
| top: round($v-unit-size/-4); |
| right: round($v-unit-size/-4); |
| height: round($v-unit-size/2); |
| line-height: round($v-unit-size/2); |
| width: round($v-unit-size/2); |
| padding: 0; |
| border-radius: 50%; |
| cursor: pointer; |
| text-align: center; |
| |
| @include opacity(0); |
| @if $v-animations-enabled { |
| @include transition(opacity 200ms 1s); |
| } |
| |
| &:after { |
| content: ""; |
| position: absolute; |
| $v-button-border-width: first-number($v-border); |
| top: -$v-button-border-width; |
| right: -$v-button-border-width; |
| bottom: -$v-button-border-width; |
| left: -$v-button-border-width; |
| border-radius: inherit; |
| } |
| &:active:after { |
| @include valo-button-active-style; |
| } |
| &:before { |
| @include valo-table-column-selector-icon-style; |
| } |
| } |
| |
| .v-scrollable > .#{$primary-stylename} .#{$primary-stylename}-column-selector { |
| right: 0; |
| top: 0; |
| border-top: none; |
| border-right: none; |
| border-radius: 0 0 0 50%; |
| |
| &:after { |
| top: 0; |
| right: 0; |
| } |
| } |
| |
| .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector { |
| @include opacity(1); |
| @include transition-delay(100ms); |
| } |
| |
| .v-on, |
| .v-off { |
| &:before { |
| @include valo-table-column-visible-icon-style; |
| font-size: 0.9em; |
| margin-right: round($v-unit-size/6); |
| } |
| div { |
| display: inline; |
| } |
| } |
| .v-off:before { |
| visibility: hidden; |
| } |
| |
| |
| tbody.v-drag-element { |
| display: block; |
| overflow: visible; |
| @include box-shadow(none); |
| background: transparent; |
| @include opacity(1); |
| |
| tr { |
| display: block; |
| @include valo-drag-element-style($background-color: null); |
| background: $background-color; |
| |
| &[style*="hidden"] { |
| |
| } |
| } |
| } |
| |
| |
| .#{$primary-stylename}-body { |
| // Show on top of scroll position indicator (allow scroll events to hit the body instead of indicator) |
| position: relative; |
| z-index: 1; |
| } |
| |
| .#{$primary-stylename}-scrollposition { |
| position: absolute; |
| top: 50%; |
| width: 100%; |
| height: $v-unit-size; |
| line-height: $v-unit-size; |
| margin: round($v-unit-size/-2) 0 0 !important; |
| text-align: center; |
| } |
| |
| |
| |
| |
| |
| // Drag'n'drop styles |
| |
| .#{$primary-stylename}-drag .#{$primary-stylename}-body { |
| @include box-shadow(0 0 0 2px rgba($v-focus-color, .5)); |
| |
| @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) { |
| border-color: $v-focus-color; |
| } |
| |
| .v-ie8 & { |
| border-color: $v-focus-color; |
| } |
| |
| .#{$primary-stylename}-focus { |
| outline: none; |
| } |
| } |
| |
| .#{$primary-stylename}-row-drag-middle .#{$primary-stylename}-cell-content { |
| $bg: mix($v-focus-color, $background-color, 20%); |
| background-color: $bg; |
| color: valo-font-color($bg); |
| } |
| |
| .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content { |
| border-bottom: 2px solid $v-focus-color; |
| height: $v-table-row-height - 2px; |
| } |
| |
| .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper { |
| margin-bottom: -2px; |
| } |
| |
| .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content { |
| border-top: 2px solid $v-focus-color; |
| height: $v-table-row-height - 2px + $v-table-border-width; |
| } |
| |
| .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper { |
| margin-top: -1px; |
| } |
| |
| |
| |
| |
| @if $include-additional-styles { |
| .#{$primary-stylename}-no-stripes { |
| @include valo-table-no-stripes-style; |
| } |
| |
| .#{$primary-stylename}-no-vertical-lines { |
| @include valo-table-no-vertical-lines-style; |
| } |
| |
| .#{$primary-stylename}-no-horizontal-lines { |
| @include valo-table-no-horizontal-lines-style; |
| } |
| |
| .#{$primary-stylename}-no-header { |
| @include valo-table-no-header-style; |
| } |
| |
| .#{$primary-stylename}-borderless { |
| @include valo-table-borderless-style; |
| } |
| |
| .#{$primary-stylename}-compact, |
| .#{$primary-stylename}-small { |
| @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); |
| } |
| |
| .#{$primary-stylename}-small { |
| font-size: $v-font-size--small; |
| |
| &.v-treetable .#{$primary-stylename}-cell-wrapper { |
| min-height: $v-font-size--small; |
| } |
| } |
| } |
| |
| } |
| |
| |
| |
| |
| /** |
| * |
| * |
| * |
| * @group table |
| */ |
| @mixin valo-table-sort-asc-icon-style { |
| content: '\f0de'; |
| font-family: FontAwesome; |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group table |
| */ |
| @mixin valo-table-sort-desc-icon-style { |
| content: '\f0dd'; |
| font-family: FontAwesome; |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group table |
| */ |
| @mixin valo-table-column-selector-icon-style { |
| font-family: FontAwesome; |
| content: "\f013"; |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group table |
| */ |
| @mixin valo-table-column-visible-icon-style { |
| content: "\f00c"; |
| font-family: FontAwesome; |
| } |
| |
| |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-no-stripes-style ($primary-stylename: v-table) { |
| .#{$primary-stylename}-row, |
| .#{$primary-stylename}-row-odd { |
| background: transparent; |
| } |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) { |
| .#{$primary-stylename}-cell-content { |
| border-left: none; |
| padding-left: $v-table-border-width; |
| } |
| |
| &.v-treetable { |
| .#{$primary-stylename}-cell-content { |
| padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; |
| } |
| } |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) { |
| .#{$primary-stylename}-cell-content { |
| border-top: none; |
| border-bottom: none; |
| } |
| |
| .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content, |
| .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content { |
| height: $v-table-row-height - 1px; |
| } |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-no-header-style ($primary-stylename: v-table) { |
| .#{$primary-stylename}-header-wrap { |
| display: none; |
| } |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-table) - |
| * |
| * @group table |
| */ |
| @mixin valo-table-borderless-style ($primary-stylename: v-table) { |
| .#{$primary-stylename}-header-wrap, |
| .#{$primary-stylename}-footer-wrap, |
| .#{$primary-stylename}-header-drag, |
| .#{$primary-stylename}-body { |
| border: none; |
| } |
| |
| // TODO copy pasted from the main mixin |
| $background-color: $v-table-background-color or valo-table-background-color(); |
| $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7)); |
| |
| .#{$primary-stylename}-header-wrap { |
| border-bottom: $v-table-border-width solid $border-color; |
| } |
| |
| .#{$primary-stylename}-footer-wrap { |
| border-top: $v-table-border-width solid $border-color; |
| } |
| } |
| |
| |
| @mixin valo-table-spacing-style ( |
| $primary-stylename: v-table, |
| $row-height: $v-table-row-height, |
| $header-font-size: $v-table-header-font-size, |
| $cell-padding-horizontal: $v-table-cell-padding-horizontal |
| ) { |
| |
| $vertical-padding: round(($row-height - $header-font-size)/2); |
| |
| .#{$primary-stylename}-header-wrap, |
| .#{$primary-stylename}-footer-wrap, |
| .#{$primary-stylename}-header-drag { |
| font-size: $header-font-size; |
| } |
| |
| .#{$primary-stylename}-footer-container { |
| padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding; |
| } |
| |
| .#{$primary-stylename}-caption-container, |
| .#{$primary-stylename}-header-drag { |
| padding-top: $vertical-padding; |
| padding-bottom: $vertical-padding - $v-table-border-width; |
| padding-left: $cell-padding-horizontal; |
| padding-right: $cell-padding-horizontal; |
| } |
| |
| .#{$primary-stylename}-caption-container-align-right { |
| padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width); |
| } |
| |
| .#{$primary-stylename}-resizer { |
| height: $row-height; |
| } |
| |
| .#{$primary-stylename}-cell-content { |
| height: $row-height; |
| } |
| |
| .#{$primary-stylename}-cell-wrapper { |
| padding-left: $cell-padding-horizontal; |
| padding-right: $cell-padding-horizontal; |
| |
| > .v-widget { |
| margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2); |
| |
| &.v-label, |
| &.v-checkbox, |
| &.v-select-optiongroup { |
| margin: 0; |
| } |
| &.v-progressbar { |
| margin-left: 0; |
| margin-right: 0; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, |
| .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator { |
| height: $row-height; |
| line-height: $row-height; |
| } |
| |
| .#{$primary-stylename}-header-drag { |
| margin-top: round($row-height/-2); |
| } |
| |
| &.v-treetable { |
| .#{$primary-stylename}-cell-wrapper { |
| padding-left: 0; |
| padding-right: 0; |
| min-height: $v-font-size; |
| } |
| |
| .#{$primary-stylename}-cell-content { |
| padding-left: $cell-padding-horizontal; |
| padding-right: $cell-padding-horizontal; |
| |
| &:first-child { |
| padding-left: $cell-padding-horizontal + $v-table-border-width; |
| } |
| } |
| |
| .#{$primary-stylename}-footer-container { |
| padding-left: $cell-padding-horizontal; |
| padding-right: $cell-padding-horizontal; |
| } |
| } |
| |
| .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content, |
| .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content { |
| height: $row-height - 1px; |
| } |
| } |