lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
f3a00a608697a8662a63f5dbff657bf823e83cc8
vxe-table/style/table.scss
xuliangzhan 678ff306d6 update
2019-04-30 22:54:09 +08:00

672 lines
14 KiB
SCSS
Raw Blame History

.vxe-table,
.vxe-table--filter-wrapper,
.vxe-checkbox {
*, :after, :before {
box-sizing: border-box;
}
}
.vxe-table {
&.t--animat {
.vxe-sort-wrapper {
.vxe-sort--asc-icon,
.vxe-sort--desc-icon {
&:before {
transition: border .2s ease-in-out;
}
}
}
.vxe-body--row {
transition: background-color .2s ease-in-out;
}
}
}
.vxe-table,
.vxe-table--filter-wrapper {
&.t--animat {
.vxe-checkbox,
.vxe-radio {
> input {
&:checked+span {
transition: background-color .1s ease-in-out;
}
}
}
}
}
/*table*/
.vxe-table {
position: relative;
border-right: 1px solid $vxe-table-border-color;
border-left: 1px solid $vxe-table-border-color;
font-size: 14px;
color: $vxe-font-color;
font-family: $vxe-font-family;
&:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: $vxe-table-border-color;
}
table {
border-spacing: 0;
border-collapse: separate;
}
.vxe-table-hidden-column {
display: none;
}
.vxe-table--header-wrapper,
.vxe-table--footer-wrapper {
position: relative;
overflow: hidden;
border-top: 1px solid $vxe-table-border-color;
.vxe-table--repair {
position: absolute;
left: 0;
height: 1px;
background-color: $vxe-table-border-color;
}
}
.vxe-table--header-wrapper {
.vxe-table--repair {
bottom: 0;
}
}
.vxe-table--footer-wrapper {
overflow-x: auto;
.vxe-table--repair {
top: 0;
}
}
&.show--foot {
.vxe-table--body-wrapper {
overflow-x: hidden;
}
}
.vxe-header--row {
background-color: $vxe-table-header-background-color;
}
.vxe-body--row,
.vxe-footer--row {
background-color: $vxe-table-background-color;
}
.vxe-table--body-wrapper,
.vxe-table--fixed-left-body-wrapper,
.vxe-table--fixed-right-body-wrapper {
overflow: auto;
}
.vxe-body--row {
&.row--hover {
background-color: $vxe-table-row-hover-background-color;
}
&.row--selected {
background-color: $vxe-table-row-selected-background-color;
}
&:last-child {
.vxe-body--column {
border-bottom: 0;
}
}
.vxe-body--column {
border-bottom: 1px solid $vxe-table-border-color;
}
}
&.t--highlight {
.vxe-body--row {
&:hover {
background-color: $vxe-table-row-hover-background-color;
}
}
}
&.t--stripe {
.vxe-body--row {
&:nth-child(2n) {
background-color: $vxe-table-row-striped-background-color;
}
}
}
.vxe-header--column,
.vxe-body--column,
.vxe-footer--column {
padding: 12px 0;
line-height: 23px;
text-align: left;
&.col--center {
text-align: center;
}
&.col--right {
text-align: right;
}
}
.vxe-header--column {
position: relative;
&.filter--active {
.vxe-filter--icon,
.vxe-filter--icon:hover {
&:before {
border-top-color: $vxe-primary-color;
}
&:after {
background-color: $vxe-primary-color;
}
}
}
.vxe-resizable {
position: absolute;
right: -7px;
top: 0;
width: 14px;
height: 100%;
z-index: 1;
user-select: none;
cursor: col-resize;
}
}
&.t--border {
.vxe-header--column,
.vxe-body--column,
.vxe-footer--column {
border-right: 1px solid $vxe-table-border-color;
}
.vxe-header--column,
.vxe-footer--column {
border-bottom: 1px solid $vxe-table-border-color;
}
}
&.size--medium {
.vxe-header--column,
.vxe-body--column,
.vxe-footer--column {
padding: 10px 0;
}
.vxe-table--loading {
.vxe-table--spinner {
width: 50px;
height: 50px;
}
}
}
&.size--small {
font-size: 12px;
.vxe-header--column,
.vxe-body--column,
.vxe-footer--column {
padding: 8px 0;
}
.vxe-table--loading {
.vxe-table--spinner {
width: 44px;
height: 44px;
}
}
}
&.size--mini {
font-size: 12px;
.vxe-header--column,
.vxe-body--column,
.vxe-footer--column {
padding: 6px 0;
}
.vxe-table--loading {
.vxe-table--spinner {
width: 38px;
height: 38px;
}
}
}
.vxe-cell {
white-space: normal;
word-break: break-all;
padding: 0 10px;
&.c--ellipsis,
&.c--title,
&.c--tooltip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.fixed--hidden {
visibility: hidden;
}
.vxe-table--fixed-left-wrapper,
.vxe-table--fixed-right-wrapper {
width: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
}
.vxe-table--fixed-left-wrapper {
left: 0;
width: 200px;
&.scrolling--middle {
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
}
}
.vxe-table--fixed-right-wrapper {
right: 0;
&.scrolling--middle {
box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
}
}
.vxe-table--header-wrapper,
.vxe-table--body-wrapper,
.vxe-table--footer-wrapper {
&.fixed--left-wrapper,
&.fixed--right-wrapper {
position: absolute;
top: 0;
overflow-x: hidden;
}
&.fixed--left-wrapper {
left: 0;
}
&.fixed--right-wrapper {
right: 0;
overflow-y: auto;
}
}
/*加载中*/
&.t--loading {
.vxe-table--loading {
display: block;
}
}
.vxe-table--loading {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
background-color: $vxe-loading-background-color;
.vxe-table--spinner {
width: 56px;
height: 56px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&:before,
&:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $vxe-primary-color;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: bounce 2.0s infinite ease-in-out;
}
&:after {
animation-delay: -1.0s;
}
}
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
} 50% {
transform: scale(1.0);
}
}
}
/*排序*/
.vxe-sort-wrapper {
padding: 0 2px;
vertical-align: middle;
display: inline-block;
.vxe-sort--asc-icon,
.vxe-sort--desc-icon {
position: relative;
display: block;
width: 18px;
height: 12px;
cursor: pointer;
&:before {
content: "";
left: 4px;
position: absolute;
border: 5px solid transparent;
}
}
.vxe-sort--asc-icon {
&:before {
top: 0;
border-bottom-color: $vxe-table-column-icon-border-color;
}
&:hover {
&:before {
border-bottom-color: $vxe-table-column-icon-border-hover-color;
}
}
&.sort--active {
&:before {
border-bottom-color: $vxe-primary-color;
}
}
}
.vxe-sort--desc-icon {
&:before {
bottom: 2px;
border-top-color: $vxe-table-column-icon-border-color;
}
&:hover {
&:before {
border-top-color: $vxe-table-column-icon-border-hover-color;
}
}
&.sort--active {
&:before {
border-top-color: $vxe-primary-color;
}
}
}
}
/*列宽线*/
.vxe-table--resizable-bar {
display: none;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
z-index: 4;
&:before {
content: "";
display: block;
height: 100%;
background-color: $vxe-table-border-color;
}
}
/*筛选*/
.vxe-filter-wrapper {
padding: 0 2px;
vertical-align: middle;
display: inline-block;
.vxe-filter--icon {
position: relative;
display: block;
width: 18px;
height: 18px;
cursor: pointer;
&:before,
&:after {
content: "";
position: absolute;
}
&:before {
top: 3px;
left: 3px;
border: 6px solid transparent;
border-top-color: $vxe-table-column-icon-border-color;
}
&:after {
left: 8px;
top: 6px;
width: 2px;
height: 7px;
background-color: $vxe-table-column-icon-border-color;
}
&:hover {
&:before {
border-top-color: $vxe-table-column-icon-border-hover-color;
}
&:after {
background-color: $vxe-table-column-icon-border-hover-color;
}
}
}
}
}
/*筛选容器*/
.vxe-table--filter-wrapper {
display: none;
position: absolute;
min-width: 100px;
border-radius: 2px;
color: $vxe-font-color;
background-color: #fff;
border: 1px solid $vxe-table-popup-border-color;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
font-size: 13px;
font-family: $vxe-font-family;
&.filter--active {
display: block;
}
.vxe-table--filter-body {
list-style-type: none;
margin: 0;
padding: 0;
max-height: 240px;
padding: 10px 10px 0 10px;
overflow-x: hidden;
overflow-y: auto;
.vxe-table--filter-option {
margin-bottom: 8px;
.vxe-checkbox {
display: block;
.checkbox--label {
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.vxe-table--filter-footer {
border-top: 1px solid $vxe-table-popup-border-color;
padding: 8px;
button {
background-color: transparent;
padding: 0 3px;
border: 0;
font-size: 13px;
color: $vxe-font-color;
cursor: pointer;
&:focus {
outline: none;
}
&:hover {
color: $vxe-primary-color;
}
&.is--disabled {
color: #c0c4cc;
cursor: not-allowed;
}
}
}
}
/*快捷菜单*/
.vxe-table--ctxmenu-wrapper {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 88;
font-size: 12px;
background-color: #FFF;
border: 1px solid $vxe-table-popup-border-color;
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.1);
padding: 0 1px;
user-select: none;
color: $vxe-font-color;
font-family: $vxe-font-family;
&.show {
display: block;
}
.vxe-ctxmenu--option-wrapper {
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid #E8EAED;
li {
position: relative;
margin: 1px 0;
border: 1px solid transparent;
&:last-child {
border: 0;
}
&.link--active {
color: #2B2B2B;
background-color: #C5C5C5;
border-color:#C5C5C5;
}
&.link--disabled {
color: $vxe-disabled-color;
&.link--active {
border-color:#C0C1C2;
background-color: #EEEEEE;
&:hover {
background-color: inherit;
}
}
}
}
.vxe-ctxmenu--link {
display: block;
padding: 0 30px;
width: 100px;
line-height: 26px;
.vxe-ctxmenu--link-prefix,
.vxe-ctxmenu--link-suffix {
position: absolute;
top: 5px;
margin-right: 5px;
font-size: 16px;
}
.vxe-ctxmenu--link-prefix {
left: 5px;
}
.vxe-ctxmenu--link-suffix {
right: 5px;
&.suffix--haschild {
top: 8px;
&:before {
position: absolute;
content: "";
border: 4px solid transparent;
border-left-color: #727272;
}
}
}
.vxe-ctxmenu--link-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
.vxe-table--ctxmenu-clild-wrapper {
@extend .vxe-table--ctxmenu-wrapper, .vxe-ctxmenu--option-wrapper;
display: none;
z-index: 99;
top: 0;
left: 100%;
&.show {
display: block;
}
}
.vxe-checkbox,
.vxe-radio {
display: inline-block;
user-select: none;
cursor: pointer;
> input {
display: none;
&+.radio--icon,
&+.checkbox--icon {
position: relative;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid $vxe-input-border-color;
background-color: #fff;
vertical-align: middle;
&:before {
content: "";
position: absolute;
border: 1px solid #fff;
}
}
&:checked+.radio--icon,
&:checked+.checkbox--icon {
background-color: $vxe-primary-color;
border-color: $vxe-primary-color;
}
}
.checkbox--label {
padding-left: 5px;
vertical-align: middle;
display: inline-block;
}
}
/*checkbox*/
.vxe-checkbox {
&.is--indeterminate {
> input {
&+.checkbox--icon {
background-color: $vxe-primary-color;
border-color: $vxe-primary-color;
&:before {
top: 50%;
height: 0;
width: 100%;
transform: translateY(-50%) scale(.5);
}
}
}
}
> input {
&+.checkbox--icon {
border-radius: 2px;
}
&:checked+.checkbox--icon {
&:before {
height: 8px;
width: 4px;
left: 4px;
top: 1px;
border-left: 0;
border-top: 0;
transform: rotate(45deg);
}
}
}
}
/*radio*/
.vxe-radio {
> input {
&+.radio--icon {
border-radius: 50%;
&:before {
background-color: #fff;
border-radius: 50%;
height: 4px;
width: 4px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
}
}
Reference in New Issue View Git Blame Copy Permalink