guy 7 years ago
parent
commit
1f3d83f84e
  1. 21
      src/css/resource/font.css
  2. 172
      src/css/resource/icon.css
  3. 194
      src/less/image.less
  4. 6
      src/less/resource/icon.less

21
src/css/resource/font.css

@ -2,6 +2,7 @@
font-family: 'bi';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
/* iOS 4.1- */
}
.b-font {
@ -205,14 +206,14 @@
content: "\e762";
color: #999999;
}
.dot-e-font.active .b-font:before {
content: "\e762";
color: #1a1a1a;
}
.dot-e-font:active .b-font:before {
content: "\e762";
color: #3685f2;
}
.dot-e-font.active .b-font:before {
content: "\e762";
color: #1a1a1a;
}
.dot-e-font.disabled .b-font:before {
content: "\e762";
color: #ffffff;
@ -277,11 +278,11 @@
content: "\e70c";
color: inherit;
}
.pull-right-e-font.active .b-font:before {
.pull-right-e-font:active .b-font:before {
content: "\e70c";
color: #3f8ce8;
}
.pull-right-e-font:active .b-font:before {
.pull-right-e-font.active .b-font:before {
content: "\e70c";
color: #3f8ce8;
}
@ -349,11 +350,11 @@
content: "\e6bd";
color: inherit;
}
.copy-e-font.active .b-font:before {
.copy-e-font:active .b-font:before {
content: "\e6bd";
color: #3f8ce8;
}
.copy-e-font:active .b-font:before {
.copy-e-font.active .b-font:before {
content: "\e6bd";
color: #3f8ce8;
}
@ -421,11 +422,11 @@
content: "\e6cf";
color: inherit;
}
.check-mark-e-font.active .b-font:before {
.check-mark-e-font:active .b-font:before {
content: "\e6cf";
color: #3f8ce8;
}
.check-mark-e-font:active .b-font:before {
.check-mark-e-font.active .b-font:before {
content: "\e6cf";
color: #3f8ce8;
}

172
src/css/resource/icon.css

@ -1,264 +1,264 @@
.tree-collapse-icon-type1 .x-icon {
display: block;
background: url('images/2x/icon/tree_collapse_1.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_1.png');
background-size: contain;
_background: none;
}
.tree-collapse-icon-type1 .x-icon.hack {
background: url('images/1x/icon/tree_collapse_1.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
_background: none;
}
.tree-collapse-icon-type2 .x-icon {
display: block;
background: url('images/2x/icon/tree_collapse_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_2.png');
background-size: contain;
_background: none;
}
.tree-collapse-icon-type2 .x-icon.hack {
background: url('images/1x/icon/tree_collapse_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
_background: none;
}
.tree-collapse-icon-type3 .x-icon {
display: block;
background: url('images/2x/icon/tree_collapse_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_3.png');
background-size: contain;
_background: none;
}
.tree-collapse-icon-type3 .x-icon.hack {
background: url('images/1x/icon/tree_collapse_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
_background: none;
}
.tree-collapse-icon-type4 .x-icon {
display: block;
background: url('images/2x/icon/tree_collapse_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_4.png');
background-size: contain;
_background: none;
}
.tree-collapse-icon-type4 .x-icon.hack {
background: url('images/1x/icon/tree_collapse_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
_background: none;
}
.tree-expand-icon-type1 .x-icon {
display: block;
background: url('images/2x/icon/tree_expand_1.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_expand_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_1.png');
background-size: contain;
_background: none;
}
.tree-expand-icon-type1 .x-icon.hack {
background: url('images/1x/icon/tree_expand_1.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
_background: none;
}
.tree-expand-icon-type2 .x-icon {
display: block;
background: url('images/2x/icon/tree_expand_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_expand_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_2.png');
background-size: contain;
_background: none;
}
.tree-expand-icon-type2 .x-icon.hack {
background: url('images/1x/icon/tree_expand_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
_background: none;
}
.tree-expand-icon-type3 .x-icon {
display: block;
background: url('images/2x/icon/tree_expand_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_expand_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_3.png');
background-size: contain;
_background: none;
}
.tree-expand-icon-type3 .x-icon.hack {
background: url('images/1x/icon/tree_expand_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
_background: none;
}
.tree-expand-icon-type4 .x-icon {
display: block;
background: url('images/2x/icon/tree_expand_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_expand_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_4.png');
background-size: contain;
_background: none;
}
.tree-expand-icon-type4 .x-icon.hack {
background: url('images/1x/icon/tree_expand_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
_background: none;
}
.tree-vertical-line-type2 .x-icon {
display: block;
background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_2.png');
background-size: contain;
_background: none;
}
.tree-vertical-line-type2 .x-icon.hack {
background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
_background: none;
}
.tree-vertical-line-type3 .x-icon {
display: block;
background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_3.png');
background-size: contain;
_background: none;
}
.tree-vertical-line-type3 .x-icon.hack {
background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
_background: none;
}
.tree-vertical-line-type4 .x-icon {
display: block;
background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_4.png');
background-size: contain;
_background: none;
}
.tree-vertical-line-type4 .x-icon.hack {
background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type1 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_1.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type1 .x-icon.hack {
background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type2 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_2.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type2 .x-icon.hack {
background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type3 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_3.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type3 .x-icon.hack {
background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type4 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_4.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-collapse-icon-type4 .x-icon.hack {
background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
_background: none;
}
.bi-theme-dark .tree-expand-icon-type1 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_1.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-expand-icon-type1 .x-icon.hack {
background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
_background: none;
}
.bi-theme-dark .tree-expand-icon-type2 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_2.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-expand-icon-type2 .x-icon.hack {
background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
_background: none;
}
.bi-theme-dark .tree-expand-icon-type3 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_3.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-expand-icon-type3 .x-icon.hack {
background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
_background: none;
}
.bi-theme-dark .tree-expand-icon-type4 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_4.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-expand-icon-type4 .x-icon.hack {
background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
_background: none;
}
.bi-theme-dark .tree-vertical-line-type2 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_2.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-vertical-line-type2 .x-icon.hack {
background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
_background: none;
}
.bi-theme-dark .tree-vertical-line-type3 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_3.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-vertical-line-type3 .x-icon.hack {
background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
_background: none;
}
.bi-theme-dark .tree-vertical-line-type4 .x-icon {
display: block;
background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat 0px 0px;
background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_4.png');
background-size: contain;
_background: none;
}
.bi-theme-dark .tree-vertical-line-type4 .x-icon.hack {
background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat 0px 0px;
background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
_background: none;
}
@ -274,6 +274,32 @@
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
_background: none;
}
.check-box-icon:hover .x-icon,
.check-box-icon.hover .x-icon {
display: block;
background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
background-size: contain;
_background: none;
}
.check-box-icon:hover .x-icon.hack,
.check-box-icon.hover .x-icon.hack {
background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
_background: none;
}
.check-box-icon:active .x-icon {
display: block;
background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
background-size: contain;
_background: none;
}
.check-box-icon:active .x-icon.hack {
background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
_background: none;
}
.check-box-icon.active .x-icon {
display: block;
background: url('images/2x/icon/check_box_active.png') no-repeat 0 0;
@ -298,6 +324,18 @@
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png');
_background: none;
}
.check-box-icon.disabled.active .x-icon {
display: block;
background: url('images/2x/icon/check_box_disable2.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png');
background-size: contain;
_background: none;
}
.check-box-icon.disabled.active .x-icon.hack {
background: url('images/1x/icon/check_box_disable2.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png');
_background: none;
}
.radio-icon .x-icon {
display: block;
background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
@ -310,39 +348,65 @@
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
_background: none;
}
.radio-icon.active .x-icon {
.radio-icon:hover .x-icon,
.radio-icon.hover .x-icon {
display: block;
background: url('images/2x/icon/radio_active.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png');
background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
background-size: contain;
_background: none;
}
.radio-icon.active .x-icon.hack {
background: url('images/1x/icon/radio_active.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png');
.radio-icon:hover .x-icon.hack,
.radio-icon.hover .x-icon.hack {
background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
_background: none;
}
.radio-icon.disabled .x-icon {
.radio-icon:active .x-icon {
display: block;
background: url('images/2x/"icon/radio_normal.png" "icon/radio_active.png"') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/"icon/radio_normal.png" "icon/radio_active.png"');
background-size: contain;
_background: none;
}
.radio-icon:active .x-icon.hack {
background: url('images/1x/"icon/radio_normal.png" "icon/radio_active.png"') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/"icon/radio_normal.png" "icon/radio_active.png"');
_background: none;
}
.radio-icon.active .x-icon {
display: block;
background: url('images/2x/icon/radio_disable.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png');
background-size: contain;
_background: none;
}
.radio-icon.disabled .x-icon.hack {
.radio-icon.active .x-icon.hack {
background: url('images/1x/icon/radio_disable.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png');
_background: none;
}
.radio-icon.disabled .x-icon {
display: block;
background: url('images/2x/icon/radio_disable2.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png');
background-size: contain;
_background: none;
}
.radio-icon.disabled .x-icon.hack {
background: url('images/1x/icon/radio_disable2.png') no-repeat 0 0;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png');
_background: none;
}
.check-half-select-icon .x-icon {
display: block;
background: url('images/2x/icon/half_selected.png') no-repeat 0px 0px;
background: url('images/2x/icon/half_selected.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
background-size: contain;
_background: none;
}
.check-half-select-icon .x-icon.hack {
background: url('images/1x/icon/half_selected.png') no-repeat 0px 0px;
background: url('images/1x/icon/half_selected.png') no-repeat center center;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
_background: none;
}

194
src/less/image.less

@ -18,137 +18,112 @@
_background: none;
}
.icon(@class, @iconPath, @top:0px, @left:0px) {
// 默认icon
.icon(@class, @iconPath) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath);
}
}
}
}
.icon_hover(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
// 有悬浮效果的icon
.icon_hover(@class, @iconPath, @hoverPath: @iconPath) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath, 0, 0);
}
}
&:hover .x-icon,
&.hover .x-icon,
&:active .x-icon,
&.active .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -(@left + @distance));
&.hack {
.imagePath(@iconPath, -@top, -(@left + @distance));
}
}
&.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 {
display: block;
.image2xPath(@iconPath, -@top, -@left);
&.hack {
.imagePath(@iconPath, -@top, -@left);
}
}
&:active .x-icon,
&.active .x-icon {
&.hover .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -(@left + @distance));
.image2xPath(@hoverPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -(@left + @distance));
.imagePath(@hoverPath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath, 0, 0);
}
}
}
}
.icon_hover_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
// 有悬浮、激活(选中)的icon
.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath, 0, 0);
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -(@left+@distance));
.image2xPath(@hoverPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -(@left+@distance));
.imagePath(@hoverPath, 0, 0);
}
}
&:active .x-icon,
&.active .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -(@left+@distance*2));
.image2xPath(@activePath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -(@left+@distance*2));
.imagePath(@activePath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath, 0, 0);
}
}
}
}
.icon_select(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
// 有悬浮、选中的icon
.icon_select(@class, @iconPath, @selectPath: @iconPath) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath);
}
}
&.active .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -(@left+@distance));
.image2xPath(@selectPath);
&.hack {
.imagePath(@iconPath, -@top, -(@left+@distance));
.imagePath(@selectPath);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@iconPath, -@top, -@left);
.image2xPath(@iconPath);
&.hack {
.imagePath(@iconPath, -@top, -@left);
.imagePath(@iconPath);
}
}
}
}
.icon_custom(@class, @iconPath, @disablePath:none) {
// 可自定义默认和灰化状态
.icon_custom(@class, @iconPath, @disablePath: @iconPath) {
.@{class} {
& .x-icon {
display: block;
@ -168,6 +143,7 @@
}
}
//可自定义默认、悬浮、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @disablePath) when not (@disablePath = none) {
.@{class} {
& .x-icon {
@ -197,6 +173,7 @@
}
}
// 可自定义默认、悬浮、激活(选中)、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @disablePath) when not (@disablePath = none) {
.@{class} {
& .x-icon {
@ -235,7 +212,8 @@
}
}
.icon_custom(@class, @iconPath, @hoverPath:none, @activePath:none, @disablePath:none, @activeDisablePath:none) when not (@activeDisablePath = none) {
// 可自定义默认、悬浮、激活、选中、灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath) when not (@disablePath = none) {
.@{class} {
& .x-icon {
display: block;
@ -244,6 +222,7 @@
.imagePath(@iconPath, 0, 0);
}
}
&:hover .x-icon,
&.hover .x-icon {
display: block;
@ -253,59 +232,34 @@
}
}
&:active .x-icon,
&.active .x-icon {
&:active .x-icon {
display: block;
.image2xPath(@activePath, 0, 0);
&.hack {
.imagePath(@activePath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@disablePath, 0, 0);
&.hack {
.imagePath(@disablePath, 0, 0);
}
}
&.disabled.active .x-icon {
display: block;
.image2xPath(@activeDisablePath, 0, 0);
&.hack {
.imagePath(@activeDisablePath, 0, 0);
}
}
}
}
.icon_custom_hover(@class, @iconPath, @hoverPath:none) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, 0, 0);
}
}
&:hover .x-icon,
&.hover .x-icon {
&.active .x-icon {
display: block;
.image2xPath(@hoverPath, 0, 0);
.image2xPath(@selectedPath, 0, 0);
&.hack {
.imagePath(@hoverPath, 0, 0);
.imagePath(@selectedPath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@iconPath, 0, 0);
.image2xPath(@disablePath, 0, 0);
&.hack {
.imagePath(@iconPath, 0, 0);
.imagePath(@disablePath, 0, 0);
}
}
}
}
.icon_custom_hover_active(@class, @iconPath, @hoverPath:none, @activePath) {
// 可自定义默认、悬浮、激活、选中、灰化、激活状态灰化状态
.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectPath, @disablePath, @activeDisablePath) when not (@activeDisablePath = none) {
.@{class} {
& .x-icon {
display: block;
@ -322,33 +276,15 @@
.imagePath(@hoverPath, 0, 0);
}
}
&:active .x-icon,
&.active .x-icon {
&:active .x-icon {
display: block;
.image2xPath(@activePath, 0, 0);
&.hack {
.imagePath(@activePath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, 0, 0);
}
}
}
}
.icon_custom_select(@class, @iconPath, @selectPath, @disablePath: @iconPath) {
.@{class} {
& .x-icon {
display: block;
.image2xPath(@iconPath, 0, 0);
&.hack {
.imagePath(@iconPath, 0, 0);
}
}
&.active .x-icon {
display: block;
.image2xPath(@selectPath, 0, 0);
@ -356,6 +292,7 @@
.imagePath(@selectPath, 0, 0);
}
}
&.disabled .x-icon {
display: block;
.image2xPath(@disablePath, 0, 0);
@ -363,16 +300,21 @@
.imagePath(@disablePath, 0, 0);
}
}
&.disabled.active .x-icon {
display: block;
.image2xPath(@activeDisablePath, 0, 0);
&.hack {
.imagePath(@activeDisablePath, 0, 0);
}
}
}
}
//
@color-bi-font-native: inherit;
//active
@color-bi-font-hover: inherit;
//hover
@color-bi-font-active: #3f8ce8;
// 默认font
.font(@class,@content, @color: @color-bi-font-native) {
@fc: "\@{content}";
.@{class} {
@ -390,6 +332,7 @@
}
}
// 有悬浮效果的font
.font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
@fc: "\@{content}";
.@{class} {
@ -412,7 +355,8 @@
}
}
.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) {
// 有默认、激活(选中)的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 {
@ -427,11 +371,9 @@
content: @fc;
color: @color-hover;
}
&:active .b-font:before,
&.active .b-font:before {
content: @fc;
color: @color-selected;
}
&:active .b-font:before {
content: @fc;
color: @color-active;
}
@ -442,7 +384,7 @@
}
}
.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
.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 {
@ -457,12 +399,14 @@
content: @fc;
color: @color-hover;
}
&:active .b-font:before,
&.active .b-font:before {
&: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;

6
src/less/resource/icon.less

@ -59,13 +59,13 @@
}
//CheckBox
.icon_custom_select(check-box-icon, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable);
.icon_custom(check-box-icon, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable, @icon-checkbox-active-disable);
//Radio
.icon_custom_select(radio-icon, @icon-radio-normal, @icon-radio-active, @icon-radio-disable);
.icon_custom(radio-icon, @icon-radio-normal, @icon-radio-normal, @icon-radio-normal @icon-radio-active, @icon-radio-disable, @icon-radio-active-disable);
//Half Select
.icon(check-half-select-icon, @icon-half-select);
//滑块
.icon_custom_hover(slider-icon, @icon-slider-normal, @icon-slider-active);
.icon_hover(slider-icon, @icon-slider-normal, @icon-slider-active);

Loading…
Cancel
Save