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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,13 +1,17 @@
@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} {
@drawer-prefix-cls: @dawer-prefix-cls;
.@{drawer-prefix-cls} {
position: fixed;
top: 0;
z-index: @zindex-modal;
width: 0%;
height: 100%;
z-index: @zindex-modal;
> * {
transition: transform @animation-duration-slow @ease-base-in;
}
@ -15,7 +19,7 @@
&-content-wrapper {
position: fixed;
}
.@{dawer-prefix-cls}-content {
.@{drawer-prefix-cls}-content {
width: 100%;
height: 100%;
}
@ -23,31 +27,31 @@
&-right {
width: 0%;
height: 100%;
.@{dawer-prefix-cls}-content-wrapper {
.@{drawer-prefix-cls}-content-wrapper {
height: 100%;
}
&.@{dawer-prefix-cls}-open {
&.@{drawer-prefix-cls}-open {
width: 100%;
}
&.@{dawer-prefix-cls}-open.no-mask {
&.@{drawer-prefix-cls}-open.no-mask {
width: 0%;
}
}
&-left {
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper {
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-right;
}
}
}
&-right {
.@{dawer-prefix-cls} {
.@{drawer-prefix-cls} {
&-content-wrapper {
right: 0;
}
}
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper {
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-left;
}
}
@ -57,103 +61,105 @@
&-bottom {
width: 100%;
height: 0%;
.@{dawer-prefix-cls}-content-wrapper {
.@{drawer-prefix-cls}-content-wrapper {
width: 100%;
}
&.@{dawer-prefix-cls}-open {
&.@{drawer-prefix-cls}-open {
height: 100%;
}
&.@{dawer-prefix-cls}-open.no-mask {
&.@{drawer-prefix-cls}-open.no-mask {
height: 0%;
}
}
&-top {
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper {
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-down;
}
}
}
&-bottom {
.@{dawer-prefix-cls} {
.@{drawer-prefix-cls} {
&-content-wrapper {
bottom: 0;
}
}
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls}-content-wrapper {
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-up;
}
}
}
&.@{dawer-prefix-cls}-open {
.@{dawer-prefix-cls} {
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls} {
&-mask {
opacity: 0.3;
height: 100%;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
opacity: 0.3;
transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
}
}
}
&-title {
margin: 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
line-height: 22px;
font-weight: 500;
color: @heading-color;
}
&-content {
position: relative;
background-color: @component-background;
border: 0;
background-clip: padding-box;
z-index: 1;
background-color: @component-background;
background-clip: padding-box;
border: 0;
}
&-close {
cursor: pointer;
border: 0;
background: transparent;
position: absolute;
right: 0;
top: 0;
z-index: 10;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: color @animation-duration-slow;
color: @text-color-secondary;
outline: 0;
right: 0;
z-index: @zindex-popup-close;
display: block;
width: 56px;
height: 56px;
padding: 0;
&-x {
display: block;
font-style: normal;
text-align: center;
text-transform: none;
text-rendering: auto;
width: 56px;
height: 56px;
line-height: 56px;
font-size: @font-size-lg;
}
color: @text-color-secondary;
font-weight: 700;
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,
&:hover {
color: #444;
color: @icon-color-hover;
text-decoration: none;
}
}
&-header {
position: relative;
padding: 16px 24px;
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color;
background: @component-background;
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 {
@ -167,8 +173,8 @@
position: fixed;
width: 100%;
height: 0;
opacity: 0;
background-color: @modal-mask-bg;
opacity: 0;
filter: ~'alpha(opacity=50)';
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} {
.reset-component;
position: absolute;
left: -9999px;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
display: block;
&:before {
&::before {
position: absolute;
top: -7px;
left: -7px;
right: 0;
bottom: -7px;
content: ' ';
left: -7px;
z-index: -9999;
opacity: 0.0001;
content: ' ';
}
&-wrap {
@ -28,13 +29,13 @@
.iconfont-size-under-12px(10px);
}
.@{iconfont-css-prefix}-down:before {
.@{iconfont-css-prefix}-down::before {
transition: transform 0.2s;
}
}
&-wrap-open {
.@{iconfont-css-prefix}-down:before {
.@{iconfont-css-prefix}-down::before {
transform: rotate(180deg);
}
}
@ -45,21 +46,21 @@
}
&-menu {
outline: none;
position: relative;
list-style-type: none;
padding: 4px 0;
margin: 0;
padding: 4px 0;
text-align: left;
list-style-type: none;
background-color: @component-background;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
background-clip: padding-box;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
-webkit-transform: translate3d(0, 0, 0);
&-item-group-title {
color: @text-color-secondary;
padding: 5px @control-padding-horizontal;
color: @text-color-secondary;
transition: all 0.3s;
}
@ -74,16 +75,16 @@
&-item,
&-submenu-title {
padding: 5px @control-padding-horizontal;
margin: 0;
clear: both;
font-size: @font-size-base;
font-weight: normal;
margin: 0;
padding: 5px @control-padding-horizontal;
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
line-height: 22px;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
line-height: 22px;
> .anticon:first-child {
min-width: 12px;
@ -91,10 +92,10 @@
}
> a {
color: @text-color;
display: block;
padding: 5px @control-padding-horizontal;
margin: -5px -@control-padding-horizontal;
padding: 5px @control-padding-horizontal;
color: @text-color;
transition: all 0.3s;
&:focus {
text-decoration: none;
@ -124,17 +125,17 @@
&-divider {
height: 1px;
overflow: hidden;
background-color: @border-color-split;
line-height: 0;
margin: 4px 0;
overflow: hidden;
line-height: 0;
background-color: @border-color-split;
}
.@{dropdown-prefix-cls}-menu-submenu-arrow {
position: absolute;
right: @padding-xs;
&-icon {
font-style: normal;
color: @text-color-secondary;
font-style: normal;
.iconfont-size-under-12px(10px);
}
}
@ -149,9 +150,9 @@
}
&-submenu-vertical > & {
position: absolute;
top: 0;
left: 100%;
position: absolute;
min-width: 100%;
margin-left: 4px;
transform-origin: 0 0;
@ -161,6 +162,8 @@
&,
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
color: @disabled-color;
background-color: @component-background;
cursor: not-allowed;
}
}
}
@ -207,8 +210,8 @@
white-space: nowrap;
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
padding-left: @padding-xs;
padding-right: @padding-xs;
padding-left: @padding-xs;
}
.@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
.iconfont-size-under-12px(10px);
@ -225,11 +228,11 @@
.@{dropdown-prefix-cls}-menu-submenu-title,
.@{dropdown-prefix-cls}-menu-item > a {
color: @text-color-secondary-dark;
.@{dropdown-prefix-cls}-menu-submenu-arrow:after {
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
color: @text-color-secondary-dark;
}
&:hover {
color: #fff;
color: @text-color-inverse;
background: transparent;
}
}
@ -237,8 +240,8 @@
&,
&:hover,
> a {
color: @text-color-inverse;
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-feedback-icon-size: @font-size-base;
@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} {
.reset-component;
.reset-form;
}
.@{form-prefix-cls}-item-required:before {
.@{form-prefix-cls}-item-required::before {
display: inline-block;
margin-right: 4px;
content: '*';
font-family: SimSun;
line-height: 1;
font-size: @font-size-base;
color: @label-required-color;
font-size: @font-size-base;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
.@{form-prefix-cls}-hide-required-mark & {
display: none;
}
@ -65,8 +70,8 @@ input[type='checkbox'] {
position: relative;
> .@{iconfont-css-prefix} {
vertical-align: top;
font-size: @font-size-base;
vertical-align: top;
}
}
@ -75,8 +80,8 @@ input[type='checkbox'] {
vertical-align: top;
&-control {
line-height: @form-component-max-height - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
position: relative;
line-height: @form-component-max-height;
.clearfix;
}
@ -85,31 +90,30 @@ input[type='checkbox'] {
}
&-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
@form-help-margin-top;
margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
}
&-label {
text-align: right;
vertical-align: middle;
line-height: @form-component-max-height - 0.0001px;
display: inline-block;
overflow: hidden;
line-height: @form-component-max-height - 0.0001px;
white-space: nowrap;
text-align: right;
vertical-align: middle;
label {
color: @label-color;
&:after {
&::after {
& when (@form-item-trailing-colon=true) {
content: ':';
}
& when not (@form-item-trailing-colon=true) {
content: ' ';
}
margin: 0 8px 0 2px;
position: relative;
top: -0.5px;
margin: 0 8px 0 2px;
}
}
}
@ -118,20 +122,23 @@ input[type='checkbox'] {
margin: 2px 0 4px;
}
&-no-colon &-label label:after {
&-no-colon &-label label::after {
content: ' ';
}
}
.@{form-prefix-cls}-explain,
.@{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;
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 {
@ -218,10 +225,10 @@ form {
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-checkbox-inline {
display: inline-block;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
&:first-child {
margin-left: 0;
@ -261,30 +268,30 @@ form {
// fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
:not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
.@{ant-prefix}-input-group-wrapper {
display: inline-block;
vertical-align: middle;
position: relative;
top: -1px;
display: inline-block;
vertical-align: middle;
}
}
// Input combined with select
.@{ant-prefix}-input-group-wrap {
.@{ant-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:hover {
border-color: @border-color-base;
}
}
.@{ant-prefix}-select-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
margin-left: -1px;
background-color: fade(@black, 7%);
.@{ant-prefix}-select-selection__rendered {
padding-left: 8px;
padding-right: 25px;
padding-left: 8px;
line-height: 30px;
}
}
@ -298,13 +305,14 @@ form {
// Form layout
//== Vertical Form
.make-vertical-layout-label() {
padding: @form-vertical-label-padding;
margin: @form-vertical-label-margin;
display: block;
text-align: left;
margin: @form-vertical-label-margin;
padding: @form-vertical-label-padding;
line-height: @line-height-base;
white-space: initial;
text-align: left;
label:after {
label::after {
display: none;
}
}
@ -334,7 +342,10 @@ form {
.@{form-prefix-cls}-item-control {
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 {
margin-top: 2px;
margin-bottom: -4px;
@ -380,7 +391,7 @@ form {
margin-bottom: 0;
&-with-help {
margin-bottom: 24px;
margin-bottom: @form-item-margin-bottom;
}
> .@{form-prefix-cls}-item-control-wrapper,
@ -408,16 +419,16 @@ form {
position: absolute;
top: 50%;
right: 0;
visibility: visible;
pointer-events: none;
z-index: 1;
width: @form-component-height;
height: 20px;
line-height: 20px;
margin-top: -10px;
text-align: center;
font-size: @form-feedback-icon-size;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
z-index: 1;
pointer-events: none;
& svg {
position: absolute;
@ -432,8 +443,8 @@ form {
.has-success {
&.has-feedback .@{form-prefix-cls}-item-children-icon {
animation-name: diffZoomIn1 !important;
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
@ -460,9 +471,9 @@ form {
}
// arrow and icon
.@{ant-prefix}-calendar-picker-icon:after,
.@{ant-prefix}-time-picker-icon:after,
.@{ant-prefix}-picker-icon:after,
.@{ant-prefix}-calendar-picker-icon::after,
.@{ant-prefix}-time-picker-icon::after,
.@{ant-prefix}-picker-icon::after,
.@{ant-prefix}-select-arrow,
.@{ant-prefix}-cascader-picker-arrow {
color: @warning-color;
@ -522,9 +533,9 @@ form {
}
// arrow and icon
.@{ant-prefix}-calendar-picker-icon:after,
.@{ant-prefix}-time-picker-icon:after,
.@{ant-prefix}-picker-icon:after,
.@{ant-prefix}-calendar-picker-icon::after,
.@{ant-prefix}-time-picker-icon::after,
.@{ant-prefix}-picker-icon::after,
.@{ant-prefix}-select-arrow,
.@{ant-prefix}-cascader-picker-arrow {
color: @error-color;
@ -591,8 +602,7 @@ form {
margin-bottom: @form-item-margin-bottom;
&-with-help {
margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base -
@form-help-margin-top;
margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
}
}
}
@ -613,19 +623,19 @@ form {
@keyframes antShowHelpIn {
0% {
opacity: 0;
transform: translateY(-5px);
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
opacity: 1;
}
}
@keyframes antShowHelpOut {
to {
opacity: 0;
transform: translateY(-5px);
opacity: 0;
}
}

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

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

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

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

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

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

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

@ -7,26 +7,26 @@
.@{input-number-prefix-cls} {
.reset-component;
.input;
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
display: inline-block;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
width: 90px;
&-handler {
text-align: center;
line-height: 0;
position: relative;
display: block;
width: 100%;
height: 50%;
overflow: hidden;
color: @text-color-secondary;
position: relative;
transition: all 0.1s linear;
display: block;
width: 100%;
font-weight: bold;
line-height: 0;
text-align: center;
transition: all 0.1s linear;
&:active {
background: #f4f4f4;
background: @input-number-handler-active-bg;
}
&:hover &-up-inner,
&:hover &-down-inner {
@ -37,15 +37,14 @@
&-handler-up-inner,
&-handler-down-inner {
.iconfont-mixin();
line-height: 12px;
user-select: none;
position: absolute;
right: 4px;
width: 12px;
height: 12px;
transition: all 0.1s linear;
.iconfont-size-under-12px(7px);
right: 4px;
color: @text-color-secondary;
line-height: 12px;
transition: all 0.1s linear;
user-select: none;
}
&:hover {
@ -68,15 +67,15 @@
&-input {
width: 100%;
text-align: left;
outline: 0;
-moz-appearance: textfield;
height: @input-height-base - 2px;
transition: all 0.3s linear;
padding: 0 @control-padding-horizontal - 1px;
text-align: left;
background-color: transparent;
border: 0;
border-radius: @border-radius-base;
padding: 0 @control-padding-horizontal - 1px;
outline: 0;
transition: all 0.3s linear;
-moz-appearance: textfield;
.placeholder();
}
@ -99,16 +98,28 @@
}
&-handler-wrap {
border-left: @border-width-base @border-style-base @border-color-base;
width: 22px;
height: 100%;
background: @component-background;
position: absolute;
top: 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;
opacity: 0;
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 {
@ -132,8 +143,8 @@
}
&-handler-down {
border-top: @border-width-base @border-style-base @border-color-base;
top: 0;
border-top: @border-width-base @border-style-base @border-color-base;
cursor: pointer;
&-inner {
top: 50%;

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

@ -14,8 +14,9 @@
.input-group(~'@{ant-prefix}-input');
&-wrapper {
display: inline-block;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
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';

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

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

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

@ -11,27 +11,20 @@
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #333;
color: fade(@black, 80%);
}
}
&:not(&-small) > .@{ant-prefix}-input-suffix {
right: @control-padding-horizontal;
}
&-enter-button {
.@{ant-prefix}-input-group-addon {
padding: 0;
border: 0;
> .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
> .@{iconfont-css-prefix}-search {
font-size: @font-size-lg;
.@{search-prefix}-button {
width: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
&.@{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} {
display: flex;
flex-direction: column;
flex: auto;
background: @layout-body-background;
flex-direction: column;
/* fix firefox can't set height smaller than content on flex item */
min-height: 0;
background: @layout-body-background;
&,
* {
@ -30,17 +30,17 @@
}
&-header {
background: @layout-header-background;
padding: @layout-header-padding;
height: @layout-header-height;
padding: @layout-header-padding;
line-height: @layout-header-height;
background: @layout-header-background;
}
&-footer {
background: @layout-footer-background;
padding: @layout-footer-padding;
color: @text-color;
font-size: @font-size-base;
background: @layout-footer-background;
}
&-content {
@ -50,20 +50,20 @@
}
&-sider {
transition: all 0.2s;
position: relative;
background: @layout-sider-background;
/* fix firefox can't set width smaller than content on flex item */
min-width: 0;
background: @layout-sider-background;
transition: all 0.2s;
&-children {
height: 100%;
margin-top: -0.1px;
// Hack for fixing margin collaspe bug
// https://github.com/ant-design/ant-design/issues/7967
// solution from https://stackoverflow.com/a/33132624/3040605
padding-top: 0.1px;
margin-top: -0.1px;
}
&-has-trigger {
@ -76,14 +76,14 @@
&-trigger {
position: fixed;
text-align: center;
bottom: 0;
cursor: pointer;
height: @layout-trigger-height;
line-height: @layout-trigger-height;
color: @layout-trigger-color;
background: @layout-trigger-background;
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;
}
@ -96,13 +96,13 @@
position: absolute;
top: @layout-header-height;
right: -@layout-zero-trigger-width;
text-align: center;
width: @layout-zero-trigger-width;
height: @layout-zero-trigger-height;
line-height: @layout-zero-trigger-height;
background: @layout-sider-background;
color: @layout-trigger-color;
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;
cursor: pointer;
transition: background 0.3s ease;
@ -110,6 +110,10 @@
&:hover {
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 {
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
border-radius: @border-radius-base;
.@{list-prefix-cls}-header {
padding-left: 24px;
padding-right: 24px;
padding-left: 24px;
}
.@{list-prefix-cls}-footer {
padding-left: 24px;
padding-right: 24px;
padding-left: 24px;
}
.@{list-prefix-cls}-item {
border-bottom: 1px solid @border-color-split;
padding-left: 24px;
padding-right: 24px;
padding-left: 24px;
border-bottom: 1px solid @border-color-split;
}
.@{list-prefix-cls}-pagination {
@ -23,8 +23,8 @@
&.@{list-prefix-cls}-sm {
.@{list-prefix-cls}-item {
padding-left: 16px;
padding-right: 16px;
padding-left: 16px;
}
.@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer {

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

@ -17,28 +17,28 @@
margin-top: 12px;
text-align: center;
button {
padding-left: 32px;
padding-right: 32px;
padding-left: 32px;
}
}
&-spin {
text-align: center;
min-height: 40px;
text-align: center;
}
&-empty-text {
padding: @list-empty-text-padding;
color: @text-color-secondary;
font-size: @font-size-base;
padding: @list-empty-text-padding;
text-align: center;
}
&-item {
align-items: center;
display: flex;
align-items: center;
padding: @list-item-padding;
&-meta {
align-items: flex-start;
display: flex;
flex: 1;
align-items: flex-start;
font-size: 0;
&-avatar {
margin-right: @list-item-meta-avatar-margin-right;
@ -47,8 +47,8 @@
flex: 1 0;
}
&-title {
color: @text-color;
margin-bottom: 4px;
color: @text-color;
font-size: @font-size-base;
line-height: 22px;
> a {
@ -74,32 +74,32 @@
justify-content: flex-start;
}
&-action {
font-size: 0;
flex: 0 0 auto;
margin-left: 48px;
padding: 0;
font-size: 0;
list-style: none;
& > li {
display: inline-block;
color: @text-color-secondary;
cursor: pointer;
padding: 0 8px;
position: relative;
display: inline-block;
padding: 0 8px;
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
text-align: center;
cursor: pointer;
}
& > li:first-child {
padding-left: 0;
}
&-split {
background-color: @border-color-split;
margin-top: -7px;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
margin-top: -7px;
background-color: @border-color-split;
}
}
&-main {
@ -108,6 +108,14 @@
}
}
&-header {
background: @list-header-background;
}
&-footer {
background: @list-footer-background;
}
&-header,
&-footer {
padding-top: 12px;
@ -115,8 +123,8 @@
}
&-empty {
color: @text-color-secondary;
padding: 16px 0;
color: @text-color-secondary;
font-size: 12px;
text-align: center;
}
@ -165,17 +173,17 @@
&-meta {
margin-bottom: @list-item-meta-margin-bottom;
&-title {
color: @heading-color;
margin-bottom: @list-item-meta-title-margin-bottom;
color: @heading-color;
font-size: @font-size-lg;
line-height: 24px;
}
}
&-content {
display: block;
margin: @list-item-content-margin;
color: @text-color;
font-size: @font-size-base;
margin: @list-item-content-margin;
}
&-action {
margin-left: auto;
@ -189,10 +197,10 @@
}
&-grid &-item {
border-bottom: none;
margin-bottom: 16px;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 16px;
border-bottom: none;
&-content {
display: block;
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 {
opacity: 0.45;
transition: all 0.3s;
&:after,
&:before {
&::after,
&::before {
background: @menu-dark-arrow-color;
}
}
@ -20,7 +20,7 @@
&-dark &-inline&-sub {
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 {
@ -29,13 +29,13 @@
&-dark&-horizontal > &-item,
&-dark&-horizontal > &-submenu {
border-color: @menu-dark-bg;
border-bottom: 0;
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;
}
@ -56,10 +56,10 @@
&-dark&-vertical &-item,
&-dark&-vertical-left &-item,
&-dark&-vertical-right &-item {
border-right: 0;
margin-left: 0;
left: 0;
&:after {
margin-left: 0;
border-right: 0;
&::after {
border-right: 0;
}
}
@ -75,8 +75,8 @@
&-dark &-submenu-open,
&-dark &-submenu-selected,
&-dark &-submenu-title:hover {
background-color: transparent;
color: @menu-dark-highlight-color;
background-color: transparent;
> a {
color: @menu-dark-highlight-color;
}
@ -84,8 +84,8 @@
> .@{menu-prefix-cls}-submenu-title:hover {
> .@{menu-prefix-cls}-submenu-arrow {
opacity: 1;
&:after,
&:before {
&::after,
&::before {
background: @menu-dark-highlight-color;
}
}
@ -93,9 +93,9 @@
}
&-dark &-item-selected {
border-right: 0;
color: @menu-dark-highlight-color;
&:after {
border-right: 0;
&::after {
border-right: 0;
}
> a,
@ -114,14 +114,14 @@
&-dark &-submenu-disabled {
&,
> a {
opacity: 0.8;
color: @disabled-color-dark !important;
opacity: 0.8;
}
> .@{menu-prefix-cls}-submenu-title {
color: @disabled-color-dark !important;
> .@{menu-prefix-cls}-submenu-arrow {
&:before,
&:after {
&::before,
&::after {
background: @disabled-color-dark !important;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,29 +6,29 @@
.@{spin-prefix-cls} {
.reset-component;
color: @primary-color;
vertical-align: middle;
text-align: center;
opacity: 0;
position: absolute;
transition: transform 0.3s @ease-in-out-circ;
display: none;
color: @primary-color;
text-align: center;
vertical-align: middle;
opacity: 0;
transition: transform 0.3s @ease-in-out-circ;
&-spinning {
opacity: 1;
position: static;
display: inline-block;
opacity: 1;
}
&-nested-loading {
position: relative;
> div > .@{spin-prefix-cls} {
display: block;
position: absolute;
z-index: 4;
display: block;
width: 100%;
height: 100%;
max-height: 400px;
width: 100%;
z-index: 4;
.@{spin-prefix-cls}-dot {
position: absolute;
top: 50%;
@ -40,7 +40,7 @@
top: 50%;
width: 100%;
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 {
margin-top: -@spin-dot-size / 2 - 10px;
@ -76,30 +76,32 @@
position: relative;
transition: opacity 0.3s;
&:after {
content: '';
&::after {
position: absolute;
left: 0;
right: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
height: 100%;
width: 100%;
left: 0;
z-index: 10;
display: ~'none \9';
width: 100%;
height: 100%;
background: @component-background;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
content: '';
}
}
&-blur {
pointer-events: none;
user-select: none;
clear: both;
overflow: hidden;
opacity: 0.5;
user-select: none;
pointer-events: none;
&:after {
&::after {
opacity: 0.4;
pointer-events: auto;
}
@ -122,23 +124,23 @@
.square(@spin-dot-size);
i {
position: absolute;
display: block;
width: 9px;
height: 9px;
border-radius: 100%;
background-color: @primary-color;
border-radius: 100%;
transform: scale(0.75);
display: block;
position: absolute;
transform-origin: 50% 50%;
opacity: 0.3;
animation: antSpinMove 1s infinite linear alternate;
transform-origin: 50% 50%;
&:nth-child(1) {
left: 0;
top: 0;
left: 0;
}
&:nth-child(2) {
right: 0;
top: 0;
right: 0;
animation-delay: 0.4s;
}
&:nth-child(3) {
@ -147,8 +149,8 @@
animation-delay: 0.8s;
}
&:nth-child(4) {
left: 0;
bottom: 0;
left: 0;
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-icon {
height: auto;
background: none;
border: 0;
width: auto;
height: auto;
> .@{steps-prefix-cls}-icon {
font-size: 24px;
line-height: @steps-icon-size;
top: 0;
left: 0.5px;
width: @steps-icon-size;
height: @steps-icon-size;
font-size: 24px;
line-height: @steps-icon-size;
}
}
&.@{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-description-color: @text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: #fff;
@process-icon-text-color: @text-color-inverse;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@ -29,24 +29,24 @@
.@{steps-prefix-cls} {
.reset-component;
font-size: 0;
width: 100%;
display: flex;
width: 100%;
font-size: 0;
}
.@{steps-prefix-cls}-item {
position: relative;
display: inline-block;
vertical-align: top;
flex: 1;
overflow: hidden;
vertical-align: top;
&:last-child {
flex: none;
}
&:last-child &-tail,
&:last-child &-title:after {
&:last-child &-title::after {
display: none;
}
@ -57,61 +57,61 @@
}
&-icon {
border: @border-width-base @border-style-base @wait-icon-color;
width: @steps-icon-size;
height: @steps-icon-size;
margin-right: 8px;
font-size: @font-size-lg;
font-family: @font-family;
line-height: @steps-icon-size;
text-align: center;
border: @border-width-base @border-style-base @wait-icon-color;
border-radius: @steps-icon-size;
font-size: @font-size-lg;
margin-right: 8px;
transition: background-color 0.3s, border-color 0.3s;
font-family: @font-family;
> .@{steps-prefix-cls}-icon {
line-height: 1;
position: relative;
top: -1px;
color: @primary-color;
position: relative;
line-height: 1;
}
}
&-tail {
position: absolute;
top: 12px;
left: 0;
width: 100%;
top: 12px;
padding: 0 10px;
&:after {
content: '';
&::after {
display: inline-block;
background: @border-color-split;
height: 1px;
border-radius: 1px;
width: 100%;
height: 1px;
background: @border-color-split;
border-radius: 1px;
transition: background 0.3s;
content: '';
}
}
&-title {
font-size: @font-size-lg;
color: @text-color;
position: relative;
display: inline-block;
padding-right: 16px;
position: relative;
color: @text-color;
font-size: @font-size-lg;
line-height: @steps-icon-size;
&:after {
content: '';
height: 1px;
width: 9999px;
background: @wait-tail-color;
display: block;
&::after {
position: absolute;
top: @steps-icon-size / 2;
left: 100%;
display: block;
width: 9999px;
height: 1px;
background: @wait-tail-color;
content: '';
}
}
&-description {
font-size: @font-size-base;
color: @text-color-secondary;
font-size: @font-size-base;
}
.step-item-status(wait);
.step-item-status(process);
@ -127,7 +127,7 @@
.step-item-status(finish);
.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;
}
}
@ -158,8 +158,8 @@
@description-color: '@{status}-description-color';
@tail-color: '@{status}-tail-color';
&-@{status} &-icon {
border-color: @@icon-color;
background-color: @steps-background;
border-color: @@icon-color;
> .@{steps-prefix-cls}-icon {
color: @@icon-color;
.@{steps-prefix-cls}-icon-dot {
@ -169,14 +169,14 @@
}
&-@{status} > &-content > &-title {
color: @@title-color;
&:after {
&::after {
background-color: @@tail-color;
}
}
&-@{status} > &-content > &-description {
color: @@description-color;
}
&-@{status} > &-tail:after {
&-@{status} > &-tail::after {
background-color: @@tail-color;
}
}
@ -186,3 +186,4 @@
@import 'vertical';
@import 'label-placement';
@import 'progress-dot';
@import 'compatibility';

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

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

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

@ -4,13 +4,13 @@
line-height: @line-height-base;
}
&-tail {
width: 100%;
top: 2px;
width: 100%;
margin: 0 0 0 @steps-desciption-max-width / 2;
padding: 0;
&:after {
height: 3px;
&::after {
width: ~'calc(100% - 20px)';
height: 3px;
margin-left: 12px;
}
}
@ -18,29 +18,29 @@
left: 2px;
}
&-icon {
padding-right: 0;
width: @steps-dot-size;
height: @steps-dot-size;
line-height: @steps-dot-size;
border: 0;
margin-left: 67px;
padding-right: 0;
line-height: @steps-dot-size;
background: transparent;
border: 0;
.@{steps-prefix-cls}-icon-dot {
position: relative;
float: left;
width: 100%;
height: 100%;
border-radius: 100px;
position: relative;
transition: all 0.3s;
/* expand hover area */
&:after {
content: '';
background: rgba(0, 0, 0, 0.001);
width: 60px;
height: 32px;
&::after {
position: absolute;
top: -12px;
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}-item-icon {
margin-left: 0;
margin-top: 8px;
margin-left: 0;
}
.@{steps-prefix-cls}-item-tail {
margin: 0;
left: -9px;
top: 2px;
left: -9px;
margin: 0;
padding: 22px 0 4px;
}
.@{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 {
width: @steps-small-icon-size;
height: @steps-small-icon-size;
font-size: @font-size-sm;
line-height: @steps-small-icon-size;
text-align: center;
border-radius: @steps-small-icon-size;
font-size: @font-size-sm;
}
.@{steps-prefix-cls}-item-title {
padding-right: 12px;
font-size: @font-size-base;
line-height: @steps-small-icon-size;
padding-right: 12px;
&:after {
&::after {
top: @steps-small-icon-size / 2;
}
}
.@{steps-prefix-cls}-item-description {
font-size: @font-size-base;
color: @text-color-secondary;
font-size: @font-size-base;
}
.@{steps-prefix-cls}-item-tail {
top: 8px;
@ -34,9 +34,9 @@
width: inherit;
height: inherit;
line-height: inherit;
border-radius: 0;
border: 0;
background: none;
border: 0;
border-radius: 0;
> .@{steps-prefix-cls}-icon {
font-size: @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;
}
&-content {
display: block;
min-height: 48px;
overflow: hidden;
display: block;
}
&-title {
line-height: @steps-icon-size;
@ -22,14 +22,14 @@
> .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
position: absolute;
left: 16px;
top: 0;
height: 100%;
left: 16px;
width: 1px;
height: 100%;
padding: @steps-icon-size + 6px 0 6px;
&:after {
height: 100%;
&::after {
width: 1px;
height: 100%;
}
}
@ -40,7 +40,7 @@
> .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-content
> .@{steps-prefix-cls}-item-title {
&:after {
&::after {
display: none;
}
}
@ -48,8 +48,8 @@
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item-tail {
position: absolute;
left: 12px;
top: 0;
left: 12px;
padding: @steps-small-icon-size + 6px 0 6px;
}
.@{steps-prefix-cls}-item-title {

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

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

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

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

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

@ -45,8 +45,8 @@
}
> .@{table-prefix-cls}-title {
border-bottom: @border-width-base @border-style-base @border-color-split;
top: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
> .@{table-prefix-cls}-content {
@ -74,7 +74,7 @@
padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
}
> .@{table-prefix-cls}-thead > tr > th {
background-color: @component-background;
background-color: transparent;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
> .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
@ -112,8 +112,8 @@
.@{table-prefix-cls}-title {
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-bottom: @border-width-base @border-style-base @border-color-split;
}
.@{table-prefix-cls}-content {
@ -124,15 +124,15 @@
border: 0;
border-top: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
&:before {
&::before {
display: none;
}
}
.@{table-prefix-cls}-placeholder {
border-left: 0;
border-bottom: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}
.@{table-prefix-cls}-thead > tr > th:last-child,
@ -148,8 +148,8 @@
}
.@{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-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 {
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-bottom: 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;
line-height: @tabs-card-height - 2px;
}
&&-card &-card-bar &-tab-active {
padding-bottom: 1px;
color: @tabs-card-active-color;
background: @component-background;
border-color: @border-color-split;
color: @tabs-card-active-color;
padding-bottom: 1px;
}
&&-card &-card-bar &-tab-inactive {
padding: 0;
@ -35,16 +35,16 @@
margin-bottom: 0;
}
&&-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;
height: 16px;
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 {
color: @heading-color;
}
@ -69,13 +69,13 @@
position: relative;
width: 20px;
height: 20px;
color: @text-color;
font-size: 12px;
line-height: 20px;
text-align: center;
cursor: pointer;
border-radius: @border-radius-sm;
border: @border-width-base @border-style-base @border-color-split;
font-size: 12px;
color: @text-color;
border-radius: @border-radius-sm;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @tabs-card-active-color;
@ -99,8 +99,8 @@
height: auto;
}
.@{tab-prefix-cls}-tab {
border-bottom: @border-width-base @border-style-base @border-color-split;
margin-bottom: 8px;
border-bottom: @border-width-base @border-style-base @border-color-split;
&-active {
padding-bottom: 4px;
}
@ -118,9 +118,9 @@
margin-right: 0;
}
.@{tab-prefix-cls}-tab {
margin-right: 1px;
border-right: 0;
border-radius: @border-radius-base 0 0 @border-radius-base;
margin-right: 1px;
&-active {
margin-right: -1px;
padding-right: 18px;
@ -133,9 +133,9 @@
margin-left: 0;
}
.@{tab-prefix-cls}-tab {
margin-left: 1px;
border-left: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
margin-left: 1px;
&-active {
margin-left: -1px;
padding-left: 18px;
@ -145,14 +145,14 @@
// https://github.com/ant-design/ant-design/issues/9104
& &-card-bar&-bottom-bar &-tab {
border-bottom: @border-width-base @border-style-base @border-color-split;
border-top: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
}
& &-card-bar&-bottom-bar &-tab-active {
color: @primary-color;
padding-bottom: 0;
padding-top: 1px;
padding-bottom: 0;
color: @primary-color;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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