Showing preview only (879K chars total). Download the full file or copy to clipboard to get everything.
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 中，方便组件之间传递。
#### 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 的默认样式)
#### 2018-11-07
- 完善 PWA 的 manifest.json 文件，增加按钮手动触发安装 PWA 应用
- 最新版的 chrome 浏览器访问[ReactAdmin](https://admiring-dijkstra-34cb29.netlify.com/)即可体验
#### 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 有点问题）
- 增加菜单可拖拽
#### 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
<img src="https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/logo.png" alt="logo" width="150" height="53" />
[](http://makeapullrequest.com)
<!-- ### 🔥🔥🔥 默认主分支切换成 TypeScript 开发，如果你希望继续使用 JS 开发，请使用[JS](https://github.com/yezihaohao/react-admin/tree/js)分支代码(继续维护) -->
### 文档地址：[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)(已增加响应式，可手机预览 😄)
### 依赖模块
<span style="color: rgb(184,49,47);">项目是用 create-react-app 创建的，主要还是列出新加的功能依赖包</span>
<span style="color: rgb(184,49,47);">点击名称可跳转相关网站 😄😄</span>
- [react](https://facebook.github.io/react/)
- [react-router](https://react-guide.github.io/react-router-cn/)(<span style="color: rgb(243,121,52);">react 路由，4.x 的版本，如果还使用 3.x 的版本，请切换分支（ps:分支不再维护）</span>)
- [redux](https://redux.js.org/)(基础用法，但是封装了通用 action 和 reducer，demo 中主要用于权限控制（ps：目前可以用 16.x 的 context api 代替），可以简单了解下)
- [antd](https://ant.design/index-cn)(<span style="color: rgb(243,121,52);">蚂蚁金服开源的 react ui 组件框架</span>)
- [axios](https://github.com/mzabriskie/axios)(<span style="color: rgb(243,121,52);">http 请求模块，可用于前端任何场景，很强大 👍</span>)
- [echarts-for-react](https://github.com/hustcc/echarts-for-react)(<span style="color: rgb(243,121,52);">可视化图表，别人基于 react 对 echarts 的封装，足够用了</span>)
- [recharts](http://recharts.org/#/zh-CN/)(<span style="color: rgb(243,121,52);">另一个基于 react 封装的图表，个人觉得是没有 echarts 好用</span>)
- [nprogress](https://github.com/rstacruz/nprogress)(<span style="color: rgb(243,121,52);">顶部加载条，蛮好用 👍</span>)
- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)(<span style="color: rgb(243,121,52);">别人基于 react 的富文本封装，如果找到其他更好的可以替换</span>)
- [react-draggable](https://github.com/mzabriskie/react-draggable)(<span style="color: rgb(243,121,52);">拖拽模块，找了个简单版的</span>)
- [screenfull](https://github.com/sindresorhus/screenfull.js/)(<span style="color: rgb(243,121,52);">全屏插件</span>)
- [photoswipe](https://github.com/dimsemenov/photoswipe)(<span style="color: rgb(243,121,52);">图片弹层查看插件，不依赖 jQuery，还是蛮好用 👍</span>)
- [animate.css](http://daneden.me/animate)(<span style="color: rgb(243,121,52);">css 动画库</span>)
- [react-loadable](https://github.com/jamiebuilds/react-loadable)(代码拆分，按需加载，预加载，样样都行，具体见其文档，推荐使用)
- [redux-alita](https://github.com/yezihaohao/redux-alita) 极简的 redux2react 工具
- 其他小细节省略
### 功能模块
<span style="color: rgb(184,49,47);">备注：项目只引入了 ant-design 的部分组件，其他的组件 antd 官网有源码，可以直接复制到项目中使用，后续有时间补上全部组件。</span>
<span style="color: rgb(184,49,47);">项目使用了 antd 的自定义主题功能-->黑色，若想替换其他颜色，具体操作请查看 antd 官网</span>
<!--more-->
- 首页
- 完整布局
- 换肤(全局功能，暂时只实现了顶部导航的换肤，后续加上其他模块)
- 导航菜单
- 顶部导航(菜单伸缩，全屏功能)
- 左边菜单(增加滚动条以及适配路由的 active 操作)
- UI 模块
- 按钮(antd 组件)
- 图标(antd 组件并增加彩色表情符)
- 加载中(antd 组件并增加顶部加载条)
- 通知提醒框(antd 组件)
- 标签页(antd 组件)
- 轮播图(ant 动效组件)
- 富文本
- 拖拽
- 画廊
- 动画
- 基础动画(animate.css 所有动画)
- 动画案例
- 表格
- 基础表格(antd 组件)
- 高级表格(antd 组件)
- 异步表格(数据来自掘金酱的接口)
- 表单
- 基础表单(antd 组件)
- 图表
- echarts 图表
- recharts 图表
- 页面
- 登录页面(包括 GitHub 第三方登录)
- 404 页面
### 功能截图
#### 首页
#### 按钮图标等
#### 轮播图
#### 富文本
#### 拖拽
#### 画廊
#### 动画
#### 表格
#### 表单
#### 图表
#### 页面
#### 菜单拖拽
### 代码目录
```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, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// 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/(.*)$': '<rootDir>/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 <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
return ensureSlash(servedUrl, true);
}
const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
];
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find(extension =>
fs.existsSync(resolveFn(`${filePath}.${extension}`))
);
if (extension) {
return resolveFn(`${filePath}.${extension}`);
}
return resolveFn(`${filePath}.js`);
};
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};
module.exports.moduleFileExtensions = moduleFileExtensions;
================================================
FILE: config/pnpTs.js
================================================
'use strict';
const { resolveModuleName } = require('ts-pnp');
exports.resolveModuleName = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveModuleName
);
};
exports.resolveTypeReferenceDirective = (
typescript,
moduleName,
containingFile,
compilerOptions,
resolutionHost
) => {
return resolveModuleName(
moduleName,
containingFile,
compilerOptions,
resolutionHost,
typescript.resolveTypeReferenceDirective
);
};
================================================
FILE: config/webpack.config.js
================================================
'use strict';
const fs = require('fs');
const isWsl = require('is-wsl');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const eslint = require('eslint');
const postcssNormalize = require('postcss-normalize');
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile');
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// In development, we always serve from the root. This makes config easier.
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
// Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
const shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
const publicUrl = isEnvProduction
? publicPath.slice(0, -1)
: isEnvDevelopment && '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
}
);
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: [
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
isEnvDevelopment &&
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
// We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? info =>
path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
: isEnvDevelopment &&
(info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
// Prevents conflicts when multiple Webpack runtimes (from different apps)
// are used on the same page.
jsonpFunction: `webpackJsonp${appPackageJson.name}`,
// this defaults to 'window', but by setting it to 'this' then
// module chunks which are built will work in web workers as well.
globalObject: 'this',
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
// Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
// https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
parallel: !isWsl,
// Enable file caching
cache: true,
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`,
},
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || []
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
'@': paths.appSrc
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
// guards against forgotten dependencies and such.
PnpWebpackPlugin,
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
rules: [
// Disable require.ensure as it's not a standard language feature.
{ parser: { requireEnsure: false } },
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
// In development, this will be an empty string.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
fileName => !fileName.endsWith('.map')
);
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the Webpack build.
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [/\.map$/, /asset-manifest\.json$/],
importWorkboxFrom: 'cdn',
navigateFallback: publicUrl + '/index.html',
navigateFallbackBlacklist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp('^/_'),
// Exclude any URLs whose last part seems to be a file extension
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
checkSyntacticErrors: true,
resolveModuleNameModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
resolveTypeReferenceDirectiveModule: process.versions.pnp
? `${__dirname}/pnpTs.js`
: undefined,
tsconfig: paths.appTsConfig,
reportFiles: [
'**',
'!**/__tests__/**',
'!**/?(*.)(spec|test).*',
'!**/src/setupProxy.*',
'!**/src/setupTests.*',
],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
};
};
================================================
FILE: config/webpackDevServer.config.js
================================================
'use strict';
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
const ignoredFiles = require('react-dev-utils/ignoredFiles');
const paths = require('./paths');
const fs = require('fs');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
module.exports = function(proxy, allowedHost) {
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
disableHostCheck:
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
// Enable gzip compression of generated files.
compress: true,
// Silence WebpackDevServer's own logs since they're generally not useful.
// It will still show compile warnings and errors with this setting.
clientLogLevel: 'none',
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through Webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
contentBase: paths.appPublic,
// By default files from `contentBase` will not trigger a page reload.
watchContentBase: true,
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
// for the WebpackDevServer client so it can learn when the files were
// updated. The WebpackDevServer client is included as an entry point
// in the Webpack development configuration. Note that only changes
// to CSS are currently hot reloaded. JS changes will refresh the browser.
hot: true,
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: '/',
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
host,
overlay: false,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
},
public: allowedHost,
proxy,
before(app, server) {
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(app);
}
// This lets us fetch source contents from webpack for the error overlay
app.use(evalSourceMapMiddleware(server));
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
},
};
};
================================================
FILE: package.json
================================================
{
"name": "react-admin",
"version": "3.0.0",
"private": true,
"homepage": ".",
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@babel/core": "7.6.0",
"@svgr/webpack": "4.3.2",
"@types/classnames": "^2.2.9",
"@types/echarts": "^4.1.15",
"@types/jest": "24.0.18",
"@types/node": "12.7.11",
"@types/nprogress": "^0.2.0",
"@types/photoswipe": "^4.0.29",
"@types/query-string": "^6.3.0",
"@types/react": "^16.9.49",
"@types/react-beautiful-dnd": "^12.1.2",
"@types/react-color": "^3.0.1",
"@types/react-document-title": "^2.0.3",
"@types/react-dom": "^16.9.8",
"@types/react-draft-wysiwyg": "^1.12.3",
"@types/react-loadable": "^5.5.1",
"@types/react-router-dom": "^5.1.0",
"@types/recharts": "^1.1.21",
"@typescript-eslint/eslint-plugin": "^3.9.1",
"@typescript-eslint/parser": "^3.9.1",
"ahooks": "^2.6.0",
"antd": "^4.6.4",
"axios": "^0.19.0",
"babel-eslint": "10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.4",
"babel-preset-react-app": "^9.0.2",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "5.1.0",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.8.4",
"draftjs-to-markdown": "^0.5.1",
"echarts": "^4.3.0",
"echarts-for-react": "^2.0.15-beta.1",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.2",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.0",
"mini-css-extract-plugin": "0.8.0",
"nprogress": "^0.2.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"photoswipe": "^4.1.3",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"rc-banner-anim": "^2.4.2",
"react": "^16.10.2",
"react-app-polyfill": "^1.0.4",
"react-beautiful-dnd": "^13.0.0",
"react-color": "^2.17.3",
"react-dev-utils": "^9.1.0",
"react-document-title": "^2.0.3",
"react-dom": "^16.10.2",
"react-draft-wysiwyg": "^1.13.2",
"react-draggable": "^4.0.3",
"react-loadable": "^5.5.0",
"react-qmap": "^0.1.6",
"react-router-dom": "^5.1.2",
"recharts": "^1.7.1",
"redux-alita": "^2.3.3",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"screenfull": "^5.0.0",
"semver": "6.3.0",
"style-loader": "1.0.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.4",
"typescript": "3.9.7",
"umbrella-storage": "^1.0.2",
"url-loader": "2.1.0",
"webpack": "4.41.0",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.1.1",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js dev",
"build": "node scripts/build.js production",
"starandsea": "node scripts/build.js starandsea",
"test": "node scripts/test.js",
"commit": "git-cz",
"release": "standard-version"
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
},
"husky": {
"hooks": {
"commit-msg": "commitlint -e $GIT_PARAMS",
"pre-commit": "pretty-quick --staged"
}
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},
"devDependencies": {
"@commitlint/cli": "^8.2.0",
"@commitlint/config-conventional": "^8.2.0",
"antd-theme-generator": "^1.1.7",
"babel-plugin-import": "^1.12.2",
"commitizen": "^4.0.3",
"cz-conventional-changelog": "^3.0.2",
"husky": "^3.0.5",
"less": "2.x",
"less-loader": "^5.0.0",
"prettier": "^2.0.4",
"pretty-quick": "^2.0.1",
"standard-version": "^7.0.0"
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React Admin</title>
</head>
<body>
<link rel="stylesheet/less" type="text/css" href="./theme.less" />
<script src="%PUBLIC_URL%/assets/less.min.js"></script>
<script>
const primaryColor = localStorage.getItem('@primary-color');
primaryColor &&
window.less.modifyVars({
'@primary-color': primaryColor,
});
</script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
--></body>
</html>
================================================
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:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
// rgbToRgb
// Handle bounds / percentage checking to conform to CSS color spec
// <http://www.w3.org/TR/css3-color/>
// *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
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
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
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
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
// ---------------------
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
// contrast
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
tinycolor.readability = function(color1, color2) {
var c1 = tinycolor(color1);
var c2 = tinycolor(color2);
return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
};
// isReadable
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
// The third argument is an optional Object.
// the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
// the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
// *Example*
// tinycolor.isReadable("#000", "#111") => 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
// ------------------
// <http://www.w3.org/TR/css3-color/#svg-color>
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
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
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() {
// <http://www.w3.org/TR/css3-values/#integers>
var CSS_INTEGER = "[-\\+]?\\d+%?";
// <http://www.w3.org/TR/css3-values/#number-value>
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>`
@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
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
SYMBOL INDEX (160 symbols across 61 files)
FILE: config/env.js
constant NODE_ENV (line 10) | const NODE_ENV = process.env.NODE_ENV;
constant REACT_ADMIN (line 11) | const REACT_ADMIN = process.env.REACT_ADMIN;
constant REACT_APP (line 61) | const REACT_APP = /^REACT_APP_/i;
constant REACT_ADMIN_REG (line 62) | const REACT_ADMIN_REG = /^REACT_ADMIN_/i;
function getClientEnvironment (line 64) | function getClientEnvironment(publicUrl) {
FILE: config/jest/cssTransform.js
method process (line 7) | process() {
method getCacheKey (line 10) | getCacheKey() {
FILE: config/jest/fileTransform.js
method process (line 10) | process(src, filename) {
FILE: config/modules.js
function getAdditionalModulePaths (line 14) | function getAdditionalModulePaths(options = {}) {
function getWebpackAliases (line 64) | function getWebpackAliases(options = {}) {
function getJestAliases (line 85) | function getJestAliases(options = {}) {
function getModules (line 101) | function getModules() {
FILE: config/paths.js
function ensureSlash (line 14) | function ensureSlash(inputPath, needsSlash) {
function getServedPath (line 34) | function getServedPath(appPackageJson) {
FILE: config/webpackDevServer.config.js
method before (line 85) | before(app, server) {
FILE: scripts/build.js
constant WARN_AFTER_BUNDLE_GZIP_SIZE (line 35) | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
constant WARN_AFTER_CHUNK_GZIP_SIZE (line 36) | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
function build (line 125) | function build(previousFileSizes) {
function copyPublicFolder (line 188) | function copyPublicFolder() {
FILE: scripts/start.js
constant DEFAULT_PORT (line 44) | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
constant HOST (line 45) | const HOST = process.env.HOST || '0.0.0.0';
FILE: scripts/test.js
function isInGitRepository (line 23) | function isInGitRepository() {
function isInMercurialRepository (line 32) | function isInMercurialRepository() {
FILE: src/App.tsx
type AppProps (line 16) | type AppProps = {};
function checkIsMobile (line 18) | function checkIsMobile() {
function resizeListener (line 24) | function resizeListener(handler: (isMobile: boolean) => void) {
function handleResize (line 35) | function handleResize(handler: (isMobile: boolean) => void) {
function openFNotification (line 39) | function openFNotification() {
function fetchSmenu (line 82) | function fetchSmenu(handler: any) {
function toggle (line 112) | function toggle() {
FILE: src/components/HeaderCustom.tsx
type HeaderCustomProps (line 27) | type HeaderCustomProps = {
FILE: src/components/Page.tsx
type PageProps (line 6) | interface PageProps {
FILE: src/components/SiderCustom.tsx
type SiderCustomProps (line 14) | type SiderCustomProps = RouteComponentProps<any> & {
type IMenu (line 19) | interface IMenu {
FILE: src/components/SiderMenu.tsx
type SiderMenuProps (line 35) | type SiderMenuProps = MenuProps & {
FILE: src/components/animation/BasicAnimations.tsx
class BasicAnimations (line 8) | class BasicAnimations extends React.Component {
method render (line 23) | render() {
FILE: src/components/animation/ExampleAnimations.tsx
type ExampleAnimationsProps (line 8) | type ExampleAnimationsProps = {};
type ExampleAnimationsState (line 9) | type ExampleAnimationsState = {
class ExampleAnimations (line 15) | class ExampleAnimations extends React.Component<ExampleAnimationsProps, ...
method constructor (line 16) | constructor(props: any) {
method render (line 88) | render() {
FILE: src/components/auth/Basic.tsx
class Basic (line 10) | class Basic extends Component {
method render (line 11) | render() {
FILE: src/components/auth/RouterEnter.tsx
class RouterEnter (line 12) | class RouterEnter extends Component {
method componentDidMount (line 13) | componentDidMount() {
method render (line 16) | render() {
FILE: src/components/charts/Echarts.tsx
class Echarts (line 11) | class Echarts extends React.Component {
method render (line 12) | render() {
FILE: src/components/charts/EchartsArea.tsx
class EchartsArea (line 101) | class EchartsArea extends React.Component {
method render (line 102) | render() {
FILE: src/components/charts/EchartsEffectScatter.tsx
class EchartsEffectScatter (line 510) | class EchartsEffectScatter extends Component {
method render (line 511) | render() {
FILE: src/components/charts/EchartsForce.tsx
class EchartsForce (line 235) | class EchartsForce extends Component {
method render (line 236) | render() {
FILE: src/components/charts/EchartsGraphnpm.tsx
class EchartsGraphnpm (line 8) | class EchartsGraphnpm extends React.Component {
method componentDidMount (line 42) | componentDidMount() {
method render (line 74) | render() {
FILE: src/components/charts/EchartsScatter.tsx
class EchartsScatter (line 9) | class EchartsScatter extends React.Component {
method componentDidMount (line 97) | componentDidMount() {
method render (line 127) | render() {
FILE: src/components/charts/Recharts.tsx
class Recharts (line 11) | class Recharts extends React.Component {
method render (line 12) | render() {
FILE: src/components/cssmodule/index.tsx
class Cssmodule (line 12) | class Cssmodule extends Component {
method render (line 13) | render() {
FILE: src/components/dashboard/Dashboard.tsx
class Dashboard (line 18) | class Dashboard extends React.Component {
method render (line 19) | render() {
FILE: src/components/extension/QueryParams.tsx
type QueryParamsProps (line 12) | type QueryParamsProps = {
class QueryParams (line 16) | class QueryParams extends Component<QueryParamsProps> {
method render (line 17) | render() {
FILE: src/components/pages/Login.tsx
type LoginProps (line 15) | type LoginProps = {
FILE: src/components/pages/NotFound.tsx
class NotFound (line 7) | class NotFound extends React.Component {
method render (line 14) | render() {
FILE: src/components/tables/AdvancedTables.tsx
class AdvancedTables (line 10) | class AdvancedTables extends React.Component {
method render (line 11) | render() {
FILE: src/components/tables/AsynchronousTable.tsx
class AsynchronousTable (line 37) | class AsynchronousTable extends React.Component {
method componentDidMount (line 43) | componentDidMount() {
method render (line 59) | render() {
FILE: src/components/tables/SearchTable.tsx
class SearchTable (line 35) | class SearchTable extends React.Component {
method render (line 76) | render() {
FILE: src/components/tables/SelectTable.tsx
class SelectTable (line 33) | class SelectTable extends React.Component {
method render (line 41) | render() {
FILE: src/components/tables/SortTable.tsx
type SortTableState (line 34) | type SortTableState = {
class SortTable (line 38) | class SortTable extends React.Component<any, SortTableState> {
method constructor (line 39) | constructor(props: any) {
method render (line 70) | render() {
FILE: src/components/ui/Buttons.tsx
type ButtonsState (line 11) | type ButtonsState = {
class Buttons (line 16) | class Buttons extends React.Component<any, ButtonsState> {
method constructor (line 17) | constructor(props: any) {
method render (line 38) | render() {
FILE: src/components/ui/Draggable.tsx
class Drags (line 9) | class Drags extends React.Component {
method render (line 38) | render() {
FILE: src/components/ui/Gallery.tsx
class Gallery (line 12) | class Gallery extends React.Component {
method componentDidMount (line 16) | componentDidMount() {}
method render (line 54) | render() {
FILE: src/components/ui/Modals.tsx
class S (line 9) | class S extends Component {
method onOk (line 84) | onOk() {
method onCancel (line 87) | onCancel() {
method onOk (line 101) | onOk() {}
method render (line 122) | render() {
FILE: src/components/ui/Notifications.tsx
class Notifications (line 11) | class Notifications extends Component {
method render (line 69) | render() {
FILE: src/components/ui/Spins.tsx
class Spins (line 10) | class Spins extends React.Component {
method render (line 21) | render() {
FILE: src/components/ui/Tabs.tsx
type TabsCustomState (line 12) | type TabsCustomState = {
class TabsCustom (line 17) | class TabsCustom extends Component<any, TabsCustomState> {
method constructor (line 18) | constructor(props: any) {
method render (line 64) | render() {
FILE: src/components/ui/Wysiwyg.tsx
type WysiwygState (line 51) | type WysiwygState = {
class Wysiwyg (line 56) | class Wysiwyg extends Component {
method render (line 103) | render() {
FILE: src/components/ui/banners/AutoPlay.tsx
class AutoPlay (line 9) | class AutoPlay extends React.Component {
method render (line 10) | render(){
FILE: src/components/ui/banners/Basic.tsx
class Basic (line 9) | class Basic extends React.Component {
method render (line 10) | render(){
FILE: src/components/ui/banners/Custom.tsx
type CustomState (line 10) | type CustomState = {
class Custom (line 16) | class Custom extends React.Component<any, CustomState> {
method constructor (line 18) | constructor(props: any) {
method getNextPrevNumber (line 40) | getNextPrevNumber() {
method prevEnter (line 53) | prevEnter() {
method prevLeave (line 59) | prevLeave() {
method nextEnter (line 65) | nextEnter() {
method nextLeave (line 71) | nextLeave() {
method onMouseEnter (line 77) | onMouseEnter() {
method onMouseLeave (line 83) | onMouseLeave() {
method render (line 89) | render() {
FILE: src/components/ui/banners/index.tsx
class Banners (line 11) | class Banners extends React.Component {
method render (line 12) | render() {
FILE: src/components/ui/emoji/iconfont.ts
function setFont (line 1) | function setFont(): void {
FILE: src/components/ui/emoji/index.tsx
type EmojiProps (line 9) | type EmojiProps = {
FILE: src/components/widget/AuthWidget.tsx
type AuthWidgetProps (line 7) | type AuthWidgetProps = {
class AuthWidget (line 12) | class AuthWidget extends Component<AuthWidgetProps> {
method render (line 13) | render() {
FILE: src/components/widget/BreadcrumbCustom.tsx
type BreadcrumbCustomProps (line 8) | interface BreadcrumbCustomProps {
FILE: src/components/widget/PwaInstaller.tsx
class PwaInstaller (line 11) | class PwaInstaller extends Component {
method componentDidMount (line 15) | componentDidMount() {
method componentWillUnmount (line 18) | componentWillUnmount() {
method render (line 50) | render() {
FILE: src/components/widget/ThemePicker.tsx
class ThemePicker (line 6) | class ThemePicker extends Component {
method render (line 25) | render() {
FILE: src/react-app-env.d.ts
type ProcessEnv (line 6) | interface ProcessEnv {
FILE: src/routes/config.ts
type IFMenuBase (line 1) | interface IFMenuBase {
type IFMenu (line 13) | interface IFMenu extends IFMenuBase {
FILE: src/routes/index.tsx
type CRouterProps (line 13) | type CRouterProps = {
FILE: src/service/config.ts
constant MOCK_API (line 7) | const MOCK_API = 'https://react-admin-mock.now.sh/api';
constant MOCK_AUTH_ADMIN (line 8) | const MOCK_AUTH_ADMIN = MOCK_API + '/admin.js';
constant MOCK_AUTH_VISITOR (line 9) | const MOCK_AUTH_VISITOR = MOCK_API + '/visitor.js';
constant MOCK_MENU (line 11) | const MOCK_MENU = MOCK_API + '/menu.js';
constant GIT_OAUTH (line 14) | const GIT_OAUTH = 'https://github.com/login/oauth';
constant GIT_USER (line 16) | const GIT_USER = 'https://api.github.com/user';
constant NEWS_BBC (line 19) | const NEWS_BBC =
FILE: src/service/tools.ts
type IFRequestParam (line 8) | interface IFRequestParam {
FILE: src/serviceWorker.ts
type Config (line 23) | type Config = {
function register (line 28) | function register(config?: Config) {
function registerValidSW (line 65) | function registerValidSW(swUrl: string, config?: Config) {
function checkValidServiceWorker (line 109) | function checkValidServiceWorker(swUrl: string, config?: Config) {
function unregister (line 137) | function unregister() {
FILE: src/utils/hooks.ts
type ITurn (line 11) | interface ITurn {
function useSwitch (line 20) | function useSwitch(init: boolean = false): [boolean, ITurn] {
FILE: src/utils/index.ts
function parseQuery (line 8) | function parseQuery() {
Condensed preview — 140 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (892K chars).
[
{
"path": ".commitlintrc.js",
"chars": 87,
"preview": "module.exports = {\n extends: ['@commitlint/config-conventional'],\n rules: {},\n};\n"
},
{
"path": ".eslintrc",
"chars": 682,
"preview": "{\n \"extends\": \"react-app\",\n \"plugins\": [\n \"react-hooks\"\n ],\n \"rules\": {\n \"react-hooks/rules-of-hooks\": \"error\""
},
{
"path": ".gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".prettierignore",
"chars": 17,
"preview": "public/theme.less"
},
{
"path": ".prettierrc",
"chars": 131,
"preview": "{\n \"trailingComma\": \"es5\",\n \"tabWidth\": 4,\n \"singleQuote\": true,\n \"jsxBracketSameLine\": false,\n \"printWid"
},
{
"path": ".travis.yml",
"chars": 67,
"preview": "language: node_js\nnode_js:\n - \"10\"\nscript:\n - yarn\n - yarn build"
},
{
"path": "CHANGELOG.md",
"chars": 3792,
"preview": "### 更新日志\n\n#### 2017-07-08\n\n- 依赖包版本升级\n - react@15.6.1\n - antd@2.11.2\n - webpack@2.6.1\n - 等等\n\n#### 2"
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2019 yezihaohao\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 7985,
"preview": "# react-admin([尝试一下在线编辑](https://codesandbox.io/s/react-admin-u9kdb))\n\nreact-admin system solution\n\n<img src=\"https://ra"
},
{
"path": "config/env.js",
"chars": 3848,
"preview": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst paths = require('./paths');\n\n// Make sure t"
},
{
"path": "config/jest/cssTransform.js",
"chars": 314,
"preview": "'use strict';\n\n// This is a custom Jest transformer turning style imports into empty objects.\n// http://facebook.github."
},
{
"path": "config/jest/fileTransform.js",
"chars": 1261,
"preview": "'use strict';\n\nconst path = require('path');\nconst camelcase = require('camelcase');\n\n// This is a custom Jest transform"
},
{
"path": "config/modules.js",
"chars": 3897,
"preview": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst paths = require('./paths');\nconst chalk = r"
},
{
"path": "config/paths.js",
"chars": 2732,
"preview": "'use strict';\n\nconst path = require('path');\nconst fs = require('fs');\nconst url = require('url');\n\n// Make sure any sym"
},
{
"path": "config/pnpTs.js",
"chars": 620,
"preview": "'use strict';\n\nconst { resolveModuleName } = require('ts-pnp');\n\nexports.resolveModuleName = (\n typescript,\n moduleNam"
},
{
"path": "config/webpack.config.js",
"chars": 31156,
"preview": "'use strict';\n\nconst fs = require('fs');\nconst isWsl = require('is-wsl');\nconst path = require('path');\nconst webpack = "
},
{
"path": "config/webpackDevServer.config.js",
"chars": 5637,
"preview": "'use strict';\n\nconst errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');\nconst evalSourceMapMidd"
},
{
"path": "package.json",
"chars": 6884,
"preview": "{\n \"name\": \"react-admin\",\n \"version\": \"3.0.0\",\n \"private\": true,\n \"homepage\": \".\",\n \"dependencies\": {\n "
},
{
"path": "public/index.html",
"chars": 1989,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PU"
},
{
"path": "public/manifest.json",
"chars": 1085,
"preview": "{\n \"name\": \"ReactAdmin\",\n \"short_name\": \"ReactAdmin\",\n \"theme_color\": \"#313653\",\n \"background_color\": \"#313653\",\n \""
},
{
"path": "public/robots.txt",
"chars": 57,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\n"
},
{
"path": "public/theme.less",
"chars": 284411,
"preview": "@primary-color: #313653;\n/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/"
},
{
"path": "scripts/build.js",
"chars": 7384,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 'p"
},
{
"path": "scripts/start.js",
"chars": 5369,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 'd"
},
{
"path": "scripts/test.js",
"chars": 1352,
"preview": "'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 't"
},
{
"path": "src/App.test.tsx",
"chars": 248,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nit('renders without crashing', ()"
},
{
"path": "src/App.tsx",
"chars": 4332,
"preview": "import React, { useState, useEffect } from 'react';\nimport { Layout, notification } from 'antd';\nimport umbrella from 'u"
},
{
"path": "src/Page.tsx",
"chars": 619,
"preview": "import React from 'react';\nimport { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';\nimport NotF"
},
{
"path": "src/components/HeaderCustom.tsx",
"chars": 4675,
"preview": "/**\n * Created by hao.cheng on 2017/4/13.\n */\nimport React, { useEffect, useState } from 'react';\nimport screenfull from"
},
{
"path": "src/components/Page.tsx",
"chars": 269,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React, { ReactNode } from 'react';\n\ninterface PageProps {\n child"
},
{
"path": "src/components/SiderCustom.tsx",
"chars": 3238,
"preview": "/**\n * Created by hao.cheng on 2017/4/13.\n */\nimport React, { useState, useEffect } from 'react';\nimport { Layout } from"
},
{
"path": "src/components/SiderMenu.tsx",
"chars": 3628,
"preview": "import React, { useState, useEffect } from 'react';\nimport { Menu } from 'antd';\nimport { Link } from 'react-router-dom'"
},
{
"path": "src/components/animation/BasicAnimations.tsx",
"chars": 4319,
"preview": "/**\n * Created by hao.cheng on 2017/5/8.\n */\nimport React from 'react';\nimport { Row, Col, Card, Switch } from 'antd';\ni"
},
{
"path": "src/components/animation/ExampleAnimations.tsx",
"chars": 3989,
"preview": "/**\n * Created by hao.cheng on 2017/5/8.\n */\nimport React from 'react';\nimport { Row, Col, Card, Table, Popconfirm, Butt"
},
{
"path": "src/components/auth/Basic.tsx",
"chars": 2964,
"preview": "/**\n * Created by 叶子 on 2017/7/31.\n */\nimport React, { Component } from 'react';\nimport { Row, Col, Card } from 'antd';\n"
},
{
"path": "src/components/auth/RouterEnter.tsx",
"chars": 1120,
"preview": "/**\n * Created by 叶子 on 2017/8/1.\n */\n/**\n * Created by 叶子 on 2017/7/31.\n */\nimport React, { Component } from 'react';\ni"
},
{
"path": "src/components/charts/Echarts.tsx",
"chars": 1974,
"preview": "/**\n * Created by hao.cheng on 2017/4/17.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport E"
},
{
"path": "src/components/charts/EchartsArea.tsx",
"chars": 2863,
"preview": "/**\n * Created by hao.cheng on 2017/4/17.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\ni"
},
{
"path": "src/components/charts/EchartsEffectScatter.tsx",
"chars": 14231,
"preview": "/**\n * Created by SEELE on 2017/8/23.\n */\nimport React, { Component } from 'react';\nimport ReactEcharts from 'echarts-fo"
},
{
"path": "src/components/charts/EchartsForce.tsx",
"chars": 6367,
"preview": "/**\n * Created by SEELE on 2017/8/23.\n */\nimport React, { Component } from 'react';\nimport ReactEcharts from 'echarts-fo"
},
{
"path": "src/components/charts/EchartsGraphnpm.tsx",
"chars": 2751,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\ni"
},
{
"path": "src/components/charts/EchartsPie.tsx",
"chars": 2108,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\n\n"
},
{
"path": "src/components/charts/EchartsScatter.tsx",
"chars": 4303,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\ni"
},
{
"path": "src/components/charts/Recharts.tsx",
"chars": 2005,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport R"
},
{
"path": "src/components/charts/RechartsBarChart.tsx",
"chars": 1107,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport {BarChart, Bar, XAxis, YAxis, CartesianG"
},
{
"path": "src/components/charts/RechartsRadarChart.tsx",
"chars": 1176,
"preview": "/**\n * Created by hao.cheng on 2017/4/22.\n */\nimport React from 'react';\nimport {Radar, RadarChart, PolarGrid, Legend,\n "
},
{
"path": "src/components/charts/RechartsRadialBarChart.tsx",
"chars": 1374,
"preview": "/**\n * Created by hao.cheng on 2017/4/22.\n */\nimport React from 'react';\nimport { RadialBarChart, Legend, Tooltip, Respo"
},
{
"path": "src/components/charts/RechartsSimpleLineChart.tsx",
"chars": 1184,
"preview": "/**\n * Created by hao.cheng on 2017/4/21.\n */\nimport React from 'react';\nimport {LineChart, Line, XAxis, YAxis, Cartesia"
},
{
"path": "src/components/cssmodule/index.module.less",
"chars": 993,
"preview": "@font-face {\n font-family: 'Monoton';\n font-style: normal;\n font-weight: 400;\n src: local('Monoton'), local('Monoton"
},
{
"path": "src/components/cssmodule/index.tsx",
"chars": 815,
"preview": "/**\n *\n * 添加注释\n * Created by SEELE on 2018/1/12\n *\n */\nimport React, { Component } from 'react';\nimport { Col, Card, Row"
},
{
"path": "src/components/dashboard/Dashboard.tsx",
"chars": 10222,
"preview": "/**\n * Created by hao.cheng on 2017/5/3.\n */\nimport React from 'react';\nimport { Row, Col, Card, Timeline } from 'antd';"
},
{
"path": "src/components/dashboard/EchartsProjects.tsx",
"chars": 2473,
"preview": "/**\n * Created by hao.cheng on 2017/5/5.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\n\nl"
},
{
"path": "src/components/dashboard/EchartsViews.tsx",
"chars": 2733,
"preview": "/**\n * Created by hao.cheng on 2017/5/5.\n */\nimport React from 'react';\nimport ReactEcharts from 'echarts-for-react';\nim"
},
{
"path": "src/components/env/index.tsx",
"chars": 1104,
"preview": "/*\n * File: index.tsx\n * Desc: 环境配置\n * File Created: 2020-08-02 23:00:28\n * Author: yezi\n * ------\n * Copyright 2020 - p"
},
{
"path": "src/components/extension/MultipleMenu.tsx",
"chars": 721,
"preview": "/*\n * File: MultipleMenu.tsx\n * Desc: 多级菜单组件\n * File Created: 2019-12-18 23:15:35\n * Author: chenghao\n * ------\n * Copyr"
},
{
"path": "src/components/extension/QueryParams.tsx",
"chars": 1317,
"preview": "/*\n * File: QueryParams.js\n * Desc: query参数demo\n * File Created: 2018-11-25 23:18:09\n * Author: chenghao\n * Copyright 20"
},
{
"path": "src/components/extension/Visitor.tsx",
"chars": 976,
"preview": "/*\n * File: Visitor.tsx\n * Desc: 访客\n * File Created: 2019-10-25 22:31:37\n * Author: chenghao\n * ------\n * Copyright 2019"
},
{
"path": "src/components/index.tsx",
"chars": 1796,
"preview": "/**\n * 路由组件出口文件\n * yezi 2018年6月24日\n */\nimport Loadable from 'react-loadable';\nimport Loading from './widget/Loading';\nim"
},
{
"path": "src/components/pages/Login.tsx",
"chars": 3695,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React, { useEffect } from 'react';\nimport { Button, Form, Input } f"
},
{
"path": "src/components/pages/NotFound.tsx",
"chars": 740,
"preview": "/**\n * Created by hao.cheng on 2017/5/7.\n */\nimport React from 'react';\nimport img from '../../style/imgs/404.png';\n\ncla"
},
{
"path": "src/components/smenu/Sub1.tsx",
"chars": 679,
"preview": "/*\n * File: Sub1.tsx\n * Desc: 异步子菜单\n * File Created: 2020-01-21 11:31:15\n * Author: chenghao at <865470087@qq.com>\n * --"
},
{
"path": "src/components/smenu/Sub2.tsx",
"chars": 679,
"preview": "/*\n * File: Sub2.tsx\n * Desc: 异步子菜单\n * File Created: 2020-01-21 11:31:15\n * Author: chenghao at <865470087@qq.com>\n * --"
},
{
"path": "src/components/tables/AdvancedTables.tsx",
"chars": 1584,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport F"
},
{
"path": "src/components/tables/AsynchronousTable.tsx",
"chars": 3295,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React from 'react';\nimport { Table, Button, Row, Col, Card } from '"
},
{
"path": "src/components/tables/BasicTable.tsx",
"chars": 1452,
"preview": "/**\n * Created by hao.cheng on 2017/4/15.\n */\nimport React from 'react';\nimport { Table, Button } from 'antd';\nimport { "
},
{
"path": "src/components/tables/BasicTables.tsx",
"chars": 1660,
"preview": "/**\n * Created by hao.cheng on 2017/4/15.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport B"
},
{
"path": "src/components/tables/ExpandedTable.tsx",
"chars": 1128,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React from 'react';\nimport { Table, Button } from 'antd';\n\nconst co"
},
{
"path": "src/components/tables/FixedTable.tsx",
"chars": 1338,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React from 'react';\nimport { Table } from 'antd';\nimport { ColumnPr"
},
{
"path": "src/components/tables/SearchTable.tsx",
"chars": 4672,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport React from 'react';\nimport { Table, Input, Button } from 'antd';\nim"
},
{
"path": "src/components/tables/SelectTable.tsx",
"chars": 2504,
"preview": "/**\n * Created by hao.cheng on 2017/4/15.\n */\nimport React from 'react';\nimport { Table } from 'antd';\n// import { Table"
},
{
"path": "src/components/tables/SortTable.tsx",
"chars": 3513,
"preview": "/**\n * Created by hao.cheng on 2017/4/15.\n */\nimport React from 'react';\nimport { Table, Button } from 'antd';\n\nconst da"
},
{
"path": "src/components/ui/Buttons.tsx",
"chars": 7325,
"preview": "/**\n * Created by hao.cheng on 2017/4/23.\n */\nimport React from 'react';\nimport { Row, Col, Card, Button, Radio, Menu, D"
},
{
"path": "src/components/ui/Draggable.tsx",
"chars": 5531,
"preview": "/**\n * Created by hao.cheng on 2017/4/28.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport B"
},
{
"path": "src/components/ui/Gallery.tsx",
"chars": 9739,
"preview": "/**\n * Created by hao.cheng on 2017/5/6.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport Br"
},
{
"path": "src/components/ui/Icons.tsx",
"chars": 6590,
"preview": "/**\n * Created by hao.cheng on 2017/4/22.\n */\nimport React from 'react';\nimport Emoji from './emoji';\nimport { Row, Col,"
},
{
"path": "src/components/ui/Modals.tsx",
"chars": 10108,
"preview": "/**\n * Created by hao.cheng on 2017/4/23.\n */\nimport React, { Component } from 'react';\nimport { Row, Col, Card, Modal, "
},
{
"path": "src/components/ui/Notifications.tsx",
"chars": 7084,
"preview": "/**\n * Created by hao.cheng on 2017/4/25.\n */\nimport React, { Component } from 'react';\nimport { Row, Col, Card, Button,"
},
{
"path": "src/components/ui/Spins.tsx",
"chars": 3746,
"preview": "/**\n * Created by hao.cheng on 2017/4/23.\n */\nimport React from 'react';\nimport { Row, Col, Card, Spin, Alert, Switch, B"
},
{
"path": "src/components/ui/Tabs.tsx",
"chars": 10004,
"preview": "/**\n * Created by hao.cheng on 2017/4/25.\n */\nimport React, { Component } from 'react';\nimport { Row, Col, Card, Tabs, R"
},
{
"path": "src/components/ui/Wysiwyg.tsx",
"chars": 7661,
"preview": "/**\n * Created by hao.cheng on 2017/4/26.\n */\nimport React, { Component } from 'react';\nimport { Row, Col, Card } from '"
},
{
"path": "src/components/ui/banners/AutoPlay.tsx",
"chars": 2094,
"preview": "/**\n * Created by hao.cheng on 2017/4/26.\n */\nimport React from 'react';\nimport BannerAnim, { Element } from 'rc-banner-"
},
{
"path": "src/components/ui/banners/Basic.tsx",
"chars": 2124,
"preview": "/**\n * Created by hao.cheng on 2017/4/26.\n */\nimport React from 'react';\nimport BannerAnim, { Element } from 'rc-banner-"
},
{
"path": "src/components/ui/banners/Custom.tsx",
"chars": 6719,
"preview": "/**\n * Created by hao.cheng on 2017/4/26.\n */\nimport React from 'react';\nimport BannerAnim from 'rc-banner-anim';\nimport"
},
{
"path": "src/components/ui/banners/index.tsx",
"chars": 1591,
"preview": "/**\n * Created by hao.cheng on 2017/4/26.\n */\nimport React from 'react';\nimport { Row, Col, Card } from 'antd';\nimport B"
},
{
"path": "src/components/ui/emoji/iconfont.ts",
"chars": 156128,
"preview": "function setFont(): void {\n var svgSprite: string | null =\n '<svg><symbol id=\"icon-emoji-\" viewBox=\"0 0 1024 1"
},
{
"path": "src/components/ui/emoji/index.tsx",
"chars": 889,
"preview": "/**\n * Created by hao.cheng on 2017/4/22.\n */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport setF"
},
{
"path": "src/components/ui/map/Tencent.tsx",
"chars": 852,
"preview": "import React from 'react';\nimport ReactQMap from 'react-qmap';\n\nconst getContianer = (dom: any) => {\n const middleCon"
},
{
"path": "src/components/ui/map/index.tsx",
"chars": 536,
"preview": "import React from 'react';\nimport Tencent from './Tencent';\nimport { Row, Col, Card } from 'antd';\nimport BreadcrumbCust"
},
{
"path": "src/components/widget/AuthWidget.tsx",
"chars": 437,
"preview": "/**\n * Created by 叶子 on 2017/7/31.\n */\nimport { Component } from 'react';\nimport { connectAlita } from 'redux-alita';\n\nt"
},
{
"path": "src/components/widget/BreadcrumbCustom.tsx",
"chars": 692,
"preview": "/**\n * Created by hao.cheng on 2017/4/22.\n */\nimport React, { ReactNode } from 'react';\nimport { Breadcrumb } from 'antd"
},
{
"path": "src/components/widget/Copyright.tsx",
"chars": 379,
"preview": "/*\n * File: Copyright.tsx\n * Desc: 版权信息\n * File Created: 2020-04-12 22:50:33\n * Author: chenghao\n * ------\n * Copyright "
},
{
"path": "src/components/widget/Loading.tsx",
"chars": 197,
"preview": "import React from 'react';\n\nexport default () => (\n <div\n style={{ display: 'flex', justifyContent: 'center', "
},
{
"path": "src/components/widget/PwaInstaller.tsx",
"chars": 1985,
"preview": "/*\n * File: PwaInstaller.js\n * Desc: pwa手动触发安装\n * File Created: 2018-11-07 21:13:18\n * Author: chenghao\n *\n * Copyright "
},
{
"path": "src/components/widget/ThemePicker.tsx",
"chars": 1419,
"preview": "import React, { Component } from 'react';\nimport { SketchPicker } from 'react-color';\nimport classNames from 'classnames"
},
{
"path": "src/components/widget/index.tsx",
"chars": 220,
"preview": "export { default as PwaInstaller } from './PwaInstaller';\nexport { default as AuthWidget } from './AuthWidget';\nexport {"
},
{
"path": "src/index.tsx",
"chars": 2063,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AlitaProvider, setConfig } from 'redux-alita';\nimp"
},
{
"path": "src/react-app-env.d.ts",
"chars": 1498,
"preview": "/// <reference types=\"node\" />\n/// <reference types=\"react\" />\n/// <reference types=\"react-dom\" />\n\ndeclare namespace No"
},
{
"path": "src/routes/RouteWrapper.tsx",
"chars": 1534,
"preview": "/*\n * File: RouteWrapper.tsx\n * Desc: 描述\n * File Created: 2020-05-19 11:32:58\n * Author: chenghao at <hao.cheng@karakal."
},
{
"path": "src/routes/config.ts",
"chars": 5142,
"preview": "export interface IFMenuBase {\n key: string;\n title: string;\n icon?: string;\n component?: string;\n query?:"
},
{
"path": "src/routes/index.tsx",
"chars": 2539,
"preview": "/**\n * Created by 叶子 on 2017/8/13.\n */\nimport React from 'react';\nimport { Route, Redirect, Switch } from 'react-router-"
},
{
"path": "src/service/config.ts",
"chars": 609,
"preview": "/**\n * Created by 叶子 on 2017/7/30.\n * 接口地址配置文件\n */\n\n//easy-mock模拟数据接口地址\nconst MOCK_API = 'https://react-admin-mock.now.s"
},
{
"path": "src/service/index.ts",
"chars": 1512,
"preview": "/**\n * Created by hao.cheng on 2017/4/16.\n */\nimport axios from 'axios';\nimport { get, post } from './tools';\nimport * a"
},
{
"path": "src/service/tools.ts",
"chars": 936,
"preview": "/**\n * Created by 叶子 on 2017/7/30.\n * http通用工具函数\n */\nimport axios from 'axios';\nimport { message } from 'antd';\n\ninterfa"
},
{
"path": "src/serviceWorker.ts",
"chars": 5201,
"preview": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the ap"
},
{
"path": "src/style/antd/header.less",
"chars": 266,
"preview": ".header {\n padding: 0;\n height: 65px;\n .ant-menu {\n background: transparent;\n color: @white;\n "
},
{
"path": "src/style/antd/index.less",
"chars": 149,
"preview": "@import './variables.less';\n@import './menu.less';\n@import './utils.less';\n@import './header.less';\n@import './layout.le"
},
{
"path": "src/style/antd/layout.less",
"chars": 249,
"preview": ".ant-layout-content {\n min-height: auto;\n}\n\n.ant-layout {\n &.ant-layout-has-sider {\n &.app_layout-mobile {\n"
},
{
"path": "src/style/antd/menu.less",
"chars": 1194,
"preview": ".ant-menu-root {\n &.ant-menu-inline, &.ant-menu-vertical {\n background: @primary-color;\n border-right: "
},
{
"path": "src/style/antd/reset.less",
"chars": 145,
"preview": "/*\n * File: reset.less\n * Desc: 样式重写\n * File Created: 2020-04-12 23:08:16\n * Author: chenghao\n * ------\n * Copyright 202"
},
{
"path": "src/style/antd/utils.less",
"chars": 86,
"preview": "[class*=btn] {\n cursor: pointer\n}\n\n.bg--primary {\n background: @primary-color;\n}"
},
{
"path": "src/style/antd/variables.less",
"chars": 464,
"preview": "@import \"../../../node_modules/antd/lib/style/themes/default.less\";\n// 基础颜色\n@white: #ffffff;\n@primary-color: #313653;\n@p"
},
{
"path": "src/style/app.less",
"chars": 390,
"preview": "/*\n * File: app.less\n * Desc: 描述\n * File Created: 2020-07-26 18:27:37\n * Author: yezi\n * ------\n * Copyright 2020 - pres"
},
{
"path": "src/style/banner.less",
"chars": 2404,
"preview": ".banner-user {\n height: 200px;\n}\n.banner-user-elem {\n text-align: center;\n color: #fff;\n position: relative;\n overf"
},
{
"path": "src/style/button.less",
"chars": 42,
"preview": ".ant-btn+.ant-btn {\n margin-left: 10px;\n}"
},
{
"path": "src/style/card.less",
"chars": 762,
"preview": ".react-draggable, .cursor-move{\n cursor: move;\n strong {\n background: #ddd;\n border: 1px solid #999;\n border-"
},
{
"path": "src/style/global.less",
"chars": 701,
"preview": "small {\n opacity: .6;\n}\n.text-muted{\n opacity: .6;\n}\n.clear{\n display: block;\n overflow: hidden;\n}\n.center {\n displ"
},
{
"path": "src/style/icons.less",
"chars": 413,
"preview": "ul.icons-list{\n list-style: none;\n overflow: hidden;\n li{\n float: left;\n width: 10%;\n text-align: center;\n "
},
{
"path": "src/style/img.less",
"chars": 122,
"preview": "img {\n vertical-align: middle;\n}\n.img-responsive{\n width: 100%;\n height: auto;\n}\n.img-circle {\n border-radius: 50%;\n"
},
{
"path": "src/style/index.less",
"chars": 1362,
"preview": "@import 'variables';\n@import 'global';\n@import 'scroll';\n@import 'table';\n@import 'login';\n@import 'icons';\n@import 'but"
},
{
"path": "src/style/lib/animate.css",
"chars": 79945,
"preview": "@charset \"UTF-8\";\n\n/*!\n * animate.css -http://daneden.me/animate\n * Version - 3.5.1\n * Licensed under the MIT license - "
},
{
"path": "src/style/login.less",
"chars": 940,
"preview": ".login{\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n background: #f3f3f3;\n .log"
},
{
"path": "src/style/menu.less",
"chars": 1314,
"preview": ".ant-menu-dark {\n &.ant-menu-inline {\n .ant-menu-item-selected {\n background-color: #5f5f5f !important;\n }\n "
},
{
"path": "src/style/modal.less",
"chars": 485,
"preview": ".vertical-center-modal {\n text-align: center;\n white-space: nowrap;\n &:before {\n content: '';\n display: inline-"
},
{
"path": "src/style/scroll.less",
"chars": 124,
"preview": "//美化webkit内核滚动条\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n::-webkit-scrollbar-thumb {\n background-color: #77"
},
{
"path": "src/style/table.less",
"chars": 177,
"preview": ".table-operations {\n margin-bottom: 16px;\n > button {\n margin-right: 8px;\n }\n}\n\n.editable-row-text {\n padding: 5p"
},
{
"path": "src/style/theme/index.js",
"chars": 287,
"preview": "/**\n * Created by hao.cheng on 2017/5/6.\n */\nimport themeinfo from './theme-info.json';\nimport themegrey from './theme-g"
},
{
"path": "src/style/theme/theme-danger.json",
"chars": 49,
"preview": "{\n \"header\": {\n \"background\": \"#f44455\"\n }\n}"
},
{
"path": "src/style/theme/theme-grey.json",
"chars": 49,
"preview": "{\n \"header\": {\n \"background\": \"#001529\"\n }\n}"
},
{
"path": "src/style/theme/theme-info.json",
"chars": 49,
"preview": "{\n \"header\": {\n \"background\": \"#6887ff\"\n }\n}"
},
{
"path": "src/style/theme/theme-warn.json",
"chars": 49,
"preview": "{\n \"header\": {\n \"background\": \"#fcc100\"\n }\n}"
},
{
"path": "src/style/utils-border.less",
"chars": 43,
"preview": ".b-a {\n border: 1px solid @border-color;\n}"
},
{
"path": "src/style/utils-color.less",
"chars": 546,
"preview": ".color-variant(@bg, @color) {\n color: @color;\n background-color: @bg;\n}\n.dark-white {\n color: @dark;\n background-col"
},
{
"path": "src/style/utils-size.less",
"chars": 718,
"preview": ".w-8{\n width: 8px;\n height: 8px;\n display: inline-block;\n}\n.w-16{\n width: 16px;\n height: 16px;\n display: inline-"
},
{
"path": "src/style/utils-spacing.less",
"chars": 588,
"preview": ".pb-s { padding-bottom: @spacer * 0.5 !important; }\n.pb-m { padding-bottom: @spacer * 1 !important; }\n.pb-l { padding-"
},
{
"path": "src/style/utils-text.less",
"chars": 596,
"preview": ".text{\n font-size: 1rem;\n}\n.text-2x{\n font-size: 2rem;\n}\n.text-3x{\n font-size: 3rem;\n}\n.text-4x{\n font-size: 4rem;\n}"
},
{
"path": "src/style/variables.less",
"chars": 1039,
"preview": "@full-black: \t\trgba(0, 0, 0, 1);\n@dark-black: \t\trgba(0, 0, 0, 0.87);\n@light-black: \t\trgba(0, 0, 0, 0.54);\n@min-black: "
},
{
"path": "src/utils/hooks.ts",
"chars": 609,
"preview": "/*\n * File: hooks.ts\n * Desc: 自定义hooks\n * File Created: 2020-08-24 22:45:40\n * Author: yezi\n * ------\n * Copyright 2020 "
},
{
"path": "src/utils/index.ts",
"chars": 389,
"preview": "/**\n * Created by hao.cheng on 2017/4/28.\n */\nimport queryString from 'query-string';\n/**\n * 获取URL参数\n */\nexport function"
},
{
"path": "theme.js",
"chars": 607,
"preview": "const path = require('path');\nconst { generateTheme } = require('antd-theme-generator');\n\nconst options = {\n antDir: "
},
{
"path": "tsconfig.json",
"chars": 491,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"esnext\"\n ],\n "
}
]
About this extraction
This page contains the full source code of the yezihaohao/react-admin GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 140 files (835.9 KB), approximately 306.2k tokens, and a symbol index with 160 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.