fineui是帆软报表和BI产品线所使用的前端框架。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

424 lines
9.0 KiB

7 years ago
@import "var";
.imagePath(none) {
background: none;
_filter: none;
}
.imagePath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
background: url('@{imageUrl}@{path}') @repeat @left @top;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{imageUrl}@{path}');
_background: none;
}
.image2xPath(@path, @top:center, @left:center, @repeat: no-repeat) when not (@path = none) {
background: url('@{image2xUrl}@{path}') @repeat @left @top;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{image2xUrl}@{path}');
background-size: contain;
_background: none;
}
7 years ago
// 默认icon
.icon(@class, @iconPath) {
7 years ago
.@{class} {
7 years ago
& .x-icon {
7 years ago
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
}
}
7 years ago
// 有悬浮效果的icon
7 years ago
.icon_hover(@class, @iconPath, @hoverPath: @iconPath, @disablePath: @iconPath) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&:hover .x-icon,
7 years ago
&.hover .x-icon {
7 years ago
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
// 有悬浮、激活(选中)的icon
7 years ago
.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath, @disablePath: @iconPath) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
&:active .x-icon,
&.active .x-icon {
display: block;
7 years ago
.image2xPath(@activePath);
7 years ago
&.hack {
7 years ago
.imagePath(@activePath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
// 只有有选中的icon
.icon_select(@class, @iconPath, @selectPath: @iconPath, @disablePath: @iconPath) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&.active .x-icon {
display: block;
7 years ago
.image2xPath(@selectPath);
7 years ago
&.hack {
7 years ago
.imagePath(@selectPath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
// 可自定义默认和灰化状态
.icon_custom(@class, @iconPath, @disablePath: @iconPath) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
//可自定义默认、悬浮、灰化状态
7 years ago
.icon_custom(@class, @iconPath, @hoverPath, @disablePath) when not (@disablePath = none) {
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
// 可自定义默认、悬浮、激活(选中)、灰化状态
7 years ago
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @disablePath) when not (@disablePath = none) {
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
&:active .x-icon,
&.active .x-icon {
display: block;
7 years ago
.image2xPath(@activePath);
7 years ago
&.hack {
7 years ago
.imagePath(@activePath);
7 years ago
}
}
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
// 可自定义默认、悬浮、激活、选中、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath) when not (@disablePath = none) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
7 years ago
7 years ago
&:hover .x-icon,
&.hover .x-icon {
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
7 years ago
&:active .x-icon {
7 years ago
display: block;
7 years ago
.image2xPath(@activePath);
7 years ago
&.hack {
7 years ago
.imagePath(@activePath);
7 years ago
}
}
7 years ago
&.active .x-icon {
7 years ago
display: block;
7 years ago
.image2xPath(@selectedPath);
7 years ago
&.hack {
7 years ago
.imagePath(@selectedPath);
7 years ago
}
}
7 years ago
7 years ago
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
}
}
7 years ago
7 years ago
// 可自定义默认、悬浮、激活、选中、灰化、激活状态灰化状态
7 years ago
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath, @activeDisablePath) when not (@activeDisablePath = none) {
7 years ago
.@{class} {
& .x-icon {
display: block;
7 years ago
.image2xPath(@iconPath);
7 years ago
&.hack {
7 years ago
.imagePath(@iconPath);
7 years ago
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
7 years ago
.image2xPath(@hoverPath);
7 years ago
&.hack {
7 years ago
.imagePath(@hoverPath);
7 years ago
}
}
7 years ago
&:active .x-icon {
7 years ago
display: block;
7 years ago
.image2xPath(@activePath);
7 years ago
&.hack {
7 years ago
.imagePath(@activePath);
7 years ago
}
}
&.active .x-icon {
display: block;
7 years ago
.image2xPath(@selectedPath);
7 years ago
&.hack {
7 years ago
.imagePath(@selectedPath);
7 years ago
}
}
7 years ago
7 years ago
&.disabled .x-icon {
display: block;
7 years ago
.image2xPath(@disablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@disablePath);
7 years ago
}
}
7 years ago
&.disabled.active .x-icon {
display: block;
7 years ago
.image2xPath(@activeDisablePath);
7 years ago
&.hack {
7 years ago
.imagePath(@activeDisablePath);
7 years ago
}
}
7 years ago
}
}
@color-bi-font-native: inherit;
@color-bi-font-hover: inherit;
@color-bi-font-active: #3f8ce8;
6 years ago
.iconSize(@class,@fontSize) {
.@{class} {
& .b-font {
font-size: @fontSize;
}
}
}
7 years ago
// 默认font
6 years ago
.font(@class,@content, @color: @color-bi-font-native) {
7 years ago
@fc: "\@{content}";
.@{class} {
& .b-font {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
}
& .b-font:before {
content: @fc;
color: @color;
}
&.disabled .b-font:before {
content: @fc;
color: @color;
}
}
}
7 years ago
// 有悬浮效果的font
6 years ago
.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
7 years ago
@fc: "\@{content}";
.@{class} {
& .b-font {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
}
& .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;
}
}
}
7 years ago
// 有默认、激活(选中)的font
6 years ago
.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
7 years ago
@fc: "\@{content}";
.@{class} {
& .b-font {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
}
& .b-font:before {
content: @fc;
color: @color-native;
}
&:hover .b-font:before,
&.hover .b-font:before {
content: @fc;
color: @color-hover;
}
7 years ago
&:active .b-font:before,
7 years ago
&.active .b-font:before {
content: @fc;
color: @color-active;
}
&.disabled .b-font:before {
content: @fc;
color: @color-native;
}
}
}
6 years ago
.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) {
7 years ago
@fc: "\@{content}";
.@{class} {
& .b-font {
*zoom: ~"expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#x@{content};')";
}
& .b-font:before {
content: @fc;
color: @color-native;
}
&:hover .b-font:before,
&.hover .b-font:before {
content: @fc;
color: @color-hover;
}
7 years ago
&:active .b-font:before {
7 years ago
content: @fc;
color: @color-active;
}
7 years ago
&.active .b-font:before {
content: @fc;
color: @color-selected;
}
7 years ago
&.disabled .b-font:before {
content: @fc;
color: @color-native;
}
}
7 years ago
}