821 lines
15 KiB
SCSS
821 lines
15 KiB
SCSS
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
|
||
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
|
||
@import "../node_modules/bee-loading/src/Loading";
|
||
|
||
$text-color: #666;
|
||
$font-size-base: 12px;
|
||
$line-height: 1.5;
|
||
// 主题定制border：
|
||
$table-border-color: unquote("rgb(#{$table-border-color-base})");
|
||
// $table-head-background-color: #f7f7f7;
|
||
// $table-head-text-color: #666;
|
||
$vertical-padding: 12px;
|
||
$horizontal-padding: 8px;
|
||
// $table-border-color: #e9e9e9;
|
||
|
||
$table-hover-color: #E7F2FC;
|
||
$table-move-in-color: $bg-color-base;
|
||
$checkbox-height:16px;
|
||
.u-table {
|
||
font-size: $font-size-base;
|
||
color: $text-color;
|
||
// transition: opacity 0.3s ease;
|
||
position: relative;
|
||
line-height: $line-height;
|
||
overflow: hidden;
|
||
&-body{
|
||
// overflow: hidden!important;
|
||
position: relative;
|
||
}
|
||
&-hiden-drag{
|
||
position: relative;
|
||
&-li{
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
// height: 10px;//这个高度先注释掉了，加上后，在火狐浏览器上会站位置。滚动条拉到最右边有错行
|
||
}
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
text-align: left;
|
||
}
|
||
|
||
th {
|
||
// background: $table-head-background-color;
|
||
font-weight: bold;
|
||
// transition: background 0.3s ease;
|
||
&[colspan] {
|
||
text-align: center;
|
||
}
|
||
::last-child{
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
td {
|
||
border-bottom: 1px solid $table-border-color;
|
||
a{
|
||
color: $brand-primary;
|
||
&:hover{
|
||
color: $brand-primary-hover;
|
||
}
|
||
&:active{
|
||
color: $brand-primary-active;
|
||
}
|
||
}
|
||
}
|
||
|
||
tr {
|
||
// transition: all 0.3s ease;
|
||
&:hover {
|
||
// background: $hover-bg-color-base;
|
||
td {
|
||
.uf-eye{
|
||
visibility: visible !important;
|
||
}
|
||
}
|
||
}
|
||
tr a{
|
||
color: $brand-primary;
|
||
&:hover{
|
||
color: $brand-primary-hover;
|
||
}
|
||
&:active{
|
||
color: $brand-primary-active;
|
||
}
|
||
}
|
||
}
|
||
tr.tr-row-hover {
|
||
background: $hover-bg-color-base;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: $vertical-padding $horizontal-padding;
|
||
word-break: break-all;
|
||
}
|
||
tr {
|
||
|
||
&.filterable{
|
||
th{
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
.filterContext{
|
||
height: 35px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&-row-hover {
|
||
background:unquote("rgb(#{$table-row-hover-bg-color})");
|
||
}
|
||
|
||
&-scroll {
|
||
overflow: auto;
|
||
}
|
||
&-bordered {
|
||
table {
|
||
border: 1px solid $table-border-color;
|
||
box-sizing: border-box;
|
||
table-layout: fixed;
|
||
// width:auto;
|
||
}
|
||
th {
|
||
border-bottom: 1px solid $table-border-color;
|
||
box-sizing: border-box;
|
||
}
|
||
th,
|
||
td {
|
||
border-right: 1px solid $table-border-color;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
&-drag-border{
|
||
tr {
|
||
th.th-can-not-drag{ //拖拽tag影响了表格整体宽度
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
&-header {
|
||
overflow: hidden;
|
||
background: $table-head-background-color;
|
||
color: $table-head-text-color;
|
||
}
|
||
|
||
&.fixed-height td {
|
||
padding: 0px 8px;
|
||
}
|
||
|
||
&-fixed-header &-body {
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
&-fixed-left &-body-inner {
|
||
margin-right: -20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
&-fixed-header &-fixed-left &-body-inner {
|
||
padding-right: 0px;
|
||
}
|
||
|
||
&-fixed-header &-body-inner {
|
||
height: 100%;
|
||
overflow: scroll;
|
||
}
|
||
|
||
|
||
&-fixed-header &-scroll &-header {
|
||
overflow-x: scroll;
|
||
padding-bottom: 20px;
|
||
margin-bottom: -20px;
|
||
overflow-y: scroll;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&-title {
|
||
padding: $vertical-padding $horizontal-padding;
|
||
border-top: 1px solid $table-border-color;
|
||
}
|
||
|
||
&-content {
|
||
position: relative;
|
||
}
|
||
|
||
&-footer {
|
||
padding: $vertical-padding $horizontal-padding;
|
||
border-bottom: 1px solid $table-border-color;
|
||
.u-table-scroll{
|
||
overflow-x: hidden;
|
||
}
|
||
}
|
||
&-footer & {
|
||
margin: (-$vertical-padding) (-$horizontal-padding);
|
||
}
|
||
|
||
&-placeholder {
|
||
padding: $vertical-padding 8px;
|
||
background: #fff;
|
||
border-bottom: 1px solid $table-border-color;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
&-expand-icon-col {
|
||
width: 10px;
|
||
}
|
||
&-row,
|
||
&-expanded-row {
|
||
&-expand-icon {
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
margin-right: 0px;
|
||
width: 16px;
|
||
height: 16px;
|
||
text-align: center;
|
||
line-height: 16px;
|
||
border: 1px solid $table-border-color;
|
||
user-select: none;
|
||
background: #fff;
|
||
margin-right: 10px;
|
||
}
|
||
&-spaced {
|
||
visibility: hidden;
|
||
}
|
||
&-spaced:after {
|
||
content: ".";
|
||
}
|
||
|
||
&-expanded:after {
|
||
content: "-";
|
||
}
|
||
|
||
&-collapsed:after {
|
||
content: "+";
|
||
}
|
||
}
|
||
&-row{
|
||
&.selected{
|
||
background: $hover-bg-color-base;
|
||
}
|
||
}
|
||
tr.u-table-expanded-row {
|
||
background: #f7f7f7;
|
||
&:hover {
|
||
background: #f7f7f7;
|
||
}
|
||
.u-table {
|
||
// padding: 0 40px 0 20px;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
&-column-hidden {
|
||
display: none;
|
||
}
|
||
&-prev-columns-page,
|
||
&-next-columns-page {
|
||
cursor: pointer;
|
||
color: #666;
|
||
z-index: 1;
|
||
&:hover {
|
||
color: #2db7f5;
|
||
}
|
||
&-disabled {
|
||
cursor: not-allowed;
|
||
color: #999;
|
||
&:hover {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
&-prev-columns-page {
|
||
margin-right: 8px;
|
||
&:before {
|
||
content: "<";
|
||
}
|
||
}
|
||
&-next-columns-page {
|
||
float: right;
|
||
&:before {
|
||
content: ">";
|
||
}
|
||
}
|
||
|
||
&-fixed-left,
|
||
&-fixed-right {
|
||
position: absolute;
|
||
top: 0;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
table {
|
||
width: auto;
|
||
background: #fff;
|
||
}
|
||
}
|
||
|
||
&-fixed-left {
|
||
left: 0;
|
||
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
|
||
&-body-inner {
|
||
margin-right: -20px;
|
||
padding-right: 20px;
|
||
}
|
||
&-fixed-header & &-body-inner {
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
&-fixed-right {
|
||
right: 0;
|
||
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
|
||
|
||
// hide expand row content in right fixed Table
|
||
// https://github.com/ant-design/ant-design/issues/1898
|
||
&-expanded-row {
|
||
color: transparent;
|
||
pointer-events: none;
|
||
}
|
||
|
||
}
|
||
|
||
&-scroll-position-left &-fixed-left {
|
||
box-shadow: none;
|
||
}
|
||
|
||
&-scroll-position-right &-fixed-right {
|
||
box-shadow: none;
|
||
}
|
||
|
||
&-thead{
|
||
.filter-text,.filter-dropdown,.filter-date {
|
||
font-weight: normal;
|
||
}
|
||
.filter-wrap{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.filter-btns{
|
||
min-width: 58px;
|
||
}
|
||
}
|
||
th{
|
||
background: $table-head-background-color;
|
||
color: $table-head-text-color;
|
||
background-clip:padding-box;
|
||
//禁止选中文字
|
||
-moz-user-select: -moz-none;
|
||
-khtml-user-select: none;
|
||
-webkit-user-select: none;
|
||
/*
|
||
Introduced in IE 10.
|
||
*/
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
.bee-table-column-sorter {
|
||
position: relative;
|
||
margin-left: 4px;
|
||
height: 1em;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
display: inline-block;
|
||
|
||
& > .bee-table-column-sorter-down,
|
||
& > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
|
||
line-height: 6px;
|
||
display: block;
|
||
width: 34px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
}
|
||
|
||
.bee-table-column-sorter-down.on .uf-triangle-down,
|
||
.bee-table-column-sorter-down.on .uf-triangle-up,
|
||
.bee-table-column-sorter-up.on .uf-triangle-down,
|
||
.bee-table-column-sorter-up.on .uf-triangle-up {
|
||
color: #108ee9;
|
||
}
|
||
.bee-table-column-sorter .uf-triangle-down,
|
||
.bee-table-column-sorter .uf-triangle-up {
|
||
-webkit-filter: none;
|
||
filter: none;
|
||
font-size: 12px;
|
||
}
|
||
.bee-table-column-sorter .uf-triangle-down,
|
||
.bee-table-column-sorter .uf-triangle-up {
|
||
display: inline-block;
|
||
padding: 0;
|
||
font-size: 12px;
|
||
font-size: 8px\9;
|
||
-webkit-transform: scale(0.66666667) rotate(0deg);
|
||
-ms-transform: scale(0.66666667) rotate(0deg);
|
||
transform: scale(0.66666667) rotate(0deg);
|
||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||
zoom: 1;
|
||
line-height: 4px;
|
||
height: 4px;
|
||
color: #999;
|
||
// -webkit-transition: all 0.3s;
|
||
// transition: all 0.3s;
|
||
}
|
||
&:hover{
|
||
.bee-table-column-sorter {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
.th-drag{
|
||
cursor: move;
|
||
}
|
||
.th-drag:hover{
|
||
background: $hover-bg-color-base;
|
||
}
|
||
//为了区分是拖拽宽度还是交换列，先注释上面了
|
||
// .th-drag:hover{
|
||
// background:#ccc;
|
||
// }
|
||
.th-drag-hover{
|
||
background: #ccc;
|
||
}
|
||
&-th{
|
||
position: relative;
|
||
|
||
&-drag-gap{
|
||
height: 100%;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: 0;
|
||
// background:transparent;
|
||
// width: 1px;
|
||
// background:#ccc;
|
||
width: 20px;
|
||
|
||
box-sizing: border-box;
|
||
z-index: 1;
|
||
|
||
.online{
|
||
height: 100%;
|
||
width: 1px;
|
||
background:transparent;//兼容火狐浏览器，如果table设置border，
|
||
margin: 0 auto;
|
||
}
|
||
.online-hover{
|
||
background:#000000;
|
||
}
|
||
|
||
}
|
||
&-drag-gap:hover{
|
||
cursor: col-resize;
|
||
.online{
|
||
background: #000000
|
||
}
|
||
}
|
||
}
|
||
&-th:last-child {
|
||
&-drag-gap{
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
&-filter-column{
|
||
|
||
&-pop-cont{
|
||
margin: 10px;
|
||
margin-top: 0px;
|
||
height: 300px;
|
||
overflow-y: scroll;
|
||
}
|
||
&-clear-setting{
|
||
border-bottom: 1px solid #ccc;
|
||
cursor: pointer;
|
||
}
|
||
&-cont{
|
||
position: relative;
|
||
}
|
||
&-filter-icon{
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 18px;
|
||
width: 22px;
|
||
height: 25px;
|
||
line-height: 25px;
|
||
z-index: 2;
|
||
background: #f7f7f7;
|
||
&i.uf{
|
||
padding: 0px;
|
||
}
|
||
}
|
||
&-pop-cont-item{
|
||
margin-top: 10px;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
}
|
||
&-pop-cont-item>span{
|
||
margin-left: 5px;
|
||
width: 100px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
&-pop .u-modal-dialog{
|
||
border: 1px solid #ccc;
|
||
background: #fff;
|
||
}
|
||
}
|
||
//拖拽宽度代码
|
||
&-row-fixed-columns-in-body{
|
||
// visibility: hidden;
|
||
display:none;
|
||
pointer-events: none;
|
||
}
|
||
//固定列含有checkbox 样式复写
|
||
.u-checkbox {
|
||
height: $checkbox-height;
|
||
line-height: $checkbox-height;
|
||
}
|
||
}
|
||
.u-table:focus{
|
||
outline: none;
|
||
// border-color: #9ecaed;
|
||
// box-shadow: 0 0 10px #9ecaed;
|
||
box-shadow: 0 0 0;
|
||
}
|
||
|
||
.u-table-bordered {
|
||
.u-table-drag-gap{
|
||
background:#e9e9e9;
|
||
}
|
||
}
|
||
.u-table.bordered {
|
||
table {
|
||
border-collapse: collapse;
|
||
}
|
||
th,
|
||
td {
|
||
border: 1px solid $table-border-color;
|
||
}
|
||
}
|
||
|
||
.move-enter,
|
||
.move-appear {
|
||
opacity: 0;
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
animation-duration: 2.5s;
|
||
animation-fill-mode: both;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.move-leave {
|
||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||
animation-duration: 0.5s;
|
||
animation-fill-mode: both;
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.move-enter.move-enter-active,
|
||
.move-appear.move-enter-active {
|
||
animation-name: moveLeftIn;
|
||
animation-play-state: running;
|
||
}
|
||
|
||
.move-leave.move-leave-active {
|
||
animation-name: moveRightOut;
|
||
animation-play-state: running;
|
||
}
|
||
|
||
@keyframes moveLeftIn {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(30px);
|
||
opacity: 0;
|
||
background: $table-move-in-color;
|
||
}
|
||
20% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
80% {
|
||
background: $table-move-in-color;
|
||
}
|
||
100% {
|
||
background: transparent;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes moveRightOut {
|
||
0% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform-origin: 0 0;
|
||
transform: translateX(-30px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.formItem-style {
|
||
height: unset;
|
||
min-height: unset;
|
||
padding: 0;
|
||
}
|
||
.errMessage-style {
|
||
display: none;
|
||
border: none;
|
||
/* margin-top: 5px; */
|
||
/* margin-bottom: 5px; */
|
||
background: transparent;
|
||
color: #f22c1d;
|
||
/* padding-left: 12px; */
|
||
/* padding-right: 12px; */
|
||
margin: 0;
|
||
position: absolute;
|
||
padding: 0;
|
||
top: 3px;
|
||
right: 0;
|
||
}
|
||
|
||
.editable-cell {
|
||
position: relative;
|
||
}
|
||
|
||
.editable-cell-input-wrapper,
|
||
.editable-cell-text-wrapper {
|
||
padding-right: 24px;
|
||
}
|
||
.editable-cell-input-wrapper {
|
||
.u-form-item.formItem-style .u-label{
|
||
display: none;
|
||
}
|
||
.u-input-group .u-form-control{
|
||
height: 26px;
|
||
}
|
||
}
|
||
|
||
.editable-cell-text-wrapper {
|
||
padding: 5px 24px 5px 5px;
|
||
height: 30px;
|
||
}
|
||
|
||
.editable-cell-icon,
|
||
.editable-cell-icon-check {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.editable-cell-icon {
|
||
line-height: 28px;
|
||
display: none;
|
||
}
|
||
|
||
.editable-cell-icon-check {
|
||
line-height: 28px;
|
||
}
|
||
|
||
.editable-cell:hover .editable-cell-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
.editable-cell-icon:hover,
|
||
.editable-cell-icon-check:hover {
|
||
color: #2db7f5;
|
||
}
|
||
|
||
.editable-add-btn {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.search-component {
|
||
margin-bottom: 20px;
|
||
.empty-search {
|
||
position: absolute;
|
||
right: 45px;
|
||
z-index: 20;
|
||
top: 5px;
|
||
color: #524e4e;
|
||
cursor: pointer;
|
||
}
|
||
&.u-input-group.simple {
|
||
float: right;
|
||
}
|
||
&.u-input-group.simple .u-form-control {
|
||
width: 251px;
|
||
background: #f5f5f5;
|
||
border-color: #f5f5f5;
|
||
border-radius: 20px;
|
||
}
|
||
&.u-input-group.simple .u-input-group-btn {
|
||
top: 3px;
|
||
right: 20px;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
|
||
.col-resize-container {
|
||
height: 0px;
|
||
position: relative;
|
||
|
||
& + .table-col-resizer:first-of-type {
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.active-drag .icon{
|
||
visibility: visible;
|
||
}
|
||
|
||
.last-handle {
|
||
display: none;
|
||
}
|
||
|
||
.drag-handle {
|
||
margin-left: -5px;
|
||
position: absolute;
|
||
z-index: 5;
|
||
width: 10px;
|
||
cursor: col-resize;
|
||
|
||
.icon {
|
||
color: #40b0dc;
|
||
top: -1px;
|
||
position: absolute;
|
||
visibility: hidden;
|
||
|
||
&:first-child {
|
||
left: -2px
|
||
}
|
||
&:last-child {
|
||
left: 6px
|
||
}
|
||
}
|
||
|
||
&:hover{
|
||
.icon{
|
||
visibility: visible;
|
||
}
|
||
.col-resizer {
|
||
border: 1px solid;
|
||
}
|
||
}
|
||
|
||
&.disabled-drag {
|
||
cursor: default;
|
||
display: none;
|
||
}
|
||
|
||
.col-resizer {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 100%;
|
||
top: 0px;
|
||
left: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-filter-dropdown-menu-wrap {
|
||
z-index: 1800;
|
||
.u-dropdown-menu {
|
||
li.u-dropdown-menu-item {
|
||
line-height: 32px;
|
||
height: 32px;
|
||
padding: 0px 16px 0 16px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.u-row-hover{
|
||
position: absolute;
|
||
right: 24px;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: $table-hover-color
|
||
}
|
||
|
||
.u-row-hover2{
|
||
position: absolute;
|
||
left: 100;
|
||
}
|
||
|
||
// 滚动条样式复写
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
::-webkit-scrollbar-button {
|
||
display: none;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: #d5d5d5 !important;
|
||
border-radius: 5px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 4px;
|
||
background-color: #d5d5d5;
|
||
position: absolute;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
display: none;
|
||
}
|
||
|
||
::-webkit-scrollbar-track-piece {
|
||
display: none;
|
||
} |