@ttk/component
Version:
ttk组件库
450 lines (383 loc) • 12.1 kB
text/less
@vt-border: 1px solid #d9d9d9;
@basesize: 12px;
@bgc: #fff;
@box-shadow-left: 6px 2px 6px rgba(0, 0, 0, 0.15);
@box-shadow-right: -6px 2px 6px rgba(0, 0, 0, 0.15);
@line-height: 37px;
.vt-table {
overflow: hidden;
border-radius: 4px;
border: @vt-border;
.@{ant-prefix}-spin-nested-loading > div > .@{ant-prefix}-spin {
max-height: unset;
}
.vt-header-container {
position: relative;
overflow: hidden;
.vt-header {
display: flex;
&-cell {
border-right: @vt-border;
border-bottom: @vt-border;
display: flex;
padding: 0px 10px;
line-height: 37px;
justify-content: center;
align-items: center;
background-color: #eaeaea;
color: #333333;
font-weight: bold;
font-size: @basesize;
&.select-cell {
text-align: center;
}
.select-cell-header {
i {
margin-left: 4px;
font-size: @basesize + 2px;
font-weight: normal;
}
}
&.resizable {
position: relative;
background-clip: padding-box;
&:hover {
.react-resizable-handle {
background-color: #0066b3;
&:before,
&:after {
position: absolute;
content: "";
width: 0;
height: 0;
border: 3px solid;
top: 50%;
border-color: transparent transparent #0066b3;
}
&:before {
left: -8px;
transform: rotate(-90deg) translateX(3px);
}
&:after {
right: -8px;
transform: rotate(90deg) translateX(-3px);
}
}
}
}
.react-resizable-handle {
position: absolute;
width: 3px;
height: 100%;
bottom: 0;
right: 0px;
cursor: ew-resize;
z-index: 1;
}
}
&-row {
display: flex;
flex: 1;
}
&-col {
display: flex;
flex-direction: column;
}
.last-child {
border-right: none;
}
.blank {
padding: 0;
}
}
.vt-header-scroll {
position: relative;
overflow: hidden;
}
.header-fixed {
display: flex;
z-index: 2;
&.fixed-left-last {
box-shadow: @box-shadow-left;
}
&.fixed-right-last {
box-shadow: @box-shadow-right;
}
}
}
.vt-body {
position: relative;
overflow: hidden;
background-color: #fff;
.@{mk-prefix}-nodata {
display: flex;
flex-direction: column;
justify-content: center;
}
.vt-body-scroll {
overflow: scroll;
}
.vt-body-fixed-left {
position: -webkit-sticky;
position: sticky;
left: 0;
box-shadow: @box-shadow-left;
top: 0;
overflow: hidden auto;
background-color: @bgc;
.vt-body-row-cell {
line-height: @line-height - 1px;
}
}
.vt-body-fixed-right {
position: -webkit-sticky;
position: sticky;
right: 0;
box-shadow: @box-shadow-right;
top: 0;
overflow: hidden auto;
background-color: @bgc;
.vt-body-row-cell {
line-height: @line-height - 1px;
}
}
.vt-body-row {
display: flex;
position: absolute;
.vt-body-row-cell {
border-right: @vt-border;
border-bottom: @vt-border;
padding: 0px 10px;
line-height: @line-height;
overflow: hidden;
font-size: @basesize;
background-color: @bgc;
&:last-child {
border-right: none;
}
&.select-cell {
text-align: center;
}
&.fixed-cell {
background-color: @bgc;
z-index: 2;
}
&.fixed-left-last {
box-shadow: @box-shadow-left;
}
&.fixed-right-last {
box-shadow: @box-shadow-right;
}
.add-del-row-cell {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
line-height: 1;
.btn {
font-size: 14px;
cursor: pointer;
display: none;
&:hover {
color: red;
}
}
.index {
display: block;
}
&:hover {
.btn {
display: block;
}
.index {
display: none;
}
}
}
}
&:nth-child(2n) {
.vt-body-row-cell {
background-color: #f9f9f9;
}
}
&.row-selected {
.vt-body-row-cell {
background-color: #ecf0f6;
}
}
&.row-hover {
.vt-body-row-cell {
background-color: #e2e8f2;
}
}
&.row-expanded {
width: 100%;
border-bottom: @vt-border;
font-size: @basesize;
background-color: #fbfbfb;
}
.expand-btn {
text-decoration: none;
position: relative;
display: inline-flex;
float: left;
box-sizing: border-box;
width: 17px;
height: 17px;
padding: 0;
color: inherit;
line-height: 12px;
vertical-align: -2px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 2px;
outline: none;
user-select: none;
margin-right: 8px;
cursor: pointer;
transition: all 0.3s;
&:hover,
&:focus {
color: #0066b3;
}
&:before,
&:after {
position: absolute;
background: currentColor;
box-sizing: border-box;
transition: transform 0.3s ease-out;
content: "";
}
&:before {
top: 7px;
right: 3px;
left: 3px;
height: 1px;
display: inline-flex;
}
&:after {
top: 3px;
bottom: 3px;
left: 7px;
width: 1px;
}
&.expanded {
&:after {
transform: rotate(90deg);
}
}
&.collapsed {
&:before {
transform: rotate(-180deg);
}
&:after {
transform: rotate(0deg);
}
}
}
}
.has-vertical-scroll {
.vt-body-row .last-cell {
padding-right: 20px;
}
.vt-body-row .blank {
padding: 0 ;
}
}
.editable-row:hover {
.editable-cell-value-wrap {
border: @vt-border;
border-color: #0066b3;
border-radius: 2px;
padding: 2px 10px;
height: 36px;
line-height: 32px;
margin-left: -10px;
margin-right: -10px;
cursor: pointer;
}
}
}
.vt-body-scroll-bar {
position: absolute;
will-change: transform;
direction: ltr;
background-color: @bgc;
z-index: 3;
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&.vertical {
top: 0;
right: 0;
min-width: 10px;
border-left: @vt-border;
overflow-x: hidden;
overflow-y: scroll;
}
&.horizontal {
left: 0;
bottom: 0;
height: 11px;
right: 0;
border-top: @vt-border;
overflow-x: scroll;
overflow-y: hidden;
div {
height: 10px;
}
}
}
.scroll-hidden {
// -ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
display: none;
}
}
.vt-summary {
line-height: 37px;
height: 37px;
background-color: #fff6ea;
border-top: @vt-border;
position: -webkit-sticky;
position: sticky;
left: 0;
bottom: 0;
z-index: 3;
&.left {
border-top: none;
border-bottom: none;
border-right: @vt-border;
position: -webkit-sticky;
position: sticky;
background-color: #fff6ea;
box-shadow: @box-shadow-left;
}
&.no-box-shadow {
.left {
box-shadow: none;
border-bottom: @vt-border;
line-height: 36px;
height: 36px;
}
}
&.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
&.right {
border-top: none;
border-bottom: none;
border-left: @vt-border;
position: -webkit-sticky;
position: sticky;
background-color: #fff6ea;
box-shadow: @box-shadow-left;
}
}
}