From ac3744074058fbfb76032b026b4458eda66dfdf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=B1=B3=E8=80=81=E6=9C=B1?= Date: Tue, 12 Feb 2019 15:17:46 +0800 Subject: [PATCH] Enhance stylelint rules, fix propTypes error of TagSelect (#3518) * add stylelint shareable config for css modules * fix CSS pseudo element with double colon * support stylelint declaration-block-no-ignored-properties rule * support sorted CSS properties order for readability and consistency * autofix order of all styles by lint:fix script * fix propTypes error of TagSelect component * Revert "autofix order of all styles by lint:fix script" This reverts commit 51cb9d055f607489a259fd878d80c6b6e70c61de. * Revert "support sorted CSS properties order for readability and consistency" This reverts commit ff6c24d263cf5d3f73880bd7a5866efb4911de9f. * make lint:fix work for stylelint * Revert "Revert "autofix order of all styles by lint:fix script"" This reverts commit 946ed0a351542904e70680c166e47a1f5080d1ca. * Revert "Revert "support sorted CSS properties order for readability and consistency"" This reverts commit 31b557e3826e6e5c5cf9b591fc97e24b9b2abb6e. --- .stylelintrc.json | 12 +++-- package.json | 8 +++- src/components/ActiveChart/index.less | 8 ++-- src/components/ArticleListContent/index.less | 16 +++---- src/components/AvatarList/index.less | 4 +- src/components/Charts/ChartCard/index.less | 26 +++++----- src/components/Charts/Field/index.less | 6 +-- src/components/Charts/MiniProgress/index.less | 14 +++--- src/components/Charts/Pie/index.less | 36 +++++++------- src/components/Charts/Radar/index.less | 26 +++++----- src/components/Charts/WaterWave/index.less | 8 ++-- src/components/DescriptionList/index.less | 23 +++++---- src/components/EditableItem/index.less | 4 +- src/components/EditableLinkGroup/index.less | 6 +-- src/components/Ellipsis/index.less | 10 ++-- src/components/Exception/index.less | 22 ++++----- src/components/FooterToolbar/index.less | 14 +++--- src/components/GlobalFooter/index.less | 2 +- src/components/GlobalHeader/index.less | 28 +++++------ src/components/HeaderDropdown/index.less | 2 +- src/components/HeaderSearch/index.less | 8 ++-- src/components/Login/index.less | 10 ++-- src/components/NoticeIcon/NoticeList.less | 30 ++++++------ src/components/NoticeIcon/index.less | 4 +- src/components/NumberInfo/index.less | 24 +++++----- src/components/PageHeader/index.less | 14 +++--- src/components/Result/index.less | 16 +++---- src/components/SelectLang/index.less | 4 +- src/components/SettingDrawer/ThemeColor.less | 14 +++--- src/components/SettingDrawer/index.less | 34 +++++++------- src/components/SiderMenu/index.less | 34 +++++++------- src/components/StandardFormRow/index.less | 18 +++---- src/components/TagSelect/index.js | 2 +- src/components/TagSelect/index.less | 10 ++-- src/components/TopNavHeader/index.less | 22 ++++----- src/components/Trend/index.less | 4 +- src/layouts/Header.less | 2 +- src/layouts/UserLayout.less | 18 +++---- src/pages/Account/Center/Center.less | 20 ++++---- src/pages/Account/Settings/BaseView.less | 8 ++-- .../Account/Settings/GeographicView.less | 4 +- src/pages/Account/Settings/Info.less | 22 ++++----- src/pages/Account/Settings/PhoneView.less | 4 +- src/pages/Dashboard/Analysis.less | 39 +++++++-------- src/pages/Dashboard/Monitor.less | 2 +- src/pages/Dashboard/Workplace.less | 47 ++++++++++--------- src/pages/Forms/StepForm/style.less | 10 ++-- src/pages/Forms/style.less | 18 +++---- src/pages/List/Applications.less | 9 ++-- src/pages/List/BasicList.less | 28 +++++------ src/pages/List/CardList.less | 14 +++--- src/pages/List/Projects.less | 8 ++-- src/pages/List/TableList.less | 8 ++-- src/pages/Profile/AdvancedProfile.less | 10 ++-- src/pages/Profile/BasicProfile.less | 4 +- src/pages/User/Login.less | 6 +-- src/pages/User/Register.less | 2 +- src/utils/utils.less | 34 +++++++------- 58 files changed, 425 insertions(+), 415 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index b533bdd6..215bf081 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,9 +1,13 @@ { - "extends": ["stylelint-config-standard", "stylelint-config-prettier"], + "extends": [ + "stylelint-config-standard", + "stylelint-config-css-modules", + "stylelint-config-rational-order", + "stylelint-config-prettier" + ], + "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"], "rules": { - "declaration-empty-line-before": null, "no-descending-specificity": null, - "selector-pseudo-class-no-unknown": null, - "selector-pseudo-element-colon-notation": null + "plugin/declaration-block-no-ignored-properties": true } } diff --git a/package.json b/package.json index 7b6a2ec0..b75d6910 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "build": "umi build", "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy && npm run docker:push", "analyze": "cross-env ANALYZE=1 umi build", - "lint:style": "stylelint \"src/**/*.less\" --syntax less", + "lint:style": "stylelint 'src/**/*.less' --syntax less", "lint:prettier": "check-prettier lint", "lint": "eslint --ext .js src mock tests && npm run lint:style && npm run lint:prettier", - "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style", + "lint:fix": "eslint --fix --ext .js src mock tests && stylelint --fix 'src/**/*.less' --syntax less", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js", "tslint": "npm run tslint:fix", @@ -90,8 +90,12 @@ "prettier": "1.16.3", "slash2": "^2.0.0", "stylelint": "^9.10.1", + "stylelint-config-css-modules": "^1.3.0", "stylelint-config-prettier": "^4.0.0", + "stylelint-config-rational-order": "^0.0.4", "stylelint-config-standard": "^18.2.0", + "stylelint-declaration-block-no-ignored-properties": "^1.1.0", + "stylelint-order": "^2.0.0", "tslint": "^5.12.1", "tslint-config-prettier": "^1.17.0", "tslint-react": "^3.6.0", diff --git a/src/components/ActiveChart/index.less b/src/components/ActiveChart/index.less index 99079a55..2f5d15f2 100644 --- a/src/components/ActiveChart/index.less +++ b/src/components/ActiveChart/index.less @@ -12,15 +12,15 @@ } .activeChartLegend { position: relative; - font-size: 0; - margin-top: 8px; height: 20px; + margin-top: 8px; + font-size: 0; line-height: 20px; span { display: inline-block; + width: 33.33%; font-size: 12px; text-align: center; - width: 33.33%; } span:first-child { text-align: left; @@ -31,9 +31,9 @@ } .dashedLine { position: relative; - height: 1px; top: -70px; left: -3px; + height: 1px; .line { position: absolute; diff --git a/src/components/ArticleListContent/index.less b/src/components/ArticleListContent/index.less index acf2c919..dd0baa10 100644 --- a/src/components/ArticleListContent/index.less +++ b/src/components/ArticleListContent/index.less @@ -2,25 +2,25 @@ .listContent { .description { - line-height: 22px; max-width: 720px; + line-height: 22px; } .extra { - color: @text-color-secondary; margin-top: 16px; + color: @text-color-secondary; line-height: 22px; & > :global(.ant-avatar) { - vertical-align: top; - margin-right: 8px; - width: 20px; - height: 20px; position: relative; top: 1px; + width: 20px; + height: 20px; + margin-right: 8px; + vertical-align: top; } & > em { + margin-left: 16px; color: @disabled-color; font-style: normal; - margin-left: 16px; } } } @@ -30,8 +30,8 @@ .extra { & > em { display: block; - margin-left: 0; margin-top: 8px; + margin-left: 0; } } } diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less index 31d67056..45904ce6 100644 --- a/src/components/AvatarList/index.less +++ b/src/components/AvatarList/index.less @@ -11,10 +11,10 @@ .avatarItem { display: inline-block; - font-size: @font-size-base; - margin-left: -8px; width: @avatar-size-base; height: @avatar-size-base; + margin-left: -8px; + font-size: @font-size-base; :global { .ant-avatar { border: 1px solid #fff; diff --git a/src/components/Charts/ChartCard/index.less b/src/components/Charts/ChartCard/index.less index 0ddc486b..282f17d9 100644 --- a/src/components/Charts/ChartCard/index.less +++ b/src/components/Charts/ChartCard/index.less @@ -4,8 +4,8 @@ position: relative; .chartTop { position: relative; - overflow: hidden; width: 100%; + overflow: hidden; } .chartTopMargin { margin-bottom: 12px; @@ -26,45 +26,45 @@ } } .meta { + height: 22px; color: @text-color-secondary; font-size: @font-size-base; line-height: 22px; - height: 22px; } .action { - cursor: pointer; position: absolute; top: 4px; right: 0; line-height: 1; + cursor: pointer; } .total { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - white-space: nowrap; - color: @heading-color; + height: 38px; margin-top: 4px; margin-bottom: 0; + overflow: hidden; + color: @heading-color; font-size: 30px; line-height: 38px; - height: 38px; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; } .content { - margin-bottom: 12px; position: relative; width: 100%; + margin-bottom: 12px; } .contentFixed { position: absolute; - left: 0; bottom: 0; + left: 0; width: 100%; } .footer { - border-top: 1px solid @border-color-split; - padding-top: 9px; margin-top: 8px; + padding-top: 9px; + border-top: 1px solid @border-color-split; & > * { position: relative; } diff --git a/src/components/Charts/Field/index.less b/src/components/Charts/Field/index.less index 170ddc1d..4124471c 100644 --- a/src/components/Charts/Field/index.less +++ b/src/components/Charts/Field/index.less @@ -1,17 +1,17 @@ @import '~antd/lib/style/themes/default.less'; .field { - white-space: nowrap; + margin: 0; overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; - margin: 0; .label, .number { font-size: @font-size-base; line-height: 22px; } .number { - color: @heading-color; margin-left: 8px; + color: @heading-color; } } diff --git a/src/components/Charts/MiniProgress/index.less b/src/components/Charts/MiniProgress/index.less index e5f148cb..40ba70be 100644 --- a/src/components/Charts/MiniProgress/index.less +++ b/src/components/Charts/MiniProgress/index.less @@ -1,31 +1,31 @@ @import '~antd/lib/style/themes/default.less'; .miniProgress { - padding: 5px 0; position: relative; width: 100%; + padding: 5px 0; .progressWrap { - background-color: @background-color-base; position: relative; + background-color: @background-color-base; } .progress { - transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; - border-radius: 1px 0 0 1px; - background-color: @primary-color; width: 0; height: 100%; + background-color: @primary-color; + border-radius: 1px 0 0 1px; + transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; } .target { position: absolute; top: 0; bottom: 0; span { - border-radius: 100px; position: absolute; top: 0; left: 0; - height: 4px; width: 2px; + height: 4px; + border-radius: 100px; } span:last-child { top: auto; diff --git a/src/components/Charts/Pie/index.less b/src/components/Charts/Pie/index.less index 7249d093..fc961b41 100644 --- a/src/components/Charts/Pie/index.less +++ b/src/components/Charts/Pie/index.less @@ -10,38 +10,38 @@ } .legend { position: absolute; + top: 50%; right: 0; min-width: 200px; - top: 50%; - transform: translateY(-50%); margin: 0 20px; - list-style: none; padding: 0; + list-style: none; + transform: translateY(-50%); li { - cursor: pointer; - margin-bottom: 16px; height: 22px; + margin-bottom: 16px; line-height: 22px; + cursor: pointer; &:last-child { margin-bottom: 0; } } } .dot { - border-radius: 8px; - display: inline-block; - margin-right: 8px; position: relative; top: -1px; - height: 8px; + display: inline-block; width: 8px; + height: 8px; + margin-right: 8px; + border-radius: 8px; } .line { - background-color: @border-color-split; display: inline-block; - margin-right: 8px; width: 1px; height: 16px; + margin-right: 8px; + background-color: @border-color-split; } .legendTitle { color: @text-color; @@ -58,24 +58,24 @@ } .total { position: absolute; - left: 50%; top: 50%; - text-align: center; + left: 50%; max-height: 62px; + text-align: center; transform: translate(-50%, -50%); & > h4 { - color: @text-color-secondary; - font-size: 14px; - line-height: 22px; height: 22px; margin-bottom: 8px; + color: @text-color-secondary; font-weight: normal; + font-size: 14px; + line-height: 22px; } & > p { - color: @heading-color; display: block; - font-size: 1.2em; height: 32px; + color: @heading-color; + font-size: 1.2em; line-height: 32px; white-space: nowrap; } diff --git a/src/components/Charts/Radar/index.less b/src/components/Charts/Radar/index.less index 15b8725c..437a7129 100644 --- a/src/components/Charts/Radar/index.less +++ b/src/components/Charts/Radar/index.less @@ -5,42 +5,42 @@ margin-top: 16px; .legendItem { position: relative; - text-align: center; - cursor: pointer; color: @text-color-secondary; line-height: 22px; + text-align: center; + cursor: pointer; p { margin: 0; } h6 { - color: @heading-color; + margin-top: 4px; + margin-bottom: 0; padding-left: 16px; + color: @heading-color; font-size: 24px; line-height: 32px; - margin-top: 4px; - margin-bottom: 0; } - &:after { - background-color: @border-color-split; + &::after { position: absolute; top: 8px; right: 0; - height: 40px; width: 1px; + height: 40px; + background-color: @border-color-split; content: ''; } } - > :last-child .legendItem:after { + > :last-child .legendItem::after { display: none; } .dot { - border-radius: 6px; - display: inline-block; - margin-right: 6px; position: relative; top: -1px; - height: 6px; + display: inline-block; width: 6px; + height: 6px; + margin-right: 6px; + border-radius: 6px; } } } diff --git a/src/components/Charts/WaterWave/index.less b/src/components/Charts/WaterWave/index.less index 43ba05ca..2e75f214 100644 --- a/src/components/Charts/WaterWave/index.less +++ b/src/components/Charts/WaterWave/index.less @@ -1,15 +1,15 @@ @import '~antd/lib/style/themes/default.less'; .waterWave { - display: inline-block; position: relative; + display: inline-block; transform-origin: left; .text { position: absolute; - left: 0; top: 32px; - text-align: center; + left: 0; width: 100%; + text-align: center; span { color: @text-color-secondary; font-size: 14px; @@ -17,8 +17,8 @@ } h4 { color: @heading-color; - line-height: 32px; font-size: 24px; + line-height: 32px; } } .waterWaveCanvasWrapper { diff --git a/src/components/DescriptionList/index.less b/src/components/DescriptionList/index.less index bfb33fcc..4048a128 100644 --- a/src/components/DescriptionList/index.less +++ b/src/components/DescriptionList/index.less @@ -10,35 +10,34 @@ } .title { - font-size: 14px; + margin-bottom: 16px; color: @heading-color; font-weight: 500; - margin-bottom: 16px; + font-size: 14px; } .term { - // Line-height is 22px IE dom height will calculate error - line-height: 20px; + display: table-cell; padding-bottom: 16px; - margin-right: 8px; color: @heading-color; + // Line-height is 22px IE dom height will calculate error + line-height: 20px; white-space: nowrap; - display: table-cell; - &:after { - content: ':'; - margin: 0 8px 0 2px; + &::after { position: relative; top: -0.5px; + margin: 0 8px 0 2px; + content: ':'; } } .detail { - line-height: 20px; + display: table-cell; width: 100%; padding-bottom: 16px; color: @text-color; - display: table-cell; + line-height: 20px; } &.small { @@ -66,8 +65,8 @@ &.vertical { .term { - padding-bottom: 8px; display: block; + padding-bottom: 8px; } .detail { diff --git a/src/components/EditableItem/index.less b/src/components/EditableItem/index.less index 457a18bd..7fdf3370 100644 --- a/src/components/EditableItem/index.less +++ b/src/components/EditableItem/index.less @@ -1,10 +1,10 @@ @import '~antd/lib/style/themes/default.less'; .editableItem { - line-height: @input-height-base; display: table; width: 100%; margin-top: (@font-size-base * @line-height-base - @input-height-base) / 2; + line-height: @input-height-base; .wrapper { display: table-row; @@ -18,8 +18,8 @@ } .icon { - cursor: pointer; text-align: right; + cursor: pointer; } } } diff --git a/src/components/EditableLinkGroup/index.less b/src/components/EditableLinkGroup/index.less index a421df6f..ba53315d 100644 --- a/src/components/EditableLinkGroup/index.less +++ b/src/components/EditableLinkGroup/index.less @@ -4,11 +4,11 @@ padding: 20px 0 8px 24px; font-size: 0; & > a { - color: @text-color; display: inline-block; - font-size: @font-size-base; - margin-bottom: 13px; width: 25%; + margin-bottom: 13px; + color: @text-color; + font-size: @font-size-base; &:hover { color: @primary-color; } diff --git a/src/components/Ellipsis/index.less b/src/components/Ellipsis/index.less index 2c4a867c..3c0360c1 100644 --- a/src/components/Ellipsis/index.less +++ b/src/components/Ellipsis/index.less @@ -1,24 +1,24 @@ .ellipsis { - overflow: hidden; display: inline-block; - word-break: break-all; width: 100%; + overflow: hidden; + word-break: break-all; } .lines { position: relative; .shadow { - display: block; position: absolute; + z-index: -999; + display: block; color: transparent; opacity: 0; - z-index: -999; } } .lineClamp { position: relative; + display: -webkit-box; overflow: hidden; text-overflow: ellipsis; - display: -webkit-box; } diff --git a/src/components/Exception/index.less b/src/components/Exception/index.less index b55fe3a9..45a2844b 100644 --- a/src/components/Exception/index.less +++ b/src/components/Exception/index.less @@ -11,24 +11,24 @@ width: 62.5%; padding-right: 152px; zoom: 1; - &:before, - &:after { + &::before, + &::after { content: ' '; display: table; } - &:after { + &::after { clear: both; - visibility: hidden; - font-size: 0; height: 0; + font-size: 0; + visibility: hidden; } } .imgEle { - height: 360px; + float: right; width: 100%; max-width: 430px; - float: right; + height: 360px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; @@ -38,18 +38,18 @@ flex: auto; h1 { + margin-bottom: 24px; color: #434e59; - font-size: 72px; font-weight: 600; + font-size: 72px; line-height: 72px; - margin-bottom: 24px; } .desc { + margin-bottom: 16px; color: @text-color-secondary; font-size: 20px; line-height: 28px; - margin-bottom: 16px; } .actions { @@ -73,8 +73,8 @@ display: block; text-align: center; .imgBlock { - padding-right: 0; margin: 0 auto 24px; + padding-right: 0; } } } diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less index de6606bd..5073cff6 100644 --- a/src/components/FooterToolbar/index.less +++ b/src/components/FooterToolbar/index.less @@ -2,21 +2,21 @@ .toolbar { position: fixed; - width: 100%; - bottom: 0; right: 0; + bottom: 0; + z-index: 9; + width: 100%; height: 56px; + padding: 0 24px; line-height: 56px; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); background: #fff; border-top: 1px solid @border-color-split; - padding: 0 24px; - z-index: 9; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03); - &:after { - content: ''; + &::after { display: block; clear: both; + content: ''; } .left { diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less index 101dcf04..e4b3dfd4 100644 --- a/src/components/GlobalFooter/index.less +++ b/src/components/GlobalFooter/index.less @@ -1,8 +1,8 @@ @import '~antd/lib/style/themes/default.less'; .globalFooter { - padding: 0 16px; margin: 48px 0 24px 0; + padding: 0 16px; text-align: center; .links { diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less index 83a4151e..e66510b9 100644 --- a/src/components/GlobalHeader/index.less +++ b/src/components/GlobalHeader/index.less @@ -3,21 +3,21 @@ @pro-header-hover-bg: rgba(0, 0, 0, 0.025); .header { + position: relative; height: @layout-header-height; padding: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); - position: relative; } .logo { + display: inline-block; height: @layout-header-height; + padding: 0 0 0 24px; + font-size: 20px; line-height: @layout-header-height; vertical-align: top; - display: inline-block; - padding: 0 0 0 24px; cursor: pointer; - font-size: 20px; img { display: inline-block; vertical-align: middle; @@ -34,11 +34,11 @@ } .trigger { - font-size: 20px; height: @layout-header-height; + padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px; + font-size: 20px; cursor: pointer; transition: all 0.3s, padding 0s; - padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px; &:hover { background: @pro-header-hover-bg; } @@ -49,14 +49,14 @@ height: 100%; overflow: hidden; .action { - cursor: pointer; - padding: 0 12px; display: inline-block; - transition: all 0.3s; height: 100%; + padding: 0 12px; + cursor: pointer; + transition: all 0.3s; > i { - vertical-align: middle; color: @text-color; + vertical-align: middle; } &:hover { background: @pro-header-hover-bg; @@ -76,8 +76,8 @@ margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0; margin-right: 8px; color: @primary-color; - background: rgba(255, 255, 255, 0.85); vertical-align: top; + background: rgba(255, 255, 255, 0.85); } } } @@ -111,14 +111,14 @@ padding: 22px 12px; } .logo { - padding-left: 12px; - padding-right: 12px; position: relative; + padding-right: 12px; + padding-left: 12px; } .right { position: absolute; - right: 12px; top: 0; + right: 12px; background: #fff; .account { .avatar { diff --git a/src/components/HeaderDropdown/index.less b/src/components/HeaderDropdown/index.less index 6494de0a..ef0c7591 100644 --- a/src/components/HeaderDropdown/index.less +++ b/src/components/HeaderDropdown/index.less @@ -2,8 +2,8 @@ .container > * { background-color: #fff; - box-shadow: @shadow-1-down; border-radius: 4px; + box-shadow: @shadow-1-down; } @media screen and (max-width: @screen-xs) { diff --git a/src/components/HeaderSearch/index.less b/src/components/HeaderSearch/index.less index e97386d8..88fadecd 100644 --- a/src/components/HeaderSearch/index.less +++ b/src/components/HeaderSearch/index.less @@ -2,21 +2,21 @@ .headerSearch { :global(.anticon-search) { - cursor: pointer; font-size: 16px; + cursor: pointer; } .input { - transition: width 0.3s, margin-left 0.3s; width: 0; background: transparent; border-radius: 0; + transition: width 0.3s, margin-left 0.3s; :global(.ant-select-selection) { background: transparent; } input { - border: 0; - padding-left: 0; padding-right: 0; + padding-left: 0; + border: 0; box-shadow: none !important; } &, diff --git a/src/components/Login/index.less b/src/components/Login/index.less index 646b6631..242e0675 100644 --- a/src/components/Login/index.less +++ b/src/components/Login/index.less @@ -3,9 +3,9 @@ .login { :global { .ant-tabs .ant-tabs-bar { - border-bottom: 0; margin-bottom: 24px; text-align: center; + border-bottom: 0; } .ant-form-item { @@ -19,9 +19,9 @@ } .icon { - font-size: 24px; - color: rgba(0, 0, 0, 0.2); margin-left: 16px; + color: rgba(0, 0, 0, 0.2); + font-size: 24px; vertical-align: middle; cursor: pointer; transition: color 0.3s; @@ -32,9 +32,9 @@ } .other { - text-align: left; margin-top: 24px; line-height: 22px; + text-align: left; .register { float: right; @@ -42,8 +42,8 @@ } .prefixIcon { - font-size: @font-size-base; color: @disabled-color; + font-size: @font-size-base; } .submit { diff --git a/src/components/NoticeIcon/NoticeList.less b/src/components/NoticeIcon/NoticeList.less index 8435414a..fc566ad0 100644 --- a/src/components/NoticeIcon/NoticeList.less +++ b/src/components/NoticeIcon/NoticeList.less @@ -7,19 +7,19 @@ display: none; } .item { - transition: all 0.3s; + padding-right: 24px; + padding-left: 24px; overflow: hidden; cursor: pointer; - padding-left: 24px; - padding-right: 24px; + transition: all 0.3s; .meta { width: 100%; } .avatar { - background: #fff; margin-top: 4px; + background: #fff; } .iconElement { font-size: 32px; @@ -35,58 +35,58 @@ background: @primary-1; } .title { - font-weight: normal; margin-bottom: 8px; + font-weight: normal; } .description { font-size: 12px; line-height: @line-height-base; } .datetime { - font-size: 12px; margin-top: 4px; + font-size: 12px; line-height: @line-height-base; } .extra { float: right; + margin-top: -1.5px; + margin-right: 0; color: @text-color-secondary; font-weight: normal; - margin-right: 0; - margin-top: -1.5px; } } .loadMore { padding: 8px 0; - cursor: pointer; color: @primary-6; text-align: center; + cursor: pointer; &.loadedAll { - cursor: unset; color: rgba(0, 0, 0, 0.25); + cursor: unset; } } } .notFound { - text-align: center; padding: 73px 0 88px 0; color: @text-color-secondary; + text-align: center; img { display: inline-block; - margin-bottom: 16px; height: 76px; + margin-bottom: 16px; } } .clear { height: 46px; + color: @text-color; line-height: 46px; text-align: center; - color: @text-color; - border-radius: 0 0 @border-radius-base @border-radius-base; border-top: 1px solid @border-color-split; - transition: all 0.3s; + border-radius: 0 0 @border-radius-base @border-radius-base; cursor: pointer; + transition: all 0.3s; &:hover { color: @heading-color; diff --git a/src/components/NoticeIcon/index.less b/src/components/NoticeIcon/index.less index 529a8f80..1c0593ee 100644 --- a/src/components/NoticeIcon/index.less +++ b/src/components/NoticeIcon/index.less @@ -1,13 +1,13 @@ @import '~antd/lib/style/themes/default.less'; .popover { - width: 336px; position: relative; + width: 336px; } .noticeButton { - cursor: pointer; display: inline-block; + cursor: pointer; transition: all 0.3s; } .icon { diff --git a/src/components/NumberInfo/index.less b/src/components/NumberInfo/index.less index c8fad650..4a77288c 100644 --- a/src/components/NumberInfo/index.less +++ b/src/components/NumberInfo/index.less @@ -2,51 +2,51 @@ .numberInfo { .suffix { + margin-left: 4px; color: @text-color; font-size: 16px; font-style: normal; - margin-left: 4px; } .numberInfoTitle { + margin-bottom: 16px; color: @text-color; font-size: @font-size-lg; - margin-bottom: 16px; transition: all 0.3s; } .numberInfoSubTitle { + height: 22px; + overflow: hidden; color: @text-color-secondary; font-size: @font-size-base; - height: 22px; line-height: 22px; - overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; word-break: break-all; - white-space: nowrap; } .numberInfoValue { margin-top: 4px; - font-size: 0; overflow: hidden; + font-size: 0; + white-space: nowrap; text-overflow: ellipsis; word-break: break-all; - white-space: nowrap; & > span { - color: @heading-color; display: inline-block; - line-height: 32px; height: 32px; - font-size: 24px; margin-right: 32px; + color: @heading-color; + font-size: 24px; + line-height: 32px; } .subTotal { + margin-right: 0; color: @text-color-secondary; font-size: @font-size-lg; vertical-align: top; - margin-right: 0; i { + margin-left: 4px; font-size: 12px; transform: scale(0.82); - margin-left: 4px; } :global { .anticon-caret-up { diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less index da947d09..81125bbd 100644 --- a/src/components/PageHeader/index.less +++ b/src/components/PageHeader/index.less @@ -1,8 +1,8 @@ @import '~antd/lib/style/themes/default.less'; .pageHeader { - background: @component-background; padding: 16px 32px 0 32px; + background: @component-background; border-bottom: @border-width-base @border-style-base @border-color-split; .wide { max-width: 1200px; @@ -27,8 +27,8 @@ :global { // 1px 可以让选中效果显示完成 .ant-tabs-bar { - border-bottom: none; margin-bottom: 1px; + border-bottom: none; } } } @@ -38,22 +38,22 @@ margin-right: 16px; padding-top: 1px; > img { + display: block; width: 28px; height: 28px; border-radius: @border-radius-base; - display: block; } } .title { - font-size: 20px; - font-weight: 500; color: @heading-color; + font-weight: 500; + font-size: 20px; } .action { - margin-left: 56px; min-width: 266px; + margin-left: 56px; :global { .ant-btn-group:not(:last-child), @@ -99,8 +99,8 @@ } .extraContent { - margin-left: 88px; min-width: 242px; + margin-left: 88px; } } diff --git a/src/components/Result/index.less b/src/components/Result/index.less index 5cd2aff5..00c95879 100644 --- a/src/components/Result/index.less +++ b/src/components/Result/index.less @@ -1,17 +1,17 @@ @import '~antd/lib/style/themes/default.less'; .result { - text-align: center; width: 72%; margin: 0 auto; + text-align: center; @media screen and (max-width: @screen-xs) { width: 100%; } .icon { + margin-bottom: 24px; font-size: 72px; line-height: 72px; - margin-bottom: 24px; & > .success { color: @success-color; @@ -23,25 +23,25 @@ } .title { - font-size: 24px; + margin-bottom: 16px; color: @heading-color; font-weight: 500; + font-size: 24px; line-height: 32px; - margin-bottom: 16px; } .description { + margin-bottom: 24px; + color: @text-color-secondary; font-size: 14px; line-height: 22px; - color: @text-color-secondary; - margin-bottom: 24px; } .extra { - background: #fafafa; padding: 24px 40px; - border-radius: @border-radius-sm; text-align: left; + background: #fafafa; + border-radius: @border-radius-sm; @media screen and (max-width: @screen-xs) { padding: 18px 20px; diff --git a/src/components/SelectLang/index.less b/src/components/SelectLang/index.less index 91d9df07..9f41ade9 100644 --- a/src/components/SelectLang/index.less +++ b/src/components/SelectLang/index.less @@ -10,9 +10,9 @@ } .dropDown { - cursor: pointer; - vertical-align: top; line-height: @layout-header-height; + vertical-align: top; + cursor: pointer; > i { font-size: 16px !important; transform: none !important; diff --git a/src/components/SettingDrawer/ThemeColor.less b/src/components/SettingDrawer/ThemeColor.less index 4983eb9c..52e63bea 100644 --- a/src/components/SettingDrawer/ThemeColor.less +++ b/src/components/SettingDrawer/ThemeColor.less @@ -1,21 +1,21 @@ .themeColor { - overflow: hidden; margin-top: 24px; + overflow: hidden; .title { - font-size: 14px; + margin-bottom: 12px; color: rgba(0, 0, 0, 0.65); + font-size: 14px; line-height: 22px; - margin-bottom: 12px; } .colorBlock { + float: left; width: 20px; height: 20px; - border-radius: 2px; - float: left; - cursor: pointer; margin-right: 8px; - text-align: center; color: #fff; font-weight: bold; + text-align: center; + border-radius: 2px; + cursor: pointer; } } diff --git a/src/components/SettingDrawer/index.less b/src/components/SettingDrawer/index.less index af4109be..4ee941c0 100644 --- a/src/components/SettingDrawer/index.less +++ b/src/components/SettingDrawer/index.less @@ -1,16 +1,16 @@ @import '~antd/lib/style/themes/default.less'; .content { + position: relative; min-height: 100%; background: #fff; - position: relative; } .blockChecbox { display: flex; .item { - margin-right: 16px; position: relative; + margin-right: 16px; // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); border-radius: @border-radius-base; cursor: pointer; @@ -23,52 +23,52 @@ top: 0; right: 0; width: 100%; + height: 100%; padding-top: 15px; padding-left: 24px; - height: 100%; color: @primary-color; - font-size: 14px; font-weight: bold; + font-size: 14px; } } .color_block { + display: inline-block; width: 38px; height: 22px; margin: 4px; - border-radius: 4px; - cursor: pointer; margin-right: 12px; - display: inline-block; vertical-align: middle; + border-radius: 4px; + cursor: pointer; } .title { - font-size: 14px; + margin-bottom: 12px; color: @heading-color; + font-size: 14px; line-height: 22px; - margin-bottom: 12px; } .handle { position: absolute; top: 240px; - background: @primary-color; - width: 48px; - height: 48px; right: 300px; + z-index: 0; display: flex; justify-content: center; align-items: center; - cursor: pointer; - pointer-events: auto; - z-index: 0; - text-align: center; + width: 48px; + height: 48px; font-size: 16px; + text-align: center; + background: @primary-color; border-radius: 4px 0 0 4px; + cursor: pointer; + pointer-events: auto; } .productionHint { - font-size: 12px; margin-top: 16px; + font-size: 12px; } diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less index fc14cd26..88722c87 100644 --- a/src/components/SiderMenu/index.less +++ b/src/components/SiderMenu/index.less @@ -3,42 +3,42 @@ @nav-header-height: @layout-header-height; .logo { - height: @nav-header-height; position: relative; - line-height: @nav-header-height; + height: @nav-header-height; padding-left: (@menu-collapsed-width - 32px) / 2; - transition: all 0.3s; - background: #002140; overflow: hidden; + line-height: @nav-header-height; + background: #002140; + transition: all 0.3s; img { display: inline-block; - vertical-align: middle; height: 32px; + vertical-align: middle; } h1 { - color: white; display: inline-block; - vertical-align: middle; - font-size: 20px; margin: 0 0 0 12px; - font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: white; font-weight: 600; + font-size: 20px; + font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; + vertical-align: middle; } } .sider { - min-height: 100vh; - box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); position: relative; z-index: 10; + min-height: 100vh; + box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); &.fixSiderBar { - box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); position: fixed; top: 0; left: 0; + box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); :global { .ant-menu-root { - overflow-y: auto; height: ~'calc(100vh - @{nav-header-height})'; + overflow-y: auto; } .ant-menu-inline { border-right: 0; @@ -50,8 +50,8 @@ } } &.light { - box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); background-color: white; + box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); .logo { background: white; box-shadow: 1px 1px 0 0 @border-color-split; @@ -66,8 +66,8 @@ } .icon { - vertical-align: baseline; width: 14px; + vertical-align: baseline; } :global { @@ -87,15 +87,15 @@ .sider-menu-item-img + span, & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span { - max-width: 0; display: inline-block; + max-width: 0; opacity: 0; } } .ant-menu-item .sider-menu-item-img + span, .ant-menu-submenu-title .sider-menu-item-img + span { - transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; opacity: 1; + transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; } .ant-drawer-left { .ant-drawer-body { diff --git a/src/components/StandardFormRow/index.less b/src/components/StandardFormRow/index.less index 83ab019f..04272333 100644 --- a/src/components/StandardFormRow/index.less +++ b/src/components/StandardFormRow/index.less @@ -1,17 +1,17 @@ @import '~antd/lib/style/themes/default.less'; .standardFormRow { - border-bottom: 1px dashed @border-color-split; - padding-bottom: 16px; - margin-bottom: 16px; display: flex; + margin-bottom: 16px; + padding-bottom: 16px; + border-bottom: 1px dashed @border-color-split; :global { .ant-form-item { margin-right: 24px; } .ant-form-item-label label { - color: @text-color; margin-right: 0; + color: @text-color; } .ant-form-item-label, .ant-form-item-control { @@ -20,16 +20,16 @@ } } .label { + flex: 0 0 auto; + margin-right: 24px; color: @heading-color; font-size: @font-size-base; - margin-right: 24px; - flex: 0 0 auto; text-align: right; & > span { display: inline-block; height: 32px; line-height: 32px; - &:after { + &::after { content: '：'; } } @@ -45,9 +45,9 @@ } .standardFormRowLast { - border: none; - padding-bottom: 0; margin-bottom: 0; + padding-bottom: 0; + border: none; } .standardFormRowBlock { diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index 34d6ba2d..6d0394dd 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -18,7 +18,7 @@ TagSelectOption.isTagSelectOption = true; class TagSelect extends Component { static propTypes = { actionsText: PropTypes.object, - hideCheckAll: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + hideCheckAll: PropTypes.bool, }; static defaultProps = { diff --git a/src/components/TagSelect/index.less b/src/components/TagSelect/index.less index 834b39a6..93694653 100644 --- a/src/components/TagSelect/index.less +++ b/src/components/TagSelect/index.less @@ -1,23 +1,23 @@ @import '~antd/lib/style/themes/default.less'; .tagSelect { - user-select: none; - margin-left: -8px; position: relative; - overflow: hidden; max-height: 32px; + margin-left: -8px; + overflow: hidden; line-height: 32px; transition: all 0.3s; + user-select: none; :global { .ant-tag { - padding: 0 8px; margin-right: 24px; + padding: 0 8px; font-size: @font-size-base; } } &.expanded { - transition: all 0.3s; max-height: 200px; + transition: all 0.3s; } .trigger { position: absolute; diff --git a/src/components/TopNavHeader/index.less b/src/components/TopNavHeader/index.less index b299fa96..aad3d74e 100644 --- a/src/components/TopNavHeader/index.less +++ b/src/components/TopNavHeader/index.less @@ -1,15 +1,15 @@ @import '~antd/lib/style/themes/default.less'; .head { + position: relative; width: 100%; - transition: background 0.3s, width 0.2s; height: @layout-header-height; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); - position: relative; + transition: background 0.3s, width 0.2s; :global { .ant-menu-submenu.ant-menu-submenu-horizontal { - line-height: @layout-header-height; height: 100%; + line-height: @layout-header-height; .ant-menu-submenu-title { height: 100%; } @@ -28,8 +28,8 @@ padding-left: 0; } .left { - flex: 1; display: flex; + flex: 1; } .right { width: 324px; @@ -38,24 +38,24 @@ } .logo { + position: relative; width: 165px; height: @layout-header-height; - position: relative; + overflow: hidden; line-height: @layout-header-height; transition: all 0.3s; - overflow: hidden; img { display: inline-block; - vertical-align: middle; height: 32px; + vertical-align: middle; } h1 { - color: #fff; display: inline-block; - vertical-align: top; - font-size: 16px; margin: 0 0 0 12px; + color: #fff; font-weight: 400; + font-size: 16px; + vertical-align: top; } } @@ -66,7 +66,7 @@ } .menu { - border: none; height: @layout-header-height; line-height: @layout-header-height; + border: none; } diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less index b14b802c..13618838 100644 --- a/src/components/Trend/index.less +++ b/src/components/Trend/index.less @@ -7,9 +7,9 @@ .up, .down { - margin-left: 4px; position: relative; top: 1px; + margin-left: 4px; i { font-size: 12px; transform: scale(0.83); @@ -19,8 +19,8 @@ color: @red-6; } .down { - color: @green-6; top: -1px; + color: @green-6; } &.trendItemGrey .up, diff --git a/src/layouts/Header.less b/src/layouts/Header.less index 394bfda1..cc2da962 100644 --- a/src/layouts/Header.less +++ b/src/layouts/Header.less @@ -2,7 +2,7 @@ position: fixed; top: 0; right: 0; - width: 100%; z-index: 9; + width: 100%; transition: width 0.2s; } diff --git a/src/layouts/UserLayout.less b/src/layouts/UserLayout.less index 5eb257a4..ba3d3235 100644 --- a/src/layouts/UserLayout.less +++ b/src/layouts/UserLayout.less @@ -9,18 +9,18 @@ } .lang { - text-align: right; width: 100%; height: 40px; line-height: 44px; + text-align: right; :global(.ant-dropdown-trigger) { margin-right: 24px; } } .content { - padding: 32px 0; flex: 1; + padding: 32px 0; } @media (min-width: @screen-md-min) { @@ -50,22 +50,22 @@ .logo { height: 44px; - vertical-align: top; margin-right: 16px; + vertical-align: top; } .title { - font-size: 33px; - color: @heading-color; - font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; - font-weight: 600; position: relative; top: 2px; + color: @heading-color; + font-weight: 600; + font-size: 33px; + font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; } .desc { - font-size: @font-size-base; - color: @text-color-secondary; margin-top: 12px; margin-bottom: 40px; + color: @text-color-secondary; + font-size: @font-size-base; } diff --git a/src/pages/Account/Center/Center.less b/src/pages/Account/Center/Center.less index 37d6a203..f6434faf 100644 --- a/src/pages/Account/Center/Center.less +++ b/src/pages/Account/Center/Center.less @@ -2,8 +2,8 @@ @import '~@/utils/utils.less'; .avatarHolder { - text-align: center; margin-bottom: 24px; + text-align: center; & > img { width: 104px; @@ -12,19 +12,19 @@ } .name { + margin-bottom: 4px; + color: @heading-color; + font-weight: 500; font-size: 20px; line-height: 28px; - font-weight: 500; - color: @heading-color; - margin-bottom: 4px; } } .detail { p { + position: relative; margin-bottom: 8px; padding-left: 26px; - position: relative; &:last-child { margin-bottom: 0; @@ -33,10 +33,10 @@ i { position: absolute; - height: 14px; - width: 14px; - left: 0; top: 4px; + left: 0; + width: 14px; + height: 14px; background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg); &.title { @@ -55,9 +55,9 @@ .tagsTitle, .teamTitle { - font-weight: 500; - color: @heading-color; margin-bottom: 12px; + color: @heading-color; + font-weight: 500; } .tags { diff --git a/src/pages/Account/Settings/BaseView.less b/src/pages/Account/Settings/BaseView.less index a0a2ffde..e1b09e93 100644 --- a/src/pages/Account/Settings/BaseView.less +++ b/src/pages/Account/Settings/BaseView.less @@ -5,18 +5,18 @@ padding-top: 12px; .left { - max-width: 448px; min-width: 224px; + max-width: 448px; } .right { flex: 1; padding-left: 104px; .avatar_title { height: 22px; - font-size: @font-size-base; + margin-bottom: 8px; color: @heading-color; + font-size: @font-size-base; line-height: 22px; - margin-bottom: 8px; } .avatar { width: 144px; @@ -39,11 +39,11 @@ flex-direction: column-reverse; .right { - padding: 20px; display: flex; flex-direction: column; align-items: center; max-width: 448px; + padding: 20px; .avatar_title { display: none; } diff --git a/src/pages/Account/Settings/GeographicView.less b/src/pages/Account/Settings/GeographicView.less index 22e35a29..fdc97500 100644 --- a/src/pages/Account/Settings/GeographicView.less +++ b/src/pages/Account/Settings/GeographicView.less @@ -2,12 +2,12 @@ .row { .item { - max-width: 220px; width: 50%; + max-width: 220px; } .item:first-child { - margin-right: 8px; width: ~'calc(50% - 8px)'; + margin-right: 8px; } } diff --git a/src/pages/Account/Settings/Info.less b/src/pages/Account/Settings/Info.less index b7a59fba..b391ad55 100644 --- a/src/pages/Account/Settings/Info.less +++ b/src/pages/Account/Settings/Info.less @@ -1,13 +1,13 @@ @import '~antd/lib/style/themes/default.less'; .main { + display: flex; width: 100%; height: 100%; - background-color: @body-background; - display: flex; padding-top: 16px; padding-bottom: 16px; overflow: auto; + background-color: @body-background; .leftmenu { width: 224px; border-right: @border-width-base @border-style-base @border-color-split; @@ -22,16 +22,16 @@ } .right { flex: 1; - padding-left: 40px; - padding-right: 40px; padding-top: 8px; + padding-right: 40px; padding-bottom: 8px; + padding-left: 40px; .title { - font-size: 20px; + margin-bottom: 12px; color: @heading-color; - line-height: 28px; font-weight: 500; - margin-bottom: 12px; + font-size: 20px; + line-height: 28px; } } :global { @@ -48,19 +48,19 @@ .ant-list-item-meta { // 账号绑定图标 .taobao { - color: #ff4000; display: block; + color: #ff4000; font-size: 48px; line-height: 48px; border-radius: @border-radius-base; } .dingding { - background-color: #2eabff; + margin: 2px; + padding: 6px; color: #fff; font-size: 32px; line-height: 32px; - padding: 6px; - margin: 2px; + background-color: #2eabff; border-radius: @border-radius-base; } .alipay { diff --git a/src/pages/Account/Settings/PhoneView.less b/src/pages/Account/Settings/PhoneView.less index 5c85970d..ee4328eb 100644 --- a/src/pages/Account/Settings/PhoneView.less +++ b/src/pages/Account/Settings/PhoneView.less @@ -1,11 +1,11 @@ @import '~antd/lib/style/themes/default.less'; .area_code { + width: 30%; max-width: 128px; margin-right: 8px; - width: 30%; } .phone_number { - max-width: 312px; width: ~'calc(70% - 8px)'; + max-width: 312px; } diff --git a/src/pages/Dashboard/Analysis.less b/src/pages/Dashboard/Analysis.less index 70877d66..f71bd34a 100644 --- a/src/pages/Dashboard/Analysis.less +++ b/src/pages/Dashboard/Analysis.less @@ -3,10 +3,10 @@ .iconGroup { i { - transition: color 0.32s; + margin-left: 16px; color: @text-color-secondary; cursor: pointer; - margin-left: 16px; + transition: color 0.32s; &:hover { color: @text-color; } @@ -19,37 +19,38 @@ list-style: none; li { .clearfix(); - margin-top: 16px; + display: flex; align-items: center; + margin-top: 16px; span { color: @text-color; font-size: 14px; line-height: 22px; } .rankingItemNumber { - background-color: @background-color-base; - border-radius: 20px; display: inline-block; - font-size: 12px; - font-weight: 600; - margin-right: 16px; + width: 20px; height: 20px; + margin-top: 1.5px; + margin-right: 16px; + font-weight: 600; + font-size: 12px; line-height: 20px; - width: 20px; text-align: center; - margin-top: 1.5px; + background-color: @background-color-base; + border-radius: 20px; &.active { - background-color: #314659; color: #fff; + background-color: #314659; } } .rankingItemTitle { flex: 1; + margin-right: 8px; + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; - margin-right: 8px; } } } @@ -58,8 +59,8 @@ display: inline-block; margin-right: 24px; a { - color: @text-color; margin-left: 24px; + color: @text-color; &:hover { color: @primary-color; } @@ -117,14 +118,14 @@ border-bottom: none; } .ant-tabs-nav-container-scrolling { - padding-left: 40px; padding-right: 40px; + padding-left: 40px; } - .ant-tabs-tab-prev-icon:before { + .ant-tabs-tab-prev-icon::before { position: relative; left: 6px; } - .ant-tabs-tab-next-icon:before { + .ant-tabs-tab-next-icon::before { position: relative; right: 6px; } @@ -139,16 +140,16 @@ height: calc(100% - 24px); } div[class^='ant-col']:last-child { + position: absolute\9; right: 0\9; height: 100%\9; - position: absolute\9; } :global { .ant-row { + position: relative\9; display: flex; display: block\9; flex-flow: row wrap; - position: relative\9; } } } diff --git a/src/pages/Dashboard/Monitor.less b/src/pages/Dashboard/Monitor.less index ca41f33e..82d72722 100644 --- a/src/pages/Dashboard/Monitor.less +++ b/src/pages/Dashboard/Monitor.less @@ -2,8 +2,8 @@ @import '~@/utils/utils.less'; .mapChart { - padding-top: 24px; height: 452px; + padding-top: 24px; text-align: center; img { display: inline-block; diff --git a/src/pages/Dashboard/Workplace.less b/src/pages/Dashboard/Workplace.less index 03801711..b67e0b64 100644 --- a/src/pages/Dashboard/Workplace.less +++ b/src/pages/Dashboard/Workplace.less @@ -17,65 +17,66 @@ flex: 0 1 72px; margin-bottom: 8px; & > span { - border-radius: 72px; display: block; width: 72px; height: 72px; + border-radius: 72px; } } .content { position: relative; top: 4px; - margin-left: 24px; flex: 1 1 auto; + margin-left: 24px; color: @text-color-secondary; line-height: 22px; .contentTitle { + margin-bottom: 12px; + color: @heading-color; + font-weight: 500; font-size: 20px; line-height: 28px; - font-weight: 500; - color: @heading-color; - margin-bottom: 12px; } } } .extraContent { .clearfix(); + float: right; white-space: nowrap; .statItem { - padding: 0 32px; position: relative; display: inline-block; + padding: 0 32px; > p:first-child { + margin-bottom: 4px; color: @text-color-secondary; font-size: @font-size-base; line-height: 22px; - margin-bottom: 4px; } > p { + margin: 0; color: @heading-color; font-size: 30px; line-height: 38px; - margin: 0; > span { color: @text-color-secondary; font-size: 20px; } } - &:after { - background-color: @border-color-split; + &::after { position: absolute; top: 8px; right: 0; width: 1px; height: 40px; + background-color: @border-color-split; content: ''; } &:last-child { padding-right: 0; - &:after { + &::after { display: none; } } @@ -85,16 +86,16 @@ .members { a { display: block; - margin: 12px 0; height: 24px; + margin: 12px 0; color: @text-color; transition: all 0.3s; .textOverflow(); .member { + margin-left: 12px; font-size: @font-size-base; line-height: 24px; vertical-align: top; - margin-left: 12px; } &:hover { color: @primary-color; @@ -105,22 +106,22 @@ .projectList { :global { .ant-card-meta-description { - color: @text-color-secondary; height: 44px; - line-height: 22px; overflow: hidden; + color: @text-color-secondary; + line-height: 22px; } } .cardTitle { font-size: 0; a { - color: @heading-color; + display: inline-block; + height: 24px; margin-left: 12px; + color: @heading-color; + font-size: @font-size-base; line-height: 24px; - height: 24px; - display: inline-block; vertical-align: top; - font-size: @font-size-base; &:hover { color: @primary-color; } @@ -131,25 +132,25 @@ } .projectItemContent { display: flex; + height: 20px; margin-top: 8px; overflow: hidden; font-size: 12px; - height: 20px; line-height: 20px; .textOverflow(); a { - color: @text-color-secondary; display: inline-block; flex: 1 1 0; + color: @text-color-secondary; .textOverflow(); &:hover { color: @primary-color; } } .datetime { - color: @disabled-color; flex: 0 0 auto; float: right; + color: @disabled-color; } } } @@ -186,7 +187,7 @@ .statItem { padding: 0 16px; text-align: left; - &:after { + &::after { display: none; } } diff --git a/src/pages/Forms/StepForm/style.less b/src/pages/Forms/StepForm/style.less index 713dd54c..452e1b3f 100644 --- a/src/pages/Forms/StepForm/style.less +++ b/src/pages/Forms/StepForm/style.less @@ -1,8 +1,8 @@ @import '~antd/lib/style/themes/default.less'; .stepForm { - margin: 40px auto 0; max-width: 500px; + margin: 40px auto 0; } .stepFormText { @@ -16,8 +16,8 @@ } .result { - margin: 0 auto; max-width: 560px; + margin: 0 auto; padding: 24px 0 8px; } @@ -25,9 +25,9 @@ padding: 0 56px; color: @text-color-secondary; h3 { - font-size: 16px; margin: 0 0 12px 0; color: @text-color-secondary; + font-size: 16px; line-height: 32px; } h4 { @@ -57,9 +57,9 @@ } } .label { + padding-right: 8px; color: @heading-color; text-align: right; - padding-right: 8px; @media screen and (max-width: @screen-sm) { text-align: left; } @@ -67,9 +67,9 @@ } .money { - font-family: 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 20px; + font-family: 'Helvetica Neue', sans-serif; line-height: 14px; } diff --git a/src/pages/Forms/style.less b/src/pages/Forms/style.less index 6b12d3c3..cb23b0b4 100644 --- a/src/pages/Forms/style.less +++ b/src/pages/Forms/style.less @@ -5,9 +5,9 @@ } .heading { + margin: 0 0 16px 0; font-size: 14px; line-height: 22px; - margin: 0 0 16px 0; } .steps:global(.ant-steps) { @@ -16,9 +16,9 @@ } .errorIcon { - cursor: pointer; - color: @error-color; margin-right: 24px; + color: @error-color; + cursor: pointer; i { margin-right: 4px; } @@ -27,18 +27,18 @@ .errorPopover { :global { .ant-popover-inner-content { - padding: 0; + min-width: 256px; max-height: 290px; + padding: 0; overflow: auto; - min-width: 256px; } } } .errorListItem { + padding: 8px 16px; list-style: none; border-bottom: 1px solid @border-color-split; - padding: 8px 16px; cursor: pointer; transition: all 0.3s; &:hover { @@ -48,16 +48,16 @@ border: 0; } .errorIcon { - color: @error-color; float: left; margin-top: 4px; margin-right: 12px; padding-bottom: 22px; + color: @error-color; } .errorField { - font-size: 12px; - color: @text-color-secondary; margin-top: 2px; + color: @text-color-secondary; + font-size: 12px; } } diff --git a/src/pages/List/Applications.less b/src/pages/List/Applications.less index 8f5cb368..b770e127 100644 --- a/src/pages/List/Applications.less +++ b/src/pages/List/Applications.less @@ -20,23 +20,24 @@ } .cardInfo { .clearfix(); + margin-top: 16px; margin-left: 40px; & > div { position: relative; - text-align: left; float: left; width: 50%; + text-align: left; p { - line-height: 32px; - font-size: 24px; margin: 0; + font-size: 24px; + line-height: 32px; } p:first-child { + margin-bottom: 4px; color: @text-color-secondary; font-size: 12px; line-height: 20px; - margin-bottom: 4px; } } } diff --git a/src/pages/List/BasicList.less b/src/pages/List/BasicList.less index f086c501..fd226b0f 100644 --- a/src/pages/List/BasicList.less +++ b/src/pages/List/BasicList.less @@ -7,15 +7,15 @@ border-bottom: none; } .ant-card-head-title { - line-height: 32px; padding: 24px 0; + line-height: 32px; } .ant-card-extra { padding: 24px 0; } .ant-list-pagination { - text-align: right; margin-top: 24px; + text-align: right; } .ant-avatar-lg { width: 48px; @@ -27,35 +27,35 @@ position: relative; text-align: center; & > span { - color: @text-color-secondary; display: inline-block; + margin-bottom: 4px; + color: @text-color-secondary; font-size: @font-size-base; line-height: 22px; - margin-bottom: 4px; } & > p { + margin: 0; color: @heading-color; font-size: 24px; line-height: 32px; - margin: 0; } & > em { - background-color: @border-color-split; position: absolute; - height: 56px; - width: 1px; top: 0; right: 0; + width: 1px; + height: 56px; + background-color: @border-color-split; } } .listContent { font-size: 0; .listContentItem { - color: @text-color-secondary; display: inline-block; - vertical-align: middle; - font-size: @font-size-base; margin-left: 40px; + color: @text-color-secondary; + font-size: @font-size-base; + vertical-align: middle; > span { line-height: 20px; } @@ -67,8 +67,8 @@ } } .extraContentSearch { - margin-left: 16px; width: 272px; + margin-left: 16px; } } @@ -103,8 +103,8 @@ @media screen and (max-width: @screen-sm) { .standardList { .extraContentSearch { - margin-left: 0; width: 100%; + margin-left: 0; } .headerInfo { margin-bottom: 16px; @@ -180,8 +180,8 @@ .ant-form-item { margin-bottom: 12px; &:last-child { - padding-top: 4px; margin-bottom: 32px; + padding-top: 4px; } } } diff --git a/src/pages/List/CardList.less b/src/pages/List/CardList.less index 3d6feacc..02f806cb 100644 --- a/src/pages/List/CardList.less +++ b/src/pages/List/CardList.less @@ -9,9 +9,9 @@ .ant-card-meta-title { margin-bottom: 12px; & > a { - color: @heading-color; display: inline-block; max-width: 100%; + color: @heading-color; } } .ant-card-actions { @@ -36,21 +36,21 @@ } .extraImg { + width: 195px; margin-top: -60px; text-align: center; - width: 195px; img { width: 100%; } } .newButton { + width: 100%; + height: 188px; + color: @text-color-secondary; background-color: #fff; border-color: @border-color-base; border-radius: @border-radius-sm; - color: @text-color-secondary; - width: 100%; - height: 188px; } .cardAvatar { @@ -76,8 +76,8 @@ } } img { - vertical-align: middle; margin-right: 8px; + vertical-align: middle; } } @@ -100,8 +100,8 @@ } .contentLink { position: absolute; - left: 0; bottom: -4px; + left: 0; width: 1000px; a { margin-right: 16px; diff --git a/src/pages/List/Projects.less b/src/pages/List/Projects.less index 43b8d726..8469fc82 100644 --- a/src/pages/List/Projects.less +++ b/src/pages/List/Projects.less @@ -9,15 +9,15 @@ .ant-card-meta-title { margin-bottom: 4px; & > a { - color: @heading-color; display: inline-block; max-width: 100%; + color: @heading-color; } } .ant-card-meta-description { height: 44px; - line-height: 22px; overflow: hidden; + line-height: 22px; } } @@ -32,13 +32,13 @@ .cardItemContent { display: flex; + height: 20px; margin-top: 16px; margin-bottom: -4px; line-height: 20px; - height: 20px; & > span { - color: @text-color-secondary; flex: 1; + color: @text-color-secondary; font-size: 12px; } .avatarList { diff --git a/src/pages/List/TableList.less b/src/pages/List/TableList.less index 792757df..bc5601c1 100644 --- a/src/pages/List/TableList.less +++ b/src/pages/List/TableList.less @@ -13,13 +13,13 @@ .tableListForm { :global { .ant-form-item { - margin-bottom: 24px; - margin-right: 0; display: flex; + margin-right: 0; + margin-bottom: 24px; > .ant-form-item-label { width: auto; - line-height: 32px; padding-right: 8px; + line-height: 32px; } .ant-form-item-control { line-height: 32px; @@ -31,8 +31,8 @@ } .submitButtons { display: block; - white-space: nowrap; margin-bottom: 24px; + white-space: nowrap; } } diff --git a/src/pages/Profile/AdvancedProfile.less b/src/pages/Profile/AdvancedProfile.less index 3897f11c..4ee7621d 100644 --- a/src/pages/Profile/AdvancedProfile.less +++ b/src/pages/Profile/AdvancedProfile.less @@ -14,14 +14,14 @@ .noData { color: @disabled-color; - text-align: center; - line-height: 64px; font-size: 16px; + line-height: 64px; + text-align: center; i { - font-size: 24px; - margin-right: 16px; position: relative; top: 3px; + margin-right: 16px; + font-size: 24px; } } @@ -31,10 +31,10 @@ } .stepDescription { - font-size: 14px; position: relative; left: 38px; padding-top: 8px; + font-size: 14px; text-align: left; > div { diff --git a/src/pages/Profile/BasicProfile.less b/src/pages/Profile/BasicProfile.less index c830b050..5c3f94f5 100644 --- a/src/pages/Profile/BasicProfile.less +++ b/src/pages/Profile/BasicProfile.less @@ -1,8 +1,8 @@ @import '~antd/lib/style/themes/default.less'; .title { + margin-bottom: 16px; color: @heading-color; - font-size: 16px; font-weight: 500; - margin-bottom: 16px; + font-size: 16px; } diff --git a/src/pages/User/Login.less b/src/pages/User/Login.less index 14a99ff1..8eba81cf 100644 --- a/src/pages/User/Login.less +++ b/src/pages/User/Login.less @@ -8,9 +8,9 @@ } .icon { - font-size: 24px; - color: rgba(0, 0, 0, 0.2); margin-left: 16px; + color: rgba(0, 0, 0, 0.2); + font-size: 24px; vertical-align: middle; cursor: pointer; transition: color 0.3s; @@ -21,9 +21,9 @@ } .other { - text-align: left; margin-top: 24px; line-height: 22px; + text-align: left; .register { float: right; diff --git a/src/pages/User/Register.less b/src/pages/User/Register.less index acd1211a..c6d5b77c 100644 --- a/src/pages/User/Register.less +++ b/src/pages/User/Register.less @@ -11,8 +11,8 @@ } h3 { - font-size: 16px; margin-bottom: 20px; + font-size: 16px; } .getCaptcha { diff --git a/src/utils/utils.less b/src/utils/utils.less index 72579225..7be54ba5 100644 --- a/src/utils/utils.less +++ b/src/utils/utils.less @@ -1,34 +1,34 @@ .textOverflow() { overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; word-break: break-all; - white-space: nowrap; } .textOverflowMulti(@line: 3, @bg: #fff) { - overflow: hidden; position: relative; - line-height: 1.5em; max-height: @line * 1.5em; - text-align: justify; margin-right: -1em; padding-right: 1em; - &:before { - background: @bg; - content: '...'; - padding: 0 1px; + overflow: hidden; + line-height: 1.5em; + text-align: justify; + &::before { position: absolute; right: 14px; bottom: 0; + padding: 0 1px; + background: @bg; + content: '...'; } - &:after { - background: white; - content: ''; - margin-top: 0.2em; + &::after { position: absolute; right: 14px; width: 1em; height: 1em; + margin-top: 0.2em; + background: white; + content: ''; } } @@ -36,15 +36,15 @@ // ------------------------ .clearfix() { zoom: 1; - &:before, - &:after { + &::before, + &::after { content: ' '; display: table; } - &:after { + &::after { clear: both; - visibility: hidden; - font-size: 0; height: 0; + font-size: 0; + visibility: hidden; } } -- GitLab