github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update style to 3.13.6

pull/802/head
wangxueliang 2019-03-30 16:06:06 +08:00
parent 26ea8409e1
commit 341374c44e
59 changed files with 1598 additions and 1409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,8 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
user-select: none;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
user-select: none;
a:hover { a:hover {
color: @link-hover-color; color: @link-hover-color;
@ -13,10 +13,10 @@
.@{calendar-prefix-cls}-decade-select, .@{calendar-prefix-cls}-decade-select,
.@{calendar-prefix-cls}-year-select, .@{calendar-prefix-cls}-year-select,
.@{calendar-prefix-cls}-month-select { .@{calendar-prefix-cls}-month-select {
padding: 0 2px;
font-weight: 500;
display: inline-block; display: inline-block;
padding: 0 2px;
color: @heading-color; color: @heading-color;
font-weight: 500;
line-height: 40px; line-height: 40px;
} }
@ -37,11 +37,11 @@
.@{calendar-prefix-cls}-next-year-btn { .@{calendar-prefix-cls}-next-year-btn {
position: absolute; position: absolute;
top: 0; top: 0;
color: @text-color-secondary;
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
padding: 0 5px;
font-size: 16px;
display: inline-block; display: inline-block;
padding: 0 5px;
color: @text-color-secondary;
font-size: 16px;
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
line-height: 40px; line-height: 40px;
} }
@ -50,7 +50,7 @@
.@{calendar-prefix-cls}-prev-year-btn { .@{calendar-prefix-cls}-prev-year-btn {
left: 7px; left: 7px;
&:after { &::after {
content: '«'; content: '«';
} }
} }
@ -60,7 +60,7 @@
.@{calendar-prefix-cls}-next-year-btn { .@{calendar-prefix-cls}-next-year-btn {
right: 7px; right: 7px;
&:after { &::after {
content: '»'; content: '»';
} }
} }
@ -68,7 +68,7 @@
.@{calendar-prefix-cls}-prev-month-btn { .@{calendar-prefix-cls}-prev-month-btn {
left: 29px; left: 29px;
&:after { &::after {
content: '‹'; content: '‹';
} }
} }
@ -76,7 +76,7 @@
.@{calendar-prefix-cls}-next-month-btn { .@{calendar-prefix-cls}-next-month-btn {
right: 29px; right: 29px;
&:after { &::after {
content: '›'; content: '›';
} }
} }
@ -84,17 +84,17 @@
.@{calendar-prefix-cls} { .@{calendar-prefix-cls} {
position: relative; position: relative;
outline: none;
width: 280px; width: 280px;
border: @border-width-base @border-style-base #fff;
list-style: none;
font-size: @font-size-base; font-size: @font-size-base;
text-align: left;
background-color: @component-background;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
background-clip: padding-box;
line-height: @line-height-base; line-height: @line-height-base;
text-align: left;
list-style: none;
background-color: @component-background;
background-clip: padding-box;
border: @border-width-base @border-style-base @border-color-inverse;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&-input-wrap { &-input-wrap {
height: 34px; height: 34px;
@ -103,13 +103,13 @@
} }
&-input { &-input {
border: 0;
width: 100%; width: 100%;
cursor: auto;
outline: 0;
height: 22px; height: 22px;
color: @input-color; color: @input-color;
background: @input-bg; background: @input-bg;
border: 0;
outline: 0;
cursor: auto;
.placeholder; .placeholder;
} }
@ -130,28 +130,28 @@
} }
table { table {
border-collapse: collapse; width: 100%;
max-width: 100%; max-width: 100%;
background-color: transparent; background-color: transparent;
width: 100%; border-collapse: collapse;
} }
table, table,
th, th,
td { td {
border: 0;
text-align: center; text-align: center;
border: 0;
} }
&-calendar-table { &-calendar-table {
border-spacing: 0;
margin-bottom: 0; margin-bottom: 0;
border-spacing: 0;
} }
&-column-header { &-column-header {
line-height: 18px;
width: 33px; width: 33px;
padding: 6px 0; padding: 6px 0;
line-height: 18px;
text-align: center; text-align: center;
.@{calendar-prefix-cls}-column-header-inner { .@{calendar-prefix-cls}-column-header-inner {
display: block; display: block;
@ -166,26 +166,27 @@
} }
&-cell { &-cell {
padding: 3px 0;
height: 30px; height: 30px;
padding: 3px 0;
} }
&-date { &-date {
display: block; display: block;
margin: 0 auto;
color: @text-color;
border-radius: @border-radius-sm;
width: 24px; width: 24px;
height: 24px; height: 24px;
line-height: 22px; margin: 0 auto;
border: @border-width-base @border-style-base transparent;
padding: 0; padding: 0;
background: transparent; color: @text-color;
line-height: 22px;
text-align: center; text-align: center;
background: transparent;
border: @border-width-base @border-style-base transparent;
border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
&-panel { &-panel {
position: relative; position: relative;
outline: none;
} }
&:hover { &:hover {
@ -194,15 +195,15 @@
} }
&:active { &:active {
color: #fff; color: @text-color-inverse;
background: @primary-5; background: @primary-5;
} }
} }
&-today &-date { &-today &-date {
border-color: @primary-color;
font-weight: bold;
color: @primary-color; color: @primary-color;
font-weight: bold;
border-color: @primary-color;
} }
&-last-month-cell &-date, &-last-month-cell &-date,
@ -218,8 +219,8 @@
&-selected-start-date, &-selected-start-date,
&-selected-end-date { &-selected-end-date {
.@{calendar-prefix-cls}-date { .@{calendar-prefix-cls}-date {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
&:hover { &:hover {
@ -229,12 +230,12 @@
} }
&-disabled-cell &-date { &-disabled-cell &-date {
cursor: not-allowed;
color: #bcbcbc;
background: @disabled-bg;
border-radius: 0;
width: auto; width: auto;
color: @disabled-color;
background: @disabled-bg;
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
border-radius: 0;
cursor: not-allowed;
&:hover { &:hover {
background: @disabled-bg; background: @disabled-bg;
@ -244,15 +245,15 @@
position: relative; position: relative;
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
&:before { &::before {
content: ' ';
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 5px; left: 5px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: @border-width-base @border-style-base #bcbcbc; border: @border-width-base @border-style-base @disabled-color;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
content: ' ';
} }
} }
@ -267,15 +268,15 @@
} }
&-footer { &-footer {
border-top: @border-width-base @border-style-base @border-color-split;
line-height: 38px;
padding: 0 12px; padding: 0 12px;
line-height: 38px;
border-top: @border-width-base @border-style-base @border-color-split;
&:empty { &:empty {
border-top: 0; border-top: 0;
} }
&-btn { &-btn {
text-align: center;
display: block; display: block;
text-align: center;
} }
&-extra { &-extra {
text-align: left; text-align: left;
@ -285,8 +286,8 @@
.@{calendar-prefix-cls}-today-btn, .@{calendar-prefix-cls}-today-btn,
.@{calendar-prefix-cls}-clear-btn { .@{calendar-prefix-cls}-clear-btn {
display: inline-block; display: inline-block;
text-align: center;
margin: 0 0 0 8px; margin: 0 0 0 8px;
text-align: center;
&-disabled { &-disabled {
color: @disabled-color; color: @disabled-color;
cursor: not-allowed; cursor: not-allowed;
@ -297,30 +298,30 @@
} }
.@{calendar-prefix-cls}-clear-btn { .@{calendar-prefix-cls}-clear-btn {
display: none;
position: absolute; position: absolute;
top: 7px;
right: 5px; right: 5px;
text-indent: -76px; display: none;
overflow: hidden;
width: 20px; width: 20px;
height: 20px; height: 20px;
text-align: center;
line-height: 20px;
top: 7px;
margin: 0; margin: 0;
overflow: hidden;
line-height: 20px;
text-align: center;
text-indent: -76px;
} }
.@{calendar-prefix-cls}-clear-btn:after { .@{calendar-prefix-cls}-clear-btn::after {
font-size: @font-size-base;
color: @disabled-color;
display: inline-block; display: inline-block;
line-height: 1;
width: 20px; width: 20px;
color: @disabled-color;
font-size: @font-size-base;
line-height: 1;
text-indent: 43px; text-indent: 43px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.@{calendar-prefix-cls}-clear-btn:hover:after { .@{calendar-prefix-cls}-clear-btn:hover::after {
color: @text-color-secondary; color: @text-color-secondary;
} }
@ -330,12 +331,6 @@
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base); .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
line-height: @btn-height-sm - 2px; line-height: @btn-height-sm - 2px;
&-disabled { .button-disabled();
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
cursor: not-allowed;
&:hover {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
}
}
} }
} }

33
components/date-picker/style/DecadePanel.less
View File

@ -4,7 +4,9 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: @zindex-picker-panel;
display: flex;
flex-direction: column;
background: @component-background; background: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
outline: none; outline: none;
@ -19,30 +21,37 @@
} }
.@{calendar-prefix-cls}-decade-panel-body { .@{calendar-prefix-cls}-decade-panel-body {
height: ~'calc(100% - 40px)'; flex: 1;
}
.@{calendar-prefix-cls}-decade-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
} }
.@{calendar-prefix-cls}-decade-panel-table { .@{calendar-prefix-cls}-decade-panel-table {
table-layout: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
table-layout: fixed;
border-collapse: separate; border-collapse: separate;
} }
.@{calendar-prefix-cls}-decade-panel-cell { .@{calendar-prefix-cls}-decade-panel-cell {
text-align: center;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.@{calendar-prefix-cls}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-decade {
display: inline-block; display: inline-block;
margin: 0 auto;
color: @text-color;
background: transparent;
text-align: center;
height: 24px; height: 24px;
line-height: 24px; margin: 0 auto;
padding: 0 6px; padding: 0 6px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
@ -53,19 +62,19 @@
} }
.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
&:hover { &:hover {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
} }
} }
.@{calendar-prefix-cls}-decade-panel-last-century-cell, .@{calendar-prefix-cls}-decade-panel-last-century-cell,
.@{calendar-prefix-cls}-decade-panel-next-century-cell { .@{calendar-prefix-cls}-decade-panel-next-century-cell {
.@{calendar-prefix-cls}-decade-panel-decade { .@{calendar-prefix-cls}-decade-panel-decade {
user-select: none;
color: @disabled-color; color: @disabled-color;
user-select: none;
} }
} }

35
components/date-picker/style/MonthPanel.less
View File

@ -4,12 +4,14 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: @zindex-picker-panel;
border-radius: @border-radius-base;
background: @component-background; background: @component-background;
border-radius: @border-radius-base;
outline: none; outline: none;
> div { > div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%; height: 100%;
} }
@ -24,23 +26,30 @@
} }
.@{calendar-prefix-cls}-month-panel-body { .@{calendar-prefix-cls}-month-panel-body {
height: ~'calc(100% - 40px)'; flex: 1;
}
.@{calendar-prefix-cls}-month-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
} }
.@{calendar-prefix-cls}-month-panel-table { .@{calendar-prefix-cls}-month-panel-table {
table-layout: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
table-layout: fixed;
border-collapse: separate; border-collapse: separate;
} }
.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month { .@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
&:hover { &:hover {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
} }
} }
@ -50,22 +59,22 @@
&-disabled .@{calendar-prefix-cls}-month-panel-month { &-disabled .@{calendar-prefix-cls}-month-panel-month {
&, &,
&:hover { &:hover {
cursor: not-allowed; color: @disabled-color;
color: #bcbcbc;
background: @disabled-bg; background: @disabled-bg;
cursor: not-allowed;
} }
} }
} }
.@{calendar-prefix-cls}-month-panel-month { .@{calendar-prefix-cls}-month-panel-month {
display: inline-block; display: inline-block;
margin: 0 auto;
color: @text-color;
background: transparent;
text-align: center;
height: 24px; height: 24px;
line-height: 24px; margin: 0 auto;
padding: 0 8px; padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;

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

@ -2,9 +2,9 @@
.@{calendar-prefix-cls}-picker-container { .@{calendar-prefix-cls}-picker-container {
.reset-component; .reset-component;
font-family: @font-family;
position: absolute; position: absolute;
z-index: @zindex-picker; z-index: @zindex-picker;
font-family: @font-family;
&.slide-up-enter.slide-up-enter-active&-placement-topLeft, &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
&.slide-up-enter.slide-up-enter-active&-placement-topRight, &.slide-up-enter.slide-up-enter-active&-placement-topRight,
@ -58,26 +58,26 @@
&-clear, &-clear,
&-icon { &-icon {
position: absolute; position: absolute;
top: 50%;
right: @control-padding-horizontal;
z-index: 1;
width: 14px; width: 14px;
height: 14px; height: 14px;
right: @control-padding-horizontal;
top: 50%;
margin-top: -7px; margin-top: -7px;
line-height: 14px;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 14px;
transition: all 0.3s; transition: all 0.3s;
user-select: none; user-select: none;
z-index: 1;
} }
&-clear { &-clear {
opacity: 0;
z-index: 2; z-index: 2;
font-size: @font-size-base;
color: @disabled-color; color: @disabled-color;
font-size: @font-size-base;
background: @input-bg; background: @input-bg;
pointer-events: none;
cursor: pointer; cursor: pointer;
opacity: 0;
pointer-events: none;
&:hover { &:hover {
color: @text-color-secondary; color: @text-color-secondary;
} }
@ -89,10 +89,9 @@
} }
&-icon { &-icon {
font-family: 'anticon';
font-size: @font-size-base;
color: @disabled-color;
display: inline-block; display: inline-block;
color: @disabled-color;
font-size: @font-size-base;
line-height: 1; line-height: 1;
} }

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

@ -1,12 +1,12 @@
@input-box-height: 34px; @input-box-height: 34px;
.@{calendar-prefix-cls}-range-picker-input { .@{calendar-prefix-cls}-range-picker-input {
width: 44%;
height: 99%;
text-align: center;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
height: 99%;
outline: 0; outline: 0;
width: 44%;
text-align: center;
.placeholder(); .placeholder();
&[disabled] { &[disabled] {
@ -15,10 +15,10 @@
} }
.@{calendar-prefix-cls}-range-picker-separator { .@{calendar-prefix-cls}-range-picker-separator {
color: @text-color-secondary;
width: 10px;
display: inline-block; display: inline-block;
width: 10px;
height: 100%; height: 100%;
color: @text-color-secondary;
vertical-align: top; vertical-align: top;
} }
@ -28,16 +28,16 @@
.@{calendar-prefix-cls}-date-panel { .@{calendar-prefix-cls}-date-panel {
&::after { &::after {
content: '.';
display: block; display: block;
height: 0;
clear: both; clear: both;
height: 0;
visibility: hidden; visibility: hidden;
content: '.';
} }
} }
&-part { &-part {
width: 50%;
position: relative; position: relative;
width: 50%;
} }
&-left { &-left {
@ -62,11 +62,11 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
width: 20px; width: 20px;
margin-left: -132px;
text-align: center;
height: @input-box-height; height: @input-box-height;
line-height: @input-box-height; margin-left: -132px;
color: @text-color-secondary; color: @text-color-secondary;
line-height: @input-box-height;
text-align: center;
} }
&-right .@{calendar-prefix-cls}-date-input-wrap { &-right .@{calendar-prefix-cls}-date-input-wrap {
@ -90,10 +90,10 @@
.@{calendar-timepicker-prefix-cls}-input { .@{calendar-timepicker-prefix-cls}-input {
.input; .input;
height: @input-height-sm; height: @input-height-sm;
padding-right: 0;
padding-left: 0;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
padding-left: 0;
padding-right: 0;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
@ -127,23 +127,23 @@
} }
.@{calendar-prefix-cls}-in-range-cell { .@{calendar-prefix-cls}-in-range-cell {
border-radius: 0;
position: relative; position: relative;
border-radius: 0;
> div { > div {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
&:before { &::before {
content: '';
display: block;
background: @item-active-bg;
border-radius: 0;
border: 0;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 0;
bottom: 4px; bottom: 4px;
left: 0; left: 0;
right: 0; display: block;
background: @item-active-bg;
border: 0;
border-radius: 0;
content: '';
} }
} }
@ -173,18 +173,18 @@
&.@{calendar-prefix-cls}-time { &.@{calendar-prefix-cls}-time {
.@{calendar-timepicker-prefix-cls} { .@{calendar-timepicker-prefix-cls} {
height: 207px;
width: 100%;
top: 68px; top: 68px;
z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1) z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
width: 100%;
height: 207px;
&-panel { &-panel {
height: 267px; height: 267px;
margin-top: -34px; margin-top: -34px;
} }
&-inner { &-inner {
padding-top: 40px;
height: 100%; height: 100%;
padding-top: 40px;
background: none; background: none;
} }
@ -205,8 +205,8 @@
margin-right: 8px; margin-right: 8px;
} }
.@{calendar-prefix-cls}-today-btn { .@{calendar-prefix-cls}-today-btn {
margin: 8px 12px;
height: 22px; height: 22px;
margin: 8px 12px;
line-height: 22px; line-height: 22px;
} }
} }

52
components/date-picker/style/TimePicker.less
View File

@ -1,27 +1,27 @@
.@{calendar-timepicker-prefix-cls} { .@{calendar-timepicker-prefix-cls} {
position: absolute; position: absolute;
width: 100%;
top: 40px; top: 40px;
width: 100%;
background-color: @component-background; background-color: @component-background;
&-panel { &-panel {
z-index: @zindex-picker;
position: absolute; position: absolute;
z-index: @zindex-picker;
width: 100%; width: 100%;
} }
&-inner { &-inner {
display: inline-block;
position: relative; position: relative;
outline: none; display: inline-block;
list-style: none; width: 100%;
overflow: hidden;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 1.5;
text-align: left; text-align: left;
list-style: none;
background-color: @component-background; background-color: @component-background;
background-clip: padding-box; background-clip: padding-box;
line-height: 1.5; outline: none;
overflow: hidden;
width: 100%;
} }
&-combobox { &-combobox {
width: 100%; width: 100%;
@ -46,21 +46,21 @@
} }
&-select { &-select {
position: relative; // Fix chrome weird render bug
float: left; float: left;
box-sizing: border-box;
height: 226px;
overflow: hidden;
font-size: @font-size-base; font-size: @font-size-base;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
box-sizing: border-box;
overflow: hidden;
position: relative; // Fix chrome weird render bug
height: 226px;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
} }
&:first-child { &:first-child {
border-left: 0;
margin-left: 0; margin-left: 0;
border-left: 0;
} }
&:last-child { &:last-child {
@ -68,31 +68,31 @@
} }
ul { ul {
list-style: none;
box-sizing: border-box; box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%; width: 100%;
max-height: 206px; max-height: 206px;
margin: 0;
padding: 0;
list-style: none;
} }
li { li {
padding-left: 32px;
list-style: none;
box-sizing: content-box; box-sizing: content-box;
margin: 0;
width: 100%; width: 100%;
height: 24px; height: 24px;
margin: 0;
padding-left: 32px;
line-height: 24px; line-height: 24px;
list-style: none;
cursor: pointer; cursor: pointer;
user-select: none;
transition: background 0.3s ease; transition: background 0.3s ease;
user-select: none;
} }
li:last-child:after { li:last-child::after {
content: '';
height: 202px;
display: block; display: block;
height: 202px;
content: '';
} }
li:hover { li:hover {
@ -100,8 +100,8 @@
} }
li&-option-selected { li&-option-selected {
background: @time-picker-selected-bg;
font-weight: bold; font-weight: bold;
background: @time-picker-selected-bg;
} }
li&-option-disabled { li&-option-disabled {
@ -116,10 +116,10 @@
.@{calendar-prefix-cls}-time { .@{calendar-prefix-cls}-time {
.@{calendar-prefix-cls}-day-select { .@{calendar-prefix-cls}-day-select {
padding: 0 2px;
font-weight: 500;
display: inline-block; display: inline-block;
padding: 0 2px;
color: @heading-color; color: @heading-color;
font-weight: 500;
line-height: 34px; line-height: 34px;
} }

6
components/date-picker/style/WeekPicker.less
View File

@ -3,19 +3,19 @@
opacity: 0.5; opacity: 0.5;
} }
.@{calendar-prefix-cls}-body tr { .@{calendar-prefix-cls}-body tr {
transition: all 0.3s;
cursor: pointer; cursor: pointer;
transition: all 0.3s;
&:hover { &:hover {
background: @primary-1; background: @primary-1;
} }
&.@{calendar-prefix-cls}-active-week { &.@{calendar-prefix-cls}-active-week {
background: @primary-2;
font-weight: bold; font-weight: bold;
background: @primary-2;
} }
.@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date { .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
background: transparent;
color: @text-color; color: @text-color;
background: transparent;
} }
} }
} }

33
components/date-picker/style/YearPanel.less
View File

@ -4,12 +4,14 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: @zindex-picker-panel;
border-radius: @border-radius-base;
background: @component-background; background: @component-background;
border-radius: @border-radius-base;
outline: none; outline: none;
> div { > div {
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%; height: 100%;
} }
@ -24,13 +26,20 @@
} }
.@{calendar-prefix-cls}-year-panel-body { .@{calendar-prefix-cls}-year-panel-body {
height: ~'calc(100% - 40px)'; flex: 1;
}
.@{calendar-prefix-cls}-year-panel-footer {
border-top: @border-width-base @border-style-base @border-color-split;
.@{calendar-prefix-cls}-footer-extra {
padding: 0 12px;
}
} }
.@{calendar-prefix-cls}-year-panel-table { .@{calendar-prefix-cls}-year-panel-table {
table-layout: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
table-layout: fixed;
border-collapse: separate; border-collapse: separate;
} }
@ -40,13 +49,13 @@
.@{calendar-prefix-cls}-year-panel-year { .@{calendar-prefix-cls}-year-panel-year {
display: inline-block; display: inline-block;
margin: 0 auto;
color: @text-color;
background: transparent;
text-align: center;
height: 24px; height: 24px;
line-height: 24px; margin: 0 auto;
padding: 0 8px; padding: 0 8px;
color: @text-color;
line-height: 24px;
text-align: center;
background: transparent;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
transition: background 0.3s ease; transition: background 0.3s ease;
@ -57,19 +66,19 @@
} }
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year { .@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
&:hover { &:hover {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
} }
} }
.@{calendar-prefix-cls}-year-panel-last-decade-cell, .@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell { .@{calendar-prefix-cls}-year-panel-next-decade-cell {
.@{calendar-prefix-cls}-year-panel-year { .@{calendar-prefix-cls}-year-panel-year {
user-select: none;
color: @disabled-color; color: @disabled-color;
user-select: none;
} }
} }

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

@ -7,45 +7,45 @@
.reset-component; .reset-component;
background: @border-color-split; background: @border-color-split;
&, // for compatiable &, /* for compatiable */
&-vertical { &-vertical {
margin: 0 8px;
display: inline-block;
height: 0.9em;
width: 1px;
vertical-align: middle;
position: relative; position: relative;
top: -0.06em; top: -0.06em;
display: inline-block;
width: 1px;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
} }
&-horizontal { &-horizontal {
display: block; display: block;
height: 1px; clear: both;
width: 100%; width: 100%;
min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914 min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
height: 1px;
margin: 24px 0; margin: 24px 0;
clear: both;
} }
&-horizontal&-with-text, &-horizontal&-with-text,
&-horizontal&-with-text-left, &-horizontal&-with-text-left,
&-horizontal&-with-text-right { &-horizontal&-with-text-right {
display: table; display: table;
margin: 16px 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
background: transparent; background: transparent;
font-weight: 500; &::before,
color: @heading-color; &::after {
font-size: @font-size-lg;
margin: 16px 0;
&:before,
&:after {
content: '';
display: table-cell;
position: relative; position: relative;
top: 50%; top: 50%;
display: table-cell;
width: 50%; width: 50%;
border-top: 1px solid @border-color-split; border-top: 1px solid @border-color-split;
transform: translateY(50%); transform: translateY(50%);
content: '';
} }
} }
@ -58,22 +58,22 @@
} }
&-horizontal&-with-text-left { &-horizontal&-with-text-left {
&:before { &::before {
top: 50%; top: 50%;
width: 5%; width: 5%;
} }
&:after { &::after {
top: 50%; top: 50%;
width: 95%; width: 95%;
} }
} }
&-horizontal&-with-text-right { &-horizontal&-with-text-right {
&:before { &::before {
top: 50%; top: 50%;
width: 95%; width: 95%;
} }
&:after { &::after {
top: 50%; top: 50%;
width: 5%; width: 5%;
} }
@ -92,8 +92,8 @@
&-horizontal&-with-text-left&-dashed, &-horizontal&-with-text-left&-dashed,
&-horizontal&-with-text-right&-dashed { &-horizontal&-with-text-right&-dashed {
border-top: 0; border-top: 0;
&:before, &::before,
&:after { &::after {
border-style: dashed none none; border-style: dashed none none;
} }
} }

110
components/drawer/style/drawer.less
View File

@ -1,13 +1,17 @@
@import '../../style/themes/default'; @import '../../style/themes/default';
// Preserve the typo for compatibility
// https://github.com/ant-design/ant-design/issues/14628
@dawer-prefix-cls: ~'@{ant-prefix}-drawer'; @dawer-prefix-cls: ~'@{ant-prefix}-drawer';
.@{dawer-prefix-cls} { @drawer-prefix-cls: @dawer-prefix-cls;
.@{drawer-prefix-cls} {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: @zindex-modal;
width: 0%; width: 0%;
height: 100%; height: 100%;
z-index: @zindex-modal;
> * { > * {
transition: transform @animation-duration-slow @ease-base-in; transition: transform @animation-duration-slow @ease-base-in;
} }
@ -15,7 +19,7 @@
&-content-wrapper { &-content-wrapper {
position: fixed; position: fixed;
} }
.@{dawer-prefix-cls}-content { .@{drawer-prefix-cls}-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -23,31 +27,31 @@
&-right { &-right {
width: 0%; width: 0%;
height: 100%; height: 100%;
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
height: 100%; height: 100%;
} }
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
width: 100%; width: 100%;
} }
&.@{dawer-prefix-cls}-open.no-mask { &.@{drawer-prefix-cls}-open.no-mask {
width: 0%; width: 0%;
} }
} }
&-left { &-left {
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-right; box-shadow: @shadow-1-right;
} }
} }
} }
&-right { &-right {
.@{dawer-prefix-cls} { .@{drawer-prefix-cls} {
&-content-wrapper { &-content-wrapper {
right: 0; right: 0;
} }
} }
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-left; box-shadow: @shadow-1-left;
} }
} }
@ -57,103 +61,105 @@
&-bottom { &-bottom {
width: 100%; width: 100%;
height: 0%; height: 0%;
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
width: 100%; width: 100%;
} }
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
height: 100%; height: 100%;
} }
&.@{dawer-prefix-cls}-open.no-mask { &.@{drawer-prefix-cls}-open.no-mask {
height: 0%; height: 0%;
} }
} }
&-top { &-top {
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-down; box-shadow: @shadow-1-down;
} }
} }
} }
&-bottom { &-bottom {
.@{dawer-prefix-cls} { .@{drawer-prefix-cls} {
&-content-wrapper { &-content-wrapper {
bottom: 0; bottom: 0;
} }
} }
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper { .@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-up; box-shadow: @shadow-1-up;
} }
} }
} }
&.@{dawer-prefix-cls}-open { &.@{drawer-prefix-cls}-open {
.@{dawer-prefix-cls} { .@{drawer-prefix-cls} {
&-mask { &-mask {
opacity: 0.3;
height: 100%; height: 100%;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out; opacity: 0.3;
transition: none; transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
} }
} }
} }
&-title { &-title {
margin: 0; margin: 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: 22px; line-height: 22px;
font-weight: 500;
color: @heading-color;
} }
&-content { &-content {
position: relative; position: relative;
background-color: @component-background;
border: 0;
background-clip: padding-box;
z-index: 1; z-index: 1;
background-color: @component-background;
background-clip: padding-box;
border: 0;
} }
&-close { &-close {
cursor: pointer;
border: 0;
background: transparent;
position: absolute; position: absolute;
right: 0;
top: 0; top: 0;
z-index: 10; right: 0;
font-weight: 700; z-index: @zindex-popup-close;
line-height: 1;
text-decoration: none;
transition: color @animation-duration-slow;
color: @text-color-secondary;
outline: 0;
padding: 0;
&-x {
display: block; display: block;
font-style: normal;
text-align: center;
text-transform: none;
text-rendering: auto;
width: 56px; width: 56px;
height: 56px; height: 56px;
line-height: 56px; padding: 0;
color: @text-color-secondary;
font-weight: 700;
font-size: @font-size-lg; font-size: @font-size-lg;
} font-style: normal;
line-height: 56px;
text-align: center;
text-transform: none;
text-decoration: none;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
transition: color @animation-duration-slow;
text-rendering: auto;
&:focus, &:focus,
&:hover { &:hover {
color: #444; color: @icon-color-hover;
text-decoration: none; text-decoration: none;
} }
} }
&-header { &-header {
position: relative;
padding: 16px 24px; padding: 16px 24px;
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color; color: @text-color;
background: @component-background;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
}
&-header-no-title {
color: @text-color;
background: @component-background;
} }
&-body { &-body {
@ -167,8 +173,8 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 0; height: 0;
opacity: 0;
background-color: @modal-mask-bg; background-color: @modal-mask-bg;
opacity: 0;
filter: ~'alpha(opacity=50)'; filter: ~'alpha(opacity=50)';
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
} }

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

