559 lines
9.2 KiB
Plaintext
559 lines
9.2 KiB
Plaintext
@fontColor: #666;
|
|
@defaultBorderColor: #E6E6E6;
|
|
@disabledColor: #C2C2C2;
|
|
@border: 1px solid @defaultBorderColor;
|
|
|
|
@-webkit-keyframes xm-upbit {
|
|
from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}
|
|
to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
|
|
}
|
|
@keyframes xm-upbit {
|
|
from {transform: translate3d(0, 30px, 0);opacity: .3}
|
|
to {transform: translate3d(0, 0, 0);opacity: 1}
|
|
}
|
|
|
|
@-webkit-keyframes loader {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes loader {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.userselect(@v){
|
|
user-select: @v;
|
|
-ms-user-select: @v;
|
|
-moz-user-select: @v;
|
|
-webkit-user-select: @v;
|
|
}
|
|
|
|
xm-select{
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
// color: @fontColor;
|
|
text-overflow: ellipsis;
|
|
.userselect(none);
|
|
}
|
|
|
|
background-color: #FFF;
|
|
position: relative;
|
|
border: @border;
|
|
border-radius: 2px;
|
|
display: block;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
outline: none;
|
|
|
|
&:hover{
|
|
border-color: #C0C4CC;
|
|
}
|
|
|
|
& > .xm-tips{
|
|
color: #999999;
|
|
padding: 0 10px;
|
|
position: absolute;
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
}
|
|
|
|
& > .xm-icon{
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
right: 10px;
|
|
top: 50%;
|
|
margin-top: -3px;
|
|
cursor: pointer;
|
|
border: 6px dashed transparent;
|
|
border-top-color: #C2C2C2;
|
|
border-top-style: solid;
|
|
transition: all .3s;
|
|
-webkit-transition: all .3s
|
|
}
|
|
|
|
& > .xm-icon-expand{
|
|
margin-top: -9px;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
& > .xm-label{
|
|
&.single-row{
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 30px;
|
|
overflow: auto hidden;
|
|
.scroll{
|
|
overflow-y: hidden;
|
|
}
|
|
.label-content{
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
&.auto-row{
|
|
.label-content{
|
|
flex-wrap: wrap;
|
|
}
|
|
.xm-label-block > span{
|
|
white-space: unset;
|
|
}
|
|
}
|
|
|
|
.scroll{
|
|
.label-content{
|
|
display: flex;
|
|
padding: 3px 30px 3px 10px;
|
|
}
|
|
}
|
|
|
|
.xm-label-block{
|
|
display: flex;
|
|
position: relative;
|
|
padding: 0px 5px;
|
|
margin: 2px 5px 2px 0;
|
|
border-radius: 3px;
|
|
align-items: baseline;
|
|
color: #FFF;
|
|
|
|
& > span{
|
|
display: flex;
|
|
color: #FFF;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
& > i{
|
|
color: #FFF;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
}
|
|
|
|
&.disabled{
|
|
background-color: @disabledColor !important;
|
|
cursor: no-drop !important;
|
|
&>i{
|
|
cursor: no-drop !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .xm-body {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 42px;
|
|
padding: 5px 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
min-width: fit-content;
|
|
border: @border;
|
|
// max-height: 300px;
|
|
// overflow-y: auto;
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
|
|
animation-name: xm-upbit;
|
|
animation-duration: .3s;
|
|
animation-fill-mode: both;
|
|
|
|
.scroll-body{
|
|
overflow: auto;
|
|
|
|
.scrollBorder() {
|
|
-webkit-border-radius: 2em;
|
|
-moz-border-radius: 2em;
|
|
-ms-border-radius: 2em;
|
|
border-radius:2em;
|
|
}
|
|
|
|
&::-webkit-scrollbar{ width: 8px; }
|
|
&::-webkit-scrollbar-track{ .scrollBorder(); background-color: #FFF; }
|
|
&::-webkit-scrollbar-thumb{ .scrollBorder(); background-color: #C2C2C2; }
|
|
}
|
|
|
|
&.up{
|
|
top: auto;
|
|
bottom: 42px;
|
|
}
|
|
|
|
.xm-group{
|
|
cursor: default;
|
|
&-item{
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
padding: 0 10px;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.xm-option{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
|
|
// &:hover{
|
|
// background-color: #f2f2f2;
|
|
// }
|
|
&-icon{
|
|
color: transparent;
|
|
display: flex;
|
|
border: @border;
|
|
border-radius: 3px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&-icon.xm-icon-danx{
|
|
border-radius: 100%;
|
|
}
|
|
&-content{
|
|
display: flex;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: @fontColor;
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
&.hide-icon .xm-option-content{
|
|
padding-left: 0;
|
|
}
|
|
&.selected.hide-icon .xm-option-content{
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.loader{
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
margin-right: 6px;
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
|
|
.xm-select-empty{
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
|
|
.disabled{
|
|
cursor: no-drop;
|
|
&:hover{
|
|
background-color: #FFF;
|
|
}
|
|
.xm-option-icon{
|
|
border-color: @disabledColor !important;
|
|
}
|
|
.xm-option-content{
|
|
color: @disabledColor !important;
|
|
}
|
|
|
|
&.selected>.xm-option-icon{
|
|
color: @disabledColor !important;
|
|
}
|
|
}
|
|
|
|
.xm-search{
|
|
background-color: #FFF !important;
|
|
position: relative;
|
|
padding: 0 10px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
|
|
&>i{
|
|
position: absolute;
|
|
color: @fontColor;
|
|
}
|
|
|
|
&-input{
|
|
border: none;
|
|
border-bottom: 1px solid #E6E6E6;
|
|
padding-left: 27px;
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
.xm-paging{
|
|
padding: 0 10px;
|
|
display: flex;
|
|
margin-top: 5px;
|
|
|
|
&>span:first-child{
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
&>span:last-child{
|
|
border-radius: 0 2px 2px 0
|
|
}
|
|
&>span{
|
|
display: flex;
|
|
flex: auto;
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
// padding: 0 15px;
|
|
margin: 0 -1px 0 0;
|
|
background-color: #fff;
|
|
color: #333;
|
|
font-size: 12px;
|
|
border: 1px solid #e2e2e2;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
min-width: 50px;
|
|
}
|
|
}
|
|
|
|
.xm-toolbar{
|
|
padding: 0 10px;
|
|
display: flex;
|
|
margin: -3px 0;
|
|
cursor: default;
|
|
|
|
.toolbar-tag{
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-right: 20px;
|
|
color: @fontColor;
|
|
align-items: baseline;
|
|
|
|
&:hover{
|
|
opacity: .8;
|
|
}
|
|
&:active{
|
|
opacity: 1;
|
|
}
|
|
|
|
&>i{
|
|
margin-right: 2px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.xm-body-custom{
|
|
line-height: initial;
|
|
cursor: default;
|
|
|
|
*{
|
|
box-sizing: initial;
|
|
}
|
|
}
|
|
|
|
.xm-tree{
|
|
position: relative;
|
|
|
|
&-icon{
|
|
display: inline-block;
|
|
margin-right: 3px;
|
|
cursor: pointer;
|
|
border: 6px dashed transparent;
|
|
border-left-color: #C2C2C2;
|
|
border-left-style: solid;
|
|
transition: all .3s;
|
|
-webkit-transition: all .3s;
|
|
z-index: 2;
|
|
visibility: hidden;
|
|
|
|
&.expand{
|
|
margin-top: 3px;
|
|
margin-right: 5px;
|
|
margin-left: -2px;
|
|
transform: rotate(90deg);
|
|
}
|
|
&.visible{
|
|
visibility: visible;
|
|
}
|
|
}
|
|
.left-line{
|
|
position: absolute;
|
|
left: 13px;
|
|
width: 0;
|
|
z-index: 1;
|
|
border-left: 1px dotted #c0c4cc !important;
|
|
}
|
|
.top-line{
|
|
position: absolute;
|
|
left: 13px;
|
|
height: 0;
|
|
z-index: 1;
|
|
border-top: 1px dotted #c0c4cc !important;
|
|
}
|
|
.xm-tree-icon+.top-line{
|
|
margin-left: 1px;
|
|
}
|
|
}
|
|
.scroll-body>.xm-tree>.xm-option>.top-line, .scroll-body>.xm-option>.top-line{
|
|
width: 0 !important;
|
|
}
|
|
|
|
}
|
|
|
|
.xm-input{
|
|
cursor: pointer;
|
|
border-radius: 2px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #E6E6E6;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #FFF;
|
|
line-height: 1.3;
|
|
padding-left: 10px;
|
|
outline: 0;
|
|
.userselect(text);
|
|
}
|
|
|
|
.dis{
|
|
display: none;
|
|
}
|
|
|
|
.loading{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(255,255,255,.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.loader{
|
|
border: .2em dotted currentcolor;
|
|
border-radius: 50%;
|
|
-webkit-animation: 1s loader linear infinite;
|
|
animation: 1s loader linear infinite;
|
|
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.xm-select-default{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.xm-select-disabled{
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
cursor: no-drop;
|
|
z-index: 2;
|
|
opacity: 0.3;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
.item--divided{
|
|
border-top: 1px solid #ebeef5;
|
|
width: calc(100% - 20px);
|
|
cursor: initial;
|
|
}
|
|
|
|
}
|
|
|
|
//不同尺寸下的数据调整
|
|
.mixin(@size){
|
|
@height: @size;
|
|
@heightLabel: @height - 6px;
|
|
@heightItem: @heightLabel - 4px;
|
|
@iconSize: @size / 2;
|
|
|
|
min-height: @height;
|
|
line-height: @height;
|
|
.xm-input{
|
|
height: @height;
|
|
}
|
|
.xm-label{
|
|
.scroll .label-content{
|
|
line-height: @heightLabel;
|
|
}
|
|
.xm-label-block{
|
|
height: @heightItem;
|
|
line-height: @heightItem;
|
|
}
|
|
}
|
|
.xm-body .xm-option .xm-option-icon{
|
|
height: @iconSize;
|
|
width: @iconSize;
|
|
font-size: @iconSize;
|
|
}
|
|
.xm-paging>span{
|
|
height: @heightLabel;
|
|
line-height: @heightLabel;
|
|
}
|
|
.xm-tree{
|
|
.left-line{
|
|
height: 100%;
|
|
bottom: @size / 2;
|
|
}
|
|
.left-line-group{
|
|
height: calc(100% - @size);
|
|
}
|
|
.xm-tree-icon.hidden+.top-line{
|
|
top: @size / 2 - 1px;
|
|
}
|
|
}
|
|
.item--divided{
|
|
margin: @size / 4;
|
|
}
|
|
}
|
|
xm-select[size='large']{
|
|
.mixin(40px)
|
|
}
|
|
xm-select{//[size='medium']
|
|
.mixin(36px)
|
|
}
|
|
xm-select[size='small']{
|
|
.mixin(32px)
|
|
}
|
|
xm-select[size='mini']{
|
|
.mixin(28px)
|
|
}
|
|
|
|
|
|
//layui的一些样式兼容
|
|
.layui-form-pane{
|
|
xm-select{
|
|
margin: -1px -1px -1px 0;
|
|
}
|
|
}
|