mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:28:32 +08:00
Merge branch 'master' of https://github.com/baidu/amis
This commit is contained in:
liaoxuezhi
commit
b91048c499
@ -4,7 +4,7 @@
|
||||
"useTabs": false,
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"trailingComma": "es5",
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": false,
|
||||
"arrowParens": "avoid",
|
||||
"jsxBracketSameLine": false
|
||||
|
||||
@ -3,13 +3,10 @@ import NotFound from '../../src/components/404';
|
||||
import Layout from '../../src/components/Layout';
|
||||
import AsideNav from '../../src/components/AsideNav';
|
||||
import {AlertComponent, ToastComponent} from '../../src/components/index';
|
||||
import {
|
||||
mapTree
|
||||
} from '../../src/utils/helper';
|
||||
import { Router, Route, IndexRoute, browserHistory, hashHistory, Link, Redirect, withRouter } from 'react-router';
|
||||
import {mapTree} from '../../src/utils/helper';
|
||||
import {Router, Route, IndexRoute, browserHistory, hashHistory, Link, Redirect, withRouter} from 'react-router';
|
||||
import makeSchemaRenderer from './SchemaRender';
|
||||
|
||||
|
||||
import SimplePageSchema from './Page/Simple';
|
||||
import ErrorPageSchema from './Page/Error';
|
||||
import FormPageSchema from './Page/Form';
|
||||
@ -90,7 +87,7 @@ let ContextPath = '';
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
PathPrefix = '';
|
||||
ContextPath = '/amis'
|
||||
ContextPath = '/amis';
|
||||
}
|
||||
|
||||
const navigations = [
|
||||
@ -337,7 +334,7 @@ const navigations = [
|
||||
label: '一次性加载',
|
||||
path: 'crud/load-once',
|
||||
component: makeSchemaRenderer(LoadOnceTableCrudSchema)
|
||||
},
|
||||
}
|
||||
// {
|
||||
// label: '测试',
|
||||
// path: 'crud/test',
|
||||
@ -392,7 +389,7 @@ const navigations = [
|
||||
label: '选项卡页面3',
|
||||
path: 'tabs/tab3',
|
||||
component: makeSchemaRenderer(Tab3Schema)
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -462,7 +459,6 @@ const navigations = [
|
||||
component: makeSchemaRenderer(WizardSchema)
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
label: '排版',
|
||||
icon: 'fa fa-columns',
|
||||
@ -530,6 +526,11 @@ function isActive(link, location) {
|
||||
}
|
||||
|
||||
const themes = [
|
||||
{
|
||||
label: 'Dark',
|
||||
ns: 'dark-',
|
||||
value: 'dark'
|
||||
},
|
||||
{
|
||||
label: '默认主题',
|
||||
ns: 'a-',
|
||||
@ -545,248 +546,289 @@ const themes = [
|
||||
|
||||
@withRouter
|
||||
export class App extends React.PureComponent {
|
||||
state = {
|
||||
asideFolded: localStorage.getItem('asideFolded') === 'true',
|
||||
offScreen: false,
|
||||
headerVisible: true,
|
||||
themeIndex: 0,
|
||||
themes: themes,
|
||||
theme: themes[localStorage.getItem('themeIndex') || 0]
|
||||
};
|
||||
|
||||
state = {
|
||||
asideFolded: localStorage.getItem('asideFolded') === 'true',
|
||||
offScreen: false,
|
||||
headerVisible: true,
|
||||
themeIndex: 0,
|
||||
themes: themes,
|
||||
theme: themes[localStorage.getItem('themeIndex') || 0]
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.toggleAside = this.toggleAside.bind(this);
|
||||
this.setAsideFolded = this.setAsideFolded.bind(this);
|
||||
this.setHeaderVisible = this.setHeaderVisible.bind(this);
|
||||
}
|
||||
|
||||
this.toggleAside = this.toggleAside.bind(this);
|
||||
this.setAsideFolded = this.setAsideFolded.bind(this);
|
||||
this.setHeaderVisible = this.setHeaderVisible.bind(this);
|
||||
componentDidMount() {
|
||||
if (this.state.theme.value !== 'default') {
|
||||
document.querySelectorAll('link[title]').forEach(item => {
|
||||
item.disabled = true;
|
||||
});
|
||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps, preState) {
|
||||
const props = this.props;
|
||||
|
||||
if (preState.theme.value !== this.state.theme.value) {
|
||||
document.querySelector(`link[title=${preState.theme.value}]`).disabled = true;
|
||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.state.theme.value !== "default") {
|
||||
document.querySelectorAll('link[title]').forEach(item => {
|
||||
item.disabled = true
|
||||
});
|
||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps, preState) {
|
||||
const props = this.props;
|
||||
|
||||
if (preState.theme.value !== this.state.theme.value) {
|
||||
document.querySelector(`link[title=${preState.theme.value}]`).disabled = true;
|
||||
document.querySelector(`link[title=${this.state.theme.value}]`).disabled = false;
|
||||
}
|
||||
|
||||
if (props.location.pathname !== preProps.location.pathname) {
|
||||
this.setState({
|
||||
if (props.location.pathname !== preProps.location.pathname) {
|
||||
this.setState(
|
||||
{
|
||||
offScreen: false
|
||||
}, () => window.scrollTo(0, 0));
|
||||
|
||||
const pageURL = props.location.pathname;
|
||||
_hmt && _hmt.push(['_trackPageview', pageURL]);
|
||||
}
|
||||
}
|
||||
|
||||
toggleAside() {
|
||||
this.setAsideFolded(!this.state.asideFolded);
|
||||
}
|
||||
|
||||
setAsideFolded(folded = false) {
|
||||
localStorage.setItem('asideFolded', JSON.stringify(folded));
|
||||
this.setState({
|
||||
asideFolded: folded
|
||||
});
|
||||
}
|
||||
|
||||
setHeaderVisible(visible = false) {
|
||||
this.setState({
|
||||
headerVisible: visible
|
||||
});
|
||||
}
|
||||
|
||||
renderAside() {
|
||||
const location = this.props.location;
|
||||
|
||||
if (location.pathname === '/edit') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const theme = this.state.theme;
|
||||
|
||||
return (
|
||||
<AsideNav
|
||||
theme={theme.value}
|
||||
navigations={navigations}
|
||||
renderLink={({link, active, toggleExpand, classnames: cx}) => {
|
||||
let children = [];
|
||||
|
||||
if (link.children) {
|
||||
children.push(
|
||||
<span
|
||||
key="expand-toggle"
|
||||
className={cx('AsideNav-itemArrow')}
|
||||
onClick={(e) => toggleExpand(link, e)}
|
||||
></span>
|
||||
);
|
||||
}
|
||||
|
||||
link.badge && children.push(
|
||||
<b key="badge" className={cx(`AsideNav-itemBadge`, link.badgeClassName || 'bg-info')}>{link.badge}</b>
|
||||
);
|
||||
|
||||
link.icon && children.push(
|
||||
<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />
|
||||
);
|
||||
|
||||
children.push(
|
||||
<span className={cx(`AsideNav-itemLabel`)} key="label">{link.label}</span>
|
||||
);
|
||||
|
||||
return link.path ? (<Link to={link.path[0] === '/' ? (ContextPath + link.path) : `${ContextPath}${PathPrefix}/${link.path}`}>{children}</Link>) : (<a onClick={link.children ? () => toggleExpand(link) : null}>{children}</a>);
|
||||
}}
|
||||
isActive={link => isActive(link.path && link.path[0] === '/' ? (ContextPath + link.path) : `${ContextPath}${PathPrefix}/${link.path}`, location)}
|
||||
/>
|
||||
},
|
||||
() => window.scrollTo(0, 0)
|
||||
);
|
||||
|
||||
const pageURL = props.location.pathname;
|
||||
_hmt && _hmt.push(['_trackPageview', pageURL]);
|
||||
}
|
||||
}
|
||||
|
||||
toggleAside() {
|
||||
this.setAsideFolded(!this.state.asideFolded);
|
||||
}
|
||||
|
||||
setAsideFolded(folded = false) {
|
||||
localStorage.setItem('asideFolded', JSON.stringify(folded));
|
||||
this.setState({
|
||||
asideFolded: folded
|
||||
});
|
||||
}
|
||||
|
||||
setHeaderVisible(visible = false) {
|
||||
this.setState({
|
||||
headerVisible: visible
|
||||
});
|
||||
}
|
||||
|
||||
renderAside() {
|
||||
const location = this.props.location;
|
||||
|
||||
if (location.pathname === '/edit') {
|
||||
return null;
|
||||
}
|
||||
|
||||
renderHeader() {
|
||||
const location = this.props.location;
|
||||
const theme = this.state.theme;
|
||||
const theme = this.state.theme;
|
||||
|
||||
if (location.pathname === '/edit') {
|
||||
return (
|
||||
<div id="headerBar" className="box-shadow bg-dark">
|
||||
<div className={`${theme.ns}Layout-brand`}>AMis 可视化编辑器</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<AsideNav
|
||||
theme={theme.value}
|
||||
navigations={navigations}
|
||||
renderLink={({link, active, toggleExpand, classnames: cx}) => {
|
||||
let children = [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${theme.ns}Layout-brandBar`}>
|
||||
<button
|
||||
onClick={() => this.setState({offScreen: !this.state.offScreen})}
|
||||
className="pull-right visible-xs"
|
||||
if (link.children) {
|
||||
children.push(
|
||||
<span
|
||||
key="expand-toggle"
|
||||
className={cx('AsideNav-itemArrow')}
|
||||
onClick={e => toggleExpand(link, e)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
link.badge &&
|
||||
children.push(
|
||||
<b key="badge" className={cx(`AsideNav-itemBadge`, link.badgeClassName || 'bg-info')}>
|
||||
{link.badge}
|
||||
</b>
|
||||
);
|
||||
|
||||
link.icon && children.push(<i key="icon" className={cx(`AsideNav-itemIcon`, link.icon)} />);
|
||||
|
||||
children.push(
|
||||
<span className={cx(`AsideNav-itemLabel`)} key="label">
|
||||
{link.label}
|
||||
</span>
|
||||
);
|
||||
|
||||
return link.path ? (
|
||||
<Link
|
||||
to={
|
||||
link.path[0] === '/'
|
||||
? ContextPath + link.path
|
||||
: `${ContextPath}${PathPrefix}/${link.path}`
|
||||
}
|
||||
>
|
||||
<i className="glyphicon glyphicon-align-justify"></i>
|
||||
</button>
|
||||
<div className={`${theme.ns}Layout-brand`}>
|
||||
<i className="fa fa-paw"></i>
|
||||
<span className="hidden-folded m-l-sm">AMis Renderer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${theme.ns}Layout-headerBar`}>
|
||||
<div className="nav navbar-nav hidden-xs">
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
onClick={this.toggleAside}
|
||||
tooltip="展开或收起侧边栏"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i className={this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'} />
|
||||
</Button>
|
||||
{children}
|
||||
</Link>
|
||||
) : (
|
||||
<a onClick={link.children ? () => toggleExpand(link) : null}>{children}</a>
|
||||
);
|
||||
}}
|
||||
isActive={link =>
|
||||
isActive(
|
||||
link.path && link.path[0] === '/'
|
||||
? ContextPath + link.path
|
||||
: `${ContextPath}${PathPrefix}/${link.path}`,
|
||||
location
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
href="https://github.com/baidu/amis"
|
||||
tooltip="前往 Github 仓库地址"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i className={'fa fa-github'} />
|
||||
</Button>
|
||||
</div>
|
||||
renderHeader() {
|
||||
const location = this.props.location;
|
||||
const theme = this.state.theme;
|
||||
|
||||
<div className="hidden-xs p-t-sm pull-right">
|
||||
主题：{(
|
||||
<Select
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.theme}
|
||||
options={this.state.themes}
|
||||
onChange={(theme) => {
|
||||
this.setState({theme});
|
||||
localStorage.setItem('themeIndex', this.state.themes.indexOf(theme));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DocSearch theme={this.state.theme.value} />
|
||||
</div>
|
||||
if (location.pathname === '/edit') {
|
||||
return (
|
||||
<div id="headerBar" className="box-shadow bg-dark">
|
||||
<div className={`${theme.ns}Layout-brand`}>AMis 可视化编辑器</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
// const pathname = this.props.location.pathname;
|
||||
const theme = this.state.theme;
|
||||
return (
|
||||
<Layout
|
||||
theme={theme.value}
|
||||
offScreen={this.state.offScreen}
|
||||
header={this.state.headerVisible ? this.renderHeader() : null}
|
||||
folded={this.state.asideFolded}
|
||||
aside={this.renderAside()}
|
||||
>
|
||||
<ToastComponent theme={theme.value} />
|
||||
<AlertComponent theme={theme.value} />
|
||||
{React.cloneElement(this.props.children, {
|
||||
...this.props.children.props,
|
||||
setAsideFolded: this.setAsideFolded,
|
||||
setHeaderVisible: this.setHeaderVisible,
|
||||
theme: theme.value,
|
||||
classPrefix: theme.ns
|
||||
})}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function navigations2route(pathPrefix = PathPrefix) {
|
||||
let routes = [];
|
||||
|
||||
navigations.forEach(root => {
|
||||
root.children && mapTree(root.children, item => {
|
||||
if (item.path && item.component) {
|
||||
routes.push(
|
||||
<Route key={routes.length + 1} path={item.path[0] === '/' ? (ContextPath + item.path) : `${ContextPath}${pathPrefix}/${item.path}`} component={item.component} />
|
||||
)
|
||||
} else if (item.path && item.getComponent) {
|
||||
routes.push(
|
||||
<Route key={routes.length + 1} path={item.path[0] === '/' ? ContextPath + item.path : `${ContextPath}${pathPrefix}/${item.path}`} getComponent={item.getComponent} />
|
||||
)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return routes;
|
||||
}
|
||||
|
||||
export default function entry({pathPrefix}) {
|
||||
PathPrefix = pathPrefix || PathPrefix;
|
||||
let history = browserHistory;
|
||||
|
||||
// if (process.env.NODE_ENV === 'production') {
|
||||
// history = hashHistory;
|
||||
// }
|
||||
|
||||
return (
|
||||
<Router history={ history }>
|
||||
<Route component={App}>
|
||||
<Redirect from={`${ContextPath}/`} to={`${ContextPath}${PathPrefix}/pages/simple`} />
|
||||
<Redirect from={`${PathPrefix}/`} to={`${PathPrefix}/pages/simple`} />
|
||||
{navigations2route(PathPrefix)}
|
||||
<Route path="*" component={NotFound} />
|
||||
</Route>
|
||||
</Router>
|
||||
<div>
|
||||
<div className={`${theme.ns}Layout-brandBar`}>
|
||||
<button
|
||||
onClick={() => this.setState({offScreen: !this.state.offScreen})}
|
||||
className="pull-right visible-xs"
|
||||
>
|
||||
<i className="glyphicon glyphicon-align-justify" />
|
||||
</button>
|
||||
<div className={`${theme.ns}Layout-brand`}>
|
||||
<i className="fa fa-paw" />
|
||||
<span className="hidden-folded m-l-sm">AMis Renderer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${theme.ns}Layout-headerBar`}>
|
||||
<div className="nav navbar-nav hidden-xs">
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
onClick={this.toggleAside}
|
||||
tooltip="展开或收起侧边栏"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i className={this.state.asideFolded ? 'fa fa-indent' : 'fa fa-dedent'} />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
theme={this.state.theme.value}
|
||||
level="link"
|
||||
className="no-shadow navbar-btn"
|
||||
href="https://github.com/baidu/amis"
|
||||
tooltip="前往 Github 仓库地址"
|
||||
placement="bottom"
|
||||
iconOnly
|
||||
>
|
||||
<i className={'fa fa-github'} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="hidden-xs p-t-sm pull-right">
|
||||
主题：
|
||||
{
|
||||
<Select
|
||||
theme={this.state.theme.value}
|
||||
value={this.state.theme}
|
||||
options={this.state.themes}
|
||||
onChange={theme => {
|
||||
this.setState({theme});
|
||||
localStorage.setItem('themeIndex', this.state.themes.indexOf(theme));
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
|
||||
<DocSearch theme={this.state.theme.value} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
// const pathname = this.props.location.pathname;
|
||||
const theme = this.state.theme;
|
||||
return (
|
||||
<Layout
|
||||
theme={theme.value}
|
||||
offScreen={this.state.offScreen}
|
||||
header={this.state.headerVisible ? this.renderHeader() : null}
|
||||
folded={this.state.asideFolded}
|
||||
aside={this.renderAside()}
|
||||
>
|
||||
<ToastComponent theme={theme.value} />
|
||||
<AlertComponent theme={theme.value} />
|
||||
{React.cloneElement(this.props.children, {
|
||||
...this.props.children.props,
|
||||
setAsideFolded: this.setAsideFolded,
|
||||
setHeaderVisible: this.setHeaderVisible,
|
||||
theme: theme.value,
|
||||
classPrefix: theme.ns
|
||||
})}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function navigations2route(pathPrefix = PathPrefix) {
|
||||
let routes = [];
|
||||
|
||||
navigations.forEach(root => {
|
||||
root.children &&
|
||||
mapTree(root.children, item => {
|
||||
if (item.path && item.component) {
|
||||
routes.push(
|
||||
<Route
|
||||
key={routes.length + 1}
|
||||
path={
|
||||
item.path[0] === '/'
|
||||
? ContextPath + item.path
|
||||
: `${ContextPath}${pathPrefix}/${item.path}`
|
||||
}
|
||||
component={item.component}
|
||||
/>
|
||||
);
|
||||
} else if (item.path && item.getComponent) {
|
||||
routes.push(
|
||||
<Route
|
||||
key={routes.length + 1}
|
||||
path={
|
||||
item.path[0] === '/'
|
||||
? ContextPath + item.path
|
||||
: `${ContextPath}${pathPrefix}/${item.path}`
|
||||
}
|
||||
getComponent={item.getComponent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return routes;
|
||||
}
|
||||
|
||||
export default function entry({pathPrefix}) {
|
||||
PathPrefix = pathPrefix || PathPrefix;
|
||||
let history = browserHistory;
|
||||
|
||||
// if (process.env.NODE_ENV === 'production') {
|
||||
// history = hashHistory;
|
||||
// }
|
||||
|
||||
return (
|
||||
<Router history={history}>
|
||||
<Route component={App}>
|
||||
<Redirect from={`${ContextPath}/`} to={`${ContextPath}${PathPrefix}/pages/simple`} />
|
||||
<Redirect from={`${PathPrefix}/`} to={`${PathPrefix}/pages/simple`} />
|
||||
{navigations2route(PathPrefix)}
|
||||
<Route path="*" component={NotFound} />
|
||||
</Route>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,58 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AMis Renderer</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<link rel="stylesheet"
|
||||
href="https://bce.bdstatic.com/iconfont/iconfont.css">
|
||||
<link rel="stylesheet"
|
||||
href="font-awesome/css/font-awesome.css">
|
||||
<link rel="stylesheet"
|
||||
href="bootstrap/dist/css/bootstrap.css">
|
||||
<link rel="stylesheet"
|
||||
href="animate.css/animate.css">
|
||||
<link rel="stylesheet"
|
||||
href="highlight.js/styles/github.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
|
||||
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
|
||||
<link rel="stylesheet" title="default" href="../scss/themes/default.scss">
|
||||
<link rel="stylesheet" title="cxd" disabled href="../scss/themes/cxd.scss">
|
||||
<link rel="stylesheet" href="./doc.css">
|
||||
<link rel="stylesheet" href="./style.scss">
|
||||
<style>
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script src="./mod.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _hmt = _hmt || [];
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>AMis Renderer</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="https://bce.bdstatic.com/iconfont/iconfont.css" />
|
||||
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
|
||||
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="animate.css/animate.css" />
|
||||
<link rel="stylesheet" href="highlight.js/styles/github.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
|
||||
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
|
||||
<link rel="stylesheet" href="./doc.css" />
|
||||
<link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
|
||||
<link rel="stylesheet" title="cxd" disabled href="../scss/themes/cxd.scss" />
|
||||
<link rel="stylesheet" title="dark" disabled href="../scss/themes/dark.scss" />
|
||||
<link rel="stylesheet" href="./style.scss" />
|
||||
<style>
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
// 百度统计
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?1f80f2c9dbe21dc3af239cf9eee90f1f";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script src="./mod.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var _hmt = _hmt || [];
|
||||
|
||||
/* @require ./index.jsx 标记为同步依赖，提前加载 */
|
||||
require(['./index.jsx'], function (app) {
|
||||
var initialState = {};
|
||||
app.bootstrap(document.getElementById('root'), initialState);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
// 百度统计
|
||||
(function() {
|
||||
var hm = document.createElement('script');
|
||||
hm.src = 'https://hm.baidu.com/hm.js?1f80f2c9dbe21dc3af239cf9eee90f1f';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
|
||||
/* @require ./index.jsx 标记为同步依赖，提前加载 */
|
||||
require(['./index.jsx'], function(app) {
|
||||
var initialState = {};
|
||||
app.bootstrap(document.getElementById('root'), initialState);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// 类名前缀
|
||||
$ns: "" !default;
|
||||
$ns: '' !default;
|
||||
|
||||
// 颜色
|
||||
$white: #fff !default;
|
||||
@ -35,17 +35,13 @@ $dark: $gray800 !default;
|
||||
$remFactor: 16px !default;
|
||||
|
||||
// 字体相关
|
||||
$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, "SF Pro SC",
|
||||
"SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", "Segoe UI",
|
||||
Roboto, "Hiragino Sans GB", "Arial", "microsoft yahei ui", "Microsoft YaHei",
|
||||
SimSun, sans-serif !default;
|
||||
$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace !default;
|
||||
$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text', 'Helvetica Neue', Helvetica,
|
||||
'PingFang SC', 'Segoe UI', Roboto, 'Hiragino Sans GB', 'Arial', 'microsoft yahei ui', 'Microsoft YaHei', SimSun,
|
||||
sans-serif !default;
|
||||
$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
|
||||
$fontFamilyBase: $fontFamilySansSerif !default;
|
||||
|
||||
$fontSizeBase: px2rem(
|
||||
14px
|
||||
) !default; // Assumes the browser default, typically `16px`
|
||||
$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`
|
||||
$fontSizeMd: px2rem(16px) !default;
|
||||
$fontSizeLg: px2rem(20px) !default;
|
||||
$fontSizeSm: px2rem(12px) !default;
|
||||
@ -142,10 +138,8 @@ $Layout-aside--md-width: px2rem(250px) !default;
|
||||
$Layout-aside--lg-width: px2rem(300px) !default;
|
||||
$Layout-aside--folded-width: px2rem(60px) !default;
|
||||
$Layout-aside-bg: $dark !default;
|
||||
$Layout-aside-onAcitve-bg: saturate(
|
||||
darken($Layout-aside-bg, 5%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%), 2.5%) !default;
|
||||
$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%), 2.5%) !default;
|
||||
$Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default;
|
||||
$Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default;
|
||||
|
||||
@ -159,23 +153,19 @@ $Layout-asideLink-fontSize: $fontSizeBase !default;
|
||||
$Layout-asideLink-color: #b4b6bd !default;
|
||||
$Layout-asideLink-onHover-color: #fff !default;
|
||||
$Layout-asideLink-onActive-color: #fff !default;
|
||||
$Layout-asideLink-arrowVendor: "FontAwesome" !default;
|
||||
$Layout-asideLink-arrowVendor: 'FontAwesome' !default;
|
||||
$Layout-asideLink-arrowFontSize: $fontFamilyBase !default;
|
||||
$Layout-asideLink-arrowIcon: "\f105" !default;
|
||||
$Layout-asideLink-arrowIcon: '\f105' !default;
|
||||
$Layout-asideLink-arrowColor: $Layout-asideLink-color !default;
|
||||
$Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;
|
||||
$Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;
|
||||
$Layout-brand-bg: $dark !default;
|
||||
$Layout-brandBar-color: desaturate(
|
||||
lighten($Layout-brand-bg, 40%),
|
||||
10%
|
||||
) !default;
|
||||
$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%), 10%) !default;
|
||||
$Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default;
|
||||
$Layout-header-height: px2rem(50px) !default;
|
||||
$Layout-headerBar-borderBottom: none !default;
|
||||
$Layout-header-bg: $white !default;
|
||||
$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),
|
||||
0 1px 0 rgba(0, 0, 0, 0.05) !default;
|
||||
$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05) !default;
|
||||
$Layout-nav-height: px2rem(40px) !default;
|
||||
$Layout-nav-lgHeight: px2rem(50px) !default;
|
||||
$Layout-nav--folded-height: px2rem(50px) !default;
|
||||
@ -208,9 +198,7 @@ $Modal-header-bg: darken($Modal-bg, 2.5%) !default;
|
||||
$Modal-title-lineHeight: $lineHeightBase !default;
|
||||
$Modal-title-fontSize: $fontSizeBase !default;
|
||||
$Modal-title-color: $text--loud-color !default;
|
||||
$Modal-header-paddingY: (
|
||||
$Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize
|
||||
) / 2 !default;
|
||||
$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;
|
||||
$Modal-header-paddingX: $gap-md !default;
|
||||
$Modal-close-width: px2rem(12px) !default;
|
||||
$Modal-close-color: $text--muted-color !default;
|
||||
@ -218,10 +206,8 @@ $Model-close-onHover-color: $text-color !default;
|
||||
$Modal-body-paddingX: $gap-md !default;
|
||||
$Modal-body-paddingY: $gap-md !default;
|
||||
$Modal-body--noHeader-paddingTop: $gap-base;
|
||||
$Modal-body-borderTop: $Modal-content-borderWidth solid
|
||||
lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderBottom: $Modal-content-borderWidth solid
|
||||
lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
|
||||
$Modal-footer-padding: $gap-sm !default;
|
||||
$Modal-footer-marginY: 0 !default;
|
||||
$Modal-footer-marginX: 0 !default;
|
||||
@ -325,12 +311,12 @@ $Toast--warning-color: $Toast-color !default;
|
||||
$Toast--warning-bgColor: $warning !default;
|
||||
$Toast--warning-borderColor: $warning !default;
|
||||
|
||||
$Toast-iconVendor: "FontAwesome" !default;
|
||||
$Toast-iconVendor: 'FontAwesome' !default;
|
||||
|
||||
$Toast--error-icon: "\f06a" !default;
|
||||
$Toast--warning-icon: "\f071" !default;
|
||||
$Toast--info-icon: "\f05a" !default;
|
||||
$Toast--success-icon: "\f00c" !default;
|
||||
$Toast--error-icon: '\f06a' !default;
|
||||
$Toast--warning-icon: '\f071' !default;
|
||||
$Toast--info-icon: '\f05a' !default;
|
||||
$Toast--success-icon: '\f00c' !default;
|
||||
|
||||
// alert
|
||||
$Alert-fontSize: $fontSizeBase !default;
|
||||
@ -344,10 +330,7 @@ $Alert-marginBottom: $gap-md !default;
|
||||
|
||||
$Alert--danger-color: #a94442 !default;
|
||||
$Alert--danger-bg: #f2dede !default;
|
||||
$Alert--danger-borderColor: darken(
|
||||
adjust-hue($Alert--danger-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10), 5%) !default;
|
||||
|
||||
$Alert--info-color: #31708f !default;
|
||||
$Alert--info-bg: #d9edf7 !default;
|
||||
@ -355,17 +338,11 @@ $Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default;
|
||||
|
||||
$Alert--success-color: #3c763d !default;
|
||||
$Alert--success-bg: #dff0d8 !default;
|
||||
$Alert--success-borderColor: darken(
|
||||
adjust-hue($Alert--success-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10), 5%) !default;
|
||||
|
||||
$Alert--warning-color: #8a6d3b !default;
|
||||
$Alert--warning-bg: #fcf8e3 !default;
|
||||
$Alert--warning-borderColor: darken(
|
||||
adjust-hue($Alert--warning-bg, -10),
|
||||
5%
|
||||
) !default;
|
||||
$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10), 5%) !default;
|
||||
|
||||
// spinner
|
||||
$Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default;
|
||||
@ -374,7 +351,7 @@ $Spinner-height: px2rem(26px) !default;
|
||||
$Spinner--lg-width: px2rem(50px) !default;
|
||||
$Spinner--lg-height: px2rem(50px) !default;
|
||||
|
||||
$Spinner-bg: url("./spinner-default.svg") !default;
|
||||
$Spinner-bg: url('./spinner-default.svg') !default;
|
||||
|
||||
// Tabs
|
||||
$Tabs-linkFontSize: $fontSizeBase !default;
|
||||
@ -390,6 +367,10 @@ $Tabs-onActive-borderBottomColor: transparent !default;
|
||||
$Tabs-onActive-borderBottomWidth: initial !default;
|
||||
$Tabs-onActive-bg: $background !default;
|
||||
$Tabs-content-bg: $background !default;
|
||||
$Tabs--card-bg: $background !default;
|
||||
$Tabs--card-borderTopColor: #e2e5ec !default;
|
||||
$Tabs--card-onActive-bg: #eceff8 !default;
|
||||
$Tabs--radio-bg: #eaf6fe !default;
|
||||
|
||||
// Nav
|
||||
$Nav-item-fontSize: $fontSizeBase !default;
|
||||
@ -432,8 +413,7 @@ $Table-thead-iconColor: $text--muted-color !default;
|
||||
$TableCell-height: px2rem(40px) !default;
|
||||
$TableCell-paddingX: $gap-sm !default;
|
||||
$TableCell--edge-paddingX: $gap-md !default;
|
||||
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) /
|
||||
2;
|
||||
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;
|
||||
$Table-placeholder-height: px2rem(100px) !default;
|
||||
|
||||
// $Table-checkCell-width: px2rem(50px) !default;
|
||||
@ -448,20 +428,14 @@ $Table-onChecked-bg: #d9f3fb !default;
|
||||
$Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
|
||||
$Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;
|
||||
$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;
|
||||
$Table-onChecked-onHover-borderColor: darken(
|
||||
$Table-onChecked-borderColor,
|
||||
5%
|
||||
) !default;
|
||||
$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, 5%) !default;
|
||||
$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;
|
||||
|
||||
$Table-onModified-bg: #e8f0fe !default;
|
||||
$Table-onModified-color: #4285f4 !default;
|
||||
$Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;
|
||||
$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;
|
||||
$Table-onModified-onHover-borderColor: darken(
|
||||
$Table-onModified-onHover-bg,
|
||||
5%
|
||||
) !default;
|
||||
$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg, 5%) !default;
|
||||
$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;
|
||||
|
||||
$Table-onDragging-opacity: 0.1 !default;
|
||||
@ -476,18 +450,18 @@ $Table-heading-bg: $white !default;
|
||||
$Table--unsaved-heading-bg: #e8f0fe !default;
|
||||
$Table--unsaved-heading-color: #4285f4 !default;
|
||||
|
||||
$Table-expandBtn-vendor: "FontAwesome" !default;
|
||||
$Table-expandBtn-vendor: 'FontAwesome' !default;
|
||||
$Table-expandBtn-fontSize: px2rem(20px) !default;
|
||||
$Table-expandBtn-color: $info !default;
|
||||
$Table-expandBtn-icon: "\f105" !default;
|
||||
$Table-expandBtn-icon: '\f105' !default;
|
||||
|
||||
$TableCell-sortBtn-width: px2rem(8px) !default;
|
||||
$TableCell-sortBtn--down-iconVendor: "fontAwesome" !default;
|
||||
$TableCell-sortBtn--down-icon: "\f0dd" !default;
|
||||
$TableCell-sortBtn--up-iconVendor: "fontAwesome" !default;
|
||||
$TableCell-sortBtn--up-icon: "\f0de" !default;
|
||||
$TableCell-sortBtn--default-iconVendor: "fontAwesome" !default;
|
||||
$TableCell-sortBtn--default-icon: "\f0dc" !default;
|
||||
$TableCell-sortBtn--down-iconVendor: 'fontAwesome' !default;
|
||||
$TableCell-sortBtn--down-icon: '\f0dd' !default;
|
||||
$TableCell-sortBtn--up-iconVendor: 'fontAwesome' !default;
|
||||
$TableCell-sortBtn--up-icon: '\f0de' !default;
|
||||
$TableCell-sortBtn--default-iconVendor: 'fontAwesome' !default;
|
||||
$TableCell-sortBtn--default-icon: '\f0dc' !default;
|
||||
$TableCell-sortBtn--default-opacity: 0.4 !default;
|
||||
$TableCell-sortBtn--default-onActive-opacity: 0.4 !default;
|
||||
|
||||
@ -557,6 +531,9 @@ $Copyable-onHover-iconColor: $text-color !default;
|
||||
$PopOverAble-iconColor: $text--muted-color !default;
|
||||
$PopOverAble-onHover-iconColor: $text-color !default;
|
||||
|
||||
// PopOver
|
||||
$PopOver-bg: white !default;
|
||||
|
||||
// Remark
|
||||
$Remark-width: 1rem !default;
|
||||
$Remark-icon-fontSize: $fontSizeBase !default;
|
||||
@ -616,15 +593,10 @@ $Form-input-placeholderColor: $text--muted-color !default;
|
||||
$Form-input-lineHeight: 20/14 !default;
|
||||
$Form-input-fontSize: $Form-fontSize !default;
|
||||
$Form-input-boxShadow: none !default;
|
||||
$Form-input-paddingY: (
|
||||
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px)
|
||||
)/2 !default;
|
||||
$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
|
||||
$Form-input-paddingX: px2rem(12px) !default;
|
||||
$Form-input-marginBottom: px2rem(6px) !default;
|
||||
$Form-label-paddingTop: (
|
||||
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
|
||||
)/2 !default;
|
||||
$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;
|
||||
|
||||
$Form-input-addOnBg: #edf1f2 !default;
|
||||
$Form-input-addOnColor: $text-color !default;
|
||||
@ -632,19 +604,20 @@ $Form-input-onFocus-addOnColor: $primary !default;
|
||||
$Form-input-addOnDividerBorderWidth: $borderWidth !default;
|
||||
|
||||
$Number-bg: $Form-input-bg !default;
|
||||
$Number-onDisabled-bg: $Form-input-bg !default;
|
||||
$Number-borderColor: $Form-input-borderColor !default;
|
||||
$Number-borderWidth: $Form-input-borderWidth !default;
|
||||
$Number-borderRadius: $Form-input-borderRadius !default;
|
||||
$Number-handler-mode: "vertical" !default;
|
||||
$Number-handler-mode: 'vertical' !default;
|
||||
$Number-handler-borderBottom: px2rem(1px) solid $Form-input-borderColor !default;
|
||||
$Number-handler-width: px2rem(20px) !default;
|
||||
$Number-handler-color: $Form-input-color !default;
|
||||
$Number-handler-onDisabled-color: $text--muted-color !default;
|
||||
$Number-handler-fontFamily: inherit !default;
|
||||
$Number-handler-fontSize: $fontSizeBase !default;
|
||||
$Number-handler--up-content: "+" !default;
|
||||
$Number-handler--up-content: '+' !default;
|
||||
$Number-handler--up-transform: none !default;
|
||||
$Number-handler--down-content: "-" !default;
|
||||
$Number-handler--down-content: '-' !default;
|
||||
$Number-handler-bg: $white !default;
|
||||
$Number-handler-onHover-bg: darken($Number-handler-bg, 5%) !default;
|
||||
$Number-handler-onHover-color: $text-color !default;
|
||||
@ -665,17 +638,11 @@ $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
|
||||
$Form-selectOption-height: $Form-input-height !default;
|
||||
$Form-selectValue-color: #007eff !default;
|
||||
$Form-selectValue-bg: saturate(
|
||||
lighten($Form-selectValue-color, 40%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Form-selectValue-borderColor: saturate(
|
||||
lighten($Form-selectValue-color, 30%),
|
||||
2.5%
|
||||
) !default;
|
||||
$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
|
||||
$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
|
||||
$Form-selectValue-fontSize: $fontSizeSm !default;
|
||||
$Form-select-caret-vender: "FontAwesome" !default;
|
||||
$Form-select-caret-icon: "\f0d7" !default;
|
||||
$Form-select-caret-vender: 'FontAwesome' !default;
|
||||
$Form-select-caret-icon: '\f0d7' !default;
|
||||
$Form-select-caret-fontSize: $fontSizeBase !default;
|
||||
$Form-select-caret-iconColor: $Form-input-iconColor !default;
|
||||
$Form-select-caret-onHover-iconColor: $Form-input-iconColor !default;
|
||||
@ -699,10 +666,7 @@ $InputGroup-addOn-bg: $Form-input-addOnBg !default;
|
||||
$InputGroup-addOn-borderWidth: $Form-input-borderWidth !default;
|
||||
$InputGroup-addOn-borderColor: $Form-input-borderColor !default;
|
||||
$InputGroup-addOn-borderRadius: $Form-input-borderRadius !default;
|
||||
$InputGroup-paddingY: (
|
||||
$InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px)
|
||||
)/2 !default;
|
||||
$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
|
||||
$InputGroup-paddingX: px2rem(10px) !default;
|
||||
$InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$InputGroup-select-borderWidth: $Form-select-borderWidth !default;
|
||||
@ -728,10 +692,7 @@ $Button-height: $Form-input-height !default;
|
||||
$Button-mimWidth: auto !default;
|
||||
$Button-lineHeight: $Form-input-lineHeight !default;
|
||||
$Button-paddingX: px2rem(12px) !default;
|
||||
$Button-paddingY: (
|
||||
$Button-height - $Button-borderWidth * 2 - $Button-lineHeight *
|
||||
$Button-fontSize
|
||||
)/2 !default;
|
||||
$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;
|
||||
|
||||
$Button--iconOnly-minWidthRate: 4 / 3 !default;
|
||||
|
||||
@ -739,40 +700,27 @@ $Button--xs-fontSize: $fontSizeXs !default;
|
||||
$Button--xs-height: px2rem(22px) !default;
|
||||
$Button--xs-lineHeight: 18 / 11 !default;
|
||||
$Button--xs-paddingX: px2rem(5px) !default;
|
||||
$Button--xs-paddingY: (
|
||||
$Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight *
|
||||
$Button--xs-fontSize
|
||||
)/2 !default;
|
||||
$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;
|
||||
|
||||
$Button--sm-fontSize: $fontSizeSm !default;
|
||||
$Button--sm-height: px2rem(30px) !default;
|
||||
$Button--sm-lineHeight: 18 / 12 !default;
|
||||
$Button--sm-paddingX: px2rem(8px) !default;
|
||||
$Button--sm-paddingY: (
|
||||
$Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight *
|
||||
$Button--sm-fontSize
|
||||
)/2 !default;
|
||||
$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;
|
||||
|
||||
$Button--md-fontSize: $Button-fontSize !default;
|
||||
$Button--md-height: $Button-height !default;
|
||||
$Button--md-lineHeight: $Button-lineHeight !default;
|
||||
$Button--md-paddingX: $Button-paddingX !default;
|
||||
$Button--md-paddingY: (
|
||||
$Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight *
|
||||
$Button--md-fontSize
|
||||
)/2 !default;
|
||||
$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;
|
||||
|
||||
$Button--lg-fontSize: $fontSizeLg !default;
|
||||
$Button--lg-height: px2rem(46px) !default;
|
||||
$Button--lg-lineHeight: 24 / 20 !default;
|
||||
$Button--lg-paddingX: px2rem(16px) !default;
|
||||
$Button--lg-paddingY: (
|
||||
$Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight *
|
||||
$Button--lg-fontSize
|
||||
)/2 !default;
|
||||
$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;
|
||||
|
||||
$Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),
|
||||
0 1px 1px rgba($black, 0.075) !default;
|
||||
$Button-boxShadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
|
||||
$Button-onFocus-boxShadow: none !default;
|
||||
$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
|
||||
$Button-onDisabled-opacity: 0.65 !default;
|
||||
@ -784,8 +732,8 @@ $Button-borderRadius: $borderRadius !default;
|
||||
$Button--lg-borderRadius: $borderRadius !default;
|
||||
$Button--sm-borderRadius: $borderRadius !default;
|
||||
|
||||
$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
|
||||
$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out !default;
|
||||
|
||||
$Button--primary-bg: $primary !default;
|
||||
$Button--primary-border: $Button--primary-bg !default;
|
||||
@ -794,26 +742,17 @@ $Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default;
|
||||
$Button--primary-onHover-border: darken($Button--primary-border, 10%) !default;
|
||||
$Button--primary-onHover-color: $Button--primary-color !default;
|
||||
$Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default;
|
||||
$Button--primary-onActive-border: darken(
|
||||
$Button--primary-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--primary-onActive-border: darken($Button--primary-border, 12.5%) !default;
|
||||
$Button--primary-onActive-color: $Button--primary-color !default;
|
||||
|
||||
$Button--secondary-bg: $secondary !default;
|
||||
$Button--secondary-border: $Button--secondary-bg !default;
|
||||
$Button--secondary-color: $white !default;
|
||||
$Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default;
|
||||
$Button--secondary-onHover-border: darken(
|
||||
$Button--secondary-border,
|
||||
10%
|
||||
) !default;
|
||||
$Button--secondary-onHover-border: darken($Button--secondary-border, 10%) !default;
|
||||
$Button--secondary-onHover-color: $Button--secondary-color !default;
|
||||
$Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default;
|
||||
$Button--secondary-onActive-border: darken(
|
||||
$Button--secondary-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--secondary-onActive-border: darken($Button--secondary-border, 12.5%) !default;
|
||||
$Button--secondary-onActive-color: $Button--secondary-color !default;
|
||||
|
||||
$Button--success-bg: $success !default;
|
||||
@ -823,10 +762,7 @@ $Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default;
|
||||
$Button--success-onHover-border: darken($Button--success-border, 10%) !default;
|
||||
$Button--success-onHover-color: $Button--success-color !default;
|
||||
$Button--success-onActive-bg: darken($Button--success-bg, 10%) !default;
|
||||
$Button--success-onActive-border: darken(
|
||||
$Button--success-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--success-onActive-border: darken($Button--success-border, 12.5%) !default;
|
||||
$Button--success-onActive-color: $Button--success-color !default;
|
||||
|
||||
$Button--info-bg: $info !default;
|
||||
@ -846,10 +782,7 @@ $Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default;
|
||||
$Button--warning-onHover-border: darken($Button--warning-border, 10%) !default;
|
||||
$Button--warning-onHover-color: $Button--warning-color !default;
|
||||
$Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default;
|
||||
$Button--warning-onActive-border: darken(
|
||||
$Button--warning-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--warning-onActive-border: darken($Button--warning-border, 12.5%) !default;
|
||||
$Button--warning-onActive-color: $Button--warning-color !default;
|
||||
|
||||
$Button--danger-bg: $danger !default;
|
||||
@ -889,10 +822,7 @@ $Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default;
|
||||
$Button--default-onHover-border: darken($Button--default-border, 10%) !default;
|
||||
$Button--default-onHover-color: $Button--default-color !default;
|
||||
$Button--default-onActive-bg: darken($Button--default-bg, 10%) !default;
|
||||
$Button--default-onActive-border: darken(
|
||||
$Button--default-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Button--default-onActive-border: darken($Button--default-border, 12.5%) !default;
|
||||
$Button--default-onActive-color: $Button--default-color !default;
|
||||
|
||||
$Button--link-color: $text-color !default;
|
||||
@ -908,9 +838,7 @@ $DropDown-menu-height: px2rem(34px) !default;
|
||||
$DropDown-menu-minWidth: px2rem(160px) !default;
|
||||
$DropDown-menu-paddingY: $gap-xs !default;
|
||||
$DropDown-menu-paddingX: 0 !default;
|
||||
$DropDown-menuItem-paddingY: (
|
||||
$DropDown-menu-height - $fontSizeBase * $lineHeightBase
|
||||
) / 2 !default;
|
||||
$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;
|
||||
$DropDown-menuItem-paddingX: $gap-sm !default;
|
||||
$DropDown-menuItem-onHover-color: inherit !default;
|
||||
$DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default;
|
||||
@ -922,7 +850,10 @@ $Checkbox-inner-size: $Checkbox-size / 2 !default;
|
||||
$Checkbox--full-inner-size: px2rem(12px) !default;
|
||||
$Checkbox-color: $Form-input-borderColor !default;
|
||||
$Checkbox-onHover-color: $info !default;
|
||||
|
||||
$Checkbox--sm-size: px2rem(16px) !default;
|
||||
$Checkbox-gb: #fff !default;
|
||||
$Checkbox-borderRadius: $borderRadius !default;
|
||||
|
||||
// Radio
|
||||
$Radio-size: $Checkbox-size !default;
|
||||
@ -943,6 +874,9 @@ $Switch-onDisabled-bgColor: #ccc !default;
|
||||
$Switch-onDisabled-color: #fff !default;
|
||||
$Switch-onDisabled-circle-BackgroundColor: $white !default;
|
||||
|
||||
// Fieldset
|
||||
$Fieldset-legend-bgColor: $white !default;
|
||||
|
||||
// color Picker
|
||||
$ColorPicker-color: $Form-input-color !default;
|
||||
$ColorPicker-bg: $white !default;
|
||||
@ -957,9 +891,8 @@ $ColorPicker-height: $Form-input-height !default;
|
||||
$ColorPicker-lineHeight: $Form-input-lineHeight !default;
|
||||
$ColorPicker-fontSize: $Form-input-fontSize !default;
|
||||
$ColorPicker-paddingX: px2rem(12px) !default;
|
||||
$ColorPicker-paddingY: (
|
||||
$ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize
|
||||
)/2 - $ColorPicker-borderWidth !default;
|
||||
$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 -
|
||||
$ColorPicker-borderWidth !default;
|
||||
$ColorPicker-placeholderColor: $Form-input-placeholderColor !default;
|
||||
$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$DatePicker-onHover-borderColor: $Form-input-borderColor !default;
|
||||
@ -975,22 +908,21 @@ $DatePicker-height: $Form-input-height !default;
|
||||
$DatePicker-lineHeight: $Form-input-lineHeight !default;
|
||||
$DatePicker-fontSize: $Form-input-fontSize !default;
|
||||
$DatePicker-paddingX: px2rem(12px) !default;
|
||||
$DatePicker-paddingY: (
|
||||
$DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize
|
||||
)/2 - $DatePicker-borderWidth !default;
|
||||
$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
|
||||
$DatePicker-placeholderColor: $Form-input-placeholderColor !default;
|
||||
$DatePicker-iconColor: $gray600 !default;
|
||||
$DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;
|
||||
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
|
||||
$DatePicker-toggler-vendor: "FontAwesome" !default;
|
||||
$DatePicker-toggler-vendor: 'FontAwesome' !default;
|
||||
$DatePicker-toggler-fontSize: $Form-fontSize !default;
|
||||
$DatePicker-toggler-icon: "\f073" !default;
|
||||
$DatePicker-prevBtn-vendor: "FontAwesome" !default;
|
||||
$DatePicker-toggler-icon: '\f073' !default;
|
||||
$DatePicker-prevBtn-vendor: 'FontAwesome' !default;
|
||||
$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
|
||||
$DatePicker-prevBtn-icon: "\f104" !default;
|
||||
$DatePicker-nextBtn-vendor: "FontAwesome" !default;
|
||||
$DatePicker-prevBtn-icon: '\f104' !default;
|
||||
$DatePicker-nextBtn-vendor: 'FontAwesome' !default;
|
||||
$DatePicker-nextBtn-fontSize: $fontSizeMd !default;
|
||||
$DatePicker-nextBtn-icon: "\f105" !default;
|
||||
$DatePicker-nextBtn-icon: '\f105' !default;
|
||||
$DatePicker-header-select-borderColor: #fff !default;
|
||||
|
||||
$Calendar-fontSize: $fontSizeBase !default;
|
||||
|
||||
@ -1002,18 +934,13 @@ $Calendar-input-borderRadius: $borderRadius !default;
|
||||
$Calendar-input-height: px2rem(30px) !default;
|
||||
$Calendar-input-lineHeight: $lineHeightBase;
|
||||
$Calendar-input-paddingX: px2rem(10px) !default;
|
||||
$Calendar-input-paddingY: (
|
||||
$Calendar-input-height - $Calendar-input-lineHeight *
|
||||
$Calendar-input-fontSize
|
||||
) / 2;
|
||||
$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2;
|
||||
|
||||
$Calendar-btn-fontSize: $fontSizeSm !default;
|
||||
$Calendar-btn-lineHeight: $lineHeightBase !default;
|
||||
$Calendar-btn-height: px2rem(30px) !default;
|
||||
$Calendar-btn-paddingX: px2rem(10px) !default;
|
||||
$Calendar-btn-paddingY: (
|
||||
$Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize
|
||||
)/2 !default;
|
||||
$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;
|
||||
|
||||
$Calendar-btn-bg: $info !default;
|
||||
$Calendar-btn-border: $Calendar-btn-bg !default;
|
||||
@ -1031,16 +958,10 @@ $Calendar-btnCancel-border: $Calendar-btnCancel-bg !default;
|
||||
$Calendar-btnCancel-borderRadius: $Button-borderRadius !default;
|
||||
$Calendar-btnCancel-color: $text-color !default;
|
||||
$Calendar-btnCancel-onHover-bg: darken($Calendar-btnCancel-bg, 7.5%) !default;
|
||||
$Calendar-btnCancel-onHover-border: darken(
|
||||
$Calendar-btnCancel-border,
|
||||
10%
|
||||
) !default;
|
||||
$Calendar-btnCancel-onHover-border: darken($Calendar-btnCancel-border, 10%) !default;
|
||||
$Calendar-btnCancel-onHover-color: $Calendar-btnCancel-color !default;
|
||||
$Calendar-btnCancel-onActive-bg: darken($Calendar-btnCancel-bg, 10%) !default;
|
||||
$Calendar-btnCancel-onActive-border: darken(
|
||||
$Calendar-btnCancel-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$Calendar-btnCancel-onActive-border: darken($Calendar-btnCancel-border, 12.5%) !default;
|
||||
$Calendar-btnCancel-onActive-color: $Calendar-btnCancel-color !default;
|
||||
|
||||
$Calendar-color: $text-color !default;
|
||||
@ -1063,18 +984,12 @@ $ListControl-item-paddingX: px2rem(12px) !default;
|
||||
$ListControl-item-paddingY: px2rem(6px) !default;
|
||||
$ListControl-item-color: $text-color !default;
|
||||
|
||||
$ListControl-item-onHover-borderColor: darken(
|
||||
$ListControl-item-borderColor,
|
||||
10%
|
||||
) !default;
|
||||
$ListControl-item-onHover-borderColor: darken($ListControl-item-borderColor, 10%) !default;
|
||||
$ListControl-item-onHover-bg: darken($ListControl-item-bg, 7.5%) !default;
|
||||
$ListControl-item-onHover-color: $ListControl-item-color !default;
|
||||
|
||||
$ListControl-item-onActive-bg: $primary !default;
|
||||
$ListControl-item-onActive-borderColor: darken(
|
||||
$ListControl-item-onActive-bg,
|
||||
10%
|
||||
) !default;
|
||||
$ListControl-item-onActive-borderColor: darken($ListControl-item-onActive-bg, 10%) !default;
|
||||
$ListControl-item-onActive-color: $white !default;
|
||||
$ListControl-item-onActive-before-bg: $white !default;
|
||||
$ListControl-item-onActive-after-borderColor: $primary !default;
|
||||
@ -1108,8 +1023,7 @@ $Combo-addBtn-height: px2rem(26px) !default;
|
||||
$Combo-addBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$Combo-addBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$Combo-addBtn-paddingY: (
|
||||
$Combo-addBtn-height - $Button-borderWidth * 2 -
|
||||
$Combo-addBtn-lineHeight * $Combo-addBtn-fontSize
|
||||
$Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
$Combo--vertical-item-gap: px2rem(5px);
|
||||
@ -1125,10 +1039,7 @@ $Combo--vertical-itemToolbar-bg: $info !default;
|
||||
$Combo--vertical-itemToolbar-color: darken($white, 5%) !default;
|
||||
$Combo--vertical-itemToolbar-onHover-color: $white !default;
|
||||
$Combo--vertical-itemToolbar-borderWidth: $borderWidth !default;
|
||||
$Combo--vertical-itemToolbar-borderColor: darken(
|
||||
$Combo--vertical-itemToolbar-bg,
|
||||
5%
|
||||
) !default;
|
||||
$Combo--vertical-itemToolbar-borderColor: darken($Combo--vertical-itemToolbar-bg, 5%) !default;
|
||||
$Combo--vertical-itemToolbar-borderRadius: px2rem(3px) !default;
|
||||
$Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default;
|
||||
$Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default;
|
||||
@ -1144,10 +1055,7 @@ $SubForm--addBtn-onHover-bg: darken($SubForm--addBtn-bg, 7.5%) !default;
|
||||
$SubForm--addBtn-onHover-border: darken($SubForm--addBtn-border, 10%) !default;
|
||||
$SubForm--addBtn-onHover-color: $SubForm--addBtn-color !default;
|
||||
$SubForm--addBtn-onActive-bg: darken($SubForm--addBtn-bg, 10%) !default;
|
||||
$SubForm--addBtn-onActive-border: darken(
|
||||
$SubForm--addBtn-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$SubForm--addBtn-onActive-border: darken($SubForm--addBtn-border, 12.5%) !default;
|
||||
$SubForm--addBtn-onActive-color: $SubForm--addBtn-color !default;
|
||||
|
||||
$SubForm--addBtn-fontSize: $Button--sm-fontSize !default;
|
||||
@ -1156,8 +1064,7 @@ $SubForm--addBtn-height: $Button--sm-height !default;
|
||||
$SubForm--addBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$SubForm--addBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$SubForm--addBtn-paddingY: (
|
||||
$SubForm--addBtn-height - $Button-borderWidth * 2 -
|
||||
$SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize
|
||||
$SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
// InputRange
|
||||
@ -1171,8 +1078,7 @@ $InputRange-onDisabled-color: #cccccc !default;
|
||||
$InputRange-slider-bg: $InputRange-primaryColor !default;
|
||||
$InputRange-slider-border: px2rem(1px) solid $InputRange-primaryColor !default;
|
||||
$InputRange-slider-onFocus-borderRadius: $borderRadiusMd !default;
|
||||
$InputRange-slider-onFocus-boxShadow: 0 0 0
|
||||
$InputRange-slider-onFocus-borderRadius
|
||||
$InputRange-slider-onFocus-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius
|
||||
transparentize($InputRange-slider-bg, 0.8) !default;
|
||||
$InputRange-slider-height: px2rem(24px) !default;
|
||||
$InputRange-slider-width: px2rem(18px) !default;
|
||||
@ -1180,8 +1086,7 @@ $InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out
|
||||
$InputRange-sliderContainer-transition: left 0.3s ease-out !default;
|
||||
$InputRange-slider-onActive-transform: scale(1.3) !default;
|
||||
$InputRange-slider-onDisabled-bg: $InputRange-onDisabled-color !default;
|
||||
$InputRange-slider-onDisabled-border: px2rem(1px) solid
|
||||
$InputRange-onDisabled-color !default;
|
||||
$InputRange-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default;
|
||||
|
||||
// input-range-label
|
||||
$InputRange-label-color: $InputRange-neutralColor !default;
|
||||
@ -1204,16 +1109,10 @@ $TagControl-sugBtn-bg: $Button--default-bg !default;
|
||||
$TagControl-sugBtn-border: $Button--default-border !default;
|
||||
$TagControl-sugBtn-color: $Button--default-color !default;
|
||||
$TagControl-sugBtn-onHover-bg: darken($TagControl-sugBtn-bg, 7.5%) !default;
|
||||
$TagControl-sugBtn-onHover-border: darken(
|
||||
$TagControl-sugBtn-border,
|
||||
10%
|
||||
) !default;
|
||||
$TagControl-sugBtn-onHover-border: darken($TagControl-sugBtn-border, 10%) !default;
|
||||
$TagControl-sugBtn-onHover-color: $Button--default-color !default;
|
||||
$TagControl-sugBtn-onActive-bg: darken($TagControl-sugBtn-bg, 10%) !default;
|
||||
$TagControl-sugBtn-onActive-border: darken(
|
||||
$TagControl-sugBtn-border,
|
||||
12.5%
|
||||
) !default;
|
||||
$TagControl-sugBtn-onActive-border: darken($TagControl-sugBtn-border, 12.5%) !default;
|
||||
$TagControl-sugBtn-onActive-color: $TagControl-sugBtn-color !default;
|
||||
|
||||
$TagControl-sugBtn-borderWidth: $Button-borderWidth !default;
|
||||
@ -1223,8 +1122,8 @@ $TagControl-sugBtn-height: $Button--sm-height !default;
|
||||
$TagControl-sugBtn-lineHeight: $Button--sm-lineHeight !default;
|
||||
$TagControl-sugBtn-paddingX: $Button--sm-paddingX !default;
|
||||
$TagControl-sugBtn-paddingY: (
|
||||
$TagControl-sugBtn-height - $Button-borderWidth * 2 -
|
||||
$TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize
|
||||
$TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight *
|
||||
$TagControl-sugBtn-fontSize
|
||||
)/2 !default;
|
||||
|
||||
// Wizard
|
||||
@ -1234,10 +1133,12 @@ $Wizard-steps-textAlign: left !default;
|
||||
$Wizard-steps-ulDisplay: block !default;
|
||||
$Wizard-steps-height: px2rem(40px) !default;
|
||||
$Wizard-steps-padding: 0 !default;
|
||||
$Wizard-steps-liAfterContent: "" !default;
|
||||
$Wizard-steps-liVender: "FontAwesome" !default;
|
||||
$Wizard-steps-liAfterContent: '' !default;
|
||||
$Wizard-steps-liVender: 'FontAwesome' !default;
|
||||
$Wizard-steps-liAfterBorder: px2rem(20px) solid transparent !default;
|
||||
$Wizard-steps-li-onActive-color: $info !default;
|
||||
$Wizard-steps-li-onActive-bg: #fff !default;
|
||||
$Wizard-steps-li-onActive-arrow-bg: #fff !default;
|
||||
$Wizard-stepsContent-padding: px2rem(15px) !default;
|
||||
$Wizard-badge-bg: $gray400 !default;
|
||||
$Wizard-badge-color: $white !default;
|
||||
@ -1291,9 +1192,9 @@ $Panel-fixedBottom-borderTop: none !default;
|
||||
$Pagination-height: px2rem(30px) !default;
|
||||
$Pagination-minWidth: px2rem(30px) !default;
|
||||
$Pagination-padding: 0 px2rem(8px) !default;
|
||||
$Pagination-arrowVendor: "FontAwesome" !default;
|
||||
$Pagination-prevArrowContent: "\f053" !default;
|
||||
$Pagination-nextArrowContent: "\f054" !default;
|
||||
$Pagination-arrowVendor: 'FontAwesome' !default;
|
||||
$Pagination-prevArrowContent: '\f053' !default;
|
||||
$Pagination-nextArrowContent: '\f054' !default;
|
||||
$Pagination-fontSize: $fontSizeBase !default;
|
||||
$Pagination-onActive-backgroundColor: $primary !default;
|
||||
$Pagination-onActive-color: $white !default;
|
||||
@ -1305,17 +1206,18 @@ $TransferSelect--normal-heading-bg: $gray100 !default;
|
||||
$TransferSelect-heading-borderBottom: $borderWidth solid $borderColor !default;
|
||||
|
||||
// Tree
|
||||
$TreeSelect-popover-bg: #fff !default;
|
||||
$Tree-indent: px2rem(20px) !default;
|
||||
$Tree-itemArrowWidth: px2rem(10px) !default;
|
||||
$Tree-arrowVendor: "FontAwesome" !default;
|
||||
$Tree-unfoldedArrowContent: "\f107" !default;
|
||||
$Tree-foldedArrowContent: "\f105" !default;
|
||||
$Tree-rootIconVendor: "FontAwesome" !default;
|
||||
$Tree-rootIconContent: "\f015" !default;
|
||||
$Tree-leafIconVendor: "FontAwesome" !default;
|
||||
$Tree-leafIconContent: "\f15b" !default;
|
||||
$Tree-folderIconVendor: "FontAwesome" !default;
|
||||
$Tree-folderIconContent: "\f07b" !default;
|
||||
$Tree-arrowVendor: 'FontAwesome' !default;
|
||||
$Tree-unfoldedArrowContent: '\f107' !default;
|
||||
$Tree-foldedArrowContent: '\f105' !default;
|
||||
$Tree-rootIconVendor: 'FontAwesome' !default;
|
||||
$Tree-rootIconContent: '\f015' !default;
|
||||
$Tree-leafIconVendor: 'FontAwesome' !default;
|
||||
$Tree-leafIconContent: '\f15b' !default;
|
||||
$Tree-folderIconVendor: 'FontAwesome' !default;
|
||||
$Tree-folderIconContent: '\f07b' !default;
|
||||
$Tree-itemText--onChecked-color: $Form-selectValue-color !default;
|
||||
|
||||
// IconPicker
|
||||
@ -1366,7 +1268,7 @@ $Audio-svg-top: px2rem(6px) !default;
|
||||
$Audio-item-margin: px2rem(10px) !default;
|
||||
|
||||
// Carousel
|
||||
$Carousel-bg: #F6F8F8;
|
||||
$Carousel-bg: #f6f8f8;
|
||||
$Carousel-minWidth: px2rem(100px) !default;
|
||||
$Carousel-height: px2rem(200px) !default;
|
||||
$Carousel-arrowControl-width: px2rem(20px) !default;
|
||||
@ -1386,6 +1288,6 @@ $Carousel-imageDescription-bottom: px2rem(25px) !default;
|
||||
// Picker
|
||||
$Picker-iconColor: $gray600 !default;
|
||||
$Picker-onHover-iconColor: darken($Picker-iconColor, 10%) !default;
|
||||
$Picker-btn-vendor: "FontAwesome" !default;
|
||||
$Picker-btn-vendor: 'FontAwesome' !default;
|
||||
$Picker-btn-fontSize: $Form-fontSize !default;
|
||||
$Picker-btn-icon: "\f2d2" !default;
|
||||
$Picker-btn-icon: '\f2d2' !default;
|
||||
|
||||
@ -25,12 +25,12 @@
|
||||
border-color: $borderColor;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $Panel--default-bg;
|
||||
background: $Panel--default-bg;
|
||||
color: $Panel--default-color;
|
||||
|
||||
.badge {
|
||||
color: $Panel--default-badgeColor;
|
||||
background-color: $Panel--default-badgeBg;
|
||||
background: $Panel--default-badgeBg;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,12 +43,12 @@
|
||||
border-color: $primary;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $primary;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
|
||||
.badge {
|
||||
color: $primary;
|
||||
background-color: $white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,12 +62,12 @@
|
||||
border-color: $success;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $success;
|
||||
background: $success;
|
||||
color: $white;
|
||||
|
||||
.badge {
|
||||
color: $success;
|
||||
background-color: $white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,12 +81,12 @@
|
||||
border-color: $info;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $info;
|
||||
background: $info;
|
||||
color: $white;
|
||||
|
||||
.badge {
|
||||
color: $info;
|
||||
background-color: $white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,12 +100,12 @@
|
||||
border-color: $warning;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $warning;
|
||||
background: $warning;
|
||||
color: $white;
|
||||
|
||||
.badge {
|
||||
color: $warning;
|
||||
background-color: $white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,12 +119,12 @@
|
||||
border-color: $danger;
|
||||
|
||||
> .#{$ns}Panel-heading {
|
||||
background-color: $danger;
|
||||
background: $danger;
|
||||
color: $white;
|
||||
|
||||
.badge {
|
||||
color: $danger;
|
||||
background-color: $white;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
&-footer {
|
||||
border-color: $Panel-footerBorderColor;
|
||||
border-radius: $Panel-footerBorderRadius;
|
||||
background-color: $Panel-footerBg;
|
||||
background: $Panel-footerBg;
|
||||
padding: $Panel-footerPadding;
|
||||
border-style: solid;
|
||||
border-width: $Panel-borderWidth 0 0 0;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.#{$ns}PopOver {
|
||||
position: absolute;
|
||||
background: $white;
|
||||
background: $PopOver-bg;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-popover;
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
&::before {
|
||||
display: table;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
> .#{$ns}Tabs-link {
|
||||
@ -35,6 +36,7 @@
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover > .#{$ns}Combo-toolbarBtn {
|
||||
display: block;
|
||||
}
|
||||
@ -74,10 +76,12 @@
|
||||
&-pane {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity .35s linear;
|
||||
transition: opacity 0.35s linear;
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -95,8 +99,7 @@
|
||||
border-bottom: px2rem(2px) solid $primary;
|
||||
color: $primary;
|
||||
background-color: transparent;
|
||||
border-color: transparent transparent $primary
|
||||
transparent;
|
||||
border-color: transparent transparent $primary transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,8 +116,8 @@
|
||||
|
||||
&--card {
|
||||
> .#{$ns}Tabs-links {
|
||||
background-color: #eceff8;
|
||||
border-top: px2rem(1px) solid #e2e5ec;
|
||||
background-color: $Tabs--card-bg;
|
||||
border-top: px2rem(1px) solid $Tabs--card-borderTopColor;
|
||||
|
||||
> li {
|
||||
&.is-active {
|
||||
@ -122,7 +125,7 @@
|
||||
> a:first-child:hover,
|
||||
> a:first-child:focus {
|
||||
color: $primary;
|
||||
background-color: #fff;
|
||||
background-color: $Tabs--card-onActive-bg;
|
||||
margin-left: px2rem(1px);
|
||||
}
|
||||
}
|
||||
@ -166,7 +169,7 @@
|
||||
> a:first-child:hover,
|
||||
> a:first-child:focus {
|
||||
color: $primary;
|
||||
background-color: #eaf6fe;
|
||||
background-color: $Tabs--radio-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
content: '';
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
@ -68,8 +68,7 @@
|
||||
|
||||
.#{$ns}Tooltip-arrow::before,
|
||||
.#{$ns}Tooltip-arrow::after {
|
||||
border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
|
||||
($Tooltip-arrow-width / 2) 0;
|
||||
border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
|
||||
}
|
||||
|
||||
.#{$ns}Tooltip-arrow::before {
|
||||
@ -92,8 +91,7 @@
|
||||
|
||||
.#{$ns}Tooltip-arrow::before,
|
||||
.#{$ns}Tooltip-arrow::after {
|
||||
border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
|
||||
($Tooltip-arrow-width / 2);
|
||||
border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2);
|
||||
}
|
||||
|
||||
.#{$ns}Tooltip-arrow::before {
|
||||
@ -114,7 +112,7 @@
|
||||
display: block;
|
||||
width: $Tooltip-arrow-width;
|
||||
margin-left: ($Tooltip-arrow-width / -2);
|
||||
content: "";
|
||||
content: '';
|
||||
border-bottom: $Tooltip-borderWidth solid $Tooltip-title-bg;
|
||||
}
|
||||
}
|
||||
@ -133,8 +131,7 @@
|
||||
|
||||
.#{$ns}Tooltip-arrow::before,
|
||||
.#{$ns}Tooltip-arrow::after {
|
||||
border-width: ($Tooltip-arrow-width / 2) 0
|
||||
($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
|
||||
border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
|
||||
}
|
||||
|
||||
.#{$ns}Tooltip-arrow::before {
|
||||
@ -201,40 +198,40 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[data-position="bottom"]:after {
|
||||
&[data-position='bottom']:after {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&[data-position="bottom"]:hover:after {
|
||||
&[data-position='bottom']:hover:after {
|
||||
margin: $Tooltip--attr-gap 0 0 0;
|
||||
}
|
||||
|
||||
&[data-position="left"]:after {
|
||||
&[data-position='left']:after {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&[data-position="left"]:hover:after {
|
||||
&[data-position='left']:hover:after {
|
||||
margin: 0 0 0 $Tooltip--attr-gap;
|
||||
}
|
||||
|
||||
&[data-position="top"]:after {
|
||||
&[data-position='top']:after {
|
||||
left: 50%;
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&[data-position="top"]:hover:after {
|
||||
&[data-position='top']:hover:after {
|
||||
margin: -$Tooltip--attr-gap 0 0 0;
|
||||
}
|
||||
|
||||
&:hover:active:after {
|
||||
content: "";
|
||||
content: '';
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,12 +65,12 @@
|
||||
color: $info;
|
||||
}
|
||||
|
||||
.#{$ns}Panel-footer>.#{$ns}Form-group,
|
||||
.#{$ns}Panel-footer>.btn {
|
||||
.#{$ns}Panel-footer > .#{$ns}Form-group,
|
||||
.#{$ns}Panel-footer > .btn {
|
||||
margin-left: px2rem(5px);
|
||||
}
|
||||
|
||||
>ul.nav {
|
||||
> ul.nav {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: $borderWidth solid $borderColor;
|
||||
@ -104,7 +104,7 @@
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: px2rem(-10px);
|
||||
border: px2rem(20px) solid transparent;
|
||||
@ -188,11 +188,11 @@
|
||||
|
||||
&.is-active {
|
||||
color: $Wizard-steps-li-onActive-color;
|
||||
background: #fff;
|
||||
background: $Wizard-steps-li-onActive-bg;
|
||||
}
|
||||
|
||||
&.is-active:after {
|
||||
border-left-color: #fff;
|
||||
border-left-color: $Wizard-steps-li-onActive-arrow-bg;
|
||||
}
|
||||
|
||||
&.is-complete,
|
||||
@ -234,7 +234,7 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&+.#{$ns}Wizard-stepContent {
|
||||
& + .#{$ns}Wizard-stepContent {
|
||||
zoom: 1;
|
||||
overflow: hidden;
|
||||
padding-left: px2rem(40px);
|
||||
@ -257,7 +257,7 @@
|
||||
// }
|
||||
}
|
||||
|
||||
&+.#{$ns}Wizard-stepContent+.#{$ns}Panel-footer {
|
||||
& + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
> i {
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
background-color: #fff;
|
||||
background: $Checkbox-gb;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -52,19 +52,17 @@
|
||||
border-color: $Checkbox-onHover-color;
|
||||
|
||||
&:before {
|
||||
left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
|
||||
2;
|
||||
top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
|
||||
2;
|
||||
left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
|
||||
top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
|
||||
width: $Checkbox-inner-size;
|
||||
height: $Checkbox-inner-size;
|
||||
background-color: $Checkbox-onHover-color;
|
||||
background: $Checkbox-onHover-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] + i {
|
||||
border-color: lighten($Checkbox-color, 5%);
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:before {
|
||||
background-color: lighten($Checkbox-color, 5%);
|
||||
@ -73,7 +71,7 @@
|
||||
}
|
||||
|
||||
&[disabled] + i + span {
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
color: $text--muted-color;
|
||||
}
|
||||
}
|
||||
@ -82,6 +80,7 @@
|
||||
width: $Checkbox-size;
|
||||
height: $Checkbox-size;
|
||||
border: px2rem(1px) solid $Checkbox-color;
|
||||
border-radius: $Checkbox-borderRadius;
|
||||
margin-left: -$Checkbox-size;
|
||||
margin-top: px2rem(-3px);
|
||||
}
|
||||
@ -95,11 +94,11 @@
|
||||
input {
|
||||
&:checked + i {
|
||||
border-color: $Checkbox-onHover-color;
|
||||
background-color: $Checkbox-onHover-color;
|
||||
background: $Checkbox-onHover-color;
|
||||
|
||||
&:before {
|
||||
// todo 后面自动计算
|
||||
@if $ns== "cxd-" {
|
||||
@if $ns== 'cxd-' {
|
||||
top: px2rem(2px);
|
||||
left: px2rem(1px);
|
||||
} @else {
|
||||
@ -132,7 +131,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -168,7 +167,7 @@
|
||||
|
||||
&[disabled] + i {
|
||||
border-color: lighten($Radio-color, 5%);
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:before {
|
||||
background-color: lighten($Radio-color, 5%);
|
||||
@ -176,7 +175,7 @@
|
||||
}
|
||||
|
||||
&[disabled] + i + span {
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
color: $text--muted-color;
|
||||
}
|
||||
}
|
||||
@ -239,8 +238,6 @@
|
||||
|
||||
.#{$ns}RadiosControl-group,
|
||||
.#{$ns}CheckboxesControl-group {
|
||||
|
||||
|
||||
.#{$ns}RadiosControl-group,
|
||||
.#{$ns}CheckboxesControl-group {
|
||||
padding-left: px2rem(80px);
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.#{$ns}DatePicker-shortcut {
|
||||
display: inline-block;
|
||||
margin-right: $gap-sm;
|
||||
@ -299,8 +300,8 @@
|
||||
.rdtSelect {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
border-left: 1px solid #fff;
|
||||
border-right: 1px solid #fff;
|
||||
border-left: 1px solid $DatePicker-header-select-borderColor;
|
||||
border-right: 1px solid $DatePicker-header-select-borderColor;
|
||||
|
||||
.#{$ns}Select {
|
||||
display: flex;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
border: 1px solid lighten($borderColor, 5%);
|
||||
position: absolute;
|
||||
@ -21,7 +21,7 @@
|
||||
border: 0;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
background: $white;
|
||||
background: $Fieldset-legend-bgColor;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@ -122,6 +122,7 @@
|
||||
border-bottom: $Number-handler-borderBottom;
|
||||
padding-top: px2rem(1px);
|
||||
}
|
||||
|
||||
// } @else {
|
||||
// position: relative;
|
||||
|
||||
@ -157,7 +158,7 @@
|
||||
.#{$ns}Number-input {
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
background-color: $gray200;
|
||||
background-color: $Number-onDisabled-bg;
|
||||
}
|
||||
|
||||
.#{$ns}Number-handler {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-half:before {
|
||||
|
||||
@ -32,16 +32,17 @@
|
||||
.fr-toolbar .fr-command.fr-btn.fr-active,
|
||||
.fr-popup .fr-command.fr-btn.fr-active {
|
||||
color: $info;
|
||||
background-color: $Form-select-onHover-bg;
|
||||
}
|
||||
|
||||
.fr-desktop .fr-command:hover,
|
||||
.fr-desktop .fr-command:focus {
|
||||
background-color: $light;
|
||||
background-color: $Form-select-onHover-bg;
|
||||
}
|
||||
|
||||
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
|
||||
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
|
||||
background-color: $light;
|
||||
background-color: $Form-select-onHover-bg;
|
||||
}
|
||||
|
||||
.fr-command.fr-btn
|
||||
@ -59,8 +60,7 @@
|
||||
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
|
||||
|
||||
.fr-box.fr-basic.fr-top .fr-wrapper {
|
||||
border-top: $Form-input-borderWidth solid
|
||||
$Form-input-onFocused-borderColor;
|
||||
border-top: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,11 +2,8 @@
|
||||
border: 1px solid $Form-input-borderColor;
|
||||
border-radius: $Form-input-borderRadius;
|
||||
line-height: $Form-input-lineHeight;
|
||||
padding: px2rem(6px)
|
||||
(
|
||||
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px)
|
||||
);
|
||||
background: $Form-input-bg;
|
||||
padding: px2rem(6px) ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px));
|
||||
font-size: $Form-input-fontSize;
|
||||
outline: none;
|
||||
resize: none;
|
||||
|
||||
@ -64,8 +64,7 @@
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize -
|
||||
px2rem(2px);
|
||||
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
|
||||
display: inline-block;
|
||||
font-size: $Form-selectValue-fontSize;
|
||||
color: $Form-selectValue-color;
|
||||
@ -105,7 +104,7 @@
|
||||
justify-content: center;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
content: '';
|
||||
border-color: $Form-input-iconColor transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);
|
||||
@ -124,7 +123,7 @@
|
||||
box-shadow: none;
|
||||
|
||||
> .#{$ns}Tree {
|
||||
background: #fff;
|
||||
background: $TreeSelect-popover-bg;
|
||||
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
|
||||
padding: $gap-xs $Form-input-paddingX;
|
||||
border-radius: 0;
|
||||
|
||||
@ -54,10 +54,7 @@
|
||||
}
|
||||
|
||||
&-itemIcon {
|
||||
margin: (
|
||||
$Layout-nav-height - $lineHeightBase *
|
||||
$Layout-asideLink-fontSize
|
||||
)/-2 px2rem(-10px);
|
||||
margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px);
|
||||
line-height: $Layout-nav-height;
|
||||
width: $Layout-nav-height;
|
||||
vertical-align: middle;
|
||||
@ -83,7 +80,7 @@
|
||||
overflow: hidden;
|
||||
margin-left: px2rem(-20px);
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
background-color: $Layout-aside-onAcitve-bg;
|
||||
background-color: $Layout-aside-subList-bg;
|
||||
|
||||
.is-open > &,
|
||||
.#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
|
||||
@ -110,10 +107,7 @@
|
||||
text-transform: none;
|
||||
display: block;
|
||||
font-size: $Layout-asideLink-fontSize;
|
||||
padding: (
|
||||
$Layout-nav-height - $lineHeightBase *
|
||||
$Layout-asideLink-fontSize
|
||||
)/2 px2rem(15px);
|
||||
padding: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
|
||||
position: relative;
|
||||
transition: background-color 0.2s ease-in-out 0s;
|
||||
color: $Layout-asideLink-color;
|
||||
@ -144,10 +138,7 @@
|
||||
|
||||
&.is-lg {
|
||||
> a {
|
||||
padding: (
|
||||
$Layout-nav-lgHeight - $lineHeightBase *
|
||||
$Layout-asideLink-fontSize
|
||||
)/2 px2rem(15px);
|
||||
padding: ($Layout-nav-lgHeight - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -181,10 +172,7 @@
|
||||
cursor: default;
|
||||
background: transparent;
|
||||
color: darken($Layout-aside-color, 10%);
|
||||
padding: (
|
||||
$Layout-nav--folded-height - $lineHeightBase *
|
||||
$Layout-asideLink-fontSize
|
||||
)/2 px2rem(20px);
|
||||
padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px);
|
||||
|
||||
&:hover {
|
||||
color: darken($Layout-aside-color, 10%);
|
||||
|
||||
221
scss/themes/dark.scss
Normal file
221
scss/themes/dark.scss
Normal file
@ -0,0 +1,221 @@
|
||||
// dark 主题
|
||||
|
||||
$ns: 'dark-';
|
||||
|
||||
$orange: #ff9f0b;
|
||||
$yellow: #ffd609;
|
||||
$green: #32d74b;
|
||||
$turquoise: #00d1b2;
|
||||
$cyan: #17a2b8;
|
||||
$blue: #0983ff;
|
||||
$purple: #bf5af2;
|
||||
$red: #dc3545;
|
||||
|
||||
$primary: $blue;
|
||||
$info: #2296f3;
|
||||
$success: $green;
|
||||
$warning: $orange;
|
||||
$danger: $red;
|
||||
$light: #3a3a3a;
|
||||
$dark: #141316;
|
||||
$black: #1e1f22;
|
||||
|
||||
$text-color: rgb(243, 241, 241);
|
||||
|
||||
$text--muted-color: #6c6c6c;
|
||||
$text--loud-color: lighten($text-color, 10%);
|
||||
|
||||
$background: #333538;
|
||||
$background-head: #191c22;
|
||||
|
||||
$body-bg: $background;
|
||||
$Page-aside-bg: #3c3c3c;
|
||||
$Panel-bg: #373737;
|
||||
$borderColor: $black;
|
||||
$link-color: $info;
|
||||
|
||||
$borderColor: #656565;
|
||||
|
||||
$Button--default-bg: $black;
|
||||
$Calendar-btnCancel-bg: $background-head;
|
||||
$Calendar-cell-bg: $Panel-bg;
|
||||
$Card-bg: $Panel-bg;
|
||||
$Checkbox-gb: linear-gradient(#515151, #4b4b4b);
|
||||
$Checkbox-onHover-color: $blue;
|
||||
$ColorPicker-bg: $background;
|
||||
$DatePicker-bg: $background;
|
||||
$DatePicker-header-select-borderColor: $background;
|
||||
$DropDown-menu-bg: $background;
|
||||
$Fieldset-legend-bgColor: $background;
|
||||
|
||||
$Form-input-bg: #3c3c3c;
|
||||
|
||||
$Form-input-addOnBg: $Form-input-bg;
|
||||
$Form-input-color: $text-color;
|
||||
$Form-input-onDisabled-bg: $Panel-bg;
|
||||
$Form-select-bg: $background;
|
||||
$Form-select-menu-bg: $background;
|
||||
$Form-select-onHover-bg: $background-head;
|
||||
$Form-selectValue-bg: $Panel-bg;
|
||||
$Form-selectValue-color: $text-color;
|
||||
|
||||
$TreeSelect-popover-bg: $Panel-bg;
|
||||
|
||||
$IconPicker-tab-onActive-bg: $background;
|
||||
$InputGroup-select-bg: $background;
|
||||
$InputGroup-select-onFocused-bg: $Panel-bg;
|
||||
$istItem-onModified-bg: $black;
|
||||
|
||||
$Layout-aside-bg: $background-head;
|
||||
$Layout-aside-onAcitve-bg: $Panel-bg;
|
||||
$Layout-aside-onHover-bg: #404040;
|
||||
$Layout-aside-subList-bg: #131519;
|
||||
$Layout-header-bg: $background-head;
|
||||
|
||||
$List-bg: $Panel-bg;
|
||||
$ListControl-item-bg: $background;
|
||||
$ListControl-item-onActive-before-bg: $background;
|
||||
$ListItem--strip-bg: $background;
|
||||
$ListItem-onChecked-bg: $black;
|
||||
$ListItem-onChecked-color: $text-color;
|
||||
$ListItem-onModified-color: $text-color;
|
||||
|
||||
$Number-handler-bg: $background;
|
||||
|
||||
$Panel--default-bg: linear-gradient(#404144, #36373a);
|
||||
$Panel-footerBg: linear-gradient(#404144, #36373a);
|
||||
$PopOver-bg: $background;
|
||||
|
||||
$Table-onHover-bg: $black;
|
||||
$Table-strip-bg: $Panel-bg;
|
||||
$Table-thead-bg: #2f2f2f;
|
||||
|
||||
$Tabs--card-bg: #323639;
|
||||
$Tabs--card-borderTopColor: $background;
|
||||
$Tabs--card-onActive-bg: $Panel-bg;
|
||||
$Tabs--radio-bg: $Panel-bg;
|
||||
$Tabs-content-bg: $Panel-bg;
|
||||
$Tabs-onActive-bg: $Panel-bg;
|
||||
$Tabs-onActive-borderColor: $borderColor;
|
||||
$Tabs-onActive-color: lighten($text-color, 10%);
|
||||
$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;
|
||||
|
||||
$Tooltip--attr-color: $text-color;
|
||||
$TransferSelect--table-heading-bg: $background;
|
||||
$Wizard-steps-bg: $background-head;
|
||||
$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;
|
||||
$Wizard-steps-li-onActive-bg: $Panel-bg;
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input {
|
||||
color: $text-color;
|
||||
background: $Form-input-bg;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: $text-color;
|
||||
background: $background;
|
||||
}
|
||||
|
||||
.rdtPicker {
|
||||
background: $background;
|
||||
}
|
||||
|
||||
.rdtPicker th {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.fr-toolbar {
|
||||
background: $background;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@import '../functions';
|
||||
@import '../variables';
|
||||
@import '../mixins';
|
||||
@import '../base/reset';
|
||||
@import '../base/normalize';
|
||||
@import '../base/typography';
|
||||
|
||||
@import '../layout/layout';
|
||||
@import '../layout/grid';
|
||||
@import '../layout/aside';
|
||||
@import '../layout/hbox';
|
||||
@import '../layout/vbox';
|
||||
@import '../components/modal';
|
||||
@import '../components/drawer';
|
||||
@import '../components/tooltip';
|
||||
@import '../components/popover';
|
||||
@import '../components/toast';
|
||||
@import '../components/alert';
|
||||
@import '../components/tabs';
|
||||
@import '../components/nav';
|
||||
@import '../components/page';
|
||||
@import '../components/remark';
|
||||
@import '../components/chart';
|
||||
@import '../components/video';
|
||||
@import '../components/audio';
|
||||
@import '../components/panel';
|
||||
@import '../components/service';
|
||||
@import '../components/spinner';
|
||||
@import '../components/button';
|
||||
@import '../components/button-group';
|
||||
@import '../components/dropdown';
|
||||
@import '../components/collapse';
|
||||
@import '../components/wizard';
|
||||
@import '../components/crud';
|
||||
@import '../components/table';
|
||||
@import '../components/list';
|
||||
@import '../components/cards';
|
||||
@import '../components/card';
|
||||
@import '../components/quick-edit';
|
||||
@import '../components/popoverable';
|
||||
@import '../components/copyable';
|
||||
@import '../components/divider';
|
||||
@import '../components/pagination';
|
||||
@import '../components/wrapper';
|
||||
@import '../components/status';
|
||||
@import '../components/carousel';
|
||||
|
||||
@import '../components/form/fieldset';
|
||||
@import '../components/form/group';
|
||||
@import '../components/form/input-group';
|
||||
@import '../components/form/text';
|
||||
@import '../components/form/textarea';
|
||||
@import '../components/form/checks';
|
||||
@import '../components/form/city';
|
||||
@import '../components/form/switch';
|
||||
@import '../components/form/number';
|
||||
@import '../components/form/select';
|
||||
@import '../components/form/list';
|
||||
@import '../components/form/matrix';
|
||||
@import '../components/form/color';
|
||||
@import '../components/form/date';
|
||||
@import '../components/form/date-range';
|
||||
@import '../components/form/image';
|
||||
@import '../components/form/editor';
|
||||
@import '../components/form/rich-text';
|
||||
@import '../components/form/range';
|
||||
@import '../components/form/repeat';
|
||||
@import '../components/form/tree';
|
||||
@import '../components/form/tree-select';
|
||||
@import '../components/form/combo';
|
||||
@import '../components/form/sub-form';
|
||||
@import '../components/form/chained-select';
|
||||
@import '../components/form/picker';
|
||||
@import '../components/form/qr-code';
|
||||
@import '../components/form/tag';
|
||||
@import '../components/form/rating';
|
||||
@import '../components/form/form';
|
||||
@import '../components/form/transfer-select';
|
||||
@import '../components/form/nested-select';
|
||||
@import '../components/form/icon-picker';
|
||||
|
||||
@import '../utilities';
|
||||
@ -16,10 +16,10 @@ const defaultConfig = {
|
||||
url: 'vs/loader.js',
|
||||
'vs/nls': {
|
||||
availableLanguages: {
|
||||
'*': 'zh-cn',
|
||||
},
|
||||
'*': 'zh-cn'
|
||||
}
|
||||
},
|
||||
paths: {},
|
||||
paths: {}
|
||||
};
|
||||
|
||||
try {
|
||||
@ -114,7 +114,7 @@ try {
|
||||
'vs/language/html/htmlWorker': noJsExt(__uri('monaco-editor/min/vs/language/html/htmlWorker.js')),
|
||||
|
||||
'vs/language/css/cssMode': noJsExt(__uri('monaco-editor/min/vs/language/css/cssMode.js')),
|
||||
'vs/language/css/cssWorker': noJsExt(__uri('monaco-editor/min/vs/language/css/cssWorker.js')),
|
||||
'vs/language/css/cssWorker': noJsExt(__uri('monaco-editor/min/vs/language/css/cssWorker.js'))
|
||||
};
|
||||
|
||||
// cdn 支持
|
||||
@ -127,7 +127,7 @@ try {
|
||||
paths: ${JSON.stringify(defaultConfig.paths)}
|
||||
};
|
||||
importScripts('${__uri('monaco-editor/min/vs/base/worker/workerMain.js')}');`)}`;
|
||||
},
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
|
||||
@ -140,9 +140,9 @@ export function monacoFactory(containerElement, monaco, options) {
|
||||
scrollBeyondLastLine: false,
|
||||
folding: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
enabled: false
|
||||
},
|
||||
...options,
|
||||
...options
|
||||
});
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||
editorTheme: 'vs',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
options: {},
|
||||
options: {}
|
||||
};
|
||||
|
||||
editor: any;
|
||||
@ -255,7 +255,7 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||
const context =
|
||||
(window as any).monacaAmd ||
|
||||
((window as any).monacaAmd = {
|
||||
document: window.document,
|
||||
document: window.document
|
||||
});
|
||||
|
||||
const onGotAmdLoader = () => {
|
||||
@ -292,7 +292,7 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ = context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__ || [];
|
||||
context.__REACT_MONACO_EDITOR_LOADER_CALLBACKS__.push({
|
||||
context: this,
|
||||
fn: onGotAmdLoader,
|
||||
fn: onGotAmdLoader
|
||||
});
|
||||
} else {
|
||||
if (typeof context.require === 'undefined') {
|
||||
@ -336,7 +336,7 @@ export class Editor extends React.Component<EditorProps, any> {
|
||||
value,
|
||||
language,
|
||||
editorTheme,
|
||||
theme: editorTheme,
|
||||
theme: editorTheme
|
||||
});
|
||||
|
||||
// json 默认开启验证。
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
*/
|
||||
import {render, Renderer, getRendererByName, resolveRenderer, filterSchema} from './factory';
|
||||
import {wrapFetcher, buildApi} from './utils/api';
|
||||
import {filter, reigsterTplEnginer, evalExpression} from './utils/tpl'
|
||||
import {filter, reigsterTplEnginer, evalExpression} from './utils/tpl';
|
||||
import './utils/tpl-builtin';
|
||||
import './utils/tpl-lodash';
|
||||
import * as utils from './utils/helper';
|
||||
@ -157,19 +157,18 @@ import './renderers/Icon';
|
||||
import './renderers/Carousel';
|
||||
import Scoped, {ScopedContext} from './Scoped';
|
||||
|
||||
import {
|
||||
FormItem
|
||||
} from './renderers/Form/Item';
|
||||
import {FormItem} from './renderers/Form/Item';
|
||||
|
||||
// 兼容旧版本用法
|
||||
import './compat';
|
||||
|
||||
import './themes/default';
|
||||
import './themes/cxd';
|
||||
import { registerFilter, filterDate, relativeValueRe, resolveVariable } from './utils/tpl-builtin';
|
||||
import { addRule, str2rules } from './utils/validations';
|
||||
import { normalizeOptions } from './components/Select';
|
||||
import { OptionsControl } from './renderers/Form/Options';
|
||||
import './themes/dark';
|
||||
import {registerFilter, filterDate, relativeValueRe, resolveVariable} from './utils/tpl-builtin';
|
||||
import {addRule, str2rules} from './utils/validations';
|
||||
import {normalizeOptions} from './components/Select';
|
||||
import {OptionsControl} from './renderers/Form/Options';
|
||||
|
||||
import {classnames, getClassPrefix, setDefaultTheme} from './theme';
|
||||
const classPrefix = getClassPrefix();
|
||||
@ -182,7 +181,6 @@ export {
|
||||
wrapFetcher,
|
||||
buildApi,
|
||||
filter,
|
||||
|
||||
NotFound,
|
||||
AlertComponent,
|
||||
alert,
|
||||
@ -220,7 +218,6 @@ export {
|
||||
Tooltip,
|
||||
TooltipWrapper,
|
||||
Tree,
|
||||
|
||||
// 其他功能类方法
|
||||
utils,
|
||||
resizeSensor,
|
||||
@ -241,7 +238,6 @@ export {
|
||||
registerIcon,
|
||||
Scoped,
|
||||
ScopedContext,
|
||||
|
||||
setDefaultTheme,
|
||||
classPrefix,
|
||||
getClassPrefix,
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
FormItem,
|
||||
FormControlProps
|
||||
} from './Item';
|
||||
import {FormItem, FormControlProps} from './Item';
|
||||
import cx from 'classnames';
|
||||
import LazyComponent from '../../components/LazyComponent';
|
||||
import debouce = require('lodash/debounce');
|
||||
|
||||
function loadComponent():Promise<React.ReactType> {
|
||||
return new Promise((resolve) => (require as any)(['../../components/Editor'], (component:any) => resolve(component.default)));
|
||||
function loadComponent(): Promise<React.ReactType> {
|
||||
return new Promise(resolve =>
|
||||
(require as any)(['../../components/Editor'], (component: any) => resolve(component.default))
|
||||
);
|
||||
}
|
||||
|
||||
export interface EditorProps extends FormControlProps {
|
||||
options?: object;
|
||||
};
|
||||
}
|
||||
|
||||
export default class EditorControl extends React.Component<EditorProps, any> {
|
||||
static defaultProps:Partial<EditorProps> = {
|
||||
static defaultProps: Partial<EditorProps> = {
|
||||
language: 'javascript',
|
||||
editorTheme: 'vs',
|
||||
options: {
|
||||
@ -28,14 +27,14 @@ export default class EditorControl extends React.Component<EditorProps, any> {
|
||||
enabled: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
focused: false
|
||||
};
|
||||
editor:any;
|
||||
toDispose:Array<Function> = [];
|
||||
constructor(props:EditorProps) {
|
||||
editor: any;
|
||||
toDispose: Array<Function> = [];
|
||||
constructor(props: EditorProps) {
|
||||
super(props);
|
||||
|
||||
this.handleFocus = this.handleFocus.bind(this);
|
||||
@ -64,7 +63,7 @@ export default class EditorControl extends React.Component<EditorProps, any> {
|
||||
});
|
||||
}
|
||||
|
||||
handleEditorMounted(editor:any, monaco:any) {
|
||||
handleEditorMounted(editor: any, monaco: any) {
|
||||
this.editor = editor;
|
||||
this.toDispose.push(editor.onDidFocusEditorWidget(this.updateContainerSize).dispose);
|
||||
this.toDispose.push(editor.onDidChangeModelContent(this.updateContainerSize).dispose);
|
||||
@ -105,10 +104,14 @@ export default class EditorControl extends React.Component<EditorProps, any> {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(`EditorControl`, {
|
||||
'is-focused': this.state.focused,
|
||||
[`EditorControl--${size}`]: size
|
||||
}, className)}
|
||||
className={cx(
|
||||
`EditorControl`,
|
||||
{
|
||||
'is-focused': this.state.focused,
|
||||
[`EditorControl--${size}`]: size
|
||||
},
|
||||
className
|
||||
)}
|
||||
>
|
||||
<LazyComponent
|
||||
classPrefix={ns}
|
||||
@ -132,47 +135,47 @@ export default class EditorControl extends React.Component<EditorProps, any> {
|
||||
}
|
||||
|
||||
export const availableLanguages = [
|
||||
"bat",
|
||||
"c",
|
||||
"coffeescript",
|
||||
"cpp",
|
||||
"csharp",
|
||||
"css",
|
||||
"dockerfile",
|
||||
"fsharp",
|
||||
"go",
|
||||
"handlebars",
|
||||
"html",
|
||||
"ini",
|
||||
"java",
|
||||
"javascript",
|
||||
"json",
|
||||
"less",
|
||||
"lua",
|
||||
"markdown",
|
||||
"msdax",
|
||||
"objective-c",
|
||||
"php",
|
||||
"plaintext",
|
||||
"postiats",
|
||||
"powershell",
|
||||
"pug",
|
||||
"python",
|
||||
"r",
|
||||
"razor",
|
||||
"ruby",
|
||||
"sb",
|
||||
"scss",
|
||||
"sol",
|
||||
"sql",
|
||||
"swift",
|
||||
"typescript",
|
||||
"vb",
|
||||
"xml",
|
||||
"yaml"
|
||||
'bat',
|
||||
'c',
|
||||
'coffeescript',
|
||||
'cpp',
|
||||
'csharp',
|
||||
'css',
|
||||
'dockerfile',
|
||||
'fsharp',
|
||||
'go',
|
||||
'handlebars',
|
||||
'html',
|
||||
'ini',
|
||||
'java',
|
||||
'javascript',
|
||||
'json',
|
||||
'less',
|
||||
'lua',
|
||||
'markdown',
|
||||
'msdax',
|
||||
'objective-c',
|
||||
'php',
|
||||
'plaintext',
|
||||
'postiats',
|
||||
'powershell',
|
||||
'pug',
|
||||
'python',
|
||||
'r',
|
||||
'razor',
|
||||
'ruby',
|
||||
'sb',
|
||||
'scss',
|
||||
'sol',
|
||||
'sql',
|
||||
'swift',
|
||||
'typescript',
|
||||
'vb',
|
||||
'xml',
|
||||
'yaml'
|
||||
];
|
||||
|
||||
export const EditorControls:Array<typeof EditorControl> = availableLanguages.map((lang:string) => {
|
||||
export const EditorControls: Array<typeof EditorControl> = availableLanguages.map((lang: string) => {
|
||||
@FormItem({
|
||||
type: `${lang}-editor`,
|
||||
sizeMutable: false
|
||||
@ -198,7 +201,7 @@ class JavascriptEditorControlRenderer extends EditorControl {
|
||||
...EditorControl.defaultProps,
|
||||
language: 'javascript'
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
@FormItem({
|
||||
type: 'ts-editor',
|
||||
@ -209,8 +212,7 @@ class TypescriptEditorControlRenderer extends EditorControl {
|
||||
...EditorControl.defaultProps,
|
||||
language: 'typescript'
|
||||
};
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
@FormItem({
|
||||
type: `editor`,
|
||||
@ -221,4 +223,4 @@ export class EditorControlRenderer extends EditorControl {
|
||||
...EditorControl.defaultProps,
|
||||
language: 'javascript'
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ export interface JSONProps extends RendererProps {
|
||||
className?: string;
|
||||
placeholder?: string;
|
||||
levelExpand: number;
|
||||
theme: string | object;
|
||||
jsonTheme: string;
|
||||
}
|
||||
|
||||
const twilight = {
|
||||
@ -45,14 +45,55 @@ const twilight = {
|
||||
WebkitUserSelect: 'none',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.4)',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-block',
|
||||
},
|
||||
display: 'inline-block'
|
||||
}
|
||||
};
|
||||
|
||||
const eighties = {
|
||||
scheme: 'eighties',
|
||||
author: 'chris kempson (http://chriskempson.com)',
|
||||
base00: '#2d2d2d',
|
||||
base01: '#393939',
|
||||
base02: '#515151',
|
||||
base03: '#747369',
|
||||
base04: '#a09f93',
|
||||
base05: '#d3d0c8',
|
||||
base06: '#e8e6df',
|
||||
base07: '#f2f0ec',
|
||||
base08: '#f2777a',
|
||||
base09: '#f99157',
|
||||
base0A: '#ffcc66',
|
||||
base0B: '#99cc99',
|
||||
base0C: '#66cccc',
|
||||
base0D: '#6699cc',
|
||||
base0E: '#cc99cc',
|
||||
base0F: '#d27b53',
|
||||
tree: {
|
||||
border: 0,
|
||||
padding: '0 0.625em 0.425em',
|
||||
marginTop: '-0.25em',
|
||||
marginBottom: '0',
|
||||
marginLeft: '0',
|
||||
marginRight: 0,
|
||||
listStyle: 'none',
|
||||
MozUserSelect: 'none',
|
||||
WebkitUserSelect: 'none',
|
||||
backgroundColor: '#2D2D2D',
|
||||
whiteSpace: 'nowrap',
|
||||
display: 'inline-block'
|
||||
}
|
||||
};
|
||||
|
||||
const themes = {
|
||||
twilight,
|
||||
eighties
|
||||
};
|
||||
|
||||
export class JSONField extends React.Component<JSONProps, object> {
|
||||
static defaultProps: Partial<JSONProps> = {
|
||||
placeholder: '-',
|
||||
levelExpand: 1,
|
||||
jsonTheme: 'twilight'
|
||||
};
|
||||
|
||||
valueRenderer(raw: any) {
|
||||
@ -72,7 +113,7 @@ export class JSONField extends React.Component<JSONProps, object> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {className, value, classnames: cx} = this.props;
|
||||
const {className, value, jsonTheme, classnames: cx} = this.props;
|
||||
|
||||
let data = value;
|
||||
|
||||
@ -81,16 +122,18 @@ export class JSONField extends React.Component<JSONProps, object> {
|
||||
data = JSON.parse(value);
|
||||
} catch (e) {
|
||||
data = {
|
||||
error: e.message,
|
||||
error: e.message
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const theme = themes[jsonTheme] ? themes[jsonTheme] : themes['twilight'];
|
||||
|
||||
return (
|
||||
<div className={cx('JsonField', className)}>
|
||||
<JSONTree
|
||||
data={data}
|
||||
theme={twilight}
|
||||
theme={theme}
|
||||
shouldExpandNode={this.shouldExpandNode}
|
||||
valueRenderer={this.valueRenderer}
|
||||
/>
|
||||
@ -101,6 +144,6 @@ export class JSONField extends React.Component<JSONProps, object> {
|
||||
|
||||
@Renderer({
|
||||
test: /(^|\/)json$/,
|
||||
name: 'json',
|
||||
name: 'json'
|
||||
})
|
||||
export class JSONFieldRenderer extends JSONField {}
|
||||
|
||||
16
src/themes/dark.ts
Normal file
16
src/themes/dark.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import {theme, ClassNamesFn, makeClassnames} from '../theme';
|
||||
export const classPrefix: string = 'dark-';
|
||||
export const classnames: ClassNamesFn = makeClassnames(classPrefix);
|
||||
|
||||
theme('dark', {
|
||||
classPrefix,
|
||||
classnames,
|
||||
renderers: {
|
||||
json: {
|
||||
jsonTheme: 'eighties'
|
||||
},
|
||||
editor: {
|
||||
editorTheme: 'vs-dark'
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user