mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Enhance stylelint rules (#14803)

Browse Source 
* rename .stylelintrc to .stylelintrc.json for explicit file type

* add new npm script lint-fix:style

* fix pseudo-element with double colon

* function name should be lower except ignored functions

* support stylelint declaration-block-no-ignored-properties rule

* support sorted CSS properties order for readability and consistency

* autofix order of all styles by lint-fix:style script

* remove double slash comments after selector

* replace .stylelintignore with ignoreFiles in .stylelintrc.json
This commit is contained in:
米老朱 2019-02-15 10:48:07 +08:00 committed by 偏右
parent 80e6204803
commit 6936599aef
111 changed files with 2369 additions and 2385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc
View File

@ -8,12 +8,6 @@
"options": {
"parser": "json"
}
},
{
"files": ".stylelintrc",
"options": {
"parser": "json"
}
}
]
}

4
.stylelintignore
View File

@ -1,4 +0,0 @@
components/style/color/bezierEasing.less
components/style/color/colorPalette.less
components/style/color/tinyColor.less
components/style/core/base.less

11
.stylelintrc
View File

@ -1,11 +0,0 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,
"function-name-case": null,
"selector-pseudo-element-colon-notation": null,
"no-invalid-double-slash-comments": null,
"no-descending-specificity": null
}
}

17
.stylelintrc.json Normal file
View File

@ -0,0 +1,17 @@
{
"extends": [
"stylelint-config-standard",
"stylelint-config-rational-order",
"stylelint-config-prettier"
],
"plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
"rules": {
"comment-empty-line-before": null,
"declaration-empty-line-before": null,
"function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
"no-invalid-double-slash-comments": null,
"no-descending-specificity": null,
"plugin/declaration-block-no-ignored-properties": true
},
"ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
}

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

@ -23,56 +23,56 @@
}
&-icon {
position: absolute;
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
left: 16px;
position: absolute;
}
&-description {
display: none;
font-size: @font-size-base;
line-height: 22px;
display: none;
}
&-success {
border: @border-width-base @border-style-base @alert-success-border-color;
background-color: @alert-success-bg-color;
border: @border-width-base @border-style-base @alert-success-border-color;
.@{alert-prefix-cls}-icon {
color: @alert-success-icon-color;
}
}
&-info {
border: @border-width-base @border-style-base @alert-info-border-color;
background-color: @alert-info-bg-color;
border: @border-width-base @border-style-base @alert-info-border-color;
.@{alert-prefix-cls}-icon {
color: @alert-info-icon-color;
}
}
&-warning {
border: @border-width-base @border-style-base @alert-warning-border-color;
background-color: @alert-warning-bg-color;
border: @border-width-base @border-style-base @alert-warning-border-color;
.@{alert-prefix-cls}-icon {
color: @alert-warning-icon-color;
}
}
&-error {
border: @border-width-base @border-style-base @alert-error-border-color;
background-color: @alert-error-bg-color;
border: @border-width-base @border-style-base @alert-error-border-color;
.@{alert-prefix-cls}-icon {
color: @alert-error-icon-color;
}
}
&-close-icon {
font-size: @font-size-sm;
position: absolute;
right: 16px;
top: 8px;
line-height: 22px;
right: 16px;
overflow: hidden;
font-size: @font-size-sm;
line-height: 22px;
cursor: pointer;
.@{iconfont-css-prefix}-close {
@ -90,11 +90,11 @@
}
&-with-description {
padding: 15px 15px 15px 64px;
position: relative;
border-radius: @border-radius-base;
padding: 15px 15px 15px 64px;
color: @alert-text-color;
line-height: @line-height-base;
border-radius: @border-radius-base;
}
&-with-description&-no-icon {
@ -112,15 +112,15 @@
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
font-size: @font-size-base;
cursor: pointer;
}
&-with-description &-message {
font-size: @font-size-lg;
color: @alert-message-color;
display: block;
margin-bottom: 4px;
color: @alert-message-color;
font-size: @font-size-lg;
}
&-with-description &-description {
@ -132,8 +132,8 @@
margin: 0;
padding-top: 0;
padding-bottom: 0;
transition: all 0.3s @ease-in-out-circ;
transform-origin: 50% 0;
transition: all 0.3s @ease-in-out-circ;
}
&-slide-up-leave {
@ -142,34 +142,34 @@
}
&-banner {
border-radius: 0;
border: 0;
margin-bottom: 0;
border: 0;
border-radius: 0;
}
}
@keyframes antAlertSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
transform-origin: 0% 0%;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes antAlertSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
transform-origin: 0% 0%;
opacity: 0;
}
}

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

