From ce0042945f94122f3a071f9b75822af5efebc043 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Wed, 2 Mar 2022 11:04:01 +0800 Subject: [PATCH] refactor: Update style 1. Support style check: stylelint 2. Add stylelint check in lint-staged husky 2. Update styles Change-Id: Id793b0936e4c3ea27ddef0df794d5b711880599f --- .stylelintrc.json | 15 + package.json | 23 +- src/components/Cards/NotFound/index.less | 18 +- src/components/CodeEditor/custom.less | 9 +- src/components/Confirm/index.less | 7 +- src/components/DetailCard/index.less | 20 +- src/components/Form/index.less | 50 +- src/components/FormItem/AddSelect/index.less | 17 +- .../FormItem/Descriptions/index.less | 5 +- .../FormItem/InstanceVolume/index.less | 7 +- src/components/FormItem/IpInput/index.less | 36 +- .../FormItem/IpInputSimple/index.less | 36 +- src/components/FormItem/NUMAInput/index.less | 5 +- .../FormItem/NetworkSelect/index.jsx | 2 +- .../FormItem/NetworkSelect/index.less | 22 +- src/components/FormItem/Radio/index.less | 10 +- src/components/FormItem/Select/index.less | 4 +- .../FormItem/SelectTable/index.less | 27 +- src/components/FormItem/Title/index.less | 6 +- src/components/FormItem/index.less | 2 +- src/components/Infos/index.less | 7 +- src/components/Layout/GlobalHeader/index.less | 62 +- src/components/MagicInput/index.less | 57 +- src/components/Notify/index.jsx | 2 +- src/components/Notify/index.less | 4 +- src/components/Pagination/index.less | 5 +- src/components/PrometheusChart/BaseCard.jsx | 2 +- .../PrometheusChart/component/BaseContent.jsx | 2 +- .../PrometheusChart/component/Charts.jsx | 2 +- .../PrometheusChart/component/styles.less | 10 +- src/components/PrometheusChart/style.less | 72 +- src/components/SelectLang/index.jsx | 2 +- src/components/SelectLang/index.less | 7 +- src/components/StepForm/index.less | 40 +- .../Tables/Base/ActionButton/index.less | 4 +- .../Tables/Base/BatchActionButtons/index.less | 6 +- .../Tables/Base/ItemActionButtons/index.less | 12 +- src/components/Tables/Base/index.jsx | 6 +- src/components/Tables/Base/index.less | 81 +- src/components/Tables/SimpleTable/index.less | 8 +- src/containers/BaseDetail/index.less | 2 +- src/containers/List/index.less | 5 +- src/containers/TabDetail/index.less | 34 +- src/containers/TabList/index.less | 9 +- src/layouts/Auth/index.less | 35 +- src/layouts/Base/index.less | 113 +- src/layouts/Blank/index.less | 16 +- .../auth/containers/ChangePassword/index.less | 29 +- src/pages/auth/containers/Login/index.jsx | 2 +- src/pages/auth/containers/Login/index.less | 15 +- .../components/ComputeService.jsx | 2 +- .../components/NetworkService.jsx | 2 +- .../components/ResourceOverview.jsx | 2 +- .../base/containers/AdminOverview/style.less | 88 +- .../Overview/components/ProjectInfo.jsx | 2 +- .../Overview/components/QuotaOverview.jsx | 2 +- src/pages/base/containers/Overview/index.jsx | 6 +- src/pages/base/containers/Overview/style.less | 75 +- .../Instance/Detail/BaseDetail/index.jsx | 4 +- .../Instance/Detail/BaseDetail/index.less | 33 +- .../Instance/Detail/SecurityGroup/index.less | 25 +- .../Instance/actions/CreateIronic/index.less | 5 +- .../Instance/actions/StepCreate/index.less | 5 +- .../containers/Instance/actions/index.less | 10 +- .../containers/Instance/components/index.less | 5 +- .../compute/containers/Instance/index.less | 58 +- .../containers/Keypair/Detail/index.less | 3 +- .../containers/ServerGroup/Detail/index.less | 25 +- .../containers/Metadata/Detail/BaseDetail.jsx | 2 +- .../containers/Metadata/Detail/styles.less | 2 +- .../containers/SystemInfo/index.less | 0 .../identity/containers/Domain/index.less | 4 +- .../identity/containers/Project/index.less | 4 +- .../containers/UserGroup/Detail/index.less | 34 +- .../containers/OpenstackService/index.less | 72 +- .../OtherService/components/Mysql/index.jsx | 2 +- .../components/RabbitMQ/index.jsx | 2 +- .../containers/OtherService/index.less | 16 +- .../Overview/components/AlertInfo/index.jsx | 4 +- .../monitor/containers/Overview/config.jsx | 12 +- .../monitor/containers/Overview/index.jsx | 2 +- .../monitor/containers/Overview/index.less | 204 +- .../monitor/containers/PhysicalNode/index.jsx | 8 +- .../containers/StorageCluster/RenderTabs.jsx | 2 +- .../containers/StorageCluster/index.jsx | 6 +- .../containers/StorageCluster/index.less | 43 +- .../network/containers/FloatingIp/index.jsx | 2 +- .../network/containers/FloatingIp/styles.less | 4 +- .../containers/Topology/InstanceCard.jsx | 2 +- .../network/containers/Topology/NodeCard.jsx | 6 +- .../network/containers/Topology/index.less | 27 +- .../Detail/SecurityGroups/index.less | 25 +- .../VirtualAdapter/Detail/index.less | 3 +- .../containers/Container/Detail/index.jsx | 2 +- .../containers/Container/Detail/index.less | 12 +- .../storage/containers/Container/index.jsx | 2 +- .../Volume/actions/Create/index.less | 4 +- .../containers/UserCenter/index.jsx | 14 +- .../containers/UserCenter/styles.less | 31 +- src/resources/instance.jsx | 2 +- src/styles/base.less | 61 +- src/styles/reset.less | 32 +- src/styles/variables.less | 30 +- yarn.lock | 1963 ++++++++++++----- 104 files changed, 2421 insertions(+), 1544 deletions(-) create mode 100644 .stylelintrc.json delete mode 100644 src/pages/configuration/containers/SystemInfo/index.less diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 00000000..272b50ba --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-standard", + "stylelint-config-css-modules", + "stylelint-config-rational-order", + "stylelint-config-prettier" + ], + "customSyntax": "postcss-less", + "plugins": ["stylelint-order"], + "rules": { + "no-descending-specificity": null, + "at-rule-no-unknown": null, + "color-function-notation": "legacy" + } +} diff --git a/package.json b/package.json index 1167226e..69362941 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "i18n": "grunt", "lint": "eslint src --fix --quiet --ext .js,.jsx", "lint:test": "eslint test --fix --quiet --ext .js", + "lint:style": "stylelint --fix \"src/**/*.less\" --custom-syntax postcss-less", "report:delete-json": "rm -rf test/e2e/results/* || true", "report:delete-html": "rm -rf test/e2e/report || true", "report:pre": "npm run report:delete-json && npm run report:delete-html && mkdir test/e2e/report", @@ -31,11 +32,15 @@ } }, "lint-staged": { + "*.{css,less}": [ + "stylelint --fix", + "git add" + ], "*.{js,jsx}": [ "eslint --fix", "git add" ], - "*.{html,css,scss,md,json}": [ + "*.{html,css,scss,less,md,json}": [ "prettier --write", "git add" ] @@ -103,7 +108,7 @@ "clean-webpack-plugin": "^1.0.0", "compression-webpack-plugin": "5.0.1", "cross-env": "^7.0.3", - "css-loader": "^0.28.11", + "css-loader": "1.0.1", "cypress": "6.8.0", "cypress-downloadfile": "^1.2.1", "cypress-file-upload": "^5.0.6", @@ -130,18 +135,24 @@ "istanbul-lib-coverage": "^3.0.0", "jest": "^26.6.3", "jest-enzyme": "^7.1.2", - "less": "^3.8.1", - "less-loader": "^4.1.0", + "less": "3.13.0", + "less-loader": "5.0.0", "lint-staged": "^11.0.0", "mochawesome": "^6.2.2", "mochawesome-merge": "^4.2.0", "mochawesome-report-generator": "^5.2.0", - "postcss-less": "^2.0.0", - "postcss-loader": "^3.0.0", + "postcss-less": "2.0.0", + "postcss-loader": "3.0.0", "prettier": "^2.3.0", "react-css-modules": "^4.7.7", "react-hot-loader": "^4.12.20", "style-loader": "^0.20.3", + "stylelint": "^14.2.0", + "stylelint-config-css-modules": "^2.3.0", + "stylelint-config-prettier": "^9.0.3", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-config-standard": "^24.0.0", + "stylelint-order": "^5.0.0", "terser-webpack-plugin": "4.2.3", "url-loader": "^4.1.1", "webpack": "^4.42.1", diff --git a/src/components/Cards/NotFound/index.less b/src/components/Cards/NotFound/index.less index 189f1033..27097108 100644 --- a/src/components/Cards/NotFound/index.less +++ b/src/components/Cards/NotFound/index.less @@ -2,8 +2,8 @@ .wrapper { margin-top: 100px; - border-radius: @border-radius; text-align: center; + border-radius: @border-radius; } .image { @@ -13,26 +13,26 @@ .text { display: inline-block; - vertical-align: top; width: 600px; margin-left: 60px; + vertical-align: top; :global .h1 { - opacity: 0.4; + color: #abb4be; font-size: 120px; line-height: 1.4; - color: #abb4be; - user-select: none; text-align: left; + opacity: 0.4; + user-select: none; } p { - text-shadow: 0 4px 8px rgba(36, 46, 66, 0.1); - font-size: 20px; - font-weight: @font-bold; - line-height: 1.4; color: @second-title-color; + font-weight: @font-bold; + font-size: 20px; + line-height: 1.4; text-align: left; + text-shadow: 0 4px 8px rgba(36, 46, 66, 10%); } a { diff --git a/src/components/CodeEditor/custom.less b/src/components/CodeEditor/custom.less index a7e386f5..244f496b 100644 --- a/src/components/CodeEditor/custom.less +++ b/src/components/CodeEditor/custom.less @@ -1,11 +1,12 @@ +/* stylelint-disable selector-class-pattern */ .ace_editor { + font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; line-height: 20px !important; - font-family: Monaco, Menlo, Consolas, Courier New, monospace; -webkit-font-smoothing: auto; } .ace_editor.ace-chaos { - color: #ffffff; + color: #fff; background-color: #242e42; } @@ -22,7 +23,7 @@ } .ace_editor.ace-chaos .ace_keyword { - color: #ffffff; + color: #fff; } .ace_editor.ace-chaos .ace_string { @@ -38,8 +39,8 @@ } .ace_editor.ace-chaos .ace_indent-guide { - border-right: 1px dotted #777; padding: 2px 0; + border-right: 1px dotted #777; } .ace_editor.ace-chaos .ace_marker-layer .ace_selection { diff --git a/src/components/Confirm/index.less b/src/components/Confirm/index.less index 6532fd3f..d809bee5 100644 --- a/src/components/Confirm/index.less +++ b/src/components/Confirm/index.less @@ -1,13 +1,14 @@ -@import "~styles/variables"; +@import '~styles/variables'; .confirm-modal { :global { .ant-modal-confirm-body > .anticon { - font-size: 18px; margin-right: 20px; + font-size: 18px; } } } + .confirm { color: @warn-color !important; } @@ -22,4 +23,4 @@ .warn { color: @warn-color !important; -} \ No newline at end of file +} diff --git a/src/components/DetailCard/index.less b/src/components/DetailCard/index.less index 19fad4d6..c96f7198 100644 --- a/src/components/DetailCard/index.less +++ b/src/components/DetailCard/index.less @@ -3,22 +3,22 @@ @min-space: 8px; @mid-space: 16px; @lg-space: 24px; -@box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05); -@topo-line: 1px solid #D2D2D2; +@box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%); +@topo-line: 1px solid #d2d2d2; @resource-box-bg: #fbfdff; @resource-box-border: 1px solid #cfe1ff; -@success: #57E39B; -@warning: #FEDF40; -@error: #EB354D; -@link: #0068FF; +@success: #57e39b; +@warning: #fedf40; +@error: #eb354d; +@link: #0068ff; .card { + flex: 1; margin-bottom: @mid-space; - box-shadow: @box-shadow; background-color: #fff; border-radius: @border-radius; - flex: 1; + box-shadow: @box-shadow; .card-content { padding: @mid-space; @@ -31,9 +31,10 @@ } .title-help { - line-height: 26px; margin-left: @min-space; + line-height: 26px; } + div { word-break: break-all; } @@ -42,6 +43,7 @@ :last-child { margin-bottom: 0; } + :global { .ant-typography { word-break: break-all; diff --git a/src/components/Form/index.less b/src/components/Form/index.less index f7293443..30e16713 100644 --- a/src/components/Form/index.less +++ b/src/components/Form/index.less @@ -1,11 +1,11 @@ -@import "~styles/variables"; +@import '~styles/variables'; .wrapper { position: relative; height: 100%; + padding-top: @body-padding; overflow: hidden; background-color: #fff; - padding-top: @body-padding; :global { .ant-spin-nested-loading { @@ -23,19 +23,18 @@ } .form { - margin-left: @body-padding * 2; - margin-right: @body-padding * 2; - // padding-top: @body-padding; - background-color: #fff; height: calc(100% - 48px); + margin-right: @body-padding * 2; + margin-left: @body-padding * 2; overflow-y: auto; + background-color: #fff; :global { - .ant-form-item-label>label { + .ant-form-item-label > label { margin-left: 12px; } - .ant-form-item-label>.ant-form-item-required { + .ant-form-item-label > .ant-form-item-required { margin-left: 0; } @@ -47,21 +46,21 @@ .footer { position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; - height: 48px; - background-color: #fff; - box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.09); display: flex; align-items: center; justify-content: space-between; + height: 48px; + background-color: #fff; + box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 9%); } .btns { float: right; - margin-right: 32px; margin-top: 8px; + margin-right: 32px; :global { button { @@ -78,44 +77,45 @@ .form-item-divider { width: 98% !important; min-width: 90% !important; - margin-left: auto; margin-right: auto; + margin-left: auto; } .ant-radio-button-wrapper { color: @color-text-body; } + .ant-radio-button-wrapper-disabled { - color: rgba(0, 0, 0, 0.25); + color: rgba(0, 0, 0, 25%); } } .tips { - padding: 8px 16px; - background: rgba(89, 157, 255, 0.15); margin-bottom: 16px; + padding: 8px 16px; + background: rgba(0, 0, 0, 15%); } .tips-icon { margin-right: 4px; - color: #0068FF; + color: #0068ff; } .footer-left { - height: 48px; - float: left; - margin-left: 16px; - color: rgb(72, 72, 72); display: flex; align-items: center; justify-content: left; + float: left; + height: 48px; + margin-left: 16px; + color: rgb(72, 72, 72); } .submit-tip { - font-size: 16px; - // margin-top: 16px; display: inline-block; + font-size: 16px; } + .progress-wrapper { width: 170px; -} \ No newline at end of file +} diff --git a/src/components/FormItem/AddSelect/index.less b/src/components/FormItem/AddSelect/index.less index 5a3562b6..fd86947c 100644 --- a/src/components/FormItem/AddSelect/index.less +++ b/src/components/FormItem/AddSelect/index.less @@ -1,14 +1,14 @@ -.add-select { -} .items { float: left; width: 100%; } + .item { position: relative; - margin-top: 8px; float: left; width: 100%; + margin-top: 8px; + :global { .ant-form-item-has-success .ant-select:not(.ant-select-borderless) @@ -17,22 +17,21 @@ } } } + .item-detail { width: 90%; - // :global { - // .ant-form-item-has-error { - // margin-bottom: 24px; - // } - // } } + .float { float: left; } + .remove-btn, .add-btn { - padding-left: 0; padding-right: 8px; + padding-left: 0; } + .desc { margin-left: 16px; } diff --git a/src/components/FormItem/Descriptions/index.less b/src/components/FormItem/Descriptions/index.less index 551fbcb5..8f5f95e7 100644 --- a/src/components/FormItem/Descriptions/index.less +++ b/src/components/FormItem/Descriptions/index.less @@ -1,9 +1,10 @@ .label { vertical-align: top; + :global { .ant-descriptions-item-label { width: 100px; - color: #8A8A8A; + color: #8a8a8a; } } -} \ No newline at end of file +} diff --git a/src/components/FormItem/InstanceVolume/index.less b/src/components/FormItem/InstanceVolume/index.less index c4aa3d27..0de95fac 100644 --- a/src/components/FormItem/InstanceVolume/index.less +++ b/src/components/FormItem/InstanceVolume/index.less @@ -2,14 +2,17 @@ display: block; margin-bottom: 8px; } + .label { - margin-right: 10px; max-width: 20%; + margin-right: 10px; } + .select { max-width: 80%; } + .size-label { - margin-left: 10px; margin-right: 40px; + margin-left: 10px; } diff --git a/src/components/FormItem/IpInput/index.less b/src/components/FormItem/IpInput/index.less index b9475225..dca67e37 100644 --- a/src/components/FormItem/IpInput/index.less +++ b/src/components/FormItem/IpInput/index.less @@ -3,43 +3,49 @@ overflow: hidden; border-radius: 4px; } + .item-wrapper { - width: 44px; position: relative; display: inline-block; + width: 44px; } + .item-wrapper:last-child { width: 40px; } -.item-wrapper:after { - content: " "; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: #484848; + +.item-wrapper::after { position: absolute; top: 13px; + width: 4px; + height: 4px; + background-color: #484848; + border-radius: 50%; + content: ' '; } -.item-wrapper:last-child:after { + +.item-wrapper:last-child::after { display: none; } + .item { width: 40px; - padding-left: 8px; padding-right: 8px; - border-top: none; - border-left: none; - border-right: none; - border-radius: 0; + padding-left: 8px; text-align: center; + border-top: none; + border-right: none; + border-left: none; + border-radius: 0; } .item:focus { border-top: none; - border-left: none; border-right: none; + border-left: none; box-shadow: none; } + .ipv6 { width: 120px; -} \ No newline at end of file +} diff --git a/src/components/FormItem/IpInputSimple/index.less b/src/components/FormItem/IpInputSimple/index.less index b9475225..dca67e37 100644 --- a/src/components/FormItem/IpInputSimple/index.less +++ b/src/components/FormItem/IpInputSimple/index.less @@ -3,43 +3,49 @@ overflow: hidden; border-radius: 4px; } + .item-wrapper { - width: 44px; position: relative; display: inline-block; + width: 44px; } + .item-wrapper:last-child { width: 40px; } -.item-wrapper:after { - content: " "; - width: 4px; - height: 4px; - border-radius: 50%; - background-color: #484848; + +.item-wrapper::after { position: absolute; top: 13px; + width: 4px; + height: 4px; + background-color: #484848; + border-radius: 50%; + content: ' '; } -.item-wrapper:last-child:after { + +.item-wrapper:last-child::after { display: none; } + .item { width: 40px; - padding-left: 8px; padding-right: 8px; - border-top: none; - border-left: none; - border-right: none; - border-radius: 0; + padding-left: 8px; text-align: center; + border-top: none; + border-right: none; + border-left: none; + border-radius: 0; } .item:focus { border-top: none; - border-left: none; border-right: none; + border-left: none; box-shadow: none; } + .ipv6 { width: 120px; -} \ No newline at end of file +} diff --git a/src/components/FormItem/NUMAInput/index.less b/src/components/FormItem/NUMAInput/index.less index 610a963f..70e323d9 100644 --- a/src/components/FormItem/NUMAInput/index.less +++ b/src/components/FormItem/NUMAInput/index.less @@ -1,7 +1,8 @@ .cpu { margin-right: 8px; } + .ram { - margin-left: 16px; margin-right: 8px; -} \ No newline at end of file + margin-left: 16px; +} diff --git a/src/components/FormItem/NetworkSelect/index.jsx b/src/components/FormItem/NetworkSelect/index.jsx index 69a3b853..8bd36994 100644 --- a/src/components/FormItem/NetworkSelect/index.jsx +++ b/src/components/FormItem/NetworkSelect/index.jsx @@ -235,7 +235,7 @@ export default class NetworkSelect extends React.Component { label: (
{it.name} - {it.cidr} + {it.cidr}
), name: it.name, diff --git a/src/components/FormItem/NetworkSelect/index.less b/src/components/FormItem/NetworkSelect/index.less index 76aba072..d62d6aef 100644 --- a/src/components/FormItem/NetworkSelect/index.less +++ b/src/components/FormItem/NetworkSelect/index.less @@ -1,43 +1,49 @@ @import '~styles/variables'; + .network-select { + position: relative; display: block; height: 61.6px; margin-bottom: 0 !important; - position: relative; + :global { .ant-form-item-control-input-content { height: 61.6px; } + .ant-form-item-explain { position: absolute; bottom: 0; } } } -.label { - margin-right: 10px; -} + .select { margin-right: 40px; } + .size-label { - margin-left: 10px; margin-right: 40px; + margin-left: 10px; } + .tips { margin-top: 0; } + .label { + margin-right: 10px; color: @color-text-caption; line-height: 30px; } + .content { color: @color-text-body; } -.subnet_options_cidr { - padding-left: 5px; +.subnet-options-cidr { margin-left: 5px; - opacity: 0.6; + padding-left: 5px; border-left: 1px solid; + opacity: 0.6; } diff --git a/src/components/FormItem/Radio/index.less b/src/components/FormItem/Radio/index.less index ab000363..c3fedfb9 100644 --- a/src/components/FormItem/Radio/index.less +++ b/src/components/FormItem/Radio/index.less @@ -1,18 +1,20 @@ -@import "~styles/variables"; +@import '~styles/variables'; .only-radio { :global { .ant-radio-button-wrapper { margin-left: 8px; - border-radius: @border-radius; border-left-width: 1px; + border-radius: @border-radius; } - .ant-radio-button-wrapper:before { + + .ant-radio-button-wrapper::before { display: none; } + .ant-radio-button-wrapper:first-child { margin-left: 0; border-radius: @border-radius; } } -} \ No newline at end of file +} diff --git a/src/components/FormItem/Select/index.less b/src/components/FormItem/Select/index.less index 91ff9df8..a0da1b5b 100644 --- a/src/components/FormItem/Select/index.less +++ b/src/components/FormItem/Select/index.less @@ -1,6 +1,6 @@ -@import "~styles/variables"; +@import '~styles/variables'; .checkbox { - padding-bottom: 5px; padding-top: 5px; + padding-bottom: 5px; } diff --git a/src/components/FormItem/SelectTable/index.less b/src/components/FormItem/SelectTable/index.less index 76fc52d5..06312a8e 100644 --- a/src/components/FormItem/SelectTable/index.less +++ b/src/components/FormItem/SelectTable/index.less @@ -1,56 +1,64 @@ -@import "~styles/variables"; +@import '~styles/variables'; -.sl-select-table { -} .search-wrapper { margin-bottom: 16px; + :global { .ant-menu-root.ant-menu-vertical { - box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2) !important; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 20%) !important; } } } .image-tabs { + display: flex; height: 52px; margin-bottom: 8px; - display: flex; + img { + display: block; width: 20px; height: 20px; - display: block; margin: 0 auto; } + :global { .ant-radio-button-wrapper { - border: none; - color: @color-text-body; width: 70px; height: 50px; overflow: hidden; + color: @color-text-body; text-align: center; + border: none; } + .ant-radio-button-wrapper:not(:first-child)::before { width: 0; } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { color: @primary-color; font-weight: bold; } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within { box-shadow: none; } } } + .image-tab { flex: 1 auto; } + .image-tab-label { font-size: 10px; } + .normal-tabs { margin-bottom: 8px; } + .pagination-footer { :global { .ant-select { @@ -59,6 +67,7 @@ } } } + .sl-select-table-backend { :global { .ant-table-footer { @@ -66,4 +75,4 @@ background: #fff; } } -} \ No newline at end of file +} diff --git a/src/components/FormItem/Title/index.less b/src/components/FormItem/Title/index.less index c7f0bb6f..d477137a 100644 --- a/src/components/FormItem/Title/index.less +++ b/src/components/FormItem/Title/index.less @@ -1,7 +1,7 @@ -@import "~styles/variables"; +@import '~styles/variables'; .title { - font-size: @size-normal; - font-weight: bold; margin-left: 12px; + font-weight: bold; + font-size: @size-normal; } diff --git a/src/components/FormItem/index.less b/src/components/FormItem/index.less index 0f2d4a73..6e4953fa 100644 --- a/src/components/FormItem/index.less +++ b/src/components/FormItem/index.less @@ -1,5 +1,5 @@ .tip { position: absolute; - right: -27px; top: 10px; + right: -27px; } diff --git a/src/components/Infos/index.less b/src/components/Infos/index.less index b99c3313..fb70d83d 100644 --- a/src/components/Infos/index.less +++ b/src/components/Infos/index.less @@ -1,14 +1,15 @@ .item { - background-color: #fff; margin-bottom: 10px; + background-color: #fff; :global { .ant-descriptions-item-label { width: 100px; - color: #8A8A8A; + color: #8a8a8a; } + .ant-descriptions-item-content { word-break: break-all; } } -} \ No newline at end of file +} diff --git a/src/components/Layout/GlobalHeader/index.less b/src/components/Layout/GlobalHeader/index.less index d1a78e54..f9de405a 100644 --- a/src/components/Layout/GlobalHeader/index.less +++ b/src/components/Layout/GlobalHeader/index.less @@ -1,4 +1,4 @@ -@import "~styles/variables"; +@import '~styles/variables'; .menu { :global(.anticon) { @@ -22,8 +22,8 @@ line-height: 40px; .user-label { - font-weight: "bold"; margin-right: 8px; + font-weight: 'bold'; } span { @@ -54,24 +54,6 @@ .action { display: inline-block; } - - .right_message { - - .message_avatar { - background-color: #fff; - color: rgba(0, 0, 0, 0.65); - margin-top: -4px; - } - - :global { - .ant-badge-dot { - transform: translate(-55%, 10%); - } - .ant-avatar-square { - border-radius: 3px !important; - } - } - } } .project-menu { @@ -80,7 +62,6 @@ } :global { - .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { cursor: pointer; @@ -103,16 +84,17 @@ .project { float: left; - cursor: pointer; font-size: 14px; line-height: @header-height; + cursor: pointer; :global { .ant-divider { - background-color: #d2d2d2; - margin-left: 24px; margin-right: 24px; + margin-left: 24px; + background-color: #d2d2d2; } + .ant-btn-link { position: absolute; min-width: 280px; @@ -122,23 +104,23 @@ } .header { + position: relative; + z-index: 200; + flex-grow: 1; + height: 100%; padding-left: 36px; overflow: hidden; - background-color: #fff; - height: 100%; color: @title-color; - position: relative; - flex-grow: 1; - z-index: 200; - box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09); + background-color: #fff; + box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%); } .avatar { - box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09); - border: none; width: 30px; height: 30px; color: #bfbfbf; + border: none; + box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 9%); } .domain { @@ -146,14 +128,14 @@ } .links { - margin-right: 20px; display: inline-block; + margin-right: 20px; :global { .ant-divider { - background-color: #d2d2d2; - margin-left: 24px; margin-right: 24px; + margin-left: 24px; + background-color: #d2d2d2; } } @@ -179,17 +161,17 @@ } .single-link { - color: @primary-color; margin-right: 5px; + color: @primary-color; } .token { pre { - padding: .4em .6em; + padding: 0.4em 0.6em; white-space: pre-wrap; word-wrap: break-word; - background: hsla(0, 0%, 58.8%, .1); - border: 1px solid hsla(0, 0%, 39.2%, .2); + background: hsla(0%, 0%, 58.8%, 10%); + border: 1px solid hsla(0%, 0%, 39.2%, 20%); border-radius: 3px; } -} \ No newline at end of file +} diff --git a/src/components/MagicInput/index.less b/src/components/MagicInput/index.less index cd55de1f..949603dc 100644 --- a/src/components/MagicInput/index.less +++ b/src/components/MagicInput/index.less @@ -5,29 +5,29 @@ } .magic-input-wrapper { + position: relative; align-items: center; width: 100%; min-width: 200px; - border: 1px solid rgb(217, 217, 217); - border-radius: @border-radius; padding: 3px 0 3px 8px; background-color: #fff; - position: relative; + border: 1px solid rgb(217, 217, 217); + border-radius: @border-radius; :global { .ant-tag { - background-color: @primary-color; + height: 24px; + margin-right: 4px; + padding: 0 4px; color: #fff; font-size: 10px; - height: 24px; line-height: 24px; + background-color: @primary-color; border: none; - padding: 0 4px; - margin-right: 4px; .anticon-close { - color: #fff; margin-left: 16px; + color: #fff; } } @@ -44,7 +44,7 @@ .magic-input-wrapper-active { border-color: @primary-color; - box-shadow: 0 0 0 2px rgba(0, 104, 255, 0.2); + box-shadow: 0 0 0 2px rgba(0, 104, 255, 20%); } .input-wrapper { @@ -55,10 +55,10 @@ :global { .ant-input { - border: none; - box-shadow: none; padding: 0; background: none; + border: none; + box-shadow: none; } .ant-input:focus { @@ -76,33 +76,26 @@ } .ant-menu-vertical .ant-menu-item { - font-size: 10px; - margin-top: 0px; + margin-top: 0; margin-bottom: 0; + font-size: 10px; } } } -.tagItem { - margin-bottom: 5px; -} - -.input { -} - .menu { - box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09) !important; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 9%) !important; } .menu, .option-menu { position: absolute; - z-index: 100; top: 34px; - border-radius: @border-radius; - overflow-y: auto; - overflow-x: hidden; + z-index: 100; max-height: 310px; + overflow-x: hidden; + overflow-y: auto; + border-radius: @border-radius; } .key { @@ -112,8 +105,8 @@ :global { .ant-divider, .ant-divider-vertical { - margin-left: 4px; margin-right: 4px; + margin-left: 4px; } } } @@ -132,15 +125,15 @@ .magic-input-wrapper .ant-tag { display: inline-block; height: 24px; - line-height: 24px; margin: 0 5px 0 0; + line-height: 24px; } } .search-icon { position: absolute; - right: 8px; top: 0; + right: 8px; color: @color-text-body; font-size: 12px; line-height: 32px; @@ -151,19 +144,19 @@ line-height: 24px; .close-btn { - border: none; height: 24px !important; padding: 0; + border: none; } } .close-option-btn { - height: 24px !important; top: 3px; + height: 24px !important; } .magic-input-checks { - line-height: 32px; - margin-left: 8px; min-width: 120px; + margin-left: 8px; + line-height: 32px; } diff --git a/src/components/Notify/index.jsx b/src/components/Notify/index.jsx index 9fae242f..25a87d29 100644 --- a/src/components/Notify/index.jsx +++ b/src/components/Notify/index.jsx @@ -150,7 +150,7 @@ const errorWithDetail = (err, title) => { buttonText={t('Click to show detail')} component={ { return ( { }, [node]); return ( -
+
{(renderTimeRangeSelect || renderNodeSelect) && (