/* 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; } }