bee-table/build/Table.css

188 lines
5.3 KiB
CSS

/* FormGroup */
/* Navlayout */
.u-table {
font-size: 12px;
color: #666;
transition: opacity 0.3s ease;
position: relative;
line-height: 1.5;
overflow: hidden; }
.u-table table {
width: 100%;
border-collapse: collapse;
text-align: left; }
.u-table th {
background: #f7f7f7;
font-weight: bold;
transition: background .3s ease; }
.u-table td {
border-bottom: 1px solid #e9e9e9; }
.u-table tr {
transition: all .3s ease; }
.u-table tr:hover {
background: rgb(227,242,253); }
.u-table tr.tr-row-hover {
background: rgb(227,242,253); }
.u-table th, .u-table td {
padding: 16px 8px; }
.u-table-scroll {
overflow: auto; }
.u-table-header {
overflow: hidden;
background: #f7f7f7; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow: scroll; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
padding: 16px 8px;
border-top: 1px solid #e9e9e9; }
.u-table-content {
position: relative; }
.u-table-footer {
padding: 16px 8px;
border-bottom: 1px solid #e9e9e9; }
.u-table-footer .u-table {
margin: -16px -8px; }
.u-table-placeholder {
padding: 16px 8px;
background: #fff;
border-bottom: 1px solid #e9e9e9;
text-align: center;
position: relative; }
.u-table-expand-icon-col {
width: 10px; }
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
cursor: pointer;
display: inline-block;
margin-right: 10px;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
border: 1px solid #e9e9e9;
user-select: none;
background: #fff; }
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
content: '.'; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: '-'; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: '+'; }
.u-table tr.u-table-expanded-row {
background: #f7f7f7; }
.u-table tr.u-table-expanded-row:hover {
background: #f7f7f7; }
.u-table tr.u-table-expanded-row .u-table {
padding: 0 40px 0 20px; }
.u-table-column-hidden {
display: none; }
.u-table-prev-columns-page, .u-table-next-columns-page {
cursor: pointer;
color: #666;
z-index: 1; }
.u-table-prev-columns-page:hover, .u-table-next-columns-page:hover {
color: #2db7f5; }
.u-table-prev-columns-page-disabled, .u-table-next-columns-page-disabled {
cursor: not-allowed;
color: #999; }
.u-table-prev-columns-page-disabled:hover, .u-table-next-columns-page-disabled:hover {
color: #999; }
.u-table-prev-columns-page {
margin-right: 8px; }
.u-table-prev-columns-page:before {
content: '<'; }
.u-table-next-columns-page {
float: right; }
.u-table-next-columns-page:before {
content: '>'; }
.u-table-fixed-left, .u-table-fixed-right {
position: absolute;
top: 0;
overflow: hidden;
z-index: 1; }
.u-table-fixed-left table, .u-table-fixed-right table {
width: auto;
background: #fff; }
.u-table-fixed-left {
left: 0;
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1); }
.u-table-fixed-left .u-table-fixed-left-body-inner {
margin-right: -20px;
padding-right: 20px; }
.u-table-fixed-left-fixed-header .u-table-fixed-left .u-table-fixed-left-body-inner {
padding-right: 0; }
.u-table-fixed-right {
right: 0;
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1); }
.u-table-fixed-right-expanded-row {
color: transparent;
pointer-events: none; }
.u-table .u-table-scroll-position-left .u-table-fixed-left {
box-shadow: none; }
.u-table .u-table-scroll-position-right .u-table-fixed-right {
box-shadow: none; }
.u-table.bordered table {
border-collapse: collapse; }
.u-table.bordered th, .u-table.bordered td {
border: 1px solid #e9e9e9; }
.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: .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: rgb(238,238,238); }
20% {
transform-origin: 0 0;
transform: translateX(0);
opacity: 1; }
80% {
background: rgb(238,238,238); }
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; } }