init
This commit is contained in:
maplemei
61
src/style/iconfont.less
Normal file
61
src/style/iconfont.less
Normal file
@@ -0,0 +1,61 @@
|
||||
/* 阿里巴巴矢量图标库 */
|
||||
@font-face {
|
||||
font-family: "xm-iconfont";
|
||||
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831');
|
||||
/* IE9*/
|
||||
src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'),
|
||||
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg');
|
||||
/* iOS 4.1- */
|
||||
}
|
||||
|
||||
.xm-iconfont {
|
||||
font-family: "xm-iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-quanxuan:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-caidan:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-fanxuan:before {
|
||||
content: "\e837";
|
||||
}
|
||||
|
||||
.icon-pifu:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-qingkong:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.icon-sousuo:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-danx:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-duox:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-expand:before {
|
||||
content: "\e641";
|
||||
}
|
||||
209
src/style/index.less
Normal file
209
src/style/index.less
Normal file
@@ -0,0 +1,209 @@
|
||||
@fontColor: #666;
|
||||
@defaultBorderColor: #E6E6E6;
|
||||
@disabledColor: #C2C2C2;
|
||||
@border: 1px solid @defaultBorderColor;
|
||||
@height: 36px;
|
||||
|
||||
@-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}
|
||||
}
|
||||
|
||||
xm-select{
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: @fontColor;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
border: @border;
|
||||
border-radius: 2px;
|
||||
height: @height;
|
||||
line-height: @height;
|
||||
display: block;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
border-color: #C0C4CC;
|
||||
}
|
||||
|
||||
|
||||
& > .xm-tips{
|
||||
color: #999999;
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& > .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{
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
.xm-label-block{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0px 5px;
|
||||
margin: 2px 5px 2px 0;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
color: #FFF;
|
||||
max-width: calc(100% - 20px);
|
||||
|
||||
& > span{
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > i{
|
||||
color: #FFF;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&.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%;
|
||||
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-fill-mode: both;
|
||||
animation-name: xm-upbit;
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
|
||||
.xm-option{
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
background-color: #f2f2f2;
|
||||
|
||||
&>.xm-option-icon>i{
|
||||
color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon{
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
border: @border;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
|
||||
& > i {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -10px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
&-content{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 15px 0 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: #666;
|
||||
line-height: 36px;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.xm-select-empty{
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.disabled{
|
||||
cursor: no-drop;
|
||||
&:hover{
|
||||
background-color: #FFF;
|
||||
&>.xm-option-icon>i{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
.xm-option-icon{
|
||||
border-color: @disabledColor !important;
|
||||
}
|
||||
.xm-option-content{
|
||||
color: @disabledColor !important;
|
||||
}
|
||||
|
||||
&.selected>.xm-option-icon>i{
|
||||
color: @disabledColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dis{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user