From 46db4d98b547b2ccb5203559378f7bc67e33a08a Mon Sep 17 00:00:00 2001 From: wuduoyi Date: Mon, 9 Sep 2019 00:53:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20dark=20=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc | 2 +- examples/components/App.jsx | 506 +++++++++++++------------ examples/index.html | 102 +++-- scss/_variables.scss | 338 ++++++----------- scss/components/_panel.scss | 26 +- scss/components/_popover.scss | 2 +- scss/components/_tabs.scss | 19 +- scss/components/_tooltip.scss | 27 +- scss/components/_wizard.scss | 18 +- scss/components/form/_checks.scss | 29 +- scss/components/form/_date.scss | 5 +- scss/components/form/_fieldset.scss | 4 +- scss/components/form/_number.scss | 5 +- scss/components/form/_rating.scss | 2 +- scss/components/form/_rich-text.scss | 8 +- scss/components/form/_textarea.scss | 7 +- scss/components/form/_tree-select.scss | 7 +- scss/layout/_aside.scss | 22 +- scss/themes/dark.scss | 221 +++++++++++ src/components/Editor.tsx | 22 +- src/index.tsx | 18 +- src/renderers/Form/Editor.tsx | 124 +++--- src/renderers/Json.tsx | 57 ++- src/themes/dark.ts | 16 + 24 files changed, 893 insertions(+), 694 deletions(-) create mode 100644 scss/themes/dark.scss create mode 100644 src/themes/dark.ts diff --git a/.prettierrc b/.prettierrc index 690cb3a3b..3dc947776 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,7 +4,7 @@ "useTabs": false, "singleQuote": true, "semi": true, - "trailingComma": "es5", + "trailingComma": "none", "bracketSpacing": false, "arrowParens": "avoid", "jsxBracketSameLine": false diff --git a/examples/components/App.jsx b/examples/components/App.jsx index b75843e0d..8e80fafd0 100644 --- a/examples/components/App.jsx +++ b/examples/components/App.jsx @@ -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 ( - { - let children = []; - - if (link.children) { - children.push( - toggleExpand(link, e)} - > - ); - } - - link.badge && children.push( - {link.badge} - ); - - link.icon && children.push( - - ); - - children.push( - {link.label} - ); - - return link.path ? ({children}) : ( toggleExpand(link) : null}>{children}); - }} - 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 ( -
-
AMis 可视化编辑器
-
- ); - } + return ( + { + let children = []; - return ( -
-
- -
- - AMis Renderer -
-
-
-
- + {children} + + ) : ( + toggleExpand(link) : null}>{children} + ); + }} + isActive={link => + isActive( + link.path && link.path[0] === '/' + ? ContextPath + link.path + : `${ContextPath}${PathPrefix}/${link.path}`, + location + ) + } + /> + ); + } - -
+ renderHeader() { + const location = this.props.location; + const theme = this.state.theme; -
- 主题：{( - { + this.setState({theme}); + localStorage.setItem('themeIndex', this.state.themes.indexOf(theme)); + }} + /> + } +
+ + +
+
); } + render() { + // const pathname = this.props.location.pathname; + const theme = this.state.theme; + return ( + + + + {React.cloneElement(this.props.children, { + ...this.props.children.props, + setAsideFolded: this.setAsideFolded, + setHeaderVisible: this.setHeaderVisible, + theme: theme.value, + classPrefix: theme.ns + })} + + ); + } +} + +function navigations2route(pathPrefix = PathPrefix) { + let routes = []; + + navigations.forEach(root => { + root.children && + mapTree(root.children, item => { + if (item.path && item.component) { + routes.push( + + ); + } else if (item.path && item.getComponent) { + routes.push( + + ); + } + }); + }); + + return routes; +} + +export default function entry({pathPrefix}) { + PathPrefix = pathPrefix || PathPrefix; + let history = browserHistory; + + // if (process.env.NODE_ENV === 'production') { + // history = hashHistory; + // } + + return ( + + + + + {navigations2route(PathPrefix)} + + + + ); +} diff --git a/examples/index.html b/examples/index.html index 5ddcc8877..be6b5b5b0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,58 +1,52 @@ - - - AMis Renderer - - - - - - - - - - - - - - - - - -
- - - - + +
+ + + + diff --git a/scss/_variables.scss b/scss/_variables.scss index 56b255517..6a0ec4a41 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; \ No newline at end of file +$Picker-btn-icon: '\f2d2' !default; diff --git a/scss/components/_panel.scss b/scss/components/_panel.scss index 34fd7db61..246eba736 100644 --- a/scss/components/_panel.scss +++ b/scss/components/_panel.scss @@ -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; diff --git a/scss/components/_popover.scss b/scss/components/_popover.scss index 43e20348f..a4dc5eb95 100644 --- a/scss/components/_popover.scss +++ b/scss/components/_popover.scss @@ -1,6 +1,6 @@ .#{$ns}PopOver { position: absolute; - background: $white; + background: $PopOver-bg; top: 0; left: 0; z-index: $zindex-popover; diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index a544fe317..a0857d83d 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -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; } } } diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index bb3656590..ae65f9613 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -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; } } diff --git a/scss/components/_wizard.scss b/scss/components/_wizard.scss index 8f2191301..6b759d923 100644 --- a/scss/components/_wizard.scss +++ b/scss/components/_wizard.scss @@ -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,8 +257,8 @@ // } } - &+.#{$ns}Wizard-stepContent+.#{$ns}Panel-footer { + & + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer { clear: both; } } -} \ No newline at end of file +} diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss index 1f79a80b5..dcf89b0eb 100644 --- a/scss/components/form/_checks.scss +++ b/scss/components/form/_checks.scss @@ -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); diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss index 5dc67f5d8..a621c8884 100644 --- a/scss/components/form/_date.scss +++ b/scss/components/form/_date.scss @@ -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; diff --git a/scss/components/form/_fieldset.scss b/scss/components/form/_fieldset.scss index 537236242..add462ff3 100644 --- a/scss/components/form/_fieldset.scss +++ b/scss/components/form/_fieldset.scss @@ -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; } diff --git a/scss/components/form/_number.scss b/scss/components/form/_number.scss index b94b4e904..40ee651cd 100644 --- a/scss/components/form/_number.scss +++ b/scss/components/form/_number.scss @@ -90,7 +90,7 @@ &-handler-up { &-inner { transform: $Number-handler--up-transform; - + &:after { content: $Number-handler--up-content; } @@ -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 { diff --git a/scss/components/form/_rating.scss b/scss/components/form/_rating.scss index 0011802a3..841164c3e 100644 --- a/scss/components/form/_rating.scss +++ b/scss/components/form/_rating.scss @@ -12,7 +12,7 @@ } &.is-disabled { - cursor: default; + cursor: not-allowed; } &-half:before { diff --git a/scss/components/form/_rich-text.scss b/scss/components/form/_rich-text.scss index 1998531f3..7080b7320 100644 --- a/scss/components/form/_rich-text.scss +++ b/scss/components/form/_rich-text.scss @@ -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; } } diff --git a/scss/components/form/_textarea.scss b/scss/components/form/_textarea.scss index 937b9240e..7aaffa55b 100644 --- a/scss/components/form/_textarea.scss +++ b/scss/components/form/_textarea.scss @@ -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; diff --git a/scss/components/form/_tree-select.scss b/scss/components/form/_tree-select.scss index 6bc669437..23f26c409 100644 --- a/scss/components/form/_tree-select.scss +++ b/scss/components/form/_tree-select.scss @@ -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; diff --git a/scss/layout/_aside.scss b/scss/layout/_aside.scss index 9704af632..821ebc741 100644 --- a/scss/layout/_aside.scss +++ b/scss/layout/_aside.scss @@ -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%); diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss new file mode 100644 index 000000000..781faa3f2 --- /dev/null +++ b/scss/themes/dark.scss @@ -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'; diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 742b2d69f..6899542ba 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -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 { editorTheme: 'vs', width: '100%', height: '100%', - options: {}, + options: {} }; editor: any; @@ -255,7 +255,7 @@ export class Editor extends React.Component { 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 { 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 { value, language, editorTheme, - theme: editorTheme, + theme: editorTheme }); // json 默认开启验证。 diff --git a/src/index.tsx b/src/index.tsx index 958e4e6f3..4851d553c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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, diff --git a/src/renderers/Form/Editor.tsx b/src/renderers/Form/Editor.tsx index 1a146e7b6..bcdf8e9a7 100644 --- a/src/renderers/Form/Editor.tsx +++ b/src/renderers/Form/Editor.tsx @@ -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 { - return new Promise((resolve) => (require as any)(['../../components/Editor'], (component:any) => resolve(component.default))); +function loadComponent(): Promise { + 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 { - static defaultProps:Partial = { + static defaultProps: Partial = { language: 'javascript', editorTheme: 'vs', options: { @@ -28,14 +27,14 @@ export default class EditorControl extends React.Component { enabled: false } } - } + }; state = { focused: false }; - editor:any; - toDispose:Array = []; - constructor(props:EditorProps) { + editor: any; + toDispose: Array = []; + constructor(props: EditorProps) { super(props); this.handleFocus = this.handleFocus.bind(this); @@ -64,7 +63,7 @@ export default class EditorControl extends React.Component { }); } - 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); @@ -104,11 +103,15 @@ export default class EditorControl extends React.Component { } return ( -
{ } 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 = availableLanguages.map((lang:string) => { +export const EditorControls: Array = 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' }; -}; +} diff --git a/src/renderers/Json.tsx b/src/renderers/Json.tsx index e70dd018e..ae5d565bd 100644 --- a/src/renderers/Json.tsx +++ b/src/renderers/Json.tsx @@ -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 { static defaultProps: Partial = { placeholder: '-', levelExpand: 1, + jsonTheme: 'twilight' }; valueRenderer(raw: any) { @@ -72,7 +113,7 @@ export class JSONField extends React.Component { }; 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 { data = JSON.parse(value); } catch (e) { data = { - error: e.message, + error: e.message }; } } + const theme = themes[jsonTheme] ? themes[jsonTheme] : themes['twilight']; + return (
@@ -101,6 +144,6 @@ export class JSONField extends React.Component { @Renderer({ test: /(^|\/)json$/, - name: 'json', + name: 'json' }) export class JSONFieldRenderer extends JSONField {} diff --git a/src/themes/dark.ts b/src/themes/dark.ts new file mode 100644 index 000000000..9abaf52fa --- /dev/null +++ b/src/themes/dark.ts @@ -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' + } + } +});