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.
355 lines
8.2 KiB
355 lines
8.2 KiB
7 years ago
|
@import "index";
|
||
|
|
|
||
|
|
.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(@class, @iconPath, @top:0px, @left:0px) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon,
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_hover(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:focus .x-icon,
|
||
|
|
&.hover .x-icon,
|
||
|
|
&:active .x-icon,
|
||
|
|
&.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -(@left + @distance));
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -(@left + @distance));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon,
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:focus .x-icon,
|
||
|
|
&.hover .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:active .x-icon,
|
||
|
|
&.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -(@left + @distance));
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -(@left + @distance));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_hover_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:focus .x-icon,
|
||
|
|
&.hover .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -(@left+@distance));
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -(@left+@distance));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active .x-icon,
|
||
|
|
&.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -(@left+@distance*2));
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -(@left+@distance*2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_select(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -(@left+@distance));
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -(@left+@distance));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, -@top, -@left);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, -@top, -@left);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_custom(@class, @iconPath, @hoverPath:none, @activePath:none, @disablePath:none, @activeDisablePath:none) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:focus .x-icon,
|
||
|
|
&.hover .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@hoverPath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@hoverPath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active .x-icon,
|
||
|
|
&.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@activePath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@activePath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@disablePath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@disablePath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled.active .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@activeDisablePath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@activeDisablePath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon_custom_hover(@class, @iconPath, @hoverPath:none, @disablePath:none) {
|
||
|
|
.@{class} {
|
||
|
|
& .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@iconPath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@iconPath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover .x-icon,
|
||
|
|
&:focus .x-icon,
|
||
|
|
&.hover .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@hoverPath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@hoverPath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.native .x-icon,
|
||
|
|
&.disabled .x-icon {
|
||
|
|
display: block;
|
||
|
|
.image2xPath(@disablePath, 0, 0);
|
||
|
|
&.hack {
|
||
|
|
.imagePath(@disablePath, 0, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//
|
||
|
|
@color-bi-font-native: inherit;
|
||
|
|
//active
|
||
|
|
@color-bi-font-hover: inherit;
|
||
|
|
//hover
|
||
|
|
@color-bi-font-active: #3f8ce8;
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
&.native .b-font:before,
|
||
|
|
&.disabled .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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,
|
||
|
|
&:focus .b-font:before,
|
||
|
|
&.hover .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-hover;
|
||
|
|
}
|
||
|
|
&.native .b-font:before,
|
||
|
|
&.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,
|
||
|
|
&:focus .b-font:before,
|
||
|
|
&.hover .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-hover;
|
||
|
|
}
|
||
|
|
&.active .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-selected;
|
||
|
|
}
|
||
|
|
&:active .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-active;
|
||
|
|
}
|
||
|
|
&.native .b-font:before,
|
||
|
|
&.disabled .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-native;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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,
|
||
|
|
&:focus .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;
|
||
|
|
}
|
||
|
|
&.native .b-font:before,
|
||
|
|
&.disabled .b-font:before {
|
||
|
|
content: @fc;
|
||
|
|
color: @color-native;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|