Repository: yezihaohao/react-admin Branch: master Commit: cfaaa12a98a5 Files: 140 Total size: 835.9 KB Directory structure: gitextract_bdalo8pp/ ├── .commitlintrc.js ├── .eslintrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config/ │ ├── env.js │ ├── jest/ │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── modules.js │ ├── paths.js │ ├── pnpTs.js │ ├── webpack.config.js │ └── webpackDevServer.config.js ├── package.json ├── public/ │ ├── index.html │ ├── manifest.json │ ├── robots.txt │ └── theme.less ├── scripts/ │ ├── build.js │ ├── start.js │ └── test.js ├── src/ │ ├── App.test.tsx │ ├── App.tsx │ ├── Page.tsx │ ├── components/ │ │ ├── HeaderCustom.tsx │ │ ├── Page.tsx │ │ ├── SiderCustom.tsx │ │ ├── SiderMenu.tsx │ │ ├── animation/ │ │ │ ├── BasicAnimations.tsx │ │ │ └── ExampleAnimations.tsx │ │ ├── auth/ │ │ │ ├── Basic.tsx │ │ │ └── RouterEnter.tsx │ │ ├── charts/ │ │ │ ├── Echarts.tsx │ │ │ ├── EchartsArea.tsx │ │ │ ├── EchartsEffectScatter.tsx │ │ │ ├── EchartsForce.tsx │ │ │ ├── EchartsGraphnpm.tsx │ │ │ ├── EchartsPie.tsx │ │ │ ├── EchartsScatter.tsx │ │ │ ├── Recharts.tsx │ │ │ ├── RechartsBarChart.tsx │ │ │ ├── RechartsRadarChart.tsx │ │ │ ├── RechartsRadialBarChart.tsx │ │ │ └── RechartsSimpleLineChart.tsx │ │ ├── cssmodule/ │ │ │ ├── index.module.less │ │ │ └── index.tsx │ │ ├── dashboard/ │ │ │ ├── Dashboard.tsx │ │ │ ├── EchartsProjects.tsx │ │ │ └── EchartsViews.tsx │ │ ├── env/ │ │ │ └── index.tsx │ │ ├── extension/ │ │ │ ├── MultipleMenu.tsx │ │ │ ├── QueryParams.tsx │ │ │ └── Visitor.tsx │ │ ├── index.tsx │ │ ├── pages/ │ │ │ ├── Login.tsx │ │ │ └── NotFound.tsx │ │ ├── smenu/ │ │ │ ├── Sub1.tsx │ │ │ └── Sub2.tsx │ │ ├── tables/ │ │ │ ├── AdvancedTables.tsx │ │ │ ├── AsynchronousTable.tsx │ │ │ ├── BasicTable.tsx │ │ │ ├── BasicTables.tsx │ │ │ ├── ExpandedTable.tsx │ │ │ ├── FixedTable.tsx │ │ │ ├── SearchTable.tsx │ │ │ ├── SelectTable.tsx │ │ │ └── SortTable.tsx │ │ ├── ui/ │ │ │ ├── Buttons.tsx │ │ │ ├── Draggable.tsx │ │ │ ├── Gallery.tsx │ │ │ ├── Icons.tsx │ │ │ ├── Modals.tsx │ │ │ ├── Notifications.tsx │ │ │ ├── Spins.tsx │ │ │ ├── Tabs.tsx │ │ │ ├── Wysiwyg.tsx │ │ │ ├── banners/ │ │ │ │ ├── AutoPlay.tsx │ │ │ │ ├── Basic.tsx │ │ │ │ ├── Custom.tsx │ │ │ │ └── index.tsx │ │ │ ├── emoji/ │ │ │ │ ├── iconfont.ts │ │ │ │ └── index.tsx │ │ │ └── map/ │ │ │ ├── Tencent.tsx │ │ │ └── index.tsx │ │ └── widget/ │ │ ├── AuthWidget.tsx │ │ ├── BreadcrumbCustom.tsx │ │ ├── Copyright.tsx │ │ ├── Loading.tsx │ │ ├── PwaInstaller.tsx │ │ ├── ThemePicker.tsx │ │ └── index.tsx │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── routes/ │ │ ├── RouteWrapper.tsx │ │ ├── config.ts │ │ └── index.tsx │ ├── service/ │ │ ├── config.ts │ │ ├── index.ts │ │ └── tools.ts │ ├── serviceWorker.ts │ ├── style/ │ │ ├── antd/ │ │ │ ├── header.less │ │ │ ├── index.less │ │ │ ├── layout.less │ │ │ ├── menu.less │ │ │ ├── reset.less │ │ │ ├── utils.less │ │ │ └── variables.less │ │ ├── app.less │ │ ├── banner.less │ │ ├── button.less │ │ ├── card.less │ │ ├── global.less │ │ ├── icons.less │ │ ├── img.less │ │ ├── index.less │ │ ├── lib/ │ │ │ └── animate.css │ │ ├── login.less │ │ ├── menu.less │ │ ├── modal.less │ │ ├── scroll.less │ │ ├── table.less │ │ ├── theme/ │ │ │ ├── index.js │ │ │ ├── theme-danger.json │ │ │ ├── theme-grey.json │ │ │ ├── theme-info.json │ │ │ └── theme-warn.json │ │ ├── utils-border.less │ │ ├── utils-color.less │ │ ├── utils-size.less │ │ ├── utils-spacing.less │ │ ├── utils-text.less │ │ └── variables.less │ └── utils/ │ ├── hooks.ts │ └── index.ts ├── theme.js └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .commitlintrc.js ================================================ module.exports = { extends: ['@commitlint/config-conventional'], rules: {}, }; ================================================ FILE: .eslintrc ================================================ { "extends": "react-app", "plugins": [ "react-hooks" ], "rules": { "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn", "no-multi-spaces": 1, "react/jsx-tag-spacing": 1, // 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行 "jsx-quotes": 1, "react/jsx-closing-bracket-location": 1, // 遵循JSX语法缩进/格式 "react/jsx-boolean-value": 1, // 如果属性值为 true, 可以直接省略 "react/no-string-refs": 1, // 总是在Refs里使用回调函数 "react/self-closing-comp": 1, // 对于没有子元素的标签来说总是自己关闭标签 "react/sort-comp": 1, // 按照具体规范的React.createClass 的生命周期函数书写代码 "react/jsx-pascal-case": 1 // React模块名使用帕斯卡命名，实例使用骆驼式命名 } } ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /build # misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log* ================================================ FILE: .prettierignore ================================================ public/theme.less ================================================ FILE: .prettierrc ================================================ { "trailingComma": "es5", "tabWidth": 4, "singleQuote": true, "jsxBracketSameLine": false, "printWidth": 100 } ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - "10" script: - yarn - yarn build ================================================ FILE: CHANGELOG.md ================================================ ### 更新日志 #### 2017-07-08 - 依赖包版本升级 - react@15.6.1 - antd@2.11.2 - webpack@2.6.1 - 等等 #### 2017-08-01 - 引入 redux 系列 - redux@3.7.2 - redux-thunk@2.2.0 - react-redux@5.0.5 - 增加权限管理模块 - 使用 easy-mock 模拟数据模拟登录接口 - 使用 redux 系列将登录用户数据传递给权限组件 - 权限组件采用 Render Callback 的方式传递权限给需要受控制的组件（具体做法请查看源代码。） - 用户状态保存在 localStorage 中 - 具体做法请运行项目查看 - PS：以上管理权限只是一种方式，但这绝对不是唯一的方式，也不是最好的方式。如果你有更好的方式，不妨加上面的群和大家一起分享下。😄😄 - 增加路径别名 - 使用@别名处理引入组件相对路径过长问题。 - 缺点：编辑器不能使用快捷提示和快捷跳转到相应的文件 #### 2017-08-13 - 权限管理模块增加页面跳转权限验证 - 点击权限管理的路由拦截，若没有访问权限则会跳转到 404 页面。 - 大致实现方式(非常简单)：通过向自定义 router 组件传入 store，登录之后可获取到 redux 中的权限 state 数据，并通过判断是否包含权限进行跳转。ps: 该 demo 的效果是管理员登录之后才能跳转到路由拦截页面。具体操作请拉取代码尝试。 #### 2017-08-26 - 增加响应式布局 - 替换 antd Col 组件的响应式栅格为 md(具体参数用法请查看 antd 官方文档) - 初始化页面是获取当前浏览器宽度设置菜单显示类型 - 监听 window 的 onresize 函数，设置菜单显示类型。PS：浏览器宽度存入 redux 中，方便组件之间传递。 ![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/src/style/imgs/mobile.gif) #### 2017-09-13 - 依赖包版本升级 - antd@2.13.1(目前最新版) #### 2017-10-21 - 开发环境增加 react-hot-loader-保持状态刷新组件(译：实时调整组件),可参考以下相关项目 - [react-hot-loader](https://github.com/gaearon/react-hot-loader) #### 2017-12-12 - 依赖包版本升级 - antd@3.0.1(目前最新版) - react-router-dom@4.2.2 - 大改动 - react-router 切换 4.x 版本，切换响应的版本路由写法(具体见代码更新日志) - ps: react-router 3.x 的版本请查看代码分支 router3.x #### 2018-01-12 - 增加 cssmodule 的支持（css, less） - 建议用 css 预处理器，文件名为 xxx.module.less，引入相应组件即可使用。 - 具体做法参见新增模块，路由后缀：/app/cssModule。[点击访问](http://cheng_haohao.oschina.io/reactadmin/#/app/cssModule) #### 2018-10-13 - 重大更新 :sparkles: - 升级 create-react-app 2.x，详情文档见[官方文档](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) - 升级大部分第三方库，升级版本见[commit](https://github.com/yezihaohao/react-admin/commit/d8dc0ff0c6517c57a46d731adba69112a55145a9#diff-b9cfc7f2cdf78a7f4b91a753d10865a2) - 增加自定义主题功能 - 主题基础样式配置见[variables.less](https://github.com/yezihaohao/react-admin/blob/master/src/style/antd/variables.less) - 修改主题基础样式后执行`yarn theme 或 npm run theme`，默认主题即可生效 - 页面上可自定义主题颜色配置(根据此可添加字体大小等其他 antd 的默认样式) ![自定义主题](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/themepicker.png) #### 2018-11-07 - 完善 PWA 的 manifest.json 文件，增加按钮手动触发安装 PWA 应用 - 最新版的 chrome 浏览器访问[ReactAdmin](https://admiring-dijkstra-34cb29.netlify.com/)即可体验 ![PWA](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/pwa.png) #### 2018-11-26 - 增加问号形式的路由参数扩展 #### 2018-12-28 - 增加[react-document-title](https://github.com/gaearon/react-document-title)组件，根据路由设置页面 title #### 2019-03-20 - 增加[redux-alita](https://github.com/yezihaohao/redux-alita),极简的 redux 工具用法，详情见其代码仓库 #### 2019-05-10 - 升级 react，react-dom，增加 hooks 支持（去掉 react-hot-loader，老版本 hot-loader 使用 hook 有点问题） - 增加菜单可拖拽 ![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/menu_draggable.gif) #### 2019-09-04 - 增加 Git 提交 message 规范约束工具[commitizen](https://github.com/commitizen/cz-cli) - Git 提交规范往往是团队编码必需，借助工具能形成更好的约束，如果你不喜欢用，可参照提交记录去掉[bd426fd](https://github.com/yezihaohao/react-admin/commit/a9401d191edd077bc3e59c8dbeeb61e5029cde95) #### 2019-09-26 - 更新 create-react-app3.x 版本，升级部分依赖 lib，详情请查看提交记录（有问题请提 issue） #### 2019-10-26 - 新增访客模式的路由配置+demo（主路由配置） - [在线 Demo](https://admiring-dijkstra-34cb29.netlify.com/#/app/extension/visitor) #### 2019-12-18 - 新增多级菜单配置功能（菜单可配置成无限的树状菜单，菜单嵌套过多时，样式问题可能需要你调整） #### 2020-01-21 - 新增服务端异步菜单功能 #### 2020-08-02 - 新增多环境配置方案，环境配置任你加，源码详情请查看[提交记录](https://github.com/yezihaohao/react-admin/commit/d2cb53dca7e7179c794dc9e699d057ed549aec62) - 根目录增加 .env.ra.xxx，其中 xxx 是 package.json 中运行的脚本命令第三个参数，请结合项目查看 ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2019 yezihaohao Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # react-admin([尝试一下在线编辑](https://codesandbox.io/s/react-admin-u9kdb)) react-admin system solution logo ![travis-ci](https://travis-ci.org/yezihaohao/react-admin.svg?branch=master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) ### 文档地址：[wiki](https://github.com/yezihaohao/react-admin/wiki) ### 问题和方案汇总：[issue](https://github.com/yezihaohao/react-admin/issues/12) ### 更新日志迁移至[CHANGELOG.md](https://github.com/yezihaohao/react-admin/blob/master/CHANGELOG.md)😁(重要！对于了解项目部分功能和代码很有用！) ### cli 安装和使用 react-admin 🔥 使用 [saigao](https://github.com/yezihaohao/saigao) 快速安装和下载 react-admin 模板来开发项目： ```js npm i -g saigao saigao myapp // 或者使用npx 下载模板 npx saigao myapp ``` ### 前言 > 网上 react 后台管理开源免费的完整版项目比较少，所以利用空余时间集成了一个版本出来，已放到 GitHub > 启动和打包的时间都稍长，请耐心等待两分钟 - [GitHub 地址](https://github.com/yezihaohao/react-admin) - [预览地址](https://admiring-dijkstra-34cb29.netlify.com)(已增加响应式，可手机预览 😄) ### 依赖模块 项目是用 create-react-app 创建的，主要还是列出新加的功能依赖包 点击名称可跳转相关网站 😄😄 - [react](https://facebook.github.io/react/) - [react-router](https://react-guide.github.io/react-router-cn/)(react 路由，4.x 的版本，如果还使用 3.x 的版本，请切换分支（ps:分支不再维护）) - [redux](https://redux.js.org/)(基础用法，但是封装了通用 action 和 reducer，demo 中主要用于权限控制（ps：目前可以用 16.x 的 context api 代替），可以简单了解下) - [antd](https://ant.design/index-cn)(蚂蚁金服开源的 react ui 组件框架) - [axios](https://github.com/mzabriskie/axios)(http 请求模块，可用于前端任何场景，很强大 👍) - [echarts-for-react](https://github.com/hustcc/echarts-for-react)(可视化图表，别人基于 react 对 echarts 的封装，足够用了) - [recharts](http://recharts.org/#/zh-CN/)(另一个基于 react 封装的图表，个人觉得是没有 echarts 好用) - [nprogress](https://github.com/rstacruz/nprogress)(顶部加载条，蛮好用 👍) - [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)(别人基于 react 的富文本封装，如果找到其他更好的可以替换) - [react-draggable](https://github.com/mzabriskie/react-draggable)(拖拽模块，找了个简单版的) - [screenfull](https://github.com/sindresorhus/screenfull.js/)(全屏插件) - [photoswipe](https://github.com/dimsemenov/photoswipe)(图片弹层查看插件，不依赖 jQuery，还是蛮好用 👍) - [animate.css](http://daneden.me/animate)(css 动画库) - [react-loadable](https://github.com/jamiebuilds/react-loadable)(代码拆分，按需加载，预加载，样样都行，具体见其文档，推荐使用) - [redux-alita](https://github.com/yezihaohao/redux-alita) 极简的 redux2react 工具 - 其他小细节省略 ### 功能模块 备注：项目只引入了 ant-design 的部分组件，其他的组件 antd 官网有源码，可以直接复制到项目中使用，后续有时间补上全部组件。 项目使用了 antd 的自定义主题功能-->黑色，若想替换其他颜色，具体操作请查看 antd 官网 - 首页 - 完整布局 - 换肤(全局功能，暂时只实现了顶部导航的换肤，后续加上其他模块) - 导航菜单 - 顶部导航(菜单伸缩，全屏功能) - 左边菜单(增加滚动条以及适配路由的 active 操作) - UI 模块 - 按钮(antd 组件) - 图标(antd 组件并增加彩色表情符) - 加载中(antd 组件并增加顶部加载条) - 通知提醒框(antd 组件) - 标签页(antd 组件) - 轮播图(ant 动效组件) - 富文本 - 拖拽 - 画廊 - 动画 - 基础动画(animate.css 所有动画) - 动画案例 - 表格 - 基础表格(antd 组件) - 高级表格(antd 组件) - 异步表格(数据来自掘金酱的接口) - 表单 - 基础表单(antd 组件) - 图表 - echarts 图表 - recharts 图表 - 页面 - 登录页面(包括 GitHub 第三方登录) - 404 页面 ### 功能截图 #### 首页 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd1.gif) #### 按钮图标等 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd2.gif) #### 轮播图 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd3.gif) #### 富文本 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd4.gif) #### 拖拽 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd5.gif) #### 画廊 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd6.gif) #### 动画 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd7.gif) #### 表格 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd8.gif) #### 表单 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd9.gif) #### 图表 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd10.gif) #### 页面 ![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd11.gif) #### 菜单拖拽 ![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/menu_draggable.gif) ### 代码目录 ```js +-- build/ ---打包的文件目录 +-- config/ ---npm run eject 后的配置文件目录 +-- node_modules/ ---npm下载文件目录 +-- public/ | --- index.html ---首页入口html文件 | --- npm.json ---echarts测试数据 | --- weibo.json ---echarts测试数据 +-- src/ ---核心代码目录 | +-- axios ---http请求存放目录 | | --- index.js | +-- components ---各式各样的组件存放目录 | | +-- animation ---动画组件 | | | --- ... | | +-- charts ---图表组件 | | | --- ... | | +-- dashboard ---首页组件 | | | --- ... | | +-- forms ---表单组件 | | | --- ... | | +-- pages ---页面组件 | | | --- ... | | +-- tables ---表格组件 | | | --- ... | | +-- ui ---ui组件 | | | --- ... | | --- BreadcrumbCustom.jsx ---面包屑组件 | | --- HeaderCustom.jsx ---顶部导航组件 | | --- Page.jsx ---页面容器 | | --- SiderCustom.jsx ---左边菜单组件 | +-- style ---项目的样式存放目录，主要采用less编写 | +-- utils ---工具文件存放目录 | --- App.js ---组件入口文件 | --- index.js ---项目的整体js入口文件，包括路由配置等 --- .env ---启动项目自定义端口配置文件 --- .eslintrc ---自定义eslint配置文件，包括增加的react jsx语法限制 --- package.json ``` ### 安装运行 ##### 1.下载或克隆项目源码 ##### 2.yarn 安装依赖(国内建议增加淘宝镜像源，不然很慢，你懂的 😁) > 有些老铁遇到运行时报错，首先确定下是不是最新稳定版的 nodejs 和 yarn，切记不要用 cnpm ```js // 首推荐使用yarn装包，避免自动升级依赖包 yarn; ``` ##### 3.启动项目 ```js yarn start ``` ##### 4.打包项目 ```js yarn build ``` ### Q&A(点击问题查看答案) #### 1.[create-react-app 打包项目 run build 增加进度条信息?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-325383346) #### 2.[接口跨域了，怎么在本地开发时配置代理?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-326169055) #### 3.[在使用 hashRouter 的情况下怎么实现类似锚点跳转?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-345127221) #### 4.[怎么添加多页面配置?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-348088852) #### 5.[路由传参数接问号怎么传?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-375583089) #### 6.[如何兼容 IE 浏览器?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-510295292) ### License MIT ### 结尾 该项目会不定时更新，后续时间会添加更多的模块 欢迎和感谢大家 PR~~👏👏 若有问题，可加 QQ 群与我交流 - 1 群：264591039（已满） - 2 群：592688854（已满） - 3 群：743490497 (已满) - 4 群：150131600 (已满) 如果对你有帮助，给个 star 哟~~❤️❤️❤️❤️ ================================================ FILE: config/env.js ================================================ 'use strict'; const fs = require('fs'); const path = require('path'); const paths = require('./paths'); // Make sure that including paths.js after env.js will read .env variables. delete require.cache[require.resolve('./paths')]; const NODE_ENV = process.env.NODE_ENV; const REACT_ADMIN = process.env.REACT_ADMIN; if (!NODE_ENV) { throw new Error('The NODE_ENV environment variable is required but was not specified.'); } // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use const dotenvFiles = [ `${paths.dotenv}.${NODE_ENV}.local`, `${paths.dotenv}.${NODE_ENV}`, `${paths.dotenv}.ra.${REACT_ADMIN}`, // Don't include `.env.local` for `test` environment // since normally you expect tests to produce the same // results for everyone NODE_ENV !== 'test' && `${paths.dotenv}.local`, paths.dotenv, ].filter(Boolean); // Load environment variables from .env* files. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. Variable expansion is supported in .env files. // https://github.com/motdotla/dotenv // https://github.com/motdotla/dotenv-expand dotenvFiles.forEach((dotenvFile) => { if (fs.existsSync(dotenvFile)) { require('dotenv-expand')( require('dotenv').config({ path: dotenvFile, }) ); } }); // We support resolving modules according to `NODE_PATH`. // This lets you use absolute paths in imports inside large monorepos: // https://github.com/facebook/create-react-app/issues/253. // It works similar to `NODE_PATH` in Node itself: // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421 // We also resolve them to make sure all tools using them work consistently. const appDirectory = fs.realpathSync(process.cwd()); process.env.NODE_PATH = (process.env.NODE_PATH || '') .split(path.delimiter) .filter((folder) => folder && !path.isAbsolute(folder)) .map((folder) => path.resolve(appDirectory, folder)) .join(path.delimiter); // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be // injected into the application via DefinePlugin in Webpack configuration. const REACT_APP = /^REACT_APP_/i; const REACT_ADMIN_REG = /^REACT_ADMIN_/i; function getClientEnvironment(publicUrl) { const raw = Object.keys(process.env) .filter((key) => REACT_APP.test(key) || REACT_ADMIN_REG.test(key)) .reduce( (env, key) => { env[key] = process.env[key]; return env; }, { // Useful for determining whether we’re running in production mode. // Most importantly, it switches React into the correct mode. NODE_ENV: process.env.NODE_ENV || 'development', // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. PUBLIC_URL: publicUrl, } ); // Stringify all values so we can feed into Webpack DefinePlugin const stringified = { 'process.env': Object.keys(raw).reduce((env, key) => { env[key] = JSON.stringify(raw[key]); return env; }, {}), }; return { raw, stringified }; } module.exports = getClientEnvironment; ================================================ FILE: config/jest/cssTransform.js ================================================ 'use strict'; // This is a custom Jest transformer turning style imports into empty objects. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process() { return 'module.exports = {};'; }, getCacheKey() { // The output is always the same. return 'cssTransform'; }, }; ================================================ FILE: config/jest/fileTransform.js ================================================ 'use strict'; const path = require('path'); const camelcase = require('camelcase'); // This is a custom Jest transformer turning file imports into filenames. // http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process(src, filename) { const assetFilename = JSON.stringify(path.basename(filename)); if (filename.match(/\.svg$/)) { // Based on how SVGR generates a component name: // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6 const pascalCaseFilename = camelcase(path.parse(filename).name, { pascalCase: true, }); const componentName = `Svg${pascalCaseFilename}`; return `const React = require('react'); module.exports = { __esModule: true, default: ${assetFilename}, ReactComponent: React.forwardRef(function ${componentName}(props, ref) { return { $$typeof: Symbol.for('react.element'), type: 'svg', ref: ref, key: null, props: Object.assign({}, props, { children: ${assetFilename} }) }; }), };`; } return `module.exports = ${assetFilename};`; }, }; ================================================ FILE: config/modules.js ================================================ 'use strict'; const fs = require('fs'); const path = require('path'); const paths = require('./paths'); const chalk = require('react-dev-utils/chalk'); const resolve = require('resolve'); /** * Get additional module paths based on the baseUrl of a compilerOptions object. * * @param {Object} options */ function getAdditionalModulePaths(options = {}) { const baseUrl = options.baseUrl; // We need to explicitly check for null and undefined (and not a falsy value) because // TypeScript treats an empty string as `.`. if (baseUrl == null) { // If there's no baseUrl set we respect NODE_PATH // Note that NODE_PATH is deprecated and will be removed // in the next major release of create-react-app. const nodePath = process.env.NODE_PATH || ''; return nodePath.split(path.delimiter).filter(Boolean); } const baseUrlResolved = path.resolve(paths.appPath, baseUrl); // We don't need to do anything if `baseUrl` is set to `node_modules`. This is // the default behavior. if (path.relative(paths.appNodeModules, baseUrlResolved) === '') { return null; } // Allow the user set the `baseUrl` to `appSrc`. if (path.relative(paths.appSrc, baseUrlResolved) === '') { return [paths.appSrc]; } // If the path is equal to the root directory we ignore it here. // We don't want to allow importing from the root directly as source files are // not transpiled outside of `src`. We do allow importing them with the // absolute path (e.g. `src/Components/Button.js`) but we set that up with // an alias. if (path.relative(paths.appPath, baseUrlResolved) === '') { return null; } // Otherwise, throw an error. throw new Error( chalk.red.bold( "Your project's `baseUrl` can only be set to `src` or `node_modules`." + ' Create React App does not support other values at this time.' ) ); } /** * Get webpack aliases based on the baseUrl of a compilerOptions object. * * @param {*} options */ function getWebpackAliases(options = {}) { const baseUrl = options.baseUrl; if (!baseUrl) { return {}; } const baseUrlResolved = path.resolve(paths.appPath, baseUrl); if (path.relative(paths.appPath, baseUrlResolved) === '') { return { src: paths.appSrc, }; } } /** * Get jest aliases based on the baseUrl of a compilerOptions object. * * @param {*} options */ function getJestAliases(options = {}) { const baseUrl = options.baseUrl; if (!baseUrl) { return {}; } const baseUrlResolved = path.resolve(paths.appPath, baseUrl); if (path.relative(paths.appPath, baseUrlResolved) === '') { return { 'src/(.*)$': '/src/$1', }; } } function getModules() { // Check if TypeScript is setup const hasTsConfig = fs.existsSync(paths.appTsConfig); const hasJsConfig = fs.existsSync(paths.appJsConfig); if (hasTsConfig && hasJsConfig) { throw new Error( 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.' ); } let config; // If there's a tsconfig.json we assume it's a // TypeScript project and set up the config // based on tsconfig.json if (hasTsConfig) { const ts = require(resolve.sync('typescript', { basedir: paths.appNodeModules, })); config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config; // Otherwise we'll check if there is jsconfig.json // for non TS projects. } else if (hasJsConfig) { config = require(paths.appJsConfig); } config = config || {}; const options = config.compilerOptions || {}; const additionalModulePaths = getAdditionalModulePaths(options); return { additionalModulePaths: additionalModulePaths, webpackAliases: getWebpackAliases(options), jestAliases: getJestAliases(options), hasTsConfig, }; } module.exports = getModules(); ================================================ FILE: config/paths.js ================================================ 'use strict'; const path = require('path'); const fs = require('fs'); const url = require('url'); // Make sure any symlinks in the project folder are resolved: // https://github.com/facebook/create-react-app/issues/637 const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); const envPublicUrl = process.env.PUBLIC_URL; function ensureSlash(inputPath, needsSlash) { const hasSlash = inputPath.endsWith('/'); if (hasSlash && !needsSlash) { return inputPath.substr(0, inputPath.length - 1); } else if (!hasSlash && needsSlash) { return `${inputPath}/`; } else { return inputPath; } } const getPublicUrl = appPackageJson => envPublicUrl || require(appPackageJson).homepage; // We use `PUBLIC_URL` environment variable or "homepage" field to infer // "public path" at which the app is served. // Webpack needs to know it to put the right
================================================ FILE: public/manifest.json ================================================ { "name": "ReactAdmin", "short_name": "ReactAdmin", "theme_color": "#313653", "background_color": "#313653", "display": "fullscreen", "start_url": ".", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null } ================================================ FILE: public/robots.txt ================================================ # https://www.robotstxt.org/robotstxt.html User-agent: * ================================================ FILE: public/theme.less ================================================ @primary-color: #313653; /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable */ .bezierEasingMixin() { @functions: ~`(function() { var NEWTON_ITERATIONS = 4; var NEWTON_MIN_SLOPE = 0.001; var SUBDIVISION_PRECISION = 0.0000001; var SUBDIVISION_MAX_ITERATIONS = 10; var kSplineTableSize = 11; var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); var float32ArraySupported = typeof Float32Array === 'function'; function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } function C (aA1) { return 3.0 * aA1; } // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } function binarySubdivide (aX, aA, aB, mX1, mX2) { var currentX, currentT, i = 0; do { currentT = aA + (aB - aA) / 2.0; currentX = calcBezier(currentT, mX1, mX2) - aX; if (currentX > 0.0) { aB = currentT; } else { aA = currentT; } } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); return currentT; } function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { for (var i = 0; i < NEWTON_ITERATIONS; ++i) { var currentSlope = getSlope(aGuessT, mX1, mX2); if (currentSlope === 0.0) { return aGuessT; } var currentX = calcBezier(aGuessT, mX1, mX2) - aX; aGuessT -= currentX / currentSlope; } return aGuessT; } var BezierEasing = function (mX1, mY1, mX2, mY2) { if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { throw new Error('bezier x values must be in [0, 1] range'); } // Precompute samples table var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); if (mX1 !== mY1 || mX2 !== mY2) { for (var i = 0; i < kSplineTableSize; ++i) { sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); } } function getTForX (aX) { var intervalStart = 0.0; var currentSample = 1; var lastSample = kSplineTableSize - 1; for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { intervalStart += kSampleStepSize; } --currentSample; // Interpolate to provide an initial guess for t var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); var guessForT = intervalStart + dist * kSampleStepSize; var initialSlope = getSlope(guessForT, mX1, mX2); if (initialSlope >= NEWTON_MIN_SLOPE) { return newtonRaphsonIterate(aX, guessForT, mX1, mX2); } else if (initialSlope === 0.0) { return guessForT; } else { return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); } } return function BezierEasing (x) { if (mX1 === mY1 && mX2 === mY2) { return x; // linear } // Because JavaScript number are imprecise, we should guarantee the extremes are right. if (x === 0) { return 0; } if (x === 1) { return 1; } return calcBezier(getTForX(x), mY1, mY2); }; }; this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); // less 3 requires a return return ''; })()`; } // It is hacky way to make this function will be compiled preferentially by less // resolve error: `ReferenceError: colorPalette is not defined` // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin(); /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ .tinyColorMixin() { @functions: ~`(function() { // TinyColor v1.4.1 // https://github.com/bgrins/TinyColor // 2016-07-07, Brian Grinstead, MIT License var trimLeft = /^\s+/, trimRight = /\s+$/, tinyCounter = 0, mathRound = Math.round, mathMin = Math.min, mathMax = Math.max, mathRandom = Math.random; function tinycolor (color, opts) { color = (color) ? color : ''; opts = opts || { }; // If input is already a tinycolor, return itself if (color instanceof tinycolor) { return color; } // If we are called as a function, call using new instead if (!(this instanceof tinycolor)) { return new tinycolor(color, opts); } var rgb = inputToRGB(color); this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = mathRound(100*this._a) / 100, this._format = opts.format || rgb.format; this._gradientType = opts.gradientType; // Don't let the range of [0,255] come back in [0,1]. // Potentially lose a little bit of precision here, but will fix issues where // .5 gets interpreted as half of the total, instead of half of 1 // If it was supposed to be 128, this was already taken care of by inputToRgb if (this._r < 1) { this._r = mathRound(this._r); } if (this._g < 1) { this._g = mathRound(this._g); } if (this._b < 1) { this._b = mathRound(this._b); } this._ok = rgb.ok; this._tc_id = tinyCounter++; } tinycolor.prototype = { isDark: function() { return this.getBrightness() < 128; }, isLight: function() { return !this.isDark(); }, isValid: function() { return this._ok; }, getOriginalInput: function() { return this._originalInput; }, getFormat: function() { return this._format; }, getAlpha: function() { return this._a; }, getBrightness: function() { //http://www.w3.org/TR/AERT#color-contrast var rgb = this.toRgb(); return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; }, getLuminance: function() { //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef var rgb = this.toRgb(); var RsRGB, GsRGB, BsRGB, R, G, B; RsRGB = rgb.r/255; GsRGB = rgb.g/255; BsRGB = rgb.b/255; if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); }, setAlpha: function(value) { this._a = boundAlpha(value); this._roundA = mathRound(100*this._a) / 100; return this; }, toHsv: function() { var hsv = rgbToHsv(this._r, this._g, this._b); return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; }, toHsvString: function() { var hsv = rgbToHsv(this._r, this._g, this._b); var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); return (this._a == 1) ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; }, toHsl: function() { var hsl = rgbToHsl(this._r, this._g, this._b); return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; }, toHslString: function() { var hsl = rgbToHsl(this._r, this._g, this._b); var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); return (this._a == 1) ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; }, toHex: function(allow3Char) { return rgbToHex(this._r, this._g, this._b, allow3Char); }, toHexString: function(allow3Char) { return '#' + this.toHex(allow3Char); }, toHex8: function(allow4Char) { return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); }, toHex8String: function(allow4Char) { return '#' + this.toHex8(allow4Char); }, toRgb: function() { return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; }, toRgbString: function() { return (this._a == 1) ? "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; }, toPercentageRgb: function() { return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; }, toPercentageRgbString: function() { return (this._a == 1) ? "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; }, toName: function() { if (this._a === 0) { return "transparent"; } if (this._a < 1) { return false; } return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; }, toFilter: function(secondColor) { var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); var secondHex8String = hex8String; var gradientType = this._gradientType ? "GradientType = 1, " : ""; if (secondColor) { var s = tinycolor(secondColor); secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); } return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; }, toString: function(format) { var formatSet = !!format; format = format || this._format; var formattedString = false; var hasAlpha = this._a < 1 && this._a >= 0; var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); if (needsAlphaFormat) { // Special case for "transparent", all other non-alpha formats // will return rgba when there is transparency. if (format === "name" && this._a === 0) { return this.toName(); } return this.toRgbString(); } if (format === "rgb") { formattedString = this.toRgbString(); } if (format === "prgb") { formattedString = this.toPercentageRgbString(); } if (format === "hex" || format === "hex6") { formattedString = this.toHexString(); } if (format === "hex3") { formattedString = this.toHexString(true); } if (format === "hex4") { formattedString = this.toHex8String(true); } if (format === "hex8") { formattedString = this.toHex8String(); } if (format === "name") { formattedString = this.toName(); } if (format === "hsl") { formattedString = this.toHslString(); } if (format === "hsv") { formattedString = this.toHsvString(); } return formattedString || this.toHexString(); }, clone: function() { return tinycolor(this.toString()); }, _applyModification: function(fn, args) { var color = fn.apply(null, [this].concat([].slice.call(args))); this._r = color._r; this._g = color._g; this._b = color._b; this.setAlpha(color._a); return this; }, lighten: function() { return this._applyModification(lighten, arguments); }, brighten: function() { return this._applyModification(brighten, arguments); }, darken: function() { return this._applyModification(darken, arguments); }, desaturate: function() { return this._applyModification(desaturate, arguments); }, saturate: function() { return this._applyModification(saturate, arguments); }, greyscale: function() { return this._applyModification(greyscale, arguments); }, spin: function() { return this._applyModification(spin, arguments); }, _applyCombination: function(fn, args) { return fn.apply(null, [this].concat([].slice.call(args))); }, analogous: function() { return this._applyCombination(analogous, arguments); }, complement: function() { return this._applyCombination(complement, arguments); }, monochromatic: function() { return this._applyCombination(monochromatic, arguments); }, splitcomplement: function() { return this._applyCombination(splitcomplement, arguments); }, triad: function() { return this._applyCombination(triad, arguments); }, tetrad: function() { return this._applyCombination(tetrad, arguments); } }; // If input is an object, force 1 into "1.0" to handle ratios properly // String input requires "1.0" as input, so 1 will be treated as 1 tinycolor.fromRatio = function(color, opts) { if (typeof color == "object") { var newColor = {}; for (var i in color) { if (color.hasOwnProperty(i)) { if (i === "a") { newColor[i] = color[i]; } else { newColor[i] = convertToPercentage(color[i]); } } } color = newColor; } return tinycolor(color, opts); }; // Given a string or object, convert that input to RGB // Possible string inputs: // // "red" // "#f00" or "f00" // "#ff0000" or "ff0000" // "#ff000000" or "ff000000" // "rgb 255 0 0" or "rgb (255, 0, 0)" // "rgb 1.0 0 0" or "rgb (1, 0, 0)" // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" // function inputToRGB(color) { var rgb = { r: 0, g: 0, b: 0 }; var a = 1; var s = null; var v = null; var l = null; var ok = false; var format = false; if (typeof color == "string") { color = stringInputToObject(color); } if (typeof color == "object") { if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { rgb = rgbToRgb(color.r, color.g, color.b); ok = true; format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { s = convertToPercentage(color.s); v = convertToPercentage(color.v); rgb = hsvToRgb(color.h, s, v); ok = true; format = "hsv"; } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { s = convertToPercentage(color.s); l = convertToPercentage(color.l); rgb = hslToRgb(color.h, s, l); ok = true; format = "hsl"; } if (color.hasOwnProperty("a")) { a = color.a; } } a = boundAlpha(a); return { ok: ok, format: color.format || format, r: mathMin(255, mathMax(rgb.r, 0)), g: mathMin(255, mathMax(rgb.g, 0)), b: mathMin(255, mathMax(rgb.b, 0)), a: a }; } // Conversion Functions // -------------------- // rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from: // // rgbToRgb // Handle bounds / percentage checking to conform to CSS color spec // // *Assumes:* r, g, b in [0, 255] or [0, 1] // *Returns:* { r, g, b } in [0, 255] function rgbToRgb(r, g, b){ return { r: bound01(r, 255) * 255, g: bound01(g, 255) * 255, b: bound01(b, 255) * 255 }; } // rgbToHsl // Converts an RGB color value to HSL. // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] // *Returns:* { h, s, l } in [0,1] function rgbToHsl(r, g, b) { r = bound01(r, 255); g = bound01(g, 255); b = bound01(b, 255); var max = mathMax(r, g, b), min = mathMin(r, g, b); var h, s, l = (max + min) / 2; if(max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h, s: s, l: l }; } // hslToRgb // Converts an HSL color value to RGB. // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] // *Returns:* { r, g, b } in the set [0, 255] function hslToRgb(h, s, l) { var r, g, b; h = bound01(h, 360); s = bound01(s, 100); l = bound01(l, 100); function hue2rgb(p, q, t) { if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } if(s === 0) { r = g = b = l; // achromatic } else { var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: r * 255, g: g * 255, b: b * 255 }; } // rgbToHsv // Converts an RGB color value to HSV // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] // *Returns:* { h, s, v } in [0,1] function rgbToHsv(r, g, b) { r = bound01(r, 255); g = bound01(g, 255); b = bound01(b, 255); var max = mathMax(r, g, b), min = mathMin(r, g, b); var h, s, v = max; var d = max - min; s = max === 0 ? 0 : d / max; if(max == min) { h = 0; // achromatic } else { switch(max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h, s: s, v: v }; } // hsvToRgb // Converts an HSV color value to RGB. // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] // *Returns:* { r, g, b } in the set [0, 255] function hsvToRgb(h, s, v) { h = bound01(h, 360) * 6; s = bound01(s, 100); v = bound01(v, 100); var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod]; return { r: r * 255, g: g * 255, b: b * 255 }; } // rgbToHex // Converts an RGB color to hex // Assumes r, g, and b are contained in the set [0, 255] // Returns a 3 or 6 character hex function rgbToHex(r, g, b, allow3Char) { var hex = [ pad2(mathRound(r).toString(16)), pad2(mathRound(g).toString(16)), pad2(mathRound(b).toString(16)) ]; // Return a 3 character hex if possible if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); } return hex.join(""); } // rgbaToHex // Converts an RGBA color plus alpha transparency to hex // Assumes r, g, b are contained in the set [0, 255] and // a in [0, 1]. Returns a 4 or 8 character rgba hex function rgbaToHex(r, g, b, a, allow4Char) { var hex = [ pad2(mathRound(r).toString(16)), pad2(mathRound(g).toString(16)), pad2(mathRound(b).toString(16)), pad2(convertDecimalToHex(a)) ]; // Return a 4 character hex if possible if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); } return hex.join(""); } // rgbaToArgbHex // Converts an RGBA color to an ARGB Hex8 string // Rarely used, but required for "toFilter()" function rgbaToArgbHex(r, g, b, a) { var hex = [ pad2(convertDecimalToHex(a)), pad2(mathRound(r).toString(16)), pad2(mathRound(g).toString(16)), pad2(mathRound(b).toString(16)) ]; return hex.join(""); } // equals // Can be called with any tinycolor input tinycolor.equals = function (color1, color2) { if (!color1 || !color2) { return false; } return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); }; tinycolor.random = function() { return tinycolor.fromRatio({ r: mathRandom(), g: mathRandom(), b: mathRandom() }); }; // Modification Functions // ---------------------- // Thanks to less.js for some of the basics here // function desaturate(color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor(color).toHsl(); hsl.s -= amount / 100; hsl.s = clamp01(hsl.s); return tinycolor(hsl); } function saturate(color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor(color).toHsl(); hsl.s += amount / 100; hsl.s = clamp01(hsl.s); return tinycolor(hsl); } function greyscale(color) { return tinycolor(color).desaturate(100); } function lighten (color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor(color).toHsl(); hsl.l += amount / 100; hsl.l = clamp01(hsl.l); return tinycolor(hsl); } function brighten(color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var rgb = tinycolor(color).toRgb(); rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); return tinycolor(rgb); } function darken (color, amount) { amount = (amount === 0) ? 0 : (amount || 10); var hsl = tinycolor(color).toHsl(); hsl.l -= amount / 100; hsl.l = clamp01(hsl.l); return tinycolor(hsl); } // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. // Values outside of this range will be wrapped into this range. function spin(color, amount) { var hsl = tinycolor(color).toHsl(); var hue = (hsl.h + amount) % 360; hsl.h = hue < 0 ? 360 + hue : hue; return tinycolor(hsl); } // Combination Functions // --------------------- // Thanks to jQuery xColor for some of the ideas behind these // function complement(color) { var hsl = tinycolor(color).toHsl(); hsl.h = (hsl.h + 180) % 360; return tinycolor(hsl); } function triad(color) { var hsl = tinycolor(color).toHsl(); var h = hsl.h; return [ tinycolor(color), tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) ]; } function tetrad(color) { var hsl = tinycolor(color).toHsl(); var h = hsl.h; return [ tinycolor(color), tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) ]; } function splitcomplement(color) { var hsl = tinycolor(color).toHsl(); var h = hsl.h; return [ tinycolor(color), tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) ]; } function analogous(color, results, slices) { results = results || 6; slices = slices || 30; var hsl = tinycolor(color).toHsl(); var part = 360 / slices; var ret = [tinycolor(color)]; for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { hsl.h = (hsl.h + part) % 360; ret.push(tinycolor(hsl)); } return ret; } function monochromatic(color, results) { results = results || 6; var hsv = tinycolor(color).toHsv(); var h = hsv.h, s = hsv.s, v = hsv.v; var ret = []; var modification = 1 / results; while (results--) { ret.push(tinycolor({ h: h, s: s, v: v})); v = (v + modification) % 1; } return ret; } // Utility Functions // --------------------- tinycolor.mix = function(color1, color2, amount) { amount = (amount === 0) ? 0 : (amount || 50); var rgb1 = tinycolor(color1).toRgb(); var rgb2 = tinycolor(color2).toRgb(); var p = amount / 100; var rgba = { r: ((rgb2.r - rgb1.r) * p) + rgb1.r, g: ((rgb2.g - rgb1.g) * p) + rgb1.g, b: ((rgb2.b - rgb1.b) * p) + rgb1.b, a: ((rgb2.a - rgb1.a) * p) + rgb1.a }; return tinycolor(rgba); }; // Readability Functions // --------------------- // false // tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false tinycolor.isReadable = function(color1, color2, wcag2) { var readability = tinycolor.readability(color1, color2); var wcag2Parms, out; out = false; wcag2Parms = validateWCAG2Parms(wcag2); switch (wcag2Parms.level + wcag2Parms.size) { case "AAsmall": case "AAAlarge": out = readability >= 4.5; break; case "AAlarge": out = readability >= 3; break; case "AAAsmall": out = readability >= 7; break; } return out; }; // mostReadable // Given a base color and a list of possible foreground or background // colors for that base, returns the most readable color. // Optionally returns Black or White if the most readable color is unreadable. // *Example* // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" // tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" // tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" tinycolor.mostReadable = function(baseColor, colorList, args) { var bestColor = null; var bestScore = 0; var readability; var includeFallbackColors, level, size ; args = args || {}; includeFallbackColors = args.includeFallbackColors ; level = args.level; size = args.size; for (var i= 0; i < colorList.length ; i++) { readability = tinycolor.readability(baseColor, colorList[i]); if (readability > bestScore) { bestScore = readability; bestColor = tinycolor(colorList[i]); } } if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { return bestColor; } else { args.includeFallbackColors=false; return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); } }; // Big List of Colors // ------------------ // var names = tinycolor.names = { aliceblue: "f0f8ff", antiquewhite: "faebd7", aqua: "0ff", aquamarine: "7fffd4", azure: "f0ffff", beige: "f5f5dc", bisque: "ffe4c4", black: "000", blanchedalmond: "ffebcd", blue: "00f", blueviolet: "8a2be2", brown: "a52a2a", burlywood: "deb887", burntsienna: "ea7e5d", cadetblue: "5f9ea0", chartreuse: "7fff00", chocolate: "d2691e", coral: "ff7f50", cornflowerblue: "6495ed", cornsilk: "fff8dc", crimson: "dc143c", cyan: "0ff", darkblue: "00008b", darkcyan: "008b8b", darkgoldenrod: "b8860b", darkgray: "a9a9a9", darkgreen: "006400", darkgrey: "a9a9a9", darkkhaki: "bdb76b", darkmagenta: "8b008b", darkolivegreen: "556b2f", darkorange: "ff8c00", darkorchid: "9932cc", darkred: "8b0000", darksalmon: "e9967a", darkseagreen: "8fbc8f", darkslateblue: "483d8b", darkslategray: "2f4f4f", darkslategrey: "2f4f4f", darkturquoise: "00ced1", darkviolet: "9400d3", deeppink: "ff1493", deepskyblue: "00bfff", dimgray: "696969", dimgrey: "696969", dodgerblue: "1e90ff", firebrick: "b22222", floralwhite: "fffaf0", forestgreen: "228b22", fuchsia: "f0f", gainsboro: "dcdcdc", ghostwhite: "f8f8ff", gold: "ffd700", goldenrod: "daa520", gray: "808080", green: "008000", greenyellow: "adff2f", grey: "808080", honeydew: "f0fff0", hotpink: "ff69b4", indianred: "cd5c5c", indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c", lavender: "e6e6fa", lavenderblush: "fff0f5", lawngreen: "7cfc00", lemonchiffon: "fffacd", lightblue: "add8e6", lightcoral: "f08080", lightcyan: "e0ffff", lightgoldenrodyellow: "fafad2", lightgray: "d3d3d3", lightgreen: "90ee90", lightgrey: "d3d3d3", lightpink: "ffb6c1", lightsalmon: "ffa07a", lightseagreen: "20b2aa", lightskyblue: "87cefa", lightslategray: "789", lightslategrey: "789", lightsteelblue: "b0c4de", lightyellow: "ffffe0", lime: "0f0", limegreen: "32cd32", linen: "faf0e6", magenta: "f0f", maroon: "800000", mediumaquamarine: "66cdaa", mediumblue: "0000cd", mediumorchid: "ba55d3", mediumpurple: "9370db", mediumseagreen: "3cb371", mediumslateblue: "7b68ee", mediumspringgreen: "00fa9a", mediumturquoise: "48d1cc", mediumvioletred: "c71585", midnightblue: "191970", mintcream: "f5fffa", mistyrose: "ffe4e1", moccasin: "ffe4b5", navajowhite: "ffdead", navy: "000080", oldlace: "fdf5e6", olive: "808000", olivedrab: "6b8e23", orange: "ffa500", orangered: "ff4500", orchid: "da70d6", palegoldenrod: "eee8aa", palegreen: "98fb98", paleturquoise: "afeeee", palevioletred: "db7093", papayawhip: "ffefd5", peachpuff: "ffdab9", peru: "cd853f", pink: "ffc0cb", plum: "dda0dd", powderblue: "b0e0e6", purple: "800080", rebeccapurple: "663399", red: "f00", rosybrown: "bc8f8f", royalblue: "4169e1", saddlebrown: "8b4513", salmon: "fa8072", sandybrown: "f4a460", seagreen: "2e8b57", seashell: "fff5ee", sienna: "a0522d", silver: "c0c0c0", skyblue: "87ceeb", slateblue: "6a5acd", slategray: "708090", slategrey: "708090", snow: "fffafa", springgreen: "00ff7f", steelblue: "4682b4", tan: "d2b48c", teal: "008080", thistle: "d8bfd8", tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee", wheat: "f5deb3", white: "fff", whitesmoke: "f5f5f5", yellow: "ff0", yellowgreen: "9acd32" }; // Make it easy to access colors via hexNames[hex] var hexNames = tinycolor.hexNames = flip(names); // Utilities // --------- // { 'name1': 'val1' } becomes { 'val1': 'name1' } function flip(o) { var flipped = { }; for (var i in o) { if (o.hasOwnProperty(i)) { flipped[o[i]] = i; } } return flipped; } // Return a valid alpha value [0,1] with all invalid values being set to 1 function boundAlpha(a) { a = parseFloat(a); if (isNaN(a) || a < 0 || a > 1) { a = 1; } return a; } // Take input from [0, n] and return it as [0, 1] function bound01(n, max) { if (isOnePointZero(n)) { n = "100%"; } var processPercent = isPercentage(n); n = mathMin(max, mathMax(0, parseFloat(n))); // Automatically convert percentage into number if (processPercent) { n = parseInt(n * max, 10) / 100; } // Handle floating point rounding errors if ((Math.abs(n - max) < 0.000001)) { return 1; } // Convert into [0, 1] range if it isn't already return (n % max) / parseFloat(max); } // Force a number between 0 and 1 function clamp01(val) { return mathMin(1, mathMax(0, val)); } // Parse a base-16 hex value into a base-10 integer function parseIntFromHex(val) { return parseInt(val, 16); } // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 // function isOnePointZero(n) { return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; } // Check to see if string passed in is a percentage function isPercentage(n) { return typeof n === "string" && n.indexOf('%') != -1; } // Force a hex value to have 2 characters function pad2(c) { return c.length == 1 ? '0' + c : '' + c; } // Replace a decimal with it's percentage value function convertToPercentage(n) { if (n <= 1) { n = (n * 100) + "%"; } return n; } // Converts a decimal to a hex value function convertDecimalToHex(d) { return Math.round(parseFloat(d) * 255).toString(16); } // Converts a hex value to a decimal function convertHexToDecimal(h) { return (parseIntFromHex(h) / 255); } var matchers = (function() { // var CSS_INTEGER = "[-\\+]?\\d+%?"; // var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; // Actual matching. // Parentheses and commas are optional, but not required. // Whitespace can take the place of commas or opening paren var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; return { CSS_UNIT: new RegExp(CSS_UNIT), rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ }; })(); // isValidCSSUnit // Take in a single string / number and check to see if it looks like a CSS unit // (see matchers above for definition). function isValidCSSUnit(color) { return !!matchers.CSS_UNIT.exec(color); } // stringInputToObject // Permissive string parsing. Take in a number of formats, and output an object // based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v} function stringInputToObject(color) { color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase(); var named = false; if (names[color]) { color = names[color]; named = true; } else if (color == 'transparent') { return { r: 0, g: 0, b: 0, a: 0, format: "name" }; } // Try to match string input using regular expressions. // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] // Just return an object and let the conversion functions handle that. // This way the result will be the same whether the tinycolor is initialized with string or object. var match; if ((match = matchers.rgb.exec(color))) { return { r: match[1], g: match[2], b: match[3] }; } if ((match = matchers.rgba.exec(color))) { return { r: match[1], g: match[2], b: match[3], a: match[4] }; } if ((match = matchers.hsl.exec(color))) { return { h: match[1], s: match[2], l: match[3] }; } if ((match = matchers.hsla.exec(color))) { return { h: match[1], s: match[2], l: match[3], a: match[4] }; } if ((match = matchers.hsv.exec(color))) { return { h: match[1], s: match[2], v: match[3] }; } if ((match = matchers.hsva.exec(color))) { return { h: match[1], s: match[2], v: match[3], a: match[4] }; } if ((match = matchers.hex8.exec(color))) { return { r: parseIntFromHex(match[1]), g: parseIntFromHex(match[2]), b: parseIntFromHex(match[3]), a: convertHexToDecimal(match[4]), format: named ? "name" : "hex8" }; } if ((match = matchers.hex6.exec(color))) { return { r: parseIntFromHex(match[1]), g: parseIntFromHex(match[2]), b: parseIntFromHex(match[3]), format: named ? "name" : "hex" }; } if ((match = matchers.hex4.exec(color))) { return { r: parseIntFromHex(match[1] + '' + match[1]), g: parseIntFromHex(match[2] + '' + match[2]), b: parseIntFromHex(match[3] + '' + match[3]), a: convertHexToDecimal(match[4] + '' + match[4]), format: named ? "name" : "hex8" }; } if ((match = matchers.hex3.exec(color))) { return { r: parseIntFromHex(match[1] + '' + match[1]), g: parseIntFromHex(match[2] + '' + match[2]), b: parseIntFromHex(match[3] + '' + match[3]), format: named ? "name" : "hex" }; } return false; } function validateWCAG2Parms(parms) { // return valid WCAG2 parms for isReadable. // If input parms are invalid, return {"level":"AA", "size":"small"} var level, size; parms = parms || {"level":"AA", "size":"small"}; level = (parms.level || "AA").toUpperCase(); size = (parms.size || "small").toLowerCase(); if (level !== "AA" && level !== "AAA") { level = "AA"; } if (size !== "small" && size !== "large") { size = "small"; } return {"level":level, "size":size}; } this.tinycolor = tinycolor; })()`; } // It is hacky way to make this function will be compiled preferentially by less // resolve error: `ReferenceError: colorPalette is not defined` // https://github.com/ant-design/ant-motion/issues/44 .tinyColorMixin(); // We create a very complex algorithm which take the place of original tint/shade color system // to make sure no one can understand it 👻 // and create an entire color palette magicly by inputing just a single primary color. // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin .colorPaletteMixin() { @functions: ~`(function() { var hueStep = 2; var saturationStep = 16; var saturationStep2 = 5; var brightnessStep1 = 5; var brightnessStep2 = 15; var lightColorCount = 5; var darkColorCount = 4; var getHue = function(hsv, i, isLight) { var hue; if (hsv.h >= 60 && hsv.h <= 240) { hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; } else { hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; } if (hue < 0) { hue += 360; } else if (hue >= 360) { hue -= 360; } return Math.round(hue); }; var getSaturation = function(hsv, i, isLight) { var saturation; if (isLight) { saturation = Math.round(hsv.s * 100) - saturationStep * i; } else if (i === darkColorCount) { saturation = Math.round(hsv.s * 100) + saturationStep; } else { saturation = Math.round(hsv.s * 100) + saturationStep2 * i; } if (saturation > 100) { saturation = 100; } if (isLight && i === lightColorCount && saturation > 10) { saturation = 10; } if (saturation < 6) { saturation = 6; } return Math.round(saturation); }; var getValue = function(hsv, i, isLight) { if (isLight) { return Math.round(hsv.v * 100) + brightnessStep1 * i; } return Math.round(hsv.v * 100) - brightnessStep2 * i; }; this.colorPalette = function(color, index) { var isLight = index <= 6; var hsv = tinycolor(color).toHsv(); var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; return tinycolor({ h: getHue(hsv, i, isLight), s: getSaturation(hsv, i, isLight), v: getValue(hsv, i, isLight), }).toHexString(); }; })()`; } // It is hacky way to make this function will be compiled preferentially by less // resolve error: `ReferenceError: colorPalette is not defined` // https://github.com/ant-design/ant-motion/issues/44 .colorPaletteMixin(); // color palettes @blue-1: color(~`colorPalette('@{blue-6}', 1) `); @blue-2: color(~`colorPalette('@{blue-6}', 2) `); @blue-3: color(~`colorPalette('@{blue-6}', 3) `); @blue-4: color(~`colorPalette('@{blue-6}', 4) `); @blue-5: color(~`colorPalette('@{blue-6}', 5) `); @blue-6: #1890ff; @blue-7: color(~`colorPalette('@{blue-6}', 7) `); @blue-8: color(~`colorPalette('@{blue-6}', 8) `); @blue-9: color(~`colorPalette('@{blue-6}', 9) `); @blue-10: color(~`colorPalette('@{blue-6}', 10) `); @purple-1: color(~`colorPalette('@{purple-6}', 1) `); @purple-2: color(~`colorPalette('@{purple-6}', 2) `); @purple-3: color(~`colorPalette('@{purple-6}', 3) `); @purple-4: color(~`colorPalette('@{purple-6}', 4) `); @purple-5: color(~`colorPalette('@{purple-6}', 5) `); @purple-6: #722ed1; @purple-7: color(~`colorPalette('@{purple-6}', 7) `); @purple-8: color(~`colorPalette('@{purple-6}', 8) `); @purple-9: color(~`colorPalette('@{purple-6}', 9) `); @purple-10: color(~`colorPalette('@{purple-6}', 10) `); @cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); @cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); @cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); @cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); @cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); @cyan-6: #13c2c2; @cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); @cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); @cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); @cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); @green-1: color(~`colorPalette('@{green-6}', 1) `); @green-2: color(~`colorPalette('@{green-6}', 2) `); @green-3: color(~`colorPalette('@{green-6}', 3) `); @green-4: color(~`colorPalette('@{green-6}', 4) `); @green-5: color(~`colorPalette('@{green-6}', 5) `); @green-6: #52c41a; @green-7: color(~`colorPalette('@{green-6}', 7) `); @green-8: color(~`colorPalette('@{green-6}', 8) `); @green-9: color(~`colorPalette('@{green-6}', 9) `); @green-10: color(~`colorPalette('@{green-6}', 10) `); @magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); @magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); @magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); @magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); @magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); @magenta-6: #eb2f96; @magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); @magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); @magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); @magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); // alias of magenta @pink-1: color(~`colorPalette('@{pink-6}', 1) `); @pink-2: color(~`colorPalette('@{pink-6}', 2) `); @pink-3: color(~`colorPalette('@{pink-6}', 3) `); @pink-4: color(~`colorPalette('@{pink-6}', 4) `); @pink-5: color(~`colorPalette('@{pink-6}', 5) `); @pink-6: #eb2f96; @pink-7: color(~`colorPalette('@{pink-6}', 7) `); @pink-8: color(~`colorPalette('@{pink-6}', 8) `); @pink-9: color(~`colorPalette('@{pink-6}', 9) `); @pink-10: color(~`colorPalette('@{pink-6}', 10) `); @red-1: color(~`colorPalette('@{red-6}', 1) `); @red-2: color(~`colorPalette('@{red-6}', 2) `); @red-3: color(~`colorPalette('@{red-6}', 3) `); @red-4: color(~`colorPalette('@{red-6}', 4) `); @red-5: color(~`colorPalette('@{red-6}', 5) `); @red-6: #f5222d; @red-7: color(~`colorPalette('@{red-6}', 7) `); @red-8: color(~`colorPalette('@{red-6}', 8) `); @red-9: color(~`colorPalette('@{red-6}', 9) `); @red-10: color(~`colorPalette('@{red-6}', 10) `); @orange-1: color(~`colorPalette('@{orange-6}', 1) `); @orange-2: color(~`colorPalette('@{orange-6}', 2) `); @orange-3: color(~`colorPalette('@{orange-6}', 3) `); @orange-4: color(~`colorPalette('@{orange-6}', 4) `); @orange-5: color(~`colorPalette('@{orange-6}', 5) `); @orange-6: #fa8c16; @orange-7: color(~`colorPalette('@{orange-6}', 7) `); @orange-8: color(~`colorPalette('@{orange-6}', 8) `); @orange-9: color(~`colorPalette('@{orange-6}', 9) `); @orange-10: color(~`colorPalette('@{orange-6}', 10) `); @yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); @yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); @yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); @yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); @yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); @yellow-6: #fadb14; @yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); @yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); @yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); @yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); @volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); @volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); @volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); @volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); @volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); @volcano-6: #fa541c; @volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); @volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); @volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); @volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); @geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); @geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); @geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); @geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); @geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); @geekblue-6: #2f54eb; @geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); @geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); @geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); @geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); @lime-1: color(~`colorPalette('@{lime-6}', 1) `); @lime-2: color(~`colorPalette('@{lime-6}', 2) `); @lime-3: color(~`colorPalette('@{lime-6}', 3) `); @lime-4: color(~`colorPalette('@{lime-6}', 4) `); @lime-5: color(~`colorPalette('@{lime-6}', 5) `); @lime-6: #a0d911; @lime-7: color(~`colorPalette('@{lime-6}', 7) `); @lime-8: color(~`colorPalette('@{lime-6}', 8) `); @lime-9: color(~`colorPalette('@{lime-6}', 9) `); @lime-10: color(~`colorPalette('@{lime-6}', 10) `); @gold-1: color(~`colorPalette('@{gold-6}', 1) `); @gold-2: color(~`colorPalette('@{gold-6}', 2) `); @gold-3: color(~`colorPalette('@{gold-6}', 3) `); @gold-4: color(~`colorPalette('@{gold-6}', 4) `); @gold-5: color(~`colorPalette('@{gold-6}', 5) `); @gold-6: #faad14; @gold-7: color(~`colorPalette('@{gold-6}', 7) `); @gold-8: color(~`colorPalette('@{gold-6}', 8) `); @gold-9: color(~`colorPalette('@{gold-6}', 9) `); @gold-10: color(~`colorPalette('@{gold-6}', 10) `); @preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple; // The prefix to use on all css classes from ant. @ant-prefix: ant; // An override for the html selector for theme prefixes @html-selector: html; // -------- Colors ----------- @info-color: @blue-6; @success-color: @green-6; @processing-color: @blue-6; @error-color: @red-6; @highlight-color: @red-6; @warning-color: @gold-6; @normal-color: #d9d9d9; @white: #fff; @black: #000; // Color used by default to control hover and active backgrounds and for // alert info backgrounds. @primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%) @primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%) @primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused @primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused @primary-5: color( ~`colorPalette('@{primary-color}', 5) ` ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color @primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%) @primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused @primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused @primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused // Base Scaffolding Variables // --- // Background color for `` @body-background: #fff; // Base background color for most components @component-background: #fff; @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; @text-color: fade(@black, 65%); @text-color-secondary: fade(@black, 45%); @text-color-inverse: @white; @icon-color: inherit; @icon-color-hover: fade(@black, 75%); @heading-color: fade(#000, 85%); @heading-color-dark: fade(@white, 100%); @text-color-dark: fade(@white, 85%); @text-color-secondary-dark: fade(@white, 65%); @text-selection-bg: @primary-color; @font-variant-base: tabular-nums; @font-feature-settings-base: 'tnum'; @font-size-base: 14px; @font-size-lg: @font-size-base + 2px; @font-size-sm: 12px; @heading-1-size: ceil(@font-size-base * 2.71); @heading-2-size: ceil(@font-size-base * 2.14); @heading-3-size: ceil(@font-size-base * 1.71); @heading-4-size: ceil(@font-size-base * 1.42); @line-height-base: 1.5; @border-radius-base: 4px; @border-radius-sm: 2px; // vertical paddings @padding-lg: 24px; // containers @padding-md: 16px; // small containers and buttons @padding-sm: 12px; // Form controls and items @padding-xs: 8px; // small items // vertical padding for all form controls @control-padding-horizontal: @padding-sm; @control-padding-horizontal-sm: @padding-xs; // The background colors for active and hover states for things like // list items or table cells. @item-active-bg: @primary-1; @item-hover-bg: @primary-1; // ICONFONT @iconfont-css-prefix: anticon; // LINK @link-color: @primary-color; @link-hover-color: color(~`colorPalette('@{link-color}', 5) `); @link-active-color: color(~`colorPalette('@{link-color}', 7) `); @link-decoration: none; @link-hover-decoration: none; // Animation @ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1); @ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7); @ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); @ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); @ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); @ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46); @ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6); @ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46); @ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1); @ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34); @ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86); @ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); @ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); @ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); // Border color @border-color-base: hsv(0, 0, 85%); // base border outline a component @border-color-split: hsv(0, 0, 91%); // split border inside a component @border-color-inverse: @white; @border-width-base: 1px; // width of the border for a component @border-style-base: solid; // style of a components border // Outline @outline-blur-size: 0; @outline-width: 2px; @outline-color: @primary-color; @background-color-light: hsv(0, 0, 98%); // background of header and selected item @background-color-base: hsv(0, 0, 96%); // Default grey background color // Disabled states @disabled-color: fade(#000, 25%); @disabled-bg: @background-color-base; @disabled-color-dark: fade(#fff, 35%); // Shadow @shadow-color: rgba(0, 0, 0, 0.15); @shadow-color-inverse: @component-background; @box-shadow-base: @shadow-1-down; @shadow-1-up: 0 -2px 8px @shadow-color; @shadow-1-down: 0 2px 8px @shadow-color; @shadow-1-left: -2px 0 8px @shadow-color; @shadow-1-right: 2px 0 8px @shadow-color; @shadow-2: 0 4px 12px @shadow-color; // Buttons @btn-font-weight: 400; @btn-border-radius-base: @border-radius-base; @btn-border-radius-sm: @border-radius-base; @btn-border-width: @border-width-base; @btn-border-style: @border-style-base; @btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); @btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); @btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12); @btn-primary-color: #fff; @btn-primary-bg: @primary-color; @btn-default-color: @text-color; @btn-default-bg: @component-background; @btn-default-border: @border-color-base; @btn-danger-color: #fff; @btn-danger-bg: color(~`colorPalette('@{error-color}', 5) `); @btn-danger-border: color(~`colorPalette('@{error-color}', 5) `); @btn-disable-color: @disabled-color; @btn-disable-bg: @disabled-bg; @btn-disable-border: @border-color-base; @btn-padding-base: 0 @padding-md - 1px; @btn-font-size-lg: @font-size-lg; @btn-font-size-sm: @font-size-base; @btn-padding-lg: @btn-padding-base; @btn-padding-sm: 0 @padding-xs - 1px; @btn-height-base: 32px; @btn-height-lg: 40px; @btn-height-sm: 24px; @btn-circle-size: @btn-height-base; @btn-circle-size-lg: @btn-height-lg; @btn-circle-size-sm: @btn-height-sm; @btn-square-size: @btn-height-base; @btn-square-size-lg: @btn-height-lg; @btn-square-size-sm: @btn-height-sm; @btn-group-border: @primary-5; // Checkbox @checkbox-size: 16px; @checkbox-color: @primary-color; @checkbox-check-color: #fff; @checkbox-border-width: @border-width-base; // Descriptions @descriptions-bg: #fafafa; // Dropdown @dropdown-selected-color: @primary-color; // Empty @empty-font-size: @font-size-base; // Radio @radio-size: 16px; @radio-dot-color: @primary-color; // Radio buttons @radio-button-bg: @btn-default-bg; @radio-button-checked-bg: @btn-default-bg; @radio-button-color: @btn-default-color; @radio-button-hover-color: @primary-5; @radio-button-active-color: @primary-7; // Media queries breakpoints // Extra small screen / phone @screen-xs: 480px; @screen-xs-min: @screen-xs; // Small screen / tablet @screen-sm: 576px; @screen-sm-min: @screen-sm; // Medium screen / desktop @screen-md: 768px; @screen-md-min: @screen-md; // Large screen / wide desktop @screen-lg: 992px; @screen-lg-min: @screen-lg; // Extra large screen / full hd @screen-xl: 1200px; @screen-xl-min: @screen-xl; // Extra extra large screen / large desktop @screen-xxl: 1600px; @screen-xxl-min: @screen-xxl; // provide a maximum @screen-xs-max: (@screen-sm-min - 1px); @screen-sm-max: (@screen-md-min - 1px); @screen-md-max: (@screen-lg-min - 1px); @screen-lg-max: (@screen-xl-min - 1px); @screen-xl-max: (@screen-xxl-min - 1px); // Grid system @grid-columns: 24; @grid-gutter-width: 0; // Layout @layout-body-background: #f0f2f5; @layout-header-background: #001529; @layout-footer-background: @layout-body-background; @layout-header-height: 64px; @layout-header-padding: 0 50px; @layout-footer-padding: 24px 50px; @layout-sider-background: @layout-header-background; @layout-trigger-height: 48px; @layout-trigger-background: #002140; @layout-trigger-color: #fff; @layout-zero-trigger-width: 36px; @layout-zero-trigger-height: 42px; // Layout light theme @layout-sider-background-light: #fff; @layout-trigger-background-light: #fff; @layout-trigger-color-light: @text-color; // z-index list, order by `z-index` @zindex-table-fixed: auto; @zindex-affix: 10; @zindex-back-top: 10; @zindex-badge: 10; @zindex-picker-panel: 10; @zindex-popup-close: 10; @zindex-modal: 1000; @zindex-modal-mask: 1000; @zindex-message: 1010; @zindex-notification: 1010; @zindex-popover: 1030; @zindex-dropdown: 1050; @zindex-picker: 1050; @zindex-tooltip: 1060; // Animation @animation-duration-slow: 0.3s; // Modal @animation-duration-base: 0.2s; @animation-duration-fast: 0.1s; // Tooltip //CollapsePanel @collapse-panel-border-radius: @border-radius-base; //Dropdown @dropdown-vertical-padding: 5px; @dropdown-font-size: @font-size-base; @dropdown-line-height: 22px; // Form // --- @label-required-color: @highlight-color; @label-color: @heading-color; @form-warning-input-bg: @input-bg; @form-item-margin-bottom: 24px; @form-item-trailing-colon: true; @form-vertical-label-padding: 0 0 8px; @form-vertical-label-margin: 0; @form-error-input-bg: @input-bg; // Input // --- @input-height-base: 32px; @input-height-lg: 40px; @input-height-sm: 24px; @input-padding-horizontal: @control-padding-horizontal - 1px; @input-padding-horizontal-base: @input-padding-horizontal; @input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px; @input-padding-horizontal-lg: @input-padding-horizontal; @input-padding-vertical-base: 4px; @input-padding-vertical-sm: 1px; @input-padding-vertical-lg: 6px; @input-placeholder-color: hsv(0, 0, 75%); @input-color: @text-color; @input-border-color: @border-color-base; @input-bg: @component-background; @input-number-handler-active-bg: #f4f4f4; @input-number-handler-hover-bg: @primary-5; @input-number-handler-bg: @component-background; @input-number-handler-border-color: @border-color-base; @input-addon-bg: @background-color-light; @input-hover-border-color: @primary-5; @input-disabled-bg: @disabled-bg; @input-outline-offset: 0 0; // Select // --- @select-border-color: @border-color-base; @select-item-selected-font-weight: 600; @select-dropdown-bg: @component-background; @select-item-selected-bg: @background-color-light; @select-item-active-bg: @item-active-bg; // Anchor // --- @anchor-border-color: @border-color-split; // Tooltip // --- // Tooltip max width @tooltip-max-width: 250px; // Tooltip text color @tooltip-color: #fff; // Tooltip background color @tooltip-bg: rgba(0, 0, 0, 0.75); // Tooltip arrow width @tooltip-arrow-width: 5px; // Tooltip distance with trigger @tooltip-distance: @tooltip-arrow-width - 1px + 4px; // Tooltip arrow color @tooltip-arrow-color: @tooltip-bg; // Popover // --- // Popover body background color @popover-bg: @component-background; // Popover text color @popover-color: @text-color; // Popover maximum width @popover-min-width: 177px; // Popover arrow width @popover-arrow-width: 6px; // Popover arrow color @popover-arrow-color: @popover-bg; // Popover outer arrow width // Popover outer arrow color @popover-arrow-outer-color: @popover-bg; // Popover distance with trigger @popover-distance: @popover-arrow-width + 4px; // Modal // -- @modal-body-padding: 24px; @modal-header-bg: @component-background; @modal-footer-bg: transparent; @modal-footer-border-color-split: @border-color-split; @modal-mask-bg: fade(@black, 45%); // Progress // -- @progress-default-color: @processing-color; @progress-remaining-color: @background-color-base; @progress-text-color: @text-color; @progress-radius: 100px; // Menu // --- @menu-inline-toplevel-item-height: 40px; @menu-item-height: 40px; @menu-collapsed-width: 80px; @menu-bg: @component-background; @menu-popup-bg: @component-background; @menu-item-color: @text-color; @menu-highlight-color: @primary-color; @menu-item-active-bg: @item-active-bg; @menu-item-active-border-width: 3px; @menu-item-group-title-color: @text-color-secondary; @menu-icon-size: @font-size-base; @menu-icon-size-lg: @font-size-lg; @menu-item-vertical-margin: 4px; @menu-item-font-size: @font-size-base; @menu-item-boundary-margin: 8px; @menu-icon-size: @font-size-base; @menu-icon-size-lg: @font-size-lg; @menu-dark-selected-item-icon-color: @white; @menu-dark-selected-item-text-color: @white; @dark-menu-item-hover-bg: transparent; // dark theme @menu-dark-color: @text-color-secondary-dark; @menu-dark-bg: @layout-header-background; @menu-dark-arrow-color: #fff; @menu-dark-submenu-bg: #000c17; @menu-dark-highlight-color: #fff; @menu-dark-item-active-bg: @primary-color; @menu-dark-selected-item-icon-color: @white; @menu-dark-selected-item-text-color: @white; @menu-dark-item-hover-bg: transparent; // Spin // --- @spin-dot-size-sm: 14px; @spin-dot-size: 20px; @spin-dot-size-lg: 32px; // Table // -- @table-header-bg: @background-color-light; @table-header-color: @heading-color; @table-header-sort-bg: @background-color-base; @table-body-sort-bg: rgba(0, 0, 0, 0.01); @table-row-hover-bg: @primary-1; @table-selected-row-color: inherit; @table-selected-row-bg: #fafafa; @table-body-selected-sort-bg: @table-selected-row-bg; @table-selected-row-hover-bg: @table-selected-row-bg; @table-expanded-row-bg: #fbfbfb; @table-padding-vertical: 16px; @table-padding-horizontal: 16px; @table-border-radius-base: @border-radius-base; @table-footer-bg: @background-color-light; @table-footer-color: @heading-color; // Tag // -- @tag-default-bg: @background-color-light; @tag-default-color: @text-color; @tag-font-size: @font-size-sm; // TimePicker // --- @time-picker-panel-column-width: 56px; @time-picker-panel-width: @time-picker-panel-column-width * 3; @time-picker-selected-bg: @background-color-base; // Carousel // --- @carousel-dot-width: 16px; @carousel-dot-height: 3px; @carousel-dot-active-width: 24px; // Badge // --- @badge-height: 20px; @badge-dot-size: 6px; @badge-font-size: @font-size-sm; @badge-font-weight: normal; @badge-status-size: 6px; @badge-text-color: @component-background; // Rate // --- @rate-star-color: @yellow-6; @rate-star-bg: @border-color-split; // Card // --- @card-head-color: @heading-color; @card-head-background: transparent; @card-head-padding: 16px; @card-inner-head-padding: 12px; @card-padding-base: 24px; @card-actions-background: @background-color-light; @card-skeleton-bg: #cfd8dc; @card-background: @component-background; @card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); @card-radius: @border-radius-sm; // Comment // --- @comment-padding-base: 16px 0; @comment-nest-indent: 44px; @comment-font-size-base: @font-size-base; @comment-font-size-sm: @font-size-sm; @comment-author-name-color: @text-color-secondary; @comment-author-time-color: #ccc; @comment-action-color: @text-color-secondary; @comment-action-hover-color: #595959; // Tabs // --- @tabs-card-head-background: @background-color-light; @tabs-card-height: 40px; @tabs-card-active-color: @primary-color; @tabs-title-font-size: @font-size-base; @tabs-title-font-size-lg: @font-size-lg; @tabs-title-font-size-sm: @font-size-base; @tabs-ink-bar-color: @primary-color; @tabs-bar-margin: 0 0 16px 0; @tabs-horizontal-margin: 0 32px 0 0; @tabs-horizontal-padding: 12px 16px; @tabs-horizontal-padding-lg: 16px; @tabs-horizontal-padding-sm: 8px 16px; @tabs-vertical-padding: 8px 24px; @tabs-vertical-margin: 0 0 16px 0; @tabs-scrolling-size: 32px; @tabs-highlight-color: @primary-color; @tabs-hover-color: @primary-5; @tabs-active-color: @primary-7; @tabs-card-gutter: 2px; @tabs-card-tab-active-border-top: 2px solid transparent; // BackTop // --- @back-top-color: #fff; @back-top-bg: @text-color-secondary; @back-top-hover-bg: @text-color; // Avatar // --- @avatar-size-base: 32px; @avatar-size-lg: 40px; @avatar-size-sm: 24px; @avatar-font-size-base: 18px; @avatar-font-size-lg: 24px; @avatar-font-size-sm: 14px; @avatar-bg: #ccc; @avatar-color: #fff; @avatar-border-radius: @border-radius-base; // Switch // --- @switch-height: 22px; @switch-sm-height: 16px; @switch-sm-checked-margin-left: -(@switch-sm-height - 3px); @switch-disabled-opacity: 0.4; @switch-color: @primary-color; @switch-shadow-color: fade(#00230b, 20%); // Pagination // --- @pagination-item-size: 32px; @pagination-item-size-sm: 24px; @pagination-font-family: Arial; @pagination-font-weight-active: 500; @pagination-item-bg-active: @component-background; // PageHeader // --- @page-header-padding: 24px; @page-header-padding-vertical: 16px; @page-header-padding-breadcrumb: 12px; @page-header-back-color: #000; // Breadcrumb // --- @breadcrumb-base-color: @text-color-secondary; @breadcrumb-last-item-color: @text-color; @breadcrumb-font-size: @font-size-base; @breadcrumb-icon-font-size: @font-size-base; @breadcrumb-link-color: @text-color-secondary; @breadcrumb-link-color-hover: @primary-5; @breadcrumb-separator-color: @text-color-secondary; @breadcrumb-separator-margin: 0 @padding-xs; // Slider // --- @slider-margin: 14px 6px 10px; @slider-rail-background-color: @background-color-base; @slider-rail-background-color-hover: #e1e1e1; @slider-track-background-color: @primary-3; @slider-track-background-color-hover: @primary-4; @slider-handle-border-width: 2px; @slider-handle-background-color: @component-background; @slider-handle-color: @primary-3; @slider-handle-color-hover: @primary-4; @slider-handle-color-focus: tint(@primary-color, 20%); @slider-handle-color-focus-shadow: fade(@primary-color, 20%); @slider-handle-color-tooltip-open: @primary-color; @slider-handle-shadow: 0; @slider-dot-border-color: @border-color-split; @slider-dot-border-color-active: tint(@primary-color, 50%); @slider-disabled-color: @disabled-color; @slider-disabled-background-color: @component-background; // Tree // --- @tree-title-height: 24px; @tree-child-padding: 18px; @tree-directory-selected-color: #fff; @tree-directory-selected-bg: @primary-color; @tree-node-hover-bg: @item-hover-bg; @tree-node-selected-bg: @primary-2; // Collapse // --- @collapse-header-padding: 12px 16px; @collapse-header-padding-extra: 40px; @collapse-header-bg: @background-color-light; @collapse-content-padding: @padding-md; @collapse-content-bg: @component-background; // Skeleton // --- @skeleton-color: #f2f2f2; // Transfer // --- @transfer-header-height: 40px; @transfer-disabled-bg: @disabled-bg; @transfer-list-height: 200px; // Message // --- @message-notice-content-padding: 10px 16px; // Motion // --- @wave-animation-width: 6px; // Alert // --- @alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; @alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; @alert-success-icon-color: @success-color; @alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; @alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; @alert-info-icon-color: @info-color; @alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; @alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; @alert-warning-icon-color: @warning-color; @alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; @alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; @alert-error-icon-color: @error-color; // List // --- @list-header-background: transparent; @list-footer-background: transparent; @list-empty-text-padding: @padding-md; @list-item-padding: @padding-sm 0; @list-item-meta-margin-bottom: @padding-md; @list-item-meta-avatar-margin-right: @padding-md; @list-item-meta-title-margin-bottom: @padding-sm; // Statistic // --- @statistic-title-font-size: @font-size-base; @statistic-content-font-size: 24px; @statistic-unit-font-size: 16px; @statistic-font-family: @font-family; // Drawer // --- @drawer-header-padding: 16px 24px; @drawer-body-padding: 24px; // Timeline // --- @timeline-width: 2px; @timeline-color: @border-color-split; @timeline-dot-border-width: 2px; @timeline-dot-color: @primary-color; @timeline-dot-bg: @component-background; // Typography // --- @typography-title-font-weight: 600; // 基础颜色 @white: #ffffff; @primary-color-light: fade(lighten(@primary-color, 5%), 15%); // 顶部背景色 @layout-header-background:@primary-color; // 左边菜单light颜色 @layout-sider-background-light: #f9f9f9; // 字体颜色 @text-color: #000000; @table-selected-row-bg: #fbfbfb; @primary-2: @primary-color-light; // 基础圆角 @border-radius-base: 2px; // 输入框后缀背景色 @input-addon-bg: @primary-color; .ant-menu-root.ant-menu-inline, .ant-menu-root.ant-menu-vertical { background: @primary-color; border-right: 1px solid @primary-color; color: #ffffff; } .ant-menu-root.ant-menu-inline a, .ant-menu-root.ant-menu-vertical a { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-selected, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-selected { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-root.ant-menu-vertical .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-root.ant-menu-inline .ant-menu-submenu-active, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-active { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-inline .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title .ant-menu-submenu-arrow::after { background: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after { background: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu > .ant-menu, .ant-menu-root.ant-menu-vertical .ant-menu-submenu > .ant-menu { background-color: rgba(58, 64, 99, 0.15); } .ant-menu-root.ant-menu-inline .ant-menu-item > a:hover, .ant-menu-root.ant-menu-vertical .ant-menu-item > a:hover { color: #ffffff; } .ant-menu-horizontal > .ant-menu-item-selected { color: #ffffff; } .sider-custom .ant-menu-submenu-title { color: #ffffff; } .bg--primary { background: @primary-color; } .header .ant-menu { background: transparent; color: #ffffff; } .header .ant-menu .ant-menu-item:hover { color: #ffffff; } .header__trigger { color: #ffffff; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { color: #000000; background-color: #fff; } h1, h2, h3, h4, h5, h6 { color: rgba(0, 0, 0, 0.85); } abbr[title], abbr[data-original-title] { border-bottom: 0; } a { color: @primary-color; background-color: transparent; } a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } a:active { color: color(~`colorPalette("@{primary-color}", 7)`); } a[disabled] { color: rgba(0, 0, 0, 0.25); } img { border-style: none; } table { border-collapse: collapse; } caption { color: rgba(0, 0, 0, 0.45); } input, button, select, optgroup, textarea { color: inherit; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; } fieldset { border: 0; } legend { color: inherit; } mark { background-color: #feffe6; } ::selection { color: #ffffff; background: @primary-color; } .anticon { color: inherit; } html { --antd-wave-shadow-color: @primary-color; } [ant-click-animating-without-extra-node='true']::after, .ant-click-animating-node { border-radius: inherit; box-shadow: 0 0 0 0 @primary-color; box-shadow: 0 0 0 0 var(--antd-wave-shadow-color); } .ant-alert { color: #000000; border-radius: 2px; } .ant-alert-success { background-color: #f6ffed; border: 1px solid #b7eb8f; } .ant-alert-success .ant-alert-icon { color: #52c41a; } .ant-alert-info { background-color: #e6f7ff; border: 1px solid #91d5ff; } .ant-alert-info .ant-alert-icon { color: #1890ff; } .ant-alert-warning { background-color: #fffbe6; border: 1px solid #ffe58f; } .ant-alert-warning .ant-alert-icon { color: #faad14; } .ant-alert-error { background-color: #fff1f0; border: 1px solid #ffa39e; } .ant-alert-error .ant-alert-icon { color: #f5222d; } .ant-alert-close-icon { background-color: transparent; border: none; } .ant-alert-close-icon .anticon-close { color: rgba(0, 0, 0, 0.45); } .ant-alert-close-icon .anticon-close:hover { color: rgba(0, 0, 0, 0.75); } .ant-alert-close-text { color: rgba(0, 0, 0, 0.45); } .ant-alert-close-text:hover { color: rgba(0, 0, 0, 0.75); } .ant-alert-with-description { color: #000000; border-radius: 2px; } .ant-alert-with-description .ant-alert-message { color: rgba(0, 0, 0, 0.85); } .ant-alert-message { color: rgba(0, 0, 0, 0.85); } .ant-alert-banner { border: 0; border-radius: 0; } .ant-anchor { color: #000000; } .ant-anchor-wrapper { background-color: #fff; } .ant-anchor-ink::before { background-color: #e8e8e8; } .ant-anchor-ink-ball { background-color: #fff; border: 2px solid @primary-color; border-radius: 8px; } .ant-anchor-link-title { color: #000000; } .ant-anchor-link-active > .ant-anchor-link-title { color: @primary-color; } .ant-select-auto-complete { color: #000000; } .ant-select-auto-complete.ant-select .ant-select-selection { border: 0; box-shadow: none; } .ant-select-auto-complete.ant-select .ant-input { background: transparent; border-width: 1px; } .ant-select-auto-complete.ant-select .ant-input:focus, .ant-select-auto-complete.ant-select .ant-input:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-select-auto-complete.ant-select .ant-input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; background-color: transparent; } .ant-select-auto-complete.ant-select .ant-input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-avatar { color: #000000; color: #fff; background: #ccc; border-radius: 50%; } .ant-avatar-image { background: transparent; } .ant-avatar-lg { border-radius: 50%; } .ant-avatar-sm { border-radius: 50%; } .ant-avatar-square { border-radius: 2px; } .ant-back-top { color: #000000; } .ant-back-top-content { color: #fff; background-color: rgba(0, 0, 0, 0.45); border-radius: 20px; } .ant-back-top-content:hover { background-color: #000000; } .ant-back-top-icon { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) 100%/100% no-repeat; } .ant-badge { color: #000000; color: unset; } .ant-badge-count { color: #fff; background: #f5222d; border-radius: 10px; box-shadow: 0 0 0 1px #fff; } .ant-badge-count a, .ant-badge-count a:hover { color: #fff; } .ant-badge-dot { background: #f5222d; border-radius: 100%; box-shadow: 0 0 0 1px #fff; } .ant-badge-status-dot { border-radius: 50%; } .ant-badge-status-success { background-color: #52c41a; } .ant-badge-status-processing { background-color: #1890ff; } .ant-badge-status-processing::after { border: 1px solid #1890ff; border-radius: 50%; } .ant-badge-status-default { background-color: #d9d9d9; } .ant-badge-status-error { background-color: #f5222d; } .ant-badge-status-warning { background-color: #faad14; } .ant-badge-status-pink { background: #eb2f96; } .ant-badge-status-magenta { background: #eb2f96; } .ant-badge-status-red { background: #f5222d; } .ant-badge-status-volcano { background: #fa541c; } .ant-badge-status-orange { background: #fa8c16; } .ant-badge-status-yellow { background: #fadb14; } .ant-badge-status-gold { background: #faad14; } .ant-badge-status-cyan { background: #13c2c2; } .ant-badge-status-lime { background: #a0d911; } .ant-badge-status-green { background: #52c41a; } .ant-badge-status-blue { background: #1890ff; } .ant-badge-status-geekblue { background: #2f54eb; } .ant-badge-status-purple { background: #722ed1; } .ant-badge-status-text { color: #000000; } .ant-breadcrumb { color: #000000; color: rgba(0, 0, 0, 0.45); } .ant-breadcrumb a { color: rgba(0, 0, 0, 0.45); } .ant-breadcrumb a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-breadcrumb > span:last-child { color: #000000; } .ant-breadcrumb > span:last-child a { color: #000000; } .ant-breadcrumb-separator { color: rgba(0, 0, 0, 0.45); } .ant-btn { background-image: none; border: 1px solid transparent; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); border-radius: 2px; color: #000000; background-color: #fff; border-color: #d9d9d9; } .ant-btn:not([disabled]):active { box-shadow: none; } .ant-btn-lg { border-radius: 2px; } .ant-btn-sm { border-radius: 2px; } .ant-btn > a:only-child { color: currentColor; } .ant-btn > a:only-child::after { background: transparent; } .ant-btn:hover, .ant-btn:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: #fff; border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn:hover > a:only-child, .ant-btn:focus > a:only-child { color: currentColor; } .ant-btn:hover > a:only-child::after, .ant-btn:focus > a:only-child::after { background: transparent; } .ant-btn:active, .ant-btn.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: #fff; border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn:active > a:only-child, .ant-btn.active > a:only-child { color: currentColor; } .ant-btn:active > a:only-child::after, .ant-btn.active > a:only-child::after { background: transparent; } .ant-btn-disabled, .ant-btn.disabled, .ant-btn[disabled], .ant-btn-disabled:hover, .ant-btn.disabled:hover, .ant-btn[disabled]:hover, .ant-btn-disabled:focus, .ant-btn.disabled:focus, .ant-btn[disabled]:focus, .ant-btn-disabled:active, .ant-btn.disabled:active, .ant-btn[disabled]:active, .ant-btn-disabled.active, .ant-btn.disabled.active, .ant-btn[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-disabled > a:only-child, .ant-btn.disabled > a:only-child, .ant-btn[disabled] > a:only-child, .ant-btn-disabled:hover > a:only-child, .ant-btn.disabled:hover > a:only-child, .ant-btn[disabled]:hover > a:only-child, .ant-btn-disabled:focus > a:only-child, .ant-btn.disabled:focus > a:only-child, .ant-btn[disabled]:focus > a:only-child, .ant-btn-disabled:active > a:only-child, .ant-btn.disabled:active > a:only-child, .ant-btn[disabled]:active > a:only-child, .ant-btn-disabled.active > a:only-child, .ant-btn.disabled.active > a:only-child, .ant-btn[disabled].active > a:only-child { color: currentColor; } .ant-btn-disabled > a:only-child::after, .ant-btn.disabled > a:only-child::after, .ant-btn[disabled] > a:only-child::after, .ant-btn-disabled:hover > a:only-child::after, .ant-btn.disabled:hover > a:only-child::after, .ant-btn[disabled]:hover > a:only-child::after, .ant-btn-disabled:focus > a:only-child::after, .ant-btn.disabled:focus > a:only-child::after, .ant-btn[disabled]:focus > a:only-child::after, .ant-btn-disabled:active > a:only-child::after, .ant-btn.disabled:active > a:only-child::after, .ant-btn[disabled]:active > a:only-child::after, .ant-btn-disabled.active > a:only-child::after, .ant-btn.disabled.active > a:only-child::after, .ant-btn[disabled].active > a:only-child::after { background: transparent; } .ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active { background: #fff; } .ant-btn-primary { color: #fff; background-color: @primary-color; border-color: @primary-color; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); } .ant-btn-primary > a:only-child { color: currentColor; } .ant-btn-primary > a:only-child::after { background: transparent; } .ant-btn-primary:hover, .ant-btn-primary:focus { color: #fff; background-color: color(~`colorPalette("@{primary-color}", 5)`); border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-primary:hover > a:only-child, .ant-btn-primary:focus > a:only-child { color: currentColor; } .ant-btn-primary:hover > a:only-child::after, .ant-btn-primary:focus > a:only-child::after { background: transparent; } .ant-btn-primary:active, .ant-btn-primary.active { color: #fff; background-color: color(~`colorPalette("@{primary-color}", 7)`); border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn-primary:active > a:only-child, .ant-btn-primary.active > a:only-child { color: currentColor; } .ant-btn-primary:active > a:only-child::after, .ant-btn-primary.active > a:only-child::after { background: transparent; } .ant-btn-primary-disabled, .ant-btn-primary.disabled, .ant-btn-primary[disabled], .ant-btn-primary-disabled:hover, .ant-btn-primary.disabled:hover, .ant-btn-primary[disabled]:hover, .ant-btn-primary-disabled:focus, .ant-btn-primary.disabled:focus, .ant-btn-primary[disabled]:focus, .ant-btn-primary-disabled:active, .ant-btn-primary.disabled:active, .ant-btn-primary[disabled]:active, .ant-btn-primary-disabled.active, .ant-btn-primary.disabled.active, .ant-btn-primary[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-primary-disabled > a:only-child, .ant-btn-primary.disabled > a:only-child, .ant-btn-primary[disabled] > a:only-child, .ant-btn-primary-disabled:hover > a:only-child, .ant-btn-primary.disabled:hover > a:only-child, .ant-btn-primary[disabled]:hover > a:only-child, .ant-btn-primary-disabled:focus > a:only-child, .ant-btn-primary.disabled:focus > a:only-child, .ant-btn-primary[disabled]:focus > a:only-child, .ant-btn-primary-disabled:active > a:only-child, .ant-btn-primary.disabled:active > a:only-child, .ant-btn-primary[disabled]:active > a:only-child, .ant-btn-primary-disabled.active > a:only-child, .ant-btn-primary.disabled.active > a:only-child, .ant-btn-primary[disabled].active > a:only-child { color: currentColor; } .ant-btn-primary-disabled > a:only-child::after, .ant-btn-primary.disabled > a:only-child::after, .ant-btn-primary[disabled] > a:only-child::after, .ant-btn-primary-disabled:hover > a:only-child::after, .ant-btn-primary.disabled:hover > a:only-child::after, .ant-btn-primary[disabled]:hover > a:only-child::after, .ant-btn-primary-disabled:focus > a:only-child::after, .ant-btn-primary.disabled:focus > a:only-child::after, .ant-btn-primary[disabled]:focus > a:only-child::after, .ant-btn-primary-disabled:active > a:only-child::after, .ant-btn-primary.disabled:active > a:only-child::after, .ant-btn-primary[disabled]:active > a:only-child::after, .ant-btn-primary-disabled.active > a:only-child::after, .ant-btn-primary.disabled.active > a:only-child::after, .ant-btn-primary[disabled].active > a:only-child::after { background: transparent; } .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) { border-right-color: color(~`colorPalette("@{primary-color}", 5)`); border-left-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child):disabled { border-color: #d9d9d9; } .ant-btn-group .ant-btn-primary:first-child:not(:last-child) { border-right-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-group .ant-btn-primary:first-child:not(:last-child)[disabled] { border-right-color: #d9d9d9; } .ant-btn-group .ant-btn-primary:last-child:not(:first-child), .ant-btn-group .ant-btn-primary + .ant-btn-primary { border-left-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-group .ant-btn-primary:last-child:not(:first-child)[disabled], .ant-btn-group .ant-btn-primary + .ant-btn-primary[disabled] { border-left-color: #d9d9d9; } .ant-btn-ghost { color: #000000; background-color: transparent; border-color: #d9d9d9; } .ant-btn-ghost > a:only-child { color: currentColor; } .ant-btn-ghost > a:only-child::after { background: transparent; } .ant-btn-ghost:hover, .ant-btn-ghost:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-ghost:hover > a:only-child, .ant-btn-ghost:focus > a:only-child { color: currentColor; } .ant-btn-ghost:hover > a:only-child::after, .ant-btn-ghost:focus > a:only-child::after { background: transparent; } .ant-btn-ghost:active, .ant-btn-ghost.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn-ghost:active > a:only-child, .ant-btn-ghost.active > a:only-child { color: currentColor; } .ant-btn-ghost:active > a:only-child::after, .ant-btn-ghost.active > a:only-child::after { background: transparent; } .ant-btn-ghost-disabled, .ant-btn-ghost.disabled, .ant-btn-ghost[disabled], .ant-btn-ghost-disabled:hover, .ant-btn-ghost.disabled:hover, .ant-btn-ghost[disabled]:hover, .ant-btn-ghost-disabled:focus, .ant-btn-ghost.disabled:focus, .ant-btn-ghost[disabled]:focus, .ant-btn-ghost-disabled:active, .ant-btn-ghost.disabled:active, .ant-btn-ghost[disabled]:active, .ant-btn-ghost-disabled.active, .ant-btn-ghost.disabled.active, .ant-btn-ghost[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-ghost-disabled > a:only-child, .ant-btn-ghost.disabled > a:only-child, .ant-btn-ghost[disabled] > a:only-child, .ant-btn-ghost-disabled:hover > a:only-child, .ant-btn-ghost.disabled:hover > a:only-child, .ant-btn-ghost[disabled]:hover > a:only-child, .ant-btn-ghost-disabled:focus > a:only-child, .ant-btn-ghost.disabled:focus > a:only-child, .ant-btn-ghost[disabled]:focus > a:only-child, .ant-btn-ghost-disabled:active > a:only-child, .ant-btn-ghost.disabled:active > a:only-child, .ant-btn-ghost[disabled]:active > a:only-child, .ant-btn-ghost-disabled.active > a:only-child, .ant-btn-ghost.disabled.active > a:only-child, .ant-btn-ghost[disabled].active > a:only-child { color: currentColor; } .ant-btn-ghost-disabled > a:only-child::after, .ant-btn-ghost.disabled > a:only-child::after, .ant-btn-ghost[disabled] > a:only-child::after, .ant-btn-ghost-disabled:hover > a:only-child::after, .ant-btn-ghost.disabled:hover > a:only-child::after, .ant-btn-ghost[disabled]:hover > a:only-child::after, .ant-btn-ghost-disabled:focus > a:only-child::after, .ant-btn-ghost.disabled:focus > a:only-child::after, .ant-btn-ghost[disabled]:focus > a:only-child::after, .ant-btn-ghost-disabled:active > a:only-child::after, .ant-btn-ghost.disabled:active > a:only-child::after, .ant-btn-ghost[disabled]:active > a:only-child::after, .ant-btn-ghost-disabled.active > a:only-child::after, .ant-btn-ghost.disabled.active > a:only-child::after, .ant-btn-ghost[disabled].active > a:only-child::after { background: transparent; } .ant-btn-dashed { color: #000000; background-color: #fff; border-color: #d9d9d9; border-style: dashed; } .ant-btn-dashed > a:only-child { color: currentColor; } .ant-btn-dashed > a:only-child::after { background: transparent; } .ant-btn-dashed:hover, .ant-btn-dashed:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: #fff; border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-dashed:hover > a:only-child, .ant-btn-dashed:focus > a:only-child { color: currentColor; } .ant-btn-dashed:hover > a:only-child::after, .ant-btn-dashed:focus > a:only-child::after { background: transparent; } .ant-btn-dashed:active, .ant-btn-dashed.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: #fff; border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn-dashed:active > a:only-child, .ant-btn-dashed.active > a:only-child { color: currentColor; } .ant-btn-dashed:active > a:only-child::after, .ant-btn-dashed.active > a:only-child::after { background: transparent; } .ant-btn-dashed-disabled, .ant-btn-dashed.disabled, .ant-btn-dashed[disabled], .ant-btn-dashed-disabled:hover, .ant-btn-dashed.disabled:hover, .ant-btn-dashed[disabled]:hover, .ant-btn-dashed-disabled:focus, .ant-btn-dashed.disabled:focus, .ant-btn-dashed[disabled]:focus, .ant-btn-dashed-disabled:active, .ant-btn-dashed.disabled:active, .ant-btn-dashed[disabled]:active, .ant-btn-dashed-disabled.active, .ant-btn-dashed.disabled.active, .ant-btn-dashed[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-dashed-disabled > a:only-child, .ant-btn-dashed.disabled > a:only-child, .ant-btn-dashed[disabled] > a:only-child, .ant-btn-dashed-disabled:hover > a:only-child, .ant-btn-dashed.disabled:hover > a:only-child, .ant-btn-dashed[disabled]:hover > a:only-child, .ant-btn-dashed-disabled:focus > a:only-child, .ant-btn-dashed.disabled:focus > a:only-child, .ant-btn-dashed[disabled]:focus > a:only-child, .ant-btn-dashed-disabled:active > a:only-child, .ant-btn-dashed.disabled:active > a:only-child, .ant-btn-dashed[disabled]:active > a:only-child, .ant-btn-dashed-disabled.active > a:only-child, .ant-btn-dashed.disabled.active > a:only-child, .ant-btn-dashed[disabled].active > a:only-child { color: currentColor; } .ant-btn-dashed-disabled > a:only-child::after, .ant-btn-dashed.disabled > a:only-child::after, .ant-btn-dashed[disabled] > a:only-child::after, .ant-btn-dashed-disabled:hover > a:only-child::after, .ant-btn-dashed.disabled:hover > a:only-child::after, .ant-btn-dashed[disabled]:hover > a:only-child::after, .ant-btn-dashed-disabled:focus > a:only-child::after, .ant-btn-dashed.disabled:focus > a:only-child::after, .ant-btn-dashed[disabled]:focus > a:only-child::after, .ant-btn-dashed-disabled:active > a:only-child::after, .ant-btn-dashed.disabled:active > a:only-child::after, .ant-btn-dashed[disabled]:active > a:only-child::after, .ant-btn-dashed-disabled.active > a:only-child::after, .ant-btn-dashed.disabled.active > a:only-child::after, .ant-btn-dashed[disabled].active > a:only-child::after { background: transparent; } .ant-btn-danger { color: #fff; background-color: #ff4d4f; border-color: #ff4d4f; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); } .ant-btn-danger > a:only-child { color: currentColor; } .ant-btn-danger > a:only-child::after { background: transparent; } .ant-btn-danger:hover, .ant-btn-danger:focus { color: #fff; background-color: #ff7875; border-color: #ff7875; } .ant-btn-danger:hover > a:only-child, .ant-btn-danger:focus > a:only-child { color: currentColor; } .ant-btn-danger:hover > a:only-child::after, .ant-btn-danger:focus > a:only-child::after { background: transparent; } .ant-btn-danger:active, .ant-btn-danger.active { color: #fff; background-color: #d9363e; border-color: #d9363e; } .ant-btn-danger:active > a:only-child, .ant-btn-danger.active > a:only-child { color: currentColor; } .ant-btn-danger:active > a:only-child::after, .ant-btn-danger.active > a:only-child::after { background: transparent; } .ant-btn-danger-disabled, .ant-btn-danger.disabled, .ant-btn-danger[disabled], .ant-btn-danger-disabled:hover, .ant-btn-danger.disabled:hover, .ant-btn-danger[disabled]:hover, .ant-btn-danger-disabled:focus, .ant-btn-danger.disabled:focus, .ant-btn-danger[disabled]:focus, .ant-btn-danger-disabled:active, .ant-btn-danger.disabled:active, .ant-btn-danger[disabled]:active, .ant-btn-danger-disabled.active, .ant-btn-danger.disabled.active, .ant-btn-danger[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-danger-disabled > a:only-child, .ant-btn-danger.disabled > a:only-child, .ant-btn-danger[disabled] > a:only-child, .ant-btn-danger-disabled:hover > a:only-child, .ant-btn-danger.disabled:hover > a:only-child, .ant-btn-danger[disabled]:hover > a:only-child, .ant-btn-danger-disabled:focus > a:only-child, .ant-btn-danger.disabled:focus > a:only-child, .ant-btn-danger[disabled]:focus > a:only-child, .ant-btn-danger-disabled:active > a:only-child, .ant-btn-danger.disabled:active > a:only-child, .ant-btn-danger[disabled]:active > a:only-child, .ant-btn-danger-disabled.active > a:only-child, .ant-btn-danger.disabled.active > a:only-child, .ant-btn-danger[disabled].active > a:only-child { color: currentColor; } .ant-btn-danger-disabled > a:only-child::after, .ant-btn-danger.disabled > a:only-child::after, .ant-btn-danger[disabled] > a:only-child::after, .ant-btn-danger-disabled:hover > a:only-child::after, .ant-btn-danger.disabled:hover > a:only-child::after, .ant-btn-danger[disabled]:hover > a:only-child::after, .ant-btn-danger-disabled:focus > a:only-child::after, .ant-btn-danger.disabled:focus > a:only-child::after, .ant-btn-danger[disabled]:focus > a:only-child::after, .ant-btn-danger-disabled:active > a:only-child::after, .ant-btn-danger.disabled:active > a:only-child::after, .ant-btn-danger[disabled]:active > a:only-child::after, .ant-btn-danger-disabled.active > a:only-child::after, .ant-btn-danger.disabled.active > a:only-child::after, .ant-btn-danger[disabled].active > a:only-child::after { background: transparent; } .ant-btn-link { color: @primary-color; background-color: transparent; border-color: transparent; box-shadow: none; } .ant-btn-link > a:only-child { color: currentColor; } .ant-btn-link > a:only-child::after { background: transparent; } .ant-btn-link:hover, .ant-btn-link:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-link:hover > a:only-child, .ant-btn-link:focus > a:only-child { color: currentColor; } .ant-btn-link:hover > a:only-child::after, .ant-btn-link:focus > a:only-child::after { background: transparent; } .ant-btn-link:active, .ant-btn-link.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn-link:active > a:only-child, .ant-btn-link.active > a:only-child { color: currentColor; } .ant-btn-link:active > a:only-child::after, .ant-btn-link.active > a:only-child::after { background: transparent; } .ant-btn-link-disabled, .ant-btn-link.disabled, .ant-btn-link[disabled], .ant-btn-link-disabled:hover, .ant-btn-link.disabled:hover, .ant-btn-link[disabled]:hover, .ant-btn-link-disabled:focus, .ant-btn-link.disabled:focus, .ant-btn-link[disabled]:focus, .ant-btn-link-disabled:active, .ant-btn-link.disabled:active, .ant-btn-link[disabled]:active, .ant-btn-link-disabled.active, .ant-btn-link.disabled.active, .ant-btn-link[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-link-disabled > a:only-child, .ant-btn-link.disabled > a:only-child, .ant-btn-link[disabled] > a:only-child, .ant-btn-link-disabled:hover > a:only-child, .ant-btn-link.disabled:hover > a:only-child, .ant-btn-link[disabled]:hover > a:only-child, .ant-btn-link-disabled:focus > a:only-child, .ant-btn-link.disabled:focus > a:only-child, .ant-btn-link[disabled]:focus > a:only-child, .ant-btn-link-disabled:active > a:only-child, .ant-btn-link.disabled:active > a:only-child, .ant-btn-link[disabled]:active > a:only-child, .ant-btn-link-disabled.active > a:only-child, .ant-btn-link.disabled.active > a:only-child, .ant-btn-link[disabled].active > a:only-child { color: currentColor; } .ant-btn-link-disabled > a:only-child::after, .ant-btn-link.disabled > a:only-child::after, .ant-btn-link[disabled] > a:only-child::after, .ant-btn-link-disabled:hover > a:only-child::after, .ant-btn-link.disabled:hover > a:only-child::after, .ant-btn-link[disabled]:hover > a:only-child::after, .ant-btn-link-disabled:focus > a:only-child::after, .ant-btn-link.disabled:focus > a:only-child::after, .ant-btn-link[disabled]:focus > a:only-child::after, .ant-btn-link-disabled:active > a:only-child::after, .ant-btn-link.disabled:active > a:only-child::after, .ant-btn-link[disabled]:active > a:only-child::after, .ant-btn-link-disabled.active > a:only-child::after, .ant-btn-link.disabled.active > a:only-child::after, .ant-btn-link[disabled].active > a:only-child::after { background: transparent; } .ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active { border-color: transparent; } .ant-btn-link-disabled, .ant-btn-link.disabled, .ant-btn-link[disabled], .ant-btn-link-disabled:hover, .ant-btn-link.disabled:hover, .ant-btn-link[disabled]:hover, .ant-btn-link-disabled:focus, .ant-btn-link.disabled:focus, .ant-btn-link[disabled]:focus, .ant-btn-link-disabled:active, .ant-btn-link.disabled:active, .ant-btn-link[disabled]:active, .ant-btn-link-disabled.active, .ant-btn-link.disabled.active, .ant-btn-link[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: transparent; border-color: transparent; box-shadow: none; } .ant-btn-link-disabled > a:only-child, .ant-btn-link.disabled > a:only-child, .ant-btn-link[disabled] > a:only-child, .ant-btn-link-disabled:hover > a:only-child, .ant-btn-link.disabled:hover > a:only-child, .ant-btn-link[disabled]:hover > a:only-child, .ant-btn-link-disabled:focus > a:only-child, .ant-btn-link.disabled:focus > a:only-child, .ant-btn-link[disabled]:focus > a:only-child, .ant-btn-link-disabled:active > a:only-child, .ant-btn-link.disabled:active > a:only-child, .ant-btn-link[disabled]:active > a:only-child, .ant-btn-link-disabled.active > a:only-child, .ant-btn-link.disabled.active > a:only-child, .ant-btn-link[disabled].active > a:only-child { color: currentColor; } .ant-btn-link-disabled > a:only-child::after, .ant-btn-link.disabled > a:only-child::after, .ant-btn-link[disabled] > a:only-child::after, .ant-btn-link-disabled:hover > a:only-child::after, .ant-btn-link.disabled:hover > a:only-child::after, .ant-btn-link[disabled]:hover > a:only-child::after, .ant-btn-link-disabled:focus > a:only-child::after, .ant-btn-link.disabled:focus > a:only-child::after, .ant-btn-link[disabled]:focus > a:only-child::after, .ant-btn-link-disabled:active > a:only-child::after, .ant-btn-link.disabled:active > a:only-child::after, .ant-btn-link[disabled]:active > a:only-child::after, .ant-btn-link-disabled.active > a:only-child::after, .ant-btn-link.disabled.active > a:only-child::after, .ant-btn-link[disabled].active > a:only-child::after { background: transparent; } .ant-btn-icon-only { border-radius: 2px; } .ant-btn-icon-only.ant-btn-lg { border-radius: 2px; } .ant-btn-icon-only.ant-btn-sm { border-radius: 2px; } .ant-btn-round { border-radius: 32px; } .ant-btn-round.ant-btn-lg { border-radius: 40px; } .ant-btn-round.ant-btn-sm { border-radius: 24px; } .ant-btn-circle, .ant-btn-circle-outline { border-radius: 50%; } .ant-btn-circle.ant-btn-lg, .ant-btn-circle-outline.ant-btn-lg { border-radius: 50%; } .ant-btn-circle.ant-btn-sm, .ant-btn-circle-outline.ant-btn-sm { border-radius: 50%; } .ant-btn::before { background: #fff; border-radius: inherit; } .ant-btn-group-lg > .ant-btn, .ant-btn-group-lg > span > .ant-btn { border-radius: 0; } .ant-btn-group-sm > .ant-btn, .ant-btn-group-sm > span > .ant-btn { border-radius: 0; } .ant-btn-group .ant-btn-primary + .ant-btn:not(.ant-btn-primary):not([disabled]) { border-left-color: transparent; } .ant-btn-group .ant-btn { border-radius: 0; } .ant-btn-group > .ant-btn:only-child { border-radius: 2px; } .ant-btn-group > span:only-child > .ant-btn { border-radius: 2px; } .ant-btn-group > .ant-btn:first-child:not(:last-child), .ant-btn-group > span:first-child:not(:last-child) > .ant-btn { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ant-btn-group > .ant-btn:last-child:not(:first-child), .ant-btn-group > span:last-child:not(:first-child) > .ant-btn { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .ant-btn-group-sm > .ant-btn:only-child { border-radius: 2px; } .ant-btn-group-sm > span:only-child > .ant-btn { border-radius: 2px; } .ant-btn-group-sm > .ant-btn:first-child:not(:last-child), .ant-btn-group-sm > span:first-child:not(:last-child) > .ant-btn { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ant-btn-group-sm > .ant-btn:last-child:not(:first-child), .ant-btn-group-sm > span:last-child:not(:first-child) > .ant-btn { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .ant-btn-group > .ant-btn-group:not(:first-child):not(:last-child) > .ant-btn { border-radius: 0; } .ant-btn-group > .ant-btn-group:first-child:not(:last-child) > .ant-btn:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ant-btn-group > .ant-btn-group:last-child:not(:first-child) > .ant-btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ant-btn-background-ghost { color: #fff; background: transparent !important; border-color: #fff; } .ant-btn-background-ghost.ant-btn-primary { color: @primary-color; background-color: transparent; border-color: @primary-color; } .ant-btn-background-ghost.ant-btn-primary > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-primary:hover, .ant-btn-background-ghost.ant-btn-primary:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-btn-background-ghost.ant-btn-primary:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary:focus > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary:focus > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-primary:active, .ant-btn-background-ghost.ant-btn-primary.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: transparent; border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-btn-background-ghost.ant-btn-primary:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary.active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.active > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-primary-disabled, .ant-btn-background-ghost.ant-btn-primary.disabled, .ant-btn-background-ghost.ant-btn-primary[disabled], .ant-btn-background-ghost.ant-btn-primary-disabled:hover, .ant-btn-background-ghost.ant-btn-primary.disabled:hover, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover, .ant-btn-background-ghost.ant-btn-primary-disabled:focus, .ant-btn-background-ghost.ant-btn-primary.disabled:focus, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus, .ant-btn-background-ghost.ant-btn-primary-disabled:active, .ant-btn-background-ghost.ant-btn-primary.disabled:active, .ant-btn-background-ghost.ant-btn-primary[disabled]:active, .ant-btn-background-ghost.ant-btn-primary-disabled.active, .ant-btn-background-ghost.ant-btn-primary.disabled.active, .ant-btn-background-ghost.ant-btn-primary[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-background-ghost.ant-btn-primary-disabled > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child, .ant-btn-background-ghost.ant-btn-primary-disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child, .ant-btn-background-ghost.ant-btn-primary-disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child, .ant-btn-background-ghost.ant-btn-primary-disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child, .ant-btn-background-ghost.ant-btn-primary-disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-primary-disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary[disabled] > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary-disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary[disabled]:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary-disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary[disabled]:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary-disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary[disabled]:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary-disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary.disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-primary[disabled].active > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-danger { color: #ff4d4f; background-color: transparent; border-color: #ff4d4f; } .ant-btn-background-ghost.ant-btn-danger > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-danger:hover, .ant-btn-background-ghost.ant-btn-danger:focus { color: #ff7875; background-color: transparent; border-color: #ff7875; } .ant-btn-background-ghost.ant-btn-danger:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger:focus > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger:focus > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-danger:active, .ant-btn-background-ghost.ant-btn-danger.active { color: #d9363e; background-color: transparent; border-color: #d9363e; } .ant-btn-background-ghost.ant-btn-danger:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger.active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.active > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-danger-disabled, .ant-btn-background-ghost.ant-btn-danger.disabled, .ant-btn-background-ghost.ant-btn-danger[disabled], .ant-btn-background-ghost.ant-btn-danger-disabled:hover, .ant-btn-background-ghost.ant-btn-danger.disabled:hover, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover, .ant-btn-background-ghost.ant-btn-danger-disabled:focus, .ant-btn-background-ghost.ant-btn-danger.disabled:focus, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus, .ant-btn-background-ghost.ant-btn-danger-disabled:active, .ant-btn-background-ghost.ant-btn-danger.disabled:active, .ant-btn-background-ghost.ant-btn-danger[disabled]:active, .ant-btn-background-ghost.ant-btn-danger-disabled.active, .ant-btn-background-ghost.ant-btn-danger.disabled.active, .ant-btn-background-ghost.ant-btn-danger[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-background-ghost.ant-btn-danger-disabled > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child, .ant-btn-background-ghost.ant-btn-danger-disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child, .ant-btn-background-ghost.ant-btn-danger-disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child, .ant-btn-background-ghost.ant-btn-danger-disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child, .ant-btn-background-ghost.ant-btn-danger-disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-danger-disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger[disabled] > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger-disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger[disabled]:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger-disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger[disabled]:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger-disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger[disabled]:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger-disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger.disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-danger[disabled].active > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-link { color: @primary-color; background-color: transparent; border-color: transparent; color: #fff; } .ant-btn-background-ghost.ant-btn-link > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-link > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-link:hover, .ant-btn-background-ghost.ant-btn-link:focus { color: color(~`colorPalette("@{primary-color}", 5)`); background-color: transparent; border-color: transparent; } .ant-btn-background-ghost.ant-btn-link:hover > a:only-child, .ant-btn-background-ghost.ant-btn-link:focus > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-link:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-link:focus > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-link:active, .ant-btn-background-ghost.ant-btn-link.active { color: color(~`colorPalette("@{primary-color}", 7)`); background-color: transparent; border-color: transparent; } .ant-btn-background-ghost.ant-btn-link:active > a:only-child, .ant-btn-background-ghost.ant-btn-link.active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-link:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.active > a:only-child::after { background: transparent; } .ant-btn-background-ghost.ant-btn-link-disabled, .ant-btn-background-ghost.ant-btn-link.disabled, .ant-btn-background-ghost.ant-btn-link[disabled], .ant-btn-background-ghost.ant-btn-link-disabled:hover, .ant-btn-background-ghost.ant-btn-link.disabled:hover, .ant-btn-background-ghost.ant-btn-link[disabled]:hover, .ant-btn-background-ghost.ant-btn-link-disabled:focus, .ant-btn-background-ghost.ant-btn-link.disabled:focus, .ant-btn-background-ghost.ant-btn-link[disabled]:focus, .ant-btn-background-ghost.ant-btn-link-disabled:active, .ant-btn-background-ghost.ant-btn-link.disabled:active, .ant-btn-background-ghost.ant-btn-link[disabled]:active, .ant-btn-background-ghost.ant-btn-link-disabled.active, .ant-btn-background-ghost.ant-btn-link.disabled.active, .ant-btn-background-ghost.ant-btn-link[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-btn-background-ghost.ant-btn-link-disabled > a:only-child, .ant-btn-background-ghost.ant-btn-link.disabled > a:only-child, .ant-btn-background-ghost.ant-btn-link[disabled] > a:only-child, .ant-btn-background-ghost.ant-btn-link-disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-link.disabled:hover > a:only-child, .ant-btn-background-ghost.ant-btn-link[disabled]:hover > a:only-child, .ant-btn-background-ghost.ant-btn-link-disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-link.disabled:focus > a:only-child, .ant-btn-background-ghost.ant-btn-link[disabled]:focus > a:only-child, .ant-btn-background-ghost.ant-btn-link-disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-link.disabled:active > a:only-child, .ant-btn-background-ghost.ant-btn-link[disabled]:active > a:only-child, .ant-btn-background-ghost.ant-btn-link-disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-link.disabled.active > a:only-child, .ant-btn-background-ghost.ant-btn-link[disabled].active > a:only-child { color: currentColor; } .ant-btn-background-ghost.ant-btn-link-disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.disabled > a:only-child::after, .ant-btn-background-ghost.ant-btn-link[disabled] > a:only-child::after, .ant-btn-background-ghost.ant-btn-link-disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.disabled:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-link[disabled]:hover > a:only-child::after, .ant-btn-background-ghost.ant-btn-link-disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.disabled:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-link[disabled]:focus > a:only-child::after, .ant-btn-background-ghost.ant-btn-link-disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.disabled:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link[disabled]:active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link-disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link.disabled.active > a:only-child::after, .ant-btn-background-ghost.ant-btn-link[disabled].active > a:only-child::after { background: transparent; } .ant-fullcalendar { color: #000000; border-top: 1px solid #d9d9d9; } .ant-fullcalendar table { background-color: transparent; border-collapse: collapse; } .ant-fullcalendar table, .ant-fullcalendar th, .ant-fullcalendar td { border: 0; } .ant-fullcalendar-calendar-table { border-spacing: 0; } .ant-fullcalendar-value { color: #000000; background: transparent; border-radius: 2px; } .ant-fullcalendar-value:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-fullcalendar-value:active { color: #ffffff; background: @primary-color; } .ant-fullcalendar-today .ant-fullcalendar-value, .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value { box-shadow: 0 0 0 1px #313653 inset; } .ant-fullcalendar-selected-day .ant-fullcalendar-value, .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value { color: #ffffff; background: @primary-color; } .ant-fullcalendar-disabled-cell-first-of-row .ant-fullcalendar-value { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ant-fullcalendar-disabled-cell-last-of-row .ant-fullcalendar-value { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .ant-fullcalendar-last-month-cell .ant-fullcalendar-value, .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-value { color: rgba(0, 0, 0, 0.25); } .ant-fullcalendar-month-panel-table { border-collapse: separate; } .ant-fullcalendar-fullscreen { border-top: 0; } .ant-fullcalendar-fullscreen .ant-fullcalendar-month, .ant-fullcalendar-fullscreen .ant-fullcalendar-date { color: #000000; border-top: 2px solid #e8e8e8; } .ant-fullcalendar-fullscreen .ant-fullcalendar-month:hover, .ant-fullcalendar-fullscreen .ant-fullcalendar-date:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-fullcalendar-fullscreen .ant-fullcalendar-month:active, .ant-fullcalendar-fullscreen .ant-fullcalendar-date:active { background: rgba(58, 64, 99, 0.15); } .ant-fullcalendar-fullscreen .ant-fullcalendar-value { background: transparent; } .ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value { color: #000000; } .ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month, .ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date { background: transparent; border-top-color: @primary-color; } .ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-value, .ant-fullcalendar-fullscreen .ant-fullcalendar-today .ant-fullcalendar-value { box-shadow: none; } .ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month, .ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-fullcalendar-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value, .ant-fullcalendar-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value { color: @primary-color; } .ant-fullcalendar-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date, .ant-fullcalendar-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date { color: rgba(0, 0, 0, 0.25); } .ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date, .ant-fullcalendar-disabled-cell:not(.ant-fullcalendar-today) .ant-fullcalendar-date:hover { background: transparent; } .ant-fullcalendar-disabled-cell .ant-fullcalendar-value { color: rgba(0, 0, 0, 0.25); border-radius: 0; } .ant-card { color: #000000; background: #fff; border-radius: 2px; } .ant-card-hoverable:hover { border-color: rgba(0, 0, 0, 0.09); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); } .ant-card-bordered { border: 1px solid #e8e8e8; } .ant-card-head { color: rgba(0, 0, 0, 0.85); background: transparent; border-bottom: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-card-head .ant-tabs { color: #000000; } .ant-card-head .ant-tabs-bar { border-bottom: 1px solid #e8e8e8; } .ant-card-extra { color: #000000; } .ant-card-grid { border: 0; border-radius: 0; box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8, 1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset; } .ant-card-grid-hoverable:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-card-cover img { border-radius: 2px 2px 0 0; } .ant-card-actions { background: #fafafa; border-top: 1px solid #e8e8e8; } .ant-card-actions > li { color: rgba(0, 0, 0, 0.45); } .ant-card-actions > li > span:hover { color: @primary-color; } .ant-card-actions > li > span a:not(.ant-btn), .ant-card-actions > li > span > .anticon { color: rgba(0, 0, 0, 0.45); } .ant-card-actions > li > span a:not(.ant-btn):hover, .ant-card-actions > li > span > .anticon:hover { color: @primary-color; } .ant-card-actions > li:not(:last-child) { border-right: 1px solid #e8e8e8; } .ant-card-type-inner .ant-card-head { background: #fafafa; } .ant-card-meta-title { color: rgba(0, 0, 0, 0.85); } .ant-card-meta-description { color: rgba(0, 0, 0, 0.45); } .ant-card-loading-block { background: linear-gradient(90deg, rgba(207, 216, 220, 0.2), rgba(207, 216, 220, 0.4), rgba(207, 216, 220, 0.2)); background-size: 600% 600%; border-radius: 2px; } .ant-carousel { color: #000000; } .ant-carousel .slick-slider { -webkit-tap-highlight-color: transparent; } .ant-carousel .slick-vertical .slick-slide { border: 1px solid transparent; } .ant-carousel .slick-prev, .ant-carousel .slick-next { color: transparent; background: transparent; border: 0; } .ant-carousel .slick-prev:hover, .ant-carousel .slick-next:hover, .ant-carousel .slick-prev:focus, .ant-carousel .slick-next:focus { color: transparent; background: transparent; } .ant-carousel .slick-dots li button { color: transparent; background: #fff; border: 0; border-radius: 1px; } .ant-carousel .slick-dots li.slick-active button { background: #fff; } .ant-cascader { color: #000000; } .ant-cascader-input.ant-input { background-color: transparent !important; } .ant-cascader-picker { color: #000000; background-color: #fff; border-radius: 2px; } .ant-cascader-picker-with-value .ant-cascader-picker-label { color: transparent; } .ant-cascader-picker-disabled { color: rgba(0, 0, 0, 0.25); background: #f5f5f5; } .ant-cascader-picker:focus .ant-cascader-input { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-cascader-picker-show-search.ant-cascader-picker-focused { color: rgba(0, 0, 0, 0.25); } .ant-cascader-picker-clear { color: rgba(0, 0, 0, 0.25); background: #fff; } .ant-cascader-picker-clear:hover { color: rgba(0, 0, 0, 0.45); } .ant-cascader-picker-arrow { color: rgba(0, 0, 0, 0.25); } .ant-cascader-picker-label:hover + .ant-cascader-input { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-cascader-menus { background: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-cascader-menu { border-right: 1px solid #e8e8e8; } .ant-cascader-menu:first-child { border-radius: 2px 0 0 2px; } .ant-cascader-menu:last-child { border-right-color: transparent; border-radius: 0 2px 2px 0; } .ant-cascader-menu:only-child { border-radius: 2px; } .ant-cascader-menu-item:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-cascader-menu-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-cascader-menu-item-disabled:hover { background: transparent; } .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled), .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover { background-color: #fafafa; } .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon { color: rgba(0, 0, 0, 0.45); } .ant-cascader-menu-item .ant-cascader-menu-item-keyword { color: #f5222d; } .ant-checkbox { color: #000000; } .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { border-color: @primary-color; } .ant-checkbox-checked::after { border: 1px solid @primary-color; border-radius: 2px; } .ant-checkbox-inner { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; border-collapse: separate; } .ant-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-checkbox-checked .ant-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-checkbox-checked .ant-checkbox-inner { background-color: @primary-color; border-color: @primary-color; } .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after { border-color: rgba(0, 0, 0, 0.25); } .ant-checkbox-disabled .ant-checkbox-inner { background-color: #f5f5f5; border-color: #d9d9d9 !important; } .ant-checkbox-disabled .ant-checkbox-inner::after { border-color: #f5f5f5; border-collapse: separate; } .ant-checkbox-disabled + span { color: rgba(0, 0, 0, 0.25); } .ant-checkbox-wrapper { color: #000000; } .ant-checkbox-group { color: #000000; } .ant-checkbox-indeterminate .ant-checkbox-inner { background-color: #fff; border-color: #d9d9d9; } .ant-checkbox-indeterminate .ant-checkbox-inner::after { background-color: @primary-color; border: 0; } .ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after { background-color: rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25); } .ant-collapse { color: #000000; background-color: #fafafa; border: 1px solid #d9d9d9; border-bottom: 0; border-radius: 2px; } .ant-collapse > .ant-collapse-item { border-bottom: 1px solid #d9d9d9; } .ant-collapse > .ant-collapse-item:last-child, .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header { border-radius: 0 0 2px 2px; } .ant-collapse > .ant-collapse-item > .ant-collapse-header { color: rgba(0, 0, 0, 0.85); } .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow { color: inherit; } .ant-collapse-content { color: #000000; background-color: #fff; border-top: 1px solid #d9d9d9; } .ant-collapse-item:last-child > .ant-collapse-content { border-radius: 0 0 2px 2px; } .ant-collapse-borderless { background-color: #fff; border: 0; } .ant-collapse-borderless > .ant-collapse-item { border-bottom: 1px solid #d9d9d9; } .ant-collapse-borderless > .ant-collapse-item:last-child, .ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header { border-radius: 0; } .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content { background-color: transparent; border-top: 0; } .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header, .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow { color: rgba(0, 0, 0, 0.25); } .ant-comment-avatar img { border-radius: 50%; } .ant-comment-content-author-name { color: rgba(0, 0, 0, 0.45); } .ant-comment-content-author-name > * { color: rgba(0, 0, 0, 0.45); } .ant-comment-content-author-name > *:hover { color: rgba(0, 0, 0, 0.45); } .ant-comment-content-author-time { color: #ccc; } .ant-comment-actions > li { color: rgba(0, 0, 0, 0.45); } .ant-comment-actions > li > span { color: rgba(0, 0, 0, 0.45); } .ant-comment-actions > li > span:hover { color: #595959; } .ant-calendar-picker-container { color: #000000; } .ant-calendar-picker { color: #000000; } .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) { border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-calendar-picker-clear { color: rgba(0, 0, 0, 0.25); background: #fff; } .ant-calendar-picker-clear:hover { color: rgba(0, 0, 0, 0.45); } .ant-calendar-picker-icon { color: rgba(0, 0, 0, 0.25); } .ant-calendar { background-color: #fff; background-clip: padding-box; border: 1px solid #ffffff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-calendar-input-wrap { border-bottom: 1px solid #e8e8e8; } .ant-calendar-input { color: #000000; background: #fff; border: 0; } .ant-calendar-input::-moz-placeholder { color: #bfbfbf; } .ant-calendar-input:-ms-input-placeholder { color: #bfbfbf; } .ant-calendar-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-calendar-header { border-bottom: 1px solid #e8e8e8; } .ant-calendar-header a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-header .ant-calendar-century-select, .ant-calendar-header .ant-calendar-decade-select, .ant-calendar-header .ant-calendar-year-select, .ant-calendar-header .ant-calendar-month-select { color: rgba(0, 0, 0, 0.85); } .ant-calendar-header .ant-calendar-prev-century-btn, .ant-calendar-header .ant-calendar-next-century-btn, .ant-calendar-header .ant-calendar-prev-decade-btn, .ant-calendar-header .ant-calendar-next-decade-btn, .ant-calendar-header .ant-calendar-prev-month-btn, .ant-calendar-header .ant-calendar-next-month-btn, .ant-calendar-header .ant-calendar-prev-year-btn, .ant-calendar-header .ant-calendar-next-year-btn { color: rgba(0, 0, 0, 0.45); } .ant-calendar-header .ant-calendar-prev-century-btn::before, .ant-calendar-header .ant-calendar-prev-decade-btn::before, .ant-calendar-header .ant-calendar-prev-year-btn::before, .ant-calendar-header .ant-calendar-prev-century-btn::after, .ant-calendar-header .ant-calendar-prev-decade-btn::after, .ant-calendar-header .ant-calendar-prev-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-header .ant-calendar-prev-century-btn:hover::before, .ant-calendar-header .ant-calendar-prev-decade-btn:hover::before, .ant-calendar-header .ant-calendar-prev-year-btn:hover::before, .ant-calendar-header .ant-calendar-prev-century-btn:hover::after, .ant-calendar-header .ant-calendar-prev-decade-btn:hover::after, .ant-calendar-header .ant-calendar-prev-year-btn:hover::after { border-color: #000000; } .ant-calendar-header .ant-calendar-next-century-btn::before, .ant-calendar-header .ant-calendar-next-decade-btn::before, .ant-calendar-header .ant-calendar-next-year-btn::before, .ant-calendar-header .ant-calendar-next-century-btn::after, .ant-calendar-header .ant-calendar-next-decade-btn::after, .ant-calendar-header .ant-calendar-next-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-header .ant-calendar-next-century-btn:hover::before, .ant-calendar-header .ant-calendar-next-decade-btn:hover::before, .ant-calendar-header .ant-calendar-next-year-btn:hover::before, .ant-calendar-header .ant-calendar-next-century-btn:hover::after, .ant-calendar-header .ant-calendar-next-decade-btn:hover::after, .ant-calendar-header .ant-calendar-next-year-btn:hover::after { border-color: #000000; } .ant-calendar-header .ant-calendar-prev-month-btn::before, .ant-calendar-header .ant-calendar-prev-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-header .ant-calendar-prev-month-btn:hover::before, .ant-calendar-header .ant-calendar-prev-month-btn:hover::after { border-color: #000000; } .ant-calendar-header .ant-calendar-next-month-btn::before, .ant-calendar-header .ant-calendar-next-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-header .ant-calendar-next-month-btn:hover::before, .ant-calendar-header .ant-calendar-next-month-btn:hover::after { border-color: #000000; } .ant-calendar table { background-color: transparent; border-collapse: collapse; } .ant-calendar table, .ant-calendar th, .ant-calendar td { border: 0; } .ant-calendar-calendar-table { border-spacing: 0; } .ant-calendar-date { color: #000000; background: transparent; border: 1px solid transparent; border-radius: 2px; } .ant-calendar-date:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-date:active { color: #ffffff; background: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-today .ant-calendar-date { color: @primary-color; border-color: @primary-color; } .ant-calendar-selected-day .ant-calendar-date { background: rgba(58, 64, 99, 0.15); } .ant-calendar-last-month-cell .ant-calendar-date, .ant-calendar-next-month-btn-day .ant-calendar-date, .ant-calendar-last-month-cell .ant-calendar-date:hover, .ant-calendar-next-month-btn-day .ant-calendar-date:hover { color: rgba(0, 0, 0, 0.25); background: transparent; border-color: transparent; } .ant-calendar-disabled-cell .ant-calendar-date { color: rgba(0, 0, 0, 0.25); background: #f5f5f5; border: 1px solid transparent; border-radius: 0; } .ant-calendar-disabled-cell .ant-calendar-date:hover { background: #f5f5f5; } .ant-calendar-disabled-cell.ant-calendar-selected-day .ant-calendar-date::before { background: rgba(0, 0, 0, 0.1); border-radius: 2px; } .ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date::before { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; } .ant-calendar-disabled-cell-first-of-row .ant-calendar-date { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .ant-calendar-disabled-cell-last-of-row .ant-calendar-date { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .ant-calendar-footer { border-top: 1px solid #e8e8e8; } .ant-calendar-footer:empty { border-top: 0; } .ant-calendar .ant-calendar-today-btn-disabled, .ant-calendar .ant-calendar-clear-btn-disabled { color: rgba(0, 0, 0, 0.25); } .ant-calendar .ant-calendar-clear-btn::after { color: rgba(0, 0, 0, 0.25); } .ant-calendar .ant-calendar-clear-btn:hover::after { color: rgba(0, 0, 0, 0.45); } .ant-calendar .ant-calendar-ok-btn { background-image: none; border: 1px solid transparent; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015); color: #fff; background-color: @primary-color; border-color: @primary-color; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045); border-radius: 2px; } .ant-calendar .ant-calendar-ok-btn:not([disabled]):active { box-shadow: none; } .ant-calendar .ant-calendar-ok-btn-lg { border-radius: 2px; } .ant-calendar .ant-calendar-ok-btn-sm { border-radius: 2px; } .ant-calendar .ant-calendar-ok-btn > a:only-child { color: currentColor; } .ant-calendar .ant-calendar-ok-btn > a:only-child::after { background: transparent; } .ant-calendar .ant-calendar-ok-btn:hover, .ant-calendar .ant-calendar-ok-btn:focus { color: #fff; background-color: color(~`colorPalette("@{primary-color}", 5)`); border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar .ant-calendar-ok-btn:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn:focus > a:only-child { color: currentColor; } .ant-calendar .ant-calendar-ok-btn:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn:focus > a:only-child::after { background: transparent; } .ant-calendar .ant-calendar-ok-btn:active, .ant-calendar .ant-calendar-ok-btn.active { color: #fff; background-color: color(~`colorPalette("@{primary-color}", 7)`); border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-calendar .ant-calendar-ok-btn:active > a:only-child, .ant-calendar .ant-calendar-ok-btn.active > a:only-child { color: currentColor; } .ant-calendar .ant-calendar-ok-btn:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.active > a:only-child::after { background: transparent; } .ant-calendar .ant-calendar-ok-btn-disabled, .ant-calendar .ant-calendar-ok-btn.disabled, .ant-calendar .ant-calendar-ok-btn[disabled], .ant-calendar .ant-calendar-ok-btn-disabled:hover, .ant-calendar .ant-calendar-ok-btn.disabled:hover, .ant-calendar .ant-calendar-ok-btn[disabled]:hover, .ant-calendar .ant-calendar-ok-btn-disabled:focus, .ant-calendar .ant-calendar-ok-btn.disabled:focus, .ant-calendar .ant-calendar-ok-btn[disabled]:focus, .ant-calendar .ant-calendar-ok-btn-disabled:active, .ant-calendar .ant-calendar-ok-btn.disabled:active, .ant-calendar .ant-calendar-ok-btn[disabled]:active, .ant-calendar .ant-calendar-ok-btn-disabled.active, .ant-calendar .ant-calendar-ok-btn.disabled.active, .ant-calendar .ant-calendar-ok-btn[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-calendar .ant-calendar-ok-btn-disabled > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:active > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled.active > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child { color: currentColor; } .ant-calendar .ant-calendar-ok-btn-disabled > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled.active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child::after { background: transparent; } .ant-calendar .ant-calendar-ok-btn-disabled, .ant-calendar .ant-calendar-ok-btn.disabled, .ant-calendar .ant-calendar-ok-btn[disabled], .ant-calendar .ant-calendar-ok-btn-disabled:hover, .ant-calendar .ant-calendar-ok-btn.disabled:hover, .ant-calendar .ant-calendar-ok-btn[disabled]:hover, .ant-calendar .ant-calendar-ok-btn-disabled:focus, .ant-calendar .ant-calendar-ok-btn.disabled:focus, .ant-calendar .ant-calendar-ok-btn[disabled]:focus, .ant-calendar .ant-calendar-ok-btn-disabled:active, .ant-calendar .ant-calendar-ok-btn.disabled:active, .ant-calendar .ant-calendar-ok-btn[disabled]:active, .ant-calendar .ant-calendar-ok-btn-disabled.active, .ant-calendar .ant-calendar-ok-btn.disabled.active, .ant-calendar .ant-calendar-ok-btn[disabled].active { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; box-shadow: none; } .ant-calendar .ant-calendar-ok-btn-disabled > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled:active > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child, .ant-calendar .ant-calendar-ok-btn-disabled.active > a:only-child, .ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child, .ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child { color: currentColor; } .ant-calendar .ant-calendar-ok-btn-disabled > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled] > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:hover > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:focus > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled]:active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn-disabled.active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn.disabled.active > a:only-child::after, .ant-calendar .ant-calendar-ok-btn[disabled].active > a:only-child::after { background: transparent; } .ant-calendar-range-picker-input { background-color: transparent; border: 0; } .ant-calendar-range-picker-input::-moz-placeholder { color: #bfbfbf; } .ant-calendar-range-picker-input:-ms-input-placeholder { color: #bfbfbf; } .ant-calendar-range-picker-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-calendar-range-picker-separator { color: rgba(0, 0, 0, 0.45); } .ant-calendar-range-left .ant-calendar-time-picker-inner { border-right: 1px solid #e8e8e8; } .ant-calendar-range-right .ant-calendar-time-picker-inner { border-left: 1px solid #e8e8e8; } .ant-calendar-range-middle { color: rgba(0, 0, 0, 0.45); } .ant-calendar-range .ant-calendar-today :not(.ant-calendar-disabled-cell) :not(.ant-calendar-last-month-cell) :not(.ant-calendar-next-month-btn-day) .ant-calendar-date { color: @primary-color; background: rgba(58, 64, 99, 0.15); border-color: @primary-color; } .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date, .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date { color: #ffffff; background: @primary-color; border: 1px solid transparent; } .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date:hover, .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date:hover { background: @primary-color; } .ant-calendar-range .ant-calendar-input, .ant-calendar-range .ant-calendar-time-picker-input { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; border: 0; box-shadow: none; } .ant-calendar-range .ant-calendar-input::-moz-placeholder, .ant-calendar-range .ant-calendar-time-picker-input::-moz-placeholder { color: #bfbfbf; } .ant-calendar-range .ant-calendar-input:-ms-input-placeholder, .ant-calendar-range .ant-calendar-time-picker-input:-ms-input-placeholder { color: #bfbfbf; } .ant-calendar-range .ant-calendar-input::-webkit-input-placeholder, .ant-calendar-range .ant-calendar-time-picker-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-calendar-range .ant-calendar-input:hover, .ant-calendar-range .ant-calendar-time-picker-input:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-calendar-range .ant-calendar-input:focus, .ant-calendar-range .ant-calendar-time-picker-input:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-calendar-range .ant-calendar-input-disabled, .ant-calendar-range .ant-calendar-time-picker-input-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-calendar-range .ant-calendar-input-disabled:hover, .ant-calendar-range .ant-calendar-time-picker-input-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-calendar-range .ant-calendar-input[disabled], .ant-calendar-range .ant-calendar-time-picker-input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-calendar-range .ant-calendar-input[disabled]:hover, .ant-calendar-range .ant-calendar-time-picker-input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-calendar-range .ant-calendar-input:focus, .ant-calendar-range .ant-calendar-time-picker-input:focus { box-shadow: none; } .ant-calendar-range .ant-calendar-in-range-cell { border-radius: 0; } .ant-calendar-range .ant-calendar-in-range-cell::before { background: color(~`colorPalette("@{primary-color}", 1)`); border: 0; border-radius: 0; } .ant-calendar-range .ant-calendar-header, .ant-calendar-range .ant-calendar-month-panel-header, .ant-calendar-range .ant-calendar-year-panel-header, .ant-calendar-range .ant-calendar-decade-panel-header { border-bottom: 0; } .ant-calendar-range .ant-calendar-body, .ant-calendar-range .ant-calendar-month-panel-body, .ant-calendar-range .ant-calendar-year-panel-body, .ant-calendar-range .ant-calendar-decade-panel-body { border-top: 1px solid #e8e8e8; } .ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner { background: none; } .ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-combobox { background-color: #fff; border-top: 1px solid #e8e8e8; } .ant-calendar-range.ant-calendar-show-time-picker .ant-calendar-body { border-top-color: transparent; } .ant-calendar-time-picker { background-color: #fff; } .ant-calendar-time-picker-inner { background-color: #fff; background-clip: padding-box; } .ant-calendar-time-picker-select { border-right: 1px solid #e8e8e8; } .ant-calendar-time-picker-select:first-child { border-left: 0; } .ant-calendar-time-picker-select:last-child { border-right: 0; } .ant-calendar-time-picker-select li:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-time-picker-select li:focus { color: @primary-color; } li.ant-calendar-time-picker-select-option-selected { background: #f5f5f5; } li.ant-calendar-time-picker-select-option-disabled { color: rgba(0, 0, 0, 0.25); } li.ant-calendar-time-picker-select-option-disabled:hover { background: transparent; } .ant-calendar-time .ant-calendar-day-select { color: rgba(0, 0, 0, 0.85); } .ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled { color: rgba(0, 0, 0, 0.25); } .ant-calendar-month-panel { background: #fff; border-radius: 2px; } .ant-calendar-month-panel-header { border-bottom: 1px solid #e8e8e8; } .ant-calendar-month-panel-header a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-month-panel-header .ant-calendar-month-panel-century-select, .ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select, .ant-calendar-month-panel-header .ant-calendar-month-panel-year-select, .ant-calendar-month-panel-header .ant-calendar-month-panel-month-select { color: rgba(0, 0, 0, 0.85); } .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn { color: rgba(0, 0, 0, 0.45); } .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-century-btn:hover::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-decade-btn:hover::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-year-btn:hover::after { border-color: #000000; } .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-century-btn:hover::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-decade-btn:hover::after, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn:hover::after { border-color: #000000; } .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-prev-month-btn:hover::after { border-color: #000000; } .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn:hover::before, .ant-calendar-month-panel-header .ant-calendar-month-panel-next-month-btn:hover::after { border-color: #000000; } .ant-calendar-month-panel-footer { border-top: 1px solid #e8e8e8; } .ant-calendar-month-panel-table { border-collapse: separate; } .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month { color: #ffffff; background: @primary-color; } .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month:hover { color: #ffffff; background: @primary-color; } .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month, .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month:hover { color: rgba(0, 0, 0, 0.25); background: #f5f5f5; } .ant-calendar-month-panel-month { color: #000000; background: transparent; border-radius: 2px; } .ant-calendar-month-panel-month:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-year-panel { background: #fff; border-radius: 2px; } .ant-calendar-year-panel-header { border-bottom: 1px solid #e8e8e8; } .ant-calendar-year-panel-header a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-year-panel-header .ant-calendar-year-panel-century-select, .ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select, .ant-calendar-year-panel-header .ant-calendar-year-panel-year-select, .ant-calendar-year-panel-header .ant-calendar-year-panel-month-select { color: rgba(0, 0, 0, 0.85); } .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn { color: rgba(0, 0, 0, 0.45); } .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-century-btn:hover::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-decade-btn:hover::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-year-btn:hover::after { border-color: #000000; } .ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-century-btn:hover::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-decade-btn:hover::after, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-year-btn:hover::after { border-color: #000000; } .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-prev-month-btn:hover::after { border-color: #000000; } .ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn:hover::before, .ant-calendar-year-panel-header .ant-calendar-year-panel-next-month-btn:hover::after { border-color: #000000; } .ant-calendar-year-panel-footer { border-top: 1px solid #e8e8e8; } .ant-calendar-year-panel-table { border-collapse: separate; } .ant-calendar-year-panel-year { color: #000000; background: transparent; border-radius: 2px; } .ant-calendar-year-panel-year:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year { color: #ffffff; background: @primary-color; } .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year:hover { color: #ffffff; background: @primary-color; } .ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year, .ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year { color: rgba(0, 0, 0, 0.25); } .ant-calendar-decade-panel { background: #fff; border-radius: 2px; } .ant-calendar-decade-panel-header { border-bottom: 1px solid #e8e8e8; } .ant-calendar-decade-panel-header a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-century-select, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-decade-select, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-year-select, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-month-select { color: rgba(0, 0, 0, 0.85); } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn { color: rgba(0, 0, 0, 0.45); } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-century-btn:hover::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn:hover::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-year-btn:hover::after { border-color: #000000; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-century-btn:hover::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-decade-btn:hover::after, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-year-btn:hover::after { border-color: #000000; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-prev-month-btn:hover::after { border-color: #000000; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn::after { border: 0 solid #aaa; border-width: 1.5px 0 0 1.5px; border-radius: 1px; } .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn:hover::before, .ant-calendar-decade-panel-header .ant-calendar-decade-panel-next-month-btn:hover::after { border-color: #000000; } .ant-calendar-decade-panel-footer { border-top: 1px solid #e8e8e8; } .ant-calendar-decade-panel-table { border-collapse: separate; } .ant-calendar-decade-panel-decade { color: #000000; background: transparent; border-radius: 2px; } .ant-calendar-decade-panel-decade:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade { color: #ffffff; background: @primary-color; } .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover { color: #ffffff; background: @primary-color; } .ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade, .ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade { color: rgba(0, 0, 0, 0.25); } .ant-calendar-week-number .ant-calendar-body tr:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-calendar-week-number .ant-calendar-body tr.ant-calendar-active-week { background: rgba(58, 64, 99, 0.15); } .ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day .ant-calendar-date, .ant-calendar-week-number .ant-calendar-body tr .ant-calendar-selected-day:hover .ant-calendar-date { color: #000000; background: transparent; } .ant-descriptions-title { color: rgba(0, 0, 0, 0.85); } .ant-descriptions-view { border-radius: 2px; } .ant-descriptions-row:last-child { border-bottom: none; } .ant-descriptions-item-label { color: rgba(0, 0, 0, 0.85); } .ant-descriptions-item-content { color: #000000; } .ant-descriptions-bordered .ant-descriptions-view { border: 1px solid #e8e8e8; } .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content { border-right: 1px solid #e8e8e8; } .ant-descriptions-bordered .ant-descriptions-item-label:last-child, .ant-descriptions-bordered .ant-descriptions-item-content:last-child { border-right: none; } .ant-descriptions-bordered .ant-descriptions-item-label { background-color: #fafafa; } .ant-descriptions-bordered .ant-descriptions-row { border-bottom: 1px solid #e8e8e8; } .ant-descriptions-bordered .ant-descriptions-row:last-child { border-bottom: none; } .ant-divider { color: #000000; background: #e8e8e8; } .ant-divider-horizontal.ant-divider-with-text-center, .ant-divider-horizontal.ant-divider-with-text-left, .ant-divider-horizontal.ant-divider-with-text-right { color: rgba(0, 0, 0, 0.85); background: transparent; } .ant-divider-horizontal.ant-divider-with-text-center::before, .ant-divider-horizontal.ant-divider-with-text-left::before, .ant-divider-horizontal.ant-divider-with-text-right::before, .ant-divider-horizontal.ant-divider-with-text-center::after, .ant-divider-horizontal.ant-divider-with-text-left::after, .ant-divider-horizontal.ant-divider-with-text-right::after { border-top: 1px solid #e8e8e8; } .ant-divider-dashed { background: none; border-color: #e8e8e8; border-style: dashed; border-width: 1px 0 0; } .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed, .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed, .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed { border-top: 0; } .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed::before, .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed::before, .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed::before, .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed::after, .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed::after, .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed::after { border-style: dashed none none; } .ant-divider-vertical.ant-divider-dashed { border-width: 0 0 0 1px; } .ant-drawer-left.ant-drawer-open .ant-drawer-content-wrapper { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); } .ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper { box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); } .ant-drawer-top.ant-drawer-open .ant-drawer-content-wrapper { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-drawer-bottom.ant-drawer-open .ant-drawer-content-wrapper { box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); } .ant-drawer-title { color: rgba(0, 0, 0, 0.85); } .ant-drawer-content { background-color: #fff; background-clip: padding-box; border: 0; } .ant-drawer-close { color: rgba(0, 0, 0, 0.45); background: transparent; border: 0; } .ant-drawer-close:focus, .ant-drawer-close:hover { color: rgba(0, 0, 0, 0.75); } .ant-drawer-header { color: #000000; background: #fff; border-bottom: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-drawer-header-no-title { color: #000000; background: #fff; } .ant-drawer-mask { background-color: rgba(0, 0, 0, 0.45); } .ant-drawer-open-content { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ant-dropdown { color: #000000; } .ant-dropdown-menu { background-color: #fff; background-clip: padding-box; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-dropdown-menu-item-group-title { color: rgba(0, 0, 0, 0.45); } .ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title { color: #000000; } .ant-dropdown-menu-item > a, .ant-dropdown-menu-submenu-title > a { color: #000000; } .ant-dropdown-menu-item-selected, .ant-dropdown-menu-submenu-title-selected, .ant-dropdown-menu-item-selected > a, .ant-dropdown-menu-submenu-title-selected > a { color: @primary-color; background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-dropdown-menu-item-disabled, .ant-dropdown-menu-submenu-title-disabled { color: rgba(0, 0, 0, 0.25); } .ant-dropdown-menu-item-disabled:hover, .ant-dropdown-menu-submenu-title-disabled:hover { color: rgba(0, 0, 0, 0.25); background-color: #fff; } .ant-dropdown-menu-item-divider, .ant-dropdown-menu-submenu-title-divider { background-color: #e8e8e8; } .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow-icon, .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon { color: rgba(0, 0, 0, 0.45); } .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon { color: rgba(0, 0, 0, 0.25); background-color: #fff; } .ant-dropdown-menu-dark, .ant-dropdown-menu-dark .ant-dropdown-menu { background: @primary-color; } .ant-dropdown-menu-dark .ant-dropdown-menu-item, .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title, .ant-dropdown-menu-dark .ant-dropdown-menu-item > a { color: rgba(255, 255, 255, 0.65); } .ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow::after, .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow::after, .ant-dropdown-menu-dark .ant-dropdown-menu-item > a .ant-dropdown-menu-submenu-arrow::after { color: rgba(255, 255, 255, 0.65); } .ant-dropdown-menu-dark .ant-dropdown-menu-item:hover, .ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover, .ant-dropdown-menu-dark .ant-dropdown-menu-item > a:hover { color: #ffffff; background: transparent; } .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected, .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover, .ant-dropdown-menu-dark .ant-dropdown-menu-item-selected > a { color: #ffffff; background: @primary-color; } .ant-empty-normal { color: rgba(0, 0, 0, 0.25); } .ant-empty-small { color: rgba(0, 0, 0, 0.25); } .ant-form { color: #000000; } .ant-form legend { color: rgba(0, 0, 0, 0.45); border: 0; border-bottom: 1px solid #d9d9d9; } .ant-form output { color: #000000; } .ant-form-item-required::before { color: #f5222d; } .ant-form-item-label > label { color: rgba(0, 0, 0, 0.85); } .ant-form-item { color: #000000; } .ant-form-explain, .ant-form-extra { color: rgba(0, 0, 0, 0.45); } form .ant-upload { background: transparent; } .has-success.has-feedback .ant-form-item-children-icon { color: #52c41a; } .has-warning .ant-form-explain, .has-warning .ant-form-split { color: #faad14; } .has-warning .ant-input, .has-warning .ant-input:hover { background-color: #fff; border-color: #faad14; } .has-warning .ant-input:focus { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-warning .ant-input:not([disabled]):hover { border-color: #faad14; } .has-warning .ant-calendar-picker-open .ant-calendar-picker-input { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-warning .ant-input-affix-wrapper .ant-input, .has-warning .ant-input-affix-wrapper .ant-input:hover { background-color: #fff; border-color: #faad14; } .has-warning .ant-input-affix-wrapper .ant-input:focus { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-warning .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { border-color: #faad14; } .has-warning .ant-input-prefix { color: #faad14; } .has-warning .ant-input-group-addon { color: #faad14; background-color: #fff; border-color: #faad14; } .has-warning .has-feedback { color: #faad14; } .has-warning.has-feedback .ant-form-item-children-icon { color: #faad14; } .has-warning .ant-select-selection { border-color: #faad14; } .has-warning .ant-select-selection:hover { border-color: #faad14; } .has-warning .ant-select-open .ant-select-selection, .has-warning .ant-select-focused .ant-select-selection { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-warning .ant-calendar-picker-icon::after, .has-warning .ant-time-picker-icon::after, .has-warning .ant-picker-icon::after, .has-warning .ant-select-arrow, .has-warning .ant-cascader-picker-arrow { color: #faad14; } .has-warning .ant-input-number, .has-warning .ant-time-picker-input { border-color: #faad14; } .has-warning .ant-input-number-focused, .has-warning .ant-time-picker-input-focused, .has-warning .ant-input-number:focus, .has-warning .ant-time-picker-input:focus { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-warning .ant-input-number:not([disabled]):hover, .has-warning .ant-time-picker-input:not([disabled]):hover { border-color: #faad14; } .has-warning .ant-cascader-picker:focus .ant-cascader-input { border-color: #ffc53d; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2); } .has-error .ant-form-explain, .has-error .ant-form-split { color: #f5222d; } .has-error .ant-input, .has-error .ant-input:hover { background-color: #fff; border-color: #f5222d; } .has-error .ant-input:focus { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-input:not([disabled]):hover { border-color: #f5222d; } .has-error .ant-calendar-picker-open .ant-calendar-picker-input { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-input-affix-wrapper .ant-input, .has-error .ant-input-affix-wrapper .ant-input:hover { background-color: #fff; border-color: #f5222d; } .has-error .ant-input-affix-wrapper .ant-input:focus { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { border-color: #f5222d; } .has-error .ant-input-prefix { color: #f5222d; } .has-error .ant-input-group-addon { color: #f5222d; background-color: #fff; border-color: #f5222d; } .has-error .has-feedback { color: #f5222d; } .has-error.has-feedback .ant-form-item-children-icon { color: #f5222d; } .has-error .ant-select-selection { border-color: #f5222d; } .has-error .ant-select-selection:hover { border-color: #f5222d; } .has-error .ant-select-open .ant-select-selection, .has-error .ant-select-focused .ant-select-selection { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-select.ant-select-auto-complete .ant-input:focus { border-color: #f5222d; } .has-error .ant-input-group-addon .ant-select-selection { border-color: transparent; box-shadow: none; } .has-error .ant-calendar-picker-icon::after, .has-error .ant-time-picker-icon::after, .has-error .ant-picker-icon::after, .has-error .ant-select-arrow, .has-error .ant-cascader-picker-arrow { color: #f5222d; } .has-error .ant-input-number, .has-error .ant-time-picker-input { border-color: #f5222d; } .has-error .ant-input-number-focused, .has-error .ant-time-picker-input-focused, .has-error .ant-input-number:focus, .has-error .ant-time-picker-input:focus { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-input-number:not([disabled]):hover, .has-error .ant-time-picker-input:not([disabled]):hover { border-color: #f5222d; } .has-error .ant-mention-wrapper .ant-mention-editor, .has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover { border-color: #f5222d; } .has-error .ant-mention-wrapper.ant-mention-active:not([disabled]) .ant-mention-editor, .has-error .ant-mention-wrapper .ant-mention-editor:not([disabled]):focus { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-cascader-picker:focus .ant-cascader-input { border-color: #ff4d4f; border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); } .has-error .ant-transfer-list { border-color: #f5222d; } .has-error .ant-transfer-list-search:not([disabled]) { border-color: #d9d9d9; } .has-error .ant-transfer-list-search:not([disabled]):hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .has-error .ant-transfer-list-search:not([disabled]):focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .is-validating.has-feedback .ant-form-item-children-icon { color: @primary-color; } .ant-input-number { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-input-number::-moz-placeholder { color: #bfbfbf; } .ant-input-number:-ms-input-placeholder { color: #bfbfbf; } .ant-input-number::-webkit-input-placeholder { color: #bfbfbf; } .ant-input-number:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-input-number:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-input-number-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-input-number-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-input-number[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-input-number[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-input-number-handler { color: rgba(0, 0, 0, 0.45); } .ant-input-number-handler:active { background: #f4f4f4; } .ant-input-number-handler:hover .ant-input-number-handler-up-inner, .ant-input-number-handler:hover .ant-input-number-handler-down-inner { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-input-number-handler-up-inner, .ant-input-number-handler-down-inner { color: inherit; color: rgba(0, 0, 0, 0.45); } .ant-input-number:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-input-number-focused { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-input-number-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-input-number-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-input-number-input { background-color: transparent; border: 0; border-radius: 2px; } .ant-input-number-input::-moz-placeholder { color: #bfbfbf; } .ant-input-number-input:-ms-input-placeholder { color: #bfbfbf; } .ant-input-number-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-input-number-handler-wrap { background: #fff; border-left: 1px solid #d9d9d9; border-radius: 0 2px 2px 0; } .ant-input-number-handler-up { border-top-right-radius: 2px; } .ant-input-number-handler-down { border-top: 1px solid #d9d9d9; border-bottom-right-radius: 2px; } .ant-input-number-handler-up-disabled:hover .ant-input-number-handler-up-inner, .ant-input-number-handler-down-disabled:hover .ant-input-number-handler-down-inner { color: rgba(0, 0, 0, 0.25); } .ant-input { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-input::-moz-placeholder { color: #bfbfbf; } .ant-input:-ms-input-placeholder { color: #bfbfbf; } .ant-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-input:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-input:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-input-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-input-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-input-group { color: #000000; border-collapse: separate; border-spacing: 0; } .ant-input-group-addon:not(:first-child):not(:last-child), .ant-input-group-wrap:not(:first-child):not(:last-child), .ant-input-group > .ant-input:not(:first-child):not(:last-child) { border-radius: 0; } .ant-input-group .ant-input:focus { border-right-width: 1px; } .ant-input-group .ant-input:hover { border-right-width: 1px; } .ant-input-group-addon { color: #000000; background-color: @primary-color; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-input-group-addon .ant-select .ant-select-selection { background-color: inherit; border: 1px solid transparent; box-shadow: none; } .ant-input-group-addon .ant-select-open .ant-select-selection, .ant-input-group-addon .ant-select-focused .ant-select-selection { color: @primary-color; } .ant-input-group > .ant-input:first-child, .ant-input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ant-input-group > .ant-input:first-child .ant-select .ant-select-selection, .ant-input-group-addon:first-child .ant-select .ant-select-selection { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ant-input-group > .ant-input-affix-wrapper:not(:first-child) .ant-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ant-input-group > .ant-input-affix-wrapper:not(:last-child) .ant-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ant-input-group-addon:first-child { border-right: 0; } .ant-input-group-addon:last-child { border-left: 0; } .ant-input-group > .ant-input:last-child, .ant-input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ant-input-group > .ant-input:last-child .ant-select .ant-select-selection, .ant-input-group-addon:last-child .ant-select .ant-select-selection { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ant-input-group.ant-input-group-compact-addon:not(:first-child):not(:last-child), .ant-input-group.ant-input-group-compact-wrap:not(:first-child):not(:last-child), .ant-input-group.ant-input-group-compact > .ant-input:not(:first-child):not(:last-child) { border-right-width: 1px; } .ant-input-group.ant-input-group-compact > * { border-radius: 0; } .ant-input-group.ant-input-group-compact > *:not(:last-child) { border-right-width: 1px; } .ant-input-group.ant-input-group-compact > .ant-select > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker .ant-time-picker-input { border-right-width: 1px; border-radius: 0; } .ant-input-group.ant-input-group-compact > *:first-child, .ant-input-group.ant-input-group-compact > .ant-select:first-child > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker:first-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper:first-child .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker:first-child .ant-time-picker-input { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .ant-input-group.ant-input-group-compact > *:last-child, .ant-input-group.ant-input-group-compact > .ant-select:last-child > .ant-select-selection, .ant-input-group.ant-input-group-compact > .ant-calendar-picker:last-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-select-auto-complete:last-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker:last-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-cascader-picker-focused:last-child .ant-input, .ant-input-group.ant-input-group-compact > .ant-mention-wrapper:last-child .ant-mention-editor, .ant-input-group.ant-input-group-compact > .ant-time-picker:last-child .ant-time-picker-input { border-right-width: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .ant-input-affix-wrapper { color: #000000; } .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix { color: #000000; } .ant-input-affix-wrapper .ant-input-disabled ~ .ant-input-suffix .anticon { color: rgba(0, 0, 0, 0.25); } .ant-input-password-icon { color: rgba(0, 0, 0, 0.45); } .ant-input-password-icon:hover { color: #333; } .ant-input-clear-icon { color: rgba(0, 0, 0, 0.25); } .ant-input-clear-icon:hover { color: rgba(0, 0, 0, 0.45); } .ant-input-clear-icon:active { color: #000000; } .ant-input-search-icon { color: rgba(0, 0, 0, 0.45); } .ant-input-search-icon:hover { color: rgba(0, 0, 0, 0.8); } .ant-input-search-enter-button input { border-right: 0; } .ant-input-search-enter-button + .ant-input-group-addon, .ant-input-search-enter-button input + .ant-input-group-addon { border: 0; } .ant-input-search-enter-button + .ant-input-group-addon .ant-input-search-button, .ant-input-search-enter-button input + .ant-input-group-addon .ant-input-search-button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ant-layout { background: #f0f2f5; } .ant-layout-header { background: @primary-color; } .ant-layout-footer { color: #000000; background: #f0f2f5; } .ant-layout-sider { background: @primary-color; } .ant-layout-sider-trigger { color: #fff; background: #002140; } .ant-layout-sider-zero-width-trigger { color: #fff; background: @primary-color; border-radius: 0 2px 2px 0; } .ant-layout-sider-zero-width-trigger:hover { background: #464a64; } .ant-layout-sider-zero-width-trigger-right { border-radius: 2px 0 0 2px; } .ant-layout-sider-light { background: #f9f9f9; } .ant-layout-sider-light .ant-layout-sider-trigger { color: #000000; background: #fff; } .ant-layout-sider-light .ant-layout-sider-zero-width-trigger { color: #000000; background: #fff; } .ant-list { color: #000000; } .ant-list-empty-text { color: rgba(0, 0, 0, 0.25); } .ant-list-item-content { color: #000000; } .ant-list-item-meta-title { color: #000000; } .ant-list-item-meta-title > a { color: #000000; } .ant-list-item-meta-title > a:hover { color: @primary-color; } .ant-list-item-meta-description { color: rgba(0, 0, 0, 0.45); } .ant-list-item-action > li { color: rgba(0, 0, 0, 0.45); } .ant-list-item-action-split { background-color: #e8e8e8; } .ant-list-header { background: transparent; } .ant-list-footer { background: transparent; } .ant-list-empty { color: rgba(0, 0, 0, 0.45); } .ant-list-split .ant-list-item { border-bottom: 1px solid #e8e8e8; } .ant-list-split .ant-list-item:last-child { border-bottom: none; } .ant-list-split .ant-list-header { border-bottom: 1px solid #e8e8e8; } .ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child { border-bottom: 1px solid #e8e8e8; } .ant-list-vertical .ant-list-item-meta-title { color: rgba(0, 0, 0, 0.85); } .ant-list-grid .ant-col > .ant-list-item { border-bottom: none; } .ant-list-bordered { border: 1px solid #d9d9d9; border-radius: 2px; } .ant-list-bordered .ant-list-item { border-bottom: 1px solid #e8e8e8; } .ant-mentions-wrapper { color: #000000; } .ant-mentions-wrapper .ant-mentions-editor { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-mentions-wrapper .ant-mentions-editor::-moz-placeholder { color: #bfbfbf; } .ant-mentions-wrapper .ant-mentions-editor:-ms-input-placeholder { color: #bfbfbf; } .ant-mentions-wrapper .ant-mentions-editor::-webkit-input-placeholder { color: #bfbfbf; } .ant-mentions-wrapper .ant-mentions-editor:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-mentions-wrapper .ant-mentions-editor:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-mentions-wrapper .ant-mentions-editor-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions-wrapper .ant-mentions-editor-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions-wrapper .ant-mentions-editor[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions-wrapper .ant-mentions-editor[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions-wrapper.ant-mentions-active:not(.disabled) .ant-mentions-editor { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-mentions-wrapper.disabled .ant-mentions-editor { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions-wrapper.disabled .ant-mentions-editor:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions-wrapper .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner { color: #bfbfbf; } .ant-mentions-dropdown { color: #000000; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-mentions-dropdown-notfound.ant-mentions-dropdown-item { color: rgba(0, 0, 0, 0.25); } .ant-mentions-dropdown-notfound.ant-mentions-dropdown-item .anticon-loading { color: @primary-color; } .ant-mentions-dropdown-item { color: #000000; } .ant-mentions-dropdown-item:hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-mentions-dropdown-item.focus, .ant-mentions-dropdown-item-active { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-mentions-dropdown-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-mentions-dropdown-item-disabled:hover { color: rgba(0, 0, 0, 0.25); background-color: #fff; } .ant-mentions-dropdown-item-selected, .ant-mentions-dropdown-item-selected:hover { color: #000000; background-color: #f5f5f5; } .ant-mentions-dropdown-item-divider { background-color: #e8e8e8; } .ant-mentions { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-mentions::-moz-placeholder { color: #bfbfbf; } .ant-mentions:-ms-input-placeholder { color: #bfbfbf; } .ant-mentions::-webkit-input-placeholder { color: #bfbfbf; } .ant-mentions:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-mentions:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-mentions-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions-disabled > textarea { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-mentions-disabled > textarea:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-mentions-focused { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-mentions > textarea { border: none; } .ant-mentions > textarea::-moz-placeholder { color: #bfbfbf; } .ant-mentions > textarea:-ms-input-placeholder { color: #bfbfbf; } .ant-mentions > textarea::-webkit-input-placeholder { color: #bfbfbf; } .ant-mentions-measure { color: transparent; } .ant-mentions-dropdown { color: #000000; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-mentions-dropdown-menu-item { color: #000000; } .ant-mentions-dropdown-menu-item:hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-mentions-dropdown-menu-item:first-child { border-radius: 2px 2px 0 0; } .ant-mentions-dropdown-menu-item:last-child { border-radius: 0 0 2px 2px; } .ant-mentions-dropdown-menu-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-mentions-dropdown-menu-item-disabled:hover { color: rgba(0, 0, 0, 0.25); background-color: #fff; } .ant-mentions-dropdown-menu-item-selected { color: #000000; background-color: #fafafa; } .ant-mentions-dropdown-menu-item-active { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-menu { color: #000000; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-menu-item-group-title { color: rgba(0, 0, 0, 0.45); } .ant-menu-submenu-selected { color: @primary-color; } .ant-menu-item:active, .ant-menu-submenu-title:active { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-menu-item > a { color: #000000; } .ant-menu-item > a:hover { color: @primary-color; } .ant-menu-item > a::before { background-color: transparent; } .ant-menu-item-divider { background-color: #e8e8e8; } .ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover { color: @primary-color; } .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover { background-color: transparent; } .ant-menu-item-selected { color: @primary-color; } .ant-menu-item-selected > a, .ant-menu-item-selected > a:hover { color: @primary-color; } .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left { border-right: 1px solid #e8e8e8; } .ant-menu-vertical-right { border-left: 1px solid #e8e8e8; } .ant-menu-vertical.ant-menu-sub, .ant-menu-vertical-left.ant-menu-sub, .ant-menu-vertical-right.ant-menu-sub { border-right: 0; } .ant-menu-vertical.ant-menu-sub .ant-menu-item, .ant-menu-vertical-left.ant-menu-sub .ant-menu-item, .ant-menu-vertical-right.ant-menu-sub .ant-menu-item { border-right: 0; } .ant-menu-vertical.ant-menu-sub .ant-menu-item::after, .ant-menu-vertical-left.ant-menu-sub .ant-menu-item::after, .ant-menu-vertical-right.ant-menu-sub .ant-menu-item::after { border-right: 0; } .ant-menu > .ant-menu-item-divider { background-color: #e8e8e8; } .ant-menu-submenu-popup { background: #fff; border-radius: 2px; } .ant-menu-submenu > .ant-menu { background-color: #fff; border-radius: 2px; } .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after { background: #fff; background: #000000 ; background-image: linear-gradient(to right, #000000, #000000); background-image: none ; border-radius: 2px; } .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before { background: linear-gradient(to right, #313653, #313653); } .ant-menu-vertical .ant-menu-submenu-selected, .ant-menu-vertical-left .ant-menu-submenu-selected, .ant-menu-vertical-right .ant-menu-submenu-selected { color: @primary-color; } .ant-menu-vertical .ant-menu-submenu-selected > a, .ant-menu-vertical-left .ant-menu-submenu-selected > a, .ant-menu-vertical-right .ant-menu-submenu-selected > a { color: @primary-color; } .ant-menu-horizontal { border: 0; border-bottom: 1px solid #e8e8e8; box-shadow: none; } .ant-menu-horizontal > .ant-menu-item, .ant-menu-horizontal > .ant-menu-submenu { border-bottom: 2px solid transparent; } .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover, .ant-menu-horizontal > .ant-menu-item-active, .ant-menu-horizontal > .ant-menu-submenu-active, .ant-menu-horizontal > .ant-menu-item-open, .ant-menu-horizontal > .ant-menu-submenu-open, .ant-menu-horizontal > .ant-menu-item-selected, .ant-menu-horizontal > .ant-menu-submenu-selected { color: @primary-color; border-bottom: 2px solid @primary-color; } .ant-menu-horizontal > .ant-menu-item > a { color: #000000; } .ant-menu-horizontal > .ant-menu-item > a:hover { color: @primary-color; } .ant-menu-horizontal > .ant-menu-item-selected > a { color: @primary-color; } .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after { border-right: 3px solid @primary-color; } .ant-menu-inline-collapsed-tooltip a { color: rgba(255, 255, 255, 0.85); } .ant-menu-root.ant-menu-vertical, .ant-menu-root.ant-menu-vertical-left, .ant-menu-root.ant-menu-vertical-right, .ant-menu-root.ant-menu-inline { box-shadow: none; } .ant-menu-sub.ant-menu-inline { border: 0; border-radius: 0; box-shadow: none; } .ant-menu-item-disabled, .ant-menu-submenu-disabled { color: rgba(0, 0, 0, 0.25) !important; background: none; border-color: transparent !important; } .ant-menu-item-disabled > a, .ant-menu-submenu-disabled > a { color: rgba(0, 0, 0, 0.25) !important; } .ant-menu-item-disabled > .ant-menu-submenu-title, .ant-menu-submenu-disabled > .ant-menu-submenu-title { color: rgba(0, 0, 0, 0.25) !important; } .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after { background: rgba(0, 0, 0, 0.25) !important; } .ant-menu-dark, .ant-menu-dark .ant-menu-sub { color: rgba(255, 255, 255, 0.65); background: @primary-color; } .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow::before { background: #fff; } .ant-menu-dark.ant-menu-submenu-popup { background: transparent; } .ant-menu-dark .ant-menu-inline.ant-menu-sub { background: #000c17; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset; } .ant-menu-dark.ant-menu-horizontal { border-bottom: 0; } .ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { border-color: @primary-color; border-bottom: 0; } .ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-item-group-title, .ant-menu-dark .ant-menu-item > a { color: rgba(255, 255, 255, 0.65); } .ant-menu-dark.ant-menu-inline, .ant-menu-dark.ant-menu-vertical, .ant-menu-dark.ant-menu-vertical-left, .ant-menu-dark.ant-menu-vertical-right { border-right: 0; } .ant-menu-dark.ant-menu-inline .ant-menu-item, .ant-menu-dark.ant-menu-vertical .ant-menu-item, .ant-menu-dark.ant-menu-vertical-left .ant-menu-item, .ant-menu-dark.ant-menu-vertical-right .ant-menu-item { border-right: 0; } .ant-menu-dark.ant-menu-inline .ant-menu-item::after, .ant-menu-dark.ant-menu-vertical .ant-menu-item::after, .ant-menu-dark.ant-menu-vertical-left .ant-menu-item::after, .ant-menu-dark.ant-menu-vertical-right .ant-menu-item::after { border-right: 0; } .ant-menu-dark .ant-menu-item:hover, .ant-menu-dark .ant-menu-item-active, .ant-menu-dark .ant-menu-submenu-active, .ant-menu-dark .ant-menu-submenu-open, .ant-menu-dark .ant-menu-submenu-selected, .ant-menu-dark .ant-menu-submenu-title:hover { color: #fff; background-color: transparent; } .ant-menu-dark .ant-menu-item:hover > a, .ant-menu-dark .ant-menu-item-active > a, .ant-menu-dark .ant-menu-submenu-active > a, .ant-menu-dark .ant-menu-submenu-open > a, .ant-menu-dark .ant-menu-submenu-selected > a, .ant-menu-dark .ant-menu-submenu-title:hover > a { color: #fff; } .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow::before { background: #fff; } .ant-menu-dark .ant-menu-item:hover { background-color: transparent; } .ant-menu-dark .ant-menu-item-selected { color: #fff; border-right: 0; } .ant-menu-dark .ant-menu-item-selected::after { border-right: 0; } .ant-menu-dark .ant-menu-item-selected > a, .ant-menu-dark .ant-menu-item-selected > a:hover { color: #fff; } .ant-menu-dark .ant-menu-item-selected .anticon { color: #ffffff; } .ant-menu-dark .ant-menu-item-selected .anticon + span { color: #ffffff; } .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { background-color: @primary-color; } .ant-menu-dark .ant-menu-item-disabled, .ant-menu-dark .ant-menu-submenu-disabled, .ant-menu-dark .ant-menu-item-disabled > a, .ant-menu-dark .ant-menu-submenu-disabled > a { color: rgba(255, 255, 255, 0.35) !important; } .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title, .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title { color: rgba(255, 255, 255, 0.35) !important; } .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::before, .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after, .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow::after { background: rgba(255, 255, 255, 0.35) !important; } .ant-message { color: #000000; } .ant-message-notice-content { background: #fff; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ant-message-success .anticon { color: #52c41a; } .ant-message-error .anticon { color: #f5222d; } .ant-message-warning .anticon { color: #faad14; } .ant-message-info .anticon, .ant-message-loading .anticon { color: #1890ff; } .ant-modal { color: #000000; } .ant-modal-title { color: rgba(0, 0, 0, 0.85); } .ant-modal-content { background-color: #fff; background-clip: padding-box; border: 0; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ant-modal-close { color: rgba(0, 0, 0, 0.45); background: transparent; border: 0; } .ant-modal-close:focus, .ant-modal-close:hover { color: rgba(0, 0, 0, 0.75); } .ant-modal-header { color: #000000; background: #fff; border-bottom: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-modal-footer { background: transparent; border-top: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-modal-mask { background-color: rgba(0, 0, 0, 0.45); } .ant-modal-confirm-body .ant-modal-confirm-title { color: rgba(0, 0, 0, 0.85); } .ant-modal-confirm-body .ant-modal-confirm-content { color: #000000; } .ant-modal-confirm-error .ant-modal-confirm-body > .anticon { color: #f5222d; } .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon, .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon { color: #faad14; } .ant-modal-confirm-info .ant-modal-confirm-body > .anticon { color: #1890ff; } .ant-modal-confirm-success .ant-modal-confirm-body > .anticon { color: #52c41a; } .ant-notification { color: #000000; } .ant-notification-notice { background: #fff; border-radius: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .ant-notification-notice-message { color: rgba(0, 0, 0, 0.85); } .ant-notification-notice-message-single-line-auto-margin { background-color: transparent; } .anticon.ant-notification-notice-icon-success { color: #52c41a; } .anticon.ant-notification-notice-icon-info { color: #1890ff; } .anticon.ant-notification-notice-icon-warning { color: #faad14; } .anticon.ant-notification-notice-icon-error { color: #f5222d; } .ant-notification-notice-close { color: rgba(0, 0, 0, 0.45); } .ant-notification-notice-close:hover { color: rgba(0, 0, 0, 0.67); } .ant-page-header { color: #000000; } .ant-page-header-back-button { color: @primary-color; color: #000; } .ant-page-header-back-button:focus, .ant-page-header-back-button:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-page-header-back-button:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-page-header-heading-title { color: rgba(0, 0, 0, 0.85); } .ant-page-header-heading-sub-title { color: rgba(0, 0, 0, 0.45); } .ant-page-header-footer .ant-tabs-bar { border-bottom: 0; } .ant-pagination { color: #000000; } .ant-pagination-item { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-pagination-item a { color: #000000; } .ant-pagination-item:focus, .ant-pagination-item:hover { border-color: @primary-color; } .ant-pagination-item:focus a, .ant-pagination-item:hover a { color: @primary-color; } .ant-pagination-item-active { background: #fff; border-color: @primary-color; } .ant-pagination-item-active a { color: @primary-color; } .ant-pagination-item-active:focus, .ant-pagination-item-active:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon, .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon { color: @primary-color; } .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis, .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis { color: rgba(0, 0, 0, 0.25); } .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next { color: #000000; border-radius: 2px; } .ant-pagination-prev a, .ant-pagination-next a { color: #000000; } .ant-pagination-prev:hover a, .ant-pagination-next:hover a { border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-pagination-prev:focus .ant-pagination-item-link, .ant-pagination-next:focus .ant-pagination-item-link, .ant-pagination-prev:hover .ant-pagination-item-link, .ant-pagination-next:hover .ant-pagination-item-link { color: @primary-color; border-color: @primary-color; } .ant-pagination-disabled a, .ant-pagination-disabled:hover a, .ant-pagination-disabled:focus a, .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-disabled:focus .ant-pagination-item-link { color: rgba(0, 0, 0, 0.25); border-color: #d9d9d9; } .ant-pagination-options-quick-jumper input { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-pagination-options-quick-jumper input::-moz-placeholder { color: #bfbfbf; } .ant-pagination-options-quick-jumper input:-ms-input-placeholder { color: #bfbfbf; } .ant-pagination-options-quick-jumper input::-webkit-input-placeholder { color: #bfbfbf; } .ant-pagination-options-quick-jumper input:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-pagination-options-quick-jumper input:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-pagination-options-quick-jumper input-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-pagination-options-quick-jumper input-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-pagination-options-quick-jumper input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-pagination-options-quick-jumper input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-simple .ant-pagination-next .ant-pagination-item-link { border: 0; } .ant-pagination-simple .ant-pagination-simple-pager input { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-pagination-simple .ant-pagination-simple-pager input:hover { border-color: @primary-color; } .ant-pagination.mini .ant-pagination-item:not(.ant-pagination-item-active) { background: transparent; border-color: transparent; } .ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link, .ant-pagination.mini .ant-pagination-next .ant-pagination-item-link { background: transparent; border-color: transparent; } .ant-pagination.ant-pagination-disabled .ant-pagination-item { background: #f5f5f5; border-color: #d9d9d9; } .ant-pagination.ant-pagination-disabled .ant-pagination-item a { color: rgba(0, 0, 0, 0.25); background: transparent; border: none; } .ant-pagination.ant-pagination-disabled .ant-pagination-item-active { background: #dbdbdb; border-color: transparent; } .ant-pagination.ant-pagination-disabled .ant-pagination-item-active a { color: #fff; } .ant-pagination.ant-pagination-disabled .ant-pagination-item-link, .ant-pagination.ant-pagination-disabled .ant-pagination-item-link:hover, .ant-pagination.ant-pagination-disabled .ant-pagination-item-link:focus { color: rgba(0, 0, 0, 0.45); background: #f5f5f5; border-color: #d9d9d9; } .ant-popover { color: #000000; } .ant-popover::after { background: rgba(255, 255, 255, 0.01); } .ant-popover-inner { background-color: #fff; background-clip: padding-box; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) ; } .ant-popover-title { color: rgba(0, 0, 0, 0.85); border-bottom: 1px solid #e8e8e8; } .ant-popover-inner-content { color: #000000; } .ant-popover-message { color: #000000; } .ant-popover-message > .anticon { color: #faad14; } .ant-popover-arrow { background: transparent; border-style: solid; border-width: 4.24264069px; } .ant-popover-placement-top > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow { border-top-color: transparent; border-right-color: #fff; border-bottom-color: #fff; border-left-color: transparent; box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); } .ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #fff; border-left-color: #fff; box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); } .ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow { border-top-color: #fff; border-right-color: transparent; border-bottom-color: transparent; border-left-color: #fff; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); } .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow, .ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow { border-top-color: #fff; border-right-color: #fff; border-bottom-color: transparent; border-left-color: transparent; box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); } .ant-progress { color: #000000; } .ant-progress-inner { background-color: #f5f5f5; border-radius: 100px; } .ant-progress-success-bg, .ant-progress-bg { background-color: #1890ff; border-radius: 100px; } .ant-progress-success-bg { background-color: #52c41a; } .ant-progress-text { color: rgba(0, 0, 0, 0.45); } .ant-progress-status-active .ant-progress-bg::before { background: #fff; border-radius: 10px; } .ant-progress-status-exception .ant-progress-bg { background-color: #f5222d; } .ant-progress-status-exception .ant-progress-text { color: #f5222d; } .ant-progress-status-success .ant-progress-bg { background-color: #52c41a; } .ant-progress-status-success .ant-progress-text { color: #52c41a; } .ant-progress-circle .ant-progress-inner { background-color: transparent; } .ant-progress-circle .ant-progress-text { color: #000000; } .ant-progress-circle.ant-progress-status-exception .ant-progress-text { color: #f5222d; } .ant-progress-circle.ant-progress-status-success .ant-progress-text { color: #52c41a; } .ant-radio-group { color: #000000; } .ant-radio-wrapper { color: #000000; } .ant-radio { color: #000000; } .ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner { border-color: @primary-color; } .ant-radio-input:focus + .ant-radio-inner { box-shadow: 0 0 0 3px rgba(49, 54, 83, 0.08); } .ant-radio-checked::after { border: 1px solid @primary-color; border-radius: 50%; } .ant-radio-inner { background-color: #fff; border-color: #d9d9d9; border-style: solid; border-width: 1px; border-radius: 100px; } .ant-radio-inner::after { background-color: @primary-color; border-top: 0; border-left: 0; border-radius: 8px; } .ant-radio-checked .ant-radio-inner { border-color: @primary-color; } .ant-radio-disabled .ant-radio-inner { background-color: #f5f5f5; border-color: #d9d9d9 !important; } .ant-radio-disabled .ant-radio-inner::after { background-color: rgba(0, 0, 0, 0.2); } .ant-radio-disabled + span { color: rgba(0, 0, 0, 0.25); } .ant-radio-button-wrapper { color: #000000; background: #fff; border: 1px solid #d9d9d9; border-top-width: 1.02px; border-left: 0; } .ant-radio-button-wrapper a { color: #000000; } .ant-radio-button-wrapper:not(:first-child)::before { background-color: #d9d9d9; } .ant-radio-button-wrapper:first-child { border-left: 1px solid #d9d9d9; border-radius: 2px 0 0 2px; } .ant-radio-button-wrapper:last-child { border-radius: 0 2px 2px 0; } .ant-radio-button-wrapper:first-child:last-child { border-radius: 2px; } .ant-radio-button-wrapper:hover { color: @primary-color; } .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { color: @primary-color; background: #fff; border-color: @primary-color; box-shadow: -1px 0 0 0 @primary-color; } .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before { background-color: #313653 !important; } .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child { border-color: @primary-color; box-shadow: none !important; } .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { color: color(~`colorPalette("@{primary-color}", 5)`); border-color: color(~`colorPalette("@{primary-color}", 5)`); box-shadow: -1px 0 0 0 color(~`colorPalette("@{primary-color}", 5)`); } .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active { color: color(~`colorPalette("@{primary-color}", 7)`); border-color: color(~`colorPalette("@{primary-color}", 7)`); box-shadow: -1px 0 0 0 color(~`colorPalette("@{primary-color}", 7)`); } .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { color: #fff; background: @primary-color; border-color: @primary-color; } .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { color: #fff; background: color(~`colorPalette("@{primary-color}", 5)`); border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active { color: #fff; background: color(~`colorPalette("@{primary-color}", 7)`); border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-radio-button-wrapper-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; } .ant-radio-button-wrapper-disabled:first-child, .ant-radio-button-wrapper-disabled:hover { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; border-color: #d9d9d9; } .ant-radio-button-wrapper-disabled:first-child { border-left-color: #d9d9d9; } .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked { color: #ffffff; background-color: #e6e6e6; border-color: #d9d9d9; box-shadow: none; } .ant-rate { color: #000000; color: #fadb14; } .ant-rate-star { color: inherit; } .ant-rate-star-first, .ant-rate-star-second { color: #e8e8e8; } .ant-rate-star-half .ant-rate-star-first, .ant-rate-star-full .ant-rate-star-second { color: inherit; } .ant-result-success .ant-result-icon > .anticon { color: #52c41a; } .ant-result-error .ant-result-icon > .anticon { color: #f5222d; } .ant-result-info .ant-result-icon > .anticon { color: #1890ff; } .ant-result-warning .ant-result-icon > .anticon { color: #faad14; } .ant-result-title { color: rgba(0, 0, 0, 0.85); } .ant-result-subtitle { color: rgba(0, 0, 0, 0.45); } .ant-result-content { background-color: #fafafa; } .ant-select { color: #000000; } .ant-select > ul > li > a { background-color: #fff; } .ant-select-arrow { color: inherit; color: rgba(0, 0, 0, 0.25); } .ant-select-selection { background-color: #fff; border: 1px solid #d9d9d9; border-top-width: 1.02px; border-radius: 2px; } .ant-select-selection:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-select-selection__clear { color: rgba(0, 0, 0, 0.25); background: #fff; } .ant-select-selection__clear:hover { color: rgba(0, 0, 0, 0.45); } .ant-select-disabled { color: rgba(0, 0, 0, 0.25); } .ant-select-disabled .ant-select-selection { background: #f5f5f5; } .ant-select-disabled .ant-select-selection:hover, .ant-select-disabled .ant-select-selection:focus, .ant-select-disabled .ant-select-selection:active { border-color: #d9d9d9; box-shadow: none; } .ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice { color: rgba(0, 0, 0, 0.33); background: #f5f5f5; } .ant-select-disabled .ant-select-selection__choice__remove { color: rgba(0, 0, 0, 0.25); } .ant-select-disabled .ant-select-selection__choice__remove:hover { color: rgba(0, 0, 0, 0.25); } .ant-select-selection__placeholder, .ant-select-search__field__placeholder { color: #bfbfbf; } .ant-select-search--inline .ant-select-search__field { background: transparent; border-width: 0; border-radius: 2px; } .ant-select-selection--multiple .ant-select-selection__choice { color: #000000; background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 2px; } .ant-select-selection--multiple .ant-select-selection__choice__remove { color: inherit; color: rgba(0, 0, 0, 0.45); } .ant-select-selection--multiple .ant-select-selection__choice__remove:hover { color: rgba(0, 0, 0, 0.75); } .ant-select-open .ant-select-selection { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-select-combobox .ant-select-search__field { box-shadow: none; } .ant-select-dropdown { color: #000000; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-select-dropdown-menu-item-group-title { color: rgba(0, 0, 0, 0.45); } .ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:first-child:not(:last-child), .ant-select-dropdown-menu-item-group:not(:last-child) .ant-select-dropdown-menu-item-group-list .ant-select-dropdown-menu-item:last-child { border-radius: 0; } .ant-select-dropdown-menu-item { color: #000000; } .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-select-dropdown-menu-item:first-child { border-radius: 2px 2px 0 0; } .ant-select-dropdown-menu-item:last-child { border-radius: 0 0 2px 2px; } .ant-select-dropdown-menu-item-selected { color: #000000; background-color: #fafafa; } .ant-select-dropdown-menu-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-select-dropdown-menu-item-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-select-dropdown-menu-item-divider { background-color: #e8e8e8; } .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item .ant-select-selected-icon { color: transparent; } .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon { color: rgba(0, 0, 0, 0.87); } .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon, .ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected:hover .ant-select-selected-icon { color: @primary-color; } .ant-skeleton-header .ant-skeleton-avatar { background: #f2f2f2; } .ant-skeleton-header .ant-skeleton-avatar.ant-skeleton-avatar-circle { border-radius: 50%; } .ant-skeleton-header .ant-skeleton-avatar-lg.ant-skeleton-avatar-circle { border-radius: 50%; } .ant-skeleton-header .ant-skeleton-avatar-sm.ant-skeleton-avatar-circle { border-radius: 50%; } .ant-skeleton-content .ant-skeleton-title { background: #f2f2f2; } .ant-skeleton-content .ant-skeleton-paragraph > li { background: #f2f2f2; } .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-title, .ant-skeleton.ant-skeleton-active .ant-skeleton-content .ant-skeleton-paragraph > li { background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); background-size: 400% 100%; } .ant-skeleton.ant-skeleton-active .ant-skeleton-avatar { background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); background-size: 400% 100%; } .ant-slider { color: #000000; } .ant-slider-rail { background-color: #f5f5f5; border-radius: 2px; } .ant-slider-track { background-color: color(~`colorPalette("@{primary-color}", 3)`); border-radius: 2px; } .ant-slider-handle { background-color: #fff; border: solid 2px color(~`colorPalette("@{primary-color}", 3)`); border-radius: 50%; box-shadow: 0; } .ant-slider-handle:focus { border-color: #5a5e75; box-shadow: 0 0 0 5px rgba(49, 54, 83, 0.2); } .ant-slider-handle.ant-tooltip-open { border-color: @primary-color; } .ant-slider:hover .ant-slider-rail { background-color: #e1e1e1; } .ant-slider:hover .ant-slider-track { background-color: color(~`colorPalette("@{primary-color}", 4)`); } .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) { border-color: color(~`colorPalette("@{primary-color}", 4)`); } .ant-slider-mark-text { color: rgba(0, 0, 0, 0.45); } .ant-slider-mark-text-active { color: #000000; } .ant-slider-step { background: transparent; } .ant-slider-dot { background-color: #fff; border: 2px solid #e8e8e8; border-radius: 50%; } .ant-slider-dot-active { border-color: #989ba9; } .ant-slider-disabled .ant-slider-track { background-color: rgba(0, 0, 0, 0.25) !important; } .ant-slider-disabled .ant-slider-handle, .ant-slider-disabled .ant-slider-dot { background-color: #fff; border-color: rgba(0, 0, 0, 0.25) !important; box-shadow: none; } .ant-spin { color: #000000; color: @primary-color; } .ant-spin-container::after { background: #fff; } .ant-spin-tip { color: rgba(0, 0, 0, 0.45); } .ant-spin-dot-item { background-color: @primary-color; border-radius: 100%; } .ant-statistic { color: #000000; } .ant-statistic-title { color: rgba(0, 0, 0, 0.45); } .ant-statistic-content { color: rgba(0, 0, 0, 0.85); } .ant-steps { color: #000000; } .ant-steps-item-icon { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 32px; } .ant-steps-item-icon > .ant-steps-icon { color: @primary-color; } .ant-steps-item-tail::after { background: #e8e8e8; border-radius: 1px; } .ant-steps-item-title { color: #000000; } .ant-steps-item-title::after { background: #e8e8e8; } .ant-steps-item-subtitle { color: rgba(0, 0, 0, 0.45); } .ant-steps-item-description { color: rgba(0, 0, 0, 0.45); } .ant-steps-item-wait .ant-steps-item-icon { background-color: #fff; border-color: rgba(0, 0, 0, 0.25); } .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon { color: rgba(0, 0, 0, 0.25); } .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { background: rgba(0, 0, 0, 0.25); } .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { color: rgba(0, 0, 0, 0.45); } .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after { background-color: #e8e8e8; } .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description { color: rgba(0, 0, 0, 0.45); } .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: #e8e8e8; } .ant-steps-item-process .ant-steps-item-icon { background-color: #fff; border-color: @primary-color; } .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { color: @primary-color; } .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { background: @primary-color; } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { color: rgba(0, 0, 0, 0.85); } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after { background-color: #e8e8e8; } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description { color: #000000; } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: #e8e8e8; } .ant-steps-item-process .ant-steps-item-icon { background: @primary-color; } .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { color: #ffffff; } .ant-steps-item-finish .ant-steps-item-icon { background-color: #fff; border-color: @primary-color; } .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { color: @primary-color; } .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { background: @primary-color; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { color: #000000; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after { background-color: @primary-color; } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description { color: rgba(0, 0, 0, 0.45); } .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: @primary-color; } .ant-steps-item-error .ant-steps-item-icon { background-color: #fff; border-color: #f5222d; } .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon { color: #f5222d; } .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { background: #f5222d; } .ant-steps-item-error > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title { color: #f5222d; } .ant-steps-item-error > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after { background-color: #e8e8e8; } .ant-steps-item-error > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description { color: #f5222d; } .ant-steps-item-error > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: #e8e8e8; } .ant-steps-item.ant-steps-next-error .ant-steps-item-title::after { background: #f5222d; } .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-title, .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-subtitle, .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-description { color: @primary-color; } .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon { border-color: @primary-color; } .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon .ant-steps-icon { color: @primary-color; } .ant-steps-item-custom .ant-steps-item-icon { background: none; border: 0; } .ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { color: @primary-color; } .ant-steps-small .ant-steps-item-icon { border-radius: 24px; } .ant-steps-small .ant-steps-item-description { color: rgba(0, 0, 0, 0.45); } .ant-steps-small .ant-steps-item-custom .ant-steps-item-icon { background: none; border: 0; border-radius: 0; } .ant-steps-dot .ant-steps-item-icon, .ant-steps-dot.ant-steps-small .ant-steps-item-icon { background: transparent; border: 0; } .ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot, .ant-steps-dot.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot { border-radius: 100px; } .ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot::after, .ant-steps-dot.ant-steps-small .ant-steps-item-icon .ant-steps-icon-dot::after { background: rgba(0, 0, 0, 0.001); } .ant-steps-navigation .ant-steps-item::after { border: 1px solid rgba(0, 0, 0, 0.25); border-bottom: none; border-left: none; } .ant-steps-navigation .ant-steps-item::before { background-color: @primary-color; } .ant-steps-flex-not-supported.ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item { background: #fff; } .ant-steps-flex-not-supported.ant-steps-dot .ant-steps-item .ant-steps-icon-dot::before, .ant-steps-flex-not-supported.ant-steps-dot .ant-steps-item .ant-steps-icon-dot::after { background: #fff; } .ant-steps-flex-not-supported.ant-steps-dot .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { background: #ccc; } .ant-switch { color: #000000; background-color: rgba(0, 0, 0, 0.25); border: 1px solid transparent; border-radius: 100px; } .ant-switch-inner { color: #ffffff; } .ant-switch-loading-icon, .ant-switch::after { background-color: #fff; border-radius: 18px; } .ant-switch::after { box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2); } .ant-switch-loading-icon { background: transparent; } .ant-switch-loading .ant-switch-loading-icon { color: #000000; } .ant-switch-checked.ant-switch-loading .ant-switch-loading-icon { color: @primary-color; } .ant-switch:focus { box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-switch:focus:hover { box-shadow: none; } .ant-switch-checked { background-color: @primary-color; } .ant-table { color: #000000; } .ant-table table { border-radius: 2px 2px 0 0; border-collapse: separate; border-spacing: 0; } .ant-table-thead > tr > th { color: rgba(0, 0, 0, 0.85); background: #fafafa; border-bottom: 1px solid #e8e8e8; } .ant-table-thead > tr > th .anticon-filter, .ant-table-thead > tr > th .ant-table-filter-icon { color: #bfbfbf; } .ant-table-thead > tr > th .ant-table-filter-selected.anticon-filter { color: @primary-color; } .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner { color: #bfbfbf; } .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-up.on, .ant-table-thead > tr > th .ant-table-column-sorter .ant-table-column-sorter-inner .ant-table-column-sorter-down.on { color: @primary-color; } .ant-table-thead > tr > th.ant-table-column-has-actions { background-clip: padding-box; -webkit-background-clip: border-box; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .anticon-filter.ant-table-filter-open, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .ant-table-filter-icon.ant-table-filter-open { color: rgba(0, 0, 0, 0.45); background: #e5e5e5; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .anticon-filter:hover, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .ant-table-filter-icon:hover { color: rgba(0, 0, 0, 0.45); background: #e5e5e5; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .anticon-filter:active, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .ant-table-filter-icon:active { color: #000000; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover { background: #f2f2f2; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .anticon-filter, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover .ant-table-filter-icon { background: #f2f2f2; } .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:active .ant-table-column-sorter-up:not(.on), .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:active .ant-table-column-sorter-down:not(.on) { color: rgba(0, 0, 0, 0.45); } .ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters::before { background: transparent; } .ant-table-thead > tr > th .ant-table-header-column .ant-table-column-sorters:hover::before { background: rgba(0, 0, 0, 0.04); } .ant-table-thead > tr:first-child > th:first-child { border-top-left-radius: 2px; } .ant-table-thead > tr:first-child > th:last-child { border-top-right-radius: 2px; } .ant-table-thead > tr:not(:last-child) > th[colspan] { border-bottom: 0; } .ant-table-tbody > tr > td { border-bottom: 1px solid #e8e8e8; } .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-table-thead > tr.ant-table-row-selected > td.ant-table-column-sort, .ant-table-tbody > tr.ant-table-row-selected > td.ant-table-column-sort { background: #fbfbfb; } .ant-table-thead > tr:hover.ant-table-row-selected > td, .ant-table-tbody > tr:hover.ant-table-row-selected > td { background: #fbfbfb; } .ant-table-thead > tr:hover.ant-table-row-selected > td.ant-table-column-sort, .ant-table-tbody > tr:hover.ant-table-row-selected > td.ant-table-column-sort { background: #fbfbfb; } .ant-table-thead > tr:hover { background: none; } .ant-table-footer { color: rgba(0, 0, 0, 0.85); background: #fafafa; border-top: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-table-footer::before { background: #fafafa; } .ant-table.ant-table-bordered .ant-table-footer { border: 1px solid #e8e8e8; } .ant-table-title { border-radius: 2px 2px 0 0; } .ant-table.ant-table-bordered .ant-table-title { border: 1px solid #e8e8e8; } .ant-table-title + .ant-table-content { border-radius: 2px 2px 0 0; } .ant-table-bordered .ant-table-title + .ant-table-content, .ant-table-bordered .ant-table-title + .ant-table-content table, .ant-table-bordered .ant-table-title + .ant-table-content .ant-table-thead > tr:first-child > th { border-radius: 0; } .ant-table-without-column-header .ant-table-title + .ant-table-content, .ant-table-without-column-header table { border-radius: 0; } .ant-table-without-column-header.ant-table-bordered.ant-table-empty .ant-table-placeholder { border-top: 1px solid #e8e8e8; border-radius: 2px; } .ant-table-tbody > tr.ant-table-row-selected td { color: inherit; background: #fbfbfb; } .ant-table-thead > tr > th.ant-table-column-sort { background: #f5f5f5; } .ant-table-tbody > tr > td.ant-table-column-sort { background: rgba(0, 0, 0, 0.01); } .ant-table-header { background: #fafafa; } .ant-table-header table { border-radius: 2px 2px 0 0; } .ant-table-loading .ant-table-body { background: #fff; } .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, .ant-table-bordered .ant-table-fixed-left table, .ant-table-bordered .ant-table-fixed-right table { border: 1px solid #e8e8e8; border-right: 0; border-bottom: 0; } .ant-table-bordered.ant-table-empty .ant-table-placeholder { border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; } .ant-table-bordered.ant-table-fixed-header .ant-table-header > table { border-bottom: 0; } .ant-table-bordered.ant-table-fixed-header .ant-table-body > table { border-top-left-radius: 0; border-top-right-radius: 0; } .ant-table-bordered.ant-table-fixed-header .ant-table-header + .ant-table-body > table, .ant-table-bordered.ant-table-fixed-header .ant-table-body-inner > table { border-top: 0; } .ant-table-bordered .ant-table-thead > tr:not(:last-child) > th { border-bottom: 1px solid #e8e8e8; } .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td { border-right: 1px solid #e8e8e8; } .ant-table-placeholder { color: rgba(0, 0, 0, 0.25); background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-table-filter-dropdown { background: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-table-filter-dropdown .ant-dropdown-menu { border: 0; border-radius: 2px 2px 0 0; box-shadow: none; } .ant-table-filter-dropdown .ant-dropdown-menu-sub { border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-table-filter-dropdown .ant-dropdown-menu .ant-dropdown-submenu-contain-selected .ant-dropdown-menu-submenu-title::after { color: @primary-color; } .ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child, .ant-table-filter-dropdown > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title { border-radius: 0; } .ant-table-filter-dropdown-btns { border-top: 1px solid #e8e8e8; } .ant-table-filter-dropdown-link { color: @primary-color; } .ant-table-filter-dropdown-link:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-table-filter-dropdown-link:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-table-selection .anticon-down { color: #bfbfbf; } .ant-table-selection-menu { background: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-table-selection-menu .ant-action-down { color: #bfbfbf; } .ant-table-selection-down:hover .anticon-down { color: rgba(0, 0, 0, 0.6); } .ant-table-row-expand-icon { color: @primary-color; color: inherit; background: #fff; border: 1px solid #e8e8e8; border-radius: 2px; } .ant-table-row-expand-icon:focus, .ant-table-row-expand-icon:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-table-row-expand-icon:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-table-row-expand-icon:focus, .ant-table-row-expand-icon:hover, .ant-table-row-expand-icon:active { border-color: currentColor; } tr.ant-table-expanded-row, tr.ant-table-expanded-row:hover { background: #fbfbfb; } .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body { background: #fff; } .ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar { border: 1px solid #e8e8e8; border-width: 0 0 1px 0; } .ant-table-hide-scrollbar { scrollbar-color: transparent transparent; } .ant-table-hide-scrollbar::-webkit-scrollbar { background-color: transparent; } .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header::-webkit-scrollbar { border: 1px solid #e8e8e8; border-width: 1px 1px 1px 0; } .ant-table-bordered.ant-table-fixed-header .ant-table-scroll .ant-table-header.ant-table-hide-scrollbar .ant-table-thead > tr:only-child > th:last-child { border-right-color: transparent; } .ant-table-fixed-left, .ant-table-fixed-right { border-radius: 0; } .ant-table-fixed-left table, .ant-table-fixed-right table { background: #fff; } .ant-table-fixed-header .ant-table-fixed-left .ant-table-body-outer .ant-table-fixed, .ant-table-fixed-header .ant-table-fixed-right .ant-table-body-outer .ant-table-fixed { border-radius: 0; } .ant-table-fixed-left { box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); } .ant-table-fixed-left, .ant-table-fixed-left table { border-radius: 2px 0 0 0; } .ant-table-fixed-left .ant-table-thead > tr > th:last-child { border-top-right-radius: 0; } .ant-table-fixed-right { box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); } .ant-table-fixed-right, .ant-table-fixed-right table { border-radius: 0 2px 0 0; } .ant-table-fixed-right .ant-table-expanded-row { color: transparent; } .ant-table-fixed-right .ant-table-thead > tr > th:first-child { border-top-left-radius: 0; } .ant-table.ant-table-scroll-position-left .ant-table-fixed-left { box-shadow: none; } .ant-table.ant-table-scroll-position-right .ant-table-fixed-right { box-shadow: none; } .ant-table-small { border: 1px solid #e8e8e8; border-radius: 2px; } .ant-table-small > .ant-table-title { border-bottom: 1px solid #e8e8e8; } .ant-table-small > .ant-table-content > .ant-table-header > table, .ant-table-small > .ant-table-content > .ant-table-body > table, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table { border: 0; } .ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th { background-color: transparent; } .ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr { border-bottom: 1px solid #e8e8e8; } .ant-table-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th.ant-table-column-sort, .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th.ant-table-column-sort { background-color: rgba(0, 0, 0, 0.01); } .ant-table-small > .ant-table-content .ant-table-header { background-color: #fff; } .ant-table-small > .ant-table-content .ant-table-placeholder, .ant-table-small > .ant-table-content .ant-table-row:last-child td { border-bottom: 0; } .ant-table-small.ant-table-bordered { border-right: 0; } .ant-table-small.ant-table-bordered .ant-table-title { border: 0; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } .ant-table-small.ant-table-bordered .ant-table-content { border-right: 1px solid #e8e8e8; } .ant-table-small.ant-table-bordered .ant-table-footer { border: 0; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; } .ant-table-small.ant-table-bordered .ant-table-placeholder { border-right: 0; border-bottom: 0; border-left: 0; } .ant-table-small.ant-table-bordered .ant-table-thead > tr:only-child > th:last-child, .ant-table-small.ant-table-bordered .ant-table-tbody > tr > td:last-child { border-right: none; } .ant-table-small.ant-table-bordered .ant-table-fixed-left .ant-table-thead > tr > th:last-child, .ant-table-small.ant-table-bordered .ant-table-fixed-left .ant-table-tbody > tr > td:last-child { border-right: 1px solid #e8e8e8; } .ant-table-small.ant-table-bordered .ant-table-fixed-right { border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab { background: #fafafa; border: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active { color: @primary-color; background: #fff; border-color: #e8e8e8; border-bottom: 1px solid #fff; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active::before { border-top: 2px solid transparent; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-disabled { color: @primary-color; color: rgba(0, 0, 0, 0.25); } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x { color: rgba(0, 0, 0, 0.45); } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x:hover { color: rgba(0, 0, 0, 0.85); } .ant-tabs-extra-content .ant-tabs-new-tab { color: #000000; border: 1px solid #e8e8e8; border-radius: 2px; } .ant-tabs-extra-content .ant-tabs-new-tab:hover { color: @primary-color; border-color: @primary-color; } .ant-tabs-vertical.ant-tabs-card .ant-tabs-card-bar.ant-tabs-left-bar .ant-tabs-tab, .ant-tabs-vertical.ant-tabs-card .ant-tabs-card-bar.ant-tabs-right-bar .ant-tabs-tab { border-bottom: 1px solid #e8e8e8; } .ant-tabs-vertical.ant-tabs-card.ant-tabs-left .ant-tabs-card-bar.ant-tabs-left-bar .ant-tabs-tab { border-right: 0; border-radius: 2px 0 0 2px; } .ant-tabs-vertical.ant-tabs-card.ant-tabs-right .ant-tabs-card-bar.ant-tabs-right-bar .ant-tabs-tab { border-left: 0; border-radius: 0 2px 2px 0; } .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab { border-top: 0; border-bottom: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab-active { color: @primary-color; } .ant-tabs { color: #000000; } .ant-tabs-ink-bar { background-color: @primary-color; } .ant-tabs-bar { border-bottom: 1px solid #e8e8e8; } .ant-tabs-bottom .ant-tabs-bottom-bar { border-top: 1px solid #e8e8e8; border-bottom: none; } .ant-tabs-tab-prev, .ant-tabs-tab-next { color: rgba(0, 0, 0, 0.45); background-color: transparent; border: 0; } .ant-tabs-tab-prev:hover, .ant-tabs-tab-next:hover { color: #000000; } .ant-tabs-tab-btn-disabled, .ant-tabs-tab-btn-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-tabs-nav .ant-tabs-tab::before { border-top: 2px solid transparent; border-radius: 2px 2px 0 0; } .ant-tabs-nav .ant-tabs-tab:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-tabs-nav .ant-tabs-tab:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-tabs-nav .ant-tabs-tab-active { color: @primary-color; } .ant-tabs-nav .ant-tabs-tab-disabled, .ant-tabs-nav .ant-tabs-tab-disabled:hover { color: rgba(0, 0, 0, 0.25); } .ant-tabs .ant-tabs-left-bar, .ant-tabs .ant-tabs-right-bar { border-bottom: 0; } .ant-tabs .ant-tabs-left-bar { border-right: 1px solid #e8e8e8; } .ant-tabs .ant-tabs-left-content { border-left: 1px solid #e8e8e8; } .ant-tabs .ant-tabs-right-bar { border-left: 1px solid #e8e8e8; } .ant-tabs .ant-tabs-right-content { border-right: 1px solid #e8e8e8; } .ant-tag { color: #000000; background: #fafafa; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-tag, .ant-tag a, .ant-tag a:hover { color: #000000; } .ant-tag .anticon-close { color: rgba(0, 0, 0, 0.45); } .ant-tag .anticon-close:hover { color: rgba(0, 0, 0, 0.85); } .ant-tag-has-color { border-color: transparent; } .ant-tag-has-color, .ant-tag-has-color a, .ant-tag-has-color a:hover, .ant-tag-has-color .anticon-close, .ant-tag-has-color .anticon-close:hover { color: #ffffff; } .ant-tag-checkable { background-color: transparent; border-color: transparent; } .ant-tag-checkable:not(.ant-tag-checkable-checked):hover { color: @primary-color; } .ant-tag-checkable:active, .ant-tag-checkable-checked { color: #ffffff; } .ant-tag-checkable-checked { background-color: @primary-color; } .ant-tag-checkable:active { background-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-tag-pink { color: #eb2f96; background: #fff0f6; border-color: #ffadd2; } .ant-tag-pink-inverse { color: #ffffff; background: #eb2f96; border-color: #eb2f96; } .ant-tag-magenta { color: #eb2f96; background: #fff0f6; border-color: #ffadd2; } .ant-tag-magenta-inverse { color: #ffffff; background: #eb2f96; border-color: #eb2f96; } .ant-tag-red { color: #f5222d; background: #fff1f0; border-color: #ffa39e; } .ant-tag-red-inverse { color: #ffffff; background: #f5222d; border-color: #f5222d; } .ant-tag-volcano { color: #fa541c; background: #fff2e8; border-color: #ffbb96; } .ant-tag-volcano-inverse { color: #ffffff; background: #fa541c; border-color: #fa541c; } .ant-tag-orange { color: #fa8c16; background: #fff7e6; border-color: #ffd591; } .ant-tag-orange-inverse { color: #ffffff; background: #fa8c16; border-color: #fa8c16; } .ant-tag-yellow { color: #fadb14; background: #feffe6; border-color: #fffb8f; } .ant-tag-yellow-inverse { color: #ffffff; background: #fadb14; border-color: #fadb14; } .ant-tag-gold { color: #faad14; background: #fffbe6; border-color: #ffe58f; } .ant-tag-gold-inverse { color: #ffffff; background: #faad14; border-color: #faad14; } .ant-tag-cyan { color: #13c2c2; background: #e6fffb; border-color: #87e8de; } .ant-tag-cyan-inverse { color: #ffffff; background: #13c2c2; border-color: #13c2c2; } .ant-tag-lime { color: #a0d911; background: #fcffe6; border-color: #eaff8f; } .ant-tag-lime-inverse { color: #ffffff; background: #a0d911; border-color: #a0d911; } .ant-tag-green { color: #52c41a; background: #f6ffed; border-color: #b7eb8f; } .ant-tag-green-inverse { color: #ffffff; background: #52c41a; border-color: #52c41a; } .ant-tag-blue { color: #1890ff; background: #e6f7ff; border-color: #91d5ff; } .ant-tag-blue-inverse { color: #ffffff; background: #1890ff; border-color: #1890ff; } .ant-tag-geekblue { color: #2f54eb; background: #f0f5ff; border-color: #adc6ff; } .ant-tag-geekblue-inverse { color: #ffffff; background: #2f54eb; border-color: #2f54eb; } .ant-tag-purple { color: #722ed1; background: #f9f0ff; border-color: #d3adf7; } .ant-tag-purple-inverse { color: #ffffff; background: #722ed1; border-color: #722ed1; } .ant-time-picker-panel { color: #000000; } .ant-time-picker-panel-inner { background-color: #fff; background-clip: padding-box; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-time-picker-panel-input { border: 0; } .ant-time-picker-panel-input::-moz-placeholder { color: #bfbfbf; } .ant-time-picker-panel-input:-ms-input-placeholder { color: #bfbfbf; } .ant-time-picker-panel-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-time-picker-panel-input-wrap { border-bottom: 1px solid #e8e8e8; } .ant-time-picker-panel-input-invalid { border-color: #f5222d; } .ant-time-picker-panel-select { border-left: 1px solid #e8e8e8; } .ant-time-picker-panel-select:first-child { border-left: 0; } .ant-time-picker-panel-select:last-child { border-right: 0; } .ant-time-picker-panel-select li:focus { color: @primary-color; } .ant-time-picker-panel-select li:hover { background: color(~`colorPalette("@{primary-color}", 1)`); } li.ant-time-picker-panel-select-option-selected { background: #f5f5f5; } li.ant-time-picker-panel-select-option-selected:hover { background: #f5f5f5; } li.ant-time-picker-panel-select-option-disabled { color: rgba(0, 0, 0, 0.25); } li.ant-time-picker-panel-select-option-disabled:hover { background: transparent; } .ant-time-picker-panel-addon { border-top: 1px solid #e8e8e8; } .ant-time-picker { color: #000000; } .ant-time-picker-input { color: #000000; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 2px; } .ant-time-picker-input::-moz-placeholder { color: #bfbfbf; } .ant-time-picker-input:-ms-input-placeholder { color: #bfbfbf; } .ant-time-picker-input::-webkit-input-placeholder { color: #bfbfbf; } .ant-time-picker-input:hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; } .ant-time-picker-input:focus { border-color: color(~`colorPalette("@{primary-color}", 5)`); border-right-width: 1px !important; box-shadow: 0 0 0 2px rgba(49, 54, 83, 0.2); } .ant-time-picker-input-disabled { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-time-picker-input-disabled:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-time-picker-input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-time-picker-input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-time-picker-input[disabled] { color: rgba(0, 0, 0, 0.25); background-color: #f5f5f5; } .ant-time-picker-input[disabled]:hover { border-color: #d9d9d9; border-right-width: 1px !important; } .ant-time-picker-icon, .ant-time-picker-clear { color: rgba(0, 0, 0, 0.25); } .ant-time-picker-icon .ant-time-picker-clock-icon, .ant-time-picker-clear .ant-time-picker-clock-icon { color: rgba(0, 0, 0, 0.25); } .ant-time-picker-clear { background: #fff; } .ant-time-picker-clear:hover { color: rgba(0, 0, 0, 0.45); } .ant-timeline { color: #000000; } .ant-timeline-item-tail { border-left: 2px solid #e8e8e8; } .ant-timeline-item-pending .ant-timeline-item-head { background-color: transparent; } .ant-timeline-item-head { background-color: #fff; border: 2px solid transparent; border-radius: 100px; } .ant-timeline-item-head-blue { color: @primary-color; border-color: @primary-color; } .ant-timeline-item-head-red { color: #f5222d; border-color: #f5222d; } .ant-timeline-item-head-green { color: #52c41a; border-color: #52c41a; } .ant-timeline-item-head-gray { color: rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25); } .ant-timeline-item-head-custom { border: 0; border-radius: 0; } .ant-timeline.ant-timeline-pending .ant-timeline-item-last .ant-timeline-item-tail { border-left: 2px dotted #e8e8e8; } .ant-timeline.ant-timeline-reverse .ant-timeline-item-pending .ant-timeline-item-tail { border-left: 2px dotted #e8e8e8; } .ant-tooltip { color: #000000; } .ant-tooltip-inner { color: #fff; background-color: rgba(0, 0, 0, 0.75); border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ant-tooltip-arrow { background: transparent; } .ant-tooltip-arrow::before { background-color: rgba(0, 0, 0, 0.75); } .ant-tooltip-placement-top .ant-tooltip-arrow::before, .ant-tooltip-placement-topLeft .ant-tooltip-arrow::before, .ant-tooltip-placement-topRight .ant-tooltip-arrow::before { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); } .ant-tooltip-placement-right .ant-tooltip-arrow::before, .ant-tooltip-placement-rightTop .ant-tooltip-arrow::before, .ant-tooltip-placement-rightBottom .ant-tooltip-arrow::before { box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); } .ant-tooltip-placement-left .ant-tooltip-arrow::before, .ant-tooltip-placement-leftTop .ant-tooltip-arrow::before, .ant-tooltip-placement-leftBottom .ant-tooltip-arrow::before { box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); } .ant-tooltip-placement-bottom .ant-tooltip-arrow::before, .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow::before, .ant-tooltip-placement-bottomRight .ant-tooltip-arrow::before { box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07); } .ant-transfer { color: #000000; } .ant-transfer-disabled .ant-transfer-list { background: #f5f5f5; } .ant-transfer-list { border: 1px solid #d9d9d9; border-radius: 2px; } .ant-transfer-list-search-action { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-search-action .anticon { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-search-action .anticon:hover { color: rgba(0, 0, 0, 0.45); } .ant-transfer-list-header { color: #000000; background: #fff; border-bottom: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-transfer-list-content-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-body-not-found { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-footer { border-top: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-transfer-customize-list .ant-table-wrapper .ant-table-small { border: 0; border-radius: 0; } .ant-transfer-customize-list .ant-table-wrapper .ant-table-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th { background: #fafafa; } .ant-transfer-customize-list .ant-table-wrapper .ant-table-small > .ant-table-content .ant-table-row:last-child td { border-bottom: 1px solid #e8e8e8; } .ant-transfer { color: #000000; } .ant-transfer-disabled .ant-transfer-list { background: #f5f5f5; } .ant-transfer-list { border: 1px solid #d9d9d9; border-radius: 2px; } .ant-transfer-list-search-action { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-search-action .anticon { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-search-action .anticon:hover { color: rgba(0, 0, 0, 0.45); } .ant-transfer-list-header { color: #000000; background: #fff; border-bottom: 1px solid #e8e8e8; border-radius: 2px 2px 0 0; } .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-transfer-list-content-item-disabled { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-body-not-found { color: rgba(0, 0, 0, 0.25); } .ant-transfer-list-footer { border-top: 1px solid #e8e8e8; border-radius: 0 0 2px 2px; } .ant-select-tree-checkbox { color: #000000; } .ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner, .ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner, .ant-select-tree-checkbox-input:focus + .ant-select-tree-checkbox-inner { border-color: @primary-color; } .ant-select-tree-checkbox-checked::after { border: 1px solid @primary-color; border-radius: 2px; } .ant-select-tree-checkbox-inner { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; border-collapse: separate; } .ant-select-tree-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner { background-color: @primary-color; border-color: @primary-color; } .ant-select-tree-checkbox-disabled.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner::after { border-color: rgba(0, 0, 0, 0.25); } .ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner { background-color: #f5f5f5; border-color: #d9d9d9 !important; } .ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner::after { border-color: #f5f5f5; border-collapse: separate; } .ant-select-tree-checkbox-disabled + span { color: rgba(0, 0, 0, 0.25); } .ant-select-tree-checkbox-wrapper { color: #000000; } .ant-select-tree-checkbox-group { color: #000000; } .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner { background-color: #fff; border-color: #d9d9d9; } .ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after { background-color: @primary-color; border: 0; } .ant-select-tree-checkbox-indeterminate.ant-select-tree-checkbox-disabled .ant-select-tree-checkbox-inner::after { background-color: rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25); } .ant-select-tree { color: #000000; } .ant-select-tree li .ant-select-tree-node-content-wrapper { color: #000000; border-radius: 2px; } .ant-select-tree li .ant-select-tree-node-content-wrapper:hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected { background-color: rgba(58, 64, 99, 0.15); } .ant-select-tree li span.ant-select-tree-switcher, .ant-select-tree li span.ant-select-tree-iconEle { border: 0 none; } .ant-select-tree li span.ant-select-icon_loading .ant-select-switcher-loading-icon { color: @primary-color; } .ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_open .ant-select-switcher-loading-icon, .ant-select-tree li span.ant-select-tree-switcher.ant-select-tree-switcher_close .ant-select-switcher-loading-icon { color: @primary-color; } li.ant-select-tree-treenode-disabled > span:not(.ant-select-tree-switcher), li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper, li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper span { color: rgba(0, 0, 0, 0.25); } li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hover { background: transparent; } .ant-select-tree-dropdown { color: #000000; } .ant-select-tree-dropdown .ant-select-dropdown-search { background: #fff; } .ant-select-tree-dropdown .ant-select-dropdown-search .ant-select-search__field { border: 1px solid #d9d9d9; border-radius: 4px; } .ant-select-tree-dropdown .ant-select-not-found { color: rgba(0, 0, 0, 0.25); } .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper { border-radius: 0; } .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover { background: transparent; } .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper:hover::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper:hover::before { background: color(~`colorPalette("@{primary-color}", 1)`); } .ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected { color: #fff; background: transparent; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-switcher, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-switcher { color: #fff; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox .ant-tree-checkbox-inner { border-color: @primary-color; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked::after, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked::after { border-color: #fff; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner { background: #fff; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-checkbox.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { border-color: @primary-color; } .ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before { background: @primary-color; } .ant-tree-checkbox { color: #000000; } .ant-tree-checkbox-wrapper:hover .ant-tree-checkbox-inner, .ant-tree-checkbox:hover .ant-tree-checkbox-inner, .ant-tree-checkbox-input:focus + .ant-tree-checkbox-inner { border-color: @primary-color; } .ant-tree-checkbox-checked::after { border: 1px solid @primary-color; border-radius: 2px; } .ant-tree-checkbox-inner { background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; border-collapse: separate; } .ant-tree-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { border: 2px solid #fff; border-top: 0; border-left: 0; } .ant-tree-checkbox-checked .ant-tree-checkbox-inner { background-color: @primary-color; border-color: @primary-color; } .ant-tree-checkbox-disabled.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after { border-color: rgba(0, 0, 0, 0.25); } .ant-tree-checkbox-disabled .ant-tree-checkbox-inner { background-color: #f5f5f5; border-color: #d9d9d9 !important; } .ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after { border-color: #f5f5f5; border-collapse: separate; } .ant-tree-checkbox-disabled + span { color: rgba(0, 0, 0, 0.25); } .ant-tree-checkbox-wrapper { color: #000000; } .ant-tree-checkbox-group { color: #000000; } .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner { background-color: #fff; border-color: #d9d9d9; } .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner::after { background-color: @primary-color; border: 0; } .ant-tree-checkbox-indeterminate.ant-tree-checkbox-disabled .ant-tree-checkbox-inner::after { background-color: rgba(0, 0, 0, 0.25); border-color: rgba(0, 0, 0, 0.25); } .ant-tree { color: #000000; } .ant-tree li span[draggable], .ant-tree li span[draggable='true'] { border-top: 2px transparent solid; border-bottom: 2px transparent solid; } .ant-tree li.drag-over > span[draggable] { color: white; background-color: @primary-color; } .ant-tree li.drag-over-gap-top > span[draggable] { border-top-color: @primary-color; } .ant-tree li.drag-over-gap-bottom > span[draggable] { border-bottom-color: @primary-color; } .ant-tree li.filter-node > span { color: #f5222d !important; } .ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_open .ant-tree-switcher-loading-icon, .ant-tree li.ant-tree-treenode-loading span.ant-tree-switcher.ant-tree-switcher_close .ant-tree-switcher-loading-icon { color: @primary-color; } .ant-tree li .ant-tree-node-content-wrapper { color: #000000; border-radius: 2px; } .ant-tree li .ant-tree-node-content-wrapper:hover { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: rgba(58, 64, 99, 0.15); } .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle { border: 0 none; } li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher), li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper, li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span { color: rgba(0, 0, 0, 0.25); } li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper:hover { background: transparent; } .ant-tree.ant-tree-show-line li span.ant-tree-switcher { color: rgba(0, 0, 0, 0.45); background: #fff; } .ant-tree.ant-tree-show-line li:not(:last-child)::before { border-left: 1px solid #d9d9d9; } .ant-typography { color: #000000; } .ant-typography.ant-typography-secondary { color: rgba(0, 0, 0, 0.45); } .ant-typography.ant-typography-warning { color: #faad14; } .ant-typography.ant-typography-danger { color: #f5222d; } .ant-typography.ant-typography-disabled { color: rgba(0, 0, 0, 0.25); } h1.ant-typography, .ant-typography h1 { color: rgba(0, 0, 0, 0.85); } h2.ant-typography, .ant-typography h2 { color: rgba(0, 0, 0, 0.85); } h3.ant-typography, .ant-typography h3 { color: rgba(0, 0, 0, 0.85); } h4.ant-typography, .ant-typography h4 { color: rgba(0, 0, 0, 0.85); } .ant-typography a { color: @primary-color; } .ant-typography a:focus, .ant-typography a:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-typography a:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-typography a[disabled] { color: rgba(0, 0, 0, 0.25); } .ant-typography code { background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 3px; } .ant-typography mark { background-color: #ffe58f; } .ant-typography-expand, .ant-typography-edit, .ant-typography-copy { color: @primary-color; } .ant-typography-expand:focus, .ant-typography-edit:focus, .ant-typography-copy:focus, .ant-typography-expand:hover, .ant-typography-edit:hover, .ant-typography-copy:hover { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-typography-expand:active, .ant-typography-edit:active, .ant-typography-copy:active { color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-typography-copy-success, .ant-typography-copy-success:hover, .ant-typography-copy-success:focus { color: #52c41a; } .ant-typography-edit-content-confirm { color: rgba(0, 0, 0, 0.45); } .ant-upload { color: #000000; } .ant-upload.ant-upload-select-picture-card { background-color: #fafafa; border: 1px dashed #d9d9d9; border-radius: 2px; } .ant-upload.ant-upload-select-picture-card:hover { border-color: @primary-color; } .ant-upload.ant-upload-drag { background: #fafafa; border: 1px dashed #d9d9d9; border-radius: 2px; } .ant-upload.ant-upload-drag.ant-upload-drag-hover:not(.ant-upload-disabled) { border-color: color(~`colorPalette("@{primary-color}", 7)`); } .ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover { border-color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-upload.ant-upload-drag p.ant-upload-drag-icon .anticon { color: color(~`colorPalette("@{primary-color}", 5)`); } .ant-upload.ant-upload-drag p.ant-upload-text { color: rgba(0, 0, 0, 0.85); } .ant-upload.ant-upload-drag p.ant-upload-hint { color: rgba(0, 0, 0, 0.45); } .ant-upload.ant-upload-drag .anticon-plus { color: rgba(0, 0, 0, 0.25); } .ant-upload.ant-upload-drag .anticon-plus:hover { color: rgba(0, 0, 0, 0.45); } .ant-upload.ant-upload-drag:hover .anticon-plus { color: rgba(0, 0, 0, 0.45); } .ant-upload-list { color: #000000; } .ant-upload-list-item-info .anticon-loading, .ant-upload-list-item-info .anticon-paper-clip { color: rgba(0, 0, 0, 0.45); } .ant-upload-list-item .anticon-close { color: rgba(0, 0, 0, 0.45); } .ant-upload-list-item .anticon-close:hover { color: #000000; } .ant-upload-list-item:hover .ant-upload-list-item-info { background-color: color(~`colorPalette("@{primary-color}", 1)`); } .ant-upload-list-item-error, .ant-upload-list-item-error .anticon-paper-clip, .ant-upload-list-item-error .ant-upload-list-item-name { color: #f5222d; } .ant-upload-list-item-error .anticon-close { color: #f5222d !important; } .ant-upload-list-picture .ant-upload-list-item, .ant-upload-list-picture-card .ant-upload-list-item { border: 1px solid #d9d9d9; border-radius: 2px; } .ant-upload-list-picture .ant-upload-list-item:hover, .ant-upload-list-picture-card .ant-upload-list-item:hover { background: transparent; } .ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error { border-color: #f5222d; } .ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info, .ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info { background: transparent; } .ant-upload-list-picture .ant-upload-list-item-uploading, .ant-upload-list-picture-card .ant-upload-list-item-uploading { border-style: dashed; } .ant-upload-list-picture-card .ant-upload-list-item-info::before { background-color: rgba(0, 0, 0, 0.5); } .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete { color: rgba(255, 255, 255, 0.85); } .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye-o:hover, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete:hover { color: #ffffff; } .ant-upload-list-picture-card .ant-upload-list-item-uploading.ant-upload-list-item { background-color: #fafafa; } .ant-upload-list-picture-card .ant-upload-list-item-uploading-text { color: rgba(0, 0, 0, 0.45); } .ant-upload-list .ant-upload-success-icon { color: #52c41a; } .ant-menu-root.ant-menu-inline, .ant-menu-root.ant-menu-vertical { background: @primary-color; border-right: 1px solid @primary-color; color: #ffffff; } .ant-menu-root.ant-menu-inline a, .ant-menu-root.ant-menu-vertical a { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-selected, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-selected { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-root.ant-menu-vertical .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-root.ant-menu-inline .ant-menu-submenu-active, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-active { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-inline .ant-menu-submenu-title .ant-menu-submenu-arrow::after, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title .ant-menu-submenu-arrow::after { background: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover { color: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before, .ant-menu-root.ant-menu-inline .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after, .ant-menu-root.ant-menu-vertical .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after { background: #ffffff; } .ant-menu-root.ant-menu-inline .ant-menu-submenu > .ant-menu, .ant-menu-root.ant-menu-vertical .ant-menu-submenu > .ant-menu { background-color: rgba(58, 64, 99, 0.15); } .ant-menu-root.ant-menu-inline .ant-menu-item > a:hover, .ant-menu-root.ant-menu-vertical .ant-menu-item > a:hover { color: #ffffff; } .ant-menu-horizontal > .ant-menu-item-selected { color: #ffffff; } .sider-custom .ant-menu-submenu-title { color: #ffffff; } .bg--primary { background: @primary-color; } .header .ant-menu { background: transparent; color: #ffffff; } .header .ant-menu .ant-menu-item:hover { color: #ffffff; } .header__trigger { color: #ffffff; } ================================================ FILE: scripts/build.js ================================================ 'use strict'; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = 'production'; process.env.NODE_ENV = 'production'; process.env.REACT_ADMIN = process.argv.slice(2)[0]; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. process.on('unhandledRejection', (err) => { throw err; }); // Ensure environment variables are read. require('../config/env'); const path = require('path'); const chalk = require('react-dev-utils/chalk'); const fs = require('fs-extra'); const webpack = require('webpack'); const configFactory = require('../config/webpack.config'); const paths = require('../config/paths'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); const printBuildError = require('react-dev-utils/printBuildError'); const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); // These sizes are pretty large. We'll warn for bundles exceeding them. const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; const isInteractive = process.stdout.isTTY; // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } // Generate configuration const config = configFactory('production'); // We require that you explicitly set browsers and do not fall back to // browserslist defaults. const { checkBrowsers } = require('react-dev-utils/browsersHelper'); checkBrowsers(paths.appPath, isInteractive) .then(() => { // First, read the current file sizes in build directory. // This lets us display how much they changed later. return measureFileSizesBeforeBuild(paths.appBuild); }) .then((previousFileSizes) => { // Remove all content but keep the directory so that // if you're in it, you don't end up in Trash fs.emptyDirSync(paths.appBuild); // Merge with the public folder copyPublicFolder(); // Start the webpack build return build(previousFileSizes); }) .then( ({ stats, previousFileSizes, warnings }) => { if (warnings.length) { console.log(chalk.yellow('Compiled with warnings.\n')); console.log(warnings.join('\n\n')); console.log( '\nSearch for the ' + chalk.underline(chalk.yellow('keywords')) + ' to learn more about each warning.' ); console.log( 'To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n' ); } else { console.log(chalk.green('Compiled successfully.\n')); } console.log('File sizes after gzip:\n'); printFileSizesAfterBuild( stats, previousFileSizes, paths.appBuild, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE ); console.log(); const appPackage = require(paths.appPackageJson); const publicUrl = paths.publicUrl; const publicPath = config.output.publicPath; const buildFolder = path.relative(process.cwd(), paths.appBuild); printHostingInstructions(appPackage, publicUrl, publicPath, buildFolder, useYarn); }, (err) => { const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; if (tscCompileOnError) { console.log( chalk.yellow( 'Compiled with the following type errors (you may want to check these before deploying your app):\n' ) ); printBuildError(err); } else { console.log(chalk.red('Failed to compile.\n')); printBuildError(err); process.exit(1); } } ) .catch((err) => { if (err && err.message) { console.log(err.message); } process.exit(1); }); // Create the production build and print the deployment instructions. function build(previousFileSizes) { // We used to support resolving modules according to `NODE_PATH`. // This now has been deprecated in favor of jsconfig/tsconfig.json // This lets you use absolute paths in imports inside large monorepos: if (process.env.NODE_PATH) { console.log( chalk.yellow( 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.' ) ); console.log(); } console.log('Creating an optimized production build...'); const compiler = webpack(config); return new Promise((resolve, reject) => { compiler.run((err, stats) => { let messages; if (err) { if (!err.message) { return reject(err); } messages = formatWebpackMessages({ errors: [err.message], warnings: [], }); } else { messages = formatWebpackMessages( stats.toJson({ all: false, warnings: true, errors: true }) ); } if (messages.errors.length) { // Only keep the first error. Others are often indicative // of the same problem, but confuse the reader with noise. if (messages.errors.length > 1) { messages.errors.length = 1; } return reject(new Error(messages.errors.join('\n\n'))); } if ( process.env.CI && (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') && messages.warnings.length ) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + 'Most CI servers set it automatically.\n' ) ); return reject(new Error(messages.warnings.join('\n\n'))); } return resolve({ stats, previousFileSizes, warnings: messages.warnings, }); }); }); } function copyPublicFolder() { fs.copySync(paths.appPublic, paths.appBuild, { dereference: true, filter: (file) => file !== paths.appHtml, }); } ================================================ FILE: scripts/start.js ================================================ 'use strict'; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = 'development'; process.env.NODE_ENV = 'development'; process.env.REACT_ADMIN = process.argv.slice(2)[0]; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. process.on('unhandledRejection', (err) => { throw err; }); // Ensure environment variables are read. require('../config/env'); const fs = require('fs'); const chalk = require('react-dev-utils/chalk'); const webpack = require('webpack'); const WebpackDevServer = require('webpack-dev-server'); const clearConsole = require('react-dev-utils/clearConsole'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const { choosePort, createCompiler, prepareProxy, prepareUrls, } = require('react-dev-utils/WebpackDevServerUtils'); const openBrowser = require('react-dev-utils/openBrowser'); const paths = require('../config/paths'); const configFactory = require('../config/webpack.config'); const createDevServerConfig = require('../config/webpackDevServer.config'); const useYarn = fs.existsSync(paths.yarnLockFile); const isInteractive = process.stdout.isTTY; // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } // Tools like Cloud9 rely on this. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; if (process.env.HOST) { console.log( chalk.cyan( `Attempting to bind to HOST environment variable: ${chalk.yellow( chalk.bold(process.env.HOST) )}` ) ); console.log( `If this was unintentional, check that you haven't mistakenly set it in your shell.` ); console.log(`Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`); console.log(); } // We require that you explicitly set browsers and do not fall back to // browserslist defaults. const { checkBrowsers } = require('react-dev-utils/browsersHelper'); checkBrowsers(paths.appPath, isInteractive) .then(() => { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `choosePort()` Promise resolves to the next free port. return choosePort(HOST, DEFAULT_PORT); }) .then((port) => { if (port == null) { // We have not found a port. return; } const config = configFactory('development'); const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; const appName = require(paths.appPackageJson).name; const useTypeScript = fs.existsSync(paths.appTsConfig); const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; const urls = prepareUrls(protocol, HOST, port); const devSocket = { warnings: (warnings) => devServer.sockWrite(devServer.sockets, 'warnings', warnings), errors: (errors) => devServer.sockWrite(devServer.sockets, 'errors', errors), }; // Create a webpack compiler that is configured with custom messages. const compiler = createCompiler({ appName, config, devSocket, urls, useYarn, useTypeScript, tscCompileOnError, webpack, }); // Load proxy config const proxySetting = require(paths.appPackageJson).proxy; const proxyConfig = prepareProxy(proxySetting, paths.appPublic); // Serve webpack assets generated by the compiler over a web server. const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig); const devServer = new WebpackDevServer(compiler, serverConfig); // Launch WebpackDevServer. devServer.listen(port, HOST, (err) => { if (err) { return console.log(err); } if (isInteractive) { clearConsole(); } // We used to support resolving modules according to `NODE_PATH`. // This now has been deprecated in favor of jsconfig/tsconfig.json // This lets you use absolute paths in imports inside large monorepos: if (process.env.NODE_PATH) { console.log( chalk.yellow( 'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.' ) ); console.log(); } console.log(chalk.cyan('Starting the development server...\n')); openBrowser(urls.localUrlForBrowser); }); ['SIGINT', 'SIGTERM'].forEach(function (sig) { process.on(sig, function () { devServer.close(); process.exit(); }); }); }) .catch((err) => { if (err && err.message) { console.log(err.message); } process.exit(1); }); ================================================ FILE: scripts/test.js ================================================ 'use strict'; // Do this as the first thing so that any code reading it knows the right env. process.env.BABEL_ENV = 'test'; process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. process.on('unhandledRejection', err => { throw err; }); // Ensure environment variables are read. require('../config/env'); const jest = require('jest'); const execSync = require('child_process').execSync; let argv = process.argv.slice(2); function isInGitRepository() { try { execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' }); return true; } catch (e) { return false; } } function isInMercurialRepository() { try { execSync('hg --cwd . root', { stdio: 'ignore' }); return true; } catch (e) { return false; } } // Watch unless on CI or explicitly running all tests if ( !process.env.CI && argv.indexOf('--watchAll') === -1 && argv.indexOf('--watchAll=false') === -1 ) { // https://github.com/facebook/create-react-app/issues/5210 const hasSourceControl = isInGitRepository() || isInMercurialRepository(); argv.push(hasSourceControl ? '--watch' : '--watchAll'); } jest.run(argv); ================================================ FILE: src/App.test.tsx ================================================ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); ================================================ FILE: src/App.tsx ================================================ import React, { useState, useEffect } from 'react'; import { Layout, notification } from 'antd'; import umbrella from 'umbrella-storage'; import { useAlita } from 'redux-alita'; import Routes from './routes'; import SiderCustom from './components/SiderCustom'; import HeaderCustom from './components/HeaderCustom'; import { ThemePicker, Copyright } from './components/widget'; import { checkLogin } from './utils'; import { fetchMenu } from './service'; import classNames from 'classnames'; import { SmileOutlined } from '@ant-design/icons'; const { Content, Footer } = Layout; type AppProps = {}; function checkIsMobile() { const clientWidth = window.innerWidth; return clientWidth <= 992; } let _resizeThrottled = false; function resizeListener(handler: (isMobile: boolean) => void) { const delay = 250; if (!_resizeThrottled) { _resizeThrottled = true; const timer = setTimeout(() => { handler(checkIsMobile()); _resizeThrottled = false; clearTimeout(timer); }, delay); } } function handleResize(handler: (isMobile: boolean) => void) { window.addEventListener('resize', resizeListener.bind(null, handler)); } function openFNotification() { const openNotification = () => { notification.open({ message: '博主-yezihaohao', description: ( ), icon: , duration: 0, }); umbrella.setLocalStorage('hideBlog', true); }; const storageFirst = umbrella.getLocalStorage('hideBlog'); if (!storageFirst) { openNotification(); } } /** * 获取服务端异步菜单 * @param handler 执行回调 */ function fetchSmenu(handler: any) { const setAlitaMenu = (menus: any) => { handler(menus); // this.props.setAlitaState({ stateName: 'smenus', data: menus }); }; setAlitaMenu(umbrella.getLocalStorage('smenus') || []); fetchMenu().then((smenus) => { setAlitaMenu(smenus); umbrella.setLocalStorage('smenus', smenus); }); } const App = (props: AppProps) => { const [collapsed, setCollapsed] = useState(false); const [auth, responsive, setAlita] = useAlita( { auth: { permissions: null } }, { responsive: { isMobile: false } }, { light: true } ); useEffect(() => { let user = umbrella.getLocalStorage('user'); user && setAlita('auth', user); setAlita('responsive', { isMobile: checkIsMobile() }); handleResize((isMobile: boolean) => setAlita('responsive', { isMobile })); openFNotification(); fetchSmenu((smenus: any[]) => setAlita('smenus', smenus)); }, [setAlita]); function toggle() { setCollapsed(!collapsed); } return ( {!responsive.isMobile && checkLogin(auth.permissions) && ( )}
); }; export default App; ================================================ FILE: src/Page.tsx ================================================ import React from 'react'; import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; import NotFound from './components/pages/NotFound'; import Login from './components/pages/Login'; import App from './App'; export default () => ( } /> ); ================================================ FILE: src/components/HeaderCustom.tsx ================================================ /** * Created by hao.cheng on 2017/4/13. */ import React, { useEffect, useState } from 'react'; import screenfull from 'screenfull'; import avater from '../style/imgs/b1.jpg'; import SiderCustom from './SiderCustom'; import { Menu, Layout, Badge, Popover } from 'antd'; import { gitOauthToken, gitOauthInfo } from '../service'; import { parseQuery } from '../utils'; import { useHistory } from 'react-router-dom'; import { PwaInstaller } from './widget'; import { useAlita } from 'redux-alita'; import umbrella from 'umbrella-storage'; import { useSwitch } from '../utils/hooks'; import { ArrowsAltOutlined, BarsOutlined, MenuFoldOutlined, MenuUnfoldOutlined, NotificationOutlined, } from '@ant-design/icons'; const { Header } = Layout; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; type HeaderCustomProps = { toggle: () => void; collapsed: boolean; user: any; responsive?: any; path?: string; }; const HeaderCustom = (props: HeaderCustomProps) => { const [user, setUser] = useState(); const [responsive] = useAlita('responsive', { light: true }); const [visible, turn] = useSwitch(); const history = useHistory(); useEffect(() => { const query = parseQuery(); let storageUser = umbrella.getLocalStorage('user'); if (!storageUser && query.code) { gitOauthToken(query.code as string).then((res: any) => { gitOauthInfo(res.access_token).then((info: any) => { setUser({ user: info, }); umbrella.setLocalStorage('user', info); }); }); } else { setUser({ user: storageUser, }); } }, []); const screenFull = () => { if (screenfull.isEnabled) { screenfull.toggle(); } }; const menuClick = (e: any) => { e.key === 'logout' && logout(); }; const logout = () => { umbrella.removeLocalStorage('user'); history.push('/login'); }; return (
{responsive?.isMobile ? ( } trigger="click" placement="bottomLeft" visible={visible} onVisibleChange={(visible) => (visible ? turn.turnOn() : turn.turnOff())} > ) : props.collapsed ? ( ) : ( )} 头像 } > 你好 - {user?.userName} 个人信息 退出登录 个人设置 系统设置
); }; export default HeaderCustom; ================================================ FILE: src/components/Page.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React, { ReactNode } from 'react'; interface PageProps { children?: ReactNode; } const Page = (props: PageProps) => { return
{props.children}
; }; export default Page; ================================================ FILE: src/components/SiderCustom.tsx ================================================ /** * Created by hao.cheng on 2017/4/13. */ import React, { useState, useEffect } from 'react'; import { Layout } from 'antd'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import routes from '../routes/config'; import SiderMenu from './SiderMenu'; import { useAlita } from 'redux-alita'; import { useSwitch } from '../utils/hooks'; import { usePrevious } from 'ahooks'; const { Sider } = Layout; type SiderCustomProps = RouteComponentProps & { popoverHide?: () => void; collapsed?: boolean; smenus?: any; }; interface IMenu { openKeys: string[]; selectedKey: string; } const SiderCustom = (props: SiderCustomProps) => { const [collapsed, tCollapsed] = useSwitch(); const [firstHide, tFirstHide] = useSwitch(); const [menu, setMenu] = useState({ openKeys: [''], selectedKey: '' }); // 异步菜单 const [smenus] = useAlita({ smenus: [] }, { light: true }); const { location, collapsed: pCollapsed } = props; const prePathname = usePrevious(props.location.pathname); useEffect(() => { const recombineOpenKeys = (openKeys: string[]) => { let i = 0; let strPlus = ''; let tempKeys: string[] = []; // 多级菜单循环处理 while (i < openKeys.length) { strPlus += openKeys[i]; tempKeys.push(strPlus); i++; } return tempKeys; }; const getOpenAndSelectKeys = () => { return { openKeys: recombineOpenKeys(location.pathname.match(/[/](\w+)/gi) || []), selectedKey: location.pathname, }; }; if (pCollapsed !== collapsed) { setMenu(getOpenAndSelectKeys()); tCollapsed.setSwitcher(!!pCollapsed); tFirstHide.setSwitcher(!!pCollapsed); } if (prePathname !== location.pathname) { setMenu(getOpenAndSelectKeys()); } }, [prePathname, location.pathname, collapsed, tFirstHide, tCollapsed, pCollapsed]); const menuClick = (e: any) => { setMenu((state) => ({ ...state, selectedKey: e.key })); props.popoverHide?.(); // 响应式布局控制小屏幕点击菜单时隐藏菜单操作 }; const openMenu: any = (v: string[]) => { setMenu((state) => ({ ...state, openKeys: v })); tFirstHide.turnOff(); }; return (
); }; export default withRouter(SiderCustom); ================================================ FILE: src/components/SiderMenu.tsx ================================================ import React, { useState, useEffect } from 'react'; import { Menu } from 'antd'; import { Link } from 'react-router-dom'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import { IFMenu } from '../routes/config'; import { MenuProps } from 'antd/lib/menu'; const renderMenuItem = ( item: IFMenu // item.route 菜单单独跳转的路由 ) => ( {/* {item.icon && } */} {item.title} ); const renderSubMenu = (item: IFMenu) => { return ( {/* {item.icon && } */} {item.title} } > {item.subs!.map((sub) => (sub.subs ? renderSubMenu(sub) : renderMenuItem(sub)))} ); }; type SiderMenuProps = MenuProps & { menus: any; onClick: (e: any) => void; selectedKeys: string[]; openKeys?: string[]; onOpenChange: (v: string[]) => void; }; const SiderMenu = ({ menus, ...props }: SiderMenuProps) => { const [dragItems, setDragItems] = useState([]); useEffect(() => { setDragItems(menus); }, [menus]); const reorder = (list: any, startIndex: number, endIndex: number) => { const result = Array.from(list); const [removed] = result.splice(startIndex, 1); result.splice(endIndex, 0, removed); return result; }; const onDragEnd = (result: any) => { // dropped outside the list if (!result.destination) { return; } const _items = reorder(dragItems, result.source.index, result.destination.index); setDragItems(_items); }; return ( {(provided, snapshot) => (
{dragItems.map((item: IFMenu, index: number) => ( {(provided, snapshot) => (
) => provided.dragHandleProps && provided.dragHandleProps.onDragStart(e as any) } > {item.subs! ? renderSubMenu(item) : renderMenuItem(item)}
)} ))} {provided.placeholder}
)} ); }; export default React.memo(SiderMenu); ================================================ FILE: src/components/animation/BasicAnimations.tsx ================================================ /** * Created by hao.cheng on 2017/5/8. */ import React from 'react'; import { Row, Col, Card, Switch } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; class BasicAnimations extends React.Component { state = { animated: false, animatedOne: -1, }; animatedAll = (checked: boolean) => { checked && this.setState({ animated: true }); !checked && this.setState({ animated: false }); }; animatedOne = (i: number) => { this.setState({ animatedOne: i }); }; animatedOneOver = () => { this.setState({ animatedOne: -1 }); }; render() { const animations = [ 'bounce', 'flash', 'rubberBand', 'shake', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutLeft', 'bounceOutUp', 'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp', 'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp', ]; return (
全部动画(单个动画请移动鼠标) {animations.map((v, i) => (
this.animatedOne(i)} onMouseLeave={() => this.animatedOneOver()} >

{v}
))}
); } } export default BasicAnimations; ================================================ FILE: src/components/animation/ExampleAnimations.tsx ================================================ /** * Created by hao.cheng on 2017/5/8. */ import React from 'react'; import { Row, Col, Card, Table, Popconfirm, Button } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; type ExampleAnimationsProps = {}; type ExampleAnimationsState = { dataSource: any; count: number; deleteIndex: number; }; class ExampleAnimations extends React.Component { constructor(props: any) { super(props); this.columns = [ { title: 'name', dataIndex: 'name', width: '30%', }, { title: 'age', dataIndex: 'age', }, { title: 'address', dataIndex: 'address', }, { title: 'operation', dataIndex: 'operation', render: (text: any, record: any, index: number) => { return this.state.dataSource.length > 1 ? ( this.onDelete(record, index)} > Delete ) : null; }, }, ]; this.state = { dataSource: [ { key: '0', name: 'Edward King 0', age: '32', address: 'London, Park Lane no. 0', }, { key: '1', name: 'Edward King 1', age: '32', address: 'London, Park Lane no. 1', }, ], count: 2, deleteIndex: -1, }; } columns: any; onDelete = (record: any, index: number) => { const dataSource = [...this.state.dataSource]; dataSource.splice(index, 1); this.setState({ deleteIndex: record.key }); setTimeout(() => { this.setState({ dataSource }); }, 500); }; handleAdd = () => { const { count, dataSource } = this.state; const newData = { key: count, name: `Edward King ${count}`, age: 32, address: `London, Park Lane no. ${count}`, }; this.setState({ dataSource: [newData, ...dataSource], count: count + 1, }); }; render() { const { dataSource } = this.state; const columns = this.columns; return (
{ if (this.state.deleteIndex === record.key) return 'animated zoomOutLeft min-black'; return 'animated fadeInRight'; }} /> ); } } export default ExampleAnimations; ================================================ FILE: src/components/auth/Basic.tsx ================================================ /** * Created by 叶子 on 2017/7/31. */ import React, { Component } from 'react'; import { Row, Col, Card } from 'antd'; import beauty from '@/style/imgs/beauty.jpg'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { AuthWidget } from '../widget'; class Basic extends Component { render() { return (
(
{!auth.uid && (

登录之后你将看到一张美女图

)} {auth.permissions && auth.permissions.includes('auth/authPage/visit') && (
{(auth.permissions.includes( 'auth/authPage/edit' ) && (

看啥子美女，看点美景就行啦~ 😄😄

管理员身份登录才能看到这两段话

)) || (

管理员登录将看到不一样的效果

)}
)} )} /> ); } } export default Basic; ================================================ FILE: src/components/auth/RouterEnter.tsx ================================================ /** * Created by 叶子 on 2017/8/1. */ /** * Created by 叶子 on 2017/7/31. */ import React, { Component } from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { AuthWidget } from '../widget'; class RouterEnter extends Component { componentDidMount() { console.log('RouterEnter'); } render() { return (
(

只有管理员登录才能看到该页面，否则跳转到404页面

)} /> ); } } export default RouterEnter; ================================================ FILE: src/components/charts/Echarts.tsx ================================================ /** * Created by hao.cheng on 2017/4/17. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import EchartsArea from './EchartsArea'; import EchartsPie from './EchartsPie'; import EchartsEffectScatter from './EchartsEffectScatter'; import EchartsForce from './EchartsForce'; class Echarts extends React.Component { render() { return (
{/**/}
) } } export default Echarts; ================================================ FILE: src/components/charts/EchartsArea.tsx ================================================ /** * Created by hao.cheng on 2017/4/17. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; import echarts from 'echarts'; let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (var i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const option = { tooltip: { trigger: 'axis', position: function(pt: any) { return [pt[0], '10%']; }, }, title: { left: 'center', text: '大数据量面积图', }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none', }, restore: {}, saveAsImage: {}, }, }, xAxis: { type: 'category', boundaryGap: false, data: date, }, yAxis: { type: 'value', boundaryGap: [0, '100%'], }, dataZoom: [ { type: 'inside', start: 0, end: 10, }, { start: 0, end: 10, handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2, }, }, ], series: [ { name: '模拟数据', type: 'line', smooth: true, symbol: 'none', sampling: 'average', itemStyle: { normal: { color: 'rgb(255, 70, 131)', }, }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)', }, { offset: 1, color: 'rgb(255, 70, 131)', }, ]), }, }, data: data, }, ], }; class EchartsArea extends React.Component { render() { return ( ); } } export default EchartsArea; ================================================ FILE: src/components/charts/EchartsEffectScatter.tsx ================================================ /** * Created by SEELE on 2017/8/23. */ import React, { Component } from 'react'; import ReactEcharts from 'echarts-for-react'; require('echarts/map/js/china.js'); const data = [ { name: '海门', value: 9 }, { name: '鄂尔多斯', value: 12 }, { name: '招远', value: 12 }, { name: '舟山', value: 12 }, { name: '齐齐哈尔', value: 14 }, { name: '盐城', value: 15 }, { name: '赤峰', value: 16 }, { name: '青岛', value: 18 }, { name: '乳山', value: 18 }, { name: '金昌', value: 19 }, { name: '泉州', value: 21 }, { name: '莱西', value: 21 }, { name: '日照', value: 21 }, { name: '胶南', value: 22 }, { name: '南通', value: 23 }, { name: '拉萨', value: 24 }, { name: '云浮', value: 24 }, { name: '梅州', value: 25 }, { name: '文登', value: 25 }, { name: '上海', value: 25 }, { name: '攀枝花', value: 25 }, { name: '威海', value: 25 }, { name: '承德', value: 25 }, { name: '厦门', value: 26 }, { name: '汕尾', value: 26 }, { name: '潮州', value: 26 }, { name: '丹东', value: 27 }, { name: '太仓', value: 27 }, { name: '曲靖', value: 27 }, { name: '烟台', value: 28 }, { name: '福州', value: 29 }, { name: '瓦房店', value: 30 }, { name: '即墨', value: 30 }, { name: '抚顺', value: 31 }, { name: '玉溪', value: 31 }, { name: '张家口', value: 31 }, { name: '阳泉', value: 31 }, { name: '莱州', value: 32 }, { name: '湖州', value: 32 }, { name: '汕头', value: 32 }, { name: '昆山', value: 33 }, { name: '宁波', value: 33 }, { name: '湛江', value: 33 }, { name: '揭阳', value: 34 }, { name: '荣成', value: 34 }, { name: '连云港', value: 35 }, { name: '葫芦岛', value: 35 }, { name: '常熟', value: 36 }, { name: '东莞', value: 36 }, { name: '河源', value: 36 }, { name: '淮安', value: 36 }, { name: '泰州', value: 36 }, { name: '南宁', value: 37 }, { name: '营口', value: 37 }, { name: '惠州', value: 37 }, { name: '江阴', value: 37 }, { name: '蓬莱', value: 37 }, { name: '韶关', value: 38 }, { name: '嘉峪关', value: 38 }, { name: '广州', value: 38 }, { name: '延安', value: 38 }, { name: '太原', value: 39 }, { name: '清远', value: 39 }, { name: '中山', value: 39 }, { name: '昆明', value: 39 }, { name: '寿光', value: 40 }, { name: '盘锦', value: 40 }, { name: '长治', value: 41 }, { name: '深圳', value: 41 }, { name: '珠海', value: 42 }, { name: '宿迁', value: 43 }, { name: '咸阳', value: 43 }, { name: '铜川', value: 44 }, { name: '平度', value: 44 }, { name: '佛山', value: 44 }, { name: '海口', value: 44 }, { name: '江门', value: 45 }, { name: '章丘', value: 45 }, { name: '肇庆', value: 46 }, { name: '大连', value: 47 }, { name: '临汾', value: 47 }, { name: '吴江', value: 47 }, { name: '石嘴山', value: 49 }, { name: '沈阳', value: 50 }, { name: '苏州', value: 50 }, { name: '茂名', value: 50 }, { name: '嘉兴', value: 51 }, { name: '长春', value: 51 }, { name: '胶州', value: 52 }, { name: '银川', value: 52 }, { name: '张家港', value: 52 }, { name: '三门峡', value: 53 }, { name: '锦州', value: 54 }, { name: '南昌', value: 54 }, { name: '柳州', value: 54 }, { name: '三亚', value: 54 }, { name: '自贡', value: 56 }, { name: '吉林', value: 56 }, { name: '阳江', value: 57 }, { name: '泸州', value: 57 }, { name: '西宁', value: 57 }, { name: '宜宾', value: 58 }, { name: '呼和浩特', value: 58 }, { name: '成都', value: 58 }, { name: '大同', value: 58 }, { name: '镇江', value: 59 }, { name: '桂林', value: 59 }, { name: '张家界', value: 59 }, { name: '宜兴', value: 59 }, { name: '北海', value: 60 }, { name: '西安', value: 61 }, { name: '金坛', value: 62 }, { name: '东营', value: 62 }, { name: '牡丹江', value: 63 }, { name: '遵义', value: 63 }, { name: '绍兴', value: 63 }, { name: '扬州', value: 64 }, { name: '常州', value: 64 }, { name: '潍坊', value: 65 }, { name: '重庆', value: 66 }, { name: '台州', value: 67 }, { name: '南京', value: 67 }, { name: '滨州', value: 70 }, { name: '贵阳', value: 71 }, { name: '无锡', value: 71 }, { name: '本溪', value: 71 }, { name: '克拉玛依', value: 72 }, { name: '渭南', value: 72 }, { name: '马鞍山', value: 72 }, { name: '宝鸡', value: 72 }, { name: '焦作', value: 75 }, { name: '句容', value: 75 }, { name: '北京', value: 79 }, { name: '徐州', value: 79 }, { name: '衡水', value: 80 }, { name: '包头', value: 80 }, { name: '绵阳', value: 80 }, { name: '乌鲁木齐', value: 84 }, { name: '枣庄', value: 84 }, { name: '杭州', value: 84 }, { name: '淄博', value: 85 }, { name: '鞍山', value: 86 }, { name: '溧阳', value: 86 }, { name: '库尔勒', value: 86 }, { name: '安阳', value: 90 }, { name: '开封', value: 90 }, { name: '济南', value: 92 }, { name: '德阳', value: 93 }, { name: '温州', value: 95 }, { name: '九江', value: 96 }, { name: '邯郸', value: 98 }, { name: '临安', value: 99 }, { name: '兰州', value: 99 }, { name: '沧州', value: 100 }, { name: '临沂', value: 103 }, { name: '南充', value: 104 }, { name: '天津', value: 105 }, { name: '富阳', value: 106 }, { name: '泰安', value: 112 }, { name: '诸暨', value: 112 }, { name: '郑州', value: 113 }, { name: '哈尔滨', value: 114 }, { name: '聊城', value: 116 }, { name: '芜湖', value: 117 }, { name: '唐山', value: 119 }, { name: '平顶山', value: 119 }, { name: '邢台', value: 119 }, { name: '德州', value: 120 }, { name: '济宁', value: 120 }, { name: '荆州', value: 127 }, { name: '宜昌', value: 130 }, { name: '义乌', value: 132 }, { name: '丽水', value: 133 }, { name: '洛阳', value: 134 }, { name: '秦皇岛', value: 136 }, { name: '株洲', value: 143 }, { name: '石家庄', value: 147 }, { name: '莱芜', value: 148 }, { name: '常德', value: 152 }, { name: '保定', value: 153 }, { name: '湘潭', value: 154 }, { name: '金华', value: 157 }, { name: '岳阳', value: 169 }, { name: '长沙', value: 175 }, { name: '衢州', value: 177 }, { name: '廊坊', value: 193 }, { name: '菏泽', value: 194 }, { name: '合肥', value: 229 }, { name: '武汉', value: 273 }, { name: '大庆', value: 279 }, ]; const geoCoordMap = { 海门: [121.15, 31.89], 鄂尔多斯: [109.781327, 39.608266], 招远: [120.38, 37.35], 舟山: [122.207216, 29.985295], 齐齐哈尔: [123.97, 47.33], 盐城: [120.13, 33.38], 赤峰: [118.87, 42.28], 青岛: [120.33, 36.07], 乳山: [121.52, 36.89], 金昌: [102.188043, 38.520089], 泉州: [118.58, 24.93], 莱西: [120.53, 36.86], 日照: [119.46, 35.42], 胶南: [119.97, 35.88], 南通: [121.05, 32.08], 拉萨: [91.11, 29.97], 云浮: [112.02, 22.93], 梅州: [116.1, 24.55], 文登: [122.05, 37.2], 上海: [121.48, 31.22], 攀枝花: [101.718637, 26.582347], 威海: [122.1, 37.5], 承德: [117.93, 40.97], 厦门: [118.1, 24.46], 汕尾: [115.375279, 22.786211], 潮州: [116.63, 23.68], 丹东: [124.37, 40.13], 太仓: [121.1, 31.45], 曲靖: [103.79, 25.51], 烟台: [121.39, 37.52], 福州: [119.3, 26.08], 瓦房店: [121.979603, 39.627114], 即墨: [120.45, 36.38], 抚顺: [123.97, 41.97], 玉溪: [102.52, 24.35], 张家口: [114.87, 40.82], 阳泉: [113.57, 37.85], 莱州: [119.942327, 37.177017], 湖州: [120.1, 30.86], 汕头: [116.69, 23.39], 昆山: [120.95, 31.39], 宁波: [121.56, 29.86], 湛江: [110.359377, 21.270708], 揭阳: [116.35, 23.55], 荣成: [122.41, 37.16], 连云港: [119.16, 34.59], 葫芦岛: [120.836932, 40.711052], 常熟: [120.74, 31.64], 东莞: [113.75, 23.04], 河源: [114.68, 23.73], 淮安: [119.15, 33.5], 泰州: [119.9, 32.49], 南宁: [108.33, 22.84], 营口: [122.18, 40.65], 惠州: [114.4, 23.09], 江阴: [120.26, 31.91], 蓬莱: [120.75, 37.8], 韶关: [113.62, 24.84], 嘉峪关: [98.289152, 39.77313], 广州: [113.23, 23.16], 延安: [109.47, 36.6], 太原: [112.53, 37.87], 清远: [113.01, 23.7], 中山: [113.38, 22.52], 昆明: [102.73, 25.04], 寿光: [118.73, 36.86], 盘锦: [122.070714, 41.119997], 长治: [113.08, 36.18], 深圳: [114.07, 22.62], 珠海: [113.52, 22.3], 宿迁: [118.3, 33.96], 咸阳: [108.72, 34.36], 铜川: [109.11, 35.09], 平度: [119.97, 36.77], 佛山: [113.11, 23.05], 海口: [110.35, 20.02], 江门: [113.06, 22.61], 章丘: [117.53, 36.72], 肇庆: [112.44, 23.05], 大连: [121.62, 38.92], 临汾: [111.5, 36.08], 吴江: [120.63, 31.16], 石嘴山: [106.39, 39.04], 沈阳: [123.38, 41.8], 苏州: [120.62, 31.32], 茂名: [110.88, 21.68], 嘉兴: [120.76, 30.77], 长春: [125.35, 43.88], 胶州: [120.03336, 36.264622], 银川: [106.27, 38.47], 张家港: [120.555821, 31.875428], 三门峡: [111.19, 34.76], 锦州: [121.15, 41.13], 南昌: [115.89, 28.68], 柳州: [109.4, 24.33], 三亚: [109.511909, 18.252847], 自贡: [104.778442, 29.33903], 吉林: [126.57, 43.87], 阳江: [111.95, 21.85], 泸州: [105.39, 28.91], 西宁: [101.74, 36.56], 宜宾: [104.56, 29.77], 呼和浩特: [111.65, 40.82], 成都: [104.06, 30.67], 大同: [113.3, 40.12], 镇江: [119.44, 32.2], 桂林: [110.28, 25.29], 张家界: [110.479191, 29.117096], 宜兴: [119.82, 31.36], 北海: [109.12, 21.49], 西安: [108.95, 34.27], 金坛: [119.56, 31.74], 东营: [118.49, 37.46], 牡丹江: [129.58, 44.6], 遵义: [106.9, 27.7], 绍兴: [120.58, 30.01], 扬州: [119.42, 32.39], 常州: [119.95, 31.79], 潍坊: [119.1, 36.62], 重庆: [106.54, 29.59], 台州: [121.420757, 28.656386], 南京: [118.78, 32.04], 滨州: [118.03, 37.36], 贵阳: [106.71, 26.57], 无锡: [120.29, 31.59], 本溪: [123.73, 41.3], 克拉玛依: [84.77, 45.59], 渭南: [109.5, 34.52], 马鞍山: [118.48, 31.56], 宝鸡: [107.15, 34.38], 焦作: [113.21, 35.24], 句容: [119.16, 31.95], 北京: [116.46, 39.92], 徐州: [117.2, 34.26], 衡水: [115.72, 37.72], 包头: [110, 40.58], 绵阳: [104.73, 31.48], 乌鲁木齐: [87.68, 43.77], 枣庄: [117.57, 34.86], 杭州: [120.19, 30.26], 淄博: [118.05, 36.78], 鞍山: [122.85, 41.12], 溧阳: [119.48, 31.43], 库尔勒: [86.06, 41.68], 安阳: [114.35, 36.1], 开封: [114.35, 34.79], 济南: [117, 36.65], 德阳: [104.37, 31.13], 温州: [120.65, 28.01], 九江: [115.97, 29.71], 邯郸: [114.47, 36.6], 临安: [119.72, 30.23], 兰州: [103.73, 36.03], 沧州: [116.83, 38.33], 临沂: [118.35, 35.05], 南充: [106.110698, 30.837793], 天津: [117.2, 39.13], 富阳: [119.95, 30.07], 泰安: [117.13, 36.18], 诸暨: [120.23, 29.71], 郑州: [113.65, 34.76], 哈尔滨: [126.63, 45.75], 聊城: [115.97, 36.45], 芜湖: [118.38, 31.33], 唐山: [118.02, 39.63], 平顶山: [113.29, 33.75], 邢台: [114.48, 37.05], 德州: [116.29, 37.45], 济宁: [116.59, 35.38], 荆州: [112.239741, 30.335165], 宜昌: [111.3, 30.7], 义乌: [120.06, 29.32], 丽水: [119.92, 28.45], 洛阳: [112.44, 34.7], 秦皇岛: [119.57, 39.95], 株洲: [113.16, 27.83], 石家庄: [114.48, 38.03], 莱芜: [117.67, 36.19], 常德: [111.69, 29.05], 保定: [115.48, 38.85], 湘潭: [112.91, 27.87], 金华: [119.64, 29.12], 岳阳: [113.09, 29.37], 长沙: [113, 28.21], 衢州: [118.88, 28.97], 廊坊: [116.7, 39.53], 菏泽: [115.480656, 35.23375], 合肥: [117.27, 31.86], 武汉: [114.31, 30.52], 大庆: [125.03, 46.58], }; const convertData = function(data: any) { let res = []; for (let i = 0; i < data.length; i++) { let geoCoord = (geoCoordMap as any)[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value), }); } } return res; }; const option = { backgroundColor: '#404a59', title: { text: '全国主要城市空气质量', subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', left: 'center', textStyle: { color: '#fff', }, }, tooltip: { trigger: 'item', }, legend: { orient: 'vertical', y: 'bottom', x: 'right', data: ['pm2.5'], textStyle: { color: '#fff', }, }, geo: { map: 'china', label: { emphasis: { show: false, }, }, roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', }, emphasis: { areaColor: '#2a333d', }, }, }, series: [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function(val: any) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: false, }, emphasis: { show: true, }, }, itemStyle: { normal: { color: '#ddb926', }, }, }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData( data .sort(function(a, b) { return b.value - a.value; }) .slice(0, 6) ), symbolSize: function(val: any) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true, }, }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333', }, }, zlevel: 1, }, ], }; class EchartsEffectScatter extends Component { render() { return ( ); } } export default EchartsEffectScatter; ================================================ FILE: src/components/charts/EchartsForce.tsx ================================================ /** * Created by SEELE on 2017/8/23. */ import React, { Component } from 'react'; import ReactEcharts from 'echarts-for-react'; const option = { title: { text: '', }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', label: { normal: { show: true, textStyle: { fontSize: 12, }, }, }, legend: { x: 'center', show: false, data: ['朋友', '战友', '亲戚'], }, series: [ { type: 'graph', layout: 'force', symbolSize: 45, focusNodeAdjacency: true, roam: true, categories: [ { name: '朋友', itemStyle: { normal: { color: '#009800', }, }, }, { name: '战友', itemStyle: { normal: { color: '#4592FF', }, }, }, { name: '亲戚', itemStyle: { normal: { color: '#3592F', }, }, }, ], label: { normal: { show: true, textStyle: { fontSize: 12, }, }, }, force: { repulsion: 1000, }, edgeSymbolSize: [4, 50], edgeLabel: { normal: { show: true, textStyle: { fontSize: 10, }, formatter: '{c}', }, }, data: [ { name: '徐贱云', draggable: true, }, { name: '冯可梁', category: 1, draggable: true, }, { name: '邓志荣', category: 1, draggable: true, }, { name: '李荣庆', category: 1, draggable: true, }, { name: '郑志勇', category: 1, draggable: true, }, { name: '赵英杰', category: 1, draggable: true, }, { name: '王承军', category: 1, draggable: true, }, { name: '陈卫东', category: 1, draggable: true, }, { name: '邹劲松', category: 1, draggable: true, }, { name: '赵成', category: 1, draggable: true, }, { name: '陈现忠', category: 1, draggable: true, }, { name: '陶泳', category: 1, draggable: true, }, { name: '王德福', category: 1, draggable: true, }, ], links: [ { source: 0, target: 1, category: 0, value: '朋友', }, { source: 0, target: 2, value: '战友', }, { source: 0, target: 3, value: '房东', }, { source: 0, target: 4, value: '朋友', }, { source: 1, target: 2, value: '表亲', }, { source: 0, target: 5, value: '朋友', }, { source: 4, target: 5, value: '姑姑', }, { source: 2, target: 8, value: '叔叔', }, { source: 0, target: 12, value: '朋友', }, { source: 6, target: 11, value: '爱人', }, { source: 6, target: 3, value: '朋友', }, { source: 7, target: 5, value: '朋友', }, { source: 9, target: 10, value: '朋友', }, { source: 3, target: 10, value: '朋友', }, { source: 2, target: 11, value: '同学', }, ], lineStyle: { normal: { opacity: 0.9, width: 1, curveness: 0, }, }, }, ], }; class EchartsForce extends Component { render() { return ( ); } } export default EchartsForce; ================================================ FILE: src/components/charts/EchartsGraphnpm.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; import { npmDependencies } from '../../service'; class EchartsGraphnpm extends React.Component { state = { option: { title: { text: 'NPM Dependencies', }, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { type: 'graph', layout: 'none', // progressiveThreshold: 700, data: [], edges: [], label: { emphasis: { position: 'right', show: true, }, }, roam: true, focusNodeAdjacency: true, lineStyle: { normal: { width: 0.5, curveness: 0.3, opacity: 0.7, }, }, }, ], }, }; componentDidMount() { npmDependencies().then((npm) => { this.setState({ option: { series: [ { data: npm.nodes.map(function (node: any) { return { x: node.x, y: node.y, id: node.id, name: node.label, symbolSize: node.size, itemStyle: { normal: { color: node.color, }, }, }; }), edges: npm.edges.map(function (edge: any) { return { source: edge.sourceID, target: edge.targetID, }; }), }, ], }, }); }); } render() { return ( ); } } export default EchartsGraphnpm; ================================================ FILE: src/components/charts/EchartsPie.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; const option = { title: { text: 'Customized Pie', left: 'center', top: 20, textStyle: { color: '#777', }, }, tooltip: { trigger: 'item', formatter: '{a}
{b} : {c} ({d}%)', }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1], }, }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '50%'], data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 274, name: '联盟广告' }, { value: 235, name: '视频广告' }, { value: 400, name: '搜索引擎' }, ].sort(function(a, b) { return a.value - b.value; }), roseType: 'angle', label: { normal: { textStyle: { color: '#777', }, }, }, labelLine: { normal: { lineStyle: { color: '#777', }, smooth: 0.2, length: 10, length2: 20, }, }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, shadowColor: '#777', }, }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function(idx: any) { return Math.random() * 200; }, }, ], }; const EchartsPie = () => ( ); export default EchartsPie; ================================================ FILE: src/components/charts/EchartsScatter.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; import { weibo } from '../../service'; require('echarts/map/js/china.js'); class EchartsScatter extends React.Component { state = { option: { backgroundColor: '#404a59', title: { text: '微博签到数据点亮中国', subtext: 'From ThinkGIS', sublink: 'http://www.thinkgis.cn/public/sina', left: 'center', top: 'top', textStyle: { color: '#fff', }, }, tooltip: {}, legend: { left: 'left', data: ['强', '中', '弱'], textStyle: { color: '#ccc', }, }, geo: { map: 'china', label: { emphasis: { show: false, }, }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', }, emphasis: { areaColor: '#2a333d', }, }, }, series: [ { name: '弱', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(37, 140, 249, 0.8)', color: 'rgba(37, 140, 249, 0.8)', }, }, data: [], }, { name: '中', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(14, 241, 242, 0.8)', color: 'rgba(14, 241, 242, 0.8)', }, }, data: [], }, { name: '强', type: 'scatter', coordinateSystem: 'geo', symbolSize: 1, large: true, itemStyle: { normal: { shadowBlur: 2, shadowColor: 'rgba(255, 255, 255, 0.8)', color: 'rgba(255, 255, 255, 0.8)', }, }, data: [], }, ], }, }; componentDidMount() { weibo().then((weiboData) => { weiboData = weiboData.map(function (serieData: any) { var px = serieData[0] / 1000; var py = serieData[1] / 1000; var res = [[px, py]]; for (var i = 2; i < serieData.length; i += 2) { var dx = serieData[i] / 1000; var dy = serieData[i + 1] / 1000; var x = px + dx; var y = py + dy; res.push([parseInt(x.toFixed(2), 10), parseInt(y.toFixed(2), 10), 1]); px = x; py = y; } return res; }); this.setState({ option: { series: [ { data: weiboData[0] }, { data: weiboData[1] }, { data: weiboData[2] }, ], }, }); }); } render() { return ( ); } } export default EchartsScatter; ================================================ FILE: src/components/charts/Recharts.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import RechartsSimpleLineChart from './RechartsSimpleLineChart'; import RechartsBarChart from './RechartsBarChart'; import RechartsRadialBarChart from './RechartsRadialBarChart'; import RechartsRadarChart from './RechartsRadarChart'; class Recharts extends React.Component { render() { return (
) } } export default Recharts; ================================================ FILE: src/components/charts/RechartsBarChart.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'; const data = [ {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, ]; const RechartsBarChart = () => ( ); export default RechartsBarChart; ================================================ FILE: src/components/charts/RechartsRadarChart.tsx ================================================ /** * Created by hao.cheng on 2017/4/22. */ import React from 'react'; import {Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer} from 'recharts'; const data = [ { subject: 'Math', A: 120, B: 110, fullMark: 150 }, { subject: 'Chinese', A: 98, B: 130, fullMark: 150 }, { subject: 'English', A: 86, B: 130, fullMark: 150 }, { subject: 'Geography', A: 99, B: 100, fullMark: 150 }, { subject: 'Physics', A: 85, B: 90, fullMark: 150 }, { subject: 'History', A: 65, B: 85, fullMark: 150 }, ]; const RechartsRadarChart = () => ( ); export default RechartsRadarChart; ================================================ FILE: src/components/charts/RechartsRadialBarChart.tsx ================================================ /** * Created by hao.cheng on 2017/4/22. */ import React from 'react'; import { RadialBarChart, Legend, Tooltip, ResponsiveContainer } from 'recharts'; const data = [ { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8' }, { name: '25-29', uv: 26.69, pv: 4567, fill: '#83a6ed' }, { name: '30-34', uv: 15.69, pv: 1398, fill: '#8dd1e1' }, { name: '35-39', uv: 8.22, pv: 9800, fill: '#82ca9d' }, { name: '40-49', uv: 8.63, pv: 3908, fill: '#a4de6c' }, { name: '50+', uv: 2.63, pv: 4800, fill: '#d0ed57' }, { name: 'unknow', uv: 6.67, pv: 4800, fill: '#ffc658' }, ]; const RechartsRadialBarChart = () => ( {/* */} ); export default RechartsRadialBarChart; ================================================ FILE: src/components/charts/RechartsSimpleLineChart.tsx ================================================ /** * Created by hao.cheng on 2017/4/21. */ import React from 'react'; import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'; const data = [ {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, ]; const RechartsSimpleLineChart = () => ( ); export default RechartsSimpleLineChart; ================================================ FILE: src/components/cssmodule/index.module.less ================================================ @font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-Regular'), url(../../style/font/y6oxFxU60dYw9khW6q8jGw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; } .header { font-size: 7em; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; color: #fff; font-family: Monoton; p { animation: neon1 1.5s ease-in-out infinite alternate; &:hover { color: #FF1177; animation: none; } } } @keyframes neon1 { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177; } } ================================================ FILE: src/components/cssmodule/index.tsx ================================================ /** * * 添加注释 * Created by SEELE on 2018/1/12 * */ import React, { Component } from 'react'; import { Col, Card, Row } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import styles from './index.module.less'; class Cssmodule extends Component { render() { return (

Hello CssModule

 ); } } export default Cssmodule; ================================================ FILE: src/components/dashboard/Dashboard.tsx ================================================ /** * Created by hao.cheng on 2017/5/3. */ import React from 'react'; import { Row, Col, Card, Timeline } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import EchartsViews from './EchartsViews'; import EchartsProjects from './EchartsProjects'; import b1 from '../../style/imgs/b1.jpg'; import { CameraOutlined, CloudOutlined, HeartOutlined, MailOutlined, SyncOutlined, } from '@ant-design/icons'; class Dashboard extends React.Component { render() { return (
收藏

301
云数据

30122
照片

802
邮件

102

任务

10个已经完成，2个待完成，1个正在进行中
新版本迭代会 完成网站设计初版

联调接口

功能验收

登录功能设计

权限验证

页面排版

消息栏

  • test
    鸣人 终于当上火影了！
  • test
    佐助 吊车尾~~
  • test
    小樱 佐助，你好帅！
  • test
    雏田 鸣人君。。。那个。。。我。。喜欢你..

访问量统计

最近7天用户访问量
); } } export default Dashboard; ================================================ FILE: src/components/dashboard/EchartsProjects.tsx ================================================ /** * Created by hao.cheng on 2017/5/5. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; let xAxisData = []; let data = []; for (let i = 0; i < 50; i++) { xAxisData.push(i); data.push(Math.ceil((Math.cos(i / 5) * (i / 5) + i / 6) * 5) + 10); } const option = { title: { text: '最近50天每天项目完成情况', left: 'center', textStyle: { color: '#ccc', fontSize: 10 } }, backgroundColor: '#08263a', xAxis: [{ show: true, data: xAxisData, axisLabel: { textStyle: { color: '#ccc' } } }, { show: false, data: xAxisData }], tooltip: {}, visualMap: { show: false, min: 0, max: 50, dimension: 0, inRange: { color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] } }, yAxis: { axisLine: { show: false }, axisLabel: { textStyle: { color: '#ccc' } }, splitLine: { show: true, lineStyle: { color: '#08263f' } }, axisTick: { show: false } }, series: [ { name: 'Simulate Shadow', type: 'line', data: data, z: 2, showSymbol: false, animationDelay: 0, animationEasing: 'linear', animationDuration: 1200, lineStyle: { normal: { color: 'transparent' } }, areaStyle: { normal: { color: '#08263a', shadowBlur: 50, shadowColor: '#000' } } }, { name: '完成项目数', type: 'bar', data: data, xAxisIndex: 1, z: 3, itemStyle: { normal: { barBorderRadius: 5 } } }], animationEasing: 'elasticOut', animationEasingUpdate: 'elasticOut', animationDelay: function (idx: number) { return idx * 20; }, animationDelayUpdate: function (idx: number) { return idx * 20; } }; const EchartsProjects = () => ( ); export default EchartsProjects; ================================================ FILE: src/components/dashboard/EchartsViews.tsx ================================================ /** * Created by hao.cheng on 2017/5/5. */ import React from 'react'; import ReactEcharts from 'echarts-for-react'; import echarts from 'echarts'; const option = { title: { text: '最近7天用户访问量', left: '50%', show: false, textAlign: 'center' }, tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#ddd' } }, backgroundColor: 'rgba(255,255,255,1)', padding: [5, 10], textStyle: { color: '#7588E4', }, extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)' }, legend: { right: 20, orient: 'vertical', }, xAxis: { type: 'category', data: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06','2017-05-07'], boundaryGap: false, splitLine: { show: true, interval: 'auto', lineStyle: { color: ['#D4DFF5'] } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#609ee9' } }, axisLabel: { margin: 10, textStyle: { fontSize: 10 } } }, yAxis: { type: 'value', splitLine: { lineStyle: { color: ['#D4DFF5'] } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#609ee9' } }, axisLabel: { margin: 0, textStyle: { fontSize: 8 } } }, series: [{ name: '昨日', type: 'line', smooth: true, showSymbol: false, symbol: 'circle', symbolSize: 6, data: ['1200', '1400', '808', '811', '626', '488', '1600'], areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(216, 244, 247,1)' }, { offset: 1, color: 'rgba(216, 244, 247,1)' }], false) } }, itemStyle: { normal: { color: '#58c8da' } }, lineStyle: { normal: { width: 3 } } }] }; const EchartsViews = () => ( ); export default EchartsViews; ================================================ FILE: src/components/env/index.tsx ================================================ /* * File: index.tsx * Desc: 环境配置 * File Created: 2020-08-02 23:00:28 * Author: yezi * ------ * Copyright 2020 - present, yezi */ import React from 'react'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Row, Col, Card, Descriptions } from 'antd'; const getEnvs = () => Object.keys(process.env).filter((key) => /^REACT_ADMIN_/i.test(key)); const Env = () => { const envs = getEnvs(); console.log(process.env); return (
{envs.map((env) => ( {process.env[env]} ))} ); }; export default Env; ================================================ FILE: src/components/extension/MultipleMenu.tsx ================================================ /* * File: MultipleMenu.tsx * Desc: 多级菜单组件 * File Created: 2019-12-18 23:15:35 * Author: chenghao * ------ * Copyright 2019 - present, karakal */ import React from 'react'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Row, Col, Card } from 'antd'; const MultipleMenu = () => { return (
多级菜单的功能扩展
菜单样式可能需要你来调整
 ); }; export default MultipleMenu; ================================================ FILE: src/components/extension/QueryParams.tsx ================================================ /* * File: QueryParams.js * Desc: query参数demo * File Created: 2018-11-25 23:18:09 * Author: chenghao * Copyright 2018 - present, chenghao */ import React, { Component } from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; type QueryParamsProps = { query: any; }; class QueryParams extends Component { render() { const { query } = this.props; return (
参数1： {query.param1}
参数2： {query.param2}
其他参数：{' '} {query.others || ( 点击查看 )}
); } } export default QueryParams; ================================================ FILE: src/components/extension/Visitor.tsx ================================================ /* * File: Visitor.tsx * Desc: 访客 * File Created: 2019-10-25 22:31:37 * Author: chenghao * ------ * Copyright 2019 - present, chenghao */ import React from 'react'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Row, Col, Card } from 'antd'; const Visitor = () => { return ( <> 访客模式的页面，你不需要登录即可访问的页面 ); }; export default Visitor; ================================================ FILE: src/components/index.tsx ================================================ /** * 路由组件出口文件 * yezi 2018年6月24日 */ import Loadable from 'react-loadable'; import Loading from './widget/Loading'; import BasicTable from './tables/BasicTables'; import AdvancedTable from './tables/AdvancedTables'; import AsynchronousTable from './tables/AsynchronousTable'; import Echarts from './charts/Echarts'; import Recharts from './charts/Recharts'; import Icons from './ui/Icons'; import Buttons from './ui/Buttons'; import Spins from './ui/Spins'; import Modals from './ui/Modals'; import Notifications from './ui/Notifications'; import Tabs from './ui/Tabs'; import Banners from './ui/banners'; import Drags from './ui/Draggable'; import Dashboard from './dashboard/Dashboard'; import Gallery from './ui/Gallery'; import BasicAnimations from './animation/BasicAnimations'; import ExampleAnimations from './animation/ExampleAnimations'; import AuthBasic from './auth/Basic'; import RouterEnter from './auth/RouterEnter'; import Cssmodule from './cssmodule'; import MapUi from './ui/map'; import QueryParams from './extension/QueryParams'; import Visitor from './extension/Visitor'; import MultipleMenu from './extension/MultipleMenu'; import Sub1 from './smenu/Sub1'; import Sub2 from './smenu/Sub2'; import Env from './env'; const WysiwygBundle = Loadable({ // 按需加载富文本配置 loader: () => import('./ui/Wysiwyg'), loading: Loading, }); export default { BasicTable, AdvancedTable, AsynchronousTable, Echarts, Recharts, Icons, Buttons, Spins, Modals, Notifications, Tabs, Banners, Drags, Dashboard, Gallery, BasicAnimations, ExampleAnimations, AuthBasic, RouterEnter, WysiwygBundle, Cssmodule, MapUi, QueryParams, Visitor, MultipleMenu, Sub1, Sub2, Env, } as any; ================================================ FILE: src/components/pages/Login.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React, { useEffect } from 'react'; import { Button, Form, Input } from 'antd'; import { PwaInstaller } from '../widget'; import { useAlita } from 'redux-alita'; import { RouteComponentProps } from 'react-router'; import { FormProps } from 'antd/lib/form'; import umbrella from 'umbrella-storage'; import { GithubOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'; import { useUpdateEffect } from 'ahooks'; const FormItem = Form.Item; type LoginProps = { setAlitaState: (param: any) => void; auth: any; } & RouteComponentProps & FormProps; const Login = (props: LoginProps) => { const { history } = props; const [auth, setAlita] = useAlita({ auth: {} }, { light: true }); useEffect(() => { setAlita('auth', null); }, [setAlita]); useUpdateEffect(() => { if (auth && auth.uid) { // 判断是否登陆 umbrella.setLocalStorage('user', auth); history.push('/'); } }, [history, auth]); const handleSubmit = (values: any) => { if (checkUser(values)) { setAlita({ funcName: values.userName, stateName: 'auth' }); } }; const checkUser = (values: any) => { const users = [ ['admin', 'admin'], ['guest', 'guest'], ]; return users.some((user) => user[0] === values.userName && user[1] === values.password); }; const gitHub = () => { window.location.href = 'https://github.com/login/oauth/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin'; }; return (
React Admin
} placeholder="管理员输入admin, 游客输入guest" /> } type="password" placeholder="管理员输入admin, 游客输入guest" /> 忘记密码

或 现在就去注册! (第三方登录)

); }; export default Login; ================================================ FILE: src/components/pages/NotFound.tsx ================================================ /** * Created by hao.cheng on 2017/5/7. */ import React from 'react'; import img from '../../style/imgs/404.png'; class NotFound extends React.Component { state = { animated: '', }; enter = () => { this.setState({ animated: 'hinge' }); }; render() { return (
404
); } } export default NotFound; ================================================ FILE: src/components/smenu/Sub1.tsx ================================================ /* * File: Sub1.tsx * Desc: 异步子菜单 * File Created: 2020-01-21 11:31:15 * Author: chenghao at <865470087@qq.com> * ------ * Copyright 2020 - present, chenghao */ import React from 'react'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Row, Col, Card } from 'antd'; const SmenuSub1 = () => { return (
异步子菜单1
 ); }; export default SmenuSub1; ================================================ FILE: src/components/smenu/Sub2.tsx ================================================ /* * File: Sub2.tsx * Desc: 异步子菜单 * File Created: 2020-01-21 11:31:15 * Author: chenghao at <865470087@qq.com> * ------ * Copyright 2020 - present, chenghao */ import React from 'react'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Row, Col, Card } from 'antd'; const SmenuSub2 = () => { return (
异步子菜单2
 ); }; export default SmenuSub2; ================================================ FILE: src/components/tables/AdvancedTables.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import FixedTable from './FixedTable'; import ExpandedTable from './ExpandedTable'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; class AdvancedTables extends React.Component { render() { return (
{/*
*/} ); } } export default AdvancedTables; ================================================ FILE: src/components/tables/AsynchronousTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React from 'react'; import { Table, Button, Row, Col, Card } from 'antd'; import { getBbcNews } from '../../service'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; const columns = [ { title: '新闻标题', dataIndex: 'title', width: 100, render: (text: any, record: any) => ( {text} ), }, { title: '作者', dataIndex: 'author', width: 80, }, { title: '发布时间', dataIndex: 'publishedAt', width: 80, }, { title: '描述', dataIndex: 'description', width: 200, }, ]; class AsynchronousTable extends React.Component { state = { selectedRowKeys: [], // Check here to configure the default column loading: false, data: [], }; componentDidMount() { this.start(); } start = () => { this.setState({ loading: true }); getBbcNews().then(({ articles }: { articles: any }) => { this.setState({ data: articles, loading: false, }); }); }; onSelectChange = (selectedRowKeys: string[]) => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowKeys }); }; render() { const { loading, selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const hasSelected = selectedRowKeys.length > 0; return (
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
); } } export default AsynchronousTable; ================================================ FILE: src/components/tables/BasicTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table, Button } from 'antd'; import { DownOutlined } from '@ant-design/icons'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', render: (text: any) => {text}, }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: 'Action', key: 'action', render: (text: any, record: any) => ( ), }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; const BasicTable = () =>
; export default BasicTable; ================================================ FILE: src/components/tables/BasicTables.tsx ================================================ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import BasicTable from './BasicTable'; import SelectTable from './SelectTable'; import SortTable from './SortTable'; import SearchTable from './SearchTable'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; const BasicTables = () => (
); export default BasicTables; ================================================ FILE: src/components/tables/ExpandedTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React from 'react'; import { Table, Button } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, { title: 'Action', dataIndex: '', key: 'x', render: () => }, ]; const data = [ { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' }, { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' }, { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' }, ]; const ExpandedTable = () => (

{record.description}

} dataSource={data} /> ); export default ExpandedTable; ================================================ FILE: src/components/tables/FixedTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React from 'react'; import { Table } from 'antd'; import { ColumnProps } from 'antd/lib/table'; const columns: ColumnProps[] = [ { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' }, { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' }, { title: 'Column 1', dataIndex: 'address', key: '1' }, { title: 'Column 2', dataIndex: 'address', key: '2' }, { title: 'Column 3', dataIndex: 'address', key: '3' }, { title: 'Column 4', dataIndex: 'address', key: '4' }, { title: 'Column 5', dataIndex: 'address', key: '5' }, { title: 'Column 6', dataIndex: 'address', key: '6' }, { title: 'Column 7', dataIndex: 'address', key: '7' }, { title: 'Column 8', dataIndex: 'address', key: '8' }, { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => action, }, ]; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York Park', }, { key: '2', name: 'Jim Green', age: 40, address: 'London Park', }, ]; const FixedTable = () =>
; export default FixedTable; ================================================ FILE: src/components/tables/SearchTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/16. */ import React from 'react'; import { Table, Input, Button } from 'antd'; import { SmileOutlined } from '@ant-design/icons'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Jim Green', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; class SearchTable extends React.Component { state = { filterDropdownVisible: false, data, searchText: '', filtered: false, }; searchInput: any; onInputChange = (e: any) => { this.setState({ searchText: e.target.value }); }; onSearch = () => { const { searchText } = this.state; const reg = new RegExp(searchText, 'gi'); this.setState({ filterDropdownVisible: false, filtered: !!searchText, data: data .map((record) => { const match = record.name.match(reg); if (!match) { return null; } return { ...record, name: ( {record.name .split(reg) .map((text, i) => i > 0 ? [{match[0]}, text] : text )} ), }; }) .filter((record) => !!record), }); }; render() { const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', filterDropdown: (
(this.searchInput = ele)} placeholder="Search name" value={this.state.searchText} onChange={this.onInputChange} onPressEnter={this.onSearch} />
), filterIcon: ( ), filterDropdownVisible: this.state.filterDropdownVisible, onFilterDropdownVisibleChange: (visible: boolean) => this.setState({ filterDropdownVisible: visible }, () => this.searchInput.focus() ), }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', filters: [ { text: 'London', value: 'London', }, { text: 'New York', value: 'New York', }, ], onFilter: (value: any, record: any) => record.address.indexOf(value) === 0, }, ]; return (
); } } export default SearchTable; ================================================ FILE: src/components/tables/SelectTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table } from 'antd'; // import { TableRowSelection } from 'antd/lib/table'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const data: any[] = []; for (let i = 0; i < 46; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } class SelectTable extends React.Component { state = { selectedRowKeys: [], // Check here to configure the default column }; onSelectChange = (selectedRowKeys: string[] | number[]) => { console.log('selectedRowKeys changed: ', selectedRowKeys); this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection: any = { selectedRowKeys, onChange: this.onSelectChange, selections: [ { key: 'odd', text: '选择奇数列', onSelect: (changableRowKeys: string[]) => { let newSelectedRowKeys = []; newSelectedRowKeys = changableRowKeys.filter((key, index) => { if (index % 2 !== 0) { return false; } return true; }); this.setState({ selectedRowKeys: newSelectedRowKeys }); }, }, { key: 'even', text: '选择偶数列', onSelect: (changableRowKeys: string[]) => { let newSelectedRowKeys = []; newSelectedRowKeys = changableRowKeys.filter((key, index) => { if (index % 2 !== 0) { return true; } return false; }); this.setState({ selectedRowKeys: newSelectedRowKeys }); }, }, ], // onSelection: this.onSelection, }; return
; } } export default SelectTable; ================================================ FILE: src/components/tables/SortTable.tsx ================================================ /** * Created by hao.cheng on 2017/4/15. */ import React from 'react'; import { Table, Button } from 'antd'; const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park', }, ]; type SortTableState = { filteredInfo: any; sortedInfo: any; }; class SortTable extends React.Component { constructor(props: any) { super(props); this.state = { filteredInfo: {}, sortedInfo: {}, }; } handleChange = (pagination: any, filters: any, sorter: any) => { console.log('Various parameters', pagination, filters, sorter); this.setState({ filteredInfo: filters, sortedInfo: sorter, }); }; clearFilters = () => { this.setState({ filteredInfo: null }); }; clearAll = () => { this.setState({ filteredInfo: null, sortedInfo: null, }); }; setAgeSort = () => { this.setState({ sortedInfo: { order: 'descend', columnKey: 'age', }, }); }; render() { let { sortedInfo, filteredInfo } = this.state; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }], filteredValue: filteredInfo.name || null, onFilter: (value: any, record: any) => record.name.includes(value), sorter: (a: any, b: any) => a.name.length - b.name.length, sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, }, { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a: any, b: any) => a.age - b.age, sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, }, { title: 'Address', dataIndex: 'address', key: 'address', filters: [ { text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }, ], filteredValue: filteredInfo.address || null, onFilter: (value: any, record: any) => record.address.includes(value), sorter: (a: any, b: any) => a.address.length - b.address.length, sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order, }, ]; return (
); } } export default SortTable; ================================================ FILE: src/components/ui/Buttons.tsx ================================================ /** * Created by hao.cheng on 2017/4/23. */ import React from 'react'; import { Row, Col, Card, Button, Radio, Menu, Dropdown } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { RadioChangeEvent } from 'antd/lib/radio'; import { ButtonSize } from 'antd/lib/button'; import { DownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'; type ButtonsState = { size: ButtonSize; loading: boolean; iconLoading: boolean; }; class Buttons extends React.Component { constructor(props: any) { super(props); this.state = { size: 'middle', loading: false, iconLoading: false, }; } handleSizeChange = (e: RadioChangeEvent) => { this.setState({ size: e.target.value }); }; handleMenuClick = (e: any) => { console.log('click', e); }; enterLoading = () => { this.setState({ loading: true }); }; enterIconLoading = () => { this.setState({ iconLoading: true }); }; render() { const size = this.state.size; const menu = ( 1st item 2nd item 3rd item ); return (

Large Middle Small




); } } export default Buttons; ================================================ FILE: src/components/ui/Draggable.tsx ================================================ /** * Created by hao.cheng on 2017/4/28. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import Draggable from 'react-draggable'; class Drags extends React.Component { state = { activeDrags: 0, deltaPosition: { x: 0, y: 0, }, controlledPosition: { x: -400, y: 200, }, }; onStart = () => { let { activeDrags } = this.state; this.setState({ activeDrags: ++activeDrags }); }; onStop = () => { let { activeDrags } = this.state; this.setState({ activeDrags: --activeDrags }); }; handleDrag = (e: any, ui: any) => { const { x, y } = this.state.deltaPosition; this.setState({ deltaPosition: { x: x + ui.deltaX, y: y + ui.deltaY, }, }); }; render() { const dragHandlers = { onStart: this.onStart, onStop: this.onStop }; const { deltaPosition } = this.state; return (
I can be dragged anywhere
I can only be dragged horizonally (x axis)
I can only be dragged vertically (y axis)
I track my deltas
x: {deltaPosition.x.toFixed(0)}, y:{' '} {deltaPosition.y.toFixed(0)}
Drag here
You must click my handle to drag me
Can't drag here
Dragging here works
I can only be moved 100px in any direction.
); } } export default Drags; ================================================ FILE: src/components/ui/Gallery.tsx ================================================ /** * Created by hao.cheng on 2017/5/6. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import PhotoSwipe from 'photoswipe'; import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'; import 'photoswipe/dist/photoswipe.css'; import 'photoswipe/dist/default-skin/default-skin.css'; class Gallery extends React.Component { state = { gallery: null, }; componentDidMount() {} componentWillUnmount = () => { this.closeGallery(); }; pswpElement: any; gallery: any; openGallery = (item: any) => { const items = [ { src: item, w: 0, h: 0, }, ]; const pswpElement = this.pswpElement; const options = { index: 0 }; this.gallery = new PhotoSwipe(pswpElement, PhotoswipeUIDefault, items, options); this.gallery.listen('gettingData', (index: number, item: any) => { const _this = this; if (item.w < 1 || item.h < 1) { // unknown size var img = new Image(); img.onload = function () { // will get size after load item.w = (this as any).width; // set image width item.h = (this as any).height; // set image height _this.gallery.invalidateCurrItems(); // reinit Items _this.gallery.updateSize(true); // reinit Items }; img.src = item.src; // let's download image } }); this.gallery.init(); }; closeGallery = () => { if (!this.gallery) return; this.gallery.close(); }; render() { const imgs = [ [ 'http://img.hb.aicdn.com/1cad414972c5db2b8c1942289e3aeef37175006a8bb16-CBtjtX_fw', 'http://img.hb.aicdn.com/016f2e13934397e17c3482a4529f3da1149d37fd2a99c-RVM1Gi_fw', 'http://img.hb.aicdn.com/8c5d5f2bf6427d1b5ed8657a7ae0c9938d3465e367899-AJ0zVA_fw', 'http://img.hb.aicdn.com/bd71ccac0b16bbcade255a1a8a63504d71c7dee9a8652-zBCN9d_fw', 'http://img.hb.aicdn.com/37a40cb04345463858d45418ae6ed9ef319e30dc37a45-o4pQ0j_fw', ], [ 'http://img.hb.aicdn.com/5fad6c3a14a9b80c4448835bb6b23ab895d18e234eff3-BPGmox_fw', 'http://img.hb.aicdn.com/a1a19de5dac212a646ba6967ef565786399fb1665bd04-EEvwzR_fw', 'http://img.hb.aicdn.com/06595f8044e881de3a82d691768bc8c21a2a9f3633d60-XKjC2s_fw', 'http://img.hb.aicdn.com/880787b36d45efbe05aa409c867db29a3028e02da7f9b-qxGib9_fw', 'http://img.hb.aicdn.com/4964b97f6f6eb61a20922b40842adf0169c44e491c4b60-azX1S7_fw', ], [ 'http://img.hb.aicdn.com/ff97d00944edfc706c62dd5c0e955c4099a37b407534f-BcUqf0_fw', 'http://img.hb.aicdn.com/0e22be22b08c6f78b94283b6cfa890093ac3cae8401e7-b1ftfi_fw', 'http://img.hb.aicdn.com/879f870e15f7cc0847c8ae19a5fcbe974d5904bb181d7-RGmtNU_fw', 'http://img.hb.aicdn.com/b4a8e62958555a97dc3de9ccb03284bf556c042925522-x50qGv_fw', 'http://img.hb.aicdn.com/1ef493a15674e9fd523b248ea4ec43d2ea9ce6952ff3e-WavWKc_fw', ], [ 'http://img.hb.aicdn.com/8e16efec78ac4a3684fc8999d18e3661af40fd4510a25-DDvQON_fw', 'http://img.hb.aicdn.com/61dfa024c8040e6a5bcb03d42928fbcb0c87c1a54e731-yc4lvV_fw', 'http://img.hb.aicdn.com/6783b4d7811ad7fb87b1446c5488b91179f7608118289-hpEyP3_fw', 'http://img.hb.aicdn.com/7be61ba6bdb20a73be63edc387b16eec72d0bbb51c7ef-XafA07_fw', 'http://img.hb.aicdn.com/bd3ba3f907fe098b911947e0020615b50fc340ed2df72-WsuHuM_fw', ], [ 'http://img.hb.aicdn.com/71471aaac95eade66400a390863b37c76d9addcd14982-0H6sak_fw', 'http://img.hb.aicdn.com/cb16c68c4d3b7a08b5e91cd351f6b723634ca3fc27d4d-m1JD8z_fw', 'http://img.hb.aicdn.com/e3559b6e8d7237857382050e5659a64cc0b7d696a2869-stcRXA_fw', 'http://img.hb.aicdn.com/4ea229436fcf2077502953907a6afb16d3c5cd611b8e2-0dVIeH_fw', 'http://img.hb.aicdn.com/98c786f4314736f95a42bf927bf65a82d305a532c6258-njI6id_fw', ], ]; const imgsTag = imgs.map((v1) => v1.map((v2) => (
this.openGallery(v2)} alt="example" width="100%" src={v2} />
)) ); return (
{imgsTag[0]} {imgsTag[1]} {imgsTag[2]} {imgsTag[3]} {imgsTag[4]}
    {emojiList()}
    {iconsList}
); export default Icons; ================================================ FILE: src/components/ui/Modals.tsx ================================================ /** * Created by hao.cheng on 2017/4/23. */ import React, { Component } from 'react'; import { Row, Col, Card, Modal, Button } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; const confirm = Modal.confirm; class S extends Component { state = { visible: false, ModalText2: 'Content of the modal dialog', visible2: false, loading3: false, visible3: false, modal1Visible: false, modal2Visible: false, confirmLoading2: false, }; showModal = () => { this.setState({ visible: true, }); }; handleOk = (e: React.MouseEvent) => { console.log(e); this.setState({ visible: false, }); }; handleCancel = (e: React.MouseEvent) => { console.log(e); this.setState({ visible: false, }); }; showModal2 = () => { this.setState({ visible2: true, }); }; handleOk2 = () => { this.setState({ ModalText2: 'The modal dialog will be closed after two seconds', confirmLoading2: true, }); setTimeout(() => { this.setState({ visible2: false, confirmLoading2: false, }); }, 2000); }; setModal1Visible = (modal1Visible: boolean) => { this.setState({ modal1Visible }); }; setModal2Visible = (modal2Visible: boolean) => { this.setState({ modal2Visible }); }; handleCancel2 = () => { console.log('Clicked cancel button'); this.setState({ visible2: false, }); }; showModal3 = () => { this.setState({ visible3: true, }); }; handleOk3 = () => { this.setState({ loading3: true }); setTimeout(() => { this.setState({ loading3: false, visible3: false }); }, 3000); }; handleCancel3 = () => { this.setState({ visible3: false }); }; showConfirm4 = () => { confirm({ title: 'Want to delete these items?', content: 'some descriptions', onOk() { console.log('OK'); }, onCancel() { console.log('Cancel'); }, }); }; info = () => { Modal.info({ title: 'This is a notification message', content: (

some messages...some messages...

some messages...some messages...

), onOk() {}, }); }; success = () => { Modal.success({ title: 'This is a success message', content: 'some messages...some messages...', }); }; error = () => { Modal.error({ title: 'This is an error message', content: 'some messages...some messages...', }); }; warning = () => { Modal.warning({ title: 'This is a warning message', content: 'some messages...some messages...', }); }; render() { return (

some contents...

some contents...

some contents...

{this.state.ModalText2}

Return , , ]} >

Some contents...

Some contents...

Some contents...

Some contents...

Some contents...

this.setModal1Visible(false)} onCancel={() => this.setModal1Visible(false)} >

some contents...

some contents...

some contents...



this.setModal2Visible(false)} onCancel={() => this.setModal2Visible(false)} >

some contents...

some contents...

some contents...

); } } export default S; ================================================ FILE: src/components/ui/Notifications.tsx ================================================ /** * Created by hao.cheng on 2017/4/25. */ import React, { Component } from 'react'; import { Row, Col, Card, Button, notification, Select } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { IconType, ConfigProps } from 'antd/lib/notification'; import { SmileOutlined } from '@ant-design/icons'; const { Option } = Select; const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']; class Notifications extends Component { openNotification = () => { notification.open({ message: 'Notification Title', description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', }); }; openNotification2 = () => { const args = { message: 'Notification Title', description: 'I will never close automatically. I will be close automatically. I will never close automatically.', duration: 0, }; notification.open(args); }; openNotificationWithIcon = (type: IconType) => { notification[type]({ message: 'Notification Title', description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', }); }; openNotification3 = () => { const key = `open${Date.now()}`; const btnClick = function () { // to hide notification box notification.close(key); }; const btn = ( ); notification.open({ message: 'Notification Title', description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).', btn, key, onClose: this.close, }); }; close = () => { console.log( 'Notification was closed. Either the close button was clicked or duration time elapsed.' ); }; openNotification4 = () => { notification.open({ message: 'Notification Title', description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', icon: , }); }; render() { return (
); } } export default Notifications; ================================================ FILE: src/components/ui/Spins.tsx ================================================ /** * Created by hao.cheng on 2017/4/23. */ import React from 'react'; import { Row, Col, Card, Spin, Alert, Switch, Button } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; class Spins extends React.Component { state = { loading: false }; toggle = (value: boolean) => { this.setState({ loading: value }); }; nprogressStart = () => { NProgress.start(); }; nprogressDone = () => { NProgress.done(); }; render() { const container = ( ); return (
{container} Loading state：

顶部进度条

); } } export default Spins; ================================================ FILE: src/components/ui/Tabs.tsx ================================================ /** * Created by hao.cheng on 2017/4/25. */ import React, { Component } from 'react'; import { Row, Col, Card, Tabs, Radio, Button } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { RadioChangeEvent } from 'antd/lib/radio'; import { TabsPosition } from 'antd/lib/tabs'; import { AndroidOutlined, AppleOutlined } from '@ant-design/icons'; const TabPane = Tabs.TabPane; type TabsCustomState = { activeKey: string; panes: any; mode: TabsPosition; }; class TabsCustom extends Component { constructor(props: any) { super(props); const panes = [ { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' }, { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' }, ]; this.state = { activeKey: panes[0].key, panes, mode: 'top', }; } newTabIndex: number = 0; callback = (key: string) => { console.log(key); }; handleModeChange = (e: RadioChangeEvent) => { const mode = e.target.value; this.setState({ mode }); }; onChange = (activeKey: string) => { this.setState({ activeKey }); }; onEdit = (targetKey: string | React.MouseEvent, action: 'add' | 'remove'): any => { this[action](targetKey as string); }; add = () => { const panes = this.state.panes; const activeKey = `newTab${this.newTabIndex++}`; panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey }); this.setState({ panes, activeKey }); }; remove = (targetKey: string) => { let activeKey = this.state.activeKey; let lastIndex = 0; this.state.panes.forEach((pane: any, i: number) => { if (pane.key === targetKey) { lastIndex = i - 1; } }); const panes = this.state.panes.filter((pane: any) => pane.key !== targetKey); if (lastIndex >= 0 && activeKey === targetKey) { activeKey = panes[lastIndex].key; } this.setState({ panes, activeKey }); }; render() { const { mode } = this.state; return (
Content of Tab Pane 1 Content of Tab Pane 2 Content of Tab Pane 3
Tab 1 } key="1" > Tab 1 Tab 2 } key="2" > Tab 2
Content of Tab Pane 1 Content of Tab Pane 2 Content of Tab Pane 3
Tab 1 Tab 2 Tab 3
Horizontal Vertical Content of tab 1 Content of tab 2 Content of tab 3 Content of tab 4 Content of tab 5 Content of tab 6 Content of tab 7 Content of tab 8 Content of tab 9
{this.state.panes.map((pane: any) => ( {pane.content} ))}
); } } export default TabsCustom; ================================================ FILE: src/components/ui/Wysiwyg.tsx ================================================ /** * Created by hao.cheng on 2017/4/26. */ import React, { Component } from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../widget/BreadcrumbCustom'; import { Editor } from 'react-draft-wysiwyg'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; import draftToHtml from 'draftjs-to-html'; import draftToMarkdown from 'draftjs-to-markdown'; import { EditorState } from 'draft-js'; const rawContentState = { entityMap: { '0': { type: 'IMAGE', mutability: 'MUTABLE', data: { src: 'http://i.imgur.com/aMtBIep.png', height: 'auto', width: '100%' }, }, }, blocks: [ { key: '9unl6', text: '', type: 'unstyled', depth: 0, inlineStyleRanges: [], entityRanges: [], data: {}, }, { key: '95kn', text: ' ', type: 'atomic', depth: 0, inlineStyleRanges: [], entityRanges: [{ offset: 0, length: 1, key: 0 }], data: {}, }, { key: '7rjes', text: '', type: 'unstyled', depth: 0, inlineStyleRanges: [], entityRanges: [], data: {}, }, ], }; type WysiwygState = { editorContent: any; contentState: any; editorState: EditorState | undefined; }; class Wysiwyg extends Component { state: WysiwygState = { editorContent: undefined, contentState: rawContentState, editorState: undefined, }; onEditorChange = (editorContent: any) => { this.setState({ editorContent, }); }; clearContent = () => { this.setState({ contentState: '', }); }; onContentStateChange = (contentState: any) => { console.log('contentState', contentState); }; onEditorStateChange = (editorState: any) => { this.setState({ editorState, }); }; imageUploadCallBack = (file: any) => new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); // eslint-disable-line no-undef xhr.open('POST', 'https://api.imgur.com/3/image'); xhr.setRequestHeader('Authorization', 'Client-ID 8d26ccd12712fca'); const data = new FormData(); // eslint-disable-line no-undef data.append('image', file); xhr.send(data); xhr.addEventListener('load', () => { const response = JSON.parse(xhr.responseText); resolve(response); }); xhr.addEventListener('error', () => { const error = JSON.parse(xhr.responseText); reject(error); }); }); render() { const { editorContent, editorState } = this.state; return (
{ console.log('focus'); }} onBlur={() => { console.log('blur'); }} onTab={() => { console.log('tab'); return true; }} localization={{ locale: 'zh', translations: { 'generic.add': 'Test-Add' }, }} mention={{ separator: ' ', trigger: '@', caseSensitive: true, suggestions: [ { text: 'A', value: 'AB', url: 'href-a' }, { text: 'AB', value: 'ABC', url: 'href-ab' }, { text: 'ABC', value: 'ABCD', url: 'href-abc' }, { text: 'ABCD', value: 'ABCDDDD', url: 'href-abcd' }, { text: 'ABCDE', value: 'ABCDE', url: 'href-abcde' }, { text: 'ABCDEF', value: 'ABCDEF', url: 'href-abcdef' }, { text: 'ABCDEFG', value: 'ABCDEFG', url: 'href-abcdefg', }, ], }} /> 
{draftToHtml(editorContent)}
 
                                {draftToMarkdown(editorContent)}
                            
                                {JSON.stringify(editorContent)}
); } } export default Wysiwyg; ================================================ FILE: src/components/ui/banners/AutoPlay.tsx ================================================ /** * Created by hao.cheng on 2017/4/26. */ import React from 'react'; import BannerAnim, { Element } from 'rc-banner-anim'; import TweenOne from 'rc-tween-one'; import 'rc-banner-anim/assets/index.css'; const BgElement = Element.BgElement; class AutoPlay extends React.Component { render(){ return ( Ant Motion Banner The Fast Way Use Animation In React Ant Motion Banner The Fast Way Use Animation In React ); } } export default AutoPlay; ================================================ FILE: src/components/ui/banners/Basic.tsx ================================================ /** * Created by hao.cheng on 2017/4/26. */ import React from 'react'; import BannerAnim, { Element } from 'rc-banner-anim'; import TweenOne from 'rc-tween-one'; import 'rc-banner-anim/assets/index.css'; const BgElement = Element.BgElement; class Basic extends React.Component { render(){ return ( Ant Motion Banner The Fast Way Use Animation In React Ant Motion Banner The Fast Way Use Animation In React ); } } export default Basic; ================================================ FILE: src/components/ui/banners/Custom.tsx ================================================ /** * Created by hao.cheng on 2017/4/26. */ import React from 'react'; import BannerAnim from 'rc-banner-anim'; import TweenOne, { TweenOneGroup } from 'rc-tween-one'; import 'rc-banner-anim/assets/index.css'; const { Element, Arrow, Thumb } = BannerAnim; const BgElement = Element.BgElement; type CustomState = { intShow: number; prevEnter: boolean; nextEnter: boolean; thumbEnter: boolean; }; class Custom extends React.Component { imgArray: string[]; constructor(props: any) { super(props); this.imgArray = [ 'https://zos.alipayobjects.com/rmsportal/hzPBTkqtFpLlWCi.jpg', 'https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg', ]; this.state = { intShow: 0, prevEnter: false, nextEnter: false, thumbEnter: false, }; } onChange = (type: string, int: number) => { if (type === 'before') { this.setState({ intShow: int, }); } }; getNextPrevNumber() { let nextInt = this.state.intShow + 1; let prevInt = this.state.intShow - 1; if (nextInt >= this.imgArray.length) { nextInt = 0; } if (prevInt < 0) { prevInt = this.imgArray.length - 1; } return [prevInt, nextInt]; } prevEnter() { this.setState({ prevEnter: true, }); } prevLeave() { this.setState({ prevEnter: false, }); } nextEnter() { this.setState({ nextEnter: true, }); } nextLeave() { this.setState({ nextEnter: false, }); } onMouseEnter() { this.setState({ thumbEnter: true, }); } onMouseLeave() { this.setState({ thumbEnter: false, }); } render() { const intArray = this.getNextPrevNumber(); const thumbChildren = this.imgArray.map((img, i) => ( )); return ( Ant Motion Banner The Fast Way Use Animation In React Ant Motion Banner The Fast Way Use Animation In React
  • {thumbChildren} ); } } export default Custom; ================================================ FILE: src/components/ui/banners/index.tsx ================================================ /** * Created by hao.cheng on 2017/4/26. */ import React from 'react'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../../widget/BreadcrumbCustom'; import Basic from './Basic'; import AutoPlay from './AutoPlay'; // import Custom from './Custom'; class Banners extends React.Component { render() { return (
    • {/*引入自定义会导致组件冲突不显示*/} {/**/}
    ); } } export default Banners; ================================================ FILE: src/components/ui/emoji/iconfont.ts ================================================ function setFont(): void { var svgSprite: string | null = ''; var script = (function() { var scripts = document.getElementsByTagName('script'); return scripts[scripts.length - 1]; })(); var shouldInjectCss = script.getAttribute('data-injectcss'); var ready = function(fn: any) { if (document.addEventListener) { if (~['complete', 'loaded', 'interactive'].indexOf(document.readyState)) { setTimeout(fn, 0); } else { var loadFn = function() { document.removeEventListener('DOMContentLoaded', loadFn, false); fn(); }; document.addEventListener('DOMContentLoaded', loadFn, false); } } else if ((document as any).attachEvent) { IEContentLoaded(window, fn); } function IEContentLoaded(w: any, fn: any) { var d = w.document, done = false, init = function() { if (!done) { done = true; fn(); } }; var polling = function() { try { d.documentElement.doScroll('left'); } catch (e) { setTimeout(polling, 50); return; } init(); }; polling(); d.onreadystatechange = function() { if (d.readyState === 'complete') { d.onreadystatechange = null; init(); } }; } }; var before = function(el: any, target: any) { target.parentNode.insertBefore(el, target); }; var prepend = function(el: any, target: any) { if (target.firstChild) { before(el, target.firstChild); } else { target.appendChild(el); } }; function appendSvg() { var div, svg; div = document.createElement('div'); div.innerHTML = svgSprite!; svgSprite = null; svg = div.getElementsByTagName('svg')[0]; if (svg) { svg.setAttribute('aria-hidden', 'true'); svg.style.position = 'absolute'; svg.style.width = '0px'; svg.style.height = '0px'; svg.style.overflow = 'hidden'; prepend(svg, document.body); } } if (shouldInjectCss && !(window as any).__iconfont__svg__cssinject__) { (window as any).__iconfont__svg__cssinject__ = true; try { document.write( '' ); } catch (e) { console && console.log(e); } } ready(appendSvg); } export default setFont; ================================================ FILE: src/components/ui/emoji/index.tsx ================================================ /** * Created by hao.cheng on 2017/4/22. */ import React from 'react'; import PropTypes from 'prop-types'; import setFont from './iconfont'; setFont(); type EmojiProps = { type: string; }; const Emoji = ({ type }: EmojiProps) => { const useTag = ``; return ( ); }; Emoji.propTypes = { type: PropTypes.string.isRequired, }; export default Emoji; ================================================ FILE: src/components/ui/map/Tencent.tsx ================================================ import React from 'react'; import ReactQMap from 'react-qmap'; const getContianer = (dom: any) => { const middleControl = document.createElement('div'); middleControl.style.cssText = 'width: 22px;height: 30px;position: absolute;left: 50%;top: 50%;z-index: 999;margin-left: -23px;margin-top: -23px;'; middleControl.innerHTML = ``; dom.appendChild(middleControl); }; export default () => ( ); ================================================ FILE: src/components/ui/map/index.tsx ================================================ import React from 'react'; import Tencent from './Tencent'; import { Row, Col, Card } from 'antd'; import BreadcrumbCustom from '../../widget/BreadcrumbCustom'; export default () => (
    ); ================================================ FILE: src/components/widget/AuthWidget.tsx ================================================ /** * Created by 叶子 on 2017/7/31. */ import { Component } from 'react'; import { connectAlita } from 'redux-alita'; type AuthWidgetProps = { auth: any; children: (param: any) => React.ReactElement; }; class AuthWidget extends Component { render() { const { auth = {} } = this.props; return this.props.children(auth.data || {}); } } export default connectAlita(['auth'])(AuthWidget); ================================================ FILE: src/components/widget/BreadcrumbCustom.tsx ================================================ /** * Created by hao.cheng on 2017/4/22. */ import React, { ReactNode } from 'react'; import { Breadcrumb } from 'antd'; import { Link } from 'react-router-dom'; interface BreadcrumbCustomProps { breads?: ReactNode[]; } const BreadcrumbCustom = (props: BreadcrumbCustomProps) => { const { breads } = props; return ( 首页 {breads?.map((bread, i) => ( {bread} ))} ); }; export default BreadcrumbCustom; ================================================ FILE: src/components/widget/Copyright.tsx ================================================ /* * File: Copyright.tsx * Desc: 版权信息 * File Created: 2020-04-12 22:50:33 * Author: chenghao * ------ * Copyright 2020 - present, karakal */ import React from 'react'; const Copyright = () => { return (
    react-admin ©{new Date().getFullYear()} Created by yezihaohao@yezi.haohao@foxmail.com
    ); }; export default Copyright; ================================================ FILE: src/components/widget/Loading.tsx ================================================ import React from 'react'; export default () => (
    页面加载中...
    ); ================================================ FILE: src/components/widget/PwaInstaller.tsx ================================================ /* * File: PwaInstaller.js * Desc: pwa手动触发安装 * File Created: 2018-11-07 21:13:18 * Author: chenghao * * Copyright 2018 - present, chenghao */ import React, { Component } from 'react'; class PwaInstaller extends Component { state = { installed: true, }; componentDidMount() { window.addEventListener('beforeinstallprompt', this.beforeInstallPrompt); } componentWillUnmount() { window.removeEventListener('beforeinstallprompt', this.beforeInstallPrompt); } deferredPrompt: any; beforeInstallPrompt = (e: Event) => { console.log('beforeinstallprompt Event fired'); // 未安装PWA应用 this.setState({ installed: false }); e.preventDefault(); // Stash the event so it can be triggered later. this.deferredPrompt = e; return false; }; download = () => { if (this.deferredPrompt !== undefined) { // The user has had a postive interaction with our app and Chrome // has tried to prompt previously, so let's show the prompt. this.deferredPrompt.prompt(); // Follow what the user has done with the prompt. this.deferredPrompt.userChoice.then((choiceResult: any) => { console.log(choiceResult.outcome); if (choiceResult.outcome === 'dismissed') { console.log('User cancelled home screen install'); } else { console.log('User added to home screen'); } // We no longer need the prompt. Clear it up. this.deferredPrompt = null; }); } }; render() { const { installed } = this.state; return ( !installed && (
    ) ); } } export default PwaInstaller; ================================================ FILE: src/components/widget/ThemePicker.tsx ================================================ import React, { Component } from 'react'; import { SketchPicker } from 'react-color'; import classNames from 'classnames'; import { SettingOutlined } from '@ant-design/icons'; class ThemePicker extends Component { state = { switcherOn: false, background: localStorage.getItem('@primary-color') || '#313653', }; _switcherOn = () => { this.setState({ switcherOn: !this.state.switcherOn, }); }; _handleChangeComplete = (color: any) => { console.log(color); this.setState({ background: color.hex }); localStorage.setItem('@primary-color', color.hex); (window as any).less.modifyVars({ '@primary-color': color.hex, }); }; render() { const { switcherOn, background } = this.state; return (
    ); } } export default ThemePicker; ================================================ FILE: src/components/widget/index.tsx ================================================ export { default as PwaInstaller } from './PwaInstaller'; export { default as AuthWidget } from './AuthWidget'; export { default as ThemePicker } from './ThemePicker'; export { default as Copyright } from './Copyright'; ================================================ FILE: src/index.tsx ================================================ import React from 'react'; import ReactDOM from 'react-dom'; import { AlitaProvider, setConfig } from 'redux-alita'; import umbrella from 'umbrella-storage'; import Page from './Page'; import * as serviceWorker from './serviceWorker'; import * as apis from './service'; // import { AppContainer } from 'react-hot-loader'; import './style/lib/animate.css'; import './style/index.less'; import './style/antd/index.less'; setConfig(apis); umbrella.config('REACT-ADMIN'); // const render = Component => { // 增加react-hot-loader保持状态刷新操作，如果不需要可去掉并把下面注释的打开 // ReactDOM.render( // // // // // // , // document.getElementById('root') // ); // }; // render(Page); // Webpack Hot Module Replacement API // if (module.hot) { // // 隐藏You cannot change ; it will be ignored 错误提示 // // react-hot-loader 使用在react-router 3.x上引起的提示，react-router 4.x不存在 // // 详情可参照https://github.com/gaearon/react-hot-loader/issues/298 // const orgError = console.error; // eslint-disable-line no-console // console.error = (...args) => { // eslint-disable-line no-console // if (args && args.length === 1 && typeof args[0] === 'string' && args[0].indexOf('You cannot change ;') > -1) { // // React route changed // } else { // // Log the error as normally // orgError.apply(console, args); // } // }; // module.hot.accept('./Page', () => { // render(Page); // }) // } ReactDOM.render( // , // document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA // serviceWorker.unregister(); serviceWorker.register(); ================================================ FILE: src/react-app-env.d.ts ================================================ /// /// /// declare namespace NodeJS { interface ProcessEnv { readonly NODE_ENV: 'development' | 'production' | 'test'; readonly PUBLIC_URL: string; } } declare module '*.bmp' { const src: string; export default src; } declare module '*.gif' { const src: string; export default src; } declare module '*.jpg' { const src: string; export default src; } declare module '*.jpeg' { const src: string; export default src; } declare module '*.png' { const src: string; export default src; } declare module '*.webp' { const src: string; export default src; } declare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FunctionComponent>; const src: string; export default src; } declare module '*.module.css' { const classes: { readonly [key: string]: string }; export default classes; } declare module '*.module.scss' { const classes: { readonly [key: string]: string }; export default classes; } declare module '*.module.sass' { const classes: { readonly [key: string]: string }; export default classes; } declare module '*.module.less' { const classes: { readonly [key: string]: string }; export default classes; } declare module 'draftjs-to-html'; declare module 'draftjs-to-markdown'; declare module 'react-qmap'; ================================================ FILE: src/routes/RouteWrapper.tsx ================================================ /* * File: RouteWrapper.tsx * Desc: 描述 * File Created: 2020-05-19 11:32:58 * Author: chenghao at * ------ * Copyright 2020 - present, karakal */ import React, { useMemo } from 'react'; import DocumentTitle from 'react-document-title'; import queryString from 'query-string'; const RouteWrapper = (props: any) => { let { Comp, route, ...restProps } = props; /** useMemo 缓存query，避免每次生成生的query */ const queryMemo = useMemo(() => { const queryReg = /\?\S*/g; const matchQuery = (reg: RegExp) => { const queryParams = restProps.location.search.match(reg); return queryParams ? queryParams[0] : '{}'; }; return queryString.parse(matchQuery(queryReg)); }, [restProps.location.search]); const mergeQueryToProps = () => { const queryReg = /\?\S*/g; const removeQueryInRouter = (restProps: any, reg: RegExp) => { const { params } = restProps.match; Object.keys(params).forEach((key) => { params[key] = params[key] && params[key].replace(reg, ''); }); restProps.match.params = { ...params }; }; restProps = removeQueryInRouter(restProps, queryReg); const merge = { ...restProps, query: queryMemo, }; return merge; }; return ( ); }; export default RouteWrapper; ================================================ FILE: src/routes/config.ts ================================================ export interface IFMenuBase { key: string; title: string; icon?: string; component?: string; query?: string; requireAuth?: string; route?: string; /** 是否登录校验，true不进行校验（访客） */ login?: boolean; } export interface IFMenu extends IFMenuBase { subs?: IFMenu[]; } const menus: { menus: IFMenu[]; others: IFMenu[] | []; [index: string]: any; } = { menus: [ // 菜单相关路由 { key: '/app/dashboard/index', title: '首页', icon: 'mobile', component: 'Dashboard' }, { key: '/app/ui', title: 'UI', icon: 'scan', subs: [ { key: '/app/ui/buttons', title: '按钮', component: 'Buttons' }, { key: '/app/ui/icons', title: '图标', component: 'Icons' }, { key: '/app/ui/spins', title: '加载中', component: 'Spins' }, { key: '/app/ui/modals', title: '对话框', component: 'Modals' }, { key: '/app/ui/notifications', title: '通知提醒框', component: 'Notifications' }, { key: '/app/ui/tabs', title: '标签页', component: 'Tabs' }, { key: '/app/ui/banners', title: '轮播图', component: 'Banners' }, { key: '/app/ui/wysiwyg', title: '富文本', component: 'WysiwygBundle' }, { key: '/app/ui/drags', title: '拖拽', component: 'Drags' }, { key: '/app/ui/gallery', title: '画廊', component: 'Gallery' }, { key: '/app/ui/map', title: '地图', component: 'MapUi' }, ], }, { key: '/app/animation', title: '动画', icon: 'rocket', subs: [ { key: '/app/animation/basicAnimations', title: '基础动画', component: 'BasicAnimations', }, { key: '/app/animation/exampleAnimations', title: '动画案例', component: 'ExampleAnimations', }, ], }, { key: '/app/table', title: '表格', icon: 'copy', subs: [ { key: '/app/table/basicTable', title: '基础表格', component: 'BasicTable' }, { key: '/app/table/advancedTable', title: '高级表格', component: 'AdvancedTable' }, { key: '/app/table/asynchronousTable', title: '异步表格', component: 'AsynchronousTable', }, ], }, { key: '/app/chart', title: '图表', icon: 'area-chart', subs: [ { key: '/app/chart/echarts', title: 'echarts', component: 'Echarts' }, { key: '/app/chart/recharts', title: 'recharts', component: 'Recharts' }, ], }, { key: '/subs4', title: '页面', icon: 'switcher', subs: [ { key: '/login', title: '登录' }, { key: '/404', title: '404' }, ], }, { key: '/app/auth', title: '权限管理', icon: 'safety', subs: [ { key: '/app/auth/basic', title: '基础演示', component: 'AuthBasic' }, { key: '/app/auth/routerEnter', title: '路由拦截', component: 'RouterEnter', requireAuth: 'auth/testPage', }, ], }, { key: '/app/cssModule', title: 'cssModule', icon: 'star', component: 'Cssmodule', }, { key: '/app/extension', title: '功能扩展', icon: 'bars', subs: [ { key: '/app/extension/queryParams', title: '问号形式参数', component: 'QueryParams', query: '?param1=1¶m2=2', }, { key: '/app/extension/visitor', title: '访客模式', component: 'Visitor', login: true, }, { key: '/app/extension/multiple', title: '多级菜单', subs: [ { key: '/app/extension/multiple/child', title: '多级菜单子菜单', subs: [ { key: '/app/extension/multiple/child/child', title: '多级菜单子子菜单', component: 'MultipleMenu', }, ], }, ], }, { key: '/app/extension/env', title: '环境配置', component: 'Env', }, ], }, ], others: [], // 非菜单相关路由 }; export default menus; ================================================ FILE: src/routes/index.tsx ================================================ /** * Created by 叶子 on 2017/8/13. */ import React from 'react'; import { Route, Redirect, Switch } from 'react-router-dom'; import { useAlita } from 'redux-alita'; import umbrella from 'umbrella-storage'; import AllComponents from '../components'; import routesConfig, { IFMenuBase, IFMenu } from './config'; import { checkLogin } from '../utils'; import RouteWrapper from './RouteWrapper'; type CRouterProps = { auth: any; }; const CRouter = (props: CRouterProps) => { const { auth } = props; const [smenus] = useAlita({ smenus: null }, { light: true }); const getPermits = (): any[] | null => { return auth ? auth.permissions : null; }; const requireAuth = (permit: any, component: React.ReactElement) => { const permits = getPermits(); if (!permits || !permits.includes(permit)) return ; return component; }; const requireLogin = (component: React.ReactElement, permit: any) => { const permits = getPermits(); if (!checkLogin(permits)) { // 线上环境判断是否登录 return ; } return permit ? requireAuth(permit, component) : component; }; const createMenu = (r: IFMenu) => { const route = (r: IFMenuBase) => { const Component = r.component && AllComponents[r.component]; return ( { // 重新包装组件 const wrapper = ( ); return r.login ? wrapper : requireLogin(wrapper, r.requireAuth); }} /> ); }; const subRoute = (r: IFMenu): any => r.subs && r.subs.map((subR: IFMenu) => (subR.subs ? subRoute(subR) : route(subR))); return r.component ? route(r) : subRoute(r); }; const createRoute = (key: string) => routesConfig[key].map(createMenu); const getAsyncMenus = () => smenus || umbrella.getLocalStorage('smenus') || []; return ( {Object.keys(routesConfig).map((key) => createRoute(key))} {getAsyncMenus().map(createMenu)} } /> ); }; export default CRouter; ================================================ FILE: src/service/config.ts ================================================ /** * Created by 叶子 on 2017/7/30. * 接口地址配置文件 */ //easy-mock模拟数据接口地址 const MOCK_API = 'https://react-admin-mock.now.sh/api'; export const MOCK_AUTH_ADMIN = MOCK_API + '/admin.js'; // 管理员权限接口 export const MOCK_AUTH_VISITOR = MOCK_API + '/visitor.js'; // 访问权限接口 /** 服务端异步菜单接口 */ export const MOCK_MENU = MOCK_API + '/menu.js'; // github授权 export const GIT_OAUTH = 'https://github.com/login/oauth'; // github用户 export const GIT_USER = 'https://api.github.com/user'; // bbc top news export const NEWS_BBC = 'https://newsapi.org/v2/top-headlines?sources=bbc-news&apiKey=429904aa01f54a39a278a406acf50070'; ================================================ FILE: src/service/index.ts ================================================ /** * Created by hao.cheng on 2017/4/16. */ import axios from 'axios'; import { get, post } from './tools'; import * as config from './config'; export const getBbcNews = () => get({ url: config.NEWS_BBC }); export const npmDependencies = () => axios .get('./npm.json') .then((res) => res.data) .catch((err) => console.log(err)); export const weibo = () => axios .get('./weibo.json') .then((res) => res.data) .catch((err) => console.log(err)); export const gitOauthLogin = () => get({ url: `${config.GIT_OAUTH}/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin`, }); export const gitOauthToken = (code: string) => post({ url: `https://cors-anywhere.herokuapp.com/${config.GIT_OAUTH}/access_token`, data: { client_id: '792cdcd244e98dcd2dee', client_secret: '81c4ff9df390d482b7c8b214a55cf24bf1f53059', redirect_uri: 'http://localhost:3006/', state: 'reactAdmin', code, }, }); // {headers: {Accept: 'application/json'}} export const gitOauthInfo = (access_token: string) => get({ url: `${config.GIT_USER}access_token=${access_token}` }); // easy-mock数据交互 // 管理员权限获取 export const admin = () => get({ url: config.MOCK_AUTH_ADMIN }); // 访问权限获取 export const guest = () => get({ url: config.MOCK_AUTH_VISITOR }); /** 获取服务端菜单 */ export const fetchMenu = () => get({ url: config.MOCK_MENU }); ================================================ FILE: src/service/tools.ts ================================================ /** * Created by 叶子 on 2017/7/30. * http通用工具函数 */ import axios from 'axios'; import { message } from 'antd'; interface IFRequestParam { url: string; msg?: string; config?: any; data?: any; } /** * 公用get请求 * @param url 接口地址 * @param msg 接口异常提示 * @param headers 接口所需header配置 */ export const get = ({ url, msg = '接口异常', config }: IFRequestParam) => axios .get(url, config) .then((res) => res.data) .catch((err) => { console.log(err); message.warn(msg); }); /** * 公用post请求 * @param url 接口地址 * @param data 接口参数 * @param msg 接口异常提示 * @param headers 接口所需header配置 */ export const post = ({ url, data, msg = '接口异常', config }: IFRequestParam) => axios .post(url, data, config) .then((res) => res.data) .catch((err) => { console.log(err); message.warn(msg); }); ================================================ FILE: src/serviceWorker.ts ================================================ // This optional code is used to register a service worker. // register() is not called by default. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) // will only see deployed updates on subsequent visits to a page, after all the // existing tabs open on the page have been closed, since previously cached // resources are updated in the background. // To learn more about the benefits of this model and instructions on how to // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); type Config = { onSuccess?: (registration: ServiceWorkerRegistration) => void; onUpdate?: (registration: ServiceWorkerRegistration) => void; }; export function register(config?: Config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL( (process as { env: { [key: string]: string } }).env.PUBLIC_URL, window.location.href ); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://bit.ly/CRA-PWA' ); }); } else { // Is not localhost. Just register service worker registerValidSW(swUrl, config); } }); } } function registerValidSW(swUrl: string, config?: Config) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { return; } installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' ); // Execute callback if (config && config.onUpdate) { config.onUpdate(registration); } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); // Execute callback if (config && config.onSuccess) { config.onSuccess(registration); } } } }; }; }) .catch(error => { console.error('Error during service worker registration:', error); }); } function checkValidServiceWorker(swUrl: string, config?: Config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { window.location.reload(); }); }); } else { // Service worker found. Proceed as normal. registerValidSW(swUrl, config); } }) .catch(() => { console.log( 'No internet connection found. App is running in offline mode.' ); }); } export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); } } ================================================ FILE: src/style/antd/header.less ================================================ .header { padding: 0; height: 65px; .ant-menu { background: transparent; color: @white; .ant-menu-item { &:hover { color: @white; } } } } .header__trigger { color: @white; } ================================================ FILE: src/style/antd/index.less ================================================ @import './variables.less'; @import './menu.less'; @import './utils.less'; @import './header.less'; @import './layout.less'; @import './reset.less'; ================================================ FILE: src/style/antd/layout.less ================================================ .ant-layout-content { min-height: auto; } .ant-layout { &.ant-layout-has-sider { &.app_layout-mobile { flex-direction: column; .ant-layout-content { margin: 0; } } } } ================================================ FILE: src/style/antd/menu.less ================================================ .ant-menu-root { &.ant-menu-inline, &.ant-menu-vertical { background: @primary-color; border-right: 1px solid @primary-color; color: @white; a { color: @white; } .ant-menu-submenu-selected, { color: @white; } .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active { color: @white; } .ant-menu-submenu-title { .ant-menu-submenu-arrow { &::before, &::after { background: @white; } } &:hover { color: @white; .ant-menu-submenu-arrow { &::before, &::after { background: @white; } } } } .ant-menu-submenu > .ant-menu { background-color: @primary-color-light; } .ant-menu-item > a:hover { color: @white; } } } .ant-menu-horizontal { > .ant-menu-item-selected { color: @white; } } .sider-custom { .ant-menu-submenu-title { color: @white; } } ================================================ FILE: src/style/antd/reset.less ================================================ /* * File: reset.less * Desc: 样式重写 * File Created: 2020-04-12 23:08:16 * Author: chenghao * ------ * Copyright 2020 - present, karakal */ ================================================ FILE: src/style/antd/utils.less ================================================ [class*=btn] { cursor: pointer } .bg--primary { background: @primary-color; } ================================================ FILE: src/style/antd/variables.less ================================================ @import "../../../node_modules/antd/lib/style/themes/default.less"; // 基础颜色 @white: #ffffff; @primary-color: #313653; @primary-color-light: fade(lighten(@primary-color, 5%), 15%); // 顶部背景色 @layout-header-background:@primary-color; // 左边菜单light颜色 @layout-sider-background-light: #f9f9f9; // 字体颜色 @text-color: #000000; @table-selected-row-bg: #fbfbfb; @primary-2: @primary-color-light; // 基础圆角 @border-radius-base: 2px; // 输入框后缀背景色 @input-addon-bg: @primary-color; ================================================ FILE: src/style/app.less ================================================ /* * File: app.less * Desc: 描述 * File Created: 2020-07-26 18:27:37 * Author: yezi * ------ * Copyright 2020 - present, yezi */ @prefix: app; .@{prefix} { &_layout { flex-direction: column; &_content { margin: 0 16px; overflow: initial; flex: 1 1 0; } &_foot { text-align: center; } } } ================================================ FILE: src/style/banner.less ================================================ .banner-user { height: 200px; } .banner-user-elem { text-align: center; color: #fff; position: relative; overflow: hidden; .banner-user-title { font-size: 32px; top: 40%; } .banner-user-text { top: 40%; } } .banner-anim-elem { .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } } .custom-arrow-thumb{ height: 220px; .user-arrow { top: 50%; margin-top: -40px; .img-wrapper { width: 120px; height: 80px; float: left; position: relative; li { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; } } .arrow { width: 20px; height: 80px; background: rgba(0, 0, 0, 0.3); position: relative; &:before, &:after { width: 2px; height: 15px; background: #fff; display: block; content: ' '; position: absolute; } } &.next { right: -120px; .arrow { float: left; &:before { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); top: 28px; left: 10px; } &:after { -webkit-transform: rotate(40deg); transform: rotate(40deg); bottom: 27px; left: 10px; } } } &.prev { left: -120px; .arrow { float: right; &:before { -webkit-transform: rotate(40deg); transform: rotate(40deg); top: 28px; left: 8px; } &:after { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); bottom: 27px; left: 8px; } } } } .user-thumb { overflow: hidden; background: rgba(255, 255, 255, 0.15); height: 40px; > span { width: 50px; height: 30px; margin: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); -webkit-transition: background .3s; transition: background .3s; background: transparent; &.active { background: rgba(255, 255, 255, 0.45); } i { display: block; width: 46px; height: 26px; margin: 2px; background-size: cover; background-position: center; } } } } ================================================ FILE: src/style/button.less ================================================ .ant-btn+.ant-btn { margin-left: 10px; } ================================================ FILE: src/style/card.less ================================================ .react-draggable, .cursor-move{ cursor: move; strong { background: #ddd; border: 1px solid #999; border-radius: 3px; display: block; margin-bottom: 10px; padding: 3px 5px; text-align: center; } } .no-cursor { cursor: auto; } .card-tool { position: absolute; right: 24px; top: 24px; } .list-group { .list-group-item { position: relative; display: block; margin-bottom: -1px; padding: 12px 16px; background: transparent; border: 1px solid #ddd; border-color: rgba(120, 130, 140, 0.065); border-width: 1px 0; &:first-child { border-top-width: 0; } &:last-child { border-bottom-width: 0; } } } .no-padding { .ant-card-body { padding: 0 !important; } } ================================================ FILE: src/style/global.less ================================================ small { opacity: .6; } .text-muted{ opacity: .6; } .clear{ display: block; overflow: hidden; } .center { display: flex; justify-content: center; align-items: center; } .y-center{ display: flex; align-items: center; } .block{ display: block; } .inline { display: inline; } .none{ display: none; } .b-white { border-color: #ffffff; } .w-full { width: 100%; } .w-auto { width: auto; } .h-auto { height: auto; } .h-full { height: 100%; } .h-v { height: 100vh; } .h-v-5 { height: 50vh; } .pull-left { float: left; } .pull-right { float: right; } .w-40 { width: 40px; height: 40px; line-height: 40px; display: inline-block; text-align: center; } ================================================ FILE: src/style/icons.less ================================================ ul.icons-list{ list-style: none; overflow: hidden; li{ float: left; width: 10%; text-align: center; list-style: none; cursor: pointer; height: 100px; transition: all .3s; background-color: #fff; &:hover{ background-color: #cccccc; color: #fff; } i{ margin: 16px 0 10px; } span{ display: block; text-align: center; } } } ================================================ FILE: src/style/img.less ================================================ img { vertical-align: middle; } .img-responsive{ width: 100%; height: auto; } .img-circle { border-radius: 50%; } ================================================ FILE: src/style/index.less ================================================ @import 'variables'; @import 'global'; @import 'scroll'; @import 'table'; @import 'login'; @import 'icons'; @import 'button'; @import 'modal'; @import 'menu'; @import 'banner'; @import 'card'; @import 'img'; @import 'utils-text'; @import 'utils-color'; @import 'utils-size'; @import 'utils-border'; @import 'utils-spacing'; @import 'app.less'; body { margin: 0; padding: 0; font-family: sans-serif; } #root { height: 100%; } .ant-layout { height: 100%; .logo { height: 32px; background: #ffffff; border-radius: 6px; margin: 16px; } .ant-layout-sider-collapsed { .anticon { font-size: 16px; // margin-left: 8px; } .nav-text { display: none; } .ant-menu-submenu-vertical > .ant-menu-submenu-title:after { display: none; } .ant-menu-dark:not(.ant-menu-inline) .ant-menu-submenu-open { color: inherit; } } p { margin: 10px 0 10px 0; } } .gutter-example { .ant-row { //margin-left: 0 !important; //margin-right: 0 !important; > div { background: transparent; border: 0; } } } .gutter-box { padding: 5px 0; } :global { .ant-card-head-title { font-size: 14px !important; } } ================================================ FILE: src/style/lib/animate.css ================================================ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } ================================================ FILE: src/style/login.less ================================================ .login{ display: flex; justify-content: center; align-items: center; height: 100%; background: #f3f3f3; .login-form{ width: 320px; height: 340px; padding: 36px; box-shadow: 0 0 100px rgba(0,0,0,.08); background: #fff; .login-logo{ text-align: center; height: 40px; line-height: 40px; cursor: pointer; margin-bottom: 24px; span { vertical-align: text-bottom; font-size: 16px; text-transform: uppercase; display: inline-block; } } } } .installer { width: 0; height: 0; border-style: solid; border-width: 0 100px 100px 0; border-color: transparent #313653 transparent transparent; position: fixed; top: 0; right: 0; } .installer__btn { width: 50px; height: 50px; transform: rotate(45deg); left: 50px; position: absolute; background: url('./imgs/installer.png') no-repeat; background-size: cover; } ================================================ FILE: src/style/menu.less ================================================ .ant-menu-dark { &.ant-menu-inline { .ant-menu-item-selected { background-color: #5f5f5f !important; } } } .custom-trigger { font-size: 18px; line-height: 64px; padding: 0 16px; cursor: pointer; transition: color .3s; } .ant-layout-sider-collapsed { overflow-y: initial !important; } .avatar { position: relative; display: inline-block; width: 40px; line-height: 1; border-radius: 500px; white-space: nowrap; font-weight: bold; i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: 1px; border-width: 2px; border-style: solid; border-radius: 100%; &.bottom { left: auto; top: auto; bottom: 0; right: 0; } &.on { background-color: #6cc788; } } img { border-radius: 500px; width: 100%; } } .switcher { z-index: 1050; position: fixed; top: 78px; right: -240px; width: 240px; transition: right 0.2s ease; border: 1px solid rgba(120, 120, 120, 0.1); background-clip: padding-box; &.active { right: -2px; } .sw-btn { position: absolute; left: -43px; top: -1px; padding: 10px 15px; z-index: 1045; border: 1px solid rgba(120, 120, 120, 0.1); border-right-width: 0; background-clip: padding-box; } } ================================================ FILE: src/style/modal.less ================================================ .vertical-center-modal { text-align: center; white-space: nowrap; &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; width: 0; } .ant-modal { display: inline-block; vertical-align: middle; top: 0; text-align: left; } } /* // Use flex which not working in IE .vertical-center-modal { display: flex; align-items: center; justify-content: center; } .vertical-center-modal .ant-modal { top: 0; } */ ================================================ FILE: src/style/scroll.less ================================================ //美化webkit内核滚动条 ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #777; } ================================================ FILE: src/style/table.less ================================================ .table-operations { margin-bottom: 16px; > button { margin-right: 8px; } } .editable-row-text { padding: 5px; } .editable-row-operations a { margin-right: 8px; } ================================================ FILE: src/style/theme/index.js ================================================ /** * Created by hao.cheng on 2017/5/6. */ import themeinfo from './theme-info.json'; import themegrey from './theme-grey.json'; import themedanger from './theme-danger.json'; import themewarn from './theme-warn.json'; export default { themeinfo, themegrey, themedanger, themewarn }; ================================================ FILE: src/style/theme/theme-danger.json ================================================ { "header": { "background": "#f44455" } } ================================================ FILE: src/style/theme/theme-grey.json ================================================ { "header": { "background": "#001529" } } ================================================ FILE: src/style/theme/theme-info.json ================================================ { "header": { "background": "#6887ff" } } ================================================ FILE: src/style/theme/theme-warn.json ================================================ { "header": { "background": "#fcc100" } } ================================================ FILE: src/style/utils-border.less ================================================ .b-a { border: 1px solid @border-color; } ================================================ FILE: src/style/utils-color.less ================================================ .color-variant(@bg, @color) { color: @color; background-color: @bg; } .dark-white { color: @dark; background-color: @white; } .min-black { .color-variant(@min-black, @black-color) } .black { .color-variant(@black, @black-color); } .dark { .color-variant(@dark, @dark-color); } .grey { .color-variant(@grey, @grey-color); } .primary { .color-variant(@primary, @primary-color); } .info { .color-variant(@info, @info-color); } .warn { .color-variant(@warn, @warn-color); } .danger { .color-variant(@danger, @danger-color) } ================================================ FILE: src/style/utils-size.less ================================================ .w-8{ width: 8px; height: 8px; display: inline-block; } .w-16{ width: 16px; height: 16px; display: inline-block; } .w-20{ width: 20px; height: 20px; display: inline-block; } .w-24{ width: 24px; height: 24px; display: inline-block; text-align: center; } .w-32{ width: 32px; height: 32px; line-height: 32px; display: inline-block; text-align: center; } .w-40{ width: 40px; height: 40px; line-height: 40px; display: inline-block; text-align: center; } .w-48{ width: 48px; height: 48px; line-height: 48px; display: inline-block; text-align: center; } .w-56{ width: 56px; height: 56px; line-height: 56px; display: inline-block; text-align: center; } ================================================ FILE: src/style/utils-spacing.less ================================================ .pb-s { padding-bottom: @spacer * 0.5 !important; } .pb-m { padding-bottom: @spacer * 1 !important; } .pb-l { padding-bottom: @spacer * 2 !important; } .pa-s { padding: @spacer * 0.5 !important; } .pa-m { padding: @spacer * 1 !important; } .pa-l { padding: @spacer * 2 !important; } .mr-s { margin-right: @spacer * 0.5 !important; } .mr-m { margin-right: @spacer * 1 !important; } .mr-l { margin-right: @spacer * 2 !important; } .mb-s { margin-bottom: @spacer * 0.5 !important; } .mb-m { margin-bottom: @spacer * 1 !important; } .mb-l { margin-bottom: @spacer * 2 !important; } ================================================ FILE: src/style/utils-text.less ================================================ .text{ font-size: 1rem; } .text-2x{ font-size: 2rem; } .text-3x{ font-size: 3rem; } .text-4x{ font-size: 4rem; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-danger, .text-danger-hover a:hover { color: #f44455 !important; } .text-dark, .text-dark-hover a:hover { color: #2e3e4e !important; } .text-info, .text-info-hover a:hover { color: #6887ff !important; } .text-success, .text-success-hover a:hover { color: #6cc788 !important; } .text-blue, .text-blue-hover a:hover { color: #2196f3 !important; } ================================================ FILE: src/style/variables.less ================================================ @full-black: rgba(0, 0, 0, 1); @dark-black: rgba(0, 0, 0, 0.87); @light-black: rgba(0, 0, 0, 0.54); @min-black: rgba(0, 0, 0, 0.065); @full-white: rgba(255, 255, 255, 1); @dark-white: rgba(255, 255, 255, 0.87); @light-white: rgba(255, 255, 255, 0.54); @min-white: rgba(255, 255, 255, 0.1); @primary: #0cc2aa; @accent: #a88add; @warn: #fcc100; @info: #6887ff; @success: #6cc788; @warning: #f77a99; @danger: #f44455; @light: #f8f8f8; @grey: #424242; @dark: #2e3e4e; @black: #2a2b3c; @white: #ffffff; @primary-color: @dark-white; @accent-color: @dark-white; @warn-color: @dark-white; @success-color: @dark-white; @info-color: @dark-white; @warning-color: @dark-white; @danger-color: @dark-white; @light-color: @dark-black; @grey-color: @dark-white; @dark-color: @dark-white; @black-color: @dark-white; @border-color: rgba(120, 130, 140, 0.13); @spacer: 1rem; ================================================ FILE: src/utils/hooks.ts ================================================ /* * File: hooks.ts * Desc: 自定义hooks * File Created: 2020-08-24 22:45:40 * Author: yezi * ------ * Copyright 2020 - present, yezi */ import { useState } from 'react'; interface ITurn { turnOn: () => void; turnOff: () => void; setSwitcher: React.Dispatch>; } /** * 布尔开关 * @param init */ export function useSwitch(init: boolean = false): [boolean, ITurn] { const [switcher, setSwitcher] = useState(init); const turnOn = () => setSwitcher(true); const turnOff = () => setSwitcher(false); return [switcher, { turnOn, turnOff, setSwitcher }]; } ================================================ FILE: src/utils/index.ts ================================================ /** * Created by hao.cheng on 2017/4/28. */ import queryString from 'query-string'; /** * 获取URL参数 */ export function parseQuery() { return queryString.parseUrl(window.location.href).query; } /** * 校验是否登录 * @param permits */ export const checkLogin = (permits: any): boolean => (process.env.NODE_ENV === 'production' && !!permits) || process.env.NODE_ENV === 'development'; ================================================ FILE: theme.js ================================================ const path = require('path'); const { generateTheme } = require('antd-theme-generator'); const options = { antDir: path.join(__dirname, './node_modules/antd'), stylesDir: path.join(__dirname, './src/style/antd'), varFile: path.join(__dirname, './src/style/antd/variables.less'), mainLessFile: path.join(__dirname, './src/style/antd/index.less'), indexFileName: 'index.html', outputFilePath: path.join(__dirname, './public/theme.less'), } generateTheme(options).then(less => { console.log('Theme generated successfully'); }).catch(error => { console.log('Error', error); }); ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react" }, "include": [ "src" ] }