@ -9,37 +9,37 @@
padding-left: @anchor-border-width;
&-wrapper {
background-color: @component-background;
overflow: auto;
padding-left: 4px;
margin-left: -4px;
padding-left: 4px;
overflow: auto;
background-color: @component-background;
}
&-ink {
position: absolute;
height: 100%;
left: 0;
top: 0;
&:before {
content: ' ';
left: 0;
height: 100%;
&::before {
position: relative;
display: block;
width: @anchor-border-width;
height: 100%;
display: block;
background-color: @border-color-split;
margin: 0 auto;
background-color: @border-color-split;
content: ' ';
}
&-ball {
display: none;
position: absolute;
left: 50%;
display: none;
width: 8px;
height: 8px;
border-radius: 8px;
border: 2px solid @primary-color;
background-color: @component-background;
left: 50%;
transition: top 0.3s ease-in-out;
border: 2px solid @primary-color;
border-radius: 8px;
transform: translateX(-50%);
transition: top 0.3s ease-in-out;
&.visible {
display: inline-block;
}
@ -55,14 +55,14 @@
line-height: 1.143;
&-title {
display: block;
position: relative;
transition: all 0.3s;
display: block;
margin-bottom: 6px;
overflow: hidden;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
transition: all 0.3s;
&:only-child {
margin-bottom: 0;

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

@ -15,14 +15,14 @@
border: 0;
box-shadow: none;
&__rendered {
margin-left: 0;
margin-right: 0;
height: 100%;
margin-right: 0;
margin-left: 0;
line-height: @input-height-base;
}
&__placeholder {
margin-left: (@input-padding-horizontal-base + 1px);
margin-right: (@input-padding-horizontal-base + 1px);
margin-left: (@input-padding-horizontal-base + 1px);
}
&--single {
@ -44,10 +44,10 @@
}
.@{input-prefix-cls} {
height: @input-height-base;
line-height: @line-height-base;
background: transparent;
border-width: @border-width-base;
line-height: @line-height-base;
height: @input-height-base;
&:focus,
&:hover {
.hover;
@ -63,9 +63,9 @@
line-height: @input-height-lg;
}
.@{input-prefix-cls} {
height: @input-height-lg;
padding-top: @input-padding-vertical-lg;
padding-bottom: @input-padding-vertical-lg;
height: @input-height-lg;
}
}
@ -74,9 +74,9 @@
line-height: @input-height-sm;
}
.@{input-prefix-cls} {
height: @input-height-sm;
padding-top: @input-padding-vertical-sm;
padding-bottom: @input-padding-vertical-sm;
height: @input-height-sm;
}
}
}

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

@ -5,14 +5,14 @@
.@{avatar-prefix-cls} {
.reset-component;
position: relative;
display: inline-block;
text-align: center;
background: @avatar-bg;
overflow: hidden;
color: @avatar-color;
white-space: nowrap;
position: relative;
overflow: hidden;
text-align: center;
vertical-align: middle;
background: @avatar-bg;
&-image {
background: transparent;
@ -33,9 +33,9 @@
}
& > img {
display: block;
width: 100%;
height: 100%;
display: block;
}
}

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

@ -5,23 +5,23 @@
.@{backtop-prefix-cls} {
.reset-component;
z-index: @zindex-back-top;
position: fixed;
right: 100px;
bottom: 50px;
height: 40px;
z-index: @zindex-back-top;
width: 40px;
height: 40px;
cursor: pointer;
&-content {
height: 40px;
width: 40px;
border-radius: 20px;
background-color: @back-top-bg;
height: 40px;
overflow: hidden;
color: @back-top-color;
text-align: center;
background-color: @back-top-bg;
border-radius: 20px;
transition: all 0.3s @ease-in-out;
overflow: hidden;
&:hover {
background-color: @back-top-hover-bg;
@ -30,9 +30,9 @@
}
&-icon {
margin: 12px auto;
width: 14px;
height: 16px;
margin: 12px auto;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
~'100%/100%' no-repeat;
}

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

@ -8,23 +8,23 @@
.reset-component;
position: relative;
display: inline-block;
line-height: 1;
color: unset;
line-height: 1;
&-count {
height: @badge-height;
border-radius: @badge-height / 2;
min-width: @badge-height;
background: @highlight-color;
color: @badge-text-color;
line-height: @badge-height;
text-align: center;
padding: 0 6px;
font-size: @badge-font-size;
font-weight: @badge-font-weight;
white-space: nowrap;
box-shadow: 0 0 0 1px @shadow-color-inverse;
z-index: @zindex-badge;
min-width: @badge-height;
height: @badge-height;
padding: 0 6px;
color: @badge-text-color;
font-weight: @badge-font-weight;
font-size: @badge-font-size;
line-height: @badge-height;
white-space: nowrap;
text-align: center;
background: @highlight-color;
border-radius: @badge-height / 2;
box-shadow: 0 0 0 1px @shadow-color-inverse;
a,
a:hover {
color: @badge-text-color;
@ -36,11 +36,11 @@
}
&-dot {
height: @badge-dot-size;
width: @badge-dot-size;
border-radius: 100%;
background: @highlight-color;
z-index: @zindex-badge;
width: @badge-dot-size;
height: @badge-dot-size;
background: @highlight-color;
border-radius: 100%;
box-shadow: 0 0 0 1px @shadow-color-inverse;
}
@ -48,8 +48,8 @@
&-dot,
.@{number-prefix-cls}-custom-component {
position: absolute;
right: 0;
top: 0;
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0%;
}
@ -59,30 +59,30 @@
vertical-align: baseline;
&-dot {
width: @badge-status-size;
height: @badge-status-size;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
display: inline-block;
width: @badge-status-size;
height: @badge-status-size;
vertical-align: middle;
border-radius: 50%;
}
&-success {
background-color: @success-color;
}
&-processing {
background-color: @processing-color;
position: relative;
&:after {
background-color: @processing-color;
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid @processing-color;
content: '';
border-radius: 50%;
animation: antStatusProcessing 1.2s infinite ease-in-out;
content: '';
}
}
&-default {
@ -95,9 +95,9 @@
background-color: @warning-color;
}
&-text {
margin-left: 8px;
color: @text-color;
font-size: @font-size-base;
margin-left: 8px;
}
}
@ -116,9 +116,9 @@
vertical-align: middle;
.@{ant-prefix}-scroll-number {
position: relative;
top: auto;
display: block;
position: relative;
}
.@{badge-prefix-cls}-count {
@ -142,8 +142,8 @@
overflow: hidden;
&-only {
display: inline-block;
transition: all 0.3s @ease-in-out;
height: @badge-height;
transition: all 0.3s @ease-in-out;
> p {
height: @badge-height;
margin: 0;
@ -153,8 +153,8 @@
@keyframes antZoomBadgeIn {
0% {
opacity: 0;
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(50%, -50%);
@ -166,7 +166,7 @@
transform: scale(1) translate(50%, -50%);
}
100% {
opacity: 0;
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
}

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

@ -23,8 +23,8 @@
// Ref: https://github.com/ant-design/ant-design/issues/7034
> i,
> span {
pointer-events: none;
display: inline-block;
pointer-events: none;
}
&-primary {
@ -78,20 +78,20 @@
.btn-circle(@btn-prefix-cls);
}
&:before {
&::before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: @component-background;
opacity: 0.35;
content: '';
border-radius: inherit;
bottom: -1px;
left: -1px;
z-index: 1;
display: none;
background: @component-background;
border-radius: inherit;
opacity: 0.35;
transition: opacity 0.2s;
pointer-events: none;
display: none;
content: '';
}
.@{iconfont-css-prefix} {
@ -107,14 +107,14 @@
}
}
&&-loading:before {
&&-loading::before {
display: block;
}
&&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
position: relative;
padding-left: 29px;
pointer-events: none;
position: relative;
.@{iconfont-css-prefix}:not(:last-child) {
margin-left: -14px;
}
@ -132,8 +132,8 @@
}
&:not(&-circle):not(&-circle-outline)&-icon-only {
padding-left: 8px;
padding-right: 8px;
padding-left: 8px;
}
// http://stackoverflow.com/a/21281554/3040605
@ -149,9 +149,9 @@
}
&-background-ghost {
color: @component-background;
background: transparent !important;
border-color: @component-background;
color: @component-background;
}
&-background-ghost&-primary {
@ -162,13 +162,13 @@
.button-variant-ghost(@btn-danger-color);
}
&-two-chinese-chars:first-letter {
&-two-chinese-chars::first-letter {
letter-spacing: 0.34em;
}
&-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
letter-spacing: 0.34em;
margin-right: -0.34em;
letter-spacing: 0.34em;
}
&-block {

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

@ -1,10 +1,10 @@
// mixins for button
// ------------------------
.button-size(@height; @padding; @font-size; @border-radius) {
height: @height;
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
height: @height;
}
.button-disabled() {
@ -105,14 +105,14 @@
// http://stackoverflow.com/a/17253457
> a:only-child {
color: currentColor;
&:after {
content: '';
&::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
content: '';
}
}
}
@ -150,19 +150,19 @@
// Base styles of buttons
// --------------------------------------------------
.btn() {
position: relative;
display: inline-block;
font-weight: @btn-font-weight;
white-space: nowrap;
text-align: center;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: @border-width-base @border-style-base transparent;
white-space: nowrap;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
user-select: none;
transition: all 0.3s @ease-in-out;
position: relative;
box-shadow: @btn-shadow;
cursor: pointer;
transition: all 0.3s @ease-in-out;
user-select: none;
touch-action: manipulation;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
> .@{iconfont-css-prefix} {
line-height: 1;
}
@ -203,8 +203,8 @@
&:focus,
&:active,
&.active {
background: @btn-default-bg;
text-decoration: none;
background: @btn-default-bg;
}
}
// ghost button style
@ -278,13 +278,13 @@
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-base;
border-top-left-radius: @btn-border-radius-base;
border-bottom-left-radius: @btn-border-radius-base;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-base;
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
}
&-sm {
> .@{btnClassName}:only-child {
@ -295,13 +295,13 @@
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-sm;
border-top-left-radius: @btn-border-radius-sm;
border-bottom-left-radius: @btn-border-radius-sm;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-sm;
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
}
}
& > & {
@ -312,14 +312,14 @@
}
& > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

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

@ -5,16 +5,16 @@
.@{full-calendar-prefix-cls} {
.reset-component;
outline: none;
border-top: @border-width-base @border-style-base @border-color-base;
outline: none;
.@{ant-prefix}-select&-year-select {
min-width: 90px;
}
.@{ant-prefix}-select&-month-select {
margin-left: 8px;
min-width: 80px;
margin-left: 8px;
}
&-header {
@ -32,8 +32,8 @@
label.@{ant-prefix}-radio-button {
height: 22px;
line-height: 20px;
padding: 0 10px;
line-height: 20px;
}
}
@ -47,11 +47,11 @@
}
table {
border-collapse: collapse;
max-width: 100%;
background-color: transparent;
width: 100%;
max-width: 100%;
height: 256px;
background-color: transparent;
border-collapse: collapse;
}
table,
@ -65,14 +65,14 @@
}
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
border-spacing: 0;
}
&-column-header {
line-height: 18px;
padding: 0;
width: 33px;
padding: 0;
line-height: 18px;
text-align: center;
.@{full-calendar-prefix-cls}-column-header-inner {
display: block;
@ -94,14 +94,14 @@
&-value {
display: block;
margin: 0 auto;
color: @text-color;
border-radius: @border-radius-sm;
width: 24px;
height: 24px;
margin: 0 auto;
padding: 0;
background: transparent;
color: @text-color;
line-height: 24px;
background: transparent;
border-radius: @border-radius-sm;
transition: all 0.3s;
&:hover {
@ -110,8 +110,8 @@
}
&:active {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
}
@ -126,8 +126,8 @@
&-selected-day &-value,
&-month-panel-selected-cell &-value {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
&-disabled-cell-first-of-row &-value {
@ -146,16 +146,16 @@
}
&-month-panel-table {
table-layout: fixed;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
&-content {
position: absolute;
width: 100%;
left: 0;
bottom: -9px;
left: 0;
width: 100%;
}
&-fullscreen {
@ -178,12 +178,12 @@
&-fullscreen &-month,
&-fullscreen &-date {
text-align: left;
margin: 0 4px;
display: block;
color: @text-color;
height: 116px;
margin: 0 4px;
padding: 4px 8px;
color: @text-color;
text-align: left;
border-top: 2px solid @border-color-split;
transition: background 0.3s;
@ -198,15 +198,15 @@
}
&-fullscreen &-column-header {
text-align: right;
padding-right: 12px;
padding-bottom: 5px;
text-align: right;
}
&-fullscreen &-value {
width: auto;
text-align: right;
background: transparent;
width: auto;
}
&-fullscreen &-today &-value {
@ -215,8 +215,8 @@
&-fullscreen &-month-panel-current-cell &-month,
&-fullscreen &-today &-date {
border-top-color: @primary-color;
background: transparent;
border-top-color: @primary-color;
}
&-fullscreen &-month-panel-current-cell &-value,
@ -240,12 +240,10 @@
}
&-fullscreen &-content {
height: 88px;
overflow-y: auto;
position: static;
width: auto;
left: auto;
bottom: auto;
height: 88px;
overflow-y: auto;
}
&-disabled-cell &-date {
@ -263,9 +261,9 @@
}
&-disabled-cell &-value {
width: auto;
color: @disabled-color;
border-radius: 0;
width: auto;
cursor: not-allowed;
}
}

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

@ -10,16 +10,16 @@
.@{card-prefix-cls} {
.reset-component;
position: relative;
background: @component-background;
border-radius: @card-radius;
position: relative;
transition: all 0.3s;
&-hoverable {
cursor: pointer;
&:hover {
box-shadow: @card-shadow;
border-color: @card-hover-border;
box-shadow: @card-shadow;
}
}
@ -28,16 +28,16 @@
}
&-head {
background: @card-head-background;
border-bottom: @border-width-base @border-style-base @border-color-split;
padding: 0 @card-padding-base;
border-radius: @card-radius @card-radius 0 0;
.clearfix;
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
min-height: @card-head-height;
font-size: @font-size-lg;
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
padding: 0 @card-padding-base;
color: @card-head-color;
font-weight: 500;
font-size: @font-size-lg;
background: @card-head-background;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @card-radius @card-radius 0 0;
.clearfix;
&-wrapper {
display: flex;
@ -45,20 +45,20 @@
}
&-title {
display: inline-block;
flex: 1;
padding: @card-head-padding 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex: 1;
display: inline-block;
text-overflow: ellipsis;
}
.@{ant-prefix}-tabs {
margin-bottom: -17px;
clear: both;
font-size: @font-size-base;
margin-bottom: -17px;
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
&-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
@ -68,12 +68,12 @@
&-extra {
float: right;
padding: @card-head-padding 0;
font-size: @font-size-base;
color: @text-color;
font-weight: normal;
// https://stackoverflow.com/a/22429853/3040605
margin-left: auto;
padding: @card-head-padding 0;
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
}
&-body {
@ -87,14 +87,14 @@
}
&-grid {
border-radius: 0;
float: left;
width: 33.33%;
padding: @card-padding-base;
border: 0;
border-radius: 0;
box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
0 1px 0 0 @border-color-split inset;
width: 33.33%;
float: left;
padding: @card-padding-base;
transition: all 0.3s;
&:hover {
position: relative;
@ -104,8 +104,8 @@
}
&-contain-tabs > &-head &-head-title {
padding-bottom: 0;
min-height: @card-head-height - @card-head-padding;
padding-bottom: 0;
}
&-contain-tabs &-extra {
@ -114,8 +114,8 @@
&-cover {
> * {
width: 100%;
display: block;
width: 100%;
}
img {
border-radius: @card-radius @card-radius 0 0;
@ -123,26 +123,26 @@
}
&-actions {
border-top: @border-width-base @border-style-base @border-color-split;
background: @card-actions-background;
.clearfix;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
background: @card-actions-background;
border-top: @border-width-base @border-style-base @border-color-split;
.clearfix;
& > li {
float: left;
text-align: center;
margin: 12px 0;
color: @text-color-secondary;
text-align: center;
& > span {
display: inline-block;
font-size: 14px;
cursor: pointer;
line-height: 22px;
min-width: 32px;
position: relative;
display: inline-block;
min-width: 32px;
font-size: 14px;
line-height: 22px;
cursor: pointer;
&:hover {
color: @primary-color;
@ -155,10 +155,10 @@
}
a {
color: @text-color-secondary;
line-height: 22px;
display: inline-block;
width: 100%;
color: @text-color-secondary;
line-height: 22px;
&:hover {
color: @primary-color;
@ -208,8 +208,8 @@
.clearfix;
&-avatar {
padding-right: 16px;
float: left;
padding-right: 16px;
}
&-detail {
@ -220,12 +220,12 @@
}
&-title {
font-size: @font-size-lg;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: @card-head-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap;
text-overflow: ellipsis;
}
&-description {
@ -250,10 +250,10 @@
&-loading-block {
height: 14px;
margin: 4px 0;
border-radius: @card-radius;
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
animation: card-loading 1.4s ease infinite;
background-size: 600% 600%;
border-radius: @card-radius;
animation: card-loading 1.4s ease infinite;
}
}

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

@ -15,10 +15,10 @@
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
&:focus {
outline: none;
@ -43,17 +43,17 @@
.slick-track {
position: relative;
left: 0;
top: 0;
left: 0;
display: block;
&:before,
&:after {
content: '';
&::before,
&::after {
display: table;
content: '';
}
&:after {
&::after {
clear: both;
}
@ -62,6 +62,7 @@
}
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
@ -75,8 +76,6 @@
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
@ -103,43 +102,43 @@
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0;
font-size: 0;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
display: block;
width: 20px;
height: 20px;
margin-top: -10px;
padding: 0;
color: transparent;
font-size: 0;
line-height: 0;
background: transparent;
border: 0;
outline: none;
cursor: pointer;
&:hover,
&:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
background: transparent;
outline: none;
&::before {
opacity: 1;
}
}
&.slick-disabled:before {
&.slick-disabled::before {
opacity: 0.25;
}
}
.slick-prev {
left: -25px;
&:before {
&::before {
content: '←';
}
}
.slick-next {
right: -25px;
&:before {
&::before {
content: '→';
}
}
@ -148,43 +147,43 @@
.slick-dots {
position: absolute;
bottom: 12px;
list-style: none;
display: block;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: @carousel-dot-height;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
li {
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0 2px;
padding: 0;
text-align: center;
vertical-align: top;
button {
border: 0;
cursor: pointer;
background: @component-background;
opacity: 0.3;
display: block;
width: @carousel-dot-width;
height: @carousel-dot-height;
padding: 0;
color: transparent;
font-size: 0;
background: @component-background;
border: 0;
border-radius: 1px;
outline: none;
font-size: 0;
color: transparent;
cursor: pointer;
opacity: 0.3;
transition: all 0.5s;
padding: 0;
&:hover,
&:focus {
opacity: 0.75;
}
}
&.slick-active button {
width: @carousel-dot-active-width;
background: @component-background;
opacity: 1;
width: @carousel-dot-active-width;
&:hover,
&:focus {
opacity: 1;
@ -196,12 +195,12 @@
.@{ant-prefix}-carousel-vertical {
.slick-dots {
width: @carousel-dot-height;
bottom: auto;
right: 12px;
top: 50%;
transform: translateY(-50%);
right: 12px;
bottom: auto;
width: @carousel-dot-height;
height: auto;
transform: translateY(-50%);
li {
margin: 0 2px;
vertical-align: baseline;

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

@ -8,12 +8,12 @@
.reset-component;
&-input.@{ant-prefix}-input {
position: relative;
width: 100%;
// Add important to fix https://github.com/ant-design/ant-design/issues/5078
// because input.less will compile after cascader.less
background-color: transparent !important;
cursor: pointer;
width: 100%;
position: relative;
}
&-picker-show-search &-input.@{ant-prefix}-input {
@ -24,10 +24,10 @@
.reset-component;
position: relative;
display: inline-block;
cursor: pointer;
background-color: @component-background;
border-radius: @border-radius-base;
outline: 0;
cursor: pointer;
transition: color 0.3s;
&-with-value &-label {
@ -35,9 +35,9 @@
}
&-disabled {
cursor: not-allowed;
background: @input-disabled-bg;
color: @disabled-color;
background: @input-disabled-bg;
cursor: not-allowed;
.@{cascader-prefix-cls}-input {
cursor: not-allowed;
}
@ -53,32 +53,32 @@
&-label {
position: absolute;
left: 0;
height: 20px;
line-height: 20px;
top: 50%;
left: 0;
width: 100%;
height: 20px;
margin-top: -10px;
padding: 0 @control-padding-horizontal;
overflow: hidden;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
padding: 0 @control-padding-horizontal;
}
&-clear {
opacity: 0;
position: absolute;
top: 50%;
right: @control-padding-horizontal;
z-index: 2;
background: @component-background;
top: 50%;
font-size: @font-size-sm;
color: @disabled-color;
width: 12px;
height: 12px;
margin-top: -6px;
color: @disabled-color;
font-size: @font-size-sm;
line-height: 12px;
background: @component-background;
cursor: pointer;
opacity: 0;
transition: color 0.3s ease, opacity 0.15s ease;
&:hover {
color: @text-color-secondary;
@ -92,15 +92,15 @@
// arrow
&-arrow {
position: absolute;
z-index: 1;
top: 50%;
right: @control-padding-horizontal;
z-index: 1;
width: 12px;
height: 12px;
font-size: 12px;
margin-top: -6px;
line-height: 12px;
color: @disabled-color;
font-size: 12px;
line-height: 12px;
transition: transform 0.2s;
&&-expand {
transform: rotate(180deg);
@ -114,19 +114,19 @@
}
&-menus {
font-size: @font-size-base;
background: @component-background;
position: absolute;
z-index: @zindex-dropdown;
font-size: @font-size-base;
white-space: nowrap;
background: @component-background;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
white-space: nowrap;
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
&-empty,
@ -153,22 +153,22 @@
}
&-menu {
display: inline-block;
vertical-align: top;
min-width: 111px;
height: 180px;
list-style: none;
margin: 0;
padding: 0;
border-right: @border-width-base @border-style-base @border-color-split;
overflow: auto;
vertical-align: top;
list-style: none;
border-right: @border-width-base @border-style-base @border-color-split;
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
&:first-child {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
&:last-child {
border-right-color: transparent;
margin-right: -1px;
border-right-color: transparent;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
&:only-child {
@ -178,15 +178,15 @@
&-menu-item {
padding: 5px @control-padding-horizontal;
line-height: 22px;
cursor: pointer;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: @item-hover-bg;
}
&-disabled {
cursor: not-allowed;
color: @disabled-color;
cursor: not-allowed;
&:hover {
background: transparent;
}
@ -194,8 +194,8 @@
&-active:not(&-disabled) {
&,
&:hover {
background: @background-color-base;
font-weight: 600;
background: @background-color-base;
}
}
&-expand {
@ -206,9 +206,9 @@
&-expand &-expand-icon,
&-expand &-loading-icon {
.iconfont-size-under-12px(10px);
color: @text-color-secondary;
position: absolute;
right: @control-padding-horizontal;
color: @text-color-secondary;
}
& &-keyword {

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

@ -5,14 +5,14 @@
// 一般状态
.@{checkbox-prefix-cls} {
.reset-component;
white-space: nowrap;
cursor: pointer;
outline: none;
position: relative;
top: -0.09em;
display: inline-block;
line-height: 1;
position: relative;
white-space: nowrap;
vertical-align: middle;
top: -0.09em;
outline: none;
cursor: pointer;
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner,
@ -20,22 +20,22 @@
border-color: @checkbox-color;
}
&-checked:after {
&-checked::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: @border-radius-sm;
border: 1px solid @checkbox-color;
content: '';
border-radius: @border-radius-sm;
visibility: hidden;
animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: both;
visibility: hidden;
content: '';
}
&:hover:after,
.@{checkbox-prefix-cls}-wrapper:hover &:after {
&:hover::after,
.@{checkbox-prefix-cls}-wrapper:hover &::after {
visibility: visible;
}
@ -46,18 +46,17 @@
display: block;
width: @checkbox-size;
height: @checkbox-size;
background-color: @checkbox-check-color;
border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @border-radius-sm;
background-color: @checkbox-check-color;
transition: all 0.3s;
// Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate;
transition: all 0.3s;
&:after {
&::after {
@check-width: (@checkbox-size / 14) * 5px;
@check-height: (@checkbox-size / 14) * 8px;
transform: rotate(45deg) scale(0) translate(-50%, -50%);
position: absolute;
top: 50%;
left: 21%;
@ -67,37 +66,38 @@
border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
content: ' ';
transition: all 0.1s @ease-in-back, opacity 0.1s;
transform: rotate(45deg) scale(0) translate(-50%, -50%);
opacity: 0;
transition: all 0.1s @ease-in-back, opacity 0.1s;
content: ' ';
}
}
&-input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
transform: rotate(45deg) scale(1) translate(-50%, -50%);
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
position: absolute;
display: table;
border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
content: ' ';
transition: all 0.2s @ease-out-back 0.1s;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
opacity: 1;
transition: all 0.2s @ease-out-back 0.1s;
content: ' ';
}
.@{checkbox-prefix-cls}-checked {
@ -111,9 +111,9 @@
cursor: not-allowed;
&.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls}:after {
animation-name: none;
.@{checkbox-inner-prefix-cls}::after {
border-color: @disabled-color;
animation-name: none;
}
}
@ -122,12 +122,12 @@
}
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base !important;
background-color: @input-disabled-bg;
&:after {
animation-name: none;
border-color: @border-color-base !important;
&::after {
border-color: @input-disabled-bg;
border-collapse: separate;
animation-name: none;
}
}
@ -139,9 +139,9 @@
.@{checkbox-prefix-cls}-wrapper {
.reset-component;
display: inline-block;
line-height: unset;
cursor: pointer;
display: inline-block;
& + & {
margin-left: 8px;
}
@ -149,8 +149,8 @@
.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
padding-left: 8px;
padding-right: 8px;
padding-left: 8px;
}
.@{checkbox-prefix-cls}-group {
@ -174,23 +174,23 @@
background-color: #fff;
border-color: @border-color-base;
}
.@{checkbox-inner-prefix-cls}:after {
.@{checkbox-inner-prefix-cls}::after {
@indeterminate-width: @checkbox-size - 8px;
@indeterminate-height: @checkbox-size - 8px;
content: ' ';
transform: translate(-50%, -50%) scale(1);
border: 0;
left: 50%;
top: 50%;
left: 50%;
width: @indeterminate-width;
height: @indeterminate-height;
background-color: @checkbox-color;
border: 0;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
content: ' ';
}
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
border-color: @disabled-color;
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
background-color: @disabled-color;
border-color: @disabled-color;
}
}
}

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

@ -6,9 +6,9 @@
.@{collapse-prefix-cls} {
.reset-component;
background-color: @collapse-header-bg;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
border-radius: @border-radius-base;
& > &-item {
border-bottom: @border-width-base @border-style-base @border-color-base;
@ -21,24 +21,23 @@
}
> .@{collapse-prefix-cls}-header {
line-height: 22px;
position: relative;
padding: @collapse-header-padding;
color: @heading-color;
line-height: 22px;
cursor: pointer;
position: relative;
transition: all 0.3s;
.@{collapse-prefix-cls}-arrow {
.iconfont-mixin();
font-size: @font-size-sm;
position: absolute;
display: inline-block;
line-height: 46px;
vertical-align: top;
top: 50%;
margin-top: 2px;
transform: translateY(-50%);
left: @padding-md;
display: inline-block;
margin-top: 2px;
font-size: @font-size-sm;
line-height: 46px;
transform: translateY(-50%);
& svg {
transition: transform 0.24s;
@ -108,8 +107,8 @@
& &-item-disabled > &-header {
&,
& > .arrow {
cursor: not-allowed;
color: @disabled-color;
cursor: not-allowed;
}
}
}

22
components/comment/style/index.less
View File

@ -7,13 +7,13 @@
position: relative;
&-inner {
padding: @comment-padding-base;
display: flex;
padding: @comment-padding-base;
}
&-avatar {
flex-shrink: 0;
position: relative;
flex-shrink: 0;
margin-right: 12px;
cursor: pointer;
img {
@ -25,28 +25,28 @@
&-content {
position: relative;
font-size: 14px;
flex: 1 1 auto;
min-width: 1px;
font-size: 14px;
word-wrap: break-word;
&-author {
margin-bottom: 4px;
font-size: 14px;
display: flex;
justify-content: flex-start;
margin-bottom: 4px;
font-size: 14px;
& > a,
& > span {
height: 18px;
padding-right: 8px;
font-size: 12px;
line-height: 18px;
padding-right: 8px;
}
&-name {
transition: color 0.3s;
font-size: 14px;
color: @comment-author-name-color;
font-size: 14px;
transition: color 0.3s;
> * {
color: @comment-author-name-color;
&:hover {
@ -56,9 +56,9 @@
}
&-time {
cursor: auto;
color: @comment-author-time-color;
white-space: nowrap;
cursor: auto;
}
}
@ -75,10 +75,10 @@
color: @comment-action-color;
> span {
padding-right: 10px;
transition: color 0.3s;
font-size: 12px;
color: @comment-action-color;
font-size: 12px;
cursor: pointer;
transition: color 0.3s;
user-select: none;
&:hover {
color: @comment-action-hover-color;

114
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 @border-color-inverse;
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,22 +166,22 @@
}
&-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 {
@ -201,9 +201,9 @@
}
&-today &-date {
border-color: @primary-color;
font-weight: bold;
color: @primary-color;
font-weight: bold;
border-color: @primary-color;
}
&-last-month-cell &-date,
@ -219,8 +219,8 @@
&-selected-start-date,
&-selected-end-date {
.@{calendar-prefix-cls}-date {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
border: @border-width-base @border-style-base transparent;
&:hover {
@ -230,12 +230,12 @@
}
&-disabled-cell &-date {
cursor: not-allowed;
width: auto;
color: @disabled-color;
background: @disabled-bg;
border-radius: 0;
width: auto;
border: @border-width-base @border-style-base transparent;
border-radius: 0;
cursor: not-allowed;
&:hover {
background: @disabled-bg;
@ -245,8 +245,7 @@
position: relative;
padding-right: 5px;
padding-left: 5px;
&:before {
content: ' ';
&::before {
position: absolute;
top: -1px;
left: 5px;
@ -254,6 +253,7 @@
height: 24px;
border: @border-width-base @border-style-base @disabled-color;
border-radius: @border-radius-sm;
content: ' ';
}
}
@ -268,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;
@ -286,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;
@ -298,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;
}

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

@ -1,12 +1,12 @@
.@{calendar-prefix-cls}-decade-panel {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
display: flex;
flex-direction: column;
background: @component-background;
border-radius: @border-radius-base;
outline: none;
@ -32,26 +32,26 @@
}
.@{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;
@ -62,19 +62,19 @@
}
.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
&:hover {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
}
.@{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;
}
}

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

@ -5,15 +5,15 @@
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
border-radius: @border-radius-base;
background: @component-background;
border-radius: @border-radius-base;
outline: none;
> div {
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
@ -37,19 +37,19 @@
}
.@{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 {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
&:hover {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
}
@ -59,22 +59,22 @@
&-disabled .@{calendar-prefix-cls}-month-panel-month {
&,
&:hover {
cursor: not-allowed;
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;

20
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,9 +89,9 @@
}
&-icon {
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;
}
}
}

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

@ -5,15 +5,15 @@
bottom: 0;
left: 0;
z-index: @zindex-picker-panel;
border-radius: @border-radius-base;
background: @component-background;
border-radius: @border-radius-base;
outline: none;
> div {
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
display: flex;
flex-direction: column;
// TODO: this is a useless wrapper, and we need to remove it in rc-calendar
height: 100%;
}
}
@ -37,9 +37,9 @@
}
.@{calendar-prefix-cls}-year-panel-table {
table-layout: fixed;
width: 100%;
height: 100%;
table-layout: fixed;
border-collapse: separate;
}
@ -49,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;
@ -66,19 +66,19 @@
}
.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
&:hover {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
}
.@{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;
}
}

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

@ -9,43 +9,43 @@
&, /* 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;
}
}

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

@ -9,9 +9,9 @@
.@{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;
}
@ -93,53 +93,53 @@
&.@{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;
right: 0;
z-index: @zindex-popup-close;
font-weight: 700;
text-decoration: none;
transition: color @animation-duration-slow;
color: @text-color-secondary;
outline: 0;
padding: 0;
display: block;
font-style: normal;
text-align: center;
text-transform: none;
text-rendering: auto;
width: 56px;
height: 56px;
line-height: 56px;
padding: 0;
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 {
@ -149,17 +149,17 @@
}
&-header {
padding: 16px 24px;
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color;
border-bottom: @border-width-base @border-style-base @border-color-split;
position: relative;
padding: 16px 24px;
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 {
background: @component-background;
color: @text-color;
background: @component-background;
}
&-body {
@ -173,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;
}

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

@ -6,20 +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: ' ';
opacity: 0.0001;
left: -7px;
z-index: -9999;
opacity: 0.0001;
content: ' ';
}
&-wrap {
@ -29,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);
}
}
@ -46,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;
}
@ -75,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;
@ -92,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;
@ -125,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);
}
}
@ -150,9 +150,9 @@
}
&-submenu-vertical > & {
position: absolute;
top: 0;
left: 100%;
position: absolute;
min-width: 100%;
margin-left: 4px;
transform-origin: 0 0;
@ -208,8 +208,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);
@ -226,7 +226,7 @@
.@{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 {
@ -238,8 +238,8 @@
&,
&:hover,
> a {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
}
}

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

@ -4,14 +4,14 @@
@empty-prefix-cls: ~'@{ant-prefix}-empty';
.@{empty-prefix-cls} {
text-align: center;
margin: 0 8px;
font-size: @empty-font-size;
line-height: 22px;
margin: 0 8px;
text-align: center;
&-image {
margin-bottom: 8px;
height: 100px;
margin-bottom: 8px;
img {
height: 100%;

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

@ -16,14 +16,14 @@
.reset-form;
}
.@{form-prefix-cls}-item-required:before {
.@{form-prefix-cls}-item-required::before {
display: inline-block;
margin-right: 4px;
content: '*';
color: @label-required-color;
font-size: @font-size-base;
font-family: SimSun, sans-serif;
line-height: 1;
font-size: @font-size-base;
color: @label-required-color;
content: '*';
.@{form-prefix-cls}-hide-required-mark & {
display: none;
}
@ -65,8 +65,8 @@ input[type='checkbox'] {
position: relative;
> .@{iconfont-css-prefix} {
vertical-align: top;
font-size: @font-size-base;
vertical-align: top;
}
}
@ -76,8 +76,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 - 0.0001px; // https://github.com/ant-design/ant-design/issues/8220
.clearfix;
}
@ -86,26 +86,26 @@ input[type='checkbox'] {
}
&-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;
}
}
}
@ -114,7 +114,7 @@ input[type='checkbox'] {
margin: 2px 0 4px;
}
&-no-colon &-label label:after {
&-no-colon &-label label::after {
content: ' ';
}
}
@ -136,10 +136,10 @@ input[type='checkbox'] {
.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
clear: both;
margin-top: @form-help-margin-top;
color: @text-color-secondary;
transition: color 0.3s @ease-out; // sync input color transition
margin-top: @form-help-margin-top;
clear: both;
}
.@{form-prefix-cls}-extra {
@ -226,10 +226,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;
@ -269,30 +269,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;
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;
}
}
@ -306,14 +306,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;
}
}
@ -421,16 +421,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;
@ -445,8 +445,8 @@ form {
.has-success {
&.has-feedback .@{form-prefix-cls}-item-children-icon {
animation-name: diffZoomIn1 !important;
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
@ -473,9 +473,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;
@ -535,9 +535,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;
@ -615,19 +615,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

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

@ -7,24 +7,24 @@
.@{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: @input-number-handler-active-bg;
}
@ -37,14 +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;
right: 4px;
color: @text-color-secondary;
line-height: 12px;
transition: all 0.1s linear;
user-select: none;
}
&:hover {
@ -67,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();
}
@ -98,15 +98,15 @@
}
&-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
@ -143,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%;

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

@ -14,8 +14,8 @@
.input-group(~'@{ant-prefix}-input');
&-wrapper {
display: inline-block;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
width: 100%;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
}

70
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-'] {
@ -146,16 +146,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 +163,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 +179,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 +223,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 +255,8 @@
.@{inputClass}-affix-wrapper {
display: table-cell;
width: 100%;
float: left;
width: 100%;
}
&&-compact {
@ -278,15 +278,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 +301,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 +330,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
@ -360,9 +360,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;
}

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

@ -16,13 +16,13 @@
}
.@{ant-prefix}-input-group-addon {
border: 0;
padding: 0;
border: 0;
.@{search-prefix}-button {
width: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 100%;
}
}
}

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

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 {

36
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 {
@ -123,8 +123,8 @@
}
&-empty {
color: @text-color-secondary;
padding: 16px 0;
color: @text-color-secondary;
font-size: 12px;
text-align: center;
}
@ -173,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;
@ -197,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%;

60
components/mention/style/index.less
View File

@ -13,14 +13,14 @@
.@{mention-prefix-cls}-editor {
.input;
min-height: @input-height-base;
height: auto; // To override height in .input mixin
line-height: @line-height-base;
padding: 0;
display: block;
height: auto; // To override height in .input mixin
min-height: @input-height-base;
padding: 0;
line-height: @line-height-base;
&-wrapper {
overflow-y: auto;
height: auto;
overflow-y: auto;
}
}
&.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor {
@ -33,13 +33,13 @@
position: absolute;
pointer-events: none;
.public-DraftEditorPlaceholder-inner {
color: @input-placeholder-color;
opacity: 1;
outline: none;
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
padding: 5px @control-padding-horizontal - 1px;
color: @input-placeholder-color;
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
opacity: 1;
}
}
.DraftEditor-editorContainer .public-DraftEditor-content {
@ -50,19 +50,19 @@
.@{mention-prefix-cls}-dropdown {
.reset-component;
margin-top: 1.5em;
max-height: 250px;
min-width: 120px;
background-color: @component-background;
box-shadow: @box-shadow-base;
border-radius: @border-radius-base;
z-index: @zindex-dropdown;
left: -9999px;
top: -9999px;
position: absolute;
outline: none;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
min-width: 120px;
max-height: 250px;
margin-top: 1.5em;
overflow-x: hidden;
overflow-y: auto;
background-color: @component-background;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&-placement-top {
margin-top: -0.1em;
@ -72,22 +72,22 @@
color: @disabled-color;
.@{iconfont-css-prefix}-loading {
display: block;
color: @primary-color;
text-align: center;
display: block;
}
}
&-item {
position: relative;
display: block;
padding: 5px @control-padding-horizontal;
line-height: 22px;
font-weight: normal;
color: @text-color;
white-space: nowrap;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
color: @text-color;
font-weight: normal;
line-height: 22px;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
transition: background 0.3s;
&:hover {
@ -113,9 +113,9 @@
&-selected {
&,
&:hover {
background-color: @background-color-base;
font-weight: bold;
color: @text-color;
font-weight: bold;
background-color: @background-color-base;
}
}
@ -123,8 +123,8 @@
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: @border-color-split;
line-height: 0;
background-color: @border-color-split;
}
}
}

32
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;
}
}
@ -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: @menu-bg;
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;
}
}

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

@ -4,67 +4,66 @@
.@{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;
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,
@ -76,10 +75,10 @@
&-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,18 +130,18 @@
.@{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;
}
}

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

116
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,18 +107,18 @@
.@{pagination-prefix-cls}-item-ellipsis {
position: absolute;
display: block;
letter-spacing: 2px;
text-indent: 0.13em;
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;
}
}
@ -142,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,
@ -170,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;
}
}
@ -195,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;
}
}
@ -208,8 +208,8 @@
&-options {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
vertical-align: middle;
&-size-changer.@{ant-prefix}-select {
display: inline-block;
@ -219,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;
}
}
}
@ -237,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;
}
@ -248,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 {
@ -276,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;
}
@ -289,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;
}
@ -308,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 {

38
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: fade(@white, 1%);
content: '';
}
&-hidden {
@ -67,12 +67,12 @@
&-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 {
@ -81,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;
@ -97,8 +97,8 @@
}
&-buttons {
text-align: right;
margin-bottom: 4px;
text-align: right;
button {
margin-left: 8px;
}
@ -108,25 +108,25 @@
// .popover-arrow is outer, .popover-arrow:after is inner
&-arrow {
background: transparent;
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;
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 + 2.2px;
box-shadow: 3px 3px 7px fade(@black, 7%);
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%;
@ -143,11 +143,11 @@
&-placement-rightTop > &-content > &-arrow,
&-placement-rightBottom > &-content > &-arrow {
left: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -3px 3px 7px fade(@black, 7%);
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%;
@ -164,11 +164,11 @@
&-placement-bottomLeft > &-content > &-arrow,
&-placement-bottomRight > &-content > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -2px -2px 5px fade(@black, 6%);
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%;
@ -185,11 +185,11 @@
&-placement-leftTop > &-content > &-arrow,
&-placement-leftBottom > &-content > &-arrow {
right: @popover-distance - @popover-arrow-width + 2px;
box-shadow: 3px -3px 7px fade(@black, 7%);
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%;

50
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: '';
}
}
@ -124,16 +124,16 @@
&-circle &-text {
position: absolute;
width: 100%;
text-align: center;
line-height: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin: 0;
padding: 0;
color: @progress-text-color;
line-height: 1;
white-space: normal;
text-align: center;
transform: translate(-50%, -50%);
.@{iconfont-css-prefix} {
font-size: 14 / 12em;
@ -154,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;
}
}

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

@ -16,21 +16,21 @@
// 一般状态
.@{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 &,
@ -43,42 +43,42 @@
box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
}
&-checked:after {
&-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;
@ -87,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;
}
}
@ -111,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;
@ -121,10 +121,10 @@
.@{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 {
&::after {
background-color: fade(@black, 20%);
}
}
@ -140,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: color 0.3s, background 0.3s, border-color 0.3s;
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 {
@ -210,8 +210,8 @@ span.@{radio-prefix-cls} + * {
}
&:hover {
color: @radio-dot-color;
position: relative;
color: @radio-dot-color;
}
&:focus-within {
@ -221,18 +221,18 @@ span.@{radio-prefix-cls} + * {
.@{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;
@ -243,15 +243,15 @@ 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 {
@ -260,18 +260,18 @@ span.@{radio-prefix-cls} + * {
}
.@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
color: @component-background;
background: @radio-dot-color;
border-color: @radio-dot-color;
color: @component-background;
&:hover {
border-color: @radio-button-hover-color;
background: @radio-button-hover-color;
color: @component-background;
background: @radio-button-hover-color;
border-color: @radio-button-hover-color;
}
&:active {
border-color: @radio-button-active-color;
background: @radio-button-active-color;
color: @component-background;
background: @radio-button-active-color;
border-color: @radio-button-active-color;
}
&:focus-within {
outline: @radio-focused-outline;
@ -279,16 +279,16 @@ span.@{radio-prefix-cls} + * {
}
&-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;

26
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,14 +22,14 @@
}
&-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;
> div {
&:focus {
@ -44,9 +44,9 @@
&-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;
}
@ -54,8 +54,8 @@
&-first {
position: absolute;
left: 0;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
@ -74,8 +74,8 @@
}
&-text {
margin-left: 8px;
display: inline-block;
margin-left: 8px;
font-size: @font-size-base;
}
}

213
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 @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;
}
}
@ -137,33 +136,33 @@
}
&-disabled &-selection--multiple &-selection__choice {
background: @background-color-base;
color: fade(@black, 33%);
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,25 +340,25 @@
.@{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: @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,15 +548,15 @@
.@{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;
text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
transform: translateY(-50%);
transition: all 0.2s ease;
.iconfont-size-under-12px(10px);
}
&:hover .@{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 {

58
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%;
@ -76,32 +76,32 @@
position: relative;
transition: opacity 0.3s;
&:after {
content: '';
&::after {
position: absolute;
left: 0;
right: 0;
top: 0;
right: 0;
bottom: 0;
background: @component-background;
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 {
clear: both;
pointer-events: none;
user-select: none;
overflow: hidden;
opacity: 0.5;
user-select: none;
pointer-events: none;
&:after {
&::after {
opacity: 0.4;
pointer-events: auto;
}
@ -124,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) {
@ -149,8 +149,8 @@
animation-delay: 0.8s;
}
&:nth-child(4) {
left: 0;
bottom: 0;
left: 0;
animation-delay: 1.2s;
}
}

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

@ -7,8 +7,8 @@
.reset-component;
&-title {
font-size: @statistic-title-font-size;
margin-bottom: 4px;
font-size: @statistic-title-font-size;
}
&-content {

26
components/steps/style/compatibility.less
View File

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

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

@ -1,15 +1,15 @@
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
height: auto;
background: none;
border: 0;
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 {

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

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

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

@ -2,15 +2,15 @@
.@{steps-prefix-cls}-item {
overflow: visible;
&-tail {
padding: 3.5px 24px;
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: fade(@black, 0.1%);
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 {

34
components/style/core/base.less
View File

@ -71,13 +71,13 @@ section {
body {
margin: 0; // 1
font-family: @font-family;
font-size: @font-size-base;
font-variant: @font-variant-base;
font-feature-settings: 'tnum';
line-height: @line-height-base;
color: @text-color;
font-size: @font-size-base;
font-family: @font-family;
font-variant: @font-variant-base;
line-height: @line-height-base;
background-color: @body-background; // 2
font-feature-settings: 'tnum';
}
// Suppress the focus outline on elements that cannot be accessed via keyboard.
@ -141,8 +141,8 @@ abbr[data-original-title] {
// 4
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
cursor: help; // 3
border-bottom: 0; // 1
cursor: help; // 3
}
address {
@ -224,8 +224,8 @@ sup {
a {
color: @link-color;
background-color: transparent; // remove the gray background on active links in IE 10.
text-decoration: @link-decoration;
background-color: transparent; // remove the gray background on active links in IE 10.
outline: none;
cursor: pointer;
transition: color 0.3s;
@ -246,8 +246,8 @@ a {
&:active,
&:hover {
outline: 0;
text-decoration: @link-hover-decoration;
outline: 0;
}
&[disabled] {
@ -265,8 +265,8 @@ pre,
code,
kbd,
samp {
font-family: @code-family;
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
font-family: @code-family;
}
pre {
@ -353,10 +353,10 @@ select,
optgroup,
textarea {
margin: 0; // remove the margin in Firefox and Safari
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
button,
@ -373,7 +373,7 @@ select {
// controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
html [type="button"], // 1
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; // 2
@ -419,9 +419,9 @@ fieldset {
// See https://github.com/twbs/bootstrap/issues/12359
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
min-width: 0;
margin: 0;
// Reset the default outline behavior of fieldsets so they don't affect page layout.
padding: 0;
margin: 0;
border: 0;
}
@ -431,11 +431,11 @@ legend {
display: block;
width: 100%;
max-width: 100%; // 1
padding: 0;
margin-bottom: 0.5em;
padding: 0;
color: inherit; // 2
font-size: 1.5em;
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
}
@ -505,8 +505,8 @@ mark {
}
::selection {
background: @primary-color;
color: @text-color-inverse;
background: @primary-color;
}
// Utility classes

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

@ -9,7 +9,7 @@
}
}
.@{iconfont-css-prefix}-spin:before {
.@{iconfont-css-prefix}-spin::before {
display: inline-block;
animation: loadingCircle 1s infinite linear;
}

36
components/style/core/motion/move.less
View File

@ -17,104 +17,104 @@
@keyframes antMoveDownIn {
0% {
transform-origin: 0 0;
transform: translateY(100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes antMoveDownOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes antMoveLeftIn {
0% {
transform-origin: 0 0;
transform: translateX(-100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes antMoveLeftOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(-100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes antMoveRightIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes antMoveRightOut {
0% {
transform-origin: 0 0;
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes antMoveUpIn {
0% {
transform-origin: 0 0;
transform: translateY(-100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes antMoveUpOut {
0% {
transform-origin: 0 0;
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateY(-100%);
transform-origin: 0 0;
opacity: 0;
}
}

16
components/style/core/motion/other.less
View File

@ -9,29 +9,29 @@
position: relative;
}
[ant-click-animating-without-extra-node='true']:after,
[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
content: '';
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: inherit;
bottom: -1px;
left: -1px;
display: block;
border: 0 solid @primary-color;
border-radius: inherit;
opacity: 0.2;
animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
animation-fill-mode: forwards;
display: block;
pointer-events: none;
content: '';
}
@keyframes waveEffect {
100% {
top: -@wave-animation-width;
left: -@wave-animation-width;
bottom: -@wave-animation-width;
right: -@wave-animation-width;
bottom: -@wave-animation-width;
left: -@wave-animation-width;
border-width: @wave-animation-width;
}
}

64
components/style/core/motion/slide.less
View File

@ -17,104 +17,104 @@
@keyframes antSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes antSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes antSlideDownIn {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
transform-origin: 100% 100%;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes antSlideDownOut {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
transform-origin: 100% 100%;
opacity: 1;
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
transform-origin: 100% 100%;
opacity: 0;
}
}
@keyframes antSlideLeftIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes antSlideLeftOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes antSlideRightIn {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
transform-origin: 100% 0%;
opacity: 0;
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes antSlideRightOut {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
transform-origin: 100% 0%;
opacity: 1;
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
transform-origin: 100% 0%;
opacity: 0;
}
}

60
components/style/core/motion/zoom.less
View File

@ -25,12 +25,12 @@
@keyframes antZoomIn {
0% {
opacity: 0;
transform: scale(0.2);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
opacity: 1;
}
}
@ -39,19 +39,19 @@
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.2);
opacity: 0;
}
}
@keyframes antZoomBigIn {
0% {
opacity: 0;
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
opacity: 1;
}
}
@ -60,103 +60,103 @@
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
opacity: 0;
}
}
@keyframes antZoomUpIn {
0% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
}
100% {
transform-origin: 50% 0%;
transform: scale(1);
transform-origin: 50% 0%;
}
}
@keyframes antZoomUpOut {
0% {
transform-origin: 50% 0%;
transform: scale(1);
transform-origin: 50% 0%;
}
100% {
opacity: 0;
transform-origin: 50% 0%;
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
}
}
@keyframes antZoomLeftIn {
0% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
}
100% {
transform-origin: 0% 50%;
transform: scale(1);
transform-origin: 0% 50%;
}
}
@keyframes antZoomLeftOut {
0% {
transform-origin: 0% 50%;
transform: scale(1);
transform-origin: 0% 50%;
}
100% {
opacity: 0;
transform-origin: 0% 50%;
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
}
}
@keyframes antZoomRightIn {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
}
100% {
transform-origin: 100% 50%;
transform: scale(1);
transform-origin: 100% 50%;
}
}
@keyframes antZoomRightOut {
0% {
transform-origin: 100% 50%;
transform: scale(1);
transform-origin: 100% 50%;
}
100% {
opacity: 0;
transform-origin: 100% 50%;
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
}
}
@keyframes antZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform-origin: 50% 100%;
transform: scale(1);
transform-origin: 50% 100%;
}
}
@keyframes antZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1);
transform-origin: 50% 100%;
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
}
}

6
components/style/mixins/clearfix.less
View File

@ -2,12 +2,12 @@
// ------------------------
.clearfix() {
zoom: 1;
&:before,
&:after {
&::before,
&::after {
content: '';
display: table;
}
&:after {
&::after {
clear: both;
}
}

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

@ -1,10 +1,10 @@
.iconfont-mixin() {
display: inline-block;
font-style: normal;
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
line-height: 0;
text-align: center;
text-transform: none;
line-height: 0;
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -17,7 +17,7 @@
display: inline-block;
}
&:before {
&::before {
display: none; // dont display old icon.
}

10
components/style/mixins/reset.less
View File

@ -1,13 +1,13 @@
@import '../themes/default';
.reset-component() {
font-size: @font-size-base;
font-variant: @font-variant-base;
font-feature-settings: 'tnum';
line-height: @line-height-base;
color: @text-color;
box-sizing: border-box;
margin: 0;
padding: 0;
color: @text-color;
font-size: @font-size-base;
font-variant: @font-variant-base;
line-height: @line-height-base;
list-style: none;
font-feature-settings: 'tnum';
}

66
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 {
display: block;
margin-right: 6px;
margin-left: 24px;
color: @text-color-inverse;
font-size: @font-size-sm;
margin-left: 24px;
margin-right: 6px;
display: block;
}
&-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 {
&::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,8 +158,8 @@
* {
cursor: not-allowed;
}
&:before,
&:after {
&::before,
&::after {
cursor: not-allowed;
}
}
@ -167,11 +167,11 @@
@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%;
}
}

128
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;
}
@ -155,17 +155,17 @@
> *:not(.@{table-prefix-cls}-column-sorter) {
position: relative;
}
&:before {
&::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);
}
}
@ -216,19 +216,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: '';
}
}
@ -237,22 +237,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,
@ -307,14 +307,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 {
@ -328,12 +328,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;
@ -355,8 +355,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;
}
}
@ -388,36 +388,36 @@
&-placeholder {
position: relative;
padding: @table-padding-vertical @table-padding-horizontal;
background: @component-background;
border-radius: 0 0 @border-radius-base @border-radius-base;
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;
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;
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 {
@ -435,7 +435,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;
@ -455,8 +455,8 @@
}
&-btns {
overflow: hidden;
padding: 7px 8px;
overflow: hidden;
border-top: @border-width-base @border-style-base @border-color-split;
}
@ -503,10 +503,10 @@
}
&-down {
cursor: pointer;
padding: 0;
display: inline-block;
padding: 0;
line-height: 1;
cursor: pointer;
&:hover .@{iconfont-css-prefix}-down {
color: fade(@black, 60%);
}
@ -515,28 +515,28 @@
&-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: '.';
}
}
@ -589,9 +589,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;
@ -601,10 +601,10 @@
&-fixed-right {
position: absolute;
top: 0;
overflow: hidden;
transition: box-shadow 0.3s ease;
border-radius: 0;
z-index: @zindex-table-fixed;
overflow: hidden;
border-radius: 0;
transition: box-shadow 0.3s ease;
table {
width: auto;
background: @component-background;

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

26
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;
@ -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: @text-color-inverse;
}
}

66
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;
}
@ -53,22 +53,22 @@
}
&-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 {
@ -80,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 {
@ -106,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;
}
@ -160,9 +160,9 @@
.reset-component;
position: relative;
display: inline-block;
width: 128px;
outline: none;
transition: opacity 0.3s;
width: 128px;
&-input {
.input;
@ -178,27 +178,27 @@
&-icon,
&-clear {
position: absolute;
top: 50%;
right: @control-padding-horizontal - 1px;
z-index: 1;
user-select: none;
transition: all 0.3s @ease-in-out;
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 {
opacity: 0;
z-index: 2;
background: @input-bg;
opacity: 0;
pointer-events: none;
&:hover {
color: @text-color-secondary;

48
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,42 +38,42 @@
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 {
@ -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;

10
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,16 +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;
min-width: 30px;
word-wrap: break-word;
}
// Arrows
@ -56,8 +56,8 @@
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-color: transparent;
}
&-placement-top &-arrow,

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

@ -15,14 +15,14 @@
}
&-list {
border: @border-width-base @border-style-base @border-color-base;
display: inline-block;
border-radius: @border-radius-base;
vertical-align: middle;
position: relative;
display: inline-block;
width: 180px;
height: 200px;
padding-top: 34px;
vertical-align: middle;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
&-with-footer {
padding-bottom: 34px;
@ -31,17 +31,17 @@
&-search {
padding: 0 @control-padding-horizontal-sm;
&-action {
color: @disabled-color;
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
width: 28px;
color: @disabled-color;
line-height: @input-height-base;
text-align: center;
.@{iconfont-css-prefix} {
transition: all 0.3s;
color: @disabled-color;
transition: all 0.3s;
&:hover {
color: @text-color-secondary;
}
@ -53,16 +53,16 @@
}
&-header {
padding: 6px @control-padding-horizontal;
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color;
border-bottom: @border-width-base @border-style-base @border-color-split;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 6px @control-padding-horizontal;
overflow: hidden;
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;
&-title {
position: absolute;
@ -71,16 +71,16 @@
}
&-body {
font-size: @font-size-base;
position: relative;
height: 100%;
font-size: @font-size-base;
&-search-wrapper {
position: absolute;
top: 0;
left: 0;
padding: 4px;
width: 100%;
padding: 4px;
}
}
@ -90,20 +90,20 @@
&-content {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
padding: 0;
margin: 0;
> .LazyLoad {
animation: transferHighlightIn 1s;
}
&-item {
min-height: 32px;
padding: 6px @control-padding-horizontal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 6px @control-padding-horizontal;
min-height: 32px;
transition: all 0.3s;
> span {
padding-right: 0;
@ -111,23 +111,23 @@
}
&-item:not(&-item-disabled):hover {
cursor: pointer;
background-color: @item-hover-bg;
cursor: pointer;
}
&-item-disabled {
cursor: not-allowed;
color: @btn-disable-color;
cursor: not-allowed;
}
}
&-body-not-found {
padding-top: 0;
color: @disabled-color;
text-align: center;
position: absolute;
top: 50%;
width: 100%;
padding-top: 0;
color: @disabled-color;
text-align: center;
transform: translateY(-50%);
// with filter should offset the search box height
@ -137,19 +137,19 @@
}
&-footer {
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
&-operation {
display: inline-block;
overflow: hidden;
margin: 0 8px;
overflow: hidden;
vertical-align: middle;
.@{ant-prefix}-btn {

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

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

@ -16,32 +16,31 @@
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 4px 0;
margin: 0;
list-style: none;
padding: 4px 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 +68,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 +86,7 @@
}
}
:root &:after {
:root &::after {
opacity: 0;
}
}
@ -101,16 +100,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 +123,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 +157,7 @@
&:last-child > span {
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
&:before {
&::before {
display: none;
}
}
@ -204,8 +203,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 +217,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;
}

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

@ -29,26 +29,26 @@
}
&&-select-picture-card {
border: @border-width-base dashed @border-color-base;
display: table;
width: @upload-picture-card-size;
height: @upload-picture-card-size;
border-radius: @border-radius-base;
background-color: @background-color-light;
text-align: center;
cursor: pointer;
transition: border-color 0.3s ease;
vertical-align: top;
margin-right: 8px;
margin-bottom: 8px;
display: table;
text-align: center;
vertical-align: top;
background-color: @background-color-light;
border: @border-width-base dashed @border-color-base;
border-radius: @border-radius-base;
cursor: pointer;
transition: border-color 0.3s ease;
> .@{upload-prefix-cls} {
display: table-cell;
width: 100%;
height: 100%;
display: table-cell;
padding: 8px;
text-align: center;
vertical-align: middle;
padding: 8px;
}
&:hover {
@ -57,15 +57,15 @@
}
&&-drag {
border: @border-width-base dashed @border-color-base;
transition: border-color 0.3s;
cursor: pointer;
border-radius: @border-radius-base;
text-align: center;
position: relative;
width: 100%;
height: 100%;
position: relative;
text-align: center;
background: @background-color-light;
border: @border-width-base dashed @border-color-base;
border-radius: @border-radius-base;
cursor: pointer;
transition: border-color 0.3s;
.@{upload-prefix-cls} {
padding: 16px 0;
@ -95,24 +95,24 @@
p.@{upload-prefix-cls}-drag-icon {
.@{iconfont-css-prefix} {
font-size: 48px;
color: @primary-5;
font-size: 48px;
}
margin-bottom: 20px;
}
p.@{upload-prefix-cls}-text {
font-size: @font-size-lg;
margin: 0 0 4px;
color: @heading-color;
font-size: @font-size-lg;
}
p.@{upload-prefix-cls}-hint {
font-size: @font-size-base;
color: @text-color-secondary;
font-size: @font-size-base;
}
.@{iconfont-css-prefix}-plus {
color: @disabled-color;
font-size: 30px;
transition: all 0.3s;
color: @disabled-color;
&:hover {
color: @text-color-secondary;
}
@ -127,17 +127,17 @@
.reset-component;
.clearfix;
&-item {
margin-top: 8px;
font-size: @font-size-base;
position: relative;
height: 22px;
margin-top: 8px;
font-size: @font-size-base;
&-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: @font-size-base + 8px;
width: 100%;
display: inline-block;
width: 100%;
padding-left: @font-size-base + 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-info {
@ -151,23 +151,23 @@
.@{iconfont-css-prefix}-loading,
.@{iconfont-css-prefix}-paper-clip {
font-size: @font-size-base;
color: @text-color-secondary;
position: absolute;
top: @font-size-base / 2 - 2px;
color: @text-color-secondary;
font-size: @font-size-base;
}
}
.@{iconfont-css-prefix}-close {
.iconfont-size-under-12px(10px);
transition: all 0.3s;
opacity: 0;
cursor: pointer;
position: absolute;
top: 6px;
right: 4px;
color: @text-color-secondary;
line-height: 0;
cursor: pointer;
opacity: 0;
transition: all 0.3s;
&:hover {
color: @text-color;
}
@ -188,28 +188,28 @@
}
&-error .@{iconfont-css-prefix}-close {
opacity: 1;
color: @error-color !important;
opacity: 1;
}
&-progress {
line-height: 0;
font-size: @font-size-base;
position: absolute;
width: 100%;
bottom: -12px;
width: 100%;
padding-left: @font-size-base + 12px;
font-size: @font-size-base;
line-height: 0;
}
}
&-picture,
&-picture-card {
.@{upload-item} {
padding: 8px;
border-radius: @border-radius-base;
border: @border-width-base @upload-picture-card-border-style @border-color-base;
height: 66px;
position: relative;
height: 66px;
padding: 8px;
border: @border-width-base @upload-picture-card-border-style @border-color-base;
border-radius: @border-radius-base;
&:hover {
background: transparent;
}
@ -231,44 +231,44 @@
}
.@{upload-item}-thumbnail {
width: 48px;
height: 48px;
position: absolute;
top: 8px;
left: 8px;
text-align: center;
line-height: 54px;
width: 48px;
height: 48px;
font-size: 26px;
line-height: 54px;
text-align: center;
opacity: 0.8;
}
.@{upload-item}-icon {
font-size: 26px;
position: absolute;
top: 50%;
left: 50%;
font-size: 26px;
transform: translate(-50%, -50%);
}
.@{upload-item}-thumbnail img {
display: block;
width: 48px;
height: 48px;
display: block;
overflow: hidden;
}
.@{upload-item}-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0 8px;
line-height: 44px;
transition: all 0.3s;
padding-left: 48px;
padding-right: 8px;
max-width: 100%;
display: inline-block;
box-sizing: border-box;
max-width: 100%;
margin: 0 0 0 8px;
padding-right: 8px;
padding-left: 48px;
overflow: hidden;
line-height: 44px;
white-space: nowrap;
text-overflow: ellipsis;
transition: all 0.3s;
}
.@{upload-item}-uploading .@{upload-item}-name {
@ -276,16 +276,16 @@
}
.@{upload-item}-progress {
padding-left: 56px;
margin-top: 0;
bottom: 14px;
width: ~'calc(100% - 24px)';
margin-top: 0;
padding-left: 56px;
}
.@{iconfont-css-prefix}-close {
position: absolute;
right: 8px;
top: 8px;
right: 8px;
line-height: 1;
opacity: 1;
}
@ -295,7 +295,7 @@
// https://github.com/ant-design/ant-design/issues/11183
float: left;
&.@{upload-prefix-cls}-list:after {
&.@{upload-prefix-cls}-list::after {
display: none;
}
.@{upload-item} {
@ -306,45 +306,45 @@
}
.@{upload-item}-info {
height: 100%;
position: relative;
height: 100%;
overflow: hidden;
&:before {
content: ' ';
&::before {
position: absolute;
z-index: 1;
background-color: fade(@black, 50%);
transition: all 0.3s;
width: 100%;
height: 100%;
background-color: fade(@black, 50%);
opacity: 0;
transition: all 0.3s;
content: ' ';
}
}
.@{upload-item}:hover .@{upload-item}-info:before {
.@{upload-item}:hover .@{upload-item}-info::before {
opacity: 1;
}
.@{upload-item}-actions {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
z-index: 10;
white-space: nowrap;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s;
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
z-index: 10;
transition: all 0.3s;
cursor: pointer;
font-size: 16px;
width: 16px;
color: @text-color-dark;
margin: 0 4px;
color: @text-color-dark;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @text-color-inverse;
}
@ -358,18 +358,18 @@
.@{upload-item}-thumbnail,
.@{upload-item}-thumbnail img {
position: static;
display: block;
width: 100%;
height: 100%;
position: static;
}
.@{upload-item}-name {
display: none;
margin: 8px 0 0;
padding: 0;
text-align: center;
line-height: @line-height-base;
display: none;
text-align: center;
}
.anticon-picture + .@{upload-item}-name {
@ -383,7 +383,7 @@
.@{upload-item}-info {
height: auto;
&:before,
&::before,
.@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-delete {
display: none;
@ -397,8 +397,8 @@
}
.@{upload-item}-progress {
padding-left: 0;
bottom: 32px;
padding-left: 0;
}
}
@ -436,8 +436,8 @@
from {
height: 0;
margin: 0;
opacity: 0;
padding: 0;
opacity: 0;
}
}
@ -455,8 +455,8 @@
width: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
opacity: 0;
}
}

8
package.json
View File

@ -177,7 +177,10 @@
"scrollama": "^1.4.4",
"stylelint": "~9.10.1",
"stylelint-config-prettier": "^4.0.0",
"stylelint-config-rational-order": "^0.0.4",
"stylelint-config-standard": "^18.2.0",
"stylelint-declaration-block-no-ignored-properties": "^1.1.0",
"stylelint-order": "^2.0.0",
"typescript": "~3.3.1",
"unified": "^7.0.0",
"xhr-mock": "^2.4.1",
@ -192,11 +195,12 @@
"lint:es": "eslint tests site scripts components ./.*.js ./webpack.config.js --ext '.js,.jsx'",
"lint:md": "remark components/",
"lint:demo": "cross-env RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'",
"lint:style": "stylelint \"{site,components}/**/*.less\" --syntax less",
"lint:style": "stylelint '{site,components}/**/*.less' --syntax less",
"lint-fix:ts": "npm run tsc && antd-tools run ts-lint-fix",
"lint-fix": "npm run lint-fix:code && npm run lint-fix:demo",
"lint-fix": "npm run lint-fix:code && npm run lint-fix:demo && npm run lint-fix:style",
"lint-fix:code": "eslint --fix tests site scripts components ./.*.js ./webpack.config.js --ext '.js,.jsx'",
"lint-fix:demo": "eslint-tinker ./components/*/demo/*.md",
"lint-fix:style": "stylelint --fix '{site,components}/**/*.less' --syntax less",
"sort-api": "node ./scripts/sort-api-table.js",
"dist": "antd-tools run dist",
"compile": "antd-tools run compile",

71
site/theme/static/colors.less
View File

@ -22,29 +22,29 @@
margin: 0 1%;
}
.color-palette {
margin: 45px 1%;
width: 31%;
display: inline-block;
width: 31%;
margin: 45px 1%;
&-pick {
text-align: center;
font-size: 20px;
margin: 0 0 20px;
font-size: 20px;
text-align: center;
}
&-picker {
margin: 24px 0;
&-value {
position: relative;
top: -3px;
margin-left: 16px;
font-size: 14px;
font-family: Consolas, sans-serif;
margin-left: 16px;
position: relative;
top: -3px;
}
&-validation {
font-size: 13px;
color: @error-color;
margin-left: 16px;
position: relative;
top: -3px;
margin-left: 16px;
color: @error-color;
font-size: 13px;
}
}
}
@ -66,15 +66,15 @@
text-align: left;
&-item {
cursor: pointer;
height: 44px;
line-height: 44px;
padding: 0 12px;
margin-right: 4px;
transition: all 0.2s;
position: relative;
font-family: Consolas, sans-serif;
height: 44px;
margin-right: 4px;
padding: 0 12px;
font-size: 14px;
font-family: Consolas, sans-serif;
line-height: 44px;
cursor: pointer;
transition: all 0.2s;
&:first-child {
border-radius: 4px 4px 0 0;
}
@ -87,40 +87,40 @@
}
}
&-item &-text {
transition: all 0.3s;
float: left;
transition: all 0.3s;
}
&-item &-value {
position: relative;
left: 3px;
float: right;
transform: scale(0.85);
transform-origin: 100% 50%;
opacity: 0;
position: relative;
left: 3px;
transition: all 0.3s;
}
}
.color-title {
margin: 0 0 24px;
font-weight: 500;
color: #5c6b77;
font-weight: 500;
font-size: 22px;
text-transform: capitalize;
text-align: center;
text-transform: capitalize;
}
.color-description {
font-size: 14px;
font-weight: lighter;
color: #777;
display: block;
color: #777;
font-weight: lighter;
font-size: 14px;
}
.main-color:hover {
.main-color-value {
opacity: 0.7;
left: 0;
opacity: 0.7;
}
}
@ -131,33 +131,32 @@
display: flex;
&-item {
flex: 1;
position: relative;
margin-right: 0;
border-radius: 0;
flex: 1;
height: 86px;
text-align: center;
margin-right: 0;
padding: 37px 0 0;
line-height: normal;
text-align: center;
border-radius: 0;
.main-color-text {
float: none;
}
&:hover {
margin-top: -10px;
height: 96px;
margin-top: -10px;
border-radius: 4px 4px 0 0;
}
}
&-value {
position: absolute;
text-align: center;
width: 100%;
left: 0;
bottom: 0;
float: none;
left: 0;
width: 100%;
text-align: center;
transform-origin: unset;
}
@ -167,8 +166,8 @@
}
.main-color-value {
opacity: 0.7;
bottom: 8px;
opacity: 0.7;
}
}
}

42
site/theme/static/common.less
View File

@ -4,13 +4,13 @@ body {
}
body {
font-family: @font-family;
line-height: 1.5;
overflow-x: hidden;
color: @site-text-color;
font-size: 14px;
font-family: @font-family;
line-height: 1.5;
background: #fff;
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
overflow-x: hidden;
}
a {
@ -22,26 +22,26 @@ a {
}
.main-wrapper {
background: #fff;
padding: 40px 0 0;
position: relative;
padding: 40px 0 0;
background: #fff;
}
.main-container {
padding: 0 170px 144px 64px;
background: #fff;
min-height: 500px;
overflow: hidden;
position: relative;
min-height: 500px;
padding: 0 170px 144px 64px;
overflow: hidden;
background: #fff;
}
.main-menu {
z-index: 1;
&-inner {
max-height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
max-height: 100vh;
}
&:hover &-inner {
@ -56,9 +56,9 @@ a {
&.ant-menu-inline .ant-menu-submenu-title h4,
&.ant-menu-inline > .ant-menu-item,
&.ant-menu-inline .ant-menu-item a {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
}
&.ant-menu-inline .ant-menu-item-group-title {
@ -72,12 +72,12 @@ a {
.menu-item-link-outside {
position: relative;
.anticon {
font-size: 12px;
color: @primary-color;
opacity: 0;
position: absolute;
right: -10px;
top: 16px;
right: -10px;
color: @primary-color;
font-size: 12px;
opacity: 0;
transition: all 0.3s;
}
&:hover .anticon {
@ -87,9 +87,9 @@ a {
}
.aside-container .chinese {
font-size: 12px;
margin-left: 6px;
font-weight: normal;
font-size: 12px;
opacity: 0.67;
}
@ -99,8 +99,8 @@ a {
.outside-link-icon {
margin-left: 5px;
font-size: 12px;
color: #aaa;
font-size: 12px;
}
.outside-link.internal {
@ -118,13 +118,13 @@ a {
}
#react-content {
transition: transform 0.3s @ease-in-out-circ;
height: 100%;
transition: transform 0.3s @ease-in-out-circ;
}
.page-wrapper {
overflow: hidden;
padding: 0;
width: 100%;
padding: 0;
overflow: hidden;
a {
text-decoration: none;
}
@ -138,6 +138,6 @@ a {
z-index: 1029;
}
#_hj_feedback_container .path1:before {
#_hj_feedback_container .path1::before {
color: @primary-color !important;
}

103
site/theme/static/demo.less
View File

@ -8,12 +8,12 @@
}
.code-box {
border: 1px solid @site-border-color-split;
border-radius: @border-radius-sm;
position: relative;
display: inline-block;
width: 100%;
position: relative;
margin: 0 0 16px;
border: 1px solid @site-border-color-split;
border-radius: @border-radius-sm;
transition: all 0.2s;
&:target {
@ -21,48 +21,48 @@
}
&-expand-trigger {
cursor: pointer;
font-size: 18px;
color: #3b4357;
position: relative;
margin-left: 8px;
color: #3b4357;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
transition: all 0.3s;
position: relative;
}
&-title {
position: absolute;
top: -14px;
padding: 1px 8px;
margin-left: -8px;
padding: 1px 8px;
color: #777;
border-radius: @border-radius-sm @border-radius-sm 0 0;
background: #fff;
border-radius: @border-radius-sm @border-radius-sm 0 0;
transition: background-color 0.4s;
a,
a:hover {
color: @site-text-color;
font-size: @font-size-base;
font-weight: 500;
font-size: @font-size-base;
}
}
a.edit-button {
position: absolute;
right: -16px;
top: 7px;
font-size: 12px;
transform: scale(0.9);
background: #fff;
right: -16px;
padding-right: 6px;
font-size: 12px;
text-decoration: none;
background: #fff;
transform: scale(0.9);
}
&-demo {
border-bottom: 1px solid @site-border-color-split;
padding: 42px 24px 50px;
color: rgba(0, 0, 0, 0.65);
border-bottom: 1px solid @site-border-color-split;
}
iframe {
@ -73,11 +73,11 @@
&-meta {
&.markdown {
position: relative;
width: 100%;
padding: 18px 32px;
font-size: @font-size-base;
border-radius: 0 0 @border-radius-sm @border-radius-sm;
transition: background-color 0.4s;
width: 100%;
font-size: @font-size-base;
}
blockquote {
@ -86,47 +86,46 @@
h4,
section& p {
margin: 0;
width: 98%;
margin: 0;
}
> p {
font-size: 12px;
width: 100%;
margin: 0.5em 0;
padding-right: 25px;
width: 100%;
font-size: 12px;
word-break: break-word;
}
}
&.expand &-meta {
border-radius: 0;
border-bottom: 1px dashed @site-border-color-split;
border-radius: 0;
}
.code-expand-icon {
position: absolute;
right: 16px;
bottom: 23px;
cursor: pointer;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
cursor: pointer;
}
.code-expand-icon-show,
.code-expand-icon-hide {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
margin: 0;
box-shadow: none;
transition: all 0.4s;
user-select: none;
position: absolute;
left: 0;
top: 0;
margin: 0;
max-width: 100%;
width: 100%;
vertical-align: baseline;
box-shadow: none;
}
.code-expand-icon-show {
@ -181,17 +180,17 @@
}
&-code-copy {
font-size: 14px;
cursor: pointer;
color: @site-text-color-secondary;
transition: all 0.24s;
background: #fff;
width: 20px;
height: 20px;
color: @site-text-color-secondary;
font-size: 14px;
line-height: 20px;
text-align: center;
background: #fff;
border-radius: 20px;
cursor: pointer;
opacity: 0;
transition: all 0.24s;
&:hover {
color: @site-text-color-secondary;
@ -204,45 +203,45 @@
}
&-codepen {
width: 20px;
height: 20px;
overflow: hidden;
text-indent: -9999px;
background: transparent
url('https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg') center / 14px
no-repeat;
width: 20px;
height: 20px;
border: 0;
cursor: pointer;
opacity: 0;
transition: all 0.3s;
border: 0;
text-indent: -9999px;
overflow: hidden;
}
&-riddle {
width: 20px;
height: 20px;
overflow: hidden;
text-indent: -9999px;
background: transparent
url('https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg') center / 14px
no-repeat;
width: 20px;
height: 20px;
border: 0;
cursor: pointer;
opacity: 0;
transition: all 0.3s;
border: 0;
text-indent: -9999px;
overflow: hidden;
}
&-codesandbox {
width: 20px;
height: 20px;
overflow: hidden;
text-indent: -9999px;
background: transparent
url('https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg') center / 14px
no-repeat;
width: 20px;
height: 20px;
border: 0;
cursor: pointer;
opacity: 0;
transition: all 0.3s;
border: 0;
text-indent: -9999px;
overflow: hidden;
}
.highlight-wrapper:hover &-code-copy,
@ -253,11 +252,11 @@
}
pre {
margin: 0;
width: auto;
margin: 0;
code {
border: none;
background: #fff;
border: none;
}
}
}

2
site/theme/static/docsearch.less
View File

@ -7,7 +7,7 @@
border: none;
}
&:before {
&::before {
display: none;
}
}

24
site/theme/static/footer.less
View File

@ -3,13 +3,13 @@
@padding-space: 24px;
footer {
clear: both;
font-size: 14px;
background-color: #000;
position: relative;
z-index: 9;
clear: both;
margin-left: -1px;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
background-color: #000;
.ant-row {
text-align: center;
@ -17,21 +17,21 @@ footer {
display: inline-block;
text-align: left;
> h2 {
font-size: 16px;
position: relative;
margin: 0 auto 24px;
font-weight: 500;
position: relative;
font-size: 16px;
> .title-icon {
width: 27px;
margin-right: 16px;
}
> .anticon {
font-size: 16px;
position: absolute;
left: -22px;
top: 3px;
left: -22px;
color: #aaa;
font-size: 16px;
}
}
> div {
@ -45,17 +45,17 @@ footer {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.bottom-bar {
text-align: center;
padding: 16px @padding-space;
margin: 0;
line-height: 32px;
padding: 16px @padding-space;
overflow: hidden;
font-family: Avenir, @font-family, sans-serif;
font-size: 16px;
font-family: Avenir, @font-family, sans-serif;
line-height: 32px;
text-align: center;
a {
color: rgba(255, 255, 255, 0.65);
margin-left: 4px;
color: rgba(255, 255, 255, 0.65);
&:hover {
color: #fff;
}

38
site/theme/static/header.less
View File

@ -2,11 +2,11 @@
@menu-item-border: 2px;
#header {
background: #fff;
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
position: relative;
z-index: 10;
max-width: 100%;
background: #fff;
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
&.home-nav-bottom {
background: rgba(255, 255, 255, 0.9);
border-bottom-color: #ebedee;
@ -28,46 +28,46 @@
}
#logo {
overflow: hidden;
padding-left: 40px;
float: left;
height: @header-height;
padding-left: 40px;
overflow: hidden;
line-height: @header-height;
text-decoration: none;
white-space: nowrap;
text-decoration: none;
img {
height: 32px;
margin-right: 16px;
}
img + img {
height: 16px;
position: relative;
top: 1px;
height: 16px;
}
}
#search-box {
border-left: 1px solid @site-border-color-split;
float: left;
height: 22px;
line-height: 22px;
padding-left: 16px;
margin: 22px auto 0;
padding-left: 16px;
line-height: 22px;
border-left: 1px solid @site-border-color-split;
}
#search-box .anticon {
color: #ced4d9;
position: relative;
top: 0.5px;
color: #ced4d9;
}
#search-box input {
font-size: 14px;
margin-top: -5px;
width: 200px;
margin-top: -5px;
font-size: 14px;
background: transparent;
border: 0;
box-shadow: none;
background: transparent;
&::placeholder {
color: #a3b1bf;
@ -82,24 +82,24 @@
}
.header-lang-button {
margin-right: 40px;
color: @text-color;
border-color: @border-color-base;
margin-right: 40px;
}
#nav {
border: 0;
float: right;
font-size: 14px;
font-family: Avenir, @font-family, sans-serif;
border: 0;
&.ant-menu-horizontal {
border-bottom: none;
& > .ant-menu-item {
min-width: 72px;
height: @header-height;
line-height: @header-height - @menu-item-border - 2px;
min-width: 72px;
border-top: @menu-item-border solid transparent;
&:hover {
@ -124,10 +124,10 @@
.component-select {
&.ant-select-dropdown {
font-size: 14px;
border: 0;
border-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
font-size: 14px;
}
.ant-select-dropdown-menu {
max-height: 200px;
@ -136,9 +136,9 @@
border-radius: 0 !important;
}
.ant-component-decs {
font-size: 12px;
position: absolute;
color: #aaa;
right: 16px;
color: #aaa;
font-size: 12px;
}
}

30
site/theme/static/highlight.less
View File

@ -6,29 +6,28 @@
pre code {
display: block;
background: white;
color: @site-text-color;
line-height: 2;
border: 1px solid #e9e9e9;
padding: 16px 32px;
border-radius: @border-radius-sm;
color: @site-text-color;
font-size: @font-size-base;
white-space: pre;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 2;
white-space: pre;
background: white;
border: 1px solid #e9e9e9;
border-radius: @border-radius-sm;
}
code[class*='language-'],
pre[class*='language-'] {
color: black;
background: none;
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
direction: ltr;
white-space: pre;
text-align: left;
word-wrap: normal;
word-break: normal;
word-spacing: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
@ -38,6 +37,7 @@ pre[class*='language-'] {
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: none;
}
pre[class*='language-']::-moz-selection,
@ -65,8 +65,8 @@ code[class*='language-'] ::selection {
/* Code blocks */
pre[class*='language-'] {
padding: 12px 20px;
margin: 16px 0;
padding: 12px 20px;
overflow: auto;
}
@ -78,8 +78,8 @@ pre[class*='language-'] {
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
border-radius: 0.3em;
}
.token.comment,

132
site/theme/static/home.less
View File

@ -2,26 +2,26 @@
@home-text-color: #314659;
.home-page-wrapper {
position: relative; // will-change: transform;
width: 100%;
padding: 0;
overflow: hidden;
position: relative; // will-change: transform;
color: @home-text-color;
font-family: Avenir, @font-family, sans-serif;
.page {
position: relative;
width: 100%;
max-width: 1200px;
margin: auto;
position: relative;
padding: 0 24px;
h2 {
margin: 140px auto 100px;
color: @home-text-color;
font-weight: 400;
font-size: 38px;
line-height: 46px;
color: @home-text-color;
text-align: center;
font-weight: 400;
margin: 140px auto 100px;
}
h1,
h2,
@ -35,21 +35,21 @@
.banner-bg {
&-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
width: 120%;
height: 200px;
background: @home-bg-color;
position: absolute;
bottom: -200px;
left: 0%;
transform-origin: 0;
width: 120%;
height: 200px;
background: @home-bg-color;
transform: rotate(-4deg);
transform-origin: 0;
}
.banner {
@ -57,40 +57,40 @@
align-items: center;
height: 576px;
&-wrapper {
overflow: initial;
position: relative;
z-index: 1;
overflow: initial;
}
.text-wrapper {
width: 54%;
max-width: 560px;
min-width: 420px;
max-width: 560px;
min-height: 336px;
color: #0d1a26;
> * {
will-change: transform;
}
h1 {
font-size: 68px;
font-weight: 600;
line-height: 76px;
margin: 8px 0 28px;
letter-spacing: 0;
font-weight: 600;
font-size: 68px;
font-family: Avenir, @font-family, sans-serif;
line-height: 76px;
letter-spacing: 0;
}
p {
color: @home-text-color;
font-size: 20px;
line-height: 40px;
color: @home-text-color;
}
}
.img-wrapper {
width: 46%;
max-width: 482px;
position: absolute;
right: 0;
bottom: 26px;
width: 46%;
max-width: 482px;
img {
max-width: 100%;
@ -100,26 +100,26 @@
.banner-btns {
display: flex;
align-items: center;
margin-top: 24px;
min-width: 520px;
margin-top: 24px;
}
.banner-btn {
padding: 0 24px;
border-radius: 100px;
font-size: 16px;
line-height: 38px;
display: inline-block;
height: 40px;
padding: 0 24px;
font-size: 16px;
font-family: @font-family;
line-height: 38px;
text-align: center;
text-decoration: none;
border: 1px solid #2f54eb;
font-family: @font-family;
border-radius: 100px;
}
.banner-btn.components {
background: #2f54eb;
color: #fff;
background: #2f54eb;
}
.banner-btn.language {
@ -145,34 +145,34 @@ svg {
color: #fff !important;
}
&-block {
max-width: 160px;
text-align: center;
margin: auto;
display: block;
position: relative;
z-index: 1;
display: block;
max-width: 160px;
margin: auto;
text-align: center;
h3 {
color: #fff;
font-size: 20px;
font-weight: 400;
font-size: 20px;
}
p {
color: #fff;
}
&:hover .page1-image {
transform: translateY(-4px);
box-shadow: 0 6px 10px rgba(5, 26, 180, 0.35);
transform: translateY(-4px);
}
}
&-image {
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
margin: 46px auto 40px;
background: #fff;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 46px auto 40px;
transition: transform 0.45s @ease-out, box-shadow 0.45s @ease-out;
img {
display: block;
@ -181,8 +181,8 @@ svg {
&-point-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
margin: auto;
overflow: inherit !important;
}
@ -191,10 +191,10 @@ svg {
/** page2 **/
.page2 {
background: #eff3f6;
min-height: 1110px;
overflow: initial;
padding-top: 1px;
overflow: initial;
background: #eff3f6;
.page {
position: relative;
z-index: 1;
@ -203,8 +203,8 @@ svg {
}
}
&-content {
box-shadow: 0 12px 20px #d8e0e6;
background: @home-bg-color;
box-shadow: 0 12px 20px #d8e0e6;
}
&-components,
&-product {
@ -212,14 +212,14 @@ svg {
}
&-components {
position: initial;
background: @home-bg-color;
padding: 56px;
color: #fff;
line-height: 32px;
background: @home-bg-color;
h3 {
font-size: 28px;
margin: 0 auto 32px;
color: #fff;
font-size: 28px;
}
.components-button-wrapper {
position: absolute;
@ -227,15 +227,15 @@ svg {
left: 56px;
a {
display: block;
margin-top: 16px;
color: #fff;
line-height: 1.5em;
margin-top: 16px;
}
}
}
&-product {
background: #fff;
padding: 48px 56px;
background: #fff;
.product-block {
margin-bottom: 24px;
color: @home-text-color;
@ -247,38 +247,38 @@ svg {
}
}
.block-text-wrapper {
padding-bottom: 24px;
position: relative;
padding-bottom: 24px;
border-bottom: 1px solid @site-border-color-split;
h4 {
position: relative;
display: inline-block;
margin-bottom: 8px;
font-size: 20px;
line-height: 28px;
margin-bottom: 8px;
display: inline-block;
position: relative;
white-space: nowrap;
.new {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
right: 0;
display: inline-block;
padding: 0 2px;
font-size: 12px;
background: #f5222d;
line-height: 16px;
border-radius: 4px;
color: #fff;
font-size: 12px;
line-height: 16px;
background: #f5222d;
border-radius: 4px;
transform: translate(~'calc(100% + 4px)', -50%); // 手机回行处理
}
}
p {
line-height: 24px;
margin-bottom: 16px;
line-height: 24px;
}
.more {
display: inline-block;
line-height: 22px;
color: @home-bg-color;
line-height: 22px;
vertical-align: top;
i {
font-size: 12px;
@ -288,21 +288,21 @@ svg {
.more-mobile-react,
.more-mobile-angular {
display: block;
color: @home-bg-color;
margin-top: 8px;
color: @home-bg-color;
}
}
.block-image-wrapper {
height: 104px;
display: flex;
align-items: center;
height: 104px;
img {
display: block;
max-width: 80%;
}
&.right {
float: right;
justify-content: flex-end;
float: right;
}
}
}
@ -319,17 +319,17 @@ svg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
&.bottom {
z-index: 0;
}
&.top {
margin-top: 220px;
display: flex;
justify-content: center;
margin-top: 220px;
svg {
overflow: inherit;
}
@ -359,14 +359,14 @@ svg {
display: inline-block;
}
&-text-wrapper {
margin-top: 2px;
// max-width: 182px;
margin-left: 32px;
line-height: 24px;
margin-top: 2px;
h3 {
margin-bottom: 4px;
font-size: 20px;
line-height: 28px;
margin-bottom: 4px;
}
}
.parallax-bg.top {
@ -385,9 +385,9 @@ svg {
height: 100vh;
background: #fbfbfb;
.vidoe-wrap {
width: 100%;
background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
background-size: cover;
width: 100%;
video {
display: block;
}
@ -395,9 +395,9 @@ svg {
}
.banner-1024 {
display: block;
cursor: pointer;
transition: all 0.4s;
display: block;
&:hover {
transform: translateY(-16px) scale(1.01);

46
site/theme/static/icons.less
View File

@ -1,43 +1,43 @@
ul.anticons-list {
margin: 10px 0;
list-style: none;
overflow: hidden;
list-style: none;
li {
position: relative;
float: left;
width: 16.66%;
height: 100px;
margin: 3px 0;
padding: 10px 0 0;
overflow: hidden;
color: #555;
text-align: center;
list-style: none;
cursor: pointer;
height: 100px;
color: #555;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
position: relative;
margin: 3px 0;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
padding: 10px 0 0;
border-radius: 4px;
cursor: pointer;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
.anticon {
font-size: 36px;
margin: 12px 0 8px;
font-size: 36px;
transition: transform 0.3s ease-in-out;
will-change: transform;
}
.anticon-class {
display: block;
text-align: center;
transform: scale(0.83);
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
white-space: nowrap;
text-align: center;
transform: scale(0.83);
.ant-badge {
transition: color 0.3s ease-in-out;
}
}
&:hover {
background-color: @primary-color;
color: #fff;
background-color: @primary-color;
.anticon {
transform: scale(1.4);
}
@ -50,30 +50,30 @@ ul.anticons-list {
color: rgba(255, 255, 255, 0.2);
}
&:after {
&::after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
content: 'Copied!';
text-align: center;
line-height: 110px;
height: 100%;
color: #fff;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
line-height: 110px;
text-align: center;
opacity: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
content: 'Copied!';
}
&.copied:after {
opacity: 1;
&.copied::after {
top: -10px;
opacity: 1;
}
}
}
.copied-code {
padding: 2px 4px 2px;
font-size: 12px;
background: #f5f5f5;
border-radius: 2px;
padding: 2px 4px 2px;
}

Some files were not shown because too many files have changed in this diff Show More