.#{$ns}Table { position: relative; background: $Table-bg; border: $Table-borderWidth solid $Table-borderColor; border-radius: $Table-borderRadius; margin-bottom: $gap-md; .#{$ns}Form-control > & { margin-bottom: $gap-sm; } &-fixedLeft, &-fixedRight { position: absolute; background: $Table-bg; z-index: 5; top: -999999px; &.in { top: auto; } } &-fixedLeft { box-shadow: $Table-fixedLeft-boxShadow; left: 0; } &-fixedRight { box-shadow: $Table-fixedRight-boxShadow; right: 0; .#{$ns}Table-table > thead > tr > th:first-child, .#{$ns}Table-table > tbody > tr > td:first-child { padding-left: $TableCell-paddingX; } } &-fixedTop { position: absolute; background: $Table-bg; z-index: -1; opacity: 0; box-shadow: $Table-fixedTop-boxShadow; &.in { position: fixed; opacity: 1; z-index: $zindex-affix; } > .#{$ns}Table-fixedLeft, > .#{$ns}Table-fixedRight { z-index: $zindex-affix + 10; // box-shadow: none; background: transparent; border-top: $Table-borderWidth solid $Table-borderColor; > table { margin-bottom: px2rem(5px); } } > .#{$ns}Table-heading { border-bottom: none; } > .#{$ns}Table-wrapper { border-top: $Table-borderWidth solid $Table-borderColor; } } &-heading { background: $Table-heading-bg; border-bottom: $Table-borderWidth solid $Table-borderColor; padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 $Table-toolbar-paddingX; } &--unsaved &-heading { background: $Table--unsaved-heading-bg; color: $Table--unsaved-heading-color; } &-wrapper { overflow: hidden; } &-placeholder { color: $text--muted-color; text-align: center; height: $Table-placeholder-height; background-color: transparent !important; &:hover { color: $text--muted-color; background-color: transparent !important; } > td { vertical-align: middle !important; text-align: center; } } &-header { padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; > * + .#{$ns}Button, > * + .#{$ns}ButtonGroup, > * + .#{$ns}ButtonToolbar { margin-left: $Crud-toolbar-gap; } } &-toolbar { @include clearfix(); display: flex; padding: $Table-toolbar-paddingY $Table-toolbar-paddingX; .#{$ns}DropDown { &-menuItem { height: auto; .#{$ns}Checkbox { display: flex; align-items: center; } } } } &-header + &-toolbar { padding-top: 0; } &-contentWrap { position: relative; } &-header + &-contentWrap, &-toolbar + &-contentWrap { border-top: $Table-borderWidth solid $Table-borderColor; } &-footToolbar { border-top: $Table-borderWidth solid $Table-borderColor; } &-actions { display: inline-block; > * { margin-right: $Crud-toolbar-gap; } } &-content { min-height: 0.01%; overflow-x: auto; transform: translateZ(0); } &-table { width: 100%; max-width: 100%; margin-bottom: 0; font-size: $Table-fontSize; color: $Table-color; background-color: $Table-bg; &--withCombine { > thead > tr > th, > tbody > tr > td { &:first-child { padding-left: $TableCell-paddingX !important; } &:last-child { padding-right: $TableCell-paddingX !important; } } // reset > tbody > tr { @if $Table-strip-bg !=transparent { &.#{$ns}Table-tr--odd { background-color: transparent; } } &:hover { background-color: transparent; } > td { vertical-align: middle; } > td:not(:last-child) { border-right: $Table-borderWidth solid $Table-borderColor; } } } > thead > tr { background-color: $Table-thead-bg; > th { &[colspan] { text-align: center; } padding: $TableCell-paddingY $TableCell-paddingX; &:first-child { padding-left: $TableCell--edge-paddingX; } &:last-child { padding-right: $TableCell--edge-paddingX; } &:not(:last-child) { border-right: $Table-thead-borderWidth solid $Table-thead-borderColor; } font-size: $Table-thead-fontSize; color: $Table-thead-color; font-weight: $fontWeightNormal; white-space: nowrap; .#{$ns}TableCell--title { display: flex; align-items: center; } .#{$ns}Remark { margin-left: $gap-xs; } } } > thead > tr + tr { border-top: $Table-borderWidth solid $Table-borderColor; } > tbody > tr { border-top: $Table-borderWidth solid $Table-borderColor; > td { padding: $TableCell-paddingY $TableCell-paddingX; vertical-align: top; &:first-child { padding-left: $TableCell--edge-paddingX; } &:last-child { padding-right: $TableCell--edge-paddingX; } } @if $Table-strip-bg !=transparent { background-color: transparent; &.#{$ns}Table-tr--odd { background-color: $Table-strip-bg; } } &:hover, &.is-hovered { background-color: $Table-onHover-bg; border-color: $Table-onHover-borderColor; color: $Table-onHover-color; & + tr { border-color: $Table-onHover-borderColor; } } &.is-checked { background-color: $Table-onChecked-bg; border-color: $Table-onChecked-borderColor; color: $Table-onChecked-color; & + tr { border-color: $Table-onChecked-borderColor; } } &.is-moved, &.is-modified { background-color: $Table-onModified-bg; border-color: $Table-onModified-borderColor; color: $Table-onModified-color; & + tr { border-color: $Table-onModified-borderColor; } } &.bg-light { @include color-variant($light, 2%, 3%, 3%, 5%); color: $text-color; } &.bg-dark { @include color-variant($dark, 5%, 10%, 5%, 10%); @include font-variant($dark); } &.bg-black { @include color-variant($black, 5%, 10%, 5%, 10%); @include font-variant($black); } &.bg-primary { @include color-variant($primary, 5%, 10%, 5%, 10%); @include font-variant($primary); } &.bg-success { @include color-variant($success, 5%, 10%, 5%, 10%); @include font-variant($success); } &.bg-info { @include color-variant($info, 5%, 10%, 5%, 10%); @include font-variant($info); } &.bg-warning { @include color-variant($warning, 5%, 10%, 5%, 10%); @include font-variant($warning); } &.bg-danger { @include color-variant($danger, 5%, 10%, 5%, 10%); @include font-variant($danger); } &.is-dragging { opacity: $Table-onDragging-opacity; } } @for $i from 2 through 10 { tr.#{$ns}Table-tr--#{$i}th.is-expanded { .#{$ns}Table-expandCell:before { right: px2rem(7px) + px2rem(-20px) * ($i - 1); } } tr.#{$ns}Table-tr--#{$i}th { .#{$ns}Table-expandBtn { position: relative; right: -(px2rem(20px)) * ($i - 1); } .#{$ns}Table-expandCell + td { position: relative; &::before { content: ''; position: absolute; width: px2rem(1px); top: 0; bottom: 0; left: px2rem(-8px) + px2rem(20px) * ($i - 2); height: auto; background-color: $Table-tree-borderColor; } &::after { content: ''; position: absolute; height: px2rem(1px); top: px2rem(18px); left: px2rem(-8px) + px2rem(20px) * ($i - 2); width: px2rem(10px); background-color: $Table-tree-borderColor; } padding-left: px2rem(20px) * $i - px2rem(20px); } } tr.#{$ns}Table-tr--#{$i}th.is-expandable { .#{$ns}Table-expandCell + td { padding-left: px2rem(20px) * ($i - 1); } } tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) { .#{$ns}Table-expandCell + td { &::before { height: px2rem(18px); bottom: auto; } } } } > thead > tr > th.#{$ns}Table-checkCell, > tbody > tr > td.#{$ns}Table-checkCell { border-right: 0; width: px2rem(1px); .#{$ns}Checkbox { margin: 0; } } > thead > tr > th.#{$ns}Table-expandCell, > tbody > tr > td.#{$ns}Table-expandCell { border-right: 0; width: px2rem(1px); padding-right: 0; } > thead > tr > th.#{$ns}Table-dragCell, > tbody > tr > td.#{$ns}Table-dragCell { border-right: 0; width: px2rem(1px); padding-right: 0; } > tbody > tr > td.#{$ns}Table-expandCell { position: relative; @for $i from 1 through 7 { .#{$ns}Table-divider-#{$i} { position: absolute; width: px2rem(1px); top: 0; bottom: 0; height: 100%; background-color: $Table-tree-borderColor; right: px2rem(7px) + px2rem(-20px) * ($i - 1); } } } > tbody > tr.is-expanded > td.#{$ns}Table-expandCell { // position: relative; &::before { content: ''; position: absolute; width: px2rem(1px); top: px2rem(28px); bottom: 0; right: px2rem(7px); height: auto; background-color: $Table-tree-borderColor; } } > thead > tr > th.#{$ns}TableCell--sortable { padding-right: $TableCell-paddingX + $TableCell-sortBtn-width; position: relative; } > thead > tr > th.#{$ns}TableCell--searchable { padding-right: $TableCell-paddingX + $TableCell-searchBtn-width; position: relative; } > thead > tr > th.#{$ns}TableCell--filterable { padding-right: $TableCell-paddingX + $TableCell-filterBtn-width; position: relative; } } &Cell-sortBtn { cursor: pointer; width: $TableCell-sortBtn-width; position: absolute; right: $TableCell-paddingX - $TableCell-sortBtn-width / 2; top: 50%; transform: translateY(-50%); color: $Table-thead-iconColor; &--up:before { display: inline-block; content: $TableCell-sortBtn--up-icon; font-family: $TableCell-sortBtn--up-iconVendor; } &--down:before { display: inline-block; content: $TableCell-sortBtn--down-icon; font-family: $TableCell-sortBtn--down-iconVendor; } &--default:before { display: inline-block; content: $TableCell-sortBtn--default-icon; font-family: $TableCell-sortBtn--default-iconVendor; } &--up, &--down { display: none; position: absolute; z-index: 2; font-style: normal; &.is-active { display: inline-block; } } &--default { font-style: normal; z-index: 1; display: inline-block; opacity: $TableCell-sortBtn--default-opacity; &.is-active { opacity: $TableCell-sortBtn--default-onActive-opacity; } } } &Cell-searchBtn { cursor: pointer; width: $TableCell-searchBtn-width; position: absolute; right: $TableCell-paddingX - $TableCell-searchBtn-width / 2; top: 50%; transform: translateY(-50%); color: $text--muted-color; &:hover { color: $text-color; } } &Cell-searchPopOver { border: none; min-width: px2rem(320px); max-width: px2rem(640px); .#{$ns}Panel { margin: 0; } } &Cell-filterBtn { cursor: pointer; width: $TableCell-filterBtn-width; position: absolute; right: $TableCell-paddingX - $TableCell-filterBtn-width / 2; top: 50%; transform: translateY(-50%); color: $text--muted-color; &:hover { color: $text-color; } .#{$ns}Remark { display: inline; } } &Cell-filterPopOver { border: none; width: px2rem(160px); .#{$ns}DropDown-menu { margin: 0; padding: 0; border-radius: 0; .#{$ns}DropDown-divider { height: $TableCell-filterPopOver-dropDownItem-height; line-height: $TableCell-filterPopOver-dropDownItem-height; padding: $TableCell-filterPopOver-dropDownItem-padding; background-color: $white; margin: 0; &:hover { background-color: $light; color: $primary; } &.is-selected { background-color: $light; color: $primary; } .#{$ns}Checkbox { width: 100%; margin: 0; } } } } &-itemActions-wrap { position: absolute; width: 100%; left: 0; top: 0; min-height: 30px; pointer-events: none; box-shadow: $Table-onHover-boxShadow; } &-itemActions { pointer-events: all; position: absolute; // background: $Table-onHover-bg; background: linear-gradient( 90deg, rgba($Table-onHover-bg, 0) 0%, rgba($Table-onHover-bg, 1) 20%, rgba($Table-onHover-bg, 1) 100% ); top: $Table-borderWidth; bottom: 0; right: 0; padding-left: px2rem(50px); padding-right: $TableCell-paddingX; display: flex; align-items: center; a { cursor: pointer; padding: $gap-xs $gap-sm; color: $link-color; text-decoration: $link-decoration; &:hover { color: $link-onHover-color; text-decoration: $link-onHover-decoration; } &.is-disabled { pointer-events: none; opacity: $Button-onDisabled-opacity; color: $text--muted-color; } } } &-dragTip { color: $text--loud-color; clear: both; margin-top: $gap-xs; } &-footTable { position: relative; width: 100%; border-spacing: 0; border-collapse: collapse; margin-bottom: 0; background: transparent; > tbody > tr > th { width: px2rem(120px); text-align: right; padding: $TableCell-paddingY $TableCell-paddingX; } > tbody > tr > td { word-break: break-all; padding: $TableCell-paddingY $TableCell-paddingX; } > tbody > tr:not(:first-child) { border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%); } } &-expandBtn { position: relative; z-index: 1; color: $Table-expandBtn-color; display: inline-flex; justify-content: center; align-items: center; width: px2rem(14px); line-height: 1; height: 16px; > i { display: inline-block; text-align: center; cursor: pointer; font-style: normal; transition: transform ease-in-out 0.2s, top ease-in-out 0.2s; position: relative; left: 1px; transform-origin: 50% 50%; &:before { line-height: 1; font-size: $Table-expandBtn-fontSize; font-family: $Table-expandBtn-vendor; content: $Table-expandBtn-icon; } } &.is-active > i { transform: rotate(90deg); } } &-dragBtn { margin-right: $gap-xs; display: inline-block; visibility: hidden; cursor: move; } &-table > tbody > tr:hover .#{$ns}Table-dragBtn, &-table > tbody > tr.is-dragging .#{$ns}Table-dragBtn, &-table > tbody > tr.is-drop-allowed .#{$ns}Table-dragBtn { visibility: visible; } } .#{$ns}OperationField { margin: px2rem(-3px); > .#{$ns}Button, > .#{$ns}Button--disabled-wrap > .#{$ns}Button { margin: px2rem(3px); } }