test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-29 18:48:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: support less4 (#3449)

Browse Source
This commit is contained in:
tangjinzhou 2020-12-27 00:50:32 -06:00 committed by GitHub
parent c90afeeed2
commit adc6afb8fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
71 changed files with 510 additions and 491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.stylelintrc.json Normal file
View File

@ -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"]
}

2
antdv-demo

@ -1 +1 @@
Subproject commit 8269bbdf109ab684626cd8ef0c4fc5f0c2222210
Subproject commit ea0def709e64f3d312ec46b2d5369542e2224628

4
components/alert/style/index.less
View File

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

2
components/anchor/style/index.less
View File

@ -4,7 +4,7 @@
@anchor-border-width: 2px;
.@{ant-prefix}-anchor {
.reset-component;
.reset-component();
position: relative;
padding-left: @anchor-border-width;

2
components/auto-complete/style/index.less
View File

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

2
components/avatar/style/index.less
View File

@ -4,7 +4,7 @@
@avatar-prefix-cls: ~'@{ant-prefix}-avatar';
.@{avatar-prefix-cls} {
.reset-component;
.reset-component();
position: relative;
display: inline-block;

2
components/back-top/style/index.less
View File

@ -4,7 +4,7 @@
@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
.@{backtop-prefix-cls} {
.reset-component;
.reset-component();
position: fixed;
right: 100px;

4
components/badge/style/index.less
View File

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

2
components/breadcrumb/style/index.less
View File

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

14
components/button/style/index.less
View File

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

6
components/button/style/mixin.less
View File

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

2
components/calendar/style/index.less
View File

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

10
components/card/style/index.less
View File

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

4
components/card/style/size.less
View File

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

2
components/carousel/style/index.less
View File

@ -2,7 +2,7 @@
@import '../../style/mixins/index';
.@{ant-prefix}-carousel {
.reset-component;
.reset-component();
.slick-slider {
position: relative;

8
components/cascader/style/index.less
View File

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

6
components/checkbox/style/mixin.less
View File

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

2
components/collapse/style/index.less
View File

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

8
components/color-picker/style/index.less
View File

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

20
components/date-picker/style/Calendar.less
View File

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

4
components/date-picker/style/Picker.less
View File

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

4
components/date-picker/style/RangePicker.less
View File

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

2
components/divider/style/index.less
View File

@ -4,7 +4,7 @@
@divider-prefix-cls: ~'@{ant-prefix}-divider';
.@{divider-prefix-cls} {
.reset-component;
.reset-component();
background: @border-color-split;

2
components/dropdown/style/index.less
View File

@ -4,7 +4,7 @@
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls} {
.reset-component;
.reset-component();
position: absolute;
top: -9999px;

10
components/form/style/index.less
View File

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

10
components/image/style/index.less
View File

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

4
components/input-number/style/index.less
View File

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

12
components/input/style/index.less
View File

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

2
components/input/style/mixin.less
View File

@ -264,7 +264,7 @@
&&-compact {
display: block;
.clearfix;
.clearfix();
&-addon,
&-wrap,

2
components/layout/style/index.less
View File

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

2
components/list/style/index.less
View File

@ -4,7 +4,7 @@
@list-prefix-cls: ~'@{ant-prefix}-list';
.@{list-prefix-cls} {
.reset-component;
.reset-component();
position: relative;

6
components/mentions/style/index.less
View File

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

6
components/menu/style/index.less
View File

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

2
components/message/style/index.less
View File

@ -4,7 +4,7 @@
@message-prefix-cls: ~'@{ant-prefix}-message';
.@{message-prefix-cls} {
.reset-component;
.reset-component();
position: fixed;
top: 16px;

2
components/modal/style/modal.less
View File

@ -4,7 +4,7 @@
@modal-footer-padding-horizontal: 16px;
.@{dialog-prefix-cls} {
.reset-component;
.reset-component();
position: relative;
top: 100px;

2
components/notification/style/index.less
View File

@ -9,7 +9,7 @@
@notification-margin-bottom: 16px;
.@{notification-prefix-cls} {
.reset-component;
.reset-component();
position: fixed;
z-index: @zindex-notification;

2
components/page-header/style/index.less
View File

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

6
components/pagination/style/index.less
View File

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

4
components/popover/style/index.less
View File

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

4
components/progress/style/index.less
View File

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

10
components/radio/style/index.less
View File

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

2
components/rate/style/index.less
View File

@ -4,7 +4,7 @@
@rate-prefix-cls: ~'@{ant-prefix}-rate';
.@{rate-prefix-cls} {
.reset-component;
.reset-component();
display: inline-block;
margin: 0;

8
components/select/style/index.less
View File

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

4
components/select/style/multiple.less
View File

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

8
components/select/style/rtl.less
View File

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

2
components/select/style/single.less
View File

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

2
components/slider/style/index.less
View File

@ -4,7 +4,7 @@
@slider-prefix-cls: ~'@{ant-prefix}-slider';
.@{slider-prefix-cls} {
.reset-component;
.reset-component();
position: relative;
height: 12px;

20
components/spin/style/index.less
View File

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

2
components/statistic/style/index.less
View File

@ -4,7 +4,7 @@
@statistic-prefix-cls: ~'@{ant-prefix}-statistic';
.@{statistic-prefix-cls} {
.reset-component;
.reset-component();
&-title {
margin-bottom: 4px;

4
components/steps/style/index.less
View File

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

2
components/steps/style/label-placement.less
View File

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

2
components/steps/style/progress-dot.less
View File

@ -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)';

2
components/steps/style/small.less
View File

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

4
components/steps/style/vertical.less
View File

@ -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();
}
}

2
components/style/mixins/iconfont.less
View File

@ -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

10
components/style/themes/default.less
View File

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

2
components/switch/style/index.less
View File

@ -5,7 +5,7 @@
@switch-duration: 0.36s;
.@{switch-prefix-cls} {
.reset-component;
.reset-component();
position: relative;
display: inline-block;

8
components/table/style/index.less
View File

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

10
components/table/style/size.less
View File

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

6
components/tabs/style/index.less
View File

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

2
components/tag/style/index.less
View File

@ -4,7 +4,7 @@
@tag-prefix-cls: ~'@{ant-prefix}-tag';
.@{tag-prefix-cls} {
.reset-component;
.reset-component();
display: inline-block;
height: auto;

16
components/time-picker/style/index.less
View File

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

4
components/timeline/style/index.less
View File

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

2
components/tooltip/style/index.less
View File

@ -13,7 +13,7 @@
// Base class
.@{tooltip-prefix-cls} {
.reset-component;
.reset-component();
position: absolute;
z-index: @zindex-tooltip;

8
components/transfer/style/index.less
View File

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

4
components/tree-select/style/index.less
View File

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

2
components/tree/style/index.less
View File

@ -20,7 +20,7 @@
height: 66.67%;
}
.reset-component;
.reset-component();
margin: 0;
padding: 0;

10
components/upload/style/index.less
View File

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

626
components/vc-image/assets/index.less
View File

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

2
components/vc-steps/assets/progress-dot.less
View File

@ -5,7 +5,7 @@
&-tail {
width: 100%;
top: 1px;
margin: 0 0 0 @stepDescriptionMaxWidth / 2;
margin: 0 0 0 (@stepDescriptionMaxWidth / 2);
padding: 0;
&:after {

9
package.json
View File

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