diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 000000000..40ce56859 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,16 @@ +{ + "extends": [ + "stylelint-config-standard", + "stylelint-config-rational-order", + "stylelint-config-prettier" + ], + "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"], + "rules": { + "comment-empty-line-before": null, + "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }], + "no-invalid-double-slash-comments": null, + "no-descending-specificity": null, + "declaration-empty-line-before": null + }, + "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"] +} diff --git a/antdv-demo b/antdv-demo index 8269bbdf1..ea0def709 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 8269bbdf109ab684626cd8ef0c4fc5f0c2222210 +Subproject commit ea0def709e64f3d312ec46b2d5369542e2224628 diff --git a/components/alert/style/index.less b/components/alert/style/index.less index 2aca73086..26bc9ca04 100644 --- a/components/alert/style/index.less +++ b/components/alert/style/index.less @@ -9,7 +9,7 @@ @alert-close-hover-color: @icon-color-hover; .@{alert-prefix-cls} { - .reset-component; + .reset-component(); position: relative; padding: 8px 15px 8px 37px; @@ -26,7 +26,7 @@ &-icon { position: absolute; - top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; + top: 8px + (@font-size-base * @line-height-base / 2) - (@font-size-base / 2); left: 16px; } diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less index bb75ac9ce..85d953f66 100644 --- a/components/anchor/style/index.less +++ b/components/anchor/style/index.less @@ -4,7 +4,7 @@ @anchor-border-width: 2px; .@{ant-prefix}-anchor { - .reset-component; + .reset-component(); position: relative; padding-left: @anchor-border-width; diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less index 043091876..571e79691 100644 --- a/components/auto-complete/style/index.less +++ b/components/auto-complete/style/index.less @@ -7,7 +7,7 @@ @autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete'; .@{autocomplete-prefix-cls} { - .reset-component; + .reset-component(); // https://github.com/ant-design/ant-design/issues/22302 .@{select-prefix-cls}-clear { diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less index e30510545..0596972c1 100644 --- a/components/avatar/style/index.less +++ b/components/avatar/style/index.less @@ -4,7 +4,7 @@ @avatar-prefix-cls: ~'@{ant-prefix}-avatar'; .@{avatar-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less index 7318a7497..0aa817fae 100644 --- a/components/back-top/style/index.less +++ b/components/back-top/style/index.less @@ -4,7 +4,7 @@ @backtop-prefix-cls: ~'@{ant-prefix}-back-top'; .@{backtop-prefix-cls} { - .reset-component; + .reset-component(); position: fixed; right: 100px; diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 1e33c6083..8a011e31b 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -5,7 +5,7 @@ @number-prefix-cls: ~'@{ant-prefix}-scroll-number'; .@{badge-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; @@ -23,7 +23,7 @@ white-space: nowrap; text-align: center; background: @highlight-color; - border-radius: @badge-height / 2; + border-radius: (@badge-height / 2); box-shadow: 0 0 0 1px @shadow-color-inverse; a, a:hover { diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 2edaf549c..1777e3de0 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -4,7 +4,7 @@ @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb'; .@{breadcrumb-prefix-cls} { - .reset-component; + .reset-component(); color: @breadcrumb-base-color; font-size: @breadcrumb-font-size; diff --git a/components/button/style/index.less b/components/button/style/index.less index 34d0e8f6d..28237ee43 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -21,8 +21,8 @@ // It is a render problem of chrome, which is only happened in the codesandbox demo // 0.001px solution works and I don't why line-height: @line-height-base; - .btn; - .btn-default; + .btn(); + .btn-default(); // Make sure that the target of Button's click event always be `button` // Ref: https://github.com/ant-design/ant-design/issues/7034 @@ -34,7 +34,7 @@ } &-primary { - .btn-primary; + .btn-primary(); .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) { border-right-color: @btn-group-border; @@ -64,19 +64,19 @@ } &-ghost { - .btn-ghost; + .btn-ghost(); } &-dashed { - .btn-dashed; + .btn-dashed(); } &-danger { - .btn-danger; + .btn-danger(); } &-link { - .btn-link; + .btn-link(); } &-icon-only { diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 1ab82acb8..e3b0b6df8 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -238,15 +238,15 @@ } // round button .btn-round(@btnClassName: btn) { - .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base; @btn-circle-size); + .button-size(@btn-circle-size; 0 (@btn-circle-size / 2) ; @font-size-base; @btn-circle-size); &.@{btnClassName}-lg { .button-size( - @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg; @btn-circle-size-lg + @btn-circle-size-lg; 0 (@btn-circle-size-lg / 2) ; @btn-font-size-lg; @btn-circle-size-lg ); } &.@{btnClassName}-sm { .button-size( - @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm + @btn-circle-size-sm; 0 (@btn-circle-size-sm / 2) ; @font-size-base; @btn-circle-size-sm ); } } diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less index 3190cfd45..ad73b5e43 100644 --- a/components/calendar/style/index.less +++ b/components/calendar/style/index.less @@ -4,7 +4,7 @@ @full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar'; .@{full-calendar-prefix-cls} { - .reset-component; + .reset-component(); border-top: @border-width-base @border-style-base @border-color-base; outline: none; diff --git a/components/card/style/index.less b/components/card/style/index.less index 4258e846e..c32343a3e 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -10,7 +10,7 @@ @gradient-max: fade(@card-skeleton-bg, 40%); .@{card-prefix-cls} { - .reset-component; + .reset-component(); position: relative; background: @card-background; @@ -39,7 +39,7 @@ background: @card-head-background; border-bottom: @border-width-base @border-style-base @border-color-split; border-radius: @card-radius @card-radius 0 0; - .clearfix; + .clearfix(); &-wrapper { display: flex; @@ -80,7 +80,7 @@ &-body { padding: @card-padding-base; - .clearfix; + .clearfix(); } &-contain-grid:not(&-loading) &-body { @@ -132,7 +132,7 @@ list-style: none; background: @card-actions-background; border-top: @border-width-base @border-style-base @border-color-split; - .clearfix; + .clearfix(); & > li { float: left; @@ -198,7 +198,7 @@ &-meta { margin: -4px 0; - .clearfix; + .clearfix(); &-avatar { float: left; diff --git a/components/card/style/size.less b/components/card/style/size.less index 6282910af..4eb4c3387 100644 --- a/components/card/style/size.less +++ b/components/card/style/size.less @@ -1,6 +1,6 @@ @card-head-height-sm: 36px; -@card-padding-base-sm: @card-padding-base / 2; -@card-head-padding-sm: @card-head-padding / 2; +@card-padding-base-sm: (@card-padding-base / 2); +@card-head-padding-sm: (@card-head-padding / 2); @card-head-font-size-sm: @font-size-base; .@{card-prefix-cls}-small { diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less index 7c70287b0..8d2c99452 100644 --- a/components/carousel/style/index.less +++ b/components/carousel/style/index.less @@ -2,7 +2,7 @@ @import '../../style/mixins/index'; .@{ant-prefix}-carousel { - .reset-component; + .reset-component(); .slick-slider { position: relative; diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less index 8afb6b01b..95eddf8dc 100644 --- a/components/cascader/style/index.less +++ b/components/cascader/style/index.less @@ -5,7 +5,7 @@ @cascader-prefix-cls: ~'@{ant-prefix}-cascader'; .@{cascader-prefix-cls} { - .reset-component; + .reset-component(); &-input.@{ant-prefix}-input { // Keep it static for https://github.com/ant-design/ant-design/issues/16738 @@ -24,7 +24,7 @@ } &-picker { - .reset-component; + .reset-component(); position: relative; display: inline-block; @@ -48,7 +48,7 @@ } &:focus .@{cascader-prefix-cls}-input { - .active; + .active(); } &-show-search&-focused { @@ -114,7 +114,7 @@ // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810 &-picker-label:hover + &-input { - .hover; + .hover(); } &-picker-small &-picker-clear, diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less index ff070543e..8d48082a7 100644 --- a/components/checkbox/style/mixin.less +++ b/components/checkbox/style/mixin.less @@ -4,7 +4,7 @@ @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner'; // 一般状态 .@{checkbox-prefix-cls} { - .reset-component; + .reset-component(); position: relative; top: -0.09em; @@ -146,7 +146,7 @@ } .@{checkbox-prefix-cls}-wrapper { - .reset-component; + .reset-component(); display: inline-block; line-height: unset; @@ -165,7 +165,7 @@ } .@{checkbox-prefix-cls}-group { - .reset-component; + .reset-component(); display: inline-block; &-item { diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 217f71bec..e9b5f2aec 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -4,7 +4,7 @@ @collapse-prefix-cls: ~'@{ant-prefix}-collapse'; .@{collapse-prefix-cls} { - .reset-component; + .reset-component(); background-color: @collapse-header-bg; border: @border-width-base @border-style-base @border-color-base; diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less index 681dd6d97..42ab89c5b 100644 --- a/components/color-picker/style/index.less +++ b/components/color-picker/style/index.less @@ -75,7 +75,7 @@ height: @input-height-base; cursor: inherit; &:hover { - .hover; + .hover(); } } &-icon { @@ -83,7 +83,7 @@ position: absolute; top: 50%; right: @control-padding-horizontal - 4px; - margin-top: -@font-size-sm / 2; + margin-top: (-@font-size-sm / 2); color: @disabled-color; font-size: @font-size-sm; line-height: 1; @@ -99,7 +99,7 @@ height: @input-height-lg; } .@{color-picker-prefix-cls}-icon { - top: @input-height-lg / 2; + top: (@input-height-lg / 2); } } @@ -114,7 +114,7 @@ } .@{color-picker-prefix-cls}-icon { right: @control-padding-horizontal - 2px; - top: @input-height-sm / 2; + top: (@input-height-sm / 2); font-size: 10px; } } diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less index 8af9dc6a3..04e114978 100644 --- a/components/date-picker/style/Calendar.less +++ b/components/date-picker/style/Calendar.less @@ -28,7 +28,7 @@ } .calendarLeftDoubleArrow() { - .calendarLeftArrow; + .calendarLeftArrow(); &::after { position: relative; @@ -38,7 +38,7 @@ } .calendarRightArrow() { - .calendarLeftArrow; + .calendarLeftArrow(); &::before, &::after { @@ -47,7 +47,7 @@ } .calendarRightDoubleArrow() { - .calendarRightArrow; + .calendarRightArrow(); &::before { position: relative; @@ -110,24 +110,24 @@ .@{calendar-prefix-cls}-prev-decade-btn, .@{calendar-prefix-cls}-prev-year-btn { left: 7px; - .calendarLeftDoubleArrow; + .calendarLeftDoubleArrow(); } .@{calendar-prefix-cls}-next-century-btn, .@{calendar-prefix-cls}-next-decade-btn, .@{calendar-prefix-cls}-next-year-btn { right: 7px; - .calendarRightDoubleArrow; + .calendarRightDoubleArrow(); } .@{calendar-prefix-cls}-prev-month-btn { left: 29px; - .calendarLeftArrow; + .calendarLeftArrow(); } .@{calendar-prefix-cls}-next-month-btn { right: 29px; - .calendarRightArrow; + .calendarRightArrow(); } } @@ -171,7 +171,7 @@ border: 0; outline: 0; cursor: auto; - .placeholder; + .placeholder(); } &-week-number { @@ -391,8 +391,8 @@ } .@{calendar-prefix-cls}-ok-btn { - .btn; - .btn-primary; + .btn(); + .btn-primary(); .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base); line-height: @btn-height-sm - 2px; diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less index 29dce9bbc..0a7b6f4dc 100644 --- a/components/date-picker/style/Picker.less +++ b/components/date-picker/style/Picker.less @@ -1,7 +1,7 @@ @import '../../button/style/mixin'; .@{calendar-prefix-cls}-picker-container { - .reset-component; + .reset-component(); position: absolute; z-index: @zindex-picker; @@ -33,7 +33,7 @@ } .@{calendar-prefix-cls}-picker { - .reset-component; + .reset-component(); position: relative; display: inline-block; diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less index 29d199e34..4e1d30d9f 100644 --- a/components/date-picker/style/RangePicker.less +++ b/components/date-picker/style/RangePicker.less @@ -100,7 +100,7 @@ .@{calendar-prefix-cls}-selected-start-date, .@{calendar-prefix-cls}-selected-end-date { - .calendar-selected-cell; + .calendar-selected-cell(); } &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap { @@ -114,7 +114,7 @@ .@{calendar-prefix-cls}-input, .@{calendar-timepicker-prefix-cls}-input { - .input; + .input(); height: @input-height-sm; padding-right: 0; padding-left: 0; diff --git a/components/divider/style/index.less b/components/divider/style/index.less index 0e495955b..def841f5d 100644 --- a/components/divider/style/index.less +++ b/components/divider/style/index.less @@ -4,7 +4,7 @@ @divider-prefix-cls: ~'@{ant-prefix}-divider'; .@{divider-prefix-cls} { - .reset-component; + .reset-component(); background: @border-color-split; diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less index f5fbe7274..0caf3e9cd 100644 --- a/components/dropdown/style/index.less +++ b/components/dropdown/style/index.less @@ -4,7 +4,7 @@ @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; .@{dropdown-prefix-cls} { - .reset-component; + .reset-component(); position: absolute; top: -9999px; diff --git a/components/form/style/index.less b/components/form/style/index.less index a61013c74..abeb456dc 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -9,7 +9,7 @@ @form-component-height: @input-height-base; @form-component-max-height: @input-height-lg; @form-feedback-icon-size: @font-size-base; -@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px; +@form-help-margin-top: ((@form-component-height - @form-component-max-height) / 2) + 2px; @form-explain-font-size: @font-size-base; // Extends additional 1px to fix precision issue. // https://github.com/ant-design/ant-design/issues/12803 @@ -18,8 +18,8 @@ @form-explain-height: floor(@form-explain-font-size * @line-height-base); .@{form-prefix-cls} { - .reset-component; - .reset-form; + .reset-component(); + .reset-form(); } .@{form-prefix-cls}-item-required::before { @@ -68,7 +68,7 @@ } } - .reset-component; + .reset-component(); margin-bottom: @form-item-margin-bottom; vertical-align: top; @@ -76,7 +76,7 @@ &-control { position: relative; line-height: @form-component-max-height; - .clearfix; + .clearfix(); } &-children { diff --git a/components/image/style/index.less b/components/image/style/index.less index 0cc1a13c9..c64d9a486 100644 --- a/components/image/style/index.less +++ b/components/image/style/index.less @@ -20,17 +20,17 @@ } &-placeholder { - .box; + .box(); } &-preview { - .modal-mask; + .modal-mask(); height: 100%; text-align: center; &-body { - .box; + .box(); overflow: hidden; } @@ -44,7 +44,7 @@ user-select: none; pointer-events: auto; &-wrapper { - .box; + .box(); transition: transform 0.3s @ease-out 0s; &::before { display: inline-block; @@ -70,7 +70,7 @@ } &-operations { - .reset-component; + .reset-component(); position: absolute; top: 0; right: 0; diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less index e071f852e..9606421f9 100644 --- a/components/input-number/style/index.less +++ b/components/input-number/style/index.less @@ -5,8 +5,8 @@ @input-number-prefix-cls: ~'@{ant-prefix}-input-number'; .@{input-number-prefix-cls} { - .reset-component; - .input; + .reset-component(); + .input(); display: inline-block; width: 90px; diff --git a/components/input/style/index.less b/components/input/style/index.less index fb8c61932..0cf0ed202 100644 --- a/components/input/style/index.less +++ b/components/input/style/index.less @@ -5,13 +5,13 @@ // Input styles .@{ant-prefix}-input { - .reset-component; - .input; + .reset-component(); + .input(); } //== Style for input-group: input with label, with button or dropdown... .@{ant-prefix}-input-group { - .reset-component; + .reset-component(); .input-group(~'@{ant-prefix}-input'); &-wrapper { display: inline-block; @@ -23,7 +23,7 @@ // Input with affix: prefix or suffix .@{ant-prefix}-input-affix-wrapper { - .reset-component; + .reset-component(); .input-affix-wrapper(~'@{ant-prefix}-input'); } @@ -38,7 +38,7 @@ } .@{ant-prefix}-input-clear-icon { - .clear-icon; + .clear-icon(); vertical-align: 0; } @@ -51,7 +51,7 @@ } .@{ant-prefix}-input-textarea-clear-icon { - .clear-icon; + .clear-icon(); position: absolute; top: 0; right: 0; diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 90d02ace1..8f4dc9b23 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -264,7 +264,7 @@ &&-compact { display: block; - .clearfix; + .clearfix(); &-addon, &-wrap, diff --git a/components/layout/style/index.less b/components/layout/style/index.less index b7a9082dd..131716f58 100644 --- a/components/layout/style/index.less +++ b/components/layout/style/index.less @@ -100,7 +100,7 @@ width: @layout-zero-trigger-width; height: @layout-zero-trigger-height; color: @layout-trigger-color; - font-size: @layout-zero-trigger-width / 2; + font-size: (@layout-zero-trigger-width / 2); line-height: @layout-zero-trigger-height; text-align: center; background: @layout-sider-background; diff --git a/components/list/style/index.less b/components/list/style/index.less index 9faea4a73..5c0c5b2bc 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -4,7 +4,7 @@ @list-prefix-cls: ~'@{ant-prefix}-list'; .@{list-prefix-cls} { - .reset-component; + .reset-component(); position: relative; diff --git a/components/mentions/style/index.less b/components/mentions/style/index.less index 143a0673f..2e94912eb 100644 --- a/components/mentions/style/index.less +++ b/components/mentions/style/index.less @@ -5,8 +5,8 @@ @mention-prefix-cls: ~'@{ant-prefix}-mentions'; .@{mention-prefix-cls} { - .reset-component; - .input; + .reset-component(); + .input(); position: relative; display: inline-block; @@ -86,7 +86,7 @@ // ================== Dropdown ================== &-dropdown { // Ref select dropdown style - .reset-component; + .reset-component(); position: absolute; top: -9999px; diff --git a/components/menu/style/index.less b/components/menu/style/index.less index 90c9cbda8..53ac60599 100644 --- a/components/menu/style/index.less +++ b/components/menu/style/index.less @@ -5,7 +5,7 @@ // default theme .@{menu-prefix-cls} { - .reset-component; + .reset-component(); margin-bottom: 0; padding-left: 0; // Override default ul/ol @@ -16,7 +16,7 @@ outline: none; box-shadow: @box-shadow-base; transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s; - .clearfix; + .clearfix(); ul, ol { @@ -419,7 +419,7 @@ > .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { left: 0; - padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2 !important; + padding: 0 ((@menu-collapsed-width - @menu-icon-size-lg) / 2) !important; text-overflow: clip; .@{menu-prefix-cls}-submenu-arrow { display: none; diff --git a/components/message/style/index.less b/components/message/style/index.less index 6f8ea2108..8460ed2a6 100644 --- a/components/message/style/index.less +++ b/components/message/style/index.less @@ -4,7 +4,7 @@ @message-prefix-cls: ~'@{ant-prefix}-message'; .@{message-prefix-cls} { - .reset-component; + .reset-component(); position: fixed; top: 16px; diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less index c6d93823e..0c0c5193c 100644 --- a/components/modal/style/modal.less +++ b/components/modal/style/modal.less @@ -4,7 +4,7 @@ @modal-footer-padding-horizontal: 16px; .@{dialog-prefix-cls} { - .reset-component; + .reset-component(); position: relative; top: 100px; diff --git a/components/notification/style/index.less b/components/notification/style/index.less index e5e512594..e7743e0e4 100644 --- a/components/notification/style/index.less +++ b/components/notification/style/index.less @@ -9,7 +9,7 @@ @notification-margin-bottom: 16px; .@{notification-prefix-cls} { - .reset-component; + .reset-component(); position: fixed; z-index: @zindex-notification; diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 1d5944d04..f8a8d556b 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -4,7 +4,7 @@ @pageheader-prefix-cls: ~'@{ant-prefix}-page-header'; .@{pageheader-prefix-cls} { - .reset-component; + .reset-component(); position: relative; padding: @page-header-padding-vertical @page-header-padding; background-color: @component-background; diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 2266fe266..a2db88a3d 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -5,7 +5,7 @@ @pagination-prefix-cls: ~'@{ant-prefix}-pagination'; .@{pagination-prefix-cls} { - .reset-component; + .reset-component(); ul, ol { @@ -230,7 +230,7 @@ vertical-align: top; input { - .input; + .input(); width: 50px; margin: 0 8px; @@ -326,7 +326,7 @@ line-height: @pagination-item-size-sm; input { - .input-sm; + .input-sm(); width: 44px; } diff --git a/components/popover/style/index.less b/components/popover/style/index.less index 631e0437c..7ab29ddd7 100644 --- a/components/popover/style/index.less +++ b/components/popover/style/index.less @@ -4,7 +4,7 @@ @popover-prefix-cls: ~'@{ant-prefix}-popover'; .@{popover-prefix-cls} { - .reset-component; + .reset-component(); position: absolute; top: 0; @@ -115,7 +115,7 @@ height: sqrt(@popover-arrow-width * @popover-arrow-width * 2); background: transparent; border-style: solid; - border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2; + border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2); transform: rotate(45deg); } diff --git a/components/progress/style/index.less b/components/progress/style/index.less index 185716496..f2f0bd5e8 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -4,7 +4,7 @@ @progress-prefix-cls: ~'@{ant-prefix}-progress'; .@{progress-prefix-cls} { - .reset-component; + .reset-component(); display: inline-block; @@ -150,7 +150,7 @@ transform: translate(-50%, -50%); .@{iconfont-css-prefix} { - font-size: 14 / 12em; + font-size: (14 / 12em); } } diff --git a/components/radio/style/index.less b/components/radio/style/index.less index e6095051b..bfd5d453d 100644 --- a/components/radio/style/index.less +++ b/components/radio/style/index.less @@ -8,14 +8,14 @@ @radio-focused-outline: 3px solid fade(@radio-dot-color, 6%); .@{radio-group-prefix-cls} { - .reset-component; + .reset-component(); display: inline-block; } // 一般状态 .@{radio-prefix-cls}-wrapper { - .reset-component; + .reset-component(); position: relative; display: inline-block; @@ -25,7 +25,7 @@ } .@{radio-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; @@ -69,8 +69,8 @@ @radio-dot-size: @radio-size - 8px; position: absolute; - top: (@radio-size - @radio-dot-size) / 2 - 1px; - left: (@radio-size - @radio-dot-size) / 2 - 1px; + top: ((@radio-size - @radio-dot-size) / 2) - 1px; + left: ((@radio-size - @radio-dot-size) / 2) - 1px; display: table; width: @radio-dot-size; height: @radio-dot-size; diff --git a/components/rate/style/index.less b/components/rate/style/index.less index 34214491f..c730871c5 100644 --- a/components/rate/style/index.less +++ b/components/rate/style/index.less @@ -4,7 +4,7 @@ @rate-prefix-cls: ~'@{ant-prefix}-rate'; .@{rate-prefix-cls} { - .reset-component; + .reset-component(); display: inline-block; margin: 0; diff --git a/components/select/style/index.less b/components/select/style/index.less index 5bfef19f4..1c8742953 100644 --- a/components/select/style/index.less +++ b/components/select/style/index.less @@ -61,7 +61,7 @@ } .@{select-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; cursor: pointer; @@ -111,7 +111,7 @@ right: @control-padding-horizontal - 1px; width: @font-size-sm; height: @font-size-sm; - margin-top: -@font-size-sm / 2; + margin-top: (-@font-size-sm / 2); color: @disabled-color; font-size: @font-size-sm; line-height: 1; @@ -145,7 +145,7 @@ display: inline-block; width: @font-size-sm; height: @font-size-sm; - margin-top: -@font-size-sm / 2; + margin-top: (-@font-size-sm / 2); color: @disabled-color; font-size: @font-size-sm; font-style: normal; @@ -171,7 +171,7 @@ // ========================== Popup ========================== &-dropdown { - .reset-component; + .reset-component(); position: absolute; top: -9999px; left: -9999px; diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 548abdfe0..ac5a25874 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -79,7 +79,7 @@ // It's ok not to do this, but 24px makes bottom narrow in view should adjust &-content { display: inline-block; - margin-right: @padding-xs / 2; + margin-right: (@padding-xs / 2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -108,7 +108,7 @@ // ========================== Input ========================== .@{select-prefix-cls}-selection-search { position: relative; - margin-left: @select-multiple-padding / 2; + margin-left: (@select-multiple-padding / 2); &-input, &-mirror { diff --git a/components/select/style/rtl.less b/components/select/style/rtl.less index 82e055e66..9562784f0 100644 --- a/components/select/style/rtl.less +++ b/components/select/style/rtl.less @@ -47,7 +47,7 @@ // multiple @select-multiple-item-border-width: 1px; -@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); +@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); @select-multiple-padding: max( @input-padding-vertical-base - @select-multiple-item-border-width - @select-multiple-item-spacing-half, @@ -75,7 +75,7 @@ &-content { .@{select-prefix-cls}-rtl& { margin-right: 0; - margin-left: @padding-xs / 2; + margin-left: (@padding-xs / 2); text-align: right; } } @@ -84,7 +84,7 @@ // ========================== Input ========================== .@{select-prefix-cls}-selection-search { .@{select-prefix-cls}-rtl& { - margin-right: @select-multiple-padding / 2; + margin-right: (@select-multiple-padding / 2); margin-left: @input-padding-vertical-base; } @@ -119,7 +119,7 @@ } // single -@selection-item-padding: ceil(@font-size-base * 1.25); +@selection-item-padding: ceil((@font-size-base * 1.25)); .@{select-prefix-cls}-single { // ========================= Selector ========================= diff --git a/components/select/style/single.less b/components/select/style/single.less index 0eed6c96c..8adb73c6d 100644 --- a/components/select/style/single.less +++ b/components/select/style/single.less @@ -1,6 +1,6 @@ @import './index'; -@selection-item-padding: ceil(@font-size-base * 1.25); +@selection-item-padding: ceil((@font-size-base * 1.25)); .@{select-prefix-cls}-single { // ========================= Selector ========================= diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 53721ab54..d20a75954 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -4,7 +4,7 @@ @slider-prefix-cls: ~'@{ant-prefix}-slider'; .@{slider-prefix-cls} { - .reset-component; + .reset-component(); position: relative; height: 12px; diff --git a/components/spin/style/index.less b/components/spin/style/index.less index a211d7a1d..ca3cad4da 100644 --- a/components/spin/style/index.less +++ b/components/spin/style/index.less @@ -5,7 +5,7 @@ @spin-dot-default: @text-color-secondary; .@{spin-prefix-cls} { - .reset-component; + .reset-component(); position: absolute; display: none; @@ -36,41 +36,41 @@ position: absolute; top: 50%; left: 50%; - margin: -@spin-dot-size / 2; + margin: (-@spin-dot-size / 2); } .@{spin-prefix-cls}-text { position: absolute; top: 50%; width: 100%; - padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px; + padding-top: ((@spin-dot-size - @font-size-base) / 2) + 2px; text-shadow: 0 1px 2px @shadow-color-inverse; } &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { - margin-top: -@spin-dot-size / 2 - 10px; + margin-top: (-@spin-dot-size / 2) - 10px; } } > div > .@{spin-prefix-cls}-sm { .@{spin-prefix-cls}-dot { - margin: -@spin-dot-size-sm / 2; + margin: (-@spin-dot-size-sm / 2); } .@{spin-prefix-cls}-text { - padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px; + padding-top: ((@spin-dot-size-sm - @font-size-base) / 2) + 2px; } &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { - margin-top: -@spin-dot-size-sm / 2 - 10px; + margin-top: (-@spin-dot-size-sm / 2) - 10px; } } > div > .@{spin-prefix-cls}-lg { .@{spin-prefix-cls}-dot { - margin: -@spin-dot-size-lg / 2; + margin: (-@spin-dot-size-lg / 2); } .@{spin-prefix-cls}-text { - padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px; + padding-top: ((@spin-dot-size-lg - @font-size-base) / 2) + 2px; } &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { - margin-top: -@spin-dot-size-lg / 2 - 10px; + margin-top: (-@spin-dot-size-lg / 2) - 10px; } } } diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less index 4d9e19c5f..f236fdb3f 100644 --- a/components/statistic/style/index.less +++ b/components/statistic/style/index.less @@ -4,7 +4,7 @@ @statistic-prefix-cls: ~'@{ant-prefix}-statistic'; .@{statistic-prefix-cls} { - .reset-component; + .reset-component(); &-title { margin-bottom: 4px; diff --git a/components/steps/style/index.less b/components/steps/style/index.less index 20b5c9c12..99df0dcfb 100644 --- a/components/steps/style/index.less +++ b/components/steps/style/index.less @@ -31,7 +31,7 @@ @steps-nav-content-max-width: auto; .@{steps-prefix-cls} { - .reset-component; + .reset-component(); display: flex; width: 100%; @@ -108,7 +108,7 @@ line-height: @steps-icon-size; &::after { position: absolute; - top: @steps-icon-size / 2; + top: (@steps-icon-size / 2); left: 100%; display: block; width: 9999px; diff --git a/components/steps/style/label-placement.less b/components/steps/style/label-placement.less index c01593ea2..336285e61 100644 --- a/components/steps/style/label-placement.less +++ b/components/steps/style/label-placement.less @@ -7,7 +7,7 @@ } &-content { display: block; - width: (@steps-icon-size / 2 + 42px) * 2; + width: ((@steps-icon-size / 2) + 42px) * 2; margin-top: 8px; text-align: center; } diff --git a/components/steps/style/progress-dot.less b/components/steps/style/progress-dot.less index a6725df13..6b0d96ec6 100644 --- a/components/steps/style/progress-dot.less +++ b/components/steps/style/progress-dot.less @@ -7,7 +7,7 @@ &-tail { top: 2px; width: 100%; - margin: 0 0 0 @steps-desciption-max-width / 2; + margin: 0 0 0 (@steps-desciption-max-width / 2); padding: 0; &::after { width: ~'calc(100% - 20px)'; diff --git a/components/steps/style/small.less b/components/steps/style/small.less index 2f130d286..632a9591a 100644 --- a/components/steps/style/small.less +++ b/components/steps/style/small.less @@ -19,7 +19,7 @@ font-size: @font-size-base; line-height: @steps-small-icon-size; &::after { - top: @steps-small-icon-size / 2; + top: (@steps-small-icon-size / 2); } } .@{steps-prefix-cls}-item-description { diff --git a/components/steps/style/vertical.less b/components/steps/style/vertical.less index e54654792..160fd7f6e 100644 --- a/components/steps/style/vertical.less +++ b/components/steps/style/vertical.less @@ -64,11 +64,11 @@ } .@{steps-prefix-cls}-vertical { - .steps-vertical; + .steps-vertical(); } @media (max-width: @screen-xs) { .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal { - .steps-vertical; + .steps-vertical(); } } diff --git a/components/style/mixins/iconfont.less b/components/style/mixins/iconfont.less index 13438599e..a504af724 100644 --- a/components/style/mixins/iconfont.less +++ b/components/style/mixins/iconfont.less @@ -31,7 +31,7 @@ // fix chrome 12px bug, support ie .iconfont-size-under-12px(@size, @rotate: 0deg) { display: inline-block; - @font-scale: unit(@size / 12px); + @font-scale: unit((@size / 12px)); font-size: 12px; // IE9 diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 627eaac52..4c8e2cb58 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -60,10 +60,10 @@ @font-size-base: 14px; @font-size-lg: @font-size-base + 2px; @font-size-sm: 12px; -@heading-1-size: ceil(@font-size-base * 2.71); -@heading-2-size: ceil(@font-size-base * 2.14); -@heading-3-size: ceil(@font-size-base * 1.71); -@heading-4-size: ceil(@font-size-base * 1.42); +@heading-1-size: ceil((@font-size-base * 2.71)); +@heading-2-size: ceil((@font-size-base * 2.14)); +@heading-3-size: ceil((@font-size-base * 1.71)); +@heading-4-size: ceil((@font-size-base * 1.42)); @line-height-base: 1.5715; @border-radius-base: 2px; @border-radius-sm: @border-radius-base; @@ -362,7 +362,7 @@ @select-single-item-height-lg: 40px; @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px @select-multiple-item-height-lg: 32px; -@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2); +@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2)); @select-multiple-disabled-background: @input-disabled-bg; @select-multiple-item-disabled-color: #bfbfbf; @select-multiple-item-disabled-border-color: @select-border-color; diff --git a/components/switch/style/index.less b/components/switch/style/index.less index a0ac7349b..065cbb3b2 100644 --- a/components/switch/style/index.less +++ b/components/switch/style/index.less @@ -5,7 +5,7 @@ @switch-duration: 0.36s; .@{switch-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; diff --git a/components/table/style/index.less b/components/table/style/index.less index 92b7e5284..48d84827a 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -8,11 +8,11 @@ @table-selection-column-width: 60px; .@{table-prefix-cls}-wrapper { - .clearfix; + .clearfix(); } .@{table-prefix-cls} { - .reset-component; + .reset-component(); position: relative; clear: both; @@ -71,8 +71,8 @@ position: absolute; top: 50%; left: 50%; - margin-top: -@font-size-sm / 2 + 1px; - margin-left: -@font-size-sm / 2; + margin-top: (-@font-size-sm / 2) + 1px; + margin-left: (-@font-size-sm / 2); } } diff --git a/components/table/style/size.less b/components/table/style/size.less index e4da47030..7772c99db 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -1,7 +1,7 @@ -@table-padding-vertical-md: @table-padding-vertical * 3 / 4; -@table-padding-horizontal-md: @table-padding-horizontal / 2; -@table-padding-vertical-sm: @table-padding-vertical / 2; -@table-padding-horizontal-sm: @table-padding-horizontal / 2; +@table-padding-vertical-md: (@table-padding-vertical * 3 / 4); +@table-padding-horizontal-md: (@table-padding-horizontal / 2); +@table-padding-vertical-sm: (@table-padding-vertical / 2); +@table-padding-horizontal-sm: (@table-padding-horizontal / 2); .table-size(@size, @padding-vertical, @padding-horizontal) { .@{table-prefix-cls}.@{table-prefix-cls}-@{size} { @@ -32,7 +32,7 @@ } tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper { - margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical - 1px; + margin: -@padding-vertical (-@table-padding-horizontal / 2) -@padding-vertical - 1px; } } } diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 00e12c50f..f632616aa 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -17,11 +17,11 @@ } .@{tab-prefix-cls} { - .reset-component; + .reset-component(); position: relative; overflow: hidden; - .clearfix; + .clearfix(); &-ink-bar { position: absolute; @@ -51,7 +51,7 @@ line-height: @line-height-base; white-space: nowrap; transition: padding 0.3s @ease-in-out; - .clearfix; + .clearfix(); &-scrolling { padding-right: @tabs-scrolling-size; diff --git a/components/tag/style/index.less b/components/tag/style/index.less index 783eec930..f4945f05f 100644 --- a/components/tag/style/index.less +++ b/components/tag/style/index.less @@ -4,7 +4,7 @@ @tag-prefix-cls: ~'@{ant-prefix}-tag'; .@{tag-prefix-cls} { - .reset-component; + .reset-component(); display: inline-block; height: auto; diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index ea450721e..ec046a900 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -6,7 +6,7 @@ @timepicker-item-height: 32px; .@{timepicker-prefix-cls}-panel { - .reset-component; + .reset-component(); position: absolute; z-index: @zindex-picker; @@ -35,7 +35,7 @@ outline: 0; cursor: auto; - .placeholder; + .placeholder(); &-wrap { position: relative; @@ -132,7 +132,7 @@ } &-combobox { - .clearfix; + .clearfix(); } &-addon { @@ -166,7 +166,7 @@ } .@{timepicker-prefix-cls} { - .reset-component; + .reset-component(); position: relative; display: inline-block; @@ -176,9 +176,9 @@ transition: opacity 0.3s; &-input { - .input; + .input(); &[disabled] { - .disabled; + .disabled(); } } @@ -221,11 +221,11 @@ } &-large &-input { - .input-lg; + .input-lg(); } &-small &-input { - .input-sm; + .input-sm(); } &-small &-icon, diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 488425e6d..f84ba5c51 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -4,7 +4,7 @@ @timeline-prefix-cls: ~'@{ant-prefix}-timeline'; .@{timeline-prefix-cls} { - .reset-component; + .reset-component(); margin: 0; padding: 0; @@ -80,7 +80,7 @@ &-content { position: relative; - top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; + top: -((@font-size-base * @line-height-base) - @font-size-base) + 1px; margin: 0 0 0 18px; word-break: break-word; } diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less index 19f9a11b7..6e20dbb97 100644 --- a/components/tooltip/style/index.less +++ b/components/tooltip/style/index.less @@ -13,7 +13,7 @@ // Base class .@{tooltip-prefix-cls} { - .reset-component; + .reset-component(); position: absolute; z-index: @zindex-tooltip; diff --git a/components/transfer/style/index.less b/components/transfer/style/index.less index 00318feb7..af3679829 100644 --- a/components/transfer/style/index.less +++ b/components/transfer/style/index.less @@ -6,11 +6,11 @@ @transfer-prefix-cls: ~'@{ant-prefix}-transfer'; @transfer-header-vertical-padding: ( - @transfer-header-height - 1px - @font-size-base * @line-height-base - ) / 2; + (@transfer-header-height - 1px - (@font-size-base * @line-height-base)) / 2 +); .@{transfer-prefix-cls} { - .reset-component; + .reset-component(); position: relative; @@ -148,7 +148,7 @@ // with filter should offset the search box height .@{transfer-prefix-cls}-list-body-with-search & { - margin-top: @input-height-base / 2; + margin-top: (@input-height-base / 2); } } diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 126a40185..5b9cdd3f1 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -9,7 +9,7 @@ .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-select-tree-checkbox'); .@{select-tree-prefix-cls} { - .reset-component; + .reset-component(); margin: 0; margin-top: -4px; @@ -159,7 +159,7 @@ } .@{select-prefix-cls}-tree-dropdown { - .reset-component; + .reset-component(); .@{select-prefix-cls}-dropdown-search { position: sticky; top: 0; diff --git a/components/tree/style/index.less b/components/tree/style/index.less index 9321463a3..31f57bf09 100644 --- a/components/tree/style/index.less +++ b/components/tree/style/index.less @@ -20,7 +20,7 @@ height: 66.67%; } - .reset-component; + .reset-component(); margin: 0; padding: 0; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index faa888e2c..17f4154eb 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -7,7 +7,7 @@ @upload-picture-card-border-style: @border-style-base; .@{upload-prefix-cls} { - .reset-component; + .reset-component(); outline: 0; @@ -130,7 +130,7 @@ } &-picture-card-wrapper { - .clearfix; + .clearfix(); display: inline-block; width: 100%; @@ -138,8 +138,8 @@ } .@{upload-prefix-cls}-list { - .reset-component; - .clearfix; + .reset-component(); + .clearfix(); &-item-list-type-text { &:hover { .@{upload-prefix-cls}-list-item-name-icon-count-1 { @@ -197,7 +197,7 @@ .@{iconfont-css-prefix}-loading, .@{iconfont-css-prefix}-paper-clip { position: absolute; - top: @font-size-base / 2 - 2px; + top: (@font-size-base / 2) - 2px; color: @text-color-secondary; font-size: @font-size-base; } diff --git a/components/vc-image/assets/index.less b/components/vc-image/assets/index.less index baaf5b626..aeab5015b 100644 --- a/components/vc-image/assets/index.less +++ b/components/vc-image/assets/index.less @@ -1,313 +1,313 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@prefixCls: ~'@{ant-prefix}-image'; -@zindex-preview-mask: 1000; -@preview-mask-bg: fade(#000, 40%); -@text-color: #bbb; -@text-color-disabled: darken(@text-color, 30%); -@background-color: #f3f3f3; - -.reset() { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.box() { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -.@{prefixCls} { - display: inline-block; - position: relative; - &-img { - width: 100%; - height: auto; - &-placeholder { - background-color: @background-color; - background-repeat: no-repeat; - background-position: center center; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Iuafpeeci+WbvueJh+S8mOWMljQuMCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWKoOi9veWbvueJhyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3Mi4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpbWFnZS1maWxs5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NzAuMDAwMDAwLCA1MDEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOSw1IEwzLDUgQzIuNDQ2ODc1LDUgMiw1LjQ0Njg3NSAyLDYgTDIsMjYgQzIsMjYuNTUzMTI1IDIuNDQ2ODc1LDI3IDMsMjcgTDI5LDI3IEMyOS41NTMxMjUsMjcgMzAsMjYuNTUzMTI1IDMwLDI2IEwzMCw2IEMzMCw1LjQ0Njg3NSAyOS41NTMxMjUsNSAyOSw1IFogTTEwLjU2MjUsOS41IEMxMS42NjU2MjUsOS41IDEyLjU2MjUsMTAuMzk2ODc1IDEyLjU2MjUsMTEuNSBDMTIuNTYyNSwxMi42MDMxMjUgMTEuNjY1NjI1LDEzLjUgMTAuNTYyNSwxMy41IEM5LjQ1OTM3NSwxMy41IDguNTYyNSwxMi42MDMxMjUgOC41NjI1LDExLjUgQzguNTYyNSwxMC4zOTY4NzUgOS40NTkzNzUsOS41IDEwLjU2MjUsOS41IFogTTI2LjYyMTg3NSwyMy4xNTkzNzUgQzI2LjU3ODEyNSwyMy4xOTY4NzUgMjYuNTE4NzUsMjMuMjE4NzUgMjYuNDU5Mzc1LDIzLjIxODc1IEw1LjUzNzUsMjMuMjE4NzUgQzUuNCwyMy4yMTg3NSA1LjI4NzUsMjMuMTA2MjUgNS4yODc1LDIyLjk2ODc1IEM1LjI4NzUsMjIuOTA5Mzc1IDUuMzA5Mzc1LDIyLjg1MzEyNSA1LjM0Njg3NSwyMi44MDYyNSBMMTAuNjY4NzUsMTYuNDkzNzUgQzEwLjc1NjI1LDE2LjM4NzUgMTAuOTE1NjI1LDE2LjM3NSAxMS4wMjE4NzUsMTYuNDYyNSBDMTEuMDMxMjUsMTYuNDcxODc1IDExLjA0Mzc1LDE2LjQ4MTI1IDExLjA1MzEyNSwxNi40OTM3NSBMMTQuMTU5Mzc1LDIwLjE4MTI1IEwxOS4xLDE0LjMyMTg3NSBDMTkuMTg3NSwxNC4yMTU2MjUgMTkuMzQ2ODc1LDE0LjIwMzEyNSAxOS40NTMxMjUsMTQuMjkwNjI1IEMxOS40NjI1LDE0LjMgMTkuNDc1LDE0LjMwOTM3NSAxOS40ODQzNzUsMTQuMzIxODc1IEwyNi42NTkzNzUsMjIuODA5Mzc1IEMyNi43NDA2MjUsMjIuOTEyNSAyNi43MjgxMjUsMjMuMDcxODc1IDI2LjYyMTg3NSwyMy4xNTkzNzUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRThFOEU4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); - } - } - - &-placeholder { - .box; - } - - &-preview { - text-align: center; - height: 100%; - pointer-events: none; - - &-body { - .box; - overflow: hidden; - } - - &.zoom-enter, - &.zoom-appear { - transform: none; - opacity: 0; - animation-duration: 0.3s; - } - - &-mask { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindex-preview-mask; - height: 100%; - background-color: @preview-mask-bg; - filter: ~'alpha(opacity=50)'; - - &-hidden { - display: none; - } - } - - &-img { - cursor: grab; - transform: scale3d(1, 1, 1); - transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - user-select: none; - vertical-align: middle; - max-width: 100%; - max-height: 100%; - pointer-events: auto; - &-wrapper { - .box; - transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - &::before { - content: ''; - display: inline-block; - height: 50%; - width: 1px; - margin-right: -1px; - } - } - } - - &-moving { - .@{prefixCls}-preview-img { - cursor: grabbing; - &-wrapper { - transition-duration: 0s; - } - } - } - - &-wrap { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindex-preview-mask; - overflow: auto; - outline: 0; - -webkit-overflow-scrolling: touch; - } - - &-operations { - .reset; - pointer-events: auto; - list-style: none; - position: absolute; - display: flex; - top: 0; - right: 0; - width: 100%; - align-items: center; - flex-direction: row-reverse; - z-index: 1; - color: @text-color; - background: fade(@preview-mask-bg, 45%); - - &-operation { - padding: 10px; - cursor: pointer; - margin-left: 10px; - &-disabled { - pointer-events: none; - color: @text-color-disabled; - } - &:last-of-type { - margin-left: 0; - } - } - &-icon { - font-size: 18px; - } - } - - &-switch-left { - position: absolute; - left: 10px; - top: 50%; - width: 44px; - height: 44px; - margin-top: -22px; - background: fade(@text-color, 45%); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - z-index: 1; - pointer-events: auto; - color: @text-color; - &-disabled { - background: fade(@text-color, 30%); - color: @text-color-disabled; - cursor: not-allowed; - > .anticon { - cursor: not-allowed; - } - } - > .anticon { - font-size: 24px; - } - } - - &-switch-right { - position: absolute; - right: 10px; - top: 50%; - width: 44px; - height: 44px; - margin-top: -22px; - background: fade(@text-color, 45%); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - z-index: 1; - pointer-events: auto; - color: @text-color; - &-disabled { - background: fade(@text-color, 20%); - color: @text-color-disabled; - cursor: not-allowed; - > .anticon { - cursor: not-allowed; - } - } - > .anticon { - font-size: 24px; - } - } - } -} - -.fade-enter, -.fade-appear { - animation-duration: 0.2s; - animation-fill-mode: both; - animation-play-state: paused; - opacity: 0; - animation-timing-function: linear; -} -.fade-leave { - animation-duration: 0.2s; - animation-fill-mode: both; - animation-play-state: paused; - animation-timing-function: linear; -} -.fade-enter.fade-enter-active, -.fade-appear.fade-appear-active { - animation-name: rcImageFadeIn; - animation-play-state: running; -} -.fade-leave.fade-leave-active { - animation-name: rcImageFadeOut; - animation-play-state: running; - pointer-events: none; -} - -@keyframes rcImageFadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes rcImageFadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.zoom-enter, -.zoom-appear { - -webkit-animation-duration: 0.2s; - animation-duration: 0.2s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-play-state: paused; - animation-play-state: paused; - -webkit-transform: scale(0); - transform: scale(0); - opacity: 0; - -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); - animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); -} -.zoom-leave { - -webkit-animation-duration: 0.2s; - animation-duration: 0.2s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-play-state: paused; - animation-play-state: paused; - -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); - animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); -} -.zoom-enter.zoom-enter-active, -.zoom-appear.zoom-appear-active { - -webkit-animation-name: rcImageZoomIn; - animation-name: rcImageZoomIn; - -webkit-animation-play-state: running; - animation-play-state: running; -} -.zoom-leave.zoom-leave-active { - -webkit-animation-name: rcImageZoomOut; - animation-name: rcImageZoomOut; - -webkit-animation-play-state: running; - animation-play-state: running; - pointer-events: none; -} - -@keyframes rcImageZoomIn { - 0% { - -webkit-transform: scale(0.2); - transform: scale(0.2); - opacity: 0; - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } -} -@keyframes rcImageZoomOut { - 0% { - -webkit-transform: scale(1); - transform: scale(1); - } - 100% { - -webkit-transform: scale(0.2); - transform: scale(0.2); - opacity: 0; - } -} +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@prefixCls: ~'@{ant-prefix}-image'; +@zindex-preview-mask: 1000; +@preview-mask-bg: fade(#000, 40%); +@text-color: #bbb; +@text-color-disabled: darken(@text-color, 30%); +@background-color: #f3f3f3; + +.reset() { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.box() { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.@{prefixCls} { + display: inline-block; + position: relative; + &-img { + width: 100%; + height: auto; + &-placeholder { + background-color: @background-color; + background-repeat: no-repeat; + background-position: center center; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjggMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1LjIgKDc4MTgxKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5pbWFnZS1maWxs5aSH5Lu9PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9Iuafpeeci+WbvueJh+S8mOWMljQuMCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWKoOi9veWbvueJhyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTU3Mi4wMDAwMDAsIC01MDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJpbWFnZS1maWxs5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NzAuMDAwMDAwLCA1MDEuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yOSw1IEwzLDUgQzIuNDQ2ODc1LDUgMiw1LjQ0Njg3NSAyLDYgTDIsMjYgQzIsMjYuNTUzMTI1IDIuNDQ2ODc1LDI3IDMsMjcgTDI5LDI3IEMyOS41NTMxMjUsMjcgMzAsMjYuNTUzMTI1IDMwLDI2IEwzMCw2IEMzMCw1LjQ0Njg3NSAyOS41NTMxMjUsNSAyOSw1IFogTTEwLjU2MjUsOS41IEMxMS42NjU2MjUsOS41IDEyLjU2MjUsMTAuMzk2ODc1IDEyLjU2MjUsMTEuNSBDMTIuNTYyNSwxMi42MDMxMjUgMTEuNjY1NjI1LDEzLjUgMTAuNTYyNSwxMy41IEM5LjQ1OTM3NSwxMy41IDguNTYyNSwxMi42MDMxMjUgOC41NjI1LDExLjUgQzguNTYyNSwxMC4zOTY4NzUgOS40NTkzNzUsOS41IDEwLjU2MjUsOS41IFogTTI2LjYyMTg3NSwyMy4xNTkzNzUgQzI2LjU3ODEyNSwyMy4xOTY4NzUgMjYuNTE4NzUsMjMuMjE4NzUgMjYuNDU5Mzc1LDIzLjIxODc1IEw1LjUzNzUsMjMuMjE4NzUgQzUuNCwyMy4yMTg3NSA1LjI4NzUsMjMuMTA2MjUgNS4yODc1LDIyLjk2ODc1IEM1LjI4NzUsMjIuOTA5Mzc1IDUuMzA5Mzc1LDIyLjg1MzEyNSA1LjM0Njg3NSwyMi44MDYyNSBMMTAuNjY4NzUsMTYuNDkzNzUgQzEwLjc1NjI1LDE2LjM4NzUgMTAuOTE1NjI1LDE2LjM3NSAxMS4wMjE4NzUsMTYuNDYyNSBDMTEuMDMxMjUsMTYuNDcxODc1IDExLjA0Mzc1LDE2LjQ4MTI1IDExLjA1MzEyNSwxNi40OTM3NSBMMTQuMTU5Mzc1LDIwLjE4MTI1IEwxOS4xLDE0LjMyMTg3NSBDMTkuMTg3NSwxNC4yMTU2MjUgMTkuMzQ2ODc1LDE0LjIwMzEyNSAxOS40NTMxMjUsMTQuMjkwNjI1IEMxOS40NjI1LDE0LjMgMTkuNDc1LDE0LjMwOTM3NSAxOS40ODQzNzUsMTQuMzIxODc1IEwyNi42NTkzNzUsMjIuODA5Mzc1IEMyNi43NDA2MjUsMjIuOTEyNSAyNi43MjgxMjUsMjMuMDcxODc1IDI2LjYyMTg3NSwyMy4xNTkzNzUgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRThFOEU4Ij48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); + } + } + + &-placeholder { + .box(); + } + + &-preview { + text-align: center; + height: 100%; + pointer-events: none; + + &-body { + .box(); + overflow: hidden; + } + + &.zoom-enter, + &.zoom-appear { + transform: none; + opacity: 0; + animation-duration: 0.3s; + } + + &-mask { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-preview-mask; + height: 100%; + background-color: @preview-mask-bg; + filter: ~'alpha(opacity=50)'; + + &-hidden { + display: none; + } + } + + &-img { + cursor: grab; + transform: scale3d(1, 1, 1); + transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + user-select: none; + vertical-align: middle; + max-width: 100%; + max-height: 100%; + pointer-events: auto; + &-wrapper { + .box(); + transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + &::before { + content: ''; + display: inline-block; + height: 50%; + width: 1px; + margin-right: -1px; + } + } + } + + &-moving { + .@{prefixCls}-preview-img { + cursor: grabbing; + &-wrapper { + transition-duration: 0s; + } + } + } + + &-wrap { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-preview-mask; + overflow: auto; + outline: 0; + -webkit-overflow-scrolling: touch; + } + + &-operations { + .reset(); + pointer-events: auto; + list-style: none; + position: absolute; + display: flex; + top: 0; + right: 0; + width: 100%; + align-items: center; + flex-direction: row-reverse; + z-index: 1; + color: @text-color; + background: fade(@preview-mask-bg, 45%); + + &-operation { + padding: 10px; + cursor: pointer; + margin-left: 10px; + &-disabled { + pointer-events: none; + color: @text-color-disabled; + } + &:last-of-type { + margin-left: 0; + } + } + &-icon { + font-size: 18px; + } + } + + &-switch-left { + position: absolute; + left: 10px; + top: 50%; + width: 44px; + height: 44px; + margin-top: -22px; + background: fade(@text-color, 45%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + pointer-events: auto; + color: @text-color; + &-disabled { + background: fade(@text-color, 30%); + color: @text-color-disabled; + cursor: not-allowed; + > .anticon { + cursor: not-allowed; + } + } + > .anticon { + font-size: 24px; + } + } + + &-switch-right { + position: absolute; + right: 10px; + top: 50%; + width: 44px; + height: 44px; + margin-top: -22px; + background: fade(@text-color, 45%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + pointer-events: auto; + color: @text-color; + &-disabled { + background: fade(@text-color, 20%); + color: @text-color-disabled; + cursor: not-allowed; + > .anticon { + cursor: not-allowed; + } + } + > .anticon { + font-size: 24px; + } + } + } +} + +.fade-enter, +.fade-appear { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; + opacity: 0; + animation-timing-function: linear; +} +.fade-leave { + animation-duration: 0.2s; + animation-fill-mode: both; + animation-play-state: paused; + animation-timing-function: linear; +} +.fade-enter.fade-enter-active, +.fade-appear.fade-appear-active { + animation-name: rcImageFadeIn; + animation-play-state: running; +} +.fade-leave.fade-leave-active { + animation-name: rcImageFadeOut; + animation-play-state: running; + pointer-events: none; +} + +@keyframes rcImageFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes rcImageFadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.zoom-enter, +.zoom-appear { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-play-state: paused; + animation-play-state: paused; + -webkit-transform: scale(0); + transform: scale(0); + opacity: 0; + -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); + animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); +} +.zoom-leave { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-play-state: paused; + animation-play-state: paused; + -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.zoom-enter.zoom-enter-active, +.zoom-appear.zoom-appear-active { + -webkit-animation-name: rcImageZoomIn; + animation-name: rcImageZoomIn; + -webkit-animation-play-state: running; + animation-play-state: running; +} +.zoom-leave.zoom-leave-active { + -webkit-animation-name: rcImageZoomOut; + animation-name: rcImageZoomOut; + -webkit-animation-play-state: running; + animation-play-state: running; + pointer-events: none; +} + +@keyframes rcImageZoomIn { + 0% { + -webkit-transform: scale(0.2); + transform: scale(0.2); + opacity: 0; + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } +} +@keyframes rcImageZoomOut { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + -webkit-transform: scale(0.2); + transform: scale(0.2); + opacity: 0; + } +} diff --git a/components/vc-steps/assets/progress-dot.less b/components/vc-steps/assets/progress-dot.less index f4a6a7b18..d44515f98 100644 --- a/components/vc-steps/assets/progress-dot.less +++ b/components/vc-steps/assets/progress-dot.less @@ -5,7 +5,7 @@ &-tail { width: 100%; top: 1px; - margin: 0 0 0 @stepDescriptionMaxWidth / 2; + margin: 0 0 0 (@stepDescriptionMaxWidth / 2); padding: 0; &:after { diff --git a/package.json b/package.json index c2ac172a7..3edc2bb5b 100644 --- a/package.json +++ b/package.json @@ -141,8 +141,8 @@ "js-base64": "^3.0.0", "json-templater": "^1.2.0", "jsonp": "^0.2.1", - "less": "^3.9.0", - "less-loader": "^6.0.0", + "less": "^4.0.0", + "less-loader": "^7.0.0", "less-plugin-npm-import": "^2.1.0", "lint-staged": "^10.0.0", "markdown-it-anchor": "^5.3.0", @@ -169,7 +169,10 @@ "style-loader": "^1.0.0", "stylelint": "^13.0.0", "stylelint-config-prettier": "^8.0.0", - "stylelint-config-standard": "^19.0.0", + "stylelint-config-rational-order": "^0.1.2", + "stylelint-config-standard": "^20.0.0", + "stylelint-declaration-block-no-ignored-properties": "^2.1.0", + "stylelint-order": "^4.0.0", "terser-webpack-plugin": "^3.0.3", "through2": "^3.0.0", "ts-jest": "^26.4.1",