123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827 |
- /**
- *
- * @group table
- */
- $v-table-border-width: first-number($v-border) !default;
-
- /**
- *
- * @group table
- */
- $v-table-row-height: $v-unit-size !default;
- $v-table-body-row-height: round($v-table-row-height + $v-table-border-width) !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);
-
- // Hide row focus outline
- overflow: hidden;
- }
-
- .#{$primary-stylename}-header table,
- .#{$primary-stylename}-footer table,
- .#{$primary-stylename}-table {
- @include box-shadow(0 0 0 $v-table-border-width $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;
- box-sizing: border-box;
- }
-
- .#{$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-body-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;
- 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;
- overflow-anchor: none; /* In Chrome 56+ */
- @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;
- box-sizing: border-box;
- }
-
- .#{$primary-stylename}-table tr:first-child > td {
- height: $v-table-row-height;
- border-top: none;
- }
-
- .#{$primary-stylename}-row {
- background-color: $background-color;
- cursor: pointer;
- }
-
- .#{$primary-stylename}-row-odd {
- $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%);
- background-color: scale-color($background-color, $lightness: $bg-lightness);
- cursor: pointer;
- }
-
- .#{$primary-stylename}-body-noselection .#{$primary-stylename}-row,
- .#{$primary-stylename}-body-noselection .#{$primary-stylename}-row-odd {
- cursor: default;
- }
-
- .#{$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 !important;
- }
-
- .#{$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($shadow: null);
- position: absolute;
- z-index: 2;
- top: 0;
- right: 0;
- width: round($v-unit-size/2);
- height: round($v-unit-size/2);
- line-height: round($v-unit-size/2);
- padding: 0;
- border-top-width: 0;
- border-right-width: 0;
- border-radius: 0 0 0 $v-border-radius;
- cursor: pointer;
- text-align: center;
-
- @include opacity(0);
- @if $v-animations-enabled {
- @include transition(opacity 200ms 2s);
- }
-
- &:after {
- content: "";
- position: absolute;
- border: none;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
- &:active:after {
- @include valo-button-active-style;
- }
- &:before {
- @include valo-table-column-selector-icon-style;
- }
- }
-
- .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector {
- @include opacity(1);
- @include transition-delay(200ms);
- }
-
- .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-disabled {
- @include opacity($v-disabled-opacity);
- }
- }
- .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 {
- // Show drag focus outline
- overflow: visible;
- }
-
- .#{$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;
- }
-
- .#{$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-body-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-body-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: ThemeIcons;
- }
-
- /**
- *
- *
- *
- * @group table
- */
- @mixin valo-table-sort-desc-icon-style {
- content: '\f0dd';
- font-family: ThemeIcons;
- }
-
- /**
- *
- *
- *
- * @group table
- */
- @mixin valo-table-column-selector-icon-style {
- font-family: ThemeIcons;
- content: "\f013";
- }
-
- /**
- *
- *
- *
- * @group table
- */
- @mixin valo-table-column-visible-icon-style {
- content: "\f00c";
- font-family: ThemeIcons;
- }
-
-
-
-
- /**
- *
- *
- * @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-body-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;
- }
- }
|