@ -6,19 +6,20 @@
.@{dropdown-prefix-cls} { .@{dropdown-prefix-cls} {
.reset-component; .reset-component;
position: absolute; position: absolute;
left: -9999px;
top: -9999px; top: -9999px;
left: -9999px;
z-index: @zindex-dropdown; z-index: @zindex-dropdown;
display: block; display: block;
&:before { &::before {
position: absolute; position: absolute;
top: -7px; top: -7px;
left: -7px;
right: 0; right: 0;
bottom: -7px; bottom: -7px;
content: ' '; left: -7px;
z-index: -9999;
opacity: 0.0001; opacity: 0.0001;
content: ' ';
} }
&-wrap { &-wrap {
@ -28,13 +29,13 @@
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
} }
.@{iconfont-css-prefix}-down:before { .@{iconfont-css-prefix}-down::before {
transition: transform 0.2s; transition: transform 0.2s;
} }
} }
&-wrap-open { &-wrap-open {
.@{iconfont-css-prefix}-down:before { .@{iconfont-css-prefix}-down::before {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
@ -45,21 +46,21 @@
} }
&-menu { &-menu {
outline: none;
position: relative; position: relative;
list-style-type: none;
padding: 4px 0;
margin: 0; margin: 0;
padding: 4px 0;
text-align: left; text-align: left;
list-style-type: none;
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
background-clip: padding-box; background-clip: padding-box;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
&-item-group-title { &-item-group-title {
color: @text-color-secondary;
padding: 5px @control-padding-horizontal; padding: 5px @control-padding-horizontal;
color: @text-color-secondary;
transition: all 0.3s; transition: all 0.3s;
} }
@ -74,16 +75,16 @@
&-item, &-item,
&-submenu-title { &-submenu-title {
padding: 5px @control-padding-horizontal;
margin: 0;
clear: both; clear: both;
font-size: @font-size-base; margin: 0;
font-weight: normal; padding: 5px @control-padding-horizontal;
color: @text-color; color: @text-color;
font-weight: normal;
font-size: @font-size-base;
line-height: 22px;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
line-height: 22px;
> .anticon:first-child { > .anticon:first-child {
min-width: 12px; min-width: 12px;
@ -91,10 +92,10 @@
} }
> a { > a {
color: @text-color;
display: block; display: block;
padding: 5px @control-padding-horizontal;
margin: -5px -@control-padding-horizontal; margin: -5px -@control-padding-horizontal;
padding: 5px @control-padding-horizontal;
color: @text-color;
transition: all 0.3s; transition: all 0.3s;
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -124,17 +125,17 @@
&-divider { &-divider {
height: 1px; height: 1px;
overflow: hidden;
background-color: @border-color-split;
line-height: 0;
margin: 4px 0; margin: 4px 0;
overflow: hidden;
line-height: 0;
background-color: @border-color-split;
} }
.@{dropdown-prefix-cls}-menu-submenu-arrow { .@{dropdown-prefix-cls}-menu-submenu-arrow {
position: absolute; position: absolute;
right: @padding-xs; right: @padding-xs;
&-icon { &-icon {
font-style: normal;
color: @text-color-secondary; color: @text-color-secondary;
font-style: normal;
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
} }
} }
@ -149,9 +150,9 @@
} }
&-submenu-vertical > & { &-submenu-vertical > & {
position: absolute;
top: 0; top: 0;
left: 100%; left: 100%;
position: absolute;
min-width: 100%; min-width: 100%;
margin-left: 4px; margin-left: 4px;
transform-origin: 0 0; transform-origin: 0 0;
@ -161,6 +162,8 @@
&, &,
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon { .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
color: @disabled-color; color: @disabled-color;
background-color: @component-background;
cursor: not-allowed;
} }
} }
} }
@ -207,8 +210,8 @@
white-space: nowrap; white-space: nowrap;
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) { &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
padding-left: @padding-xs;
padding-right: @padding-xs; padding-right: @padding-xs;
padding-left: @padding-xs;
} }
.@{iconfont-css-prefix}.@{iconfont-css-prefix}-down { .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
@ -225,11 +228,11 @@
.@{dropdown-prefix-cls}-menu-submenu-title, .@{dropdown-prefix-cls}-menu-submenu-title,
.@{dropdown-prefix-cls}-menu-item > a { .@{dropdown-prefix-cls}-menu-item > a {
color: @text-color-secondary-dark; color: @text-color-secondary-dark;
.@{dropdown-prefix-cls}-menu-submenu-arrow:after { .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
color: @text-color-secondary-dark; color: @text-color-secondary-dark;
} }
&:hover { &:hover {
color: #fff; color: @text-color-inverse;
background: transparent; background: transparent;
} }
} }
@ -237,8 +240,8 @@
&, &,
&:hover, &:hover,
> a { > a {
color: @text-color-inverse;
background: @primary-color; background: @primary-color;
color: #fff;
} }
} }
} }

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

