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 51cb9d055f.

* Revert "support sorted CSS properties order for readability and consistency"

This reverts commit ff6c24d263.

* make lint:fix work for stylelint

* Revert "Revert "autofix order of all styles by lint:fix script""

This reverts commit 946ed0a351.

* Revert "Revert "support sorted CSS properties order for readability and consistency""

This reverts commit 31b557e382.

.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,
+    "plugin/declaration-block-no-ignored-properties": true
-    "selector-pseudo-element-colon-notation": null
   }
 }

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",

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;

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;
       }
     }
   }

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;

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;
+    height: 38px;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: @heading-color;
     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;
     }

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;
   }
 }

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;

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;
     }

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 {
+      &::after {
-        background-color: @border-color-split;
         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;
     }
   }
 }

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 {

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
+    display: table-cell;
-    line-height: 20px;
     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 {
+    &::after {
-      content: ':';
-      margin: 0 8px 0 2px;
       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 {

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;
     }
   }
 }

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;
     }

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;
 }

src/components/Exception/index.less

@@ -11,24 +11,24 @@
     width: 62.5%;
     padding-right: 152px;
     zoom: 1;
-    &:before,
+    &::before,
-    &:after {
+    &::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;
     }
   }
 }

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;
+  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
-  z-index: 9;
 
-  &:after {
+  &::after {
-    content: '';
     display: block;
     clear: both;
+    content: '';
   }
 
   .left {

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 {

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 {

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) {

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;
     }
     &,

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 {

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;
+    transition: all 0.3s;
-    padding-right: 24px;
 
     .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;

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 {

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 {

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;
   }
 }
 

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;

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;

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;
   }
 }

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;
+  width: 48px;
-  pointer-events: auto;
+  height: 48px;
-  z-index: 0;
-  text-align: center;
   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;
 }

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 {

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 {

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 = {

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;

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;
 }

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,

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;
 }

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;
 }

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 {

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;
       }

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;
   }
 }
 

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;
+      background-color: #2eabff;
-      margin: 2px;
       border-radius: @border-radius-base;
     }
     .alipay {

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;
 }

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;
+      width: 20px;
-      font-weight: 600;
-      margin-right: 16px;
       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;
     }
   }
 }

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;

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 {
+    &::after {
-      background-color: @border-color-split;
       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;
       }
     }

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;
 }
 

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;
   }
 }
 

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;
       }
     }
   }

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;
       }
     }
   }

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;

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 {

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;
   }
 }
 

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 {

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;
 }

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;

src/pages/User/Register.less

@@ -11,8 +11,8 @@
   }
 
   h3 {
-    font-size: 16px;
     margin-bottom: 20px;
+    font-size: 16px;
   }
 
   .getCaptcha {

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 {
+  overflow: hidden;
-    background: @bg;
+  line-height: 1.5em;
-    content: '...';
+  text-align: justify;
-    padding: 0 1px;
+  &::before {
     position: absolute;
     right: 14px;
     bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
   }
-  &:after {
+  &::after {
-    background: white;
-    content: '';
-    margin-top: 0.2em;
     position: absolute;
     right: 14px;
     width: 1em;
     height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
   }
 }
 
@@ -36,15 +36,15 @@
 // ------------------------
 .clearfix() {
   zoom: 1;
-  &:before,
+  &::before,
-  &:after {
+  &::after {
     content: ' ';
     display: table;
   }
-  &:after {
+  &::after {
     clear: both;
-    visibility: hidden;
-    font-size: 0;
     height: 0;
+    font-size: 0;
+    visibility: hidden;
   }
 }