amis/packages/amis-ui/scss/components/_table.scss
zhangzhulei f2a38b0c5f
fix: input-table组件 修复静态(static)展示 和禁用(disabled)展示问题 && 支持表格底部按钮配置 (#6208)
* fix: input-table组件 修复静态(static)展示 和禁用(disabled)展示问题 && 支持表格底部按钮配置

* fix: input-table组件 修复静态(static)展示 和禁用(disabled)展示问题 && 支持表格底部按钮配置

* doc: input-table格式化文档

---------

Co-authored-by: zhangzhulei <zhangzhulei@baidu.com>
2023-02-21 12:39:02 +08:00

1070 lines
22 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

.#{$ns}Table {
position: relative;
border-radius: var(--Table-borderRadius);
margin-bottom: var(--gap-md);
.#{$ns}Form-control > & {
margin-bottom: var(--gap-sm);
}
&-fixedLeft,
&-fixedRight {
position: absolute;
background: var(--Table-bg);
z-index: var(--Table-fixed-zIndex);
top: auto;
box-shadow: none;
&--autoFillHeight {
& > table thead {
position: sticky; // 简单实现表头吸顶效果,不考虑 IE 11 不然太麻烦
top: 0;
z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
}
}
}
&-fixedLeft {
// 还是改成默认不显示footable 展示的时候,配置 固定列还没修复
left: 0;
top: -999999px;
&.in {
box-shadow: var(--Table-fixedLeft-boxShadow);
top: auto;
}
& > .#{$ns}Table-table {
> thead > tr > th:last-child,
> tbody > tr > td:last-child {
padding-right: var(--TableCell-paddingX);
}
// > thead > tr > th:last-child {
// border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
// }
}
}
&-fixedRight {
// 还是改成默认不显示footable 展示的时候,配置 固定列还没修复
right: 0;
top: -999999px;
&.in {
box-shadow: var(--Table-fixedRight-boxShadow);
top: auto;
}
& > .#{$ns}Table-table {
> thead > tr > th:first-child,
> tbody > tr > td:first-child {
padding-left: var(--TableCell-paddingX);
}
// > thead > tr > th:first-child {
// border-left: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
// }
}
}
&-fixedTop {
position: absolute;
background: var(--Table-bg);
z-index: -1;
opacity: 0;
&-shadow {
position: absolute;
box-shadow: var(--Table-fixedTop-boxShadow);
z-index: -1;
height: 10px;
margin-top: -10px;
background-color: transparent;
opacity: 0;
}
// box-sizing: content-box;
// padding: var(--gap-base) var(--gap-base) 0 var(--gap-base);
// margin: calc(var(--gap-base) * -1) calc(var(--gap-base) * -1) 0
// calc(var(--gap-base) * -1);
// > * {
// box-sizing: border-box;
// }
&.in,
&.in + .#{$ns}Table-fixedTop-shadow {
position: fixed;
opacity: 1;
z-index: $zindex-affix;
}
> .#{$ns}Table-fixedLeft,
> .#{$ns}Table-fixedRight {
z-index: $zindex-affix + 10;
// box-shadow: none;
background: transparent;
}
&.is-fakeHide {
> .#{$ns}Table-fixedLeft,
> .#{$ns}Table-fixedRight,
> .#{$ns}Table-wrapper {
visibility: hidden;
position: absolute;
}
}
}
&-heading {
background: var(--Table-heading-bg);
padding: calc(
(
var(--Table-heading-height) - var(--Table-fontSize) *
var(--lineHeightBase)
) / 2
)
var(--gap-sm);
}
&--unsaved &-heading {
background: var(--Table--unsaved-heading-bg);
color: var(--Table--unsaved-heading-color);
}
&-wrapper {
overflow: hidden;
}
&-placeholder {
color: var(--text--muted-color);
text-align: center;
height: var(--Table-placeholder-height);
background: transparent !important;
&:hover {
color: var(--text--muted-color);
background: transparent !important;
}
> td {
vertical-align: middle !important;
text-align: center;
}
&-empty-icon.icon {
display: block;
margin: 0 auto;
width: var(--Table-empty-icon-size);
height: var(--Table-empty-icon-size);
}
}
&-searchableForm {
background: var(--Table-searchableForm-backgroundColor);
border-radius: var(--Table-searchableForm-borderRadius);
margin-bottom: 0;
&-footer {
padding: var(--Panel-footerPadding);
clear: both;
}
&-checkbox {
&-inner {
/* 消除checkbox自身的padding top */
padding-top: 0 !important;
}
}
}
&-header {
padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
> * + .#{$ns}Button,
> * + .#{$ns}ButtonGroup,
> * + .#{$ns}ButtonToolbar {
margin-left: var(--Crud-toolbar-gap);
}
}
&-toolbar {
@include clearfix();
display: flex;
padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
flex-wrap: wrap;
.#{$ns}DropDown {
&-menuItem {
height: auto;
.#{$ns}Checkbox {
display: flex;
align-items: center;
}
}
}
}
&-header + &-toolbar {
padding-top: 0;
}
&-contentWrap {
position: relative;
margin-bottom: var(--Table-toolbar-marginY);
}
&-actions {
display: inline-block;
> * {
margin-right: var(--Crud-toolbar-gap);
}
}
&-content {
min-height: 0.01%;
overflow-x: auto;
transform: translateZ(0);
th {
position: relative;
}
}
&-content-colDragLine {
position: absolute;
width: 7px;
top: 0;
bottom: 0;
right: -4px;
cursor: col-resize;
user-select: none;
opacity: 0.5;
z-index: $zindex-top;
&:hover {
background: var(--primary);
}
}
&-table {
width: 100%;
min-width: 100%;
margin-bottom: 0;
font-size: var(--Table-fontSize);
color: var(--Table-color);
background: var(--Table-bg);
border-spacing: 0;
border-collapse: collapse;
border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
& th,
& td {
text-align: left;
}
& th.text-center,
& td.text-center,
& th[colspan],
& td[colspan] {
text-align: center;
}
& th.text-right,
& td.text-right {
text-align: right;
}
& td .#{$ns}SwitchControl {
padding-top: 0;
}
&--withCombine {
> thead > tr > th,
> tbody > tr > td {
&:first-child {
padding-left: var(--TableCell-paddingX) !important;
}
&:last-child {
padding-right: var(--TableCell-paddingX) !important;
}
}
// reset
> tbody > tr {
@if $Table-strip-bg !=transparent {
&.#{$ns}Table-tr--odd {
background: transparent;
}
}
&:hover {
background: transparent;
}
> td {
vertical-align: middle;
}
> td:not(:last-child) {
border-right: var(--Table-borderWidth) solid var(--Table-borderColor);
}
}
}
&--checkOnItemClick {
> tbody > tr {
cursor: pointer;
}
}
> thead > tr {
> th {
background: var(--Table-thead-bg);
padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
text-align: left;
&:first-child {
padding-left: px2rem(12px);
&.#{$ns}Table-checkCell {
padding-left: var(--TableCell--edge-paddingX);
}
}
&:last-child {
padding-right: px2rem(12px);
.#{$ns}Table-content-colDragLine {
// 避免出现横向滚动条
width: 4px;
right: 0;
}
}
&:not(:last-child) {
border-right: var(--Table-thead-borderWidth) solid
var(--Table-thead-borderColor);
}
border-bottom: var(--Table-thead-borderWidth) solid
var(--Table-thead-borderColor);
font-size: var(--Table-thead-fontSize);
color: var(--Table-thead-color);
font-weight: var(--fontWeightNormal);
white-space: nowrap;
// .#{$ns}TableCell--title {
// display: flex;
// align-items: center;
// }
.#{$ns}Remark {
margin-left: var(--gap-xs);
}
.#{$ns}TableCell--title {
min-width: fit-content;
}
}
}
> thead > tr > th:first-child {
border-top-left-radius: 4px;
}
> thead > tr > th:last-child {
border-top-right-radius: 4px;
}
> thead > tr + tr {
border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
}
> thead > tr {
border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
}
> tbody > tr {
position: relative;
& + tr {
border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
> th {
border-top: var(--Table-thead-borderWidth) solid
var(--Table-thead-borderColor);
}
}
> th {
background: var(--Table-thead-bg);
// font-size: var(--Table-thead-fontSize);
color: var(--Table-thead-color);
font-weight: var(--fontWeightNormal);
white-space: nowrap;
border-right: var(--Table-thead-borderWidth) solid
var(--Table-thead-borderColor);
}
> td,
> th {
padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
&:first-child {
padding-left: var(--TableCell--edge-paddingX);
}
&:last-child {
padding-right: var(--TableCell--edge-paddingX);
}
}
@if $Table-strip-bg != transparent {
background: transparent;
&.#{$ns}Table-tr--odd {
background: var(--Table-strip-bg);
}
}
&.#{$ns}Table-tr--hasItemAction:hover {
cursor: pointer;
}
&:hover,
&.is-hovered {
background: var(--Table-onHover-bg);
border-color: var(--Table-onHover-borderColor);
color: var(--Table-onHover-color);
& + tr {
border-color: var(--Table-onHover-borderColor);
}
}
&:active {
background: transparent;
}
&:hover.#{$ns}Table-placeholder {
color: var(--text--muted-color);
}
&.is-checked {
background: var(--Table-onChecked-bg);
border-color: var(--Table-onChecked-borderColor);
color: var(--Table-onChecked-color);
& + tr {
border-color: var(--Table-onChecked-borderColor);
}
}
&.is-moved,
&.is-modified {
background: var(--Table-onModified-bg);
border-color: var(--Table-onModified-borderColor);
color: var(--Table-onModified-color);
& + tr {
border-color: var(--Table-onModified-borderColor);
}
}
&.is-summary {
// font-weight: var(--fontWeightNormal);
}
&.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: var(--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(-18px) * ($i - 1);
}
}
tr.#{$ns}Table-tr--#{$i}th {
.#{$ns}Table-expandBtn {
position: relative;
right: -(px2rem(18px)) * ($i - 1);
}
.#{$ns}Table-expandCell + td {
position: relative;
&::before {
content: '';
position: absolute;
width: px2rem(1px);
top: 0;
bottom: 0;
left: px2rem(-8px) + px2rem(18px) * ($i - 2);
height: auto;
background: var(--Table-tree-borderColor);
}
&::after {
content: '';
position: absolute;
height: px2rem(1px);
top: 50%;
left: px2rem(-8px) + px2rem(18px) * ($i - 2);
width: px2rem(10px);
background: var(--Table-tree-borderColor);
}
padding-left: px2rem(18px) * $i - px2rem(18px);
}
}
tr.#{$ns}Table-tr--#{$i}th.is-expandable {
.#{$ns}Table-expandCell + td {
padding-left: px2rem(18px) * ($i - 1);
}
}
tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
.#{$ns}Table-expandCell + td {
&::before {
height: 50%;
bottom: auto;
}
}
}
}
> thead > tr > th.#{$ns}Table-checkCell,
> tbody > tr > td.#{$ns}Table-checkCell {
width: px2rem(1px);
padding-right: var(--TableCell-paddingX);
white-space: nowrap;
.#{$ns}Checkbox {
margin: 0;
}
}
> tbody > tr > td.#{$ns}Table-checkCell {
border-right: 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;
cursor: move;
> svg {
vertical-align: middle;
top: 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: var(--Table-tree-borderColor);
right: px2rem(7px) + px2rem(-18px) * ($i - 1);
}
}
}
> tbody > tr.is-expanded > td.#{$ns}Table-expandCell {
// position: relative;
&::before {
content: '';
position: absolute;
width: px2rem(1px);
top: 50%;
bottom: 0;
right: px2rem(7px);
height: auto;
background: var(--Table-tree-borderColor);
}
}
> thead > tr > th.#{$ns}TableCell--sortable,
> thead > tr > th.#{$ns}TableCell--searchable,
> thead > tr > th.#{$ns}TableCell--filterable {
> .#{$ns}TableCell--title {
display: inline-block;
}
}
}
&Cell-sortBtn,
&Cell-searchBtn,
&Cell-filterBtn {
display: inline-block;
vertical-align: top;
padding-left: var(--gap-sm);
&:hover {
color: var(--TableCell-searchBtn--onActive-color);
}
}
&Cell-sortBtn {
cursor: pointer;
width: var(--TableCell-sortBtn-width);
height: var(--gap-md);
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--icon-color);
&--up > svg,
&--down > svg,
&--default > svg {
color: inherit;
width: 12px;
height: 12px;
}
&--up,
&--down,
&--default {
display: none;
position: absolute;
z-index: 2;
font-style: normal;
&.is-active {
display: inline-block;
}
}
&--default {
&.is-active {
color: var(--text--muted-color);
&:hover {
color: var(--TableCell-searchBtn--onActive-color);
}
}
}
&--up,
&--down {
&.is-active {
color: var(--TableCell-sortBtn--onActive-color);
}
}
}
&Cell-searchBtn {
cursor: pointer;
color: var(--text--muted-color);
svg.icon {
width: 12px;
height: 12px;
}
&.is-active {
color: var(--TableCell-searchBtn--onActive-color);
}
&.is-opened {
color: var(--Button--default-onActive-border);
}
}
&Cell-searchPopOver {
border: none;
min-width: px2rem(320px);
max-width: px2rem(640px);
.#{$ns}Panel {
margin: 0;
}
}
&Cell-filterBtn {
cursor: pointer;
width: var(--TableCell-filterBtn-width);
color: var(--text--muted-color);
svg.icon {
width: 12px;
height: 12px;
}
&.is-active {
color: var(--TableCell-filterBtn--onActive-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: var(--TableCell-filterPopOver-dropDownItem-height);
line-height: var(--TableCell-filterPopOver-dropDownItem-height);
padding: var(--TableCell-filterPopOver-dropDownItem-padding);
background: var(--white);
margin: 0;
&:hover {
background: var(--light);
color: var(--primary);
}
&.is-selected {
background: var(--light);
color: var(--primary);
}
.#{$ns}Checkbox {
width: 100%;
margin: 0;
}
}
}
}
&-itemActions-wrap {
position: absolute;
width: 100%;
z-index: calc(var(--Table-fixed-zIndex) + 1);
left: 0;
top: 0;
min-height: 30px;
pointer-events: none;
box-shadow: var(--Table-onHover-boxShadow);
}
&-itemActions {
pointer-events: all;
position: absolute;
// background: var(--Table-onHover-bg);
background: linear-gradient(
90deg,
rgba(var(--Table-onHover-bg-rgb), 0) 0%,
rgba(var(--Table-onHover-bg-rgb), 1) 20%,
rgba(var(--Table-onHover-bg-rgb), 1) 100%
);
top: var(--Table-borderWidth);
bottom: 0;
right: 0;
padding-left: px2rem(80px);
padding-right: var(--TableCell-paddingX);
display: flex;
align-items: center;
a {
cursor: pointer;
padding: var(--gap-xs) var(--gap-sm);
color: var(--link-color);
text-decoration: var(--link-decoration);
&:hover {
color: var(--link-onHover-color);
text-decoration: var(--link-onHover-decoration);
}
&.is-disabled {
pointer-events: none;
opacity: var(--Button-onDisabled-opacity);
color: var(--text--muted-color);
}
}
}
&-dragTip {
color: var(--text--loud-color);
clear: both;
margin-top: var(--gap-xs);
width: 100%;
color: var(--info);
}
&-foot {
background: var(--Table-thead-bg);
}
&-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: var(--TableCell-paddingY) var(--TableCell-paddingX);
}
> tbody > tr > td {
word-break: break-all;
padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
}
> tbody > tr:not(:first-child) {
border-top: var(--Table-borderWidth) solid
var(--Table-tbody-borderTopColor);
}
}
&-expandBtn {
position: relative;
z-index: 1;
color: var(--Table-expandBtn-color);
display: inline-flex;
justify-content: center;
align-items: center;
width: px2rem(14px);
line-height: 1;
height: 16px;
> svg {
display: inline-block;
text-align: center;
cursor: pointer;
transition: transform ease-in-out var(--animation-duration),
top ease-in-out var(--animation-duration);
position: relative;
transform-origin: 50% 50%;
width: px2rem(10px);
height: px2rem(10px);
top: 0;
transform: rotate(90deg);
}
&.is-active > svg {
transform: rotate(-90deg);
}
&:hover {
text-decoration: none;
}
}
&-dragBtn {
margin-right: var(--gap-xs);
display: inline-block;
visibility: hidden;
cursor: move;
color: var(--icon-color);
&:hover {
text-decoration: none;
color: var(--icon-onHover-color);
}
> svg {
vertical-align: -2px;
}
}
&-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;
}
.fake-hide {
visibility: hidden;
position: absolute;
}
&-badge {
position: absolute;
top: 0;
left: 0;
}
&--autoFillHeight {
margin-bottom: 0;
> .#{$ns}Table-contentWrap {
> .#{$ns}Table-content table {
border-top: none; // 不然会导致拖动时顶部露出内容
}
> .#{$ns}Table-content table thead {
position: sticky; // 简单实现表头吸顶效果,不考虑 IE 11 不然太麻烦
top: 0;
z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
}
}
> .#{$ns}Table-fixedTop {
display: none;
}
> .#{$ns}Table-footToolbar {
margin-bottom: 0;
}
}
&-SFToggler {
color: var(--text-color);
font-size: var(--Button--sm-fontSize);
margin-left: var(--gap-sm);
display: inline-flex;
cursor: pointer;
&-arrow {
width: var(--gap-md);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transform: rotate(90deg);
> svg {
transition: transform var(--animation-duration);
display: inline-block;
color: var(--Form-select-caret-iconColor);
width: 10px;
height: 10px;
top: 0;
}
}
&.is-expanded {
color: var(--Tabs-onActive-color);
.#{$ns}Table-SFToggler-arrow > svg {
transform: rotate(180deg);
}
}
}
}
.#{$ns}InputTable {
.#{$ns}Field--quickEditable svg {
color: var(--primary);
&:hover {
color: var(--primary-onHover);
}
&:active {
color: var(--primary-onActive);
}
}
}
.#{$ns}InputTable {
.#{$ns}Field--quickEditable svg {
color: var(--primary);
&:hover {
color: var(--primary-onHover);
}
&:active {
color: var(--primary-onActive);
}
}
}
.#{$ns}InputTable-toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.#{$ns}InputTable-pager {
margin-left: auto;
}
.#{$ns}OperationField {
margin: px2rem(-3px);
> .#{$ns}Button,
> .#{$ns}Button--disabled-wrap > .#{$ns}Button {
margin: px2rem(3px);
}
> .#{$ns}Button--disabled-wrap > .#{$ns}Button--link {
padding: 0;
}
> .#{$ns}Button--link {
padding: 0;
margin-right: px2rem(10px);
}
}