@ -10,20 +10,25 @@
@form-component-max-height: @input-height-lg; @form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base; @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;
// Extends additional 1px to fix precision issue.
// https://github.com/ant-design/ant-design/issues/12803
// https://github.com/ant-design/ant-design/issues/8220
@form-explain-precision: 1px;
@form-explain-height: floor(@font-size-base * @line-height-base);
.@{form-prefix-cls} { .@{form-prefix-cls} {
.reset-component; .reset-component;
.reset-form; .reset-form;
} }
.@{form-prefix-cls}-item-required:before { .@{form-prefix-cls}-item-required::before {
display: inline-block; display: inline-block;
margin-right: 4px; margin-right: 4px;
content: '*';
font-family: SimSun;
line-height: 1;
font-size: @font-size-base;
color: @label-required-color; color: @label-required-color;
font-size: @font-size-base;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
.@{form-prefix-cls}-hide-required-mark & { .@{form-prefix-cls}-hide-required-mark & {
display: none; display: none;
} }
@ -65,8 +70,8 @@ input[type='checkbox'] {
position: relative; position: relative;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
vertical-align: top;
font-size: @font-size-base; font-size: @font-size-base;
vertical-align: top;
} }
} }
@ -75,8 +80,8 @@ input[type='checkbox'] {
vertical-align: top; vertical-align: top;
&-control { &-control {
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
position: relative; position: relative;
line-height: @form-component-max-height;
.clearfix; .clearfix;
} }
@ -85,31 +90,30 @@ input[type='checkbox'] {
} }
&-with-help { &-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
@form-help-margin-top;
} }
&-label { &-label {
text-align: right;
vertical-align: middle;
line-height: @form-component-max-height - 0.0001px;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
line-height: @form-component-max-height - 0.0001px;
white-space: nowrap; white-space: nowrap;
text-align: right;
vertical-align: middle;
label { label {
color: @label-color; color: @label-color;
&:after { &::after {
& when (@form-item-trailing-colon=true) { & when (@form-item-trailing-colon=true) {
content: ':'; content: ':';
} }
& when not (@form-item-trailing-colon=true) { & when not (@form-item-trailing-colon=true) {
content: ' '; content: ' ';
} }
margin: 0 8px 0 2px;
position: relative; position: relative;
top: -0.5px; top: -0.5px;
margin: 0 8px 0 2px;
} }
} }
} }
@ -118,20 +122,23 @@ input[type='checkbox'] {
margin: 2px 0 4px; margin: 2px 0 4px;
} }
&-no-colon &-label label:after { &-no-colon &-label label::after {
content: ' '; content: ' ';
} }
} }
.@{form-prefix-cls}-explain, .@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra { .@{form-prefix-cls}-extra {
color: @text-color-secondary;
// Magic tweak pixel number to float line-height diff in windows
// Fix https://github.com/ant-design/ant-design/issues/12803
line-height: @line-height-base + 0.024;
transition: color 0.3s @ease-out; // sync input color transition
margin-top: @form-help-margin-top;
clear: both; clear: both;
min-height: @form-explain-height + @form-explain-precision;
margin-top: @form-help-margin-top;
color: @text-color-secondary;
line-height: @line-height-base;
transition: color 0.3s @ease-out; // sync input color transition
}
.@{form-prefix-cls}-explain {
margin-bottom: -@form-explain-precision;
} }
.@{form-prefix-cls}-extra { .@{form-prefix-cls}-extra {
@ -218,10 +225,10 @@ form {
.@{ant-prefix}-radio-inline, .@{ant-prefix}-radio-inline,
.@{ant-prefix}-checkbox-inline { .@{ant-prefix}-checkbox-inline {
display: inline-block; display: inline-block;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
margin-left: 8px; margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
@ -261,30 +268,30 @@ form {
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243 // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group, :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
.@{ant-prefix}-input-group-wrapper { .@{ant-prefix}-input-group-wrapper {
display: inline-block;
vertical-align: middle;
position: relative; position: relative;
top: -1px; top: -1px;
display: inline-block;
vertical-align: middle;
} }
} }
// Input combined with select // Input combined with select
.@{ant-prefix}-input-group-wrap { .@{ant-prefix}-input-group-wrap {
.@{ant-prefix}-select-selection { .@{ant-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:hover { &:hover {
border-color: @border-color-base; border-color: @border-color-base;
} }
} }
.@{ant-prefix}-select-selection--single { .@{ant-prefix}-select-selection--single {
margin-left: -1px;
height: @input-height-lg; height: @input-height-lg;
background-color: #eee; margin-left: -1px;
background-color: fade(@black, 7%);
.@{ant-prefix}-select-selection__rendered { .@{ant-prefix}-select-selection__rendered {
padding-left: 8px;
padding-right: 25px; padding-right: 25px;
padding-left: 8px;
line-height: 30px; line-height: 30px;
} }
} }
@ -298,13 +305,14 @@ form {
// Form layout // Form layout
//== Vertical Form //== Vertical Form
.make-vertical-layout-label() { .make-vertical-layout-label() {
padding: @form-vertical-label-padding;
margin: @form-vertical-label-margin;
display: block; display: block;
text-align: left; margin: @form-vertical-label-margin;
padding: @form-vertical-label-padding;
line-height: @line-height-base; line-height: @line-height-base;
white-space: initial;
text-align: left;
label:after { label::after {
display: none; display: none;
} }
} }
@ -334,7 +342,10 @@ form {
.@{form-prefix-cls}-item-control { .@{form-prefix-cls}-item-control {
line-height: @line-height-base; line-height: @line-height-base;
} }
.@{form-prefix-cls}-explain, .@{form-prefix-cls}-explain {
margin-top: 2px;
margin-bottom: -4px - @form-explain-precision;
}
.@{form-prefix-cls}-extra { .@{form-prefix-cls}-extra {
margin-top: 2px; margin-top: 2px;
margin-bottom: -4px; margin-bottom: -4px;
@ -380,7 +391,7 @@ form {
margin-bottom: 0; margin-bottom: 0;
&-with-help { &-with-help {
margin-bottom: 24px; margin-bottom: @form-item-margin-bottom;
} }
> .@{form-prefix-cls}-item-control-wrapper, > .@{form-prefix-cls}-item-control-wrapper,
@ -408,16 +419,16 @@ form {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
visibility: visible; z-index: 1;
pointer-events: none;
width: @form-component-height; width: @form-component-height;
height: 20px; height: 20px;
line-height: 20px;
margin-top: -10px; margin-top: -10px;
text-align: center;
font-size: @form-feedback-icon-size; font-size: @form-feedback-icon-size;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back; animation: zoomIn 0.3s @ease-out-back;
z-index: 1; pointer-events: none;
& svg { & svg {
position: absolute; position: absolute;
@ -432,8 +443,8 @@ form {
.has-success { .has-success {
&.has-feedback .@{form-prefix-cls}-item-children-icon { &.has-feedback .@{form-prefix-cls}-item-children-icon {
animation-name: diffZoomIn1 !important;
color: @success-color; color: @success-color;
animation-name: diffZoomIn1 !important;
} }
} }
@ -460,9 +471,9 @@ form {
} }
// arrow and icon // arrow and icon
.@{ant-prefix}-calendar-picker-icon:after, .@{ant-prefix}-calendar-picker-icon::after,
.@{ant-prefix}-time-picker-icon:after, .@{ant-prefix}-time-picker-icon::after,
.@{ant-prefix}-picker-icon:after, .@{ant-prefix}-picker-icon::after,
.@{ant-prefix}-select-arrow, .@{ant-prefix}-select-arrow,
.@{ant-prefix}-cascader-picker-arrow { .@{ant-prefix}-cascader-picker-arrow {
color: @warning-color; color: @warning-color;
@ -522,9 +533,9 @@ form {
} }
// arrow and icon // arrow and icon
.@{ant-prefix}-calendar-picker-icon:after, .@{ant-prefix}-calendar-picker-icon::after,
.@{ant-prefix}-time-picker-icon:after, .@{ant-prefix}-time-picker-icon::after,
.@{ant-prefix}-picker-icon:after, .@{ant-prefix}-picker-icon::after,
.@{ant-prefix}-select-arrow, .@{ant-prefix}-select-arrow,
.@{ant-prefix}-cascader-picker-arrow { .@{ant-prefix}-cascader-picker-arrow {
color: @error-color; color: @error-color;
@ -591,8 +602,7 @@ form {
margin-bottom: @form-item-margin-bottom; margin-bottom: @form-item-margin-bottom;
&-with-help { &-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base - margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
@form-help-margin-top;
} }
} }
} }
@ -613,19 +623,19 @@ form {
@keyframes antShowHelpIn { @keyframes antShowHelpIn {
0% { 0% {
opacity: 0;
transform: translateY(-5px); transform: translateY(-5px);
opacity: 0;
} }
100% { 100% {
opacity: 1;
transform: translateY(0); transform: translateY(0);
opacity: 1;
} }
} }
@keyframes antShowHelpOut { @keyframes antShowHelpOut {
to { to {
opacity: 0;
transform: translateY(-5px); transform: translateY(-5px);
opacity: 0;
} }
} }

8
components/form/style/mixin.less
View File

@ -49,8 +49,8 @@
.@{ant-prefix}-input-group-addon { .@{ant-prefix}-input-group-addon {
color: @text-color; color: @text-color;
border-color: @border-color;
background-color: @background-color; background-color: @background-color;
border-color: @border-color;
} }
.has-feedback { .has-feedback {
@ -65,11 +65,11 @@
legend { legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0;
color: @text-color-secondary;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: inherit; line-height: inherit;
color: @text-color-secondary;
border: 0; border: 0;
border-bottom: @border-width-base @border-style-base @border-color-base; border-bottom: @border-width-base @border-style-base @border-color-base;
} }
@ -117,8 +117,8 @@
output { output {
display: block; display: block;
padding-top: 15px; padding-top: 15px;
color: @input-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @input-color;
} }
} }

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

@ -13,8 +13,8 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
&:before, &::before,
&:after { &::after {
display: flex; display: flex;
} }
} }

8
components/grid/style/mixin.less
View File

@ -4,9 +4,9 @@
// ------------------------ // ------------------------
.make-row(@gutter: @grid-gutter-width) { .make-row(@gutter: @grid-gutter-width) {
position: relative; position: relative;
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
height: auto; height: auto;
margin-right: (@gutter / -2);
margin-left: (@gutter / -2);
.clearfix; .clearfix;
} }
@ -24,8 +24,8 @@
position: relative; position: relative;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width / 2);
} }
} }
.col(1); .col(1);
@ -45,8 +45,8 @@
.col(@index, @list) when (@index > @grid-columns) { .col(@index, @list) when (@index > @grid-columns) {
// terminal // terminal
@{list} { @{list} {
float: left;
flex: 0 0 auto; flex: 0 0 auto;
float: left;
} }
} }
.col(1); // kickstart it .col(1); // kickstart it

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

@ -7,26 +7,26 @@
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
.reset-component; .reset-component;
.input; .input;
display: inline-block;
width: 90px;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block;
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base; border-radius: @border-radius-base;
width: 90px;
&-handler { &-handler {
text-align: center; position: relative;
line-height: 0; display: block;
width: 100%;
height: 50%; height: 50%;
overflow: hidden; overflow: hidden;
color: @text-color-secondary; color: @text-color-secondary;
position: relative;
transition: all 0.1s linear;
display: block;
width: 100%;
font-weight: bold; font-weight: bold;
line-height: 0;
text-align: center;
transition: all 0.1s linear;
&:active { &:active {
background: #f4f4f4; background: @input-number-handler-active-bg;
} }
&:hover &-up-inner, &:hover &-up-inner,
&:hover &-down-inner { &:hover &-down-inner {
@ -37,15 +37,14 @@
&-handler-up-inner, &-handler-up-inner,
&-handler-down-inner { &-handler-down-inner {
.iconfont-mixin(); .iconfont-mixin();
line-height: 12px;
user-select: none;
position: absolute; position: absolute;
right: 4px;
width: 12px; width: 12px;
height: 12px; height: 12px;
transition: all 0.1s linear;
.iconfont-size-under-12px(7px);
right: 4px;
color: @text-color-secondary; color: @text-color-secondary;
line-height: 12px;
transition: all 0.1s linear;
user-select: none;
} }
&:hover { &:hover {
@ -68,15 +67,15 @@
&-input { &-input {
width: 100%; width: 100%;
text-align: left;
outline: 0;
-moz-appearance: textfield;
height: @input-height-base - 2px; height: @input-height-base - 2px;
transition: all 0.3s linear; padding: 0 @control-padding-horizontal - 1px;
text-align: left;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
padding: 0 @control-padding-horizontal - 1px; outline: 0;
transition: all 0.3s linear;
-moz-appearance: textfield;
.placeholder(); .placeholder();
} }
@ -99,16 +98,28 @@
} }
&-handler-wrap { &-handler-wrap {
border-left: @border-width-base @border-style-base @border-color-base;
width: 22px;
height: 100%;
background: @component-background;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
opacity: 0; width: 22px;
height: 100%;
background: @component-background;
border-left: @border-width-base @border-style-base @border-color-base;
border-radius: 0 @border-radius-base @border-radius-base 0; border-radius: 0 @border-radius-base @border-radius-base 0;
opacity: 0;
transition: opacity 0.24s linear 0.1s; transition: opacity 0.24s linear 0.1s;
// Fix input number inside Menu makes icon too large
// We arise the selector priority by nest selector here
// https://github.com/ant-design/ant-design/issues/14367
.@{input-number-prefix-cls}-handler {
.@{input-number-prefix-cls}-handler-up-inner,
.@{input-number-prefix-cls}-handler-down-inner {
.iconfont-size-under-12px(7px);
min-width: auto;
margin-right: 0;
}
}
} }
&-handler-wrap:hover &-handler { &-handler-wrap:hover &-handler {
@ -132,8 +143,8 @@
} }
&-handler-down { &-handler-down {
border-top: @border-width-base @border-style-base @border-color-base;
top: 0; top: 0;
border-top: @border-width-base @border-style-base @border-color-base;
cursor: pointer; cursor: pointer;
&-inner { &-inner {
top: 50%; top: 50%;

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

@ -14,8 +14,9 @@
.input-group(~'@{ant-prefix}-input'); .input-group(~'@{ant-prefix}-input');
&-wrapper { &-wrapper {
display: inline-block; display: inline-block;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
width: 100%; width: 100%;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
} }
} }
@ -30,4 +31,12 @@
} }
} }
.@{ant-prefix}-input-password-icon {
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #333;
}
}
@import './search-input'; @import './search-input';

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

@ -5,23 +5,23 @@
// size mixins for input // size mixins for input
.input-lg() { .input-lg() {
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
height: @input-height-lg; height: @input-height-lg;
padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
font-size: @font-size-lg; font-size: @font-size-lg;
} }
.input-sm() { .input-sm() {
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
height: @input-height-sm; height: @input-height-sm;
padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
} }
// input status // input status
// == when focus or actived // == when focus or actived
.active(@color: @outline-color) { .active(@color: @outline-color) {
border-color: ~`colorPalette('@{color}', 5) `; border-color: ~`colorPalette('@{color}', 5) `;
border-right-width: @border-width-base !important;
outline: 0; outline: 0;
box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%); box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
border-right-width: @border-width-base !important;
} }
// == when hoverd // == when hoverd
@ -31,10 +31,10 @@
} }
.disabled() { .disabled() {
background-color: @input-disabled-bg;
opacity: 1;
cursor: not-allowed;
color: @disabled-color; color: @disabled-color;
background-color: @input-disabled-bg;
cursor: not-allowed;
opacity: 1;
&:hover { &:hover {
.hover(@input-border-color); .hover(@input-border-color);
} }
@ -44,18 +44,18 @@
.input() { .input() {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
width: 100%; width: 100%;
height: @input-height-base; height: @input-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
color: @input-color;
background-color: @input-bg; background-color: @input-bg;
background-image: none; background-image: none;
border: @border-width-base @border-style-base @input-border-color; border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.placeholder(); // Reset placeholder
transition: all 0.3s; transition: all 0.3s;
.placeholder(); // Reset placeholder
&:hover { &:hover {
.hover(); .hover();
@ -73,9 +73,9 @@
textarea& { textarea& {
max-width: 100%; // prevent textearea resize from coming out of its container max-width: 100%; // prevent textearea resize from coming out of its container
height: auto; height: auto;
min-height: @input-height-base;
vertical-align: bottom; vertical-align: bottom;
transition: all 0.3s, height 0s; transition: all 0.3s, height 0s;
min-height: @input-height-base;
} }
// Size // Size
@ -92,15 +92,15 @@
.input-group(@inputClass) { .input-group(@inputClass) {
position: relative; position: relative;
display: table; display: table;
width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
width: 100%;
// Undo padding and float of grid classes // Undo padding and float of grid classes
&[class*='col-'] { &[class*='col-'] {
float: none; float: none;
padding-left: 0;
padding-right: 0; padding-right: 0;
padding-left: 0;
} }
> [class*='col-'] { > [class*='col-'] {
@ -135,6 +135,7 @@
float: left; float: left;
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
text-align: inherit;
&:focus { &:focus {
z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
border-right-width: 1px; border-right-width: 1px;
@ -146,16 +147,16 @@
} }
&-addon { &-addon {
position: relative;
padding: 0 @input-padding-horizontal-base; padding: 0 @input-padding-horizontal-base;
font-size: @font-size-base;
font-weight: normal;
line-height: 1;
color: @input-color; color: @input-color;
font-weight: normal;
font-size: @font-size-base;
line-height: 1;
text-align: center; text-align: center;
background-color: @input-addon-bg; background-color: @input-addon-bg;
border: @border-width-base @border-style-base @input-border-color; border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
position: relative;
transition: all 0.3s; transition: all 0.3s;
// Reset Select's style in addon // Reset Select's style in addon
@ -163,8 +164,8 @@
margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base); margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
.@{ant-prefix}-select-selection { .@{ant-prefix}-select-selection {
background-color: inherit;
margin: -1px; margin: -1px;
background-color: inherit;
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
box-shadow: none; box-shadow: none;
} }
@ -179,38 +180,38 @@
// Expand addon icon click area // Expand addon icon click area
// https://github.com/ant-design/ant-design/issues/3714 // https://github.com/ant-design/ant-design/issues/3714
> i:only-child:after { > i:only-child::after {
position: absolute; position: absolute;
content: '';
top: 0; top: 0;
left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
content: '';
} }
} }
// Reset rounded corners // Reset rounded corners
> .@{inputClass}:first-child, > .@{inputClass}:first-child,
&-addon:first-child { &-addon:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
// Reset Select's style in addon // Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selection { .@{ant-prefix}-select .@{ant-prefix}-select-selection {
border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
} }
> .@{inputClass}-affix-wrapper { > .@{inputClass}-affix-wrapper {
&:not(:first-child) .@{inputClass} { &:not(:first-child) .@{inputClass} {
border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
&:not(:last-child) .@{inputClass} { &:not(:last-child) .@{inputClass} {
border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
} }
} }
@ -223,13 +224,13 @@
> .@{inputClass}:last-child, > .@{inputClass}:last-child,
&-addon:last-child { &-addon:last-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
// Reset Select's style in addon // Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selection { .@{ant-prefix}-select .@{ant-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
} }
} }
@ -255,8 +256,8 @@
.@{inputClass}-affix-wrapper { .@{inputClass}-affix-wrapper {
display: table-cell; display: table-cell;
width: 100%;
float: left; float: left;
width: 100%;
} }
&&-compact { &&-compact {
@ -278,15 +279,15 @@
} }
& > * { & > * {
border-radius: 0;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
float: none;
display: inline-block; display: inline-block;
float: none;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
border-radius: 0;
} }
& > *:not(:last-child) { & > *:not(:last-child) {
border-right-width: @border-width-base;
margin-right: -@border-width-base; margin-right: -@border-width-base;
border-right-width: @border-width-base;
} }
// Undo float for .ant-input-group .ant-input // Undo float for .ant-input-group .ant-input
@ -301,8 +302,8 @@
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor, & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input { & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
border-radius: 0;
border-right-width: @border-width-base; border-right-width: @border-width-base;
border-radius: 0;
&:hover { &:hover {
z-index: 1; z-index: 1;
} }
@ -330,9 +331,9 @@
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input, & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor, & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
& > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input { & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base; border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base; border-bottom-right-radius: @border-radius-base;
border-right-width: @border-width-base;
} }
// https://github.com/ant-design/ant-design/issues/12493 // https://github.com/ant-design/ant-design/issues/12493
@ -346,6 +347,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
text-align: start;
&:hover .@{inputClass}:not(.@{inputClass}-disabled) { &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
.hover(); .hover();
@ -353,6 +355,7 @@
.@{inputClass} { .@{inputClass} {
position: relative; position: relative;
text-align: inherit;
} }
.@{inputClass}-prefix, .@{inputClass}-prefix,
@ -360,9 +363,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
z-index: 2; z-index: 2;
transform: translateY(-50%);
line-height: 0;
color: @input-color; color: @input-color;
line-height: 0;
transform: translateY(-50%);
:not(.anticon) { :not(.anticon) {
line-height: @line-height-base; line-height: @line-height-base;
} }

21
components/input/style/search-input.less
View File

@ -11,27 +11,20 @@
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: #333; color: fade(@black, 80%);
} }
} }
&:not(&-small) > .@{ant-prefix}-input-suffix { &-enter-button {
right: @control-padding-horizontal; .@{ant-prefix}-input-group-addon {
} padding: 0;
border: 0;
> .@{ant-prefix}-input-suffix > .@{search-prefix}-button { .@{search-prefix}-button {
width: 100%;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
> .@{iconfont-css-prefix}-search {
font-size: @font-size-lg;
} }
} }
&.@{search-prefix}-enter-button > .@{ant-prefix}-input {
padding-right: 46px;
}
&.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
right: 0;
} }
} }

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

@ -5,11 +5,11 @@
.@{layout-prefix-cls} { .@{layout-prefix-cls} {
display: flex; display: flex;
flex-direction: column;
flex: auto; flex: auto;
background: @layout-body-background; flex-direction: column;
/* fix firefox can't set height smaller than content on flex item */ /* fix firefox can't set height smaller than content on flex item */
min-height: 0; min-height: 0;
background: @layout-body-background;
&, &,
* { * {
@ -30,17 +30,17 @@
} }
&-header { &-header {
background: @layout-header-background;
padding: @layout-header-padding;
height: @layout-header-height; height: @layout-header-height;
padding: @layout-header-padding;
line-height: @layout-header-height; line-height: @layout-header-height;
background: @layout-header-background;
} }
&-footer { &-footer {
background: @layout-footer-background;
padding: @layout-footer-padding; padding: @layout-footer-padding;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
background: @layout-footer-background;
} }
&-content { &-content {
@ -50,20 +50,20 @@
} }
&-sider { &-sider {
transition: all 0.2s;
position: relative; position: relative;
background: @layout-sider-background;
/* fix firefox can't set width smaller than content on flex item */ /* fix firefox can't set width smaller than content on flex item */
min-width: 0; min-width: 0;
background: @layout-sider-background;
transition: all 0.2s;
&-children { &-children {
height: 100%; height: 100%;
margin-top: -0.1px;
// Hack for fixing margin collaspe bug // Hack for fixing margin collaspe bug
// https://github.com/ant-design/ant-design/issues/7967 // https://github.com/ant-design/ant-design/issues/7967
// solution from https://stackoverflow.com/a/33132624/3040605 // solution from https://stackoverflow.com/a/33132624/3040605
padding-top: 0.1px; padding-top: 0.1px;
margin-top: -0.1px;
} }
&-has-trigger { &-has-trigger {
@ -76,14 +76,14 @@
&-trigger { &-trigger {
position: fixed; position: fixed;
text-align: center;
bottom: 0; bottom: 0;
cursor: pointer;
height: @layout-trigger-height;
line-height: @layout-trigger-height;
color: @layout-trigger-color;
background: @layout-trigger-background;
z-index: 1; z-index: 1;
height: @layout-trigger-height;
color: @layout-trigger-color;
line-height: @layout-trigger-height;
text-align: center;
background: @layout-trigger-background;
cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
@ -96,13 +96,13 @@
position: absolute; position: absolute;
top: @layout-header-height; top: @layout-header-height;
right: -@layout-zero-trigger-width; right: -@layout-zero-trigger-width;
text-align: center;
width: @layout-zero-trigger-width; width: @layout-zero-trigger-width;
height: @layout-zero-trigger-height; height: @layout-zero-trigger-height;
line-height: @layout-zero-trigger-height;
background: @layout-sider-background;
color: @layout-trigger-color; 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;
border-radius: 0 @border-radius-base @border-radius-base 0; border-radius: 0 @border-radius-base @border-radius-base 0;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease; transition: background 0.3s ease;
@ -110,6 +110,10 @@
&:hover { &:hover {
background: tint(@layout-sider-background, 10%); background: tint(@layout-sider-background, 10%);
} }
&-right {
left: -@layout-zero-trigger-width;
}
} }
} }
} }

12
components/list/style/bordered.less
View File

@ -1,20 +1,20 @@
.@{list-prefix-cls}-bordered { .@{list-prefix-cls}-bordered {
border-radius: @border-radius-base;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-radius: @border-radius-base;
.@{list-prefix-cls}-header { .@{list-prefix-cls}-header {
padding-left: 24px;
padding-right: 24px; padding-right: 24px;
padding-left: 24px;
} }
.@{list-prefix-cls}-footer { .@{list-prefix-cls}-footer {
padding-left: 24px;
padding-right: 24px; padding-right: 24px;
padding-left: 24px;
} }
.@{list-prefix-cls}-item { .@{list-prefix-cls}-item {
border-bottom: 1px solid @border-color-split;
padding-left: 24px;
padding-right: 24px; padding-right: 24px;
padding-left: 24px;
border-bottom: 1px solid @border-color-split;
} }
.@{list-prefix-cls}-pagination { .@{list-prefix-cls}-pagination {
@ -23,8 +23,8 @@
&.@{list-prefix-cls}-sm { &.@{list-prefix-cls}-sm {
.@{list-prefix-cls}-item { .@{list-prefix-cls}-item {
padding-left: 16px;
padding-right: 16px; padding-right: 16px;
padding-left: 16px;
} }
.@{list-prefix-cls}-header, .@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer { .@{list-prefix-cls}-footer {

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

@ -17,28 +17,28 @@
margin-top: 12px; margin-top: 12px;
text-align: center; text-align: center;
button { button {
padding-left: 32px;
padding-right: 32px; padding-right: 32px;
padding-left: 32px;
} }
} }
&-spin { &-spin {
text-align: center;
min-height: 40px; min-height: 40px;
text-align: center;
} }
&-empty-text { &-empty-text {
padding: @list-empty-text-padding;
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base; font-size: @font-size-base;
padding: @list-empty-text-padding;
text-align: center; text-align: center;
} }
&-item { &-item {
align-items: center;
display: flex; display: flex;
align-items: center;
padding: @list-item-padding; padding: @list-item-padding;
&-meta { &-meta {
align-items: flex-start;
display: flex; display: flex;
flex: 1; flex: 1;
align-items: flex-start;
font-size: 0; font-size: 0;
&-avatar { &-avatar {
margin-right: @list-item-meta-avatar-margin-right; margin-right: @list-item-meta-avatar-margin-right;
@ -47,8 +47,8 @@
flex: 1 0; flex: 1 0;
} }
&-title { &-title {
color: @text-color;
margin-bottom: 4px; margin-bottom: 4px;
color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 22px; line-height: 22px;
> a { > a {
@ -74,32 +74,32 @@
justify-content: flex-start; justify-content: flex-start;
} }
&-action { &-action {
font-size: 0;
flex: 0 0 auto; flex: 0 0 auto;
margin-left: 48px; margin-left: 48px;
padding: 0; padding: 0;
font-size: 0;
list-style: none; list-style: none;
& > li { & > li {
display: inline-block;
color: @text-color-secondary;
cursor: pointer;
padding: 0 8px;
position: relative; position: relative;
display: inline-block;
padding: 0 8px;
color: @text-color-secondary;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
cursor: pointer;
} }
& > li:first-child { & > li:first-child {
padding-left: 0; padding-left: 0;
} }
&-split { &-split {
background-color: @border-color-split;
margin-top: -7px;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 0; right: 0;
width: 1px; width: 1px;
height: 14px; height: 14px;
margin-top: -7px;
background-color: @border-color-split;
} }
} }
&-main { &-main {
@ -108,6 +108,14 @@
} }
} }
&-header {
background: @list-header-background;
}
&-footer {
background: @list-footer-background;
}
&-header, &-header,
&-footer { &-footer {
padding-top: 12px; padding-top: 12px;
@ -115,8 +123,8 @@
} }
&-empty { &-empty {
color: @text-color-secondary;
padding: 16px 0; padding: 16px 0;
color: @text-color-secondary;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
@ -165,17 +173,17 @@
&-meta { &-meta {
margin-bottom: @list-item-meta-margin-bottom; margin-bottom: @list-item-meta-margin-bottom;
&-title { &-title {
color: @heading-color;
margin-bottom: @list-item-meta-title-margin-bottom; margin-bottom: @list-item-meta-title-margin-bottom;
color: @heading-color;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: 24px; line-height: 24px;
} }
} }
&-content { &-content {
display: block; display: block;
margin: @list-item-content-margin;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
margin: @list-item-content-margin;
} }
&-action { &-action {
margin-left: auto; margin-left: auto;
@ -189,10 +197,10 @@
} }
&-grid &-item { &-grid &-item {
border-bottom: none; margin-bottom: 16px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 16px; border-bottom: none;
&-content { &-content {
display: block; display: block;
max-width: 100%; max-width: 100%;

34
components/menu/style/dark.less
View File

@ -7,8 +7,8 @@
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: 0.45; opacity: 0.45;
transition: all 0.3s; transition: all 0.3s;
&:after, &::after,
&:before { &::before {
background: @menu-dark-arrow-color; background: @menu-dark-arrow-color;
} }
} }
@ -20,7 +20,7 @@
&-dark &-inline&-sub { &-dark &-inline&-sub {
background: @menu-dark-submenu-bg; background: @menu-dark-submenu-bg;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset; box-shadow: 0 2px 8px fade(@black, 45%) inset;
} }
&-dark&-horizontal { &-dark&-horizontal {
@ -29,13 +29,13 @@
&-dark&-horizontal > &-item, &-dark&-horizontal > &-item,
&-dark&-horizontal > &-submenu { &-dark&-horizontal > &-submenu {
border-color: @menu-dark-bg;
border-bottom: 0;
top: 0; top: 0;
margin-top: 0; margin-top: 0;
border-color: @menu-dark-bg;
border-bottom: 0;
} }
&-dark&-horizontal > &-item > a:before { &-dark&-horizontal > &-item > a::before {
bottom: 0; bottom: 0;
} }
@ -56,10 +56,10 @@
&-dark&-vertical &-item, &-dark&-vertical &-item,
&-dark&-vertical-left &-item, &-dark&-vertical-left &-item,
&-dark&-vertical-right &-item { &-dark&-vertical-right &-item {
border-right: 0;
margin-left: 0;
left: 0; left: 0;
&:after { margin-left: 0;
border-right: 0;
&::after {
border-right: 0; border-right: 0;
} }
} }
@ -75,8 +75,8 @@
&-dark &-submenu-open, &-dark &-submenu-open,
&-dark &-submenu-selected, &-dark &-submenu-selected,
&-dark &-submenu-title:hover { &-dark &-submenu-title:hover {
background-color: transparent;
color: @menu-dark-highlight-color; color: @menu-dark-highlight-color;
background-color: transparent;
> a { > a {
color: @menu-dark-highlight-color; color: @menu-dark-highlight-color;
} }
@ -84,8 +84,8 @@
> .@{menu-prefix-cls}-submenu-title:hover { > .@{menu-prefix-cls}-submenu-title:hover {
> .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-arrow {
opacity: 1; opacity: 1;
&:after, &::after,
&:before { &::before {
background: @menu-dark-highlight-color; background: @menu-dark-highlight-color;
} }
} }
@ -93,9 +93,9 @@
} }
&-dark &-item-selected { &-dark &-item-selected {
border-right: 0;
color: @menu-dark-highlight-color; color: @menu-dark-highlight-color;
&:after { border-right: 0;
&::after {
border-right: 0; border-right: 0;
} }
> a, > a,
@ -114,14 +114,14 @@
&-dark &-submenu-disabled { &-dark &-submenu-disabled {
&, &,
> a { > a {
opacity: 0.8;
color: @disabled-color-dark !important; color: @disabled-color-dark !important;
opacity: 0.8;
} }
> .@{menu-prefix-cls}-submenu-title { > .@{menu-prefix-cls}-submenu-title {
color: @disabled-color-dark !important; color: @disabled-color-dark !important;
> .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-arrow {
&:before, &::before,
&:after { &::after {
background: @disabled-color-dark !important; background: @disabled-color-dark !important;
} }
} }

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

@ -6,22 +6,22 @@
// default theme // default theme
.@{menu-prefix-cls} { .@{menu-prefix-cls} {
.reset-component; .reset-component;
outline: none;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
list-style: none;
box-shadow: @box-shadow-base;
color: @menu-item-color; color: @menu-item-color;
background: @menu-bg;
line-height: 0; // Fix display inline-block gap line-height: 0; // Fix display inline-block gap
list-style: none;
background: @menu-bg;
outline: none;
box-shadow: @box-shadow-base;
transition: background 0.3s, width 0.2s; transition: background 0.3s, width 0.2s;
.clearfix; .clearfix;
ul, ul,
ol { ol {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
} }
&-hidden { &-hidden {
@ -29,10 +29,10 @@
} }
&-item-group-title { &-item-group-title {
padding: 8px 16px;
color: @menu-item-group-title-color; color: @menu-item-group-title-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
padding: 8px 16px;
transition: all 0.3s; transition: all 0.3s;
} }
@ -61,13 +61,13 @@
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
&:before { &::before {
position: absolute; position: absolute;
background-color: transparent;
top: 0; top: 0;
left: 0;
bottom: 0;
right: 0; right: 0;
bottom: 0;
left: 0;
background-color: transparent;
content: ''; content: '';
} }
} }
@ -75,8 +75,8 @@
&-item-divider { &-item-divider {
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
background-color: @border-color-split;
line-height: 0; line-height: 0;
background-color: @border-color-split;
} }
&-item:hover, &-item:hover,
@ -122,14 +122,14 @@
&-vertical&-sub, &-vertical&-sub,
&-vertical-left&-sub, &-vertical-left&-sub,
&-vertical-right&-sub { &-vertical-right&-sub {
border-right: 0;
padding: 0; padding: 0;
border-right: 0;
transform-origin: 0 0; transform-origin: 0 0;
.@{menu-prefix-cls}-item { .@{menu-prefix-cls}-item {
border-right: 0;
margin-left: 0;
left: 0; left: 0;
&:after { margin-left: 0;
border-right: 0;
&::after {
border-right: 0; border-right: 0;
} }
} }
@ -148,12 +148,12 @@
&-item, &-item,
&-submenu-title { &-submenu-title {
cursor: pointer;
margin: 0;
padding: 0 20px;
position: relative; position: relative;
display: block; display: block;
margin: 0;
padding: 0 20px;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out, transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
background 0.3s @ease-in-out, padding 0.15s @ease-in-out; background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
@ -162,8 +162,8 @@
font-size: @font-size-base; font-size: @font-size-base;
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out; transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
+ span { + span {
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
opacity: 1; opacity: 1;
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
} }
} }
} }
@ -171,8 +171,8 @@
& > &-item-divider { & > &-item-divider {
height: 1px; height: 1px;
margin: 1px 0; margin: 1px 0;
overflow: hidden;
padding: 0; padding: 0;
overflow: hidden;
line-height: 0; line-height: 0;
background-color: @border-color-split; background-color: @border-color-split;
} }
@ -180,29 +180,29 @@
&-submenu { &-submenu {
&-popup { &-popup {
position: absolute; position: absolute;
border-radius: @border-radius-base;
z-index: @zindex-dropdown; z-index: @zindex-dropdown;
background: @menu-popup-bg; background: @menu-popup-bg;
border-radius: @border-radius-base;
.submenu-title-wrapper { .submenu-title-wrapper {
padding-right: 20px; padding-right: 20px;
} }
&:before { &::before {
position: absolute; position: absolute;
top: -7px; top: -7px;
left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
content: ' '; left: 0;
opacity: 0.0001; opacity: 0.0001;
content: ' ';
} }
} }
> .@{menu-prefix-cls} { > .@{menu-prefix-cls} {
background-color: @menu-bg; background-color: @menu-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&-submenu-title:after { &-submenu-title::after {
transition: transform 0.3s @ease-in-out; transition: transform 0.3s @ease-in-out;
} }
} }
@ -212,44 +212,43 @@
&-vertical-right, &-vertical-right,
&-inline { &-inline {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
transition: transform 0.3s @ease-in-out;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 16px; right: 16px;
width: 10px; width: 10px;
&:before, transition: transform 0.3s @ease-in-out;
&:after { &::before,
content: ''; &::after {
position: absolute; position: absolute;
vertical-align: baseline;
background: #fff;
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
width: 6px; width: 6px;
height: 1.5px; height: 1.5px;
background: @menu-bg;
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
border-radius: 2px; border-radius: 2px;
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out, transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
top 0.3s @ease-in-out; top 0.3s @ease-in-out;
content: '';
} }
&:before { &::before {
transform: rotate(45deg) translateY(-2px); transform: rotate(45deg) translateY(-2px);
} }
&:after { &::after {
transform: rotate(-45deg) translateY(2px); transform: rotate(-45deg) translateY(2px);
} }
} }
> .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
&:after, &::after,
&:before { &::before {
background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color); background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
} }
} }
} }
&-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow { &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
&:before { &::before {
transform: rotate(-45deg) translateX(2px); transform: rotate(-45deg) translateX(2px);
} }
&:after { &::after {
transform: rotate(45deg) translateX(-2px); transform: rotate(45deg) translateX(-2px);
} }
} }
@ -259,10 +258,10 @@
> .@{menu-prefix-cls}-submenu-title > .@{menu-prefix-cls}-submenu-title
.@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-arrow {
transform: translateY(-2px); transform: translateY(-2px);
&:after { &::after {
transform: rotate(-45deg) translateX(-2px); transform: rotate(-45deg) translateX(-2px);
} }
&:before { &::before {
transform: rotate(45deg) translateX(2px); transform: rotate(45deg) translateX(2px);
} }
} }
@ -279,11 +278,11 @@
} }
&-horizontal { &-horizontal {
line-height: 46px;
white-space: nowrap;
border: 0; border: 0;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none; box-shadow: none;
line-height: 46px;
white-space: nowrap;
> .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu { > .@{menu-prefix-cls}-submenu {
@ -297,8 +296,8 @@
&-active, &-active,
&-open, &-open,
&-selected { &-selected {
border-bottom: 2px solid @menu-highlight-color;
color: @menu-highlight-color; color: @menu-highlight-color;
border-bottom: 2px solid @menu-highlight-color;
} }
} }
@ -309,7 +308,7 @@
&:hover { &:hover {
color: @menu-highlight-color; color: @menu-highlight-color;
} }
&:before { &::before {
bottom: -2px; bottom: -2px;
} }
} }
@ -318,11 +317,11 @@
} }
} }
&:after { &::after {
content: '\20';
display: block; display: block;
height: 0;
clear: both; clear: both;
height: 0;
content: '\20';
} }
} }
@ -332,28 +331,28 @@
&-inline { &-inline {
.@{menu-prefix-cls}-item { .@{menu-prefix-cls}-item {
position: relative; position: relative;
&:after { &::after {
content: '';
position: absolute; position: absolute;
right: 0;
top: 0; top: 0;
right: 0;
bottom: 0; bottom: 0;
border-right: @menu-item-active-border-width solid @menu-highlight-color; border-right: @menu-item-active-border-width solid @menu-highlight-color;
transform: scaleY(0.0001); transform: scaleY(0.0001);
opacity: 0; opacity: 0;
transition: transform 0.15s @ease-out, opacity 0.15s @ease-out; transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
content: '';
} }
} }
.@{menu-prefix-cls}-item, .@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title { .@{menu-prefix-cls}-submenu-title {
padding: 0 16px;
font-size: @font-size-base;
line-height: @menu-item-height;
height: @menu-item-height; height: @menu-item-height;
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
padding: 0 16px;
overflow: hidden; overflow: hidden;
font-size: @font-size-base;
line-height: @menu-item-height;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -368,8 +367,8 @@
> .@{menu-prefix-cls}-item, > .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
line-height: @menu-inline-toplevel-item-height;
height: @menu-inline-toplevel-item-height; height: @menu-inline-toplevel-item-height;
line-height: @menu-inline-toplevel-item-height;
} }
} }
@ -377,10 +376,10 @@
width: 100%; width: 100%;
.@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-selected { .@{menu-prefix-cls}-item-selected {
&:after { &::after {
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
opacity: 1;
transform: scaleY(1); transform: scaleY(1);
opacity: 1;
transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
} }
} }
@ -406,18 +405,18 @@
> .@{menu-prefix-cls}-submenu-title, > .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
left: 0; left: 0;
text-overflow: clip;
padding: 0 (@menu-collapsed-width - 16px) / 2 !important; padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
text-overflow: clip;
.@{menu-prefix-cls}-submenu-arrow { .@{menu-prefix-cls}-submenu-arrow {
display: none; display: none;
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin: 0;
font-size: 16px; font-size: 16px;
line-height: @menu-item-height; line-height: @menu-item-height;
margin: 0;
+ span { + span {
max-width: 0;
display: inline-block; display: inline-block;
max-width: 0;
opacity: 0; opacity: 0;
} }
} }
@ -433,11 +432,11 @@
} }
.@{menu-prefix-cls}-item-group-title { .@{menu-prefix-cls}-item-group-title {
padding-right: 4px;
padding-left: 4px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 4px;
padding-right: 4px;
} }
} }
@ -460,14 +459,14 @@
&-sub&-inline { &-sub&-inline {
padding: 0; padding: 0;
border: 0; border: 0;
box-shadow: none;
border-radius: 0; border-radius: 0;
box-shadow: none;
& > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-item,
& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title { & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
line-height: @menu-item-height;
height: @menu-item-height; height: @menu-item-height;
list-style-type: disc; line-height: @menu-item-height;
list-style-position: inside; list-style-position: inside;
list-style-type: disc;
} }
& .@{menu-prefix-cls}-item-group-title { & .@{menu-prefix-cls}-item-group-title {
@ -479,9 +478,9 @@
&-item-disabled, &-item-disabled,
&-submenu-disabled { &-submenu-disabled {
color: @disabled-color !important; color: @disabled-color !important;
cursor: not-allowed;
background: none; background: none;
border-color: transparent !important; border-color: transparent !important;
cursor: not-allowed;
> a { > a {
color: @disabled-color !important; color: @disabled-color !important;
pointer-events: none; pointer-events: none;
@ -490,8 +489,8 @@
color: @disabled-color !important; color: @disabled-color !important;
cursor: not-allowed; cursor: not-allowed;
> .@{menu-prefix-cls}-submenu-arrow { > .@{menu-prefix-cls}-submenu-arrow {
&:before, &::before,
&:after { &::after {
background: @disabled-color !important; background: @disabled-color !important;
} }
} }

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

@ -6,10 +6,10 @@
.@{message-prefix-cls} { .@{message-prefix-cls} {
.reset-component; .reset-component;
position: fixed; position: fixed;
z-index: @zindex-message;
width: 100%;
top: 16px; top: 16px;
left: 0; left: 0;
z-index: @zindex-message;
width: 100%;
pointer-events: none; pointer-events: none;
&-notice { &-notice {
@ -21,11 +21,11 @@
} }
&-notice-content { &-notice-content {
display: inline-block;
padding: @message-notice-content-padding; padding: @message-notice-content-padding;
background: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @shadow-2; box-shadow: @shadow-2;
background: @component-background;
display: inline-block;
pointer-events: all; pointer-events: all;
} }
@ -47,28 +47,28 @@
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
position: relative;
top: 1px;
margin-right: 8px; margin-right: 8px;
font-size: @font-size-lg; font-size: @font-size-lg;
top: 1px;
position: relative;
} }
&-notice.move-up-leave.move-up-leave-active { &-notice.move-up-leave.move-up-leave-active {
animation-name: MessageMoveOut;
overflow: hidden; overflow: hidden;
animation-name: MessageMoveOut;
animation-duration: 0.3s; animation-duration: 0.3s;
} }
} }
@keyframes MessageMoveOut { @keyframes MessageMoveOut {
0% { 0% {
opacity: 1;
max-height: 150px; max-height: 150px;
padding: 8px; padding: 8px;
opacity: 1;
} }
100% { 100% {
opacity: 0;
max-height: 0; max-height: 0;
padding: 0; padding: 0;
opacity: 0;
} }
} }

22
components/modal/style/confirm.less
View File

@ -21,37 +21,37 @@
&-body { &-body {
.@{confirm-prefix-cls}-title { .@{confirm-prefix-cls}-title {
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
line-height: 1.4;
display: block; display: block;
// create BFC to avoid // create BFC to avoid
// https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
overflow: hidden; overflow: hidden;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
line-height: 1.4;
} }
.@{confirm-prefix-cls}-content { .@{confirm-prefix-cls}-content {
margin-left: 38px;
font-size: @font-size-base;
color: @text-color;
margin-top: 8px; margin-top: 8px;
margin-left: 38px;
color: @text-color;
font-size: @font-size-base;
} }
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
font-size: 22px;
margin-right: 16px;
float: left; float: left;
margin-right: 16px;
font-size: 22px;
} }
} }
.@{confirm-prefix-cls}-btns { .@{confirm-prefix-cls}-btns {
margin-top: 24px;
float: right; float: right;
margin-top: 24px;
button + button { button + button {
margin-left: 8px;
margin-bottom: 0; margin-bottom: 0;
margin-left: 8px;
} }
} }

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

@ -4,82 +4,81 @@
.@{dialog-prefix-cls} { .@{dialog-prefix-cls} {
.reset-component; .reset-component;
position: relative; position: relative;
top: 100px;
width: auto; width: auto;
margin: 0 auto; margin: 0 auto;
top: 100px;
padding-bottom: 24px; padding-bottom: 24px;
&-wrap { &-wrap {
position: fixed; position: fixed;
overflow: auto;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @zindex-modal; z-index: @zindex-modal;
-webkit-overflow-scrolling: touch; overflow: auto;
outline: 0; outline: 0;
-webkit-overflow-scrolling: touch;
} }
&-title { &-title {
margin: 0; margin: 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: 22px; line-height: 22px;
font-weight: 500;
color: @heading-color;
} }
&-content { &-content {
position: relative; position: relative;
background-color: @component-background; background-color: @component-background;
background-clip: padding-box;
border: 0; border: 0;
border-radius: @border-radius-base; border-radius: @border-radius-base;
background-clip: padding-box;
box-shadow: @shadow-2; box-shadow: @shadow-2;
} }
&-close { &-close {
cursor: pointer;
border: 0;
background: transparent;
position: absolute; position: absolute;
right: 0;
top: 0; top: 0;
z-index: 10; right: 0;
z-index: @zindex-popup-close;
padding: 0;
color: @text-color-secondary;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
text-decoration: none; text-decoration: none;
transition: color 0.3s; background: transparent;
color: @text-color-secondary; border: 0;
outline: 0; outline: 0;
padding: 0; cursor: pointer;
transition: color 0.3s;
&-x { &-x {
display: block; display: block;
width: 56px;
height: 56px;
font-size: @font-size-lg;
font-style: normal; font-style: normal;
vertical-align: baseline; line-height: 56px;
text-align: center; text-align: center;
text-transform: none; text-transform: none;
text-rendering: auto; text-rendering: auto;
width: 56px;
height: 56px;
line-height: 56px;
font-size: @font-size-lg;
} }
&:focus, &:focus,
&:hover { &:hover {
color: #444; color: @icon-color-hover;
text-decoration: none; text-decoration: none;
} }
} }
&-header { &-header {
padding: 16px 24px; padding: 16px 24px;
border-radius: @border-radius-base @border-radius-base 0 0;
background: @modal-header-bg;
color: @text-color; color: @text-color;
background: @modal-header-bg;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
} }
&-body { &-body {
@ -90,21 +89,21 @@
} }
&-footer { &-footer {
border-top: @border-width-base @border-style-base @border-color-split;
padding: 10px 16px; padding: 10px 16px;
text-align: right; text-align: right;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;
button + button { button + button {
margin-left: 8px;
margin-bottom: 0; margin-bottom: 0;
margin-left: 8px;
} }
} }
&.zoom-enter, &.zoom-enter,
&.zoom-appear { &.zoom-appear {
animation-duration: @animation-duration-slow;
transform: none; // reset scale avoid mousePosition bug transform: none; // reset scale avoid mousePosition bug
opacity: 0; opacity: 0;
animation-duration: @animation-duration-slow;
user-select: none; // https://github.com/ant-design/ant-design/issues/11777 user-select: none; // https://github.com/ant-design/ant-design/issues/11777
} }
@ -112,11 +111,11 @@
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0;
bottom: 0; bottom: 0;
background-color: @modal-mask-bg; left: 0;
height: 100%;
z-index: @zindex-modal-mask; z-index: @zindex-modal-mask;
height: 100%;
background-color: @modal-mask-bg;
filter: ~'alpha(opacity=50)'; filter: ~'alpha(opacity=50)';
&-hidden { &-hidden {
@ -131,25 +130,25 @@
.@{dialog-prefix-cls}-centered { .@{dialog-prefix-cls}-centered {
text-align: center; text-align: center;
&:before { &::before {
content: '';
display: inline-block; display: inline-block;
width: 0;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
width: 0; content: '';
} }
.@{dialog-prefix-cls} { .@{dialog-prefix-cls} {
display: inline-block;
vertical-align: middle;
top: 0; top: 0;
display: inline-block;
text-align: left; text-align: left;
vertical-align: middle;
} }
} }
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
.@{dialog-prefix-cls} { .@{dialog-prefix-cls} {
width: auto !important; max-width: calc(100vw - 16px);
margin: 10px; margin: 8px auto;
} }
.@{dialog-prefix-cls}-centered { .@{dialog-prefix-cls}-centered {
.@{dialog-prefix-cls} { .@{dialog-prefix-cls} {

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

@ -19,8 +19,8 @@
&-topLeft, &-topLeft,
&-bottomLeft { &-bottomLeft {
margin-left: 24px;
margin-right: 0; margin-right: 0;
margin-left: 24px;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active, .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active { .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
@ -34,32 +34,32 @@
} }
&-notice { &-notice {
padding: @notification-padding;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
background: @component-background;
line-height: 1.5;
position: relative; position: relative;
margin-bottom: @notification-margin-bottom; margin-bottom: @notification-margin-bottom;
padding: @notification-padding;
overflow: hidden; overflow: hidden;
line-height: 1.5;
background: @component-background;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
&-message { &-message {
font-size: @font-size-lg;
color: @heading-color;
margin-bottom: 8px;
line-height: 24px;
display: inline-block; display: inline-block;
margin-bottom: 8px;
color: @heading-color;
font-size: @font-size-lg;
line-height: 24px;
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140 // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
&-single-line-auto-margin { &-single-line-auto-margin {
display: block;
width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)'; width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
max-width: 4px;
background-color: transparent; background-color: transparent;
pointer-events: none; pointer-events: none;
&::before {
display: block; display: block;
max-width: 4px;
&:before {
content: ''; content: '';
display: block;
} }
} }
} }
@ -73,9 +73,9 @@
} }
&-with-icon &-message { &-with-icon &-message {
font-size: @font-size-lg;
margin-left: 48px;
margin-bottom: 4px; margin-bottom: 4px;
margin-left: 48px;
font-size: @font-size-lg;
} }
&-with-icon &-description { &-with-icon &-description {
@ -85,9 +85,9 @@
&-icon { &-icon {
position: absolute; position: absolute;
margin-left: 4px;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
margin-left: 4px;
&-success { &-success {
color: @success-color; color: @success-color;
@ -105,8 +105,8 @@
&-close { &-close {
position: absolute; position: absolute;
right: 22px;
top: 16px; top: 16px;
right: 22px;
color: @text-color-secondary; color: @text-color-secondary;
outline: none; outline: none;
@ -127,8 +127,8 @@
.notification-fade-effect { .notification-fade-effect {
animation-duration: 0.24s; animation-duration: 0.24s;
animation-fill-mode: both;
animation-timing-function: @ease-in-out; animation-timing-function: @ease-in-out;
animation-fill-mode: both;
} }
&-fade-enter, &-fade-enter,
@ -158,8 +158,8 @@
@keyframes NotificationFadeIn { @keyframes NotificationFadeIn {
0% { 0% {
opacity: 0;
left: @notification-width; left: @notification-width;
opacity: 0;
} }
100% { 100% {
left: 0; left: 0;
@ -169,8 +169,8 @@
@keyframes NotificationLeftFadeIn { @keyframes NotificationLeftFadeIn {
0% { 0% {
opacity: 0;
right: @notification-width; right: @notification-width;
opacity: 0;
} }
100% { 100% {
right: 0; right: 0;
@ -180,17 +180,17 @@
@keyframes NotificationFadeOut { @keyframes NotificationFadeOut {
0% { 0% {
opacity: 1; max-height: 150px;
margin-bottom: @notification-margin-bottom; margin-bottom: @notification-margin-bottom;
padding-top: @notification-padding; padding-top: @notification-padding;
padding-bottom: @notification-padding; padding-bottom: @notification-padding;
max-height: 150px; opacity: 1;
} }
100% { 100% {
opacity: 0; max-height: 0;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
max-height: 0; opacity: 0;
} }
} }

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

@ -14,59 +14,59 @@
list-style: none; list-style: none;
} }
&:after { &::after {
content: ' ';
display: block; display: block;
height: 0;
clear: both; clear: both;
height: 0;
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
content: ' ';
} }
&-total-text { &-total-text {
display: inline-block; display: inline-block;
vertical-align: middle;
height: @pagination-item-size; height: @pagination-item-size;
line-height: @pagination-item-size - 2px;
margin-right: 8px; margin-right: 8px;
line-height: @pagination-item-size - 2px;
vertical-align: middle;
} }
&-item { &-item {
cursor: pointer; display: inline-block;
border-radius: @border-radius-base;
user-select: none;
min-width: @pagination-item-size; min-width: @pagination-item-size;
height: @pagination-item-size; height: @pagination-item-size;
line-height: @pagination-item-size - 2px;
text-align: center;
list-style: none;
display: inline-block;
vertical-align: middle;
border: @border-width-base @border-style-base @border-color-base;
background-color: @component-background;
margin-right: 8px; margin-right: 8px;
font-family: @pagination-font-family; font-family: @pagination-font-family;
line-height: @pagination-item-size - 2px;
text-align: center;
vertical-align: middle;
list-style: none;
background-color: @component-background;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
outline: 0; outline: 0;
cursor: pointer;
user-select: none;
a { a {
text-decoration: none;
color: @text-color;
transition: none;
margin: 0 6px; margin: 0 6px;
color: @text-color;
text-decoration: none;
transition: none;
} }
&:focus, &:focus,
&:hover { &:hover {
transition: all 0.3s;
border-color: @primary-color; border-color: @primary-color;
transition: all 0.3s;
a { a {
color: @primary-color; color: @primary-color;
} }
} }
&-active { &-active {
border-color: @primary-color;
font-weight: @pagination-font-weight-active; font-weight: @pagination-font-weight-active;
border-color: @primary-color;
a { a {
color: @primary-color; color: @primary-color;
@ -107,17 +107,18 @@
.@{pagination-prefix-cls}-item-ellipsis { .@{pagination-prefix-cls}-item-ellipsis {
position: absolute; position: absolute;
display: block;
letter-spacing: 2px;
color: @disabled-color;
text-align: center;
opacity: 1;
transition: all 0.2s;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: block;
margin: auto; margin: auto;
color: @disabled-color;
letter-spacing: 2px;
text-align: center;
text-indent: 0.13em;
opacity: 1;
transition: all 0.2s;
} }
} }
@ -141,18 +142,18 @@
&-next, &-next,
&-jump-prev, &-jump-prev,
&-jump-next { &-jump-next {
font-family: @pagination-font-family; display: inline-block;
cursor: pointer;
color: @text-color;
border-radius: @border-radius-base;
list-style: none;
min-width: @pagination-item-size; min-width: @pagination-item-size;
height: @pagination-item-size; height: @pagination-item-size;
color: @text-color;
font-family: @pagination-font-family;
line-height: @pagination-item-size; line-height: @pagination-item-size;
text-align: center; text-align: center;
transition: all 0.3s;
display: inline-block;
vertical-align: middle; vertical-align: middle;
list-style: none;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s;
} }
&-prev, &-prev,
@ -169,21 +170,21 @@
} }
.@{pagination-prefix-cls}-item-link { .@{pagination-prefix-cls}-item-link {
border: @border-width-base @border-style-base @border-color-base; display: block;
height: 100%;
font-size: 12px;
text-align: center;
background-color: @component-background; background-color: @component-background;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base; border-radius: @border-radius-base;
outline: none; outline: none;
display: block;
transition: all 0.3s; transition: all 0.3s;
font-size: 12px;
height: 100%;
text-align: center;
} }
&:focus .@{pagination-prefix-cls}-item-link, &:focus .@{pagination-prefix-cls}-item-link,
&:hover .@{pagination-prefix-cls}-item-link { &:hover .@{pagination-prefix-cls}-item-link {
border-color: @primary-color;
color: @primary-color; color: @primary-color;
border-color: @primary-color;
} }
} }
@ -194,8 +195,8 @@
cursor: not-allowed; cursor: not-allowed;
a, a,
.@{pagination-prefix-cls}-item-link { .@{pagination-prefix-cls}-item-link {
border-color: @border-color-base;
color: @disabled-color; color: @disabled-color;
border-color: @border-color-base;
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -207,8 +208,8 @@
&-options { &-options {
display: inline-block; display: inline-block;
vertical-align: middle;
margin-left: 16px; margin-left: 16px;
vertical-align: middle;
&-size-changer.@{ant-prefix}-select { &-size-changer.@{ant-prefix}-select {
display: inline-block; display: inline-block;
@ -218,14 +219,14 @@
&-quick-jumper { &-quick-jumper {
display: inline-block; display: inline-block;
vertical-align: top;
height: @input-height-base; height: @input-height-base;
line-height: @input-height-base; line-height: @input-height-base;
vertical-align: top;
input { input {
.input; .input;
margin: 0 8px;
width: 50px; width: 50px;
margin: 0 8px;
} }
} }
} }
@ -236,9 +237,9 @@
line-height: @pagination-item-size-sm; line-height: @pagination-item-size-sm;
vertical-align: top; vertical-align: top;
.@{pagination-prefix-cls}-item-link { .@{pagination-prefix-cls}-item-link {
border: 0;
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
&:after { border: 0;
&::after {
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm; line-height: @pagination-item-size-sm;
} }
@ -247,19 +248,19 @@
&-simple &-simple-pager { &-simple &-simple-pager {
display: inline-block; display: inline-block;
margin-right: 8px;
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
margin-right: 8px;
input { input {
margin-right: 8px;
box-sizing: border-box; box-sizing: border-box;
background-color: @component-background;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
outline: none;
padding: 0 6px;
height: 100%; height: 100%;
margin-right: 8px;
padding: 0 6px;
text-align: center; text-align: center;
background-color: @component-background;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
outline: none;
transition: border-color 0.3s; transition: border-color 0.3s;
&:hover { &:hover {
@ -275,9 +276,9 @@
} }
&.mini &-item { &.mini &-item {
margin: 0;
min-width: @pagination-item-size-sm; min-width: @pagination-item-size-sm;
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
margin: 0;
line-height: @pagination-item-size-sm - 2px; line-height: @pagination-item-size-sm - 2px;
} }
@ -288,17 +289,17 @@
&.mini &-prev, &.mini &-prev,
&.mini &-next { &.mini &-next {
margin: 0;
min-width: @pagination-item-size-sm; min-width: @pagination-item-size-sm;
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
margin: 0;
line-height: @pagination-item-size-sm; line-height: @pagination-item-size-sm;
} }
&.mini &-prev &-item-link, &.mini &-prev &-item-link,
&.mini &-next &-item-link { &.mini &-next &-item-link {
border-color: transparent;
background: transparent; background: transparent;
&:after { border-color: transparent;
&::after {
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm; line-height: @pagination-item-size-sm;
} }
@ -307,8 +308,8 @@
&.mini &-jump-prev, &.mini &-jump-prev,
&.mini &-jump-next { &.mini &-jump-next {
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
margin-right: 0; margin-right: 0;
line-height: @pagination-item-size-sm;
} }
&.mini &-options { &.mini &-options {

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

@ -9,16 +9,16 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: @zindex-popover; z-index: @zindex-popover;
font-weight: normal;
white-space: normal;
text-align: left;
cursor: auto; cursor: auto;
user-select: text; user-select: text;
white-space: normal;
font-weight: normal;
text-align: left;
&:after { &::after {
content: '';
position: absolute; position: absolute;
background: rgba(255, 255, 255, 0.01); background: fade(@white, 1%);
content: '';
} }
&-hidden { &-hidden {
@ -55,16 +55,24 @@
background-clip: padding-box; background-clip: padding-box;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
box-shadow: ~'0 0 8px @{shadow-color} \9';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
&-inner {
box-shadow: @box-shadow-base;
}
} }
&-title { &-title {
min-width: @popover-min-width; min-width: @popover-min-width;
min-height: 32px;
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 5px @padding-md 4px; padding: 5px @padding-md 4px;
min-height: 32px;
border-bottom: 1px solid @border-color-split;
color: @heading-color; color: @heading-color;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid @border-color-split;
} }
&-inner-content { &-inner-content {
@ -73,10 +81,10 @@
} }
&-message { &-message {
padding: 4px 0 12px;
font-size: @font-size-base;
color: @popover-color;
position: relative; position: relative;
padding: 4px 0 12px;
color: @popover-color;
font-size: @font-size-base;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
position: absolute; position: absolute;
top: 8px; // 4px for padding-top, 4px for vertical middle; top: 8px; // 4px for padding-top, 4px for vertical middle;
@ -89,8 +97,8 @@
} }
&-buttons { &-buttons {
text-align: right;
margin-bottom: 4px; margin-bottom: 4px;
text-align: right;
button { button {
margin-left: 8px; margin-left: 8px;
} }
@ -100,22 +108,25 @@
// .popover-arrow is outer, .popover-arrow:after is inner // .popover-arrow is outer, .popover-arrow:after is inner
&-arrow { &-arrow {
background: @popover-bg;
background-color: inherit;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
transform: rotate(45deg);
position: absolute; position: absolute;
display: block; display: block;
border-color: transparent; width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
background: transparent;
border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
border-style: solid; border-style: solid;
transform: rotate(45deg);
} }
&-placement-top > &-content > &-arrow, &-placement-top > &-content > &-arrow,
&-placement-topLeft > &-content > &-arrow, &-placement-topLeft > &-content > &-arrow,
&-placement-topRight > &-content > &-arrow { &-placement-topRight > &-content > &-arrow {
bottom: @popover-distance - @popover-arrow-width + 1.5px; bottom: @popover-distance - @popover-arrow-width + 2.2px;
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); border-top-color: transparent;
border-right-color: @popover-bg;
border-bottom-color: @popover-bg;
border-left-color: transparent;
box-shadow: 3px 3px 7px fade(@black, 7%);
} }
&-placement-top > &-content > &-arrow { &-placement-top > &-content > &-arrow {
left: 50%; left: 50%;
@ -132,7 +143,11 @@
&-placement-rightTop > &-content > &-arrow, &-placement-rightTop > &-content > &-arrow,
&-placement-rightBottom > &-content > &-arrow { &-placement-rightBottom > &-content > &-arrow {
left: @popover-distance - @popover-arrow-width + 2px; left: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: @popover-bg;
border-left-color: @popover-bg;
box-shadow: -3px 3px 7px fade(@black, 7%);
} }
&-placement-right > &-content > &-arrow { &-placement-right > &-content > &-arrow {
top: 50%; top: 50%;
@ -149,7 +164,11 @@
&-placement-bottomLeft > &-content > &-arrow, &-placement-bottomLeft > &-content > &-arrow,
&-placement-bottomRight > &-content > &-arrow { &-placement-bottomRight > &-content > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px; top: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); border-top-color: @popover-bg;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: @popover-bg;
box-shadow: -2px -2px 5px fade(@black, 6%);
} }
&-placement-bottom > &-content > &-arrow { &-placement-bottom > &-content > &-arrow {
left: 50%; left: 50%;
@ -166,7 +185,11 @@
&-placement-leftTop > &-content > &-arrow, &-placement-leftTop > &-content > &-arrow,
&-placement-leftBottom > &-content > &-arrow { &-placement-leftBottom > &-content > &-arrow {
right: @popover-distance - @popover-arrow-width + 2px; right: @popover-distance - @popover-arrow-width + 2px;
box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); border-top-color: @popover-bg;
border-right-color: @popover-bg;
border-bottom-color: transparent;
border-left-color: transparent;
box-shadow: 3px -3px 7px fade(@black, 7%);
} }
&-placement-left > &-content > &-arrow { &-placement-left > &-content > &-arrow {
top: 50%; top: 50%;

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

@ -8,9 +8,9 @@
display: inline-block; display: inline-block;
&-line { &-line {
position: relative;
width: 100%; width: 100%;
font-size: @font-size-base; font-size: @font-size-base;
position: relative;
} }
&-small&-line, &-small&-line,
@ -24,18 +24,18 @@
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
.@{progress-prefix-cls}-show-info & { .@{progress-prefix-cls}-show-info & {
padding-right: ~'calc(2em + 8px)';
margin-right: ~'calc(-2em - 8px)'; margin-right: ~'calc(-2em - 8px)';
padding-right: ~'calc(2em + 8px)';
} }
} }
&-inner { &-inner {
position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
vertical-align: middle;
background-color: @progress-remaining-color; background-color: @progress-remaining-color;
border-radius: 100px; border-radius: 100px;
vertical-align: middle;
position: relative;
} }
&-circle-trail { &-circle-trail {
@ -43,52 +43,52 @@
} }
&-circle-path { &-circle-path {
stroke: @progress-default-color;
animation: ~'@{ant-prefix}-progress-appear' 0.3s; animation: ~'@{ant-prefix}-progress-appear' 0.3s;
stroke: @progress-default-color;
} }
&-success-bg, &-success-bg,
&-bg { &-bg {
position: relative;
background-color: @progress-default-color; background-color: @progress-default-color;
transition: all 0.4s @ease-out-circ 0s; transition: all 0.4s @ease-out-circ 0s;
position: relative;
} }
&-success-bg { &-success-bg {
background-color: @success-color;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background-color: @success-color;
} }
&-text { &-text {
word-break: normal;
width: 2em;
text-align: left;
font-size: 1em;
margin-left: 8px;
vertical-align: middle;
display: inline-block; display: inline-block;
white-space: nowrap; width: 2em;
margin-left: 8px;
color: @text-color-secondary; color: @text-color-secondary;
font-size: 1em;
line-height: 1; line-height: 1;
white-space: nowrap;
text-align: left;
vertical-align: middle;
word-break: normal;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
font-size: @font-size-base; font-size: @font-size-base;
} }
} }
&-status-active { &-status-active {
.@{progress-prefix-cls}-bg:before { .@{progress-prefix-cls}-bg::before {
content: '';
opacity: 0;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
background: @component-background; background: @component-background;
border-radius: 10px; border-radius: 10px;
opacity: 0;
animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite; animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
content: '';
} }
} }
@ -123,18 +123,17 @@
} }
&-circle &-text { &-circle &-text {
display: block;
position: absolute; position: absolute;
width: 100%;
text-align: center;
line-height: 1;
top: 50%; top: 50%;
transform: translateY(-50%); left: 50%;
left: 0; width: 100%;
margin: 0; margin: 0;
padding: 0;
color: @progress-text-color; color: @progress-text-color;
line-height: 1;
white-space: normal; white-space: normal;
padding: 0 6px; text-align: center;
transform: translate(-50%, -50%);
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
font-size: 14 / 12em; font-size: 14 / 12em;
@ -155,15 +154,15 @@
@keyframes ~"@{ant-prefix}-progress-active" { @keyframes ~"@{ant-prefix}-progress-active" {
0% { 0% {
opacity: 0.1;
width: 0; width: 0;
opacity: 0.1;
} }
20% { 20% {
opacity: 0.5;
width: 0; width: 0;
opacity: 0.5;
} }
100% { 100% {
opacity: 0;
width: 100%; width: 100%;
opacity: 0;
} }
} }

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

@ -5,6 +5,7 @@
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group'; @radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner'; @radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-duration: 0.3s; @radio-duration: 0.3s;
@radio-focused-outline: 3px solid fade(@radio-dot-color, 6%);
.@{radio-group-prefix-cls} { .@{radio-group-prefix-cls} {
.reset-component; .reset-component;
@ -15,63 +16,69 @@
// 一般状态 // 一般状态
.@{radio-prefix-cls}-wrapper { .@{radio-prefix-cls}-wrapper {
.reset-component; .reset-component;
display: inline-block;
position: relative; position: relative;
white-space: nowrap; display: inline-block;
margin-right: 8px; margin-right: 8px;
white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.@{radio-prefix-cls} { .@{radio-prefix-cls} {
.reset-component; .reset-component;
white-space: nowrap;
outline: none;
display: inline-block;
position: relative; position: relative;
display: inline-block;
line-height: 1; line-height: 1;
white-space: nowrap;
vertical-align: sub; vertical-align: sub;
outline: none;
cursor: pointer; cursor: pointer;
.@{radio-prefix-cls}-wrapper:hover &, .@{radio-prefix-cls}-wrapper:hover &,
&:hover, &:hover .@{radio-inner-prefix-cls},
&-focused { &-input:focus + .@{radio-inner-prefix-cls} {
.@{radio-inner-prefix-cls} {
border-color: @radio-dot-color; border-color: @radio-dot-color;
} }
&-input:focus + .@{radio-inner-prefix-cls} {
box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
} }
&-checked:after {
&-checked::after {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%;
border: 1px solid @radio-dot-color; border: 1px solid @radio-dot-color;
content: ''; border-radius: 50%;
visibility: hidden;
animation: antRadioEffect 0.36s ease-in-out; animation: antRadioEffect 0.36s ease-in-out;
animation-fill-mode: both; animation-fill-mode: both;
visibility: hidden; content: '';
} }
&:hover:after,
.@{radio-prefix-cls}-wrapper:hover &:after { &:hover::after,
.@{radio-prefix-cls}-wrapper:hover &::after {
visibility: visible; visibility: visible;
} }
&-inner { &-inner {
&:after { &::after {
@radio-dot-size: @radio-size - 8px; @radio-dot-size: @radio-size - 8px;
position: absolute; position: absolute;
top: (@radio-size - @radio-dot-size) / 2 - 1px;
left: (@radio-size - @radio-dot-size) / 2 - 1px;
display: table;
width: @radio-dot-size; width: @radio-dot-size;
height: @radio-dot-size; height: @radio-dot-size;
left: (@radio-size - @radio-dot-size) / 2 - 1px; background-color: @radio-dot-color;
top: (@radio-size - @radio-dot-size) / 2 - 1px;
border-radius: @radio-dot-size;
display: table;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
content: ' '; border-radius: @radio-dot-size;
background-color: @radio-dot-color;
opacity: 0;
transform: scale(0); transform: scale(0);
opacity: 0;
transition: all @radio-duration @ease-in-out-circ; transition: all @radio-duration @ease-in-out-circ;
content: ' ';
} }
position: relative; position: relative;
@ -80,23 +87,23 @@
display: block; display: block;
width: @radio-size; width: @radio-size;
height: @radio-size; height: @radio-size;
background-color: @radio-button-bg;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 100px;
border-color: @border-color-base; border-color: @border-color-base;
background-color: @radio-button-bg; border-radius: 100px;
transition: all @radio-duration; transition: all @radio-duration;
} }
&-input { &-input {
position: absolute; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
top: 0;
bottom: 0;
right: 0;
} }
} }
@ -104,7 +111,7 @@
.@{radio-prefix-cls}-checked { .@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} { .@{radio-inner-prefix-cls} {
border-color: @radio-dot-color; border-color: @radio-dot-color;
&:after { &::after {
transform: scale(0.875); transform: scale(0.875);
opacity: 1; opacity: 1;
transition: all @radio-duration @ease-in-out-circ; transition: all @radio-duration @ease-in-out-circ;
@ -114,11 +121,11 @@
.@{radio-prefix-cls}-disabled { .@{radio-prefix-cls}-disabled {
.@{radio-inner-prefix-cls} { .@{radio-inner-prefix-cls} {
border-color: @border-color-base !important;
background-color: @input-disabled-bg; background-color: @input-disabled-bg;
border-color: @border-color-base !important;
cursor: not-allowed; cursor: not-allowed;
&:after { &::after {
background-color: #ccc; background-color: fade(@black, 20%);
} }
} }
@ -133,65 +140,65 @@
} }
span.@{radio-prefix-cls} + * { span.@{radio-prefix-cls} + * {
padding-left: 8px;
padding-right: 8px; padding-right: 8px;
padding-left: 8px;
} }
.@{radio-prefix-cls}-button-wrapper { .@{radio-prefix-cls}-button-wrapper {
margin: 0; position: relative;
height: @btn-height-base;
line-height: @btn-height-base - 2px;
color: @radio-button-color;
display: inline-block; display: inline-block;
transition: all 0.3s ease; height: @btn-height-base;
cursor: pointer; margin: 0;
padding: 0 @padding-md - 1px;
color: @radio-button-color;
line-height: @btn-height-base - 2px;
background: @radio-button-bg;
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
border-left: 0;
// strange align fix for chrome but works // strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.02px; border-top-width: @border-width-base + 0.02px;
background: @radio-button-bg; border-left: 0;
padding: 0 @padding-md - 1px; cursor: pointer;
position: relative; transition: color 0.3s, background 0.3s, border-color 0.3s;
a { a {
color: @radio-button-color; color: @radio-button-color;
} }
> .@{radio-prefix-cls}-button { > .@{radio-prefix-cls}-button {
margin-left: 0;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
margin-left: 0;
} }
.@{radio-group-prefix-cls}-large & { .@{radio-group-prefix-cls}-large & {
height: @input-height-lg; height: @input-height-lg;
line-height: @input-height-lg - 2px;
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: @input-height-lg - 2px;
} }
.@{radio-group-prefix-cls}-small & { .@{radio-group-prefix-cls}-small & {
height: @input-height-sm; height: @input-height-sm;
line-height: @input-height-sm - 2px;
padding: 0 @control-padding-horizontal-sm - 1px; padding: 0 @control-padding-horizontal-sm - 1px;
line-height: @input-height-sm - 2px;
} }
&:not(:first-child) { &:not(:first-child) {
&::before { &::before {
content: ''; position: absolute;
display: block;
top: 0; top: 0;
left: -1px; left: -1px;
display: block;
width: 1px; width: 1px;
height: 100%; height: 100%;
position: absolute;
background-color: @border-color-base; background-color: @border-color-base;
content: '';
} }
} }
&:first-child { &:first-child {
border-radius: @border-radius-base 0 0 @border-radius-base;
border-left: @border-width-base @border-style-base @border-color-base; border-left: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
} }
&:last-child { &:last-child {
@ -202,26 +209,30 @@ span.@{radio-prefix-cls} + * {
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
&:hover, &:hover {
&-focused {
color: @radio-dot-color;
position: relative; position: relative;
color: @radio-dot-color;
}
&:focus-within {
outline: @radio-focused-outline;
} }
.@{radio-prefix-cls}-inner, .@{radio-prefix-cls}-inner,
input[type='checkbox'], input[type='checkbox'],
input[type='radio'] { input[type='radio'] {
opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
opacity: 0;
pointer-events: none;
} }
&-checked { &-checked {
z-index: 1;
color: @radio-dot-color;
background: @radio-button-bg; background: @radio-button-bg;
border-color: @radio-dot-color; border-color: @radio-dot-color;
color: @radio-dot-color;
box-shadow: -1px 0 0 0 @radio-dot-color; box-shadow: -1px 0 0 0 @radio-dot-color;
z-index: 1;
&::before { &::before {
background-color: @radio-dot-color !important; background-color: @radio-dot-color !important;
opacity: 0.1; opacity: 0.1;
@ -232,45 +243,52 @@ span.@{radio-prefix-cls} + * {
} }
&:hover { &:hover {
color: @radio-button-hover-color;
border-color: @radio-button-hover-color; border-color: @radio-button-hover-color;
box-shadow: -1px 0 0 0 @radio-button-hover-color; box-shadow: -1px 0 0 0 @radio-button-hover-color;
color: @radio-button-hover-color;
} }
&:active { &:active {
color: @radio-button-active-color;
border-color: @radio-button-active-color; border-color: @radio-button-active-color;
box-shadow: -1px 0 0 0 @radio-button-active-color; box-shadow: -1px 0 0 0 @radio-button-active-color;
color: @radio-button-active-color; }
&:focus-within {
outline: @radio-focused-outline;
} }
} }
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) { .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
color: @component-background;
background: @radio-dot-color; background: @radio-dot-color;
border-color: @radio-dot-color; border-color: @radio-dot-color;
color: #fff;
&:hover { &:hover {
border-color: @radio-button-hover-color; color: @component-background;
background: @radio-button-hover-color; background: @radio-button-hover-color;
color: #fff; border-color: @radio-button-hover-color;
} }
&:active { &:active {
border-color: @radio-button-active-color; color: @component-background;
background: @radio-button-active-color; background: @radio-button-active-color;
color: #fff; border-color: @radio-button-active-color;
}
&:focus-within {
outline: @radio-focused-outline;
} }
} }
&-disabled { &-disabled {
border-color: @border-color-base;
background-color: @input-disabled-bg;
cursor: not-allowed;
color: @disabled-color; color: @disabled-color;
background-color: @input-disabled-bg;
border-color: @border-color-base;
cursor: not-allowed;
&:first-child, &:first-child,
&:hover { &:hover {
border-color: @border-color-base;
background-color: @input-disabled-bg;
color: @disabled-color; color: @disabled-color;
background-color: @input-disabled-bg;
border-color: @border-color-base;
} }
&:first-child { &:first-child {
border-left-color: @border-color-base; border-left-color: @border-color-base;
@ -278,8 +296,8 @@ span.@{radio-prefix-cls} + * {
} }
&-disabled&-checked { &-disabled&-checked {
color: #fff; color: @text-color-inverse;
background-color: #e6e6e6; background-color: tint(@black, 90%);
border-color: @border-color-base; border-color: @border-color-base;
box-shadow: none; box-shadow: none;
} }

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

@ -5,13 +5,13 @@
.@{rate-prefix-cls} { .@{rate-prefix-cls} {
.reset-component; .reset-component;
line-height: unset; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
font-size: 20px;
display: inline-block;
color: @rate-star-color; color: @rate-star-color;
font-size: 20px;
line-height: unset;
list-style: none;
outline: none; outline: none;
&-disabled &-star { &-disabled &-star {
@ -22,38 +22,40 @@
} }
&-star { &-star {
margin: 0;
padding: 0;
display: inline-block;
margin-right: 8px;
position: relative; position: relative;
transition: all 0.3s; display: inline-block;
margin: 0;
margin-right: 8px;
padding: 0;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
transition: all 0.3s;
> div {
&:focus { &:focus {
outline: 0; outline: 0;
} }
&-first,
&-second {
user-select: none;
transition: all 0.3s;
color: @rate-star-bg;
.@{iconfont-css-prefix} {
vertical-align: middle;
}
}
&:hover, &:hover,
&:focus { &:focus {
transform: scale(1.1); transform: scale(1.1);
} }
}
&-first,
&-second {
color: @rate-star-bg;
transition: all 0.3s;
user-select: none;
.@{iconfont-css-prefix} {
vertical-align: middle;
}
}
&-first { &-first {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
width: 50%; width: 50%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -72,8 +74,8 @@
} }
&-text { &-text {
margin-left: 8px;
display: inline-block; display: inline-block;
margin-left: 8px;
font-size: @font-size-base; font-size: @font-size-base;
} }
} }

1
components/select/style/index.js
View File

@ -2,4 +2,5 @@ import '../../style/index.less';
import './index.less'; import './index.less';
// style dependencies // style dependencies
import '../../empty/style';
import '../../input/style'; import '../../input/style';

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

@ -5,27 +5,26 @@
@select-prefix-cls: ~'@{ant-prefix}-select'; @select-prefix-cls: ~'@{ant-prefix}-select';
.selection__clear() { .selection__clear() {
display: inline-block;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
text-rendering: auto;
opacity: 0;
position: absolute; position: absolute;
top: 50%;
right: @control-padding-horizontal - 1px; right: @control-padding-horizontal - 1px;
z-index: 1; z-index: 1;
background: @component-background; display: inline-block;
top: 50%;
font-size: @font-size-sm;
color: @disabled-color;
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: -6px; margin-top: -6px;
color: @disabled-color;
font-size: @font-size-sm;
font-style: normal;
line-height: 12px; line-height: 12px;
text-align: center;
text-transform: none;
background: @component-background;
cursor: pointer; cursor: pointer;
opacity: 0;
transition: color 0.3s ease, opacity 0.15s ease; transition: color 0.3s ease, opacity 0.15s ease;
&:before { text-rendering: auto;
&::before {
display: block; display: block;
} }
&:hover { &:hover {
@ -35,8 +34,8 @@
.@{select-prefix-cls} { .@{select-prefix-cls} {
.reset-component; .reset-component;
display: inline-block;
position: relative; position: relative;
display: inline-block;
outline: 0; outline: 0;
ul, ul,
@ -57,11 +56,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
right: @control-padding-horizontal - 1px; right: @control-padding-horizontal - 1px;
line-height: 1;
margin-top: -@font-size-sm / 2; margin-top: -@font-size-sm / 2;
transform-origin: 50% 50%;
color: @disabled-color; color: @disabled-color;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 1;
transform-origin: 50% 50%;
& &-icon svg { & &-icon svg {
transition: transform 0.3s; transition: transform 0.3s;
@ -69,19 +68,19 @@
} }
&-selection { &-selection {
outline: none;
user-select: none;
box-sizing: border-box;
display: block; display: block;
box-sizing: border-box;
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base; border: @border-width-base @border-style-base @select-border-color;
border: @border-width-base @border-style-base @border-color-base;
// strange align fix for chrome but works // strange align fix for chrome but works
// https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
border-top-width: @border-width-base + 0.02px; border-top-width: @border-width-base + 0.02px;
border-radius: @border-radius-base;
outline: none;
transition: all 0.3s @ease-in-out; transition: all 0.3s @ease-in-out;
user-select: none;
&:hover { &:hover {
.hover; .hover;
@ -103,11 +102,11 @@
&-selected-value { &-selected-value {
float: left; float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%; max-width: 100%;
padding-right: 20px; padding-right: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
@ -125,7 +124,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border-color: @border-color-base; border-color: @select-border-color;
box-shadow: none; box-shadow: none;
} }
@ -137,33 +136,33 @@
} }
&-disabled &-selection--multiple &-selection__choice { &-disabled &-selection--multiple &-selection__choice {
background: @background-color-base;
color: #aaa;
padding-right: 10px; padding-right: 10px;
color: fade(@black, 33%);
background: @background-color-base;
&__remove { &__remove {
display: none; display: none;
} }
} }
&-selection--single { &-selection--single {
height: @input-height-base;
position: relative; position: relative;
height: @input-height-base;
cursor: pointer; cursor: pointer;
} }
&-selection__rendered { &-selection__rendered {
display: block;
margin-left: @control-padding-horizontal - 1px;
margin-right: @control-padding-horizontal - 1px;
position: relative; position: relative;
display: block;
margin-right: @control-padding-horizontal - 1px;
margin-left: @control-padding-horizontal - 1px;
line-height: @input-height-base - 2px; line-height: @input-height-base - 2px;
// https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026 // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
&:after { &::after {
content: '.';
visibility: hidden;
pointer-events: none;
display: inline-block; display: inline-block;
width: 0; width: 0;
visibility: hidden;
pointer-events: none;
content: '.';
} }
} }
@ -194,8 +193,8 @@
height: @input-height-sm; height: @input-height-sm;
} }
.@{select-prefix-cls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
line-height: @input-height-sm - 2px;
margin: 0 @control-padding-horizontal-sm - 1px; margin: 0 @control-padding-horizontal-sm - 1px;
line-height: @input-height-sm - 2px;
} }
.@{select-prefix-cls}-selection--multiple { .@{select-prefix-cls}-selection--multiple {
min-height: @input-height-sm; min-height: @input-height-sm;
@ -224,8 +223,8 @@
} }
&-search__field__wrap { &-search__field__wrap {
display: inline-block;
position: relative; position: relative;
display: inline-block;
} }
&-selection__placeholder, &-selection__placeholder,
@ -233,17 +232,17 @@
// for TreeSelect compatibility // for TreeSelect compatibility
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0;
right: 9px; right: 9px;
color: @input-placeholder-color; left: 0;
line-height: 20px;
height: 20px;
max-width: 100%; max-width: 100%;
height: 20px;
margin-top: -10px; margin-top: -10px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; color: @input-placeholder-color;
line-height: 20px;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
text-overflow: ellipsis;
} }
&-search__field__placeholder { &-search__field__placeholder {
@ -255,14 +254,14 @@
top: 0; top: 0;
left: 0; left: 0;
white-space: pre; white-space: pre;
pointer-events: none;
opacity: 0; opacity: 0;
pointer-events: none;
} }
&-search--inline { &-search--inline {
position: absolute; position: absolute;
height: 100%;
width: 100%; width: 100%;
height: 100%;
.@{select-prefix-cls}-search__field__wrap { .@{select-prefix-cls}-search__field__wrap {
width: 100%; width: 100%;
@ -270,14 +269,14 @@
} }
.@{select-prefix-cls}-search__field { .@{select-prefix-cls}-search__field {
border-width: 0;
font-size: 100%;
height: 100%;
width: 100%; width: 100%;
background: transparent; height: 100%;
outline: 0; font-size: 100%;
border-radius: @border-radius-base;
line-height: 1; line-height: 1;
background: transparent;
border-width: 0;
border-radius: @border-radius-base;
outline: 0;
} }
> i { > i {
@ -287,26 +286,26 @@
&-selection--multiple { &-selection--multiple {
min-height: @input-height-base; min-height: @input-height-base;
cursor: text;
padding-bottom: 3px; padding-bottom: 3px;
cursor: text;
.clearfix; .clearfix;
.@{select-prefix-cls}-search--inline { .@{select-prefix-cls}-search--inline {
float: left;
position: static; position: static;
float: left;
width: auto; width: auto;
max-width: 100%;
padding: 0; padding: 0;
max-width: 100%;
.@{select-prefix-cls}-search__field { .@{select-prefix-cls}-search__field {
max-width: 100%;
width: 0.75em; width: 0.75em;
max-width: 100%;
} }
} }
.@{select-prefix-cls}-selection__rendered { .@{select-prefix-cls}-selection__rendered {
margin-left: 5px;
margin-bottom: -3px;
height: auto; height: auto;
margin-bottom: -3px;
margin-left: 5px;
} }
.@{select-prefix-cls}-selection__placeholder { .@{select-prefix-cls}-selection__placeholder {
@ -315,25 +314,25 @@
> ul > li, > ul > li,
.@{select-prefix-cls}-selection__rendered > ul > li { .@{select-prefix-cls}-selection__rendered > ul > li {
height: @input-height-base - 8px;
// for tree-select // for tree-select
margin-top: 3px; margin-top: 3px;
height: @input-height-base - 8px;
line-height: @input-height-base - 8px - 2px; line-height: @input-height-base - 8px - 2px;
} }
.@{select-prefix-cls}-selection__choice { .@{select-prefix-cls}-selection__choice {
position: relative;
float: left;
max-width: 99%;
margin-right: 4px;
padding: 0 20px 0 10px;
overflow: hidden;
color: @tag-default-color; color: @tag-default-color;
background-color: @tag-default-bg; background-color: @tag-default-bg;
border: 1px solid @border-color-split; border: 1px solid @border-color-split;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
cursor: default; cursor: default;
float: left;
margin-right: 4px;
max-width: 99%;
position: relative;
overflow: hidden;
transition: padding 0.3s @ease-in-out; transition: padding 0.3s @ease-in-out;
padding: 0 20px 0 10px;
&__disabled { &__disabled {
padding: 0 10px; padding: 0 10px;
} }
@ -341,27 +340,27 @@
.@{select-prefix-cls}-selection__choice__content { .@{select-prefix-cls}-selection__choice__content {
display: inline-block; display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: margin 0.3s @ease-in-out; transition: margin 0.3s @ease-in-out;
} }
.@{select-prefix-cls}-selection__choice__remove { .@{select-prefix-cls}-selection__choice__remove {
.iconfont-mixin(); .iconfont-mixin();
color: @text-color-secondary;
line-height: inherit;
cursor: pointer;
display: inline-block;
font-weight: bold;
transition: all 0.3s;
font-size: @font-size-sm;
.iconfont-size-under-12px(10px);
position: absolute; position: absolute;
right: 4px; right: 4px;
display: inline-block;
color: @text-color-secondary;
font-weight: bold;
font-size: @font-size-sm;
line-height: inherit;
cursor: pointer;
transition: all 0.3s;
.iconfont-size-under-12px(10px);
&:hover { &:hover {
color: #404040; color: @icon-color-hover;
} }
} }
@ -394,21 +393,21 @@
display: none; display: none;
} }
.@{select-prefix-cls}-search--inline { .@{select-prefix-cls}-search--inline {
height: 100%;
width: 100%;
float: none; float: none;
width: 100%;
height: 100%;
} }
.@{select-prefix-cls}-search__field__wrap { .@{select-prefix-cls}-search__field__wrap {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.@{select-prefix-cls}-search__field { .@{select-prefix-cls}-search__field {
width: 100%;
height: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
transition: all 0.3s @ease-in-out, height 0s; width: 100%;
height: 100%;
box-shadow: none; box-shadow: none;
transition: all 0.3s @ease-in-out, height 0s;
} }
} }
&-combobox&-allow-clear &-selection:hover &-selection__rendered { &-combobox&-allow-clear &-selection:hover &-selection__rendered {
@ -418,11 +417,22 @@
.@{select-prefix-cls}-dropdown { .@{select-prefix-cls}-dropdown {
.reset-component; .reset-component;
position: absolute;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
box-sizing: border-box;
font-size: @font-size-base;
// Fix select render lag of long text in chrome // Fix select render lag of long text in chrome
// https://github.com/ant-design/ant-design/issues/11456 // https://github.com/ant-design/ant-design/issues/11456
// https://github.com/ant-design/ant-design/issues/11843 // https://github.com/ant-design/ant-design/issues/11843
font-variant: initial; font-variant: initial;
background-color: @component-background;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
animation-name: antSlideUpIn; animation-name: antSlideUpIn;
@ -445,24 +455,13 @@
display: none; display: none;
} }
background-color: @component-background;
box-shadow: @box-shadow-base;
border-radius: @border-radius-base;
box-sizing: border-box;
z-index: @zindex-dropdown;
left: -9999px;
top: -9999px;
position: absolute;
outline: none;
font-size: @font-size-base;
&-menu { &-menu {
outline: none; max-height: 250px;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
list-style: none;
max-height: 250px;
overflow: auto; overflow: auto;
list-style: none;
outline: none;
&-item-group-list { &-item-group-list {
margin: 0; margin: 0;
@ -474,11 +473,11 @@
} }
&-item-group-title { &-item-group-title {
color: @text-color-secondary;
padding: 0 @control-padding-horizontal;
height: 32px; height: 32px;
line-height: 32px; padding: 0 @control-padding-horizontal;
color: @text-color-secondary;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 32px;
} }
&-item-group-list &-item:first-child:not(:last-child), &-item-group-list &-item:first-child:not(:last-child),
@ -490,13 +489,13 @@
position: relative; position: relative;
display: block; display: block;
padding: 5px @control-padding-horizontal; padding: 5px @control-padding-horizontal;
line-height: 22px;
font-weight: normal;
color: @text-color;
white-space: nowrap;
cursor: pointer;
overflow: hidden; overflow: hidden;
color: @text-color;
font-weight: normal;
line-height: 22px;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer;
transition: background 0.3s ease; transition: background 0.3s ease;
&:hover { &:hover {
@ -525,9 +524,9 @@
&-selected { &-selected {
&, &,
&:hover { &:hover {
background-color: @background-color-light;
font-weight: 600;
color: @text-color; color: @text-color;
font-weight: 600;
background-color: @background-color-light;
} }
} }
@ -539,8 +538,8 @@
height: 1px; height: 1px;
margin: 1px 0; margin: 1px 0;
overflow: hidden; overflow: hidden;
background-color: @border-color-split;
line-height: 0; line-height: 0;
background-color: @border-color-split;
} }
} }
} }
@ -549,19 +548,19 @@
.@{select-prefix-cls}-dropdown-menu-item { .@{select-prefix-cls}-dropdown-menu-item {
padding-right: @control-padding-horizontal + 20; padding-right: @control-padding-horizontal + 20;
& .@{select-prefix-cls}-selected-icon { & .@{select-prefix-cls}-selected-icon {
color: transparent;
.iconfont-size-under-12px(10px);
transition: all 0.2s ease;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%);
right: @control-padding-horizontal; right: @control-padding-horizontal;
color: transparent;
font-weight: bold; font-weight: bold;
font-size: 12px;
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
transform: translateY(-50%);
transition: all .2s;
} }
&:hover .@{select-prefix-cls}-selected-icon { &:hover .@{select-prefix-cls}-selected-icon {
color: #ddd; color: fade(@black, 87%);
} }
&-disabled .@{select-prefix-cls}-selected-icon { &-disabled .@{select-prefix-cls}-selected-icon {
@ -570,8 +569,8 @@
&-selected .@{select-prefix-cls}-selected-icon, &-selected .@{select-prefix-cls}-selected-icon,
&-selected:hover .@{select-prefix-cls}-selected-icon { &-selected:hover .@{select-prefix-cls}-selected-icon {
color: @primary-color;
display: inline-block; display: inline-block;
color: @primary-color;
} }
} }
} }

16
components/skeleton/style/index.less
View File

@ -14,8 +14,8 @@
&-header { &-header {
display: table-cell; display: table-cell;
vertical-align: top;
padding-right: 16px; padding-right: 16px;
vertical-align: top;
// Avatar // Avatar
.@{skeleton-avatar-prefix-cls} { .@{skeleton-avatar-prefix-cls} {
@ -37,14 +37,14 @@
&-content { &-content {
display: table-cell; display: table-cell;
vertical-align: top;
width: 100%; width: 100%;
vertical-align: top;
// Title // Title
.@{skeleton-title-prefix-cls} { .@{skeleton-title-prefix-cls} {
margin-top: 16px;
height: 16px;
width: 100%; width: 100%;
height: 16px;
margin-top: 16px;
background: @skeleton-color; background: @skeleton-color;
+ .@{skeleton-paragraph-prefix-cls} { + .@{skeleton-paragraph-prefix-cls} {
@ -55,10 +55,10 @@
// paragraph // paragraph
.@{skeleton-paragraph-prefix-cls} { .@{skeleton-paragraph-prefix-cls} {
> li { > li {
height: 16px;
background: @skeleton-color;
list-style: none;
width: 100%; width: 100%;
height: 16px;
list-style: none;
background: @skeleton-color;
&:last-child:not(:first-child):not(:nth-child(2)) { &:last-child:not(:first-child):not(:nth-child(2)) {
width: 61%; width: 61%;
@ -114,8 +114,8 @@
@skeleton-to-color 37%, @skeleton-to-color 37%,
@skeleton-color 63% @skeleton-color 63%
); );
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
background-size: 400% 100%; background-size: 400% 100%;
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
} }
@keyframes ~"@{skeleton-prefix-cls}-loading" { @keyframes ~"@{skeleton-prefix-cls}-loading" {

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

@ -6,9 +6,9 @@
.@{slider-prefix-cls} { .@{slider-prefix-cls} {
.reset-component; .reset-component;
position: relative; position: relative;
height: 12px;
margin: @slider-margin; margin: @slider-margin;
padding: 4px 0; padding: 4px 0;
height: 12px;
cursor: pointer; cursor: pointer;
touch-action: none; touch-action: none;
@ -22,37 +22,37 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 4px; height: 4px;
border-radius: 2px;
background-color: @slider-rail-background-color; background-color: @slider-rail-background-color;
border-radius: 2px;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
&-track { &-track {
position: absolute; position: absolute;
height: 4px; height: 4px;
border-radius: @border-radius-base;
background-color: @slider-track-background-color; background-color: @slider-track-background-color;
border-radius: @border-radius-base;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
&-handle { &-handle {
position: absolute; position: absolute;
margin-left: -7px;
margin-top: -5px;
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: pointer; margin-top: -5px;
border-radius: 50%; margin-left: -7px;
border: solid 2px @slider-handle-color;
background-color: @component-background; background-color: @component-background;
border: solid 2px @slider-handle-color;
border-radius: 50%;
box-shadow: 0; box-shadow: 0;
cursor: pointer;
transition: border-color 0.3s, box-shadow 0.6s, transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&:focus { &:focus {
border-color: @slider-handle-color-focus; border-color: @slider-handle-color-focus;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
outline: none; outline: none;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
} }
&.@{ant-prefix}-tooltip-open { &.@{ant-prefix}-tooltip-open {
@ -83,10 +83,9 @@
&-mark-text { &-mark-text {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
vertical-align: middle; color: @text-color-secondary;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
color: @text-color-secondary;
&-active { &-active {
color: @text-color; color: @text-color;
@ -103,14 +102,13 @@
&-dot { &-dot {
position: absolute; position: absolute;
top: -2px; top: -2px;
margin-left: -4px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border: 2px solid @slider-dot-border-color; margin-left: -4px;
background-color: @component-background; background-color: @component-background;
cursor: pointer; border: 2px solid @slider-dot-border-color;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; cursor: pointer;
&:first-child { &:first-child {
margin-left: -4px; margin-left: -4px;
} }
@ -131,10 +129,10 @@
.@{slider-prefix-cls}-handle, .@{slider-prefix-cls}-handle,
.@{slider-prefix-cls}-dot { .@{slider-prefix-cls}-dot {
border-color: @slider-disabled-color !important;
background-color: @component-background; background-color: @component-background;
cursor: not-allowed; border-color: @slider-disabled-color !important;
box-shadow: none; box-shadow: none;
cursor: not-allowed;
} }
.@{slider-prefix-cls}-mark-text, .@{slider-prefix-cls}-mark-text,
@ -152,8 +150,8 @@
padding: 0 4px; padding: 0 4px;
.@{slider-prefix-cls}-rail { .@{slider-prefix-cls}-rail {
height: 100%;
width: 4px; width: 4px;
height: 100%;
} }
.@{slider-prefix-cls}-track { .@{slider-prefix-cls}-track {
@ -161,8 +159,8 @@
} }
.@{slider-prefix-cls}-handle { .@{slider-prefix-cls}-handle {
margin-left: -5px;
margin-bottom: -7px; margin-bottom: -7px;
margin-left: -5px;
} }
.@{slider-prefix-cls}-mark { .@{slider-prefix-cls}-mark {

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

@ -6,29 +6,29 @@
.@{spin-prefix-cls} { .@{spin-prefix-cls} {
.reset-component; .reset-component;
color: @primary-color;
vertical-align: middle;
text-align: center;
opacity: 0;
position: absolute; position: absolute;
transition: transform 0.3s @ease-in-out-circ;
display: none; display: none;
color: @primary-color;
text-align: center;
vertical-align: middle;
opacity: 0;
transition: transform 0.3s @ease-in-out-circ;
&-spinning { &-spinning {
opacity: 1;
position: static; position: static;
display: inline-block; display: inline-block;
opacity: 1;
} }
&-nested-loading { &-nested-loading {
position: relative; position: relative;
> div > .@{spin-prefix-cls} { > div > .@{spin-prefix-cls} {
display: block;
position: absolute; position: absolute;
z-index: 4;
display: block;
width: 100%;
height: 100%; height: 100%;
max-height: 400px; max-height: 400px;
width: 100%;
z-index: 4;
.@{spin-prefix-cls}-dot { .@{spin-prefix-cls}-dot {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -40,7 +40,7 @@
top: 50%; top: 50%;
width: 100%; 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 #fff; text-shadow: 0 1px 2px @shadow-color-inverse;
} }
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size / 2 - 10px; margin-top: -@spin-dot-size / 2 - 10px;
@ -76,30 +76,32 @@
position: relative; position: relative;
transition: opacity 0.3s; transition: opacity 0.3s;
&:after { &::after {
content: '';
position: absolute; position: absolute;
left: 0;
right: 0;
top: 0; top: 0;
right: 0;
bottom: 0; bottom: 0;
background: #fff; left: 0;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
height: 100%;
width: 100%;
z-index: 10; z-index: 10;
display: ~'none \9';
width: 100%;
height: 100%;
background: @component-background;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
content: '';
} }
} }
&-blur { &-blur {
pointer-events: none; clear: both;
user-select: none;
overflow: hidden; overflow: hidden;
opacity: 0.5; opacity: 0.5;
user-select: none;
pointer-events: none;
&:after { &::after {
opacity: 0.4; opacity: 0.4;
pointer-events: auto; pointer-events: auto;
} }
@ -122,23 +124,23 @@
.square(@spin-dot-size); .square(@spin-dot-size);
i { i {
position: absolute;
display: block;
width: 9px; width: 9px;
height: 9px; height: 9px;
border-radius: 100%;
background-color: @primary-color; background-color: @primary-color;
border-radius: 100%;
transform: scale(0.75); transform: scale(0.75);
display: block; transform-origin: 50% 50%;
position: absolute;
opacity: 0.3; opacity: 0.3;
animation: antSpinMove 1s infinite linear alternate; animation: antSpinMove 1s infinite linear alternate;
transform-origin: 50% 50%;
&:nth-child(1) { &:nth-child(1) {
left: 0;
top: 0; top: 0;
left: 0;
} }
&:nth-child(2) { &:nth-child(2) {
right: 0;
top: 0; top: 0;
right: 0;
animation-delay: 0.4s; animation-delay: 0.4s;
} }
&:nth-child(3) { &:nth-child(3) {
@ -147,8 +149,8 @@
animation-delay: 0.8s; animation-delay: 0.8s;
} }
&:nth-child(4) { &:nth-child(4) {
left: 0;
bottom: 0; bottom: 0;
left: 0;
animation-delay: 1.2s; animation-delay: 1.2s;
} }
} }

50
components/steps/style/compatibility.less Normal file
View File

@ -0,0 +1,50 @@
.@{steps-prefix-cls}-flex-not-supported {
&.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
.@{steps-prefix-cls}-item {
margin-left: -16px;
padding-left: 16px;
background: @steps-background;
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item {
margin-left: -12px;
padding-left: 12px;
}
}
&.@{steps-prefix-cls}-dot {
.@{steps-prefix-cls}-item {
&:last-child {
overflow: hidden;
.@{steps-prefix-cls}-icon-dot::after {
right: -200px;
width: 200px;
}
}
.@{steps-prefix-cls}-icon-dot::before,
.@{steps-prefix-cls}-icon-dot::after {
position: absolute;
top: 0;
left: -10px;
width: 10px;
height: 8px;
background: @steps-background;
content: '';
}
.@{steps-prefix-cls}-icon-dot::after {
right: -10px;
left: auto;
}
}
.@{steps-prefix-cls}-item-wait
.@{steps-prefix-cls}-item-icon
> .@{steps-prefix-cls}-icon
.@{steps-prefix-cls}-icon-dot {
background: #ccc;
}
}
}

18
components/steps/style/custom-icon.less
View File

@ -1,16 +1,15 @@
.@{steps-prefix-cls}-item-custom { .@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon { .@{steps-prefix-cls}-item-icon {
height: auto;
background: none; background: none;
border: 0; border: 0;
width: auto;
height: auto;
> .@{steps-prefix-cls}-icon { > .@{steps-prefix-cls}-icon {
font-size: 24px;
line-height: @steps-icon-size;
top: 0; top: 0;
left: 0.5px; left: 0.5px;
width: @steps-icon-size; width: @steps-icon-size;
height: @steps-icon-size; height: @steps-icon-size;
font-size: 24px;
line-height: @steps-icon-size;
} }
} }
&.@{steps-prefix-cls}-item-process { &.@{steps-prefix-cls}-item-process {
@ -19,3 +18,14 @@
} }
} }
} }
// Only adjust horizontal customize icon width
.@{steps-prefix-cls} {
&:not(.@{steps-prefix-cls}-vertical) {
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
width: auto;
}
}
}
}

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

@ -6,7 +6,7 @@
@process-title-color: @heading-color; @process-title-color: @heading-color;
@process-description-color: @text-color; @process-description-color: @text-color;
@process-tail-color: @border-color-split; @process-tail-color: @border-color-split;
@process-icon-text-color: #fff; @process-icon-text-color: @text-color-inverse;
@wait-icon-color: @disabled-color; @wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary; @wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color; @wait-description-color: @wait-title-color;
@ -29,24 +29,24 @@
.@{steps-prefix-cls} { .@{steps-prefix-cls} {
.reset-component; .reset-component;
font-size: 0;
width: 100%;
display: flex; display: flex;
width: 100%;
font-size: 0;
} }
.@{steps-prefix-cls}-item { .@{steps-prefix-cls}-item {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: top;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
vertical-align: top;
&:last-child { &:last-child {
flex: none; flex: none;
} }
&:last-child &-tail, &:last-child &-tail,
&:last-child &-title:after { &:last-child &-title::after {
display: none; display: none;
} }
@ -57,61 +57,61 @@
} }
&-icon { &-icon {
border: @border-width-base @border-style-base @wait-icon-color;
width: @steps-icon-size; width: @steps-icon-size;
height: @steps-icon-size; height: @steps-icon-size;
margin-right: 8px;
font-size: @font-size-lg;
font-family: @font-family;
line-height: @steps-icon-size; line-height: @steps-icon-size;
text-align: center; text-align: center;
border: @border-width-base @border-style-base @wait-icon-color;
border-radius: @steps-icon-size; border-radius: @steps-icon-size;
font-size: @font-size-lg;
margin-right: 8px;
transition: background-color 0.3s, border-color 0.3s; transition: background-color 0.3s, border-color 0.3s;
font-family: @font-family;
> .@{steps-prefix-cls}-icon { > .@{steps-prefix-cls}-icon {
line-height: 1; position: relative;
top: -1px; top: -1px;
color: @primary-color; color: @primary-color;
position: relative; line-height: 1;
} }
} }
&-tail { &-tail {
position: absolute; position: absolute;
top: 12px;
left: 0; left: 0;
width: 100%; width: 100%;
top: 12px;
padding: 0 10px; padding: 0 10px;
&:after { &::after {
content: '';
display: inline-block; display: inline-block;
background: @border-color-split;
height: 1px;
border-radius: 1px;
width: 100%; width: 100%;
height: 1px;
background: @border-color-split;
border-radius: 1px;
transition: background 0.3s; transition: background 0.3s;
content: '';
} }
} }
&-title { &-title {
font-size: @font-size-lg; position: relative;
color: @text-color;
display: inline-block; display: inline-block;
padding-right: 16px; padding-right: 16px;
position: relative; color: @text-color;
font-size: @font-size-lg;
line-height: @steps-icon-size; line-height: @steps-icon-size;
&:after { &::after {
content: '';
height: 1px;
width: 9999px;
background: @wait-tail-color;
display: block;
position: absolute; position: absolute;
top: @steps-icon-size / 2; top: @steps-icon-size / 2;
left: 100%; left: 100%;
display: block;
width: 9999px;
height: 1px;
background: @wait-tail-color;
content: '';
} }
} }
&-description { &-description {
font-size: @font-size-base;
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base;
} }
.step-item-status(wait); .step-item-status(wait);
.step-item-status(process); .step-item-status(process);
@ -127,7 +127,7 @@
.step-item-status(finish); .step-item-status(finish);
.step-item-status(error); .step-item-status(error);
&.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title:after { &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
background: @error-icon-color; background: @error-icon-color;
} }
} }
@ -158,8 +158,8 @@
@description-color: '@{status}-description-color'; @description-color: '@{status}-description-color';
@tail-color: '@{status}-tail-color'; @tail-color: '@{status}-tail-color';
&-@{status} &-icon { &-@{status} &-icon {
border-color: @@icon-color;
background-color: @steps-background; background-color: @steps-background;
border-color: @@icon-color;
> .@{steps-prefix-cls}-icon { > .@{steps-prefix-cls}-icon {
color: @@icon-color; color: @@icon-color;
.@{steps-prefix-cls}-icon-dot { .@{steps-prefix-cls}-icon-dot {
@ -169,14 +169,14 @@
} }
&-@{status} > &-content > &-title { &-@{status} > &-content > &-title {
color: @@title-color; color: @@title-color;
&:after { &::after {
background-color: @@tail-color; background-color: @@tail-color;
} }
} }
&-@{status} > &-content > &-description { &-@{status} > &-content > &-description {
color: @@description-color; color: @@description-color;
} }
&-@{status} > &-tail:after { &-@{status} > &-tail::after {
background-color: @@tail-color; background-color: @@tail-color;
} }
} }
@ -186,3 +186,4 @@
@import 'vertical'; @import 'vertical';
@import 'label-placement'; @import 'label-placement';
@import 'progress-dot'; @import 'progress-dot';
@import 'compatibility';

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

@ -2,15 +2,15 @@
.@{steps-prefix-cls}-item { .@{steps-prefix-cls}-item {
overflow: visible; overflow: visible;
&-tail { &-tail {
padding: 0 24px; margin-left: 51px;
margin-left: 48px; padding: 3.5px 24px;
} }
&-content { &-content {
display: block; display: block;
text-align: center;
margin-top: 8px;
// icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
width: (@steps-icon-size / 2 + 36px) * 2; width: (@steps-icon-size / 2 + 36px) * 2;
margin-top: 8px;
text-align: center;
} }
&-icon { &-icon {
display: inline-block; display: inline-block;
@ -18,7 +18,7 @@
} }
&-title { &-title {
padding-right: 0; padding-right: 0;
&:after { &::after {
display: none; display: none;
} }
} }

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

@ -4,13 +4,13 @@
line-height: @line-height-base; line-height: @line-height-base;
} }
&-tail { &-tail {
width: 100%;
top: 2px; top: 2px;
width: 100%;
margin: 0 0 0 @steps-desciption-max-width / 2; margin: 0 0 0 @steps-desciption-max-width / 2;
padding: 0; padding: 0;
&:after { &::after {
height: 3px;
width: ~'calc(100% - 20px)'; width: ~'calc(100% - 20px)';
height: 3px;
margin-left: 12px; margin-left: 12px;
} }
} }
@ -18,29 +18,29 @@
left: 2px; left: 2px;
} }
&-icon { &-icon {
padding-right: 0;
width: @steps-dot-size; width: @steps-dot-size;
height: @steps-dot-size; height: @steps-dot-size;
line-height: @steps-dot-size;
border: 0;
margin-left: 67px; margin-left: 67px;
padding-right: 0;
line-height: @steps-dot-size;
background: transparent; background: transparent;
border: 0;
.@{steps-prefix-cls}-icon-dot { .@{steps-prefix-cls}-icon-dot {
position: relative;
float: left; float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100px; border-radius: 100px;
position: relative;
transition: all 0.3s; transition: all 0.3s;
/* expand hover area */ /* expand hover area */
&:after { &::after {
content: '';
background: rgba(0, 0, 0, 0.001);
width: 60px;
height: 32px;
position: absolute; position: absolute;
top: -12px; top: -12px;
left: -26px; left: -26px;
width: 60px;
height: 32px;
background: fade(@black, 0.1%);
content: '';
} }
} }
} }
@ -60,13 +60,13 @@
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot { .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
.@{steps-prefix-cls}-item-icon { .@{steps-prefix-cls}-item-icon {
margin-left: 0;
margin-top: 8px; margin-top: 8px;
margin-left: 0;
} }
.@{steps-prefix-cls}-item-tail { .@{steps-prefix-cls}-item-tail {
margin: 0;
left: -9px;
top: 2px; top: 2px;
left: -9px;
margin: 0;
padding: 22px 0 4px; padding: 22px 0 4px;
} }
.@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot { .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {

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

@ -9,22 +9,22 @@
.@{steps-prefix-cls}-item-icon { .@{steps-prefix-cls}-item-icon {
width: @steps-small-icon-size; width: @steps-small-icon-size;
height: @steps-small-icon-size; height: @steps-small-icon-size;
font-size: @font-size-sm;
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;
text-align: center; text-align: center;
border-radius: @steps-small-icon-size; border-radius: @steps-small-icon-size;
font-size: @font-size-sm;
} }
.@{steps-prefix-cls}-item-title { .@{steps-prefix-cls}-item-title {
padding-right: 12px;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;
padding-right: 12px; &::after {
&:after {
top: @steps-small-icon-size / 2; top: @steps-small-icon-size / 2;
} }
} }
.@{steps-prefix-cls}-item-description { .@{steps-prefix-cls}-item-description {
font-size: @font-size-base;
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base;
} }
.@{steps-prefix-cls}-item-tail { .@{steps-prefix-cls}-item-tail {
top: 8px; top: 8px;
@ -34,9 +34,9 @@
width: inherit; width: inherit;
height: inherit; height: inherit;
line-height: inherit; line-height: inherit;
border-radius: 0;
border: 0;
background: none; background: none;
border: 0;
border-radius: 0;
> .@{steps-prefix-cls}-icon { > .@{steps-prefix-cls}-icon {
font-size: @steps-small-icon-size; font-size: @steps-small-icon-size;
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;

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

@ -8,9 +8,9 @@
margin-right: 16px; margin-right: 16px;
} }
&-content { &-content {
display: block;
min-height: 48px; min-height: 48px;
overflow: hidden; overflow: hidden;
display: block;
} }
&-title { &-title {
line-height: @steps-icon-size; line-height: @steps-icon-size;
@ -22,14 +22,14 @@
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail { > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
position: absolute; position: absolute;
left: 16px;
top: 0; top: 0;
height: 100%; left: 16px;
width: 1px; width: 1px;
height: 100%;
padding: @steps-icon-size + 6px 0 6px; padding: @steps-icon-size + 6px 0 6px;
&:after { &::after {
height: 100%;
width: 1px; width: 1px;
height: 100%;
} }
} }
@ -40,7 +40,7 @@
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-content > .@{steps-prefix-cls}-item-content
> .@{steps-prefix-cls}-item-title { > .@{steps-prefix-cls}-item-title {
&:after { &::after {
display: none; display: none;
} }
} }
@ -48,8 +48,8 @@
&.@{steps-prefix-cls}-small { &.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item-tail { .@{steps-prefix-cls}-item-tail {
position: absolute; position: absolute;
left: 12px;
top: 0; top: 0;
left: 12px;
padding: @steps-small-icon-size + 6px 0 6px; padding: @steps-small-icon-size + 6px 0 6px;
} }
.@{steps-prefix-cls}-item-title { .@{steps-prefix-cls}-item-title {

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

@ -9,61 +9,61 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
height: @switch-height;
min-width: 44px; min-width: 44px;
height: @switch-height;
line-height: @switch-height - 2px; line-height: @switch-height - 2px;
vertical-align: middle; vertical-align: middle;
border-radius: 100px;
border: 1px solid transparent;
background-color: @disabled-color; background-color: @disabled-color;
border: 1px solid transparent;
border-radius: 100px;
cursor: pointer; cursor: pointer;
transition: all @switch-duration; transition: all @switch-duration;
user-select: none; user-select: none;
&-inner { &-inner {
color: #fff;
font-size: @font-size-sm;
margin-left: 24px;
margin-right: 6px;
display: block; display: block;
margin-right: 6px;
margin-left: 24px;
color: @text-color-inverse;
font-size: @font-size-sm;
} }
&-loading-icon, &-loading-icon,
&:after { &::after {
position: absolute; position: absolute;
top: 1px;
left: 1px;
width: @switch-height - 4px; width: @switch-height - 4px;
height: @switch-height - 4px; height: @switch-height - 4px;
left: 1px;
top: 1px;
border-radius: 18px;
background-color: @component-background; background-color: @component-background;
content: ' '; border-radius: 18px;
cursor: pointer; cursor: pointer;
transition: all @switch-duration @ease-in-out-circ; transition: all @switch-duration @ease-in-out-circ;
content: ' ';
} }
&:after { &::after {
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2); box-shadow: 0 2px 4px 0 @switch-shadow-color;
} }
&:active:before, &:active::before,
&:active:after { &:active::after {
width: 24px; width: 24px;
} }
&-loading-icon { &-loading-icon {
// loading default use animation
// animation: loadingCircle 1s infinite linear;
background: transparent;
z-index: 1; z-index: 1;
display: none; display: none;
font-size: 12px; font-size: 12px;
// loading default use animation
// animation: loadingCircle 1s infinite linear;
background: transparent;
svg { svg {
position: absolute; position: absolute;
left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
margin: auto; margin: auto;
} }
} }
@ -78,8 +78,8 @@
} }
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@switch-color, 20%);
outline: 0; outline: 0;
box-shadow: 0 0 0 2px fade(@switch-color, 20%);
} }
&:focus:hover { &:focus:hover {
@ -87,23 +87,23 @@
} }
&-small { &-small {
height: @switch-sm-height;
min-width: 28px; min-width: 28px;
height: @switch-sm-height;
line-height: @switch-sm-height - 2px; line-height: @switch-sm-height - 2px;
.@{switch-prefix-cls}-inner { .@{switch-prefix-cls}-inner {
margin-left: 18px;
margin-right: 3px; margin-right: 3px;
margin-left: 18px;
font-size: @font-size-sm; font-size: @font-size-sm;
} }
&:after { &::after {
width: @switch-sm-height - 4px; width: @switch-sm-height - 4px;
height: @switch-sm-height - 4px; height: @switch-sm-height - 4px;
} }
&:active:before, &:active::before,
&:active:after { &:active::after {
width: 16px; width: 16px;
} }
} }
@ -115,8 +115,8 @@
&-small&-checked { &-small&-checked {
.@{switch-prefix-cls}-inner { .@{switch-prefix-cls}-inner {
margin-left: 3px;
margin-right: 18px; margin-right: 18px;
margin-left: 3px;
} }
} }
@ -126,23 +126,23 @@
} }
&-small&-loading &-loading-icon { &-small&-loading &-loading-icon {
font-weight: bold;
// animation: AntSwitchSmallLoadingCircle 1s infinite linear; // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
transform: scale(0.66667); transform: scale(0.66667);
font-weight: bold;
} }
&-checked { &-checked {
background-color: @switch-color; background-color: @switch-color;
.@{switch-prefix-cls}-inner { .@{switch-prefix-cls}-inner {
margin-left: 6px;
margin-right: 24px; margin-right: 24px;
margin-left: 6px;
} }
&:after { &::after {
left: 100%; left: 100%;
transform: translateX(-100%);
margin-left: -1px; margin-left: -1px;
transform: translateX(-100%);
} }
} }
@ -158,16 +158,20 @@
* { * {
cursor: not-allowed; cursor: not-allowed;
} }
&::before,
&::after {
cursor: not-allowed;
}
} }
} }
@keyframes AntSwitchSmallLoadingCircle { @keyframes AntSwitchSmallLoadingCircle {
0% { 0% {
transform-origin: 50% 50%;
transform: rotate(0deg) scale(0.66667); transform: rotate(0deg) scale(0.66667);
transform-origin: 50% 50%;
} }
100% { 100% {
transform-origin: 50% 50%;
transform: rotate(360deg) scale(0.66667); transform: rotate(360deg) scale(0.66667);
transform-origin: 50% 50%;
} }
} }

1
components/table/style/index.js
View File

@ -2,6 +2,7 @@ import '../../style/index.less';
import './index.less'; import './index.less';
// style dependencies // style dependencies
import '../../empty/style';
import '../../radio/style'; import '../../radio/style';
import '../../checkbox/style'; import '../../checkbox/style';
import '../../dropdown/style'; import '../../dropdown/style';

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

@ -25,18 +25,18 @@
table { table {
width: 100%; width: 100%;
border-collapse: collapse;
text-align: left; text-align: left;
border-radius: @table-border-radius-base @table-border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
border-collapse: collapse;
} }
&-thead > tr > th { &-thead > tr > th {
background: @table-header-bg;
transition: background 0.3s ease;
text-align: left;
color: @table-header-color; color: @table-header-color;
font-weight: 500; font-weight: 500;
text-align: left;
background: @table-header-bg;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
transition: background 0.3s ease;
&[colspan] { &[colspan] {
text-align: center; text-align: center;
@ -44,16 +44,16 @@
.@{iconfont-css-prefix}-filter, .@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon { .@{table-prefix-cls}-filter-icon {
font-size: @font-size-sm;
cursor: pointer;
color: @table-header-icon-color;
transition: all 0.3s;
width: 28px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: 28px;
height: 100%; height: 100%;
color: @table-header-icon-color;
font-size: @font-size-sm;
text-align: center; text-align: center;
cursor: pointer;
transition: all 0.3s;
> svg { > svg {
position: absolute; position: absolute;
@ -70,22 +70,22 @@
.@{table-prefix-cls}-column-sorter { .@{table-prefix-cls}-column-sorter {
position: absolute; position: absolute;
right: 6px;
top: 50%; top: 50%;
right: 6px;
width: 14px; width: 14px;
height: @font-size-lg + 1px; height: @font-size-lg + 1px;
margin-top: -(@font-size-lg + 1px) / 2; margin-top: -(@font-size-lg + 1px) / 2;
text-align: center;
color: @table-header-icon-color; color: @table-header-icon-color;
text-align: center;
transition: all 0.3s; transition: all 0.3s;
&-up, &-up,
&-down { &-down {
.iconfont-size-under-12px(11px); .iconfont-size-under-12px(11px);
line-height: 4px;
height: 4px;
transition: all 0.3s;
display: block; display: block;
height: 4px;
line-height: 4px;
transition: all 0.3s;
&.on { &.on {
color: @primary-color; color: @primary-color;
} }
@ -99,6 +99,8 @@
&.@{table-prefix-cls}-column-has-actions { &.@{table-prefix-cls}-column-has-actions {
position: relative; position: relative;
background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628 background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
/* stylelint-disable-next-line */
-webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
&.@{table-prefix-cls}-column-has-filters { &.@{table-prefix-cls}-column-has-filters {
.@{iconfont-css-prefix}-filter, .@{iconfont-css-prefix}-filter,
@ -152,17 +154,20 @@
} }
.@{table-prefix-cls}-column-sorters { .@{table-prefix-cls}-column-sorters {
&:before { > *:not(.@{table-prefix-cls}-column-sorter) {
position: relative;
}
&::before {
position: absolute; position: absolute;
content: '';
top: 0; top: 0;
left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0;
background: transparent; background: transparent;
transition: all 0.3s; transition: all 0.3s;
content: '';
} }
&:hover:before { &:hover::before {
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
} }
} }
@ -213,19 +218,19 @@
} }
&-footer { &-footer {
position: relative;
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;
background: @table-header-bg; background: @table-header-bg;
border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
position: relative;
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
&:before { border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
content: ''; &::before {
height: 1px;
background: @table-header-bg;
position: absolute; position: absolute;
top: -1px; top: -1px;
width: 100%;
left: 0; left: 0;
width: 100%;
height: 1px;
background: @table-header-bg;
content: '';
} }
} }
@ -234,22 +239,22 @@
} }
&-title { &-title {
padding: @table-padding-vertical 0;
position: relative; position: relative;
top: 1px; top: 1px;
padding: @table-padding-vertical 0;
border-radius: @table-border-radius-base @table-border-radius-base 0 0; border-radius: @table-border-radius-base @table-border-radius-base 0 0;
} }
&.@{table-prefix-cls}-bordered &-title { &.@{table-prefix-cls}-bordered &-title {
border: @border-width-base @border-style-base @border-color-split;
padding-left: @table-padding-horizontal;
padding-right: @table-padding-horizontal; padding-right: @table-padding-horizontal;
padding-left: @table-padding-horizontal;
border: @border-width-base @border-style-base @border-color-split;
} }
&-title + &-content { &-title + &-content {
position: relative; position: relative;
border-radius: @table-border-radius-base @table-border-radius-base 0 0;
overflow: hidden; overflow: hidden;
border-radius: @table-border-radius-base @table-border-radius-base 0 0;
.@{table-prefix-cls}-bordered & { .@{table-prefix-cls}-bordered & {
&, &,
table, table,
@ -265,6 +270,12 @@
border-radius: 0; border-radius: 0;
} }
// https://github.com/ant-design/ant-design/issues/14834
&-without-column-header&-bordered&-empty &-placeholder {
border-top: 1px solid @border-color-split;
border-radius: @border-radius-base;
}
&-tbody > tr.@{table-prefix-cls}-row-selected td { &-tbody > tr.@{table-prefix-cls}-row-selected td {
background: @table-selected-row-bg; background: @table-selected-row-bg;
} }
@ -291,8 +302,6 @@
&-thead > tr > th.@{table-prefix-cls}-selection-column, &-thead > tr > th.@{table-prefix-cls}-selection-column,
&-tbody > tr > td.@{table-prefix-cls}-selection-column { &-tbody > tr > td.@{table-prefix-cls}-selection-column {
text-align: center; text-align: center;
min-width: 62px;
width: 62px;
.@{ant-prefix}-radio-wrapper { .@{ant-prefix}-radio-wrapper {
margin-right: 0; margin-right: 0;
} }
@ -300,14 +309,14 @@
&-expand-icon-th, &-expand-icon-th,
&-row-expand-icon-cell { &-row-expand-icon-cell {
text-align: center;
min-width: 50px;
width: 50px; width: 50px;
min-width: 50px;
text-align: center;
} }
&-header { &-header {
background: @table-header-bg;
overflow: hidden; overflow: hidden;
background: @table-header-bg;
} }
&-header table { &-header table {
@ -321,12 +330,12 @@
opacity: 0.5; opacity: 0.5;
} }
.@{table-prefix-cls}-spin-holder { .@{table-prefix-cls}-spin-holder {
height: 20px;
line-height: 20px;
left: 50%;
top: 50%;
margin-left: -30px;
position: absolute; position: absolute;
top: 50%;
left: 50%;
height: 20px;
margin-left: -30px;
line-height: 20px;
} }
.@{table-prefix-cls}-with-pagination { .@{table-prefix-cls}-with-pagination {
margin-top: -20px; margin-top: -20px;
@ -348,8 +357,8 @@
&.@{table-prefix-cls}-empty { &.@{table-prefix-cls}-empty {
.@{table-prefix-cls}-placeholder { .@{table-prefix-cls}-placeholder {
border-left: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
} }
} }
@ -359,18 +368,14 @@
} }
.@{table-prefix-cls}-body > table { .@{table-prefix-cls}-body > table {
border-top: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.@{table-prefix-cls}-header + .@{table-prefix-cls}-body > table,
.@{table-prefix-cls}-body-inner > table { .@{table-prefix-cls}-body-inner > table {
border-top: 0; border-top: 0;
} }
.@{table-prefix-cls}-placeholder {
border: 0;
}
} }
.@{table-prefix-cls}-thead > tr:not(:last-child) > th { .@{table-prefix-cls}-thead > tr:not(:last-child) > th {
@ -385,35 +390,36 @@
&-placeholder { &-placeholder {
position: relative; position: relative;
z-index: 1;
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;
color: @text-color-secondary;
font-size: @font-size-base;
text-align: center;
background: @component-background; background: @component-background;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
text-align: center; border-radius: 0 0 @border-radius-base @border-radius-base;
font-size: @font-size-base;
color: @text-color-secondary;
z-index: 1;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin-right: 4px; margin-right: 4px;
} }
} }
&-pagination.@{ant-prefix}-pagination { &-pagination.@{ant-prefix}-pagination {
margin: 16px 0;
float: right; float: right;
margin: 16px 0;
} }
&-filter-dropdown { &-filter-dropdown {
position: relative;
min-width: 96px; min-width: 96px;
margin-left: -8px; margin-left: -8px;
background: @component-background; background: @component-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
position: relative;
.@{ant-prefix}-dropdown-menu { .@{ant-prefix}-dropdown-menu {
border: 0; border: 0;
box-shadow: none;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
box-shadow: none;
// https://github.com/ant-design/ant-design/issues/4916 // https://github.com/ant-design/ant-design/issues/4916
&-without-submenu { &-without-submenu {
@ -431,7 +437,7 @@
} }
.@{ant-prefix}-dropdown-submenu-contain-selected { .@{ant-prefix}-dropdown-submenu-contain-selected {
.@{ant-prefix}-dropdown-menu-submenu-title:after { .@{ant-prefix}-dropdown-menu-submenu-title::after {
color: @primary-color; color: @primary-color;
font-weight: bold; font-weight: bold;
text-shadow: 0 0 2px @primary-2; text-shadow: 0 0 2px @primary-2;
@ -451,8 +457,8 @@
} }
&-btns { &-btns {
overflow: hidden;
padding: 7px 8px; padding: 7px 8px;
overflow: hidden;
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
} }
@ -474,6 +480,8 @@
} }
&-selection { &-selection {
white-space: nowrap;
&-select-all-custom { &-select-all-custom {
margin-right: 4px !important; margin-right: 4px !important;
} }
@ -497,40 +505,40 @@
} }
&-down { &-down {
cursor: pointer;
padding: 0;
display: inline-block; display: inline-block;
padding: 0;
line-height: 1; line-height: 1;
cursor: pointer;
&:hover .@{iconfont-css-prefix}-down { &:hover .@{iconfont-css-prefix}-down {
color: #666; color: fade(@black, 60%);
} }
} }
} }
&-row { &-row {
&-expand-icon { &-expand-icon {
cursor: pointer;
display: inline-block; display: inline-block;
width: 17px; width: 17px;
height: 17px; height: 17px;
text-align: center;
line-height: 14px; line-height: 14px;
border: @border-width-base @border-style-base @border-color-split; text-align: center;
user-select: none;
background: @component-background; background: @component-background;
border: @border-width-base @border-style-base @border-color-split;
cursor: pointer;
user-select: none;
} }
&-expanded:after { &-expanded::after {
content: '-'; content: '-';
} }
&-collapsed:after { &-collapsed::after {
content: '+'; content: '+';
} }
&-spaced { &-spaced {
visibility: hidden; visibility: hidden;
&:after { &::after {
content: '.'; content: '.';
} }
} }
@ -561,6 +569,11 @@
table { table {
width: auto; width: auto;
min-width: 100%; min-width: 100%;
// https://github.com/ant-design/ant-design/issues/14545
.@{table-prefix-cls}-fixed-columns-in-body {
visibility: hidden;
}
} }
} }
@ -578,9 +591,9 @@
} }
&-fixed-header &-scroll &-header { &-fixed-header &-scroll &-header {
overflow: scroll;
padding-bottom: 20px;
margin-bottom: -20px; margin-bottom: -20px;
padding-bottom: 20px;
overflow: scroll;
// Workaround for additional scroll bar on the table header // Workaround for additional scroll bar on the table header
// https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369 // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
opacity: 0.9999; opacity: 0.9999;
@ -590,9 +603,10 @@
&-fixed-right { &-fixed-right {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: @zindex-table-fixed;
overflow: hidden; overflow: hidden;
transition: box-shadow 0.3s ease;
border-radius: 0; border-radius: 0;
transition: box-shadow 0.3s ease;
table { table {
width: auto; width: auto;
background: @component-background; background: @component-background;

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

@ -45,8 +45,8 @@
} }
> .@{table-prefix-cls}-title { > .@{table-prefix-cls}-title {
border-bottom: @border-width-base @border-style-base @border-color-split;
top: 0; top: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
} }
> .@{table-prefix-cls}-content { > .@{table-prefix-cls}-content {
@ -74,7 +74,7 @@
padding: @table-padding-vertical-sm @table-padding-horizontal-sm; padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
} }
> .@{table-prefix-cls}-thead > tr > th { > .@{table-prefix-cls}-thead > tr > th {
background-color: @component-background; background-color: transparent;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
} }
> .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort { > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
@ -112,8 +112,8 @@
.@{table-prefix-cls}-title { .@{table-prefix-cls}-title {
border: 0; border: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
} }
.@{table-prefix-cls}-content { .@{table-prefix-cls}-content {
@ -124,15 +124,15 @@
border: 0; border: 0;
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
&:before { &::before {
display: none; display: none;
} }
} }
.@{table-prefix-cls}-placeholder { .@{table-prefix-cls}-placeholder {
border-left: 0;
border-bottom: 0;
border-right: 0; border-right: 0;
border-bottom: 0;
border-left: 0;
} }
.@{table-prefix-cls}-thead > tr > th:last-child, .@{table-prefix-cls}-thead > tr > th:last-child,
@ -148,8 +148,8 @@
} }
.@{table-prefix-cls}-fixed-right { .@{table-prefix-cls}-fixed-right {
border-left: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split; border-right: @border-width-base @border-style-base @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
} }
} }

46
components/tabs/style/card-style.less
View File

@ -13,20 +13,20 @@
} }
&&-card &-card-bar &-tab { &&-card &-card-bar &-tab {
margin: 0; margin: 0;
margin-right: 2px;
padding: 0 16px;
line-height: @tabs-card-height - 2px;
background: @tabs-card-head-background;
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-split;
border-bottom: 0; border-bottom: 0;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
background: @tabs-card-head-background;
margin-right: 2px;
padding: 0 16px;
transition: all 0.3s @ease-in-out; transition: all 0.3s @ease-in-out;
line-height: @tabs-card-height - 2px;
} }
&&-card &-card-bar &-tab-active { &&-card &-card-bar &-tab-active {
padding-bottom: 1px;
color: @tabs-card-active-color;
background: @component-background; background: @component-background;
border-color: @border-color-split; border-color: @border-color-split;
color: @tabs-card-active-color;
padding-bottom: 1px;
} }
&&-card &-card-bar &-tab-inactive { &&-card &-card-bar &-tab-inactive {
padding: 0; padding: 0;
@ -35,16 +35,16 @@
margin-bottom: 0; margin-bottom: 0;
} }
&&-card &-card-bar &-tab &-close-x { &&-card &-card-bar &-tab &-close-x {
color: @text-color-secondary;
transition: all 0.3s;
font-size: @font-size-sm;
margin-left: 3px;
margin-right: -5px;
overflow: hidden;
vertical-align: middle;
width: 16px; width: 16px;
height: 16px; height: 16px;
height: @font-size-base; height: @font-size-base;
margin-right: -5px;
margin-left: 3px;
overflow: hidden;
color: @text-color-secondary;
font-size: @font-size-sm;
vertical-align: middle;
transition: all 0.3s;
&:hover { &:hover {
color: @heading-color; color: @heading-color;
} }
@ -69,13 +69,13 @@
position: relative; position: relative;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: @text-color;
font-size: 12px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
cursor: pointer;
border-radius: @border-radius-sm;
border: @border-width-base @border-style-base @border-color-split; border: @border-width-base @border-style-base @border-color-split;
font-size: 12px; border-radius: @border-radius-sm;
color: @text-color; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
color: @tabs-card-active-color; color: @tabs-card-active-color;
@ -99,8 +99,8 @@
height: auto; height: auto;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
border-bottom: @border-width-base @border-style-base @border-color-split;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: @border-width-base @border-style-base @border-color-split;
&-active { &-active {
padding-bottom: 4px; padding-bottom: 4px;
} }
@ -118,9 +118,9 @@
margin-right: 0; margin-right: 0;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
margin-right: 1px;
border-right: 0; border-right: 0;
border-radius: @border-radius-base 0 0 @border-radius-base; border-radius: @border-radius-base 0 0 @border-radius-base;
margin-right: 1px;
&-active { &-active {
margin-right: -1px; margin-right: -1px;
padding-right: 18px; padding-right: 18px;
@ -133,9 +133,9 @@
margin-left: 0; margin-left: 0;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
margin-left: 1px;
border-left: 0; border-left: 0;
border-radius: 0 @border-radius-base @border-radius-base 0; border-radius: 0 @border-radius-base @border-radius-base 0;
margin-left: 1px;
&-active { &-active {
margin-left: -1px; margin-left: -1px;
padding-left: 18px; padding-left: 18px;
@ -145,14 +145,14 @@
// https://github.com/ant-design/ant-design/issues/9104 // https://github.com/ant-design/ant-design/issues/9104
& &-card-bar&-bottom-bar &-tab { & &-card-bar&-bottom-bar &-tab {
border-bottom: @border-width-base @border-style-base @border-color-split;
border-top: 0; border-top: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base; border-radius: 0 0 @border-radius-base @border-radius-base;
} }
& &-card-bar&-bottom-bar &-tab-active { & &-card-bar&-bottom-bar &-tab-active {
color: @primary-color;
padding-bottom: 0;
padding-top: 1px; padding-top: 1px;
padding-bottom: 0;
color: @primary-color;
} }
} }

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

@ -11,10 +11,10 @@
.clearfix; .clearfix;
&-ink-bar { &-ink-bar {
z-index: 1;
position: absolute; position: absolute;
left: 0;
bottom: 1px; bottom: 1px;
left: 0;
z-index: 1;
box-sizing: border-box; box-sizing: border-box;
height: 2px; height: 2px;
background-color: @tabs-ink-bar-color; background-color: @tabs-ink-bar-color;
@ -22,67 +22,67 @@
} }
&-bar { &-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
margin: @tabs-bar-margin; margin: @tabs-bar-margin;
border-bottom: @border-width-base @border-style-base @border-color-split;
outline: none; outline: none;
transition: padding 0.3s @ease-in-out; transition: padding 0.3s @ease-in-out;
} }
&-nav-container { &-nav-container {
position: relative;
box-sizing: border-box;
margin-bottom: -1px;
overflow: hidden; overflow: hidden;
font-size: @tabs-title-font-size; font-size: @tabs-title-font-size;
line-height: @line-height-base; line-height: @line-height-base;
box-sizing: border-box;
position: relative;
white-space: nowrap; white-space: nowrap;
margin-bottom: -1px;
transition: padding 0.3s @ease-in-out; transition: padding 0.3s @ease-in-out;
.clearfix; .clearfix;
&-scrolling { &-scrolling {
padding-left: @tabs-scrolling-size;
padding-right: @tabs-scrolling-size; padding-right: @tabs-scrolling-size;
padding-left: @tabs-scrolling-size;
} }
} }
// https://github.com/ant-design/ant-design/issues/9104 // https://github.com/ant-design/ant-design/issues/9104
&-bottom &-bottom-bar { &-bottom &-bottom-bar {
margin-bottom: 0;
margin-top: 16px; margin-top: 16px;
border-bottom: none; margin-bottom: 0;
border-top: @border-width-base @border-style-base @border-color-split; border-top: @border-width-base @border-style-base @border-color-split;
border-bottom: none;
} }
&-bottom &-bottom-bar &-ink-bar { &-bottom &-bottom-bar &-ink-bar {
bottom: auto;
top: 1px; top: 1px;
bottom: auto;
} }
&-bottom &-bottom-bar &-nav-container { &-bottom &-bottom-bar &-nav-container {
margin-bottom: 0;
margin-top: -1px; margin-top: -1px;
margin-bottom: 0;
} }
&-tab-prev, &-tab-prev,
&-tab-next { &-tab-next {
user-select: none; position: absolute;
z-index: 2; z-index: 2;
width: 0; width: 0;
height: 100%; height: 100%;
cursor: pointer;
border: 0;
background-color: transparent;
position: absolute;
text-align: center;
color: @text-color-secondary; color: @text-color-secondary;
transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out; text-align: center;
background-color: transparent;
border: 0;
cursor: pointer;
opacity: 0; opacity: 0;
transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
user-select: none;
pointer-events: none; pointer-events: none;
&.@{tab-prefix-cls}-tab-arrow-show { &.@{tab-prefix-cls}-tab-arrow-show {
opacity: 1;
width: @tabs-scrolling-size; width: @tabs-scrolling-size;
height: 100%; height: 100%;
opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
@ -91,17 +91,16 @@
} }
&-icon { &-icon {
font-style: normal;
font-weight: bold;
font-variant: normal;
line-height: inherit;
vertical-align: baseline;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); font-weight: bold;
font-style: normal;
font-variant: normal;
line-height: inherit;
text-align: center; text-align: center;
text-transform: none; text-transform: none;
transform: translate(-50%, -50%);
&-target { &-target {
display: block; display: block;
@ -130,8 +129,8 @@
} }
&-nav-wrap { &-nav-wrap {
overflow: hidden;
margin-bottom: -1px; margin-bottom: -1px;
overflow: hidden;
} }
&-nav-scroll { &-nav-scroll {
@ -140,40 +139,40 @@
} }
&-nav { &-nav {
box-sizing: border-box;
padding-left: 0;
transition: transform 0.3s @ease-in-out;
position: relative; position: relative;
margin: 0;
list-style: none;
display: inline-block; display: inline-block;
box-sizing: border-box;
margin: 0;
padding-left: 0;
list-style: none;
transition: transform 0.3s @ease-in-out;
&:before, &::before,
&:after { &::after {
display: table; display: table;
content: ' '; content: ' ';
} }
&:after { &::after {
clear: both; clear: both;
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box;
height: 100%; height: 100%;
margin: @tabs-horizontal-margin; margin: @tabs-horizontal-margin;
padding: @tabs-horizontal-padding; padding: @tabs-horizontal-padding;
box-sizing: border-box; text-decoration: none;
position: relative; cursor: pointer;
transition: color 0.3s @ease-in-out;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
transition: color 0.3s @ease-in-out;
cursor: pointer;
text-decoration: none;
&:hover { &:hover {
color: @tabs-hover-color; color: @tabs-hover-color;
} }
@ -189,8 +188,8 @@
&-disabled { &-disabled {
&, &,
&:hover { &:hover {
cursor: not-allowed;
color: @disabled-color; color: @disabled-color;
cursor: not-allowed;
} }
} }
@ -227,14 +226,14 @@
> .@{tab-prefix-cls}-tabpane { > .@{tab-prefix-cls}-tabpane {
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
transition: opacity 0.45s;
opacity: 1; opacity: 1;
transition: opacity 0.45s;
} }
> .@{tab-prefix-cls}-tabpane-inactive { > .@{tab-prefix-cls}-tabpane-inactive {
opacity: 0;
height: 0; height: 0;
padding: 0 !important; padding: 0 !important;
opacity: 0;
pointer-events: none; pointer-events: none;
input { input {
visibility: hidden; visibility: hidden;
@ -244,16 +243,16 @@
&.@{tab-prefix-cls}-content-animated { &.@{tab-prefix-cls}-content-animated {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
will-change: margin-left;
transition: margin-left 0.3s @ease-in-out; transition: margin-left 0.3s @ease-in-out;
will-change: margin-left;
} }
} }
// Vertical Bar // Vertical Bar
.@{tab-prefix-cls}-left-bar, .@{tab-prefix-cls}-left-bar,
.@{tab-prefix-cls}-right-bar { .@{tab-prefix-cls}-right-bar {
border-bottom: 0;
height: 100%; height: 100%;
border-bottom: 0;
&-tab-prev, &-tab-prev,
&-tab-next { &-tab-next {
width: @tabs-scrolling-size; width: @tabs-scrolling-size;
@ -267,10 +266,10 @@
} }
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
display: block;
float: none; float: none;
margin: @tabs-vertical-margin; margin: @tabs-vertical-margin;
padding: @tabs-vertical-padding; padding: @tabs-vertical-padding;
display: block;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -307,16 +306,16 @@
} }
.@{tab-prefix-cls}-ink-bar { .@{tab-prefix-cls}-ink-bar {
width: 2px;
top: 0; top: 0;
left: auto;
height: auto;
bottom: auto; bottom: auto;
left: auto;
width: 2px;
height: auto;
} }
.@{tab-prefix-cls}-tab-next { .@{tab-prefix-cls}-tab-next {
width: 100%;
bottom: 0; bottom: 0;
width: 100%;
height: @tabs-scrolling-size; height: @tabs-scrolling-size;
} }
@ -330,17 +329,17 @@
// Vertical Content // Vertical Content
.@{tab-prefix-cls}-left-content, .@{tab-prefix-cls}-left-content,
.@{tab-prefix-cls}-right-content { .@{tab-prefix-cls}-right-content {
overflow: hidden;
width: auto; width: auto;
margin-top: 0 !important; margin-top: 0 !important;
overflow: hidden;
} }
// Vertical - Left // Vertical - Left
.@{tab-prefix-cls}-left-bar { .@{tab-prefix-cls}-left-bar {
float: left; float: left;
border-right: @border-width-base @border-style-base @border-color-split;
margin-right: -1px; margin-right: -1px;
margin-bottom: 0; margin-bottom: 0;
border-right: @border-width-base @border-style-base @border-color-split;
.@{tab-prefix-cls}-tab { .@{tab-prefix-cls}-tab {
text-align: right; text-align: right;
} }
@ -362,9 +361,9 @@
// Vertical - Right // Vertical - Right
.@{tab-prefix-cls}-right-bar { .@{tab-prefix-cls}-right-bar {
float: right; float: right;
border-left: @border-width-base @border-style-base @border-color-split;
margin-left: -1px;
margin-bottom: 0; margin-bottom: 0;
margin-left: -1px;
border-left: @border-width-base @border-style-base @border-color-split;
.@{tab-prefix-cls}-nav-container { .@{tab-prefix-cls}-nav-container {
margin-left: -1px; margin-left: -1px;
} }
@ -394,8 +393,8 @@
// No animation // No animation
.tabs-no-animation() { .tabs-no-animation() {
> .@{tab-prefix-cls}-content-animated { > .@{tab-prefix-cls}-content-animated {
transform: none !important;
margin-left: 0 !important; margin-left: 0 !important;
transform: none !important;
} }
> .@{tab-prefix-cls}-tabpane-inactive { > .@{tab-prefix-cls}-tabpane-inactive {
display: none; display: none;

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

@ -6,18 +6,18 @@
.@{tag-prefix-cls} { .@{tag-prefix-cls} {
.reset-component; .reset-component;
display: inline-block; display: inline-block;
line-height: 20px;
height: 22px; height: 22px;
padding: 0 7px;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
background: @tag-default-bg;
font-size: @tag-font-size;
transition: all 0.3s @ease-out;
opacity: 1;
margin-right: 8px; margin-right: 8px;
cursor: pointer; padding: 0 7px;
font-size: @tag-font-size;
line-height: 20px;
white-space: nowrap; white-space: nowrap;
background: @tag-default-bg;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
cursor: pointer;
opacity: 1;
transition: all 0.3s @ease-out;
&:hover { &:hover {
opacity: 0.85; opacity: 0.85;
@ -37,11 +37,11 @@
.@{iconfont-css-prefix}-close { .@{iconfont-css-prefix}-close {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
cursor: pointer;
margin-left: 3px; margin-left: 3px;
transition: all 0.3s;
color: @text-color-secondary; color: @text-color-secondary;
font-weight: bold; font-weight: bold;
cursor: pointer;
transition: all 0.3s;
&:hover { &:hover {
color: @heading-color; color: @heading-color;
@ -55,7 +55,7 @@
a:hover, a:hover,
.@{iconfont-css-prefix}-close, .@{iconfont-css-prefix}-close,
.@{iconfont-css-prefix}-close:hover { .@{iconfont-css-prefix}-close:hover {
color: #fff; color: @text-color-inverse;
} }
} }
@ -67,7 +67,7 @@
} }
&:active, &:active,
&-checked { &-checked {
color: #fff; color: @text-color-inverse;
} }
&-checked { &-checked {
background-color: @primary-6; background-color: @primary-6;
@ -79,8 +79,8 @@
&-close { &-close {
width: 0 !important; width: 0 !important;
padding: 0;
margin: 0; margin: 0;
padding: 0;
} }
&-zoom-enter, &-zoom-enter,
@ -114,9 +114,9 @@
border-color: @@lightBorderColor; border-color: @@lightBorderColor;
} }
&-@{color}-inverse { &-@{color}-inverse {
color: @text-color-inverse;
background: @@darkColor; background: @@darkColor;
border-color: @@darkColor; border-color: @@darkColor;
color: #fff;
} }
} }

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

@ -7,38 +7,38 @@
.@{timepicker-prefix-cls}-panel { .@{timepicker-prefix-cls}-panel {
.reset-component; .reset-component;
font-family: @font-family;
z-index: @zindex-picker;
position: absolute; position: absolute;
z-index: @zindex-picker;
font-family: @font-family;
&-inner { &-inner {
position: relative; position: relative;
outline: none; left: -2px;
list-style: none;
font-size: @font-size-base; font-size: @font-size-base;
text-align: left; text-align: left;
list-style: none;
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
background-clip: padding-box; background-clip: padding-box;
left: -2px; border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
} }
&-input { &-input {
width: 100%; width: 100%;
max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0;
max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
cursor: auto;
outline: 0;
line-height: normal; line-height: normal;
border: 0;
outline: 0;
cursor: auto;
.placeholder; .placeholder;
&-wrap { &-wrap {
box-sizing: border-box;
position: relative; position: relative;
box-sizing: border-box;
padding: 7px 2px 7px @control-padding-horizontal; padding: 7px 2px 7px @control-padding-horizontal;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
} }
@ -48,57 +48,27 @@
} }
} }
&-clear-btn {
position: absolute;
right: 8px;
cursor: pointer;
overflow: hidden;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
top: 7px;
margin: 0;
&-icon svg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
font-size: @font-size-base;
color: @disabled-color;
display: inline-block;
transition: color 0.3s ease;
&:hover {
color: @text-color-secondary;
}
}
}
&-narrow &-input-wrap { &-narrow &-input-wrap {
max-width: @time-picker-panel-column-width * 2; max-width: @time-picker-panel-column-width * 2;
} }
&-select { &-select {
position: relative; // Fix chrome weird render bug
float: left; float: left;
font-size: @font-size-base;
border-left: @border-width-base @border-style-base @border-color-split;
box-sizing: border-box; box-sizing: border-box;
width: @time-picker-panel-column-width; width: @time-picker-panel-column-width;
overflow: hidden;
position: relative; // Fix chrome weird render bug
max-height: @timepicker-item-height * 6; max-height: @timepicker-item-height * 6;
overflow: hidden;
font-size: @font-size-base;
border-left: @border-width-base @border-style-base @border-color-split;
&:hover { &:hover {
overflow-y: auto; overflow-y: auto;
} }
&:first-child { &:first-child {
border-left: 0;
margin-left: 0; margin-left: 0;
border-left: 0;
} }
&:last-child { &:last-child {
@ -110,25 +80,25 @@
} }
ul { ul {
list-style: none;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
margin: 0; margin: 0;
padding: 0 0 @timepicker-item-height * 5; padding: 0 0 @timepicker-item-height * 5;
width: 100%; list-style: none;
} }
li { li {
list-style: none;
box-sizing: content-box; box-sizing: content-box;
margin: 0;
padding: 0 0 0 @control-padding-horizontal;
width: 100%; width: 100%;
height: @timepicker-item-height; height: @timepicker-item-height;
margin: 0;
padding: 0 0 0 @control-padding-horizontal;
line-height: @timepicker-item-height; line-height: @timepicker-item-height;
text-align: left; text-align: left;
list-style: none;
cursor: pointer; cursor: pointer;
user-select: none;
transition: background 0.3s; transition: background 0.3s;
user-select: none;
} }
li:hover { li:hover {
@ -136,8 +106,8 @@
} }
li&-option-selected { li&-option-selected {
background: @time-picker-selected-bg;
font-weight: bold; font-weight: bold;
background: @time-picker-selected-bg;
&:hover { &:hover {
background: @time-picker-selected-bg; background: @time-picker-selected-bg;
} }
@ -190,9 +160,9 @@
.reset-component; .reset-component;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 128px;
outline: none; outline: none;
transition: opacity 0.3s; transition: opacity 0.3s;
width: 128px;
&-input { &-input {
.input; .input;
@ -205,24 +175,40 @@
opacity: 0; opacity: 0;
} }
&-icon { &-icon,
&-clear {
position: absolute; position: absolute;
user-select: none; top: 50%;
transition: all 0.3s @ease-in-out; right: @control-padding-horizontal - 1px;
z-index: 1;
width: 14px; width: 14px;
height: 14px; height: 14px;
line-height: 14px;
right: @control-padding-horizontal - 1px;
color: @disabled-color;
top: 50%;
margin-top: -7px; margin-top: -7px;
.@{timepicker-prefix-cls}-clock-icon {
color: @disabled-color; color: @disabled-color;
line-height: 14px;
transition: all 0.3s @ease-in-out;
user-select: none;
.@{timepicker-prefix-cls}-clock-icon {
display: block; display: block;
color: @disabled-color;
line-height: 1; line-height: 1;
} }
} }
&-clear {
z-index: 2;
background: @input-bg;
opacity: 0;
pointer-events: none;
&:hover {
color: @text-color-secondary;
}
}
&:hover &-clear {
opacity: 1;
pointer-events: auto;
}
&-large &-input { &-large &-input {
.input-lg; .input-lg;
} }
@ -231,7 +217,8 @@
.input-sm; .input-sm;
} }
&-small &-icon { &-small &-icon,
&-small &-clear {
right: @control-padding-horizontal-sm - 1px; right: @control-padding-horizontal-sm - 1px;
} }
} }

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

@ -6,21 +6,21 @@
.@{timeline-prefix-cls} { .@{timeline-prefix-cls} {
.reset-component; .reset-component;
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
&-item { &-item {
position: relative; position: relative;
padding: 0 0 20px;
list-style: none;
margin: 0; margin: 0;
padding: 0 0 20px;
font-size: @font-size-base; font-size: @font-size-base;
list-style: none;
&-tail { &-tail {
position: absolute; position: absolute;
left: 4px;
top: 0.75em; top: 0.75em;
left: 4px;
height: 100%; height: 100%;
border-left: 2px solid @timeline-color; border-left: 2px solid @timeline-color;
} }
@ -38,49 +38,49 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
background-color: @component-background; background-color: @component-background;
border-radius: 100px;
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 100px;
&-blue { &-blue {
border-color: @primary-color;
color: @primary-color; color: @primary-color;
border-color: @primary-color;
} }
&-red { &-red {
border-color: @error-color;
color: @error-color; color: @error-color;
border-color: @error-color;
} }
&-green { &-green {
border-color: @success-color;
color: @success-color; color: @success-color;
border-color: @success-color;
} }
} }
&-head-custom { &-head-custom {
position: absolute; position: absolute;
text-align: center;
line-height: 1;
margin-top: 0;
border: 0;
height: auto;
border-radius: 0;
padding: 3px 1px;
transform: translate(-50%, -50%);
top: 5.5px; top: 5.5px;
left: 5px; left: 5px;
width: auto; width: auto;
height: auto;
margin-top: 0;
padding: 3px 1px;
line-height: 1;
text-align: center;
border: 0;
border-radius: 0;
transform: translate(-50%, -50%);
} }
&-content { &-content {
margin: 0 0 0 18px;
position: relative; 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;
} }
&-last { &-last {
.@{timeline-prefix-cls}-item-tail { > .@{timeline-prefix-cls}-item-tail {
display: none; display: none;
} }
.@{timeline-prefix-cls}-item-content { > .@{timeline-prefix-cls}-item-content {
min-height: 48px; min-height: 48px;
} }
} }
@ -104,19 +104,19 @@
&-left { &-left {
.@{timeline-prefix-cls}-item-content { .@{timeline-prefix-cls}-item-content {
text-align: left;
left: 50%; left: 50%;
width: 50%; width: 50%;
text-align: left;
} }
} }
&-right { &-right {
.@{timeline-prefix-cls}-item-content { .@{timeline-prefix-cls}-item-content {
text-align: right;
right: 50%; right: 50%;
margin-right: 18px;
width: 50%;
left: -30px; left: -30px;
width: 50%;
margin-right: 18px;
text-align: right;
} }
} }
} }
@ -131,15 +131,15 @@
} }
.@{timeline-prefix-cls}-item-content { .@{timeline-prefix-cls}-item-content {
right: 0; right: 0;
width: 100%;
left: -30px; left: -30px;
width: 100%;
} }
} }
} }
&&-pending &-item-last &-item-tail { &&-pending &-item-last &-item-tail {
border-left: 2px dotted @timeline-color;
display: block; display: block;
border-left: 2px dotted @timeline-color;
} }
&&-reverse &-item-last &-item-tail { &&-reverse &-item-last &-item-tail {
@ -148,8 +148,8 @@
&&-reverse &-item-pending { &&-reverse &-item-pending {
.@{timeline-prefix-cls}-item-tail { .@{timeline-prefix-cls}-item-tail {
border-left: 2px dotted @timeline-color;
display: block; display: block;
border-left: 2px dotted @timeline-color;
} }
.@{timeline-prefix-cls}-item-content { .@{timeline-prefix-cls}-item-content {
min-height: 48px; min-height: 48px;

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

@ -9,8 +9,8 @@
position: absolute; position: absolute;
z-index: @zindex-tooltip; z-index: @zindex-tooltip;
display: block; display: block;
visibility: visible;
max-width: @tooltip-max-width; max-width: @tooltip-max-width;
visibility: visible;
&-hidden { &-hidden {
display: none; display: none;
@ -39,15 +39,16 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
&-inner { &-inner {
min-width: 30px;
min-height: 32px;
padding: 6px 8px; padding: 6px 8px;
color: @tooltip-color; color: @tooltip-color;
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
word-wrap: break-word;
background-color: @tooltip-bg; background-color: @tooltip-bg;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
min-height: 32px;
word-wrap: break-word;
} }
// Arrows // Arrows
@ -55,8 +56,8 @@
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent;
border-style: solid; border-style: solid;
border-color: transparent;
} }
&-placement-top &-arrow, &-placement-top &-arrow,

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

@ -11,13 +11,13 @@
.@{select-tree-prefix-cls} { .@{select-tree-prefix-cls} {
.reset-component; .reset-component;
margin: 0; margin: 0;
padding: 0 4px;
margin-top: -4px; margin-top: -4px;
padding: 0 4px;
li { li {
padding: 0;
margin: 8px 0; margin: 8px 0;
list-style: none; padding: 0;
white-space: nowrap; white-space: nowrap;
list-style: none;
outline: 0; outline: 0;
&.filter-node { &.filter-node {
> span { > span {
@ -30,14 +30,14 @@
} }
.@{select-tree-prefix-cls}-node-content-wrapper { .@{select-tree-prefix-cls}-node-content-wrapper {
display: inline-block; display: inline-block;
padding: 3px 5px;
border-radius: 2px;
margin: 0;
cursor: pointer;
text-decoration: none;
color: @text-color;
transition: all 0.3s;
width: ~'calc(100% - 24px)'; width: ~'calc(100% - 24px)';
margin: 0;
padding: 3px 5px;
color: @text-color;
text-decoration: none;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s;
&:hover { &:hover {
background-color: @item-hover-bg; background-color: @item-hover-bg;
} }
@ -54,25 +54,25 @@
} }
&.@{select-tree-prefix-cls}-switcher, &.@{select-tree-prefix-cls}-switcher,
&.@{select-tree-prefix-cls}-iconEle { &.@{select-tree-prefix-cls}-iconEle {
margin: 0; display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0;
line-height: 22px; line-height: 22px;
display: inline-block; text-align: center;
vertical-align: middle; vertical-align: middle;
border: 0 none; border: 0 none;
cursor: pointer;
outline: none; outline: none;
text-align: center; cursor: pointer;
} }
&.@{select-prefix-cls}-icon_loading { &.@{select-prefix-cls}-icon_loading {
.@{select-prefix-cls}-switcher-loading-icon { .@{select-prefix-cls}-switcher-loading-icon {
display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
display: inline-block;
color: @primary-color; color: @primary-color;
transform: none;
font-size: 14px; font-size: 14px;
transform: none;
svg { svg {
position: absolute; position: absolute;
top: 0; top: 0;
@ -103,14 +103,14 @@
&.@{select-tree-prefix-cls}-switcher_open, &.@{select-tree-prefix-cls}-switcher_open,
&.@{select-tree-prefix-cls}-switcher_close { &.@{select-tree-prefix-cls}-switcher_close {
.@{select-prefix-cls}-switcher-loading-icon { .@{select-prefix-cls}-switcher-loading-icon {
display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
color: @primary-color; color: @primary-color;
transform: none;
font-size: 14px; font-size: 14px;
transform: none;
svg { svg {
position: absolute; position: absolute;
top: 0; top: 0;
@ -166,9 +166,9 @@
width: 100%; width: 100%;
} }
.@{select-prefix-cls}-search__field { .@{select-prefix-cls}-search__field {
padding: 4px 7px;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
padding: 4px 7px;
border: @border-width-base @border-style-base @border-color-base; border: @border-width-base @border-style-base @border-color-base;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
@ -178,9 +178,9 @@
} }
} }
.@{select-prefix-cls}-not-found { .@{select-prefix-cls}-not-found {
cursor: not-allowed;
color: @disabled-color;
padding: 7px 16px;
display: block; display: block;
padding: 7px 16px;
color: @disabled-color;
cursor: not-allowed;
} }
} }

16
components/tree/style/directory.less
View File

@ -25,13 +25,13 @@
} }
&.@{tree-prefix-cls}-node-content-wrapper { &.@{tree-prefix-cls}-node-content-wrapper {
user-select: none;
border-radius: 0; border-radius: 0;
user-select: none;
&:hover { &:hover {
background: transparent; background: transparent;
&:before { &::before {
background: @item-hover-bg; background: @item-hover-bg;
} }
} }
@ -41,13 +41,13 @@
background: transparent; background: transparent;
} }
&:before { &::before {
content: '';
position: absolute; position: absolute;
left: 0;
right: 0; right: 0;
left: 0;
height: @tree-title-height; height: @tree-title-height;
transition: all 0.3s; transition: all 0.3s;
content: '';
} }
> span { > span {
@ -69,14 +69,14 @@
} }
&.@{tree-prefix-cls}-checkbox-checked { &.@{tree-prefix-cls}-checkbox-checked {
&:after { &::after {
border-color: @checkbox-check-color; border-color: @checkbox-check-color;
} }
.@{tree-prefix-cls}-checkbox-inner { .@{tree-prefix-cls}-checkbox-inner {
background: @checkbox-check-color; background: @checkbox-check-color;
&:after { &::after {
border-color: @primary-color; border-color: @primary-color;
} }
} }
@ -84,7 +84,7 @@
} }
&.@{tree-prefix-cls}-node-content-wrapper { &.@{tree-prefix-cls}-node-content-wrapper {
&:before { &::before {
background: @tree-directory-selected-bg; background: @tree-directory-selected-bg;
} }
} }

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

@ -6,6 +6,7 @@
@tree-prefix-cls: ~'@{ant-prefix}-tree'; @tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-showline-icon-color: @text-color-secondary; @tree-showline-icon-color: @text-color-secondary;
@tree-node-padding: 4px;
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox'); .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');
@ -16,32 +17,31 @@
ol, ol,
ul { ul {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
} }
li { li {
padding: 4px 0;
margin: 0; margin: 0;
list-style: none; padding: @tree-node-padding 0;
white-space: nowrap; white-space: nowrap;
list-style: none;
outline: 0; outline: 0;
span[draggable], span[draggable],
span[draggable='true'] { span[draggable='true'] {
user-select: none; line-height: @tree-title-height - 4px;
border-top: 2px transparent solid; border-top: 2px transparent solid;
border-bottom: 2px transparent solid; border-bottom: 2px transparent solid;
user-select: none;
/* Required to make elements draggable in old WebKit */ /* Required to make elements draggable in old WebKit */
-khtml-user-drag: element; -khtml-user-drag: element;
-webkit-user-drag: element; -webkit-user-drag: element;
line-height: @tree-title-height - 4px;
} }
&.drag-over { &.drag-over {
> span[draggable] { > span[draggable] {
background-color: @primary-color;
color: white; color: white;
background-color: @primary-color;
opacity: 0.8; opacity: 0.8;
} }
} }
@ -69,14 +69,14 @@
&.@{tree-prefix-cls}-switcher_open, &.@{tree-prefix-cls}-switcher_open,
&.@{tree-prefix-cls}-switcher_close { &.@{tree-prefix-cls}-switcher_close {
.@{tree-prefix-cls}-switcher-loading-icon { .@{tree-prefix-cls}-switcher-loading-icon {
display: inline-block;
position: absolute; position: absolute;
left: 0; left: 0;
display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
color: @primary-color; color: @primary-color;
transform: none;
font-size: 14px; font-size: 14px;
transform: none;
svg { svg {
position: absolute; position: absolute;
top: 0; top: 0;
@ -87,7 +87,7 @@
} }
} }
:root &:after { :root &::after {
opacity: 0; opacity: 0;
} }
} }
@ -101,16 +101,16 @@
} }
.@{tree-prefix-cls}-node-content-wrapper { .@{tree-prefix-cls}-node-content-wrapper {
display: inline-block; display: inline-block;
padding: 0 5px; height: @tree-title-height;
border-radius: @border-radius-sm;
margin: 0; margin: 0;
cursor: pointer; padding: 0 5px;
color: @text-color;
line-height: @tree-title-height;
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
color: @text-color; border-radius: @border-radius-sm;
cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
height: @tree-title-height;
line-height: @tree-title-height;
&:hover { &:hover {
background-color: @item-hover-bg; background-color: @item-hover-bg;
} }
@ -124,16 +124,16 @@
} }
&.@{tree-prefix-cls}-switcher, &.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle { &.@{tree-prefix-cls}-iconEle {
margin: 0; display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0;
line-height: @tree-title-height; line-height: @tree-title-height;
display: inline-block; text-align: center;
vertical-align: top; vertical-align: top;
border: 0 none; border: 0 none;
cursor: pointer;
outline: none; outline: none;
text-align: center; cursor: pointer;
} }
&.@{tree-prefix-cls}-switcher { &.@{tree-prefix-cls}-switcher {
@ -158,7 +158,7 @@
&:last-child > span { &:last-child > span {
&.@{tree-prefix-cls}-switcher, &.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle { &.@{tree-prefix-cls}-iconEle {
&:before { &::before {
display: none; display: none;
} }
} }
@ -178,6 +178,19 @@
&-open { &-open {
display: block; display: block;
} }
// https://github.com/ant-design/ant-design/issues/14958
> li {
// Provide additional padding between top child node and parent node
&:first-child {
padding-top: 2 * @tree-node-padding;
}
// Hide additional padding between last child node and next parent node
&:last-child {
padding-bottom: 0;
}
}
} }
li&-treenode-disabled { li&-treenode-disabled {
> span:not(.@{tree-prefix-cls}-switcher), > span:not(.@{tree-prefix-cls}-switcher),
@ -204,8 +217,8 @@
position: relative; position: relative;
span { span {
&.@{tree-prefix-cls}-switcher { &.@{tree-prefix-cls}-switcher {
background: @component-background;
color: @tree-showline-icon-color; color: @tree-showline-icon-color;
background: @component-background;
&.@{tree-prefix-cls}-switcher-noop { &.@{tree-prefix-cls}-switcher-noop {
.antTreeShowLineIcon('tree-doc-icon'); .antTreeShowLineIcon('tree-doc-icon');
} }
@ -218,14 +231,14 @@
} }
} }
} }
li:not(:last-child):before { li:not(:last-child)::before {
content: ' ';
width: 1px;
border-left: 1px solid @border-color-base;
height: 100%;
position: absolute; position: absolute;
left: 12px; left: 12px;
width: 1px;
height: 100%;
margin: 22px 0; margin: 22px 0;
border-left: 1px solid @border-color-base;
content: ' ';
} }
} }

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

@ -18,9 +18,9 @@
.antTreeShowLineIcon(@type) { .antTreeShowLineIcon(@type) {
.@{tree-prefix-cls}-switcher-icon, .@{tree-prefix-cls}-switcher-icon,
.@{tree-select-prefix-cls}-switcher-icon { .@{tree-select-prefix-cls}-switcher-icon {
font-size: 12px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
font-size: 12px;
svg { svg {
transition: transform 0.3s; transition: transform 0.3s;
} }