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.
423 lines
9.0 KiB
423 lines
9.0 KiB
@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; |
|
} |
|
|
|
// 默认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; |
|
} |
|
} |
|
} |
|
|
|
// 默认font |
|
.font(@class,@content, @color: @color-bi-font-native) { |
|
@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; |
|
} |
|
} |
|
} |
|
|
|
// 有悬浮效果的font |
|
.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) { |
|
@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; |
|
} |
|
} |
|
} |
|
|
|
// 有默认、激活(选中)的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 { |
|
*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; |
|
} |
|
|
|
&: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 { |
|
*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; |
|
} |
|
&: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; |
|
} |
|
} |
|
}
|
|
|