Browse Source
* commit '9fef3200aaa4f0a73a5cef99c87480a6ff0347e3': 公式编辑样式 add add 去text add richeditor safari下搜索框有人头es6
guy
7 years ago
37 changed files with 5729 additions and 961 deletions
@ -0,0 +1,25 @@
|
||||
Demo.RichEditor = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "demo-rich-editor" |
||||
}, |
||||
render: function () { |
||||
this.editor = BI.createWidget({ |
||||
type: "bi.rich_editor", |
||||
cls: "mvc-border", |
||||
width: 600, |
||||
height: 400 |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
hgap: 30, |
||||
vgap: 20, |
||||
items: [this.editor] |
||||
}) |
||||
}, |
||||
|
||||
mounted: function(){ |
||||
this.editor.setValue('这是一条<font size="4" color="#009de3">测试</font>数据') |
||||
} |
||||
}); |
||||
BI.shortcut("demo.rich_editor", Demo.RichEditor); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,69 +1,2 @@
|
||||
@import "index"; |
||||
|
||||
html, |
||||
button, |
||||
input, |
||||
select, |
||||
textarea, * { |
||||
font-family: "Microsoft YaHei", "Hiragino Sans GB W3"; |
||||
} |
||||
|
||||
html { |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
body { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
top: 0; |
||||
left: 0; |
||||
background-repeat: repeat; |
||||
.user-select-disable(); |
||||
color: @color-bi-text-normal; |
||||
font: normal 12px "Microsoft YaHei", "Hiragino Sans GB W3"; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-decoration: none; |
||||
-kthml-user-focus: normal; |
||||
-moz-user-focus: normal; |
||||
-moz-outline: 0 none; |
||||
outline: 0 none; |
||||
} |
||||
|
||||
div, textarea { |
||||
&::-webkit-scrollbar { |
||||
-webkit-appearance: none; |
||||
.background-color(@scroll-color, 5%); |
||||
width: 6px; |
||||
height: 6px; |
||||
} |
||||
&::-webkit-scrollbar-thumb { |
||||
.border-radius(0); |
||||
.background-color(@scroll-color, 30%); |
||||
&:hover { |
||||
.background-color(@scroll-color, 70%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
div, textarea { |
||||
&::-webkit-scrollbar { |
||||
-webkit-appearance: none; |
||||
.background-color(@scroll-color-theme-dark, 5%); |
||||
width: 6px; |
||||
height: 6px; |
||||
} |
||||
&::-webkit-scrollbar-thumb { |
||||
.border-radius(0); |
||||
.background-color(@scroll-color-theme-dark, 30%); |
||||
&:hover { |
||||
.background-color(@scroll-color-theme-dark, 70%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@import "../../src/less/resource/app"; |
||||
@import "var"; |
||||
|
||||
@ -1,55 +1,2 @@
|
||||
@import "image"; |
||||
@import "../../src/less/lib/icon"; |
||||
@import "../../src/less/lib/background"; |
||||
|
||||
.base-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-1, 0, 0, repeat-y); |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
.base-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 0, repeat-y); |
||||
} |
||||
} |
||||
|
||||
.first-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-2); |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
.first-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-2-theme-dark); |
||||
} |
||||
} |
||||
|
||||
.mid-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-3); |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
.mid-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-3-theme-dark); |
||||
} |
||||
} |
||||
|
||||
.last-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-4); |
||||
} |
||||
|
||||
.bi-theme-dark { |
||||
.last-line-conn-background { |
||||
.imagePath(@icon-tree-vertical-line-4-theme-dark); |
||||
} |
||||
} |
||||
|
||||
.loading-background { |
||||
.imagePath(@icon-loading); |
||||
} |
||||
|
||||
.auto-color-background { |
||||
.imagePath(@background-auto-color); |
||||
} |
||||
|
||||
.trans-color-background { |
||||
.imagePath(@background-trans-color); |
||||
} |
||||
@import "../../src/less/resource/background"; |
||||
@import "var"; |
||||
|
||||
@ -1,86 +1,2 @@
|
||||
@import "../../src/less/lib/font"; |
||||
@import "../../src/less/lib/colors"; |
||||
@import "image"; |
||||
|
||||
@font-face { |
||||
font-family: 'bi'; |
||||
src: url('@{webUrl}font/iconfont.eot'), /* IE6-IE8 */ url('@{webUrl}font/iconfont.woff') format('woff'), /* chrome、firefox */ url('@{webUrl}font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{webUrl}font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.b-font { |
||||
font-family: "bi"; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-webkit-text-stroke-width: 0.2px; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.font(close-font, @font-cross); |
||||
.font-hover(close-h-font, @font-cross); |
||||
.font-hover-active(close-ha-font, @font-cross); |
||||
|
||||
//搜索框中的带有hover后颜色变红的图标 |
||||
.font-hover(search-close-h-font, @font-cross, inherit, @color-bi-text-warning); |
||||
|
||||
.font-hover(pre-page-h-font, @font-arrow-left); |
||||
|
||||
.font-hover(next-page-h-font, @font-arrow-right); |
||||
|
||||
.font(search-font, @font-search); |
||||
|
||||
//子菜单选中 |
||||
.font(dot-font, @font-dot, @color-bi-text-black); |
||||
.font-hover(dot-h-font, @font-dot, @color-bi-text-black); |
||||
.font-hover-active(dot-ha-font, @font-dot, @color-bi-text, @color-bi-text-gray, @color-bi-text-black); |
||||
.font-effect(dot-e-font, @font-dot, @color-bi-text, @color-bi-text-gray, @color-bi-text-highlight, @color-bi-text-black); |
||||
|
||||
//向右展开子菜单 |
||||
.font(pull-right-font, @font-right-triangle); |
||||
.font-hover(pull-right-h-font, @font-right-triangle); |
||||
.font-hover-active(pull-right-ha-font, @font-right-triangle); |
||||
.font-effect(pull-right-e-font, @font-right-triangle); |
||||
|
||||
//复制 |
||||
.font(copy-font, @font-copy); |
||||
.font-hover(copy-h-font, @font-copy, @color-bi-text-black); |
||||
.font-hover-active(copy-ha-font, @font-copy); |
||||
.font-effect(copy-e-font, @font-copy); |
||||
|
||||
//选中的字段 |
||||
.font(check-mark-font, @font-check-mark); |
||||
.font-hover(check-mark-h-font, @font-check-mark); |
||||
.font-hover-active(check-mark-ha-font, @font-check-mark); |
||||
.font-effect(check-mark-e-font, @font-check-mark); |
||||
|
||||
/** dashboard组件/控件 下拉列表图标字体 ~end~**/ |
||||
|
||||
//树控件图标 |
||||
.font(tree-node-triangle-expand-font, @font-down-triangle); |
||||
.font(tree-node-triangle-collapse-font, @font-right-triangle); |
||||
|
||||
//翻页按钮字体图标 |
||||
.font-hover(row-pre-page-h-font, @font-solid-left); |
||||
.font-hover(row-next-page-h-font, @font-solid-right); |
||||
.font-hover(column-pre-page-h-font, @font-solid-top); |
||||
.font-hover(column-next-page-h-font, @font-solid-bottom); |
||||
|
||||
//下拉框小小三角 |
||||
.font-hover-active(trigger-triangle-font, @font-no-sort-no-filter, @color-bi-text-gray, @color-bi-text-gray, @color-bi-text-highlight); |
||||
|
||||
//单选下拉框 |
||||
//向下展开子菜单 |
||||
.font(pull-down-font, @font-down-triangle); |
||||
.font-hover(pull-down-h-font, @font-down-triangle); |
||||
.font-hover-active(pull-down-ha-font, @font-down-triangle); |
||||
|
||||
.font(check-font, @font-check-mark, @color-bi-text-highlight); |
||||
|
||||
.font-hover-active(item-check-font, @font-check-mark, @color-bi-text, @color-bi-text-gray, @color-bi-font-active); |
||||
|
||||
.font-hover(primary-key-font, @font-key); |
||||
|
||||
.font(drag-tag-font, @font-cross, @color-bi-text-redmark); |
||||
|
||||
//数值区间 |
||||
.font-hover-active(less-font, @font-less); |
||||
.font-hover-active(less-equal-font, @font-less-equal); |
||||
@import "../../src/less/resource/font"; |
||||
@import "var"; |
||||
|
||||
@ -1,59 +1,5 @@
|
||||
@import "image"; |
||||
@import "../../src/less/lib/icon"; |
||||
|
||||
//Tree Widget |
||||
.icon(tree-collapse-icon-type1, @icon-tree-collapse-type1); |
||||
.icon(tree-collapse-icon-type2, @icon-tree-collapse-type2); |
||||
.icon(tree-collapse-icon-type3, @icon-tree-collapse-type3); |
||||
.icon(tree-collapse-icon-type4, @icon-tree-collapse-type4); |
||||
.icon(tree-expand-icon-type1, @icon-tree-expand-type1); |
||||
.icon(tree-expand-icon-type2, @icon-tree-expand-type2); |
||||
.icon(tree-expand-icon-type3, @icon-tree-expand-type3); |
||||
.icon(tree-expand-icon-type4, @icon-tree-expand-type4); |
||||
.icon(tree-vertical-line-type2, @icon-tree-vertical-line-2); |
||||
.icon(tree-vertical-line-type3, @icon-tree-vertical-line-3); |
||||
.icon(tree-vertical-line-type4, @icon-tree-vertical-line-4); |
||||
|
||||
.bi-theme-dark{ |
||||
.icon(tree-collapse-icon-type1, @icon-tree-collapse-type1-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-collapse-icon-type2, @icon-tree-collapse-type2-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-collapse-icon-type3, @icon-tree-collapse-type3-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-collapse-icon-type4, @icon-tree-collapse-type4-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-expand-icon-type1, @icon-tree-expand-type1-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-expand-icon-type2, @icon-tree-expand-type2-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-expand-icon-type3, @icon-tree-expand-type3-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-expand-icon-type4, @icon-tree-expand-type4-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-vertical-line-type2, @icon-tree-vertical-line-2-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-vertical-line-type3, @icon-tree-vertical-line-3-theme-dark); |
||||
} |
||||
.bi-theme-dark{ |
||||
.icon(tree-vertical-line-type4, @icon-tree-vertical-line-4-theme-dark); |
||||
} |
||||
//CheckBox |
||||
.icon_custom(check-box-icon, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable, @icon-checkbox-active-disable); |
||||
//Radio |
||||
.icon_custom(radio-icon, @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); |
||||
@import "../../src/less/resource/icon"; |
||||
@import "var"; |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,355 +0,0 @@
|
||||
@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; |
||||
} |
||||
} |
||||
} |
||||
@ -1,9 +0,0 @@
|
||||
@import "../../src/less/position"; |
||||
@import "../../src/less/box-model"; |
||||
@import "../../src/less/typographic"; |
||||
@import "../../src/less/visual"; |
||||
@import "../../src/less/lib/colors"; |
||||
|
||||
@webUrl: 'https://fanruan.coding.me/fineui/dist/'; |
||||
@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址 |
||||
@image2xUrl: '@{webUrl}images/2x/'; //图片的基本地址 |
||||
@ -1,53 +1,2 @@
|
||||
/** |
||||
* Farbtastic Color Picker 1.2 |
||||
* © 2008 Steven Wittens |
||||
* |
||||
* This program is free software; you can redistribute it and/or modify |
||||
* it under the terms of the GNU General Public License as published by |
||||
* the Free Software Foundation; either version 2 of the License, or |
||||
* (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU General Public License |
||||
* along with this program; if not, write to the Free Software |
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA |
||||
*/ |
||||
@import "../../index"; |
||||
|
||||
.farbtastic { |
||||
position: relative; |
||||
} |
||||
.farbtastic * { |
||||
position: absolute; |
||||
cursor: crosshair; |
||||
} |
||||
.farbtastic, .farbtastic .wheel { |
||||
width: 195px; |
||||
height: 195px; |
||||
} |
||||
.farbtastic .color, .farbtastic .overlay { |
||||
top: 47px; |
||||
left: 47px; |
||||
width: 101px; |
||||
height: 101px; |
||||
} |
||||
.farbtastic .wheel { |
||||
background: url("@{imageUrl}third/farbtastic/wheel.png") no-repeat; |
||||
width: 195px; |
||||
height: 195px; |
||||
} |
||||
.farbtastic .overlay { |
||||
background: url("@{imageUrl}third/farbtastic/mask.png") no-repeat; |
||||
} |
||||
.farbtastic .marker { |
||||
width: 17px; |
||||
height: 17px; |
||||
margin: -8px 0 0 -8px; |
||||
overflow: hidden; |
||||
background: url("@{imageUrl}third/farbtastic/marker.png") no-repeat; |
||||
} |
||||
|
||||
@import "../../../../src/less/resource/third/farbtastic/farbtastic"; |
||||
@import "../../var"; |
||||
|
||||
@ -1,30 +1,2 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-display-tree{ |
||||
.ztree * { |
||||
color: @color-bi-text-gray; |
||||
} |
||||
& .ztree li span.button.switch.center_open{ |
||||
background-image:url("@{imageUrl}/icon/tree-vertical-line-3.png"); |
||||
} |
||||
|
||||
& .ztree li span.button.switch.roots_open{ |
||||
background-image:url("@{imageUrl}/icon/tree-vertical-line-2.png"); |
||||
} |
||||
|
||||
& .ztree li span.button.switch.bottom_open{ |
||||
background-image:url("@{imageUrl}/icon/tree-vertical-line-4.png"); |
||||
} |
||||
& .ztree li a, & .ztree li span{ |
||||
cursor: default !important; |
||||
} |
||||
& .ztree li a:hover{ |
||||
text-decoration: none; |
||||
} |
||||
& .ztree li a.curSelectedNode{ |
||||
padding-top: 1px; |
||||
border: none; |
||||
background-color: inherit; |
||||
.opacity(1); |
||||
} |
||||
} |
||||
@import "../../../../src/less/resource/third/ztree/display.tree.less"; |
||||
@import "../../var"; |
||||
|
||||
@ -1,193 +1,2 @@
|
||||
/*------------------------------------- |
||||
zTree Style |
||||
|
||||
version: 3.5.17 |
||||
author: Hunter.z |
||||
email: hunter.z@263.net |
||||
website: http://code.google.com/p/jquerytree/ |
||||
|
||||
-------------------------------------*/ |
||||
@import "../../index"; |
||||
|
||||
.ztree * {padding:0; margin:0; } |
||||
.ztree {margin:0; padding:5px; } |
||||
.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0} |
||||
.ztree li ul{ margin:0; padding:0 0 0 18px} |
||||
.ztree li ul.line{ background:url("@{imageUrl}icon/tree-vertical-line-1.png") 0 0 repeat-y;} |
||||
.bi-theme-dark{ |
||||
.ztree li ul.line{ background:url("@{imageUrl}icon/dark/tree-vertical-line-1.png") 0 0 repeat-y;} |
||||
} |
||||
|
||||
.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:24px; background-color: transparent; |
||||
text-decoration:none; vertical-align:top; display: inline-block} |
||||
.ztree li a.curSelectedNode {} |
||||
.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;} |
||||
.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid; |
||||
opacity:0.8; filter:alpha(opacity=80)} |
||||
.ztree li a.tmpTargetNode_prev {} |
||||
.ztree li a.tmpTargetNode_next {} |
||||
.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0; |
||||
font-size:12px; border:1px #7EC4CC solid; *border:0px} |
||||
.ztree li span {line-height:24px; margin-right:2px} |
||||
.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle; |
||||
border:0 none; cursor: pointer;outline:none; |
||||
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; |
||||
background-image:url("@{imageUrl}third/ztree/img/zTreeStandard.png"); *background-image:url("@{imageUrl}third/ztree/img/zTreeStandard.gif")} |
||||
|
||||
.ztree li span.button.chk {width:16px; height:16px; margin:0 3px 0 0; cursor: auto} |
||||
.ztree li span.button.chk.checkbox_false_full { |
||||
background-image:url("@{imageUrl}icon/check-box-normal.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_false_full_focus { |
||||
background-image:url("@{imageUrl}icon/check-box-normal.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_false_part { |
||||
background-image:url("@{imageUrl}icon/half_selected.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_false_part_focus { |
||||
background-image:url("@{imageUrl}icon/half_selected.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px} |
||||
.ztree li span.button.chk.checkbox_true_full { |
||||
background-image:url("@{imageUrl}icon/check-box-active.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_true_full_focus { |
||||
background-image:url("@{imageUrl}icon/check-box-active.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_true_part { |
||||
background-image:url("@{imageUrl}icon/half_selected.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_true_part_focus { |
||||
background-image:url("@{imageUrl}icon/half_selected.png"); |
||||
} |
||||
.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px} |
||||
.ztree li span.button.chk.radio_false_full {background-position:-28px 0} |
||||
.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px} |
||||
.ztree li span.button.chk.radio_false_part {background-position:-28px -28px} |
||||
.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px} |
||||
.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px} |
||||
.ztree li span.button.chk.radio_true_full {background-position:-42px 0} |
||||
.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px} |
||||
.ztree li span.button.chk.radio_true_part {background-position:-42px -28px} |
||||
.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px} |
||||
.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px} |
||||
|
||||
.ztree li span.button.switch {width:25px; height:25px} |
||||
.ztree li span.button.root_open{ |
||||
background-image:url("@{imageUrl}icon/tree-expand-1.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.root_open{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-expand-1.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.root_close{ |
||||
background-image:url("@{imageUrl}icon/tree-collapse-1.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.root_close{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-collapse-1.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.roots_open{ |
||||
background-image:url("@{imageUrl}icon/tree-expand-2.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.roots_open{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-expand-2.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.roots_close{ |
||||
background-image:url("@{imageUrl}icon/tree-collapse-2.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.roots_close{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-collapse-2.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.center_open{ |
||||
background-image:url("@{imageUrl}icon/tree-expand-3.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.center_open{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-expand-3.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.center_close{ |
||||
background-image:url("@{imageUrl}icon/tree-collapse-3.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.center_close{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-collapse-3.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.bottom_open{ |
||||
background-image:url("@{imageUrl}icon/tree-expand-4.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.bottom_open{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-expand-4.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.bottom_close{ |
||||
background-image:url("@{imageUrl}icon/tree-collapse-4.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.bottom_close{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-collapse-4.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.noline_open{background-position:-92px -72px} |
||||
.ztree li span.button.noline_close{background-position:-74px -72px} |
||||
.ztree li span.button.root_docu{ background:none;} |
||||
.ztree li span.button.roots_docu{ |
||||
background-image:url("@{imageUrl}icon/tree-vertical-line-2.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.roots_docu{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-vertical-line-2.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.center_docu{ |
||||
background-image:url("@{imageUrl}icon/tree-vertical-line-3.png"); |
||||
} |
||||
.bi-theme-dark{ |
||||
.ztree li span.button.center_docu{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-vertical-line-3.png"); |
||||
} |
||||
} |
||||
.ztree li span.button.bottom_docu{ |
||||
background-image:url("@{imageUrl}icon/tree-vertical-line-4.png"); |
||||
} |
||||
.bi-theme-dark{.ztree li span.button.bottom_docu{ |
||||
background-image:url("@{imageUrl}icon/dark/tree-vertical-line-4.png"); |
||||
} |
||||
|
||||
} |
||||
.ztree li span.button.noline_docu{ background:none;} |
||||
|
||||
.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle} |
||||
.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle} |
||||
.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle} |
||||
.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle} |
||||
.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle} |
||||
|
||||
.ztree li span.button.ico_loading{width: 0px;margin-right:2px; background:url("@{imageUrl}third/ztree/img/loading.gif") no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} |
||||
|
||||
ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)} |
||||
|
||||
span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute; |
||||
background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; |
||||
background-position:-110px -80px; background-image:url("@{imageUrl}third/ztree/img/zTreeStandard.png"); *background-image:url("@{imageUrl}third/ztree/img/zTreeStandard.gif")} |
||||
|
||||
ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)} |
||||
.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute} |
||||
|
||||
/* level style*/ |
||||
/*.ztree li span.button.level0 { |
||||
display:none; |
||||
} |
||||
.ztree li ul.level0 { |
||||
padding:0; |
||||
background:none; |
||||
}*/ |
||||
@import "../../../../src/less/resource/third/ztree/zTreeStyle"; |
||||
@import "../../var"; |
||||
|
||||
@ -0,0 +1,3 @@
|
||||
@webUrl: 'https://fanruan.coding.me/fineui/dist/'; |
||||
@imageUrl: '@{webUrl}images/1x/'; //图片的基本地址 |
||||
@image2xUrl: '@{webUrl}images/2x/'; //图片的基本地址 |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,44 @@
|
||||
/** |
||||
* 富文本编辑器 |
||||
* |
||||
* Created by GUY on 2017/9/15. |
||||
* @class BI.RichEditor |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.RichEditor = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.RichEditor.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-rich-editor bi-card" |
||||
}); |
||||
}, |
||||
_init: function () { |
||||
BI.RichEditor.superclass._init.apply(this, arguments); |
||||
var o = this.options; |
||||
this.editor = BI.createWidget({ |
||||
type: "bi.layout", |
||||
tagName: "textarea", |
||||
width: o.width || "100%", |
||||
height: o.height || "100%" |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.default", |
||||
element: this, |
||||
items: [this.editor] |
||||
}) |
||||
}, |
||||
|
||||
mounted: function () { |
||||
this.ne = new BI.nicEditor({ |
||||
maxHeight: this.options.height |
||||
}).panelInstance(this.editor.element[0]); |
||||
}, |
||||
|
||||
setValue: function (v) { |
||||
this.ne.nicInstances[0].setContent(v); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.ne.nicInstances[0].getContent(); |
||||
} |
||||
}); |
||||
BI.shortcut('bi.rich_editor', BI.RichEditor); |
||||
@ -0,0 +1,16 @@
|
||||
.bi-code-editor .param { |
||||
color: #ffffff; |
||||
padding: 0 5px; |
||||
margin: 1px 1px; |
||||
-webkit-border-radius: 2px; |
||||
-moz-border-radius: 2px; |
||||
border-radius: 2px; |
||||
background: #3f8ce8; |
||||
display: inline-block; |
||||
} |
||||
.bi-code-editor .error-param { |
||||
color: #e85050; |
||||
padding: 0 5px; |
||||
margin: 1px 1px; |
||||
display: inline-block; |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
@import "../../../bibase"; |
||||
|
||||
.bi-code-editor{ |
||||
& .param { |
||||
color: @color-bi-text; |
||||
padding: 0 5px; |
||||
margin: 1px 1px; |
||||
.border-radius(2px); |
||||
background: @color-bi-background-highlight; |
||||
display: inline-block; |
||||
} |
||||
& .error-param { |
||||
color: @color-bi-text-warning; |
||||
padding: 0 5px; |
||||
margin: 1px 1px; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue