|
|
|
@import "var";
|
|
|
|
|
|
|
|
.imagePath(none) {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imagePath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
|
|
|
|
background: url('@{imageUrl}@{path}') @repeat @left @top;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image2xPath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
|
|
|
|
background: url('@{image2xUrl}@{path}') @repeat @left @top;
|
|
|
|
background-size: contain;
|
|
|
|
}
|
|
|
|
|
|
|
|
.background(@class, @backgroundPath, @top:center, @left:center, @repeat: no-repeat) {
|
|
|
|
.@{class} {
|
|
|
|
.image2xPath(@backgroundPath, @top, @left, @repeat);
|
|
|
|
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@backgroundPath, @top, @left, @repeat);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 默认icon
|
|
|
|
.icon(@class, @iconPath) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 有悬浮效果的icon
|
|
|
|
.icon_hover(@class, @iconPath, @hoverPath: @iconPath, @disablePath: @iconPath) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 有悬浮、激活(选中)的icon
|
|
|
|
.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath, @disablePath: @iconPath) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:active .x-icon,
|
|
|
|
&.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@activePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@activePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 只有有选中的icon
|
|
|
|
.icon_select(@class, @iconPath, @selectPath: @iconPath, @disablePath: @iconPath) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@selectPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@selectPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 可自定义默认和灰化状态
|
|
|
|
.icon_custom(@class, @iconPath, @disablePath: @iconPath) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//可自定义默认、悬浮、灰化状态
|
|
|
|
.icon_custom(@class, @iconPath, @hoverPath, @disablePath) when not (@disablePath = none) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 可自定义默认、悬浮、激活(选中)、灰化状态
|
|
|
|
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @disablePath) when not (@disablePath = none) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active .x-icon,
|
|
|
|
&.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@activePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@activePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 可自定义默认、悬浮、激活、选中、灰化状态
|
|
|
|
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath) when not (@disablePath = none) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@activePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@activePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@selectedPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@selectedPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 可自定义默认、悬浮、激活、选中、灰化、激活状态灰化状态
|
|
|
|
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath, @activeDisablePath) when not (@activeDisablePath = none) {
|
|
|
|
.@{class} {
|
|
|
|
& .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@iconPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@iconPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&:hover .x-icon,
|
|
|
|
&.hover .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@hoverPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@hoverPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@activePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@activePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@selectedPath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@selectedPath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.disabled .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@disablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@disablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.disabled.active .x-icon {
|
|
|
|
display: block;
|
|
|
|
.image2xPath(@activeDisablePath);
|
|
|
|
&.hack {
|
|
|
|
.imagePath(@activeDisablePath);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@color-bi-font-native: inherit;
|
|
|
|
@color-bi-font-hover: inherit;
|
|
|
|
@color-bi-font-active: #3f8ce8;
|
|
|
|
|
|
|
|
.iconSize(@class,@fontSize) {
|
|
|
|
.@{class} {
|
|
|
|
& .b-font {
|
|
|
|
font-size: @fontSize;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@defaultFontName: 'fineui';
|
|
|
|
// 添加字体资源
|
|
|
|
.addFontRes(@name: @defaultFontName, @fontUrl: @fontUrl) {
|
|
|
|
@font-face {
|
|
|
|
font-family: "@{name}";
|
|
|
|
src: url('@{fontUrl}iconfont.eot');
|
|
|
|
src: url('@{fontUrl}iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('@{fontUrl}iconfont.woff') format('woff'), /* chrome、firefox */ url('@{fontUrl}iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{fontUrl}iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 激活字体
|
|
|
|
.activateFont(@fonts: false) {
|
|
|
|
@baseProperty: {
|
|
|
|
font-style: normal;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
};
|
|
|
|
|
|
|
|
.b-font when (@fonts = false){
|
|
|
|
font-family: @defaultFontName;
|
|
|
|
@baseProperty();
|
|
|
|
}
|
|
|
|
|
|
|
|
.b-font when not (@fonts = false){
|
|
|
|
font-family: @fonts, @defaultFontName;
|
|
|
|
@baseProperty();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 默认font
|
|
|
|
.font(@class,@content, @color: @color-bi-font-native) {
|
|
|
|
@fc: "\@{content}";
|
|
|
|
.@{class} {
|
|
|
|
& .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color;
|
|
|
|
}
|
|
|
|
&.disabled .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 有悬浮效果的font
|
|
|
|
.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
|
|
|
|
@fc: "\@{content}";
|
|
|
|
.@{class} {
|
|
|
|
& .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
&:hover .b-font:before,
|
|
|
|
&.hover .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-hover;
|
|
|
|
}
|
|
|
|
&.disabled .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 有默认、激活(选中)的font
|
|
|
|
.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
|
|
|
|
@fc: "\@{content}";
|
|
|
|
.@{class} {
|
|
|
|
& .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
&:hover .b-font:before,
|
|
|
|
&.hover .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-hover;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active .b-font:before,
|
|
|
|
&.active .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-active;
|
|
|
|
}
|
|
|
|
&.disabled .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.font-effect(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active, @color-selected: @color-bi-font-active) {
|
|
|
|
@fc: "\@{content}";
|
|
|
|
.@{class} {
|
|
|
|
& .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
&:hover .b-font:before,
|
|
|
|
&.hover .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-hover;
|
|
|
|
}
|
|
|
|
&:active .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-active;
|
|
|
|
}
|
|
|
|
&.active .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-selected;
|
|
|
|
}
|
|
|
|
&.disabled .b-font:before {
|
|
|
|
content: @fc;
|
|
|
|
color: @color-native;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|