[FACTORY]: Extract CSS Map Files for August Interface

This commit is contained in:
SPACEBROWSER_DEV 2025-08-13 20:11:56 -04:00
parent 4e22622570
commit 7b9039ae0b
1577 changed files with 74554 additions and 126692 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,6 @@
@import '../../style/themes/index';
.@{ant-prefix}-affix {
position: fixed;
z-index: @zindex-affix;
}

View File

@ -0,0 +1,155 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@alert-prefix-cls: ~'@{ant-prefix}-alert';
.@{alert-prefix-cls} {
.reset-component();
position: relative;
display: flex;
align-items: center;
padding: 8px 15px;
word-wrap: break-word;
border-radius: @border-radius-base;
&-content {
flex: 1;
min-width: 0;
}
&-icon {
margin-right: @margin-xs;
}
&-description {
display: none;
font-size: @font-size-base;
line-height: @font-size-base + 8px;
}
&-success {
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 {
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 {
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 {
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;
}
.@{alert-prefix-cls}-description > pre {
margin: 0;
padding: 0;
}
}
&-action {
margin-left: @margin-xs;
}
&-close-icon {
margin-left: @margin-xs;
padding: 0;
overflow: hidden;
font-size: @font-size-sm;
line-height: @font-size-sm;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
.@{iconfont-css-prefix}-close {
color: @alert-close-color;
transition: color 0.3s;
&:hover {
color: @alert-close-hover-color;
}
}
}
&-close-text {
color: @alert-close-color;
transition: color 0.3s;
&:hover {
color: @alert-close-hover-color;
}
}
&-with-description {
align-items: flex-start;
padding: @alert-with-description-padding;
}
&-with-description&-no-icon {
padding: @alert-with-description-no-icon-padding-vertical 15px;
}
&-with-description &-icon {
margin-right: @alert-with-description-padding-vertical;
font-size: @alert-with-description-icon-size;
}
&-with-description &-message {
display: block;
margin-bottom: 4px;
color: @alert-message-color;
font-size: @font-size-lg;
}
&-message {
color: @alert-message-color;
}
&-with-description &-description {
display: block;
}
&&-motion-leave {
overflow: hidden;
opacity: 1;
transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
margin-bottom 0.3s @ease-in-out-circ;
}
&&-motion-leave-active {
max-height: 0;
margin-bottom: 0 !important;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
&-banner {
margin-bottom: 0;
border: 0;
border-radius: 0;
}
}
@import './rtl';

View File

@ -0,0 +1,40 @@
.@{alert-prefix-cls} {
&&-rtl {
direction: rtl;
}
&-icon {
.@{alert-prefix-cls}-rtl & {
margin-right: auto;
margin-left: @margin-xs;
}
}
&-action {
.@{alert-prefix-cls}-rtl & {
margin-right: @margin-xs;
margin-left: auto;
}
}
&-close-icon {
.@{alert-prefix-cls}-rtl & {
margin-right: @margin-xs;
margin-left: auto;
}
}
&-with-description {
.@{alert-prefix-cls}-rtl& {
padding-right: @alert-with-description-icon-size;
padding-left: @alert-with-description-padding-vertical;
}
.@{alert-prefix-cls}-icon {
.@{alert-prefix-cls}-rtl& {
margin-right: auto;
margin-left: @alert-with-description-padding-vertical;
}
}
}
}

View File

@ -0,0 +1,87 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@anchor-border-width: 2px;
.@{ant-prefix}-anchor {
.reset-component();
position: relative;
padding-left: @anchor-border-width;
&-wrapper {
margin-left: -4px;
padding-left: 4px;
overflow: auto;
background-color: @anchor-bg;
}
&-ink {
position: absolute;
top: 0;
left: 0;
height: 100%;
&::before {
position: relative;
display: block;
width: @anchor-border-width;
height: 100%;
margin: 0 auto;
background-color: @anchor-border-color;
content: ' ';
}
&-ball {
position: absolute;
left: 50%;
display: none;
width: 8px;
height: 8px;
background-color: @component-background;
border: 2px solid @primary-color;
border-radius: 8px;
transform: translateX(-50%);
transition: top 0.3s ease-in-out;
&.visible {
display: inline-block;
}
}
}
&.fixed &-ink &-ink-ball {
display: none;
}
&-link {
padding: @anchor-link-padding;
line-height: 1.143;
&-title {
position: relative;
display: block;
margin-bottom: 6px;
overflow: hidden;
color: @text-color;
white-space: nowrap;
text-overflow: ellipsis;
transition: all 0.3s;
&:only-child {
margin-bottom: 0;
}
}
&-active > &-title {
color: @primary-color;
}
}
&-link &-link {
padding-top: 5px;
padding-bottom: 5px;
}
}
@import './rtl';

View File

@ -0,0 +1,35 @@
.@{ant-prefix}-anchor {
&-rtl {
direction: rtl;
}
&-wrapper {
.@{ant-prefix}-anchor-rtl& {
margin-right: -4px;
margin-left: 0;
padding-right: 4px;
padding-left: 0;
}
}
&-ink {
.@{ant-prefix}-anchor-rtl & {
right: 0;
left: auto;
}
&-ball {
.@{ant-prefix}-anchor-rtl & {
right: 50%;
left: 0;
transform: translateX(50%);
}
}
}
&-link {
.@{ant-prefix}-anchor-rtl & {
padding: @anchor-link-top @anchor-link-left @anchor-link-top 0;
}
}
}

View File

@ -0,0 +1,16 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@input-prefix-cls: ~'@{ant-prefix}-input';
@select-prefix-cls: ~'@{ant-prefix}-select';
@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
.@{autocomplete-prefix-cls} {
.reset-component();
// https://github.com/ant-design/ant-design/issues/22302
.@{select-prefix-cls}-clear {
right: 13px;
}
}

View File

@ -0,0 +1,17 @@
.@{avatar-prefix-cls}-group {
display: inline-flex;
.@{avatar-prefix-cls} {
border: 1px solid @avatar-group-border-color;
&:not(:first-child) {
margin-left: @avatar-group-overlapping;
}
}
&-popover {
.@{ant-prefix}-avatar + .@{ant-prefix}-avatar {
margin-left: @avatar-group-space;
}
}
}

View File

@ -0,0 +1,70 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@avatar-prefix-cls: ~'@{ant-prefix}-avatar';
.@{avatar-prefix-cls} {
.reset-component();
position: relative;
display: inline-block;
overflow: hidden;
color: @avatar-color;
white-space: nowrap;
text-align: center;
vertical-align: middle;
background: @avatar-bg;
&-image {
background: transparent;
}
.@{ant-prefix}-image-img {
display: block;
}
.avatar-size(@avatar-size-base, @avatar-font-size-base);
&-lg {
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
}
&-sm {
.avatar-size(@avatar-size-sm, @avatar-font-size-sm);
}
&-square {
border-radius: @avatar-border-radius;
}
& > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.avatar-size(@size, @font-size) {
width: @size;
height: @size;
line-height: @size;
border-radius: 50%;
&-string {
position: absolute;
left: 50%;
transform-origin: 0 center;
}
&.@{avatar-prefix-cls}-icon {
font-size: @font-size;
> .@{iconfont-css-prefix} {
margin: 0;
}
}
}
@import './group';
@import './rtl';

View File

@ -0,0 +1,15 @@
.@{avatar-prefix-cls}-group {
&-rtl {
.@{avatar-prefix-cls}:not(:first-child) {
margin-right: @avatar-group-overlapping;
margin-left: 0;
}
}
&-popover.@{ant-prefix}-popover-rtl {
.@{ant-prefix}-avatar + .@{ant-prefix}-avatar {
margin-right: @avatar-group-space;
margin-left: 0;
}
}
}

View File

@ -0,0 +1,49 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
.@{backtop-prefix-cls} {
.reset-component();
position: fixed;
right: 100px;
bottom: 50px;
z-index: @zindex-back-top;
width: 40px;
height: 40px;
cursor: pointer;
&:empty {
display: none;
}
&-rtl {
right: auto;
left: 100px;
direction: rtl;
}
&-content {
width: 40px;
height: 40px;
overflow: hidden;
color: @back-top-color;
text-align: center;
background-color: @back-top-bg;
border-radius: 20px;
transition: all 0.3s;
&:hover {
background-color: @back-top-hover-bg;
transition: all 0.3s;
}
}
&-icon {
font-size: 24px;
line-height: 40px;
}
}
@import './responsive';

View File

@ -0,0 +1,11 @@
@media screen and (max-width: @screen-md) {
.@{backtop-prefix-cls} {
right: 60px;
}
}
@media screen and (max-width: @screen-xs) {
.@{backtop-prefix-cls} {
right: 20px;
}
}

View File

@ -0,0 +1,281 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
.@{badge-prefix-cls} {
.reset-component();
position: relative;
display: inline-block;
line-height: 1;
&-count {
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: @badge-color;
border-radius: (@badge-height / 2);
box-shadow: 0 0 0 1px @shadow-color-inverse;
a,
a:hover {
color: @badge-text-color;
}
}
&-count-sm {
min-width: @badge-height-sm;
height: @badge-height-sm;
padding: 0;
font-size: @badge-font-size-sm;
line-height: @badge-height-sm;
border-radius: (@badge-height-sm / 2);
}
&-multiple-words {
padding: 0 8px;
}
&-dot {
z-index: @zindex-badge;
width: @badge-dot-size;
min-width: @badge-dot-size;
height: @badge-dot-size;
background: @highlight-color;
border-radius: 100%;
box-shadow: 0 0 0 1px @shadow-color-inverse;
}
// Tricky way to resolve https://github.com/ant-design/ant-design/issues/30088
&-dot.@{number-prefix-cls} {
transition: background 1.5s;
}
&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0%;
&.@{iconfont-css-prefix}-spin {
animation: antBadgeLoadingCircle 1s infinite linear;
}
}
&-status {
line-height: inherit;
vertical-align: baseline;
&-dot {
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 {
position: relative;
background-color: @processing-color;
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid @processing-color;
border-radius: 50%;
animation: antStatusProcessing 1.2s infinite ease-in-out;
content: '';
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@preset-colors, @i);
@darkColor: '@{color}-6';
&-@{color} {
background: @@darkColor;
}
}
.make-color-classes();
&-text {
margin-left: 8px;
color: @text-color;
font-size: @font-size-base;
}
}
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn @animation-duration-slow @ease-out-back;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomBadgeOut @animation-duration-slow @ease-in-back;
animation-fill-mode: both;
}
&-not-a-wrapper {
.@{badge-prefix-cls}-zoom-appear,
.@{badge-prefix-cls}-zoom-enter {
animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back;
}
.@{badge-prefix-cls}-zoom-leave {
animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back;
}
&:not(.@{badge-prefix-cls}-status) {
vertical-align: middle;
}
.@{number-prefix-cls}-custom-component,
.@{badge-prefix-cls}-count {
transform: none;
}
.@{number-prefix-cls}-custom-component,
.@{number-prefix-cls} {
position: relative;
top: auto;
display: block;
transform-origin: 50% 50%;
}
}
}
@keyframes antStatusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
// Safari will blink with transform when inner element has absolute style.
.safari-fix-motion() {
/* stylelint-disable property-no-vendor-prefix */
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
/* stylelint-enable property-no-vendor-prefix */
}
.@{number-prefix-cls} {
overflow: hidden;
direction: ltr;
&-only {
position: relative;
display: inline-block;
height: @badge-height;
transition: all @animation-duration-slow @ease-in-out;
.safari-fix-motion;
> p.@{number-prefix-cls}-only-unit {
height: @badge-height;
margin: 0;
.safari-fix-motion;
}
}
&-symbol {
vertical-align: top;
}
}
@keyframes antZoomBadgeIn {
0% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(50%, -50%);
}
}
@keyframes antZoomBadgeOut {
0% {
transform: scale(1) translate(50%, -50%);
}
100% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
}
@keyframes antNoWrapperZoomBadgeIn {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
}
}
@keyframes antNoWrapperZoomBadgeOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
opacity: 0;
}
}
@keyframes antBadgeLoadingCircle {
0% {
transform-origin: 50%;
}
100% {
transform: translate(50%, -50%) rotate(360deg);
transform-origin: 50%;
}
}
@import './ribbon';
@import './rtl';

View File

@ -0,0 +1,81 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@ribbon-prefix-cls: ~'@{ant-prefix}-ribbon';
@ribbon-wrapper-prefix-cls: ~'@{ant-prefix}-ribbon-wrapper';
.@{ribbon-wrapper-prefix-cls} {
position: relative;
}
.@{ribbon-prefix-cls} {
.reset-component();
position: absolute;
top: 8px;
height: 22px;
padding: 0 8px;
color: @badge-text-color;
line-height: 22px;
white-space: nowrap;
background-color: @primary-color;
border-radius: @border-radius-sm;
&-text {
color: @white;
}
&-corner {
position: absolute;
top: 100%;
width: 8px;
height: 8px;
color: currentColor;
border: 4px solid;
transform: scaleY(0.75);
transform-origin: top;
// If not support IE 11, use filter: brightness(75%) instead
&::after {
position: absolute;
top: -4px;
left: -4px;
width: inherit;
height: inherit;
color: rgba(0, 0, 0, 0.25);
border: inherit;
content: '';
}
}
// colors
// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@preset-colors, @i);
@darkColor: '@{color}-6';
&-color-@{color} {
color: @@darkColor;
background: @@darkColor;
}
}
.make-color-classes();
// placement
&.@{ribbon-prefix-cls}-placement-end {
right: -8px;
border-bottom-right-radius: 0;
.@{ribbon-prefix-cls}-corner {
right: 0;
border-color: currentColor transparent transparent currentColor;
}
}
&.@{ribbon-prefix-cls}-placement-start {
left: -8px;
border-bottom-left-radius: 0;
.@{ribbon-prefix-cls}-corner {
left: 0;
border-color: currentColor currentColor transparent transparent;
}
}
}

View File

@ -0,0 +1,67 @@
.@{badge-prefix-cls} {
&-rtl {
direction: rtl;
}
&:not(&-not-a-wrapper) &-count,
&:not(&-not-a-wrapper) &-dot,
&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
.@{badge-prefix-cls}-rtl & {
right: auto;
left: 0;
direction: ltr;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}
}
&-rtl&:not(&-not-a-wrapper) .@{number-prefix-cls}-custom-component {
right: auto;
left: 0;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}
&-status {
&-text {
.@{badge-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}
}
.@{ribbon-prefix-cls}-rtl {
direction: rtl;
&.@{ribbon-prefix-cls}-placement-end {
right: unset;
left: -8px;
border-bottom-right-radius: @border-radius-sm;
border-bottom-left-radius: 0;
.@{ribbon-prefix-cls}-corner {
right: unset;
left: 0;
border-color: currentColor currentColor transparent transparent;
&::after {
border-color: currentColor currentColor transparent transparent;
}
}
}
&.@{ribbon-prefix-cls}-placement-start {
right: -8px;
left: unset;
border-bottom-right-radius: 0;
border-bottom-left-radius: @border-radius-sm;
.@{ribbon-prefix-cls}-corner {
right: 0;
left: unset;
border-color: currentColor transparent transparent currentColor;
&::after {
border-color: currentColor transparent transparent currentColor;
}
}
}
}

View File

@ -0,0 +1,56 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
.@{breadcrumb-prefix-cls} {
.reset-component();
color: @breadcrumb-base-color;
font-size: @breadcrumb-font-size;
.@{iconfont-css-prefix} {
font-size: @breadcrumb-icon-font-size;
}
a {
color: @breadcrumb-link-color;
transition: color 0.3s;
&:hover {
color: @breadcrumb-link-color-hover;
}
}
& > span:last-child {
color: @breadcrumb-last-item-color;
a {
color: @breadcrumb-last-item-color;
}
}
& > span:last-child &-separator {
display: none;
}
&-separator {
margin: @breadcrumb-separator-margin;
color: @breadcrumb-separator-color;
}
&-link {
> .@{iconfont-css-prefix} + span,
> .@{iconfont-css-prefix} + a {
margin-left: 4px;
}
}
&-overlay-link {
> .@{iconfont-css-prefix} {
margin-left: 4px;
}
}
}
@import './rtl';

View File

@ -0,0 +1,29 @@
.@{breadcrumb-prefix-cls} {
&-rtl {
.clearfix();
direction: rtl;
> span {
float: right;
}
}
&-link {
> .@{iconfont-css-prefix} + span,
> .@{iconfont-css-prefix} + a {
.@{breadcrumb-prefix-cls}-rtl & {
margin-right: 4px;
margin-left: 0;
}
}
}
&-overlay-link {
> .@{iconfont-css-prefix} {
.@{breadcrumb-prefix-cls}-rtl & {
margin-right: 4px;
margin-left: 0;
}
}
}
}

View File

@ -0,0 +1,290 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@btn-prefix-cls: ~'@{ant-prefix}-btn';
// for compatible
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;
// Button styles
// -----------------------------
.@{btn-prefix-cls} {
// Fixing https://github.com/ant-design/ant-design/issues/12978
// Fixing https://github.com/ant-design/ant-design/issues/20058
// Fixing https://github.com/ant-design/ant-design/issues/19972
// Fixing https://github.com/ant-design/ant-design/issues/18107
// Fixing https://github.com/ant-design/ant-design/issues/13214
// It is a render problem of chrome, which is only happened in the codesandbox demo
// 0.001px solution works and I don't why
line-height: @btn-line-height;
.btn();
.btn-default();
// Fix loading button animation
// https://github.com/ant-design/ant-design/issues/24323
> span {
display: inline-block;
}
&-primary {
.btn-primary();
.@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
border-right-color: @btn-group-border;
border-left-color: @btn-group-border;
&:disabled {
border-color: @btn-default-border;
}
}
.@{btn-prefix-cls}-group &:first-child {
&:not(:last-child) {
border-right-color: @btn-group-border;
&[disabled] {
border-right-color: @btn-default-border;
}
}
}
.@{btn-prefix-cls}-group &:last-child:not(:first-child),
.@{btn-prefix-cls}-group & + & {
border-left-color: @btn-group-border;
&[disabled] {
border-left-color: @btn-default-border;
}
}
}
&-ghost {
.btn-ghost();
}
&-dashed {
.btn-dashed();
}
// type="danger" will deprecated
// use danger instead
&-danger {
.btn-danger();
}
&-link {
.btn-link();
}
&-text {
.btn-text();
}
&-dangerous {
.btn-danger-default();
}
&-dangerous&-primary {
.btn-danger();
}
&-dangerous&-link {
.btn-danger-link();
}
&-dangerous&-text {
.btn-danger-text();
}
&-icon-only {
.btn-square(@btn-prefix-cls);
vertical-align: -3px;
> .@{iconfont-css-prefix} {
display: flex;
justify-content: center;
}
}
// https://github.com/ant-design/ant-design/issues/32365
a&-icon-only {
vertical-align: -1px;
> .@{iconfont-css-prefix} {
display: inline;
}
}
&-round {
.btn-round(@btn-prefix-cls);
&.@{btn-prefix-cls}-icon-only {
width: auto;
}
}
&-circle {
.btn-circle(@btn-prefix-cls);
}
&::before {
position: absolute;
top: -@btn-border-width;
right: -@btn-border-width;
bottom: -@btn-border-width;
left: -@btn-border-width;
z-index: 1;
display: none;
background: @component-background;
border-radius: inherit;
opacity: 0.35;
transition: opacity 0.2s;
content: '';
pointer-events: none;
}
.@{iconfont-css-prefix} {
transition: margin-left 0.3s @ease-in-out;
// Follow icon blur under windows. Change the render.
// https://github.com/ant-design/ant-design/issues/13924
&.@{iconfont-css-prefix}-plus,
&.@{iconfont-css-prefix}-minus {
> svg {
shape-rendering: optimizeSpeed;
}
}
}
&&-loading {
position: relative;
cursor: default;
&::before {
display: block;
}
}
& > &-loading-icon {
transition: all 0.3s @ease-in-out;
.@{iconfont-css-prefix} {
padding-right: @padding-xs;
animation: none;
// for smooth button padding transition
svg {
animation: loadingCircle 1s infinite linear;
}
}
&:only-child {
.@{iconfont-css-prefix} {
padding-right: 0;
}
}
}
&-group {
.btn-group(@btn-prefix-cls);
}
// http://stackoverflow.com/a/21281554/3040605
&:focus > span,
&:active > span {
position: relative;
}
// To ensure that a space will be placed between character and `Icon`.
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
margin-left: @margin-xs;
}
&&-background-ghost {
color: @btn-default-ghost-color;
border-color: @btn-default-ghost-border;
&,
&:hover,
&:active,
&:focus {
background: @btn-default-ghost-bg;
}
&:hover,
&:focus {
color: @primary-color-hover;
border-color: @primary-color-hover;
}
&:active {
color: @primary-color-active;
border-color: @primary-color-active;
}
&[disabled] {
color: @disabled-color;
background: @btn-default-ghost-bg;
border-color: @btn-default-border;
}
}
&-background-ghost&-primary {
.button-variant-ghost(@btn-primary-bg, @btn-primary-bg, @primary-color-hover, @primary-color-active);
}
&-background-ghost&-danger {
.button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
}
&-background-ghost&-dangerous {
.button-variant-ghost(@btn-danger-border, @btn-danger-border, @error-color-hover, @error-color-active);
}
&-background-ghost&-dangerous&-link {
.button-variant-ghost(@btn-danger-border, transparent, @error-color-hover, @error-color-active);
}
&-two-chinese-chars::first-letter {
letter-spacing: 0.34em;
}
&-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
margin-right: -0.34em;
letter-spacing: 0.34em;
}
&-block {
width: 100%;
}
// https://github.com/ant-design/ant-design/issues/12681
// same method as Select
&:empty {
display: inline-block;
width: 0;
visibility: hidden;
content: '\a0';
}
}
a.@{btn-prefix-cls} {
// Fixing https://github.com/ant-design/ant-design/issues/12978
// https://github.com/ant-design/ant-design/issues/29978
// It is a render problem of chrome, which is only happened in the codesandbox demo
// 0.1px for padding-top solution works and I don't why
padding-top: 0.01px !important;
line-height: @btn-height-base - 2px;
&-lg {
line-height: @btn-height-lg - 2px;
}
&-sm {
line-height: @btn-height-sm - 2px;
}
}
@import './rtl';

View File

@ -0,0 +1,593 @@
// mixins for button
// ------------------------
.button-size(@height; @padding-horizontal; @font-size; @border-radius) {
@padding-vertical: max(
(round(((@height - @font-size * @line-height-base) / 2) * 10) / 10) - @border-width-base,
0
);
height: @height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
border-radius: @border-radius;
}
.button-color(@color; @background; @border) {
color: @color;
border-color: @border; // a inside Button which only work in Chrome
& when not(@background = null) {
background: @background;
}
// http://stackoverflow.com/a/17253457
> a:only-child {
color: currentColor;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
content: '';
}
}
}
.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&[disabled] {
&,
&:hover,
&:focus,
&:active {
.button-color(@color; @background; @border);
text-shadow: none;
box-shadow: none;
}
}
}
.button-variant-primary(@color; @background; @backgroundHover: yellow; @backgroundActive: yellow) {
.button-color(@color; @background; @background);
text-shadow: @btn-text-shadow;
box-shadow: @btn-primary-shadow;
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
);
}
& when (@theme = variable) {
.button-color(@color; @backgroundHover; @backgroundHover);
}
}
&:active {
& when (@theme = dark) {
.button-color(
@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
);
}
& when (@theme = variable) {
.button-color(@color; @backgroundActive; @backgroundActive);
}
}
.button-disabled();
}
.button-variant-other(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(@primary-5; @background; @primary-5);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background;
~`colorPalette('@{btn-primary-bg}', 5) `
);
}
& when (@theme = variable) {
.button-color(@primary-color-hover; @background; @primary-color-hover);
}
}
&:active {
& when (@theme = dark) {
.button-color(@primary-7; @background; @primary-7);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background;
~`colorPalette('@{btn-primary-bg}', 7) `
);
}
& when (@theme = variable) {
.button-color(@primary-color-active; @background; @primary-color-active);
}
}
.button-disabled();
}
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
.button-color(@color; null; @border);
text-shadow: none;
&:hover,
&:focus {
& when (@border = transparent) {
& when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
}
& when (@theme = variable) {
.button-color(@borderActive; transparent; transparent);
}
}
& when not (@border = transparent) {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
);
}
& when (@theme = variable) {
.button-color(@borderHover; transparent; @borderHover);
}
}
}
&:active {
& when (@border = transparent) {
& when (@theme = dark) {
.button-color(~`colorPalette('@{color}', 5) `; null; transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{color}', 7) `; null; transparent);
}
& when (@theme = variable) {
.button-color(@borderActive; transparent; transparent);
}
}
& when not (@border = transparent) {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{color}', 5) `; null; ~`colorPalette('@{color}', 5) `
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{color}', 7) `; null; ~`colorPalette('@{color}', 7) `
);
}
& when (@theme = variable) {
.button-color(@borderActive; transparent; @borderActive);
}
}
}
.button-disabled();
}
.button-group-base(@btnClassName) {
position: relative;
display: inline-flex;
> .@{btnClassName},
> span > .@{btnClassName} {
position: relative;
&:hover,
&:focus,
&:active {
z-index: 2;
}
&[disabled] {
z-index: 0;
}
}
.@{btnClassName}-icon-only {
font-size: @font-size-base;
}
// size
&-lg > .@{btnClassName},
&-lg > span > .@{btnClassName} {
.button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0);
}
&-lg .@{btnClassName}.@{btnClassName}-icon-only {
.square(@btn-height-lg);
padding-right: 0;
padding-left: 0;
}
&-sm > .@{btnClassName},
&-sm > span > .@{btnClassName} {
.button-size(@btn-height-sm; @btn-padding-horizontal-sm; @font-size-base; 0);
> .@{iconfont-css-prefix} {
font-size: @font-size-base;
}
}
&-sm .@{btnClassName}.@{btnClassName}-icon-only {
.square(@btn-height-sm);
padding-right: 0;
padding-left: 0;
}
}
// Base styles of buttons
// --------------------------------------------------
.btn() {
position: relative;
display: inline-block;
font-weight: @btn-font-weight;
white-space: nowrap;
text-align: center;
background-image: none;
border: @btn-border-width @btn-border-style transparent;
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-horizontal-base; @font-size-base; @btn-border-radius-base
);
> .@{iconfont-css-prefix} {
line-height: 1;
}
&,
&:active,
&:focus {
outline: 0;
}
&:not([disabled]):hover {
text-decoration: none;
}
&:not([disabled]):active {
outline: 0;
box-shadow: none;
}
&[disabled] {
cursor: not-allowed;
> * {
pointer-events: none;
}
}
&-lg {
.button-size(
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
);
}
&-sm {
.button-size(
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
);
}
}
// primary button style
.btn-primary() {
.button-variant-primary(@btn-primary-color; @btn-primary-bg; @primary-color-hover; @primary-color-active);
}
// default button style
.btn-default() {
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
&:hover,
&:focus,
&:active {
text-decoration: none;
background: @btn-default-bg;
}
}
// ghost button style
.btn-ghost() {
.button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}
// dashed button style
.btn-dashed() {
.button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
border-style: dashed;
}
// danger button style
.btn-danger() {
.button-variant-primary(@btn-danger-color, @btn-danger-bg, @error-color-hover, @error-color-active);
}
// danger default button style
.btn-danger-default() {
.button-color(@error-color, @btn-default-bg, @error-color);
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
`
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
`
);
}
& when (@theme = variable) {
.button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
}
}
&:active {
& when (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
`
);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
`
);
}
& when (@theme = variable) {
.button-color(@error-color-active, @btn-default-bg, @error-color-active);
}
}
.button-disabled();
}
// danger link button style
.btn-danger-link() {
.button-variant-other(@error-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
}
& when (@theme = variable) {
.button-color(@error-color-hover; transparent; transparent);
}
}
&:active {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
}
& when (@theme = variable) {
.button-color(@error-color-active; transparent; transparent);
}
}
.button-disabled(@disabled-color; transparent; transparent);
}
// link button style
.btn-link() {
.button-variant-other(@link-color, transparent, transparent);
box-shadow: none;
&:hover {
background: @btn-link-hover-bg;
}
&:hover,
&:focus,
&:active {
border-color: transparent;
}
.button-disabled(@disabled-color; transparent; transparent);
}
// text button style
.btn-text() {
.button-variant-other(@text-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus {
color: @text-color;
background: @btn-text-hover-bg;
border-color: transparent;
}
&:active {
color: @text-color;
background: fadein(@btn-text-hover-bg, 1%);
border-color: transparent;
}
.button-disabled(@disabled-color; transparent; transparent);
}
.btn-danger-text() {
.button-variant-other(@error-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; @btn-text-hover-bg; transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{error-color}', 5) `; @btn-text-hover-bg; transparent);
}
& when (@theme = variable) {
.button-color(@error-color-hover; @btn-text-hover-bg; transparent);
}
}
&:active {
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; fadein(@btn-text-hover-bg, 1%); transparent);
}
& when (not (@theme = dark) and not (@theme = variable)) {
.button-color(~`colorPalette('@{error-color}', 7) `; fadein(@btn-text-hover-bg, 1%); transparent);
}
& when (@theme = variable) {
.button-color(@error-color-active; fadein(@btn-text-hover-bg, 1%); transparent);
}
}
.button-disabled(@disabled-color; transparent; transparent);
}
// round button
.btn-round(@btnClassName: btn) {
.button-size(@btn-circle-size; (@btn-circle-size / 2); @font-size-base; @btn-circle-size);
&.@{btnClassName}-lg {
.button-size(
@btn-circle-size-lg; (@btn-circle-size-lg / 2); @btn-font-size-lg; @btn-circle-size-lg
);
}
&.@{btnClassName}-sm {
.button-size(
@btn-circle-size-sm; (@btn-circle-size-sm / 2); @font-size-base; @btn-circle-size-sm
);
}
}
// square button: the content only contains icon
.btn-square(@btnClassName: btn) {
.square(@btn-square-size);
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
& > * {
font-size: @btn-square-only-icon-size;
}
&.@{btnClassName}-lg {
.square(@btn-square-size-lg);
.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
& > * {
font-size: @btn-square-only-icon-size-lg;
}
}
&.@{btnClassName}-sm {
.square(@btn-square-size-sm);
.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
& > * {
font-size: @btn-square-only-icon-size-sm;
}
}
}
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
min-width: @btn-height-base;
padding-right: 0;
padding-left: 0;
text-align: center;
border-radius: 50%;
&.@{btnClassName}-lg {
min-width: @btn-height-lg;
border-radius: 50%;
}
&.@{btnClassName}-sm {
min-width: @btn-height-sm;
border-radius: 50%;
}
}
// Horizontal button groups style
// --------------------------------------------------
.btn-group(@btnClassName: btn) {
.button-group-base(@btnClassName);
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
span + .@{btnClassName},
.@{btnClassName} + span,
> span + span,
& + .@{btnClassName},
& + & {
margin-left: -1px;
}
.@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
border-left-color: transparent;
}
.@{btnClassName} {
border-radius: 0;
}
> .@{btnClassName}:first-child,
> span:first-child > .@{btnClassName} {
margin-left: 0;
}
> .@{btnClassName}:only-child {
border-radius: @btn-border-radius-base;
}
> span:only-child > .@{btnClassName} {
border-radius: @btn-border-radius-base;
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
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-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
}
&-sm {
> .@{btnClassName}:only-child {
border-radius: @btn-border-radius-sm;
}
> span:only-child > .@{btnClassName} {
border-radius: @btn-border-radius-sm;
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
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-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
}
}
& > & {
float: left;
}
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
border-radius: 0;
}
& > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
padding-right: 8px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
padding-left: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

View File

@ -0,0 +1,97 @@
.@{btn-prefix-cls} {
&-rtl {
direction: rtl;
}
&-primary {
.@{btn-prefix-cls}-group &:last-child:not(:first-child),
.@{btn-prefix-cls}-group & + & {
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-group-border;
border-left-color: @btn-default-border;
}
&[disabled] {
.@{btn-prefix-cls}-group-rtl& {
border-right-color: @btn-default-border;
border-left-color: @btn-group-border;
}
}
}
}
& > &-loading-icon {
.@{iconfont-css-prefix} {
.@{btn-prefix-cls}-rtl& {
padding-right: 0;
padding-left: @margin-xs;
}
}
&:only-child {
.@{iconfont-css-prefix} {
padding-right: 0;
padding-left: 0;
}
}
}
> .@{iconfont-css-prefix} + span,
> span + .@{iconfont-css-prefix} {
.@{btn-prefix-cls}-rtl& {
margin-right: 8px;
margin-left: 0;
}
}
}
// mixin
.btn-group(@btnClassName: btn) {
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
span + .@{btnClassName},
.@{btnClassName} + span,
> span + span,
& + .@{btnClassName},
& + & {
.@{btnClassName}-rtl&,
.@{btnClassName}-group-rtl& {
margin-right: -1px;
margin-left: auto;
}
}
&.@{btnClassName}-group-rtl {
direction: rtl;
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
}
}
&-sm {
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-radius: 0 @btn-border-radius-sm @btn-border-radius-sm 0;
}
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
.@{btnClassName}-group-rtl& {
border-radius: @btn-border-radius-sm 0 0 @btn-border-radius-sm;
}
}
}
}

View File

@ -0,0 +1,192 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
.@{calendar-prefix-cls} {
.reset-component();
background: @calendar-full-bg;
// ========================= Header =========================
&-header {
display: flex;
justify-content: flex-end;
padding: @padding-sm 0;
.@{calendar-prefix-cls}-year-select {
min-width: 80px;
}
.@{calendar-prefix-cls}-month-select {
min-width: 70px;
margin-left: @padding-xs;
}
.@{calendar-prefix-cls}-mode-switch {
margin-left: @padding-xs;
}
}
.@{calendar-picker-prefix-cls}-panel {
background: @calendar-full-panel-bg;
border: 0;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0;
.@{calendar-picker-prefix-cls}-month-panel,
.@{calendar-picker-prefix-cls}-date-panel {
width: auto;
}
.@{calendar-picker-prefix-cls}-body {
padding: @padding-xs 0;
}
.@{calendar-picker-prefix-cls}-content {
width: 100%;
}
}
// ========================== Mini ==========================
&-mini {
border-radius: @border-radius-base;
.@{calendar-picker-prefix-cls}-calendar-header {
padding-right: @padding-xs;
padding-left: @padding-xs;
}
.@{calendar-picker-prefix-cls}-panel {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
.@{calendar-picker-prefix-cls}-content {
height: 256px;
th {
height: auto;
padding: 0;
line-height: 18px;
}
}
}
// ========================== Full ==========================
&-full {
.@{calendar-picker-prefix-cls}-panel {
display: block;
width: 100%;
text-align: right;
background: @calendar-full-bg;
border: 0;
.@{calendar-picker-prefix-cls}-body {
th,
td {
padding: 0;
}
th {
height: auto;
padding: 0 12px 5px 0;
line-height: 18px;
}
}
// Cell
.@{calendar-picker-prefix-cls}-cell {
&::before {
display: none;
}
&:hover {
.@{calendar-prefix-cls}-date {
background: @item-hover-bg;
}
}
.@{calendar-prefix-cls}-date-today::before {
display: none;
}
&-selected,
&-selected:hover {
.@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-date-today {
background: @calendar-item-active-bg;
.@{calendar-prefix-cls}-date-value {
color: @primary-color;
}
}
}
}
// Cell date
.@{calendar-prefix-cls}-date {
display: block;
width: auto;
height: auto;
margin: 0 (@padding-xs / 2);
padding: (@padding-xs / 2) @padding-xs 0;
border: 0;
border-top: 2px solid @border-color-split;
border-radius: 0;
transition: background 0.3s;
&-value {
line-height: 24px;
transition: color 0.3s;
}
&-content {
position: static;
width: auto;
height: 86px;
overflow-y: auto;
color: @text-color;
line-height: @line-height-base;
text-align: left;
}
&-today {
border-color: @primary-color;
.@{calendar-prefix-cls}-date-value {
color: @text-color;
}
}
}
}
}
}
@media only screen and (max-width: @screen-xs) {
.@{calendar-prefix-cls} {
&-header {
display: block;
.@{calendar-prefix-cls}-year-select {
width: 50%;
}
.@{calendar-prefix-cls}-month-select {
width: ~'calc(50% - @{padding-xs})';
}
.@{calendar-prefix-cls}-mode-switch {
width: 100%;
margin-top: @padding-xs;
margin-left: 0;
> label {
width: 50%;
text-align: center;
}
}
}
}
}
@import './rtl';

View File

@ -0,0 +1,46 @@
.@{calendar-prefix-cls} {
&-rtl {
direction: rtl;
}
&-header {
.@{calendar-prefix-cls}-month-select {
.@{calendar-prefix-cls}-rtl & {
margin-right: @padding-xs;
margin-left: 0;
}
}
.@{calendar-prefix-cls}-mode-switch {
.@{calendar-prefix-cls}-rtl & {
margin-right: @padding-xs;
margin-left: 0;
}
}
}
// ========================== Full ==========================
&-full {
.@{calendar-picker-prefix-cls}-panel {
.@{calendar-prefix-cls}-rtl& {
text-align: left;
}
.@{calendar-picker-prefix-cls}-body {
th {
.@{calendar-prefix-cls}-rtl& {
padding: 0 0 5px 12px;
}
}
}
.@{calendar-prefix-cls}-date {
&-content {
.@{calendar-prefix-cls}-rtl& {
text-align: right;
}
}
}
}
}
}

View File

@ -0,0 +1,308 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@card-prefix-cls: ~'@{ant-prefix}-card';
@card-hoverable-hover-border: transparent;
@card-action-icon-size: 16px;
@gradient-min: fade(@card-skeleton-bg, 20%);
@gradient-max: fade(@card-skeleton-bg, 40%);
.@{card-prefix-cls} {
.reset-component();
position: relative;
background: @card-background;
border-radius: @card-radius;
&-rtl {
direction: rtl;
}
&-hoverable {
cursor: pointer;
transition: box-shadow 0.3s, border-color 0.3s;
&:hover {
border-color: @card-hoverable-hover-border;
box-shadow: @card-shadow;
}
}
&-bordered {
border: @border-width-base @border-style-base @border-color-split;
}
&-head {
min-height: @card-head-height;
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: @card-head-font-size;
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;
align-items: center;
}
&-title {
display: inline-block;
flex: 1;
padding: @card-head-padding 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
> .@{ant-prefix}-typography,
> .@{ant-prefix}-typography-edit-content {
left: 0;
margin-top: 0;
margin-bottom: 0;
}
}
.@{ant-prefix}-tabs-top {
clear: both;
margin-bottom: @card-head-tabs-margin-bottom;
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
&-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
}
}
}
&-extra {
float: right;
// https://stackoverflow.com/a/22429853/3040605
margin-left: auto;
padding: @card-head-padding 0;
color: @card-head-extra-color;
font-weight: normal;
font-size: @font-size-base;
.@{card-prefix-cls}-rtl & {
margin-right: auto;
margin-left: 0;
}
}
&-body {
padding: @card-padding-base;
.clearfix();
}
&-contain-grid:not(&-loading) &-body {
margin: -1px 0 0 -1px;
padding: 0;
}
&-grid {
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;
transition: all 0.3s;
.@{card-prefix-cls}-rtl & {
float: right;
}
&-hoverable {
&:hover {
position: relative;
z-index: 1;
box-shadow: @card-shadow;
}
}
}
&-contain-tabs > &-head &-head-title {
min-height: @card-head-height - @card-head-padding;
padding-bottom: 0;
}
&-contain-tabs > &-head &-extra {
padding-bottom: 0;
}
&-bordered &-cover {
margin-top: -1px;
margin-right: -1px;
margin-left: -1px;
}
&-cover {
> * {
display: block;
width: 100%;
}
img {
border-radius: @card-radius @card-radius 0 0;
}
}
&-actions {
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;
margin: @card-actions-li-margin;
color: @text-color-secondary;
text-align: center;
.@{card-prefix-cls}-rtl & {
float: right;
}
> span {
position: relative;
display: block;
min-width: 32px;
font-size: @font-size-base;
line-height: @line-height-base;
cursor: pointer;
&:hover {
color: @primary-color;
transition: color 0.3s;
}
a:not(.@{ant-prefix}-btn),
> .@{iconfont-css-prefix} {
display: inline-block;
width: 100%;
color: @text-color-secondary;
line-height: 22px;
transition: color 0.3s;
&:hover {
color: @primary-color;
}
}
> .@{iconfont-css-prefix} {
font-size: @card-action-icon-size;
line-height: 22px;
}
}
&:not(:last-child) {
border-right: @border-width-base @border-style-base @border-color-split;
.@{card-prefix-cls}-rtl & {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
}
}
&-type-inner &-head {
padding: 0 @card-padding-base;
background: @background-color-light;
&-title {
padding: @card-inner-head-padding 0;
font-size: @font-size-base;
}
}
&-type-inner &-body {
padding: 16px @card-padding-base;
}
&-type-inner &-extra {
padding: @card-inner-head-padding + 1.5px 0;
}
&-meta {
margin: -4px 0;
.clearfix();
&-avatar {
float: left;
padding-right: 16px;
.@{card-prefix-cls}-rtl & {
float: right;
padding-right: 0;
padding-left: 16px;
}
}
&-detail {
overflow: hidden;
> div:not(:last-child) {
margin-bottom: @margin-xs;
}
}
&-title {
overflow: hidden;
color: @card-head-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap;
text-overflow: ellipsis;
}
&-description {
color: @text-color-secondary;
}
}
&-loading {
overflow: hidden;
}
&-loading &-body {
user-select: none;
}
&-loading-content {
p {
margin: 0;
}
}
&-loading-block {
height: 14px;
margin: 4px 0;
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
background-size: 600% 600%;
border-radius: @card-radius;
animation: card-loading 1.4s ease infinite;
}
}
@keyframes card-loading {
0%,
100% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
}
@import './size';

View File

@ -0,0 +1,20 @@
.@{card-prefix-cls}-small {
> .@{card-prefix-cls}-head {
min-height: @card-head-height-sm;
padding: 0 @card-padding-base-sm;
font-size: @card-head-font-size-sm;
> .@{card-prefix-cls}-head-wrapper {
> .@{card-prefix-cls}-head-title {
padding: @card-head-padding-sm 0;
}
> .@{card-prefix-cls}-extra {
padding: @card-head-padding-sm 0;
font-size: @card-head-font-size-sm;
}
}
}
> .@{card-prefix-cls}-body {
padding: @card-padding-base-sm;
}
}

View File

@ -0,0 +1,294 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
.@{carousel-prefix-cls} {
.reset-component();
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
touch-action: pan-y;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
margin: 0;
padding: 0;
overflow: hidden;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
}
.slick-slide {
pointer-events: none;
// https://github.com/ant-design/ant-design/issues/23294
input.@{ant-prefix}-radio-input,
input.@{ant-prefix}-checkbox-input {
visibility: hidden;
}
&.slick-active {
pointer-events: auto;
input.@{ant-prefix}-radio-input,
input.@{ant-prefix}-checkbox-input {
visibility: visible;
}
}
// fix Carousel content height not match parent node
// when children is empty node
// https://github.com/ant-design/ant-design/issues/25878
> div > div {
vertical-align: bottom;
}
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0);
touch-action: pan-y;
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
&::before,
&::after {
display: table;
content: '';
}
&::after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
img {
display: block;
}
&.slick-loading img {
display: none;
}
&.dragging img {
pointer-events: none;
}
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
}
.slick-arrow.slick-hidden {
display: none;
}
// Arrows
.slick-prev,
.slick-next {
position: absolute;
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 {
color: transparent;
background: transparent;
outline: none;
&::before {
opacity: 1;
}
}
&.slick-disabled::before {
opacity: 0.25;
}
}
.slick-prev {
left: -25px;
&::before {
content: '←';
}
}
.slick-next {
right: -25px;
&::before {
content: '→';
}
}
// Dots
.slick-dots {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 15;
display: flex !important;
justify-content: center;
margin-right: 15%;
margin-left: 15%;
padding-left: 0;
list-style: none;
&-bottom {
bottom: 12px;
}
&-top {
top: 12px;
bottom: auto;
}
li {
position: relative;
display: inline-block;
flex: 0 1 auto;
box-sizing: content-box;
width: @carousel-dot-width;
height: @carousel-dot-height;
margin: 0 2px;
margin-right: 3px;
margin-left: 3px;
padding: 0;
text-align: center;
text-indent: -999px;
vertical-align: top;
transition: all 0.5s;
button {
display: block;
width: 100%;
height: @carousel-dot-height;
padding: 0;
color: transparent;
font-size: 0;
background: @component-background;
border: 0;
border-radius: 1px;
outline: none;
cursor: pointer;
opacity: 0.3;
transition: all 0.5s;
&:hover,
&:focus {
opacity: 0.75;
}
}
&.slick-active {
width: @carousel-dot-active-width;
& button {
background: @component-background;
opacity: 1;
}
&:hover,
&:focus {
opacity: 1;
}
}
}
}
}
.@{ant-prefix}-carousel-vertical {
.slick-dots {
top: 50%;
bottom: auto;
flex-direction: column;
width: @carousel-dot-height;
height: auto;
margin: 0;
transform: translateY(-50%);
&-left {
right: auto;
left: 12px;
}
&-right {
right: 12px;
left: auto;
}
li {
width: @carousel-dot-height;
height: @carousel-dot-width;
margin: 4px 2px;
vertical-align: baseline;
button {
width: @carousel-dot-height;
height: @carousel-dot-width;
}
&.slick-active {
width: @carousel-dot-height;
height: @carousel-dot-active-width;
button {
width: @carousel-dot-height;
height: @carousel-dot-active-width;
}
}
}
}
}
@import './rtl';

View File

@ -0,0 +1,54 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
.@{carousel-prefix-cls} {
&-rtl {
direction: rtl;
}
.slick-track {
.@{carousel-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
.slick-prev {
.@{carousel-prefix-cls}-rtl & {
right: -25px;
left: auto;
&::before {
content: '→';
}
}
}
.slick-next {
.@{carousel-prefix-cls}-rtl & {
right: auto;
left: -25px;
&::before {
content: '←';
}
}
}
// Dots
.slick-dots {
.@{carousel-prefix-cls}-rtl& {
flex-direction: row-reverse;
}
}
}
.@{ant-prefix}-carousel-vertical {
.slick-dots {
.@{carousel-prefix-cls}-rtl& {
flex-direction: column;
}
}
}

View File

@ -0,0 +1,104 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../checkbox/style/mixin';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox');
.@{cascader-prefix-cls} {
width: 184px;
&-checkbox {
top: 0;
margin-right: @padding-xs;
}
&-menus {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
&.@{cascader-prefix-cls}-menu-empty {
.@{cascader-prefix-cls}-menu {
width: 100%;
height: auto;
}
}
}
&-menu {
min-width: 111px;
height: 180px;
margin: 0;
margin: -@dropdown-edge-child-vertical-padding 0;
padding: @cascader-dropdown-edge-child-vertical-padding 0;
overflow: auto;
vertical-align: top;
list-style: none;
border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
-ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
&-item {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
overflow: hidden;
line-height: @cascader-dropdown-line-height;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: @item-hover-bg;
}
&-disabled {
color: @disabled-color;
cursor: not-allowed;
&:hover {
background: transparent;
}
}
.@{cascader-prefix-cls}-menu-empty & {
color: @disabled-color;
cursor: default;
pointer-events: none;
}
&-active:not(&-disabled) {
&,
&:hover {
font-weight: @select-item-selected-font-weight;
background-color: @cascader-item-selected-bg;
}
}
&-content {
flex: auto;
}
&-expand &-expand-icon,
&-loading-icon {
margin-left: @padding-xss;
color: @text-color-secondary;
font-size: 10px;
.@{cascader-prefix-cls}-menu-item-disabled& {
color: @disabled-color;
}
}
&-keyword {
color: @highlight-color;
}
}
}
}
@import './rtl';

View File

@ -0,0 +1,19 @@
// We can not import reference of `./index` directly since it will make dead loop in less
@import (reference) '../../style/themes/index';
@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
.@{cascader-prefix-cls}-rtl {
.@{cascader-prefix-cls}-menu-item {
&-expand-icon,
&-loading-icon {
margin-right: @padding-xss;
margin-left: 0;
}
}
.@{cascader-prefix-cls}-checkbox {
top: 0;
margin-right: 0;
margin-left: @padding-xs;
}
}

View File

@ -0,0 +1,233 @@
@import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
// 一般状态
.@{checkbox-prefix-cls} {
.reset-component();
position: relative;
top: 0.2em;
line-height: 1;
white-space: nowrap;
outline: none;
cursor: pointer;
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner,
&-input:focus + &-inner {
border-color: @checkbox-color;
}
&-checked::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid @checkbox-color;
border-radius: @border-radius-base;
visibility: hidden;
animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: backwards;
content: '';
}
&:hover::after,
.@{checkbox-prefix-cls}-wrapper:hover &::after {
visibility: visible;
}
&-inner {
position: relative;
top: 0;
left: 0;
display: block;
width: @checkbox-size;
height: @checkbox-size;
direction: ltr;
background-color: @checkbox-check-bg;
border: @checkbox-border-width @border-style-base @border-color-base;
border-radius: @checkbox-border-radius;
// Fix IE checked style
// https://github.com/ant-design/ant-design/issues/12597
border-collapse: separate;
transition: all 0.3s;
&::after {
@check-width: (@checkbox-size / 14) * 5px;
@check-height: (@checkbox-size / 14) * 8px;
position: absolute;
top: 50%;
// https://github.com/ant-design/ant-design/pull/19452
// https://github.com/ant-design/ant-design/pull/31726
left: 21.5%;
display: table;
width: @check-width;
height: @check-height;
border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
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;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
}
// 选中状态
.@{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;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
opacity: 1;
transition: all 0.2s @ease-out-back 0.1s;
content: ' ';
}
.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls} {
background-color: @checkbox-color;
border-color: @checkbox-color;
}
}
.@{checkbox-prefix-cls}-disabled {
cursor: not-allowed;
&.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls}::after {
border-color: @disabled-color;
animation-name: none;
}
}
.@{checkbox-prefix-cls}-input {
cursor: not-allowed;
}
.@{checkbox-inner-prefix-cls} {
background-color: @input-disabled-bg;
border-color: @border-color-base !important;
&::after {
border-color: @input-disabled-bg;
border-collapse: separate;
animation-name: none;
}
}
& + span {
color: @disabled-color;
cursor: not-allowed;
}
// Not show highlight border of checkbox when disabled
&:hover::after,
.@{checkbox-prefix-cls}-wrapper:hover &::after {
visibility: hidden;
}
}
.@{checkbox-prefix-cls}-wrapper {
.reset-component();
display: inline-flex;
align-items: baseline;
line-height: unset;
cursor: pointer;
&::after {
display: inline-block;
width: 0;
overflow: hidden;
content: '\a0';
}
&.@{checkbox-prefix-cls}-wrapper-disabled {
cursor: not-allowed;
}
& + & {
margin-left: 8px;
}
}
.@{checkbox-prefix-cls} + span {
padding-right: 8px;
padding-left: 8px;
}
.@{checkbox-prefix-cls}-group {
.reset-component();
display: inline-block;
&-item {
margin-right: @checkbox-group-item-margin-right;
&:last-child {
margin-right: 0;
}
}
&-item + &-item {
margin-left: 0;
}
}
// 半选状态
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls} {
background-color: @checkbox-check-bg;
border-color: @border-color-base;
}
.@{checkbox-inner-prefix-cls}::after {
@indeterminate-width: @checkbox-size - 8px;
@indeterminate-height: @checkbox-size - 8px;
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 {
background-color: @disabled-color;
border-color: @disabled-color;
}
}
}
@keyframes antCheckboxEffect {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}

View File

@ -0,0 +1,28 @@
@import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
.@{checkbox-prefix-cls}-rtl {
direction: rtl;
}
.@{checkbox-prefix-cls}-group {
&-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-right: 0;
margin-left: @checkbox-group-item-margin-right;
}
&:last-child {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: 0 !important;
}
}
}
&-item + &-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: @checkbox-group-item-margin-right;
}
}
}
}

View File

@ -0,0 +1,156 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
.@{collapse-prefix-cls} {
.reset-component();
background-color: @collapse-header-bg;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
border-radius: @collapse-panel-border-radius;
& > &-item {
border-bottom: @border-width-base @border-style-base @border-color-base;
&:last-child {
&,
& > .@{collapse-prefix-cls}-header {
border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
}
}
> .@{collapse-prefix-cls}-header {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
padding: @collapse-header-padding;
color: @heading-color;
line-height: @line-height-base;
cursor: pointer;
transition: all 0.3s, visibility 0s;
.@{collapse-prefix-cls}-arrow {
display: inline-block;
margin-right: @margin-sm;
font-size: @font-size-sm;
vertical-align: -1px;
& svg {
transition: transform 0.24s;
}
}
.@{collapse-prefix-cls}-extra {
margin-left: auto;
}
&:focus {
outline: none;
}
}
.@{collapse-prefix-cls}-header-collapsible-only {
cursor: default;
.@{collapse-prefix-cls}-header-text {
cursor: pointer;
}
}
&.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header {
padding-left: @padding-sm;
}
}
}
// Expand Icon right
&-icon-position-right {
& > .@{collapse-prefix-cls}-item {
> .@{collapse-prefix-cls}-header {
position: relative;
padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra;
.@{collapse-prefix-cls}-arrow {
position: absolute;
top: 50%;
right: @padding-md;
left: auto;
margin: 0;
transform: translateY(-50%);
}
}
}
}
&-content {
color: @text-color;
background-color: @collapse-content-bg;
border-top: @border-width-base @border-style-base @border-color-base;
& > &-box {
padding: @collapse-content-padding;
}
&-hidden {
display: none;
}
}
&-item:last-child {
> .@{collapse-prefix-cls}-content {
border-radius: 0 0 @collapse-panel-border-radius @collapse-panel-border-radius;
}
}
&-borderless {
background-color: @collapse-header-bg;
border: 0;
}
&-borderless > &-item {
border-bottom: 1px solid @border-color-base;
}
&-borderless > &-item:last-child,
&-borderless > &-item:last-child &-header {
border-radius: 0;
}
&-borderless > &-item > &-content {
background-color: transparent;
border-top: 0;
}
&-borderless > &-item > &-content > &-content-box {
padding-top: 4px;
}
&-ghost {
background-color: transparent;
border: 0;
> .@{collapse-prefix-cls}-item {
border-bottom: 0;
> .@{collapse-prefix-cls}-content {
background-color: transparent;
border-top: 0;
> .@{collapse-prefix-cls}-content-box {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
}
& &-item-disabled > &-header {
&,
& > .arrow {
color: @disabled-color;
cursor: not-allowed;
}
}
}
@import './rtl';

View File

@ -0,0 +1,48 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
.@{collapse-prefix-cls} {
&-rtl {
direction: rtl;
}
& > &-item {
> .@{collapse-prefix-cls}-header {
.@{collapse-prefix-cls}-rtl & {
padding: @collapse-header-padding;
padding-right: @collapse-header-padding-extra;
}
.@{collapse-prefix-cls}-arrow {
.@{collapse-prefix-cls}-rtl& {
margin-right: 0;
margin-left: @margin-sm;
}
& svg {
.@{collapse-prefix-cls}-rtl& {
transform: rotate(180deg);
}
}
}
.@{collapse-prefix-cls}-extra {
.@{collapse-prefix-cls}-rtl& {
margin-right: auto;
margin-left: 0;
}
}
}
&.@{collapse-prefix-cls}-no-arrow {
> .@{collapse-prefix-cls}-header {
.@{collapse-prefix-cls}-rtl& {
padding-right: @padding-sm;
padding-left: 0;
}
}
}
}
}

View File

@ -0,0 +1,105 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@comment-prefix-cls: ~'@{ant-prefix}-comment';
.@{comment-prefix-cls} {
position: relative;
background-color: @comment-bg;
&-inner {
display: flex;
padding: @comment-padding-base;
}
&-avatar {
position: relative;
flex-shrink: 0;
margin-right: @margin-sm;
cursor: pointer;
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
&-content {
position: relative;
flex: 1 1 auto;
min-width: 1px;
font-size: @comment-font-size-base;
word-wrap: break-word;
&-author {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: @margin-xss;
font-size: @comment-font-size-base;
& > a,
& > span {
padding-right: @padding-xs;
font-size: @comment-font-size-sm;
line-height: 18px;
}
&-name {
color: @comment-author-name-color;
font-size: @comment-font-size-base;
transition: color 0.3s;
> * {
color: @comment-author-name-color;
&:hover {
color: @comment-author-name-color;
}
}
}
&-time {
color: @comment-author-time-color;
white-space: nowrap;
cursor: auto;
}
}
&-detail p {
margin-bottom: @comment-content-detail-p-margin-bottom;
white-space: pre-wrap;
}
}
&-actions {
margin-top: @comment-actions-margin-top;
margin-bottom: @comment-actions-margin-bottom;
padding-left: 0;
> li {
display: inline-block;
color: @comment-action-color;
> span {
margin-right: 10px;
color: @comment-action-color;
font-size: @comment-font-size-sm;
cursor: pointer;
transition: color 0.3s;
user-select: none;
&:hover {
color: @comment-action-hover-color;
}
}
}
}
&-nested {
margin-left: @comment-nest-indent;
}
}
@import './rtl';

View File

@ -0,0 +1,51 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@comment-prefix-cls: ~'@{ant-prefix}-comment';
.@{comment-prefix-cls} {
&-rtl {
direction: rtl;
}
&-avatar {
.@{comment-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 12px;
}
}
&-content {
&-author {
& > a,
& > span {
.@{comment-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 8px;
}
}
}
}
&-actions {
.@{comment-prefix-cls}-rtl & {
padding-right: 0;
}
> li {
> span {
.@{comment-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 10px;
}
}
}
}
&-nested {
.@{comment-prefix-cls}-rtl & {
margin-right: @comment-nest-indent;
margin-left: 0;
}
}
}

View File

@ -0,0 +1,362 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.picker-padding(@input-height, @font-size, @padding-horizontal) {
// font height probably 22.0001 So use floor better
@font-height: floor(@font-size * @line-height-base) + 2;
@padding-top: max(((@input-height - @font-height) / 2), 0);
@padding-bottom: max(@input-height - @font-height - @padding-top, 0);
padding: @padding-top @padding-horizontal @padding-bottom;
}
.@{picker-prefix-cls} {
@arrow-size: 10px;
.reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
position: relative;
display: inline-flex;
align-items: center;
background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @border-radius-base;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
&:hover,
&-focused {
.hover();
}
&-focused {
.active();
}
&&-disabled {
background: @input-disabled-bg;
border-color: @select-border-color;
cursor: not-allowed;
}
&&-disabled &-suffix {
color: @disabled-color;
}
&&-borderless {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
// ======================== Input =========================
&-input {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
> input {
.input();
flex: auto;
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
min-width: 1px;
height: auto;
padding: 0;
background: transparent;
border: 0;
&:focus {
box-shadow: none;
}
&[disabled] {
background: transparent;
}
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
&-placeholder {
> input {
color: @input-placeholder-color;
}
}
}
// Size
&-large {
.picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);
.@{picker-prefix-cls}-input > input {
font-size: @font-size-lg;
}
}
&-small {
.picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
}
&-suffix {
align-self: center;
margin-left: (@padding-xs / 2);
color: @disabled-color;
line-height: 1;
pointer-events: none;
> * {
vertical-align: top;
}
}
&-clear {
position: absolute;
top: 50%;
right: 0;
color: @disabled-color;
line-height: 1;
background: @component-background;
transform: translateY(-50%);
cursor: pointer;
opacity: 0;
transition: opacity @animation-duration-slow, color @animation-duration-slow;
> * {
vertical-align: top;
}
&:hover {
color: @text-color-secondary;
}
}
&-separator {
position: relative;
display: inline-block;
width: 1em;
height: @font-size-lg;
color: @disabled-color;
font-size: @font-size-lg;
vertical-align: top;
cursor: default;
.@{picker-prefix-cls}-focused & {
color: @text-color-secondary;
}
.@{picker-prefix-cls}-range-separator & {
.@{picker-prefix-cls}-disabled & {
cursor: not-allowed;
}
}
}
// ======================== Range =========================
&-range {
position: relative;
display: inline-flex;
// Clear
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-base;
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
// Active bar
.@{picker-prefix-cls}-active-bar {
bottom: -@border-width-base;
height: 2px;
margin-left: @input-padding-horizontal-base;
background: @primary-color;
opacity: 0;
transition: all @animation-duration-slow ease-out;
pointer-events: none;
}
&.@{picker-prefix-cls}-focused {
.@{picker-prefix-cls}-active-bar {
opacity: 1;
}
}
&-separator {
align-items: center;
padding: 0 @padding-xs;
line-height: 1;
}
&.@{picker-prefix-cls}-small {
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-sm;
}
.@{picker-prefix-cls}-active-bar {
margin-left: @input-padding-horizontal-sm;
}
}
}
// ======================= Dropdown =======================
&-dropdown {
.reset-component();
position: absolute;
z-index: @zindex-picker;
&-hidden {
display: none;
}
&-placement-bottomLeft {
.@{picker-prefix-cls}-range-arrow {
top: (@arrow-size / 2) - (@arrow-size / 3);
display: block;
transform: rotate(-45deg);
}
}
&-placement-topLeft {
.@{picker-prefix-cls}-range-arrow {
bottom: (@arrow-size / 2) - (@arrow-size / 3);
display: block;
transform: rotate(135deg);
}
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
}
&-dropdown-range {
padding: (@arrow-size * 2 / 3) 0;
&-hidden {
display: none;
}
}
// Time picker with additional style
&-dropdown &-panel > &-time-panel {
padding-top: (@padding-xs / 2);
}
// ======================== Ranges ========================
&-ranges {
margin-bottom: 0;
padding: (@padding-xs / 2) @padding-sm;
overflow: hidden;
line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2);
text-align: left;
list-style: none;
> li {
display: inline-block;
}
// https://github.com/ant-design/ant-design/issues/23687
.@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
color: @primary-color;
background: @primary-1;
border-color: @primary-3;
cursor: pointer;
}
.@{picker-prefix-cls}-ok {
float: right;
margin-left: @padding-xs;
}
}
&-range-wrapper {
display: flex;
}
&-range-arrow {
position: absolute;
z-index: 1;
display: none;
width: @arrow-size;
height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5;
box-shadow: 2px -2px 6px fade(@black, 6%);
transition: left @animation-duration-slow ease-out;
&::after {
position: absolute;
top: @border-width-base;
right: @border-width-base;
width: @arrow-size;
height: @arrow-size;
border: (@arrow-size / 2) solid @border-color-split;
border-color: @calendar-bg @calendar-bg transparent transparent;
content: '';
}
}
&-panel-container {
overflow: hidden;
vertical-align: top;
background: @calendar-bg;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
transition: margin @animation-duration-slow;
.@{picker-prefix-cls}-panels {
display: inline-flex;
flex-wrap: nowrap;
direction: ltr;
}
.@{picker-prefix-cls}-panel {
vertical-align: top;
background: transparent;
border-width: 0 0 @border-width-base 0;
border-radius: 0;
.@{picker-prefix-cls}-content,
table {
text-align: center;
}
&-focused {
border-color: @border-color-split;
}
}
}
}
@import './panel';
@import './rtl';

View File

@ -0,0 +1,677 @@
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';
.@{picker-prefix-cls} {
@picker-arrow-size: 7px;
@picker-year-month-cell-width: 60px;
@picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
&-panel {
display: inline-flex;
flex-direction: column;
text-align: center;
background: @calendar-bg;
border: @border-width-base @border-style-base @picker-border-color;
border-radius: @border-radius-base;
outline: none;
&-focused {
border-color: @primary-color;
}
}
// ========================================================
// = Shared Panel =
// ========================================================
&-decade-panel,
&-year-panel,
&-quarter-panel,
&-month-panel,
&-week-panel,
&-date-panel,
&-time-panel {
display: flex;
flex-direction: column;
width: @picker-panel-width;
}
// ======================= Header =======================
&-header {
display: flex;
padding: 0 @padding-xs;
color: @heading-color;
border-bottom: @border-width-base @border-style-base @picker-border-color;
> * {
flex: none;
}
button {
padding: 0;
color: @disabled-color;
line-height: @picker-text-height;
background: transparent;
border: 0;
cursor: pointer;
transition: color @animation-duration-slow;
}
> button {
min-width: 1.6em;
font-size: @font-size-base;
&:hover {
color: @text-color;
}
}
&-view {
flex: auto;
font-weight: 500;
line-height: @picker-text-height;
button {
color: inherit;
font-weight: inherit;
&:not(:first-child) {
margin-left: @padding-xs;
}
&:hover {
color: @primary-color;
}
}
}
}
// Arrow button
&-prev-icon,
&-next-icon,
&-super-prev-icon,
&-super-next-icon {
position: relative;
display: inline-block;
width: @picker-arrow-size;
height: @picker-arrow-size;
&::before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: @picker-arrow-size;
height: @picker-arrow-size;
border: 0 solid currentColor;
border-width: 1.5px 0 0 1.5px;
content: '';
}
}
&-super-prev-icon,
&-super-next-icon {
&::after {
position: absolute;
top: ceil((@picker-arrow-size / 2));
left: ceil((@picker-arrow-size / 2));
display: inline-block;
width: @picker-arrow-size;
height: @picker-arrow-size;
border: 0 solid currentColor;
border-width: 1.5px 0 0 1.5px;
content: '';
}
}
&-prev-icon,
&-super-prev-icon {
transform: rotate(-45deg);
}
&-next-icon,
&-super-next-icon {
transform: rotate(135deg);
}
// ======================== Body ========================
&-content {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
th,
td {
position: relative;
min-width: 24px;
font-weight: 400;
}
th {
height: 30px;
color: @text-color;
line-height: 30px;
}
}
.picker-cell-inner(@cellClassName) {
&::before {
position: absolute;
top: 50%;
right: 0;
left: 0;
z-index: 1;
height: @picker-panel-cell-height;
transform: translateY(-50%);
transition: all @animation-duration-slow;
content: '';
}
// >>> Default
.@{cellClassName} {
position: relative;
z-index: 2;
display: inline-block;
min-width: @picker-panel-cell-height;
height: @picker-panel-cell-height;
line-height: @picker-panel-cell-height;
border-radius: @border-radius-base;
transition: background @animation-duration-slow, border @animation-duration-slow;
}
// >>> Hover
&:hover:not(&-in-view),
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end) {
.@{cellClassName} {
background: @picker-basic-cell-hover-color;
}
}
// >>> Today
&-in-view&-today .@{cellClassName} {
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
border: @border-width-base @border-style-base @primary-color;
border-radius: @border-radius-base;
content: '';
}
}
// >>> In Range
&-in-view&-in-range {
position: relative;
&::before {
background: @picker-basic-cell-active-with-range-color;
}
}
// >>> Selected
&-in-view&-selected .@{cellClassName},
&-in-view&-range-start .@{cellClassName},
&-in-view&-range-end .@{cellClassName} {
color: @text-color-inverse;
background: @primary-color;
}
&-in-view&-range-start:not(&-range-start-single),
&-in-view&-range-end:not(&-range-end-single) {
&::before {
background: @picker-basic-cell-active-with-range-color;
}
}
&-in-view&-range-start::before {
left: 50%;
}
&-in-view&-range-end::before {
right: 50%;
}
// >>> Range Hover
&-in-view&-range-hover-start:not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view&-range-hover-end:not(&-in-range):not(&-range-start):not(&-range-end),
&-in-view&-range-hover-start&-range-start-single,
&-in-view&-range-hover-start&-range-start&-range-end&-range-end-near-hover,
&-in-view&-range-hover-end&-range-start&-range-end&-range-start-near-hover,
&-in-view&-range-hover-end&-range-end-single,
&-in-view&-range-hover:not(&-in-range) {
&::after {
position: absolute;
top: 50%;
z-index: 0;
height: 24px;
border-top: @border-width-base dashed @picker-date-hover-range-border-color;
border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
transform: translateY(-50%);
transition: all @animation-duration-slow;
content: '';
}
}
// Add space for stash
&-range-hover-start::after,
&-range-hover-end::after,
&-range-hover::after {
right: 0;
left: 2px;
}
// Hover with in range
&-in-view&-in-range&-range-hover::before,
&-in-view&-range-start&-range-hover::before,
&-in-view&-range-end&-range-hover::before,
&-in-view&-range-start:not(&-range-start-single)&-range-hover-start::before,
&-in-view&-range-end:not(&-range-end-single)&-range-hover-end::before,
.@{picker-prefix-cls}-panel
> :not(.@{picker-prefix-cls}-date-panel)
&-in-view&-in-range&-range-hover-start::before,
.@{picker-prefix-cls}-panel
> :not(.@{picker-prefix-cls}-date-panel)
&-in-view&-in-range&-range-hover-end::before {
background: @picker-date-hover-range-color;
}
// range start border-radius
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
// range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
// DatePanel only
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
&::after {
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
background: @picker-date-hover-range-color;
transition: all @animation-duration-slow;
content: '';
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
right: -5px - @border-width-base;
left: 0;
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
right: 0;
left: -5px - @border-width-base;
}
// Hover with range start & end
&-range-hover&-range-start::after {
right: 50%;
}
&-range-hover&-range-end::after {
left: 50%;
}
// Edge start
tr > &-in-view&-range-hover:first-child::after,
tr > &-in-view&-range-hover-end:first-child::after,
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
left: 6px;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
// Edge end
tr > &-in-view&-range-hover:last-child::after,
tr > &-in-view&-range-hover-start:last-child::after,
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
right: 6px;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
// >>> Disabled
&-disabled {
color: @disabled-color;
pointer-events: none;
.@{cellClassName} {
background: transparent;
}
&::before {
background: @picker-basic-cell-disabled-bg;
}
}
&-disabled&-today .@{cellClassName}::before {
border-color: @disabled-color;
}
}
&-cell {
padding: 3px 0;
color: @disabled-color;
cursor: pointer;
// In view
&-in-view {
color: @text-color;
}
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
&-decade-panel,
&-year-panel,
&-quarter-panel,
&-month-panel {
.@{picker-prefix-cls}-content {
height: @picker-panel-without-time-cell-height * 4;
}
.@{picker-cell-inner-cls} {
padding: 0 @padding-xs;
}
}
&-quarter-panel {
.@{picker-prefix-cls}-content {
height: 56px;
}
}
// ======================== Footer ========================
&-footer {
width: min-content;
min-width: 100%;
line-height: @picker-text-height - 2 * @border-width-base;
text-align: center;
border-bottom: @border-width-base @border-style-base transparent;
.@{picker-prefix-cls}-panel & {
border-top: @border-width-base @border-style-base @picker-border-color;
}
&-extra {
padding: 0 @padding-sm;
line-height: @picker-text-height - 2 * @border-width-base;
text-align: left;
&:not(:last-child) {
border-bottom: @border-width-base @border-style-base @picker-border-color;
}
}
}
&-now {
text-align: left;
}
&-today-btn {
color: @link-color;
&:hover {
color: @link-hover-color;
}
&:active {
color: @link-active-color;
}
&&-disabled {
color: @disabled-color;
cursor: not-allowed;
}
}
// ========================================================
// = Special =
// ========================================================
// ===================== Decade Panel =====================
&-decade-panel {
.@{picker-cell-inner-cls} {
padding: 0 (@padding-xs / 2);
}
.@{picker-prefix-cls}-cell::before {
display: none;
}
}
// ============= Year & Quarter & Month Panel =============
&-year-panel,
&-quarter-panel,
&-month-panel {
@hover-cell-fixed-distance: (
(((@picker-panel-width - @padding-xs * 2) / 3) - @picker-year-month-cell-width) / 2
);
.@{picker-prefix-cls}-body {
padding: 0 @padding-xs;
}
.@{picker-cell-inner-cls} {
width: @picker-year-month-cell-width;
}
.@{picker-prefix-cls}-cell-range-hover-start::after {
left: @hover-cell-fixed-distance;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base 0 0 @border-radius-base;
.@{picker-prefix-cls}-panel-rtl & {
right: @hover-cell-fixed-distance;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
.@{picker-prefix-cls}-cell-range-hover-end::after {
right: @hover-cell-fixed-distance;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: 0 @border-radius-base @border-radius-base 0;
.@{picker-prefix-cls}-panel-rtl & {
left: @hover-cell-fixed-distance;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
// ====================== Week Panel ======================
&-week-panel {
.@{picker-prefix-cls}-body {
padding: @padding-xs @padding-sm;
}
// Clear cell style
.@{picker-prefix-cls}-cell {
&:hover .@{picker-cell-inner-cls},
&-selected .@{picker-cell-inner-cls},
.@{picker-cell-inner-cls} {
background: transparent !important;
}
}
&-row {
td {
transition: background @animation-duration-slow;
}
&:hover td {
background: @picker-basic-cell-hover-color;
}
&-selected td,
&-selected:hover td {
background: @primary-color;
&.@{picker-prefix-cls}-cell-week {
color: fade(@text-color-inverse, 50%);
}
&.@{picker-prefix-cls}-cell-today .@{picker-cell-inner-cls}::before {
border-color: @text-color-inverse;
}
.@{picker-cell-inner-cls} {
color: @text-color-inverse;
}
}
}
}
// ====================== Date Panel ======================
&-date-panel {
.@{picker-prefix-cls}-body {
padding: @padding-xs @padding-sm;
}
.@{picker-prefix-cls}-content {
width: @picker-panel-cell-width * 7;
th {
width: @picker-panel-cell-width;
}
}
}
// ==================== Datetime Panel ====================
&-datetime-panel {
display: flex;
.@{picker-prefix-cls}-time-panel {
border-left: @border-width-base @border-style-base @picker-border-color;
}
.@{picker-prefix-cls}-date-panel,
.@{picker-prefix-cls}-time-panel {
transition: opacity @animation-duration-slow;
}
// Keyboard
&-active {
.@{picker-prefix-cls}-date-panel,
.@{picker-prefix-cls}-time-panel {
opacity: 0.3;
&-active {
opacity: 1;
}
}
}
}
// ====================== Time Panel ======================
&-time-panel {
width: auto;
min-width: auto;
.@{picker-prefix-cls}-content {
display: flex;
flex: auto;
height: @picker-time-panel-column-height;
}
&-column {
flex: 1 0 auto;
width: @picker-time-panel-column-width;
margin: 0;
padding: 0;
overflow-y: hidden;
text-align: left;
list-style: none;
transition: background @animation-duration-slow;
&::after {
display: block;
height: @picker-time-panel-column-height - @picker-time-panel-cell-height;
content: '';
.@{picker-prefix-cls}-datetime-panel & {
height: @picker-time-panel-column-height - @picker-time-panel-cell-height + 2 *
@border-width-base;
}
}
&:not(:first-child) {
border-left: @border-width-base @border-style-base @picker-border-color;
}
&-active {
background: @calendar-column-active-bg;
}
&:hover {
overflow-y: auto;
}
> li {
margin: 0;
padding: 0;
&.@{picker-prefix-cls}-time-panel-cell {
.@{picker-prefix-cls}-time-panel-cell-inner {
display: block;
width: 100%;
height: @picker-time-panel-cell-height;
margin: 0;
padding: 0 0 0 ((@picker-time-panel-column-width - 28px) / 2);
color: @text-color;
line-height: @picker-time-panel-cell-height;
border-radius: 0;
cursor: pointer;
transition: background @animation-duration-slow;
&:hover {
background: @item-hover-bg;
}
}
&-selected {
.@{picker-prefix-cls}-time-panel-cell-inner {
background: @calendar-item-active-bg;
}
}
&-disabled {
.@{picker-prefix-cls}-time-panel-cell-inner {
color: @disabled-color;
background: transparent;
cursor: not-allowed;
}
}
}
}
}
}
}
// Fix IE11 render bug by css hacks
// https://github.com/ant-design/ant-design/issues/21559
// https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
_:-ms-fullscreen,
:root {
.@{picker-prefix-cls}-range-wrapper {
.@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
.@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
padding: 21px 0;
}
}
}

View File

@ -0,0 +1,246 @@
.@{picker-prefix-cls} {
&-rtl {
direction: rtl;
}
&-suffix {
.@{picker-prefix-cls}-rtl & {
margin-right: (@padding-xs / 2);
margin-left: 0;
}
}
&-clear {
.@{picker-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
&-separator {
.@{picker-prefix-cls}-rtl & {
transform: rotate(180deg);
}
}
&-header {
&-view {
button {
&:not(:first-child) {
.@{picker-prefix-cls}-panel-rtl & {
margin-right: @padding-xs;
margin-left: 0;
}
}
}
}
}
// ======================== Range =========================
&-range {
// Clear
.@{picker-prefix-cls}-clear {
.@{picker-prefix-cls}-rtl& {
right: auto;
left: @input-padding-horizontal-base;
}
}
// Active bar
.@{picker-prefix-cls}-active-bar {
.@{picker-prefix-cls}-rtl& {
margin-right: @input-padding-horizontal-base;
margin-left: 0;
}
}
&.@{picker-prefix-cls}-small {
.@{picker-prefix-cls}-active-bar {
.@{picker-prefix-cls}-rtl& {
margin-right: @input-padding-horizontal-sm;
}
}
}
}
// ======================== Ranges ========================
&-ranges {
.@{picker-prefix-cls}-dropdown-rtl & {
text-align: right;
}
.@{picker-prefix-cls}-ok {
.@{picker-prefix-cls}-dropdown-rtl & {
float: left;
margin-right: @padding-xs;
margin-left: 0;
}
}
}
// ======================== Panel ========================
&-panel {
&-rtl {
direction: rtl;
}
}
&-prev-icon,
&-super-prev-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(135deg);
}
}
&-next-icon,
&-super-next-icon {
.@{picker-prefix-cls}-panel-rtl & {
transform: rotate(-45deg);
}
}
&-cell {
.picker-cell-inner(~'@{picker-cell-inner-cls}');
}
// ======================== Body ==========================
.picker-cell-inner(@cellClassName) {
.@{cellClassName} {
position: relative;
z-index: 2;
display: inline-block;
min-width: @picker-panel-cell-height;
height: @picker-panel-cell-height;
line-height: @picker-panel-cell-height;
border-radius: @border-radius-base;
transition: background @animation-duration-slow, border @animation-duration-slow;
}
&-in-view&-range-start::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
&-in-view&-range-end::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-in-view&-range-start&-range-end::before {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 50%;
}
}
.@{picker-prefix-cls}-date-panel
&-in-view&-in-range&-range-hover-start
.@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: -5px - @border-width-base;
}
}
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
.@{picker-prefix-cls}-panel-rtl & {
right: -5px - @border-width-base;
left: 0;
}
}
// Hover with range start & end
&-range-hover&-range-start::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 50%;
}
}
&-range-hover&-range-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 50%;
left: 0;
}
}
// range start border-radius
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
.@{picker-prefix-cls}-panel-rtl & {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// range end border-radius
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
.@{picker-prefix-cls}-panel-rtl & {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
// Edge start
tr > &-in-view&-range-hover:not(&-selected):first-child::after,
&-in-view&-start&-range-hover-edge-start&-range-hover-edge-start-near-range::after,
&-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
&-in-view&-range-hover-start::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
left: 0;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: none;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
// Edge end
tr > &-in-view&-range-hover:not(&-selected):last-child::after,
&-in-view&-end&-range-hover-edge-end&-range-hover-edge-end-near-range::after,
&-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
&-in-view&-range-hover-end::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 0;
left: 6px;
border-right: none;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
tr > &-in-view&-range-hover-start:last-child::after,
tr > &-in-view&-range-hover-end:first-child::after,
&-in-view&-start&-range-hover-edge-start:not(&-range-hover)::after,
&-in-view&-start&-range-hover-end&-range-hover-edge-start:not(&-range-hover)::after,
&-in-view&-end&-range-hover-start&-range-hover-edge-end:not(&-range-hover)::after,
tr > &-in-view&-start&-range-hover&-range-hover-edge-start:last-child::after,
tr > &-in-view&-end&-range-hover&-range-hover-edge-end:first-child::after {
.@{picker-prefix-cls}-panel-rtl & {
right: 6px;
left: 6px;
border-right: @border-width-base dashed @picker-date-hover-range-border-color;
border-left: @border-width-base dashed @picker-date-hover-range-border-color;
border-radius: @border-radius-base;
}
}
}
// ======================== Footer ========================
&-footer {
&-extra {
.@{picker-prefix-cls}-dropdown-rtl & {
direction: rtl;
text-align: right;
}
}
}
// ====================== Time Panel ======================
&-time-panel {
.@{picker-prefix-cls}-panel-rtl & {
direction: ltr;
}
}
}

View File

@ -0,0 +1,180 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
.@{descriptions-prefix-cls} {
&-header {
display: flex;
align-items: center;
margin-bottom: @descriptions-title-margin-bottom;
}
&-title {
flex: auto;
overflow: hidden;
color: @heading-color;
font-weight: bold;
font-size: @font-size-lg;
line-height: @line-height-base;
white-space: nowrap;
text-overflow: ellipsis;
}
&-extra {
margin-left: auto;
color: @descriptions-extra-color;
font-size: @font-size-base;
}
&-view {
width: 100%;
overflow: hidden;
border-radius: @border-radius-base;
table {
width: 100%;
table-layout: fixed;
}
}
&-row {
> th,
> td {
padding-bottom: @descriptions-item-padding-bottom;
}
&:last-child {
border-bottom: none;
}
}
&-item-label {
color: @heading-color;
font-weight: normal;
font-size: @font-size-base;
line-height: @line-height-base;
text-align: start;
&::after {
& when (@descriptions-item-trailing-colon=true) {
content: ':';
}
& when not (@descriptions-item-trailing-colon=true) {
content: ' ';
}
position: relative;
top: -0.5px;
margin: 0 @descriptions-item-label-colon-margin-right 0
@descriptions-item-label-colon-margin-left;
}
&.@{descriptions-prefix-cls}-item-no-colon::after {
content: ' ';
}
}
&-item-no-label {
&::after {
margin: 0;
content: '';
}
}
&-item-content {
display: table-cell;
flex: 1;
color: @text-color;
font-size: @font-size-base;
line-height: @line-height-base;
word-break: break-word;
overflow-wrap: break-word;
}
&-item {
padding-bottom: 0;
vertical-align: top;
&-container {
display: flex;
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
display: inline-flex;
align-items: baseline;
}
}
}
&-middle {
.@{descriptions-prefix-cls}-row {
> th,
> td {
padding-bottom: @padding-sm;
}
}
}
&-small {
.@{descriptions-prefix-cls}-row {
> th,
> td {
padding-bottom: @padding-xs;
}
}
}
&-bordered {
.@{descriptions-prefix-cls}-view {
border: 1px solid @border-color-split;
> table {
table-layout: auto;
border-collapse: collapse;
}
}
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
padding: @descriptions-default-padding;
border-right: 1px solid @border-color-split;
&:last-child {
border-right: none;
}
}
.@{descriptions-prefix-cls}-item-label {
background-color: @descriptions-bg;
&::after {
display: none;
}
}
.@{descriptions-prefix-cls}-row {
border-bottom: 1px solid @border-color-split;
&:last-child {
border-bottom: none;
}
}
&.@{descriptions-prefix-cls}-middle {
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
padding: @descriptions-middle-padding;
}
}
&.@{descriptions-prefix-cls}-small {
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
padding: @descriptions-small-padding;
}
}
}
}
@import './rtl';

View File

@ -0,0 +1,33 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
.@{descriptions-prefix-cls} {
&-rtl {
direction: rtl;
}
&-item-label {
&::after {
.@{descriptions-prefix-cls}-rtl & {
margin: 0 @descriptions-item-label-colon-margin-left 0
@descriptions-item-label-colon-margin-right;
}
}
}
&-bordered {
.@{descriptions-prefix-cls}-item-label,
.@{descriptions-prefix-cls}-item-content {
.@{descriptions-prefix-cls}-rtl& {
border-right: none;
border-left: 1px solid @border-color-split;
&:last-child {
border-left: none;
}
}
}
}
}

View File

@ -0,0 +1,111 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@divider-prefix-cls: ~'@{ant-prefix}-divider';
.@{divider-prefix-cls} {
.reset-component();
border-top: @border-width-base solid @divider-color;
&-vertical {
position: relative;
top: -0.06em;
display: inline-block;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
border-top: 0;
border-left: @border-width-base solid @divider-color;
}
&-horizontal {
display: flex;
clear: both;
width: 100%;
min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
margin: 24px 0;
}
&-horizontal&-with-text {
display: flex;
margin: 16px 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap;
text-align: center;
border-top: 0;
border-top-color: @divider-color;
&::before,
&::after {
position: relative;
top: 50%;
width: 50%;
border-top: @border-width-base solid transparent;
// Chrome not accept `inherit` in `border-top`
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: '';
}
}
&-horizontal&-with-text-left {
&::before {
top: 50%;
width: @divider-orientation-margin;
}
&::after {
top: 50%;
width: 100% - @divider-orientation-margin;
}
}
&-horizontal&-with-text-right {
&::before {
top: 50%;
width: 100% - @divider-orientation-margin;
}
&::after {
top: 50%;
width: @divider-orientation-margin;
}
}
&-inner-text {
display: inline-block;
padding: 0 @divider-text-padding;
}
&-dashed {
background: none;
border-color: @divider-color;
border-style: dashed;
border-width: @border-width-base 0 0;
}
&-horizontal&-with-text&-dashed {
border-top: 0;
&::before,
&::after {
border-style: dashed none none;
}
}
&-vertical&-dashed {
border-width: 0 0 0 @border-width-base;
}
&-plain&-with-text {
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
}
}
@import './rtl';

View File

@ -0,0 +1,38 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@divider-prefix-cls: ~'@{ant-prefix}-divider';
.@{divider-prefix-cls} {
&-rtl {
direction: rtl;
}
&-horizontal&-with-text-left {
&::before {
.@{divider-prefix-cls}-rtl& {
width: 100% - @divider-orientation-margin;
}
}
&::after {
.@{divider-prefix-cls}-rtl& {
width: @divider-orientation-margin;
}
}
}
&-horizontal&-with-text-right {
&::before {
.@{divider-prefix-cls}-rtl& {
width: @divider-orientation-margin;
}
}
&::after {
.@{divider-prefix-cls}-rtl& {
width: 100% - @divider-orientation-margin;
}
}
}
}

View File

@ -0,0 +1,247 @@
@import '../../style/themes/index';
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@drawer-animation-ease: @ease-out-quint;
.@{drawer-prefix-cls} {
@drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
position: fixed;
z-index: @zindex-modal;
width: 0%;
height: 100%;
transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
&-content-wrapper {
position: absolute;
width: 100%;
height: 100%;
transition: transform @animation-duration-slow @drawer-animation-ease,
box-shadow @animation-duration-slow @drawer-animation-ease;
}
.@{drawer-prefix-cls}-content {
width: 100%;
height: 100%;
}
&-left,
&-right {
top: 0;
width: 0%;
height: 100%;
.@{drawer-prefix-cls}-content-wrapper {
height: 100%;
}
&.@{drawer-prefix-cls}-open {
width: 100%;
transition: transform @animation-duration-slow @drawer-animation-ease;
}
}
&-left {
left: 0;
.@{drawer-prefix-cls} {
&-content-wrapper {
left: 0;
}
}
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-right;
}
}
}
&-right {
right: 0;
.@{drawer-prefix-cls} {
&-content-wrapper {
right: 0;
}
}
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-left;
}
// https://github.com/ant-design/ant-design/issues/18607, Avoid edge alignment bug.
&.no-mask {
right: 1px;
transform: translateX(1px);
}
}
}
&-top,
&-bottom {
left: 0;
width: 100%;
height: 0%;
.@{drawer-prefix-cls}-content-wrapper {
width: 100%;
}
&.@{drawer-prefix-cls}-open {
height: 100%;
transition: transform @animation-duration-slow @drawer-animation-ease;
}
}
&-top {
top: 0;
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-down;
}
}
}
&-bottom {
bottom: 0;
.@{drawer-prefix-cls} {
&-content-wrapper {
bottom: 0;
}
}
&.@{drawer-prefix-cls}-open {
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-up;
}
&.no-mask {
bottom: 1px;
transform: translateY(1px);
}
}
}
&.@{drawer-prefix-cls}-open .@{drawer-prefix-cls}-mask {
height: 100%;
opacity: 1;
transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
pointer-events: auto;
}
&-title {
margin: 0;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
line-height: 22px;
}
&-content {
position: relative;
z-index: 1;
overflow: auto;
background-color: @drawer-bg;
background-clip: padding-box;
border: 0;
}
&-close {
display: inline-block;
margin-right: 12px;
color: @modal-close-color;
font-weight: 700;
font-size: @font-size-lg;
font-style: normal;
line-height: 1;
text-align: center;
text-transform: none;
text-decoration: none;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
transition: color @animation-duration-slow;
text-rendering: auto;
&:focus,
&:hover {
color: @icon-color-hover;
text-decoration: none;
}
}
&-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: @drawer-header-padding;
color: @text-color;
background: @drawer-bg;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
&-title {
display: flex;
align-items: center;
justify-content: space-between;
}
&-close-only {
padding-bottom: 0;
border: none;
}
}
&-wrapper-body {
display: flex;
flex-flow: column nowrap;
width: 100%;
height: 100%;
}
&-body {
flex-grow: 1;
padding: @drawer-body-padding;
overflow: auto;
font-size: @font-size-base;
line-height: @line-height-base;
word-wrap: break-word;
}
&-footer {
flex-shrink: 0;
padding: @drawer-footer-padding-vertical @drawer-footer-padding-horizontal;
border-top: @border-width-base @border-style-base @border-color-split;
}
&-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: @modal-mask-bg;
opacity: 0;
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
pointer-events: none;
}
// =================== Hook Components ===================
.@{picker-prefix-cls} {
&-clear {
background: @popover-background;
}
}
}
@keyframes antdDrawerFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@ -0,0 +1,16 @@
@import '../../style/themes/index';
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
.@{drawer-prefix-cls} {
&-rtl {
direction: rtl;
}
&-close {
.@{drawer-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 12px;
}
}
}

View File

@ -0,0 +1,381 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './status';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls} {
.reset-component();
position: absolute;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
display: block;
&::before {
position: absolute;
top: -@popover-distance + @popover-arrow-width;
right: 0;
bottom: -@popover-distance + @popover-arrow-width;
left: -7px;
z-index: -9999;
opacity: 0.0001;
content: ' ';
}
&-wrap {
position: relative;
.@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
font-size: 10px;
}
.@{iconfont-css-prefix}-down::before {
transition: transform @animation-duration-base;
}
}
&-wrap-open {
.@{iconfont-css-prefix}-down::before {
transform: rotate(180deg);
}
}
&-hidden,
&-menu-hidden,
&-menu-submenu-hidden {
display: none;
}
// Offset the popover to account for the dropdown arrow
&-show-arrow&-placement-topCenter,
&-show-arrow&-placement-topLeft,
&-show-arrow&-placement-topRight {
padding-bottom: @popover-distance;
}
&-show-arrow&-placement-bottomCenter,
&-show-arrow&-placement-bottomLeft,
&-show-arrow&-placement-bottomRight {
padding-top: @popover-distance;
}
// Arrows
// .popover-arrow is outer, .popover-arrow:after is inner
&-arrow {
position: absolute;
z-index: 1; // lift it up so the menu wouldn't cask shadow on it
display: block;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
background: transparent;
border-style: solid;
border-width: (sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2);
transform: rotate(45deg);
}
&-placement-topCenter > &-arrow,
&-placement-topLeft > &-arrow,
&-placement-topRight > &-arrow {
bottom: @popover-distance - @popover-arrow-width + 2.2px;
border-color: transparent @popover-bg @popover-bg transparent;
box-shadow: 3px 3px 7px fade(@black, 7%);
}
&-placement-topCenter > &-arrow {
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
&-placement-topLeft > &-arrow {
left: 16px;
}
&-placement-topRight > &-arrow {
right: 16px;
}
&-placement-bottomCenter > &-arrow,
&-placement-bottomLeft > &-arrow,
&-placement-bottomRight > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px;
border-color: @popover-bg transparent transparent @popover-bg;
box-shadow: -2px -2px 5px fade(@black, 6%);
}
&-placement-bottomCenter > &-arrow {
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
&-placement-bottomLeft > &-arrow {
left: 16px;
}
&-placement-bottomRight > &-arrow {
right: 16px;
}
&-menu {
position: relative;
margin: 0;
padding: @dropdown-edge-child-vertical-padding 0;
text-align: left;
list-style-type: none;
background-color: @dropdown-menu-bg;
background-clip: padding-box;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&-item-group-title {
padding: 5px @control-padding-horizontal;
color: @text-color-secondary;
transition: all @animation-duration-slow;
}
&-submenu-popup {
position: absolute;
z-index: @zindex-dropdown;
background: transparent;
box-shadow: none;
transform-origin: 0 0;
ul,
li {
list-style: none;
}
ul {
margin-right: 0.3em;
margin-left: 0.3em;
}
}
// ======================= Item Content =======================
&-item {
position: relative;
display: flex;
align-items: center;
}
&-item-icon {
min-width: 12px;
margin-right: 8px;
font-size: @font-size-sm;
}
&-title-content {
flex: auto;
> a {
color: inherit;
transition: all @animation-duration-slow;
&:hover {
color: inherit;
}
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}
}
}
// =========================== Item ===========================
&-item,
&-submenu-title {
clear: both;
margin: 0;
padding: @dropdown-vertical-padding @control-padding-horizontal;
color: @text-color;
font-weight: normal;
font-size: @dropdown-font-size;
line-height: @dropdown-line-height;
white-space: nowrap;
cursor: pointer;
transition: all @animation-duration-slow;
&:first-child {
& when (@dropdown-edge-child-vertical-padding = 0) {
border-radius: @border-radius-base @border-radius-base 0 0;
}
}
&:last-child {
& when (@dropdown-edge-child-vertical-padding = 0) {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
&-selected {
color: @dropdown-selected-color;
background-color: @item-active-bg;
}
&:hover {
background-color: @item-hover-bg;
}
&-disabled {
color: @disabled-color;
cursor: not-allowed;
&:hover {
color: @disabled-color;
background-color: @dropdown-menu-submenu-disabled-bg;
cursor: not-allowed;
}
a {
pointer-events: none;
}
}
&-divider {
height: 1px;
margin: 4px 0;
overflow: hidden;
line-height: 0;
background-color: @border-color-split;
}
.@{dropdown-prefix-cls}-menu-submenu-expand-icon {
position: absolute;
right: @padding-xs;
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
margin-right: 0 !important;
color: @text-color-secondary;
font-size: 10px;
font-style: normal;
}
}
}
&-item-group-list {
margin: 0 8px;
padding: 0;
list-style: none;
}
&-submenu-title {
padding-right: @control-padding-horizontal + @font-size-sm;
}
&-submenu-vertical {
position: relative;
}
&-submenu-vertical > & {
position: absolute;
top: 0;
left: 100%;
min-width: 100%;
margin-left: 4px;
transform-origin: 0 0;
}
&-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
&,
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
color: @disabled-color;
background-color: @dropdown-menu-submenu-disabled-bg;
cursor: not-allowed;
}
}
// https://github.com/ant-design/ant-design/issues/19264
&-submenu-selected &-submenu-title {
color: @primary-color;
}
}
&.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
&.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
&.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
&.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
&.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
}
.@{dropdown-prefix-cls}-trigger,
.@{dropdown-prefix-cls}-link,
.@{dropdown-prefix-cls}-button {
> .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
font-size: 10px;
vertical-align: baseline;
}
}
.@{dropdown-prefix-cls}-button {
white-space: nowrap;
&.@{ant-prefix}-btn-group
> .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
padding-right: @padding-xs;
padding-left: @padding-xs;
}
}
// https://github.com/ant-design/ant-design/issues/4903
.@{dropdown-prefix-cls}-menu-dark {
&,
.@{dropdown-prefix-cls}-menu {
background: @menu-dark-bg;
}
.@{dropdown-prefix-cls}-menu-item,
.@{dropdown-prefix-cls}-menu-submenu-title,
.@{dropdown-prefix-cls}-menu-item > a,
.@{dropdown-prefix-cls}-menu-item > .@{iconfont-css-prefix} + span > a {
color: @text-color-secondary-dark;
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
color: @text-color-secondary-dark;
}
&:hover {
color: @text-color-inverse;
background: transparent;
}
}
.@{dropdown-prefix-cls}-menu-item-selected {
&,
&:hover,
> a {
color: @text-color-inverse;
background: @primary-color;
}
}
}
@import './rtl';

View File

@ -0,0 +1,90 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls} {
&-rtl {
direction: rtl;
}
&::before {
.@{dropdown-prefix-cls}-rtl& {
right: -7px;
left: 0;
}
}
&-menu {
&&-rtl {
direction: rtl;
text-align: right;
}
&-item-group-title {
.@{dropdown-prefix-cls}-rtl &,
.@{dropdown-prefix-cls}-menu-submenu-rtl & {
direction: rtl;
text-align: right;
}
}
&-submenu-popup {
&.@{dropdown-prefix-cls}-menu-submenu-rtl {
transform-origin: 100% 0;
}
ul,
li {
.@{dropdown-prefix-cls}-rtl & {
text-align: right;
}
}
}
&-item,
&-submenu-title {
.@{dropdown-prefix-cls}-rtl & {
text-align: right;
}
> .@{iconfont-css-prefix}:first-child,
> span > .@{iconfont-css-prefix}:first-child {
.@{dropdown-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
.@{dropdown-prefix-cls}-menu-submenu-expand-icon {
.@{dropdown-prefix-cls}-rtl & {
right: auto;
left: @padding-xs;
}
.@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
.@{dropdown-prefix-cls}-rtl & {
margin-left: 0 !important;
transform: scaleX(-1);
}
}
}
}
&-submenu-title {
.@{dropdown-prefix-cls}-rtl & {
padding-right: @control-padding-horizontal;
padding-left: @control-padding-horizontal + @font-size-sm;
}
}
&-submenu-vertical > & {
.@{dropdown-prefix-cls}-rtl & {
right: 100%;
left: 0;
margin-right: 4px;
margin-left: 0;
}
}
}
}

View File

@ -0,0 +1,14 @@
@import (reference) '../../style/themes/index';
@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
.@{dropdown-prefix-cls}-menu-item {
&&-danger {
color: @error-color;
&:hover {
color: @text-color-inverse;
background-color: @error-color;
}
}
}

View File

@ -0,0 +1,151 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@empty-prefix-cls: ~'@{ant-prefix}-empty';
@empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';
.@{empty-prefix-cls} {
margin: 0 8px;
font-size: @empty-font-size;
line-height: @line-height-base;
text-align: center;
&-image {
height: 100px;
margin-bottom: 8px;
img {
height: 100%;
}
svg {
height: 100%;
margin: auto;
}
}
&-footer {
margin-top: 16px;
}
// antd internal empty style
&-normal {
margin: 32px 0;
color: @disabled-color;
.@{empty-prefix-cls}-image {
height: 40px;
}
}
&-small {
margin: 8px 0;
color: @disabled-color;
.@{empty-prefix-cls}-image {
height: 35px;
}
}
}
.@{empty-img-prefix-cls}-default {
// not support the definition because the less variables have no meaning
& when (@theme = dark) {
&-ellipse {
fill: @white;
fill-opacity: 0.08;
}
&-path {
&-1 {
fill: #262626;
}
&-2 {
fill: url('#linearGradient-1');
}
&-3 {
fill: #595959;
}
&-4 {
fill: #434343;
}
&-5 {
fill: #595959;
}
}
&-g {
fill: #434343;
}
}
& when not (@theme = dark) {
&-ellipse {
fill: #f5f5f5;
fill-opacity: 0.8;
}
&-path {
&-1 {
fill: #aeb8c2;
}
&-2 {
fill: url('#linearGradient-1');
}
&-3 {
fill: #f5f5f7;
}
&-4 {
fill: #dce0e6;
}
&-5 {
fill: #dce0e6;
}
}
&-g {
fill: @white;
}
}
}
.@{empty-img-prefix-cls}-simple {
// not support the definition because the less variables have no meaning
& when (@theme = dark) {
&-ellipse {
fill: @white;
fill-opacity: 0.08;
}
&-g {
stroke: #434343;
}
&-path {
fill: #262626;
stroke: #434343;
}
}
& when not (@theme = dark) {
&-ellipse {
fill: #f5f5f5;
}
&-g {
stroke: #d9d9d9;
}
&-path {
fill: #fafafa;
}
}
}
@import './rtl';

View File

@ -0,0 +1,10 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@empty-prefix-cls: ~'@{ant-prefix}-empty';
.@{empty-prefix-cls} {
&-rtl {
direction: rtl;
}
}

View File

@ -0,0 +1,77 @@
@import (reference) '../../style/themes/index';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
// ================================================================
// = Children Component =
// ================================================================
.@{form-item-prefix-cls} {
.@{ant-prefix}-mentions,
textarea.@{ant-prefix}-input {
height: auto;
}
// input[type=file]
.@{ant-prefix}-upload {
background: transparent;
}
.@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
background: @background-color-light;
}
input[type='radio'],
input[type='checkbox'] {
width: 14px;
height: 14px;
}
// Radios and checkboxes on same line
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-checkbox-inline {
display: inline-block;
margin-left: 8px;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
&:first-child {
margin-left: 0;
}
}
.@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical {
display: block;
}
.@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
.@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
margin-left: 0;
}
.@{ant-prefix}-input-number {
+ .@{form-prefix-cls}-text {
margin-left: 8px;
}
&-handler-wrap {
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
}
}
.@{ant-prefix}-select,
.@{ant-prefix}-cascader-picker {
width: 100%;
}
// Don't impact select inside input group and calendar header select
.@{ant-prefix}-picker-calendar-year-select,
.@{ant-prefix}-picker-calendar-month-select,
.@{ant-prefix}-input-group .@{ant-prefix}-select,
.@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker,
.@{ant-prefix}-input-number-group .@{ant-prefix}-select,
.@{ant-prefix}-input-number-group .@{ant-prefix}-cascader-picker {
width: auto;
}
}

View File

@ -0,0 +1,15 @@
@import (reference) '../../style/themes/index';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
.@{form-prefix-cls}-horizontal {
.@{form-item-prefix-cls}-label {
flex-grow: 0;
}
.@{form-item-prefix-cls}-control {
flex: 1 1 0;
// https://github.com/ant-design/ant-design/issues/32777
min-width: 0;
}
}

View File

@ -0,0 +1,298 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@import '../../grid/style/mixin';
@import './components';
@import './inline';
@import './horizontal';
@import './vertical';
@import './status';
@import './mixin';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
@form-font-height: ceil(@font-size-base * @line-height-base);
.@{form-prefix-cls} {
.reset-component();
.reset-form();
.@{form-prefix-cls}-text {
display: inline-block;
padding-right: 8px;
}
// ================================================================
// = Size =
// ================================================================
.formSize(@input-height) {
.@{form-item-prefix-cls}-label > label {
height: @input-height;
}
.@{form-item-prefix-cls}-control-input {
min-height: @input-height;
}
}
&-small {
.formSize(@input-height-sm);
}
&-large {
.formSize(@input-height-lg);
}
}
.explainAndExtraDistance(@num) when (@num >= 0) {
padding-top: floor(@num);
}
.explainAndExtraDistance(@num) when (@num < 0) {
margin-top: ceil(@num);
margin-bottom: ceil(@num);
}
// ================================================================
// = Item =
// ================================================================
.@{form-item-prefix-cls} {
.reset-component();
margin-bottom: @form-item-margin-bottom;
vertical-align: top;
// We delay one frame (0.017s) here to let CSSMotion goes
transition: margin-bottom @animation-duration-slow 0.017s linear;
&-with-help {
margin-bottom: 0;
transition: none;
}
&-hidden,
&-hidden.@{ant-prefix}-row {
// https://github.com/ant-design/ant-design/issues/26141
display: none;
}
// ==============================================================
// = Label =
// ==============================================================
&-label {
display: inline-block;
flex-grow: 0;
overflow: hidden;
white-space: nowrap;
text-align: right;
vertical-align: middle;
&-left {
text-align: left;
}
> label {
position: relative;
display: inline-flex;
align-items: center;
max-width: 100%;
height: @form-item-label-height;
color: @label-color;
font-size: @form-item-label-font-size;
> .@{iconfont-css-prefix} {
font-size: @form-item-label-font-size;
vertical-align: top;
}
// Required mark
&.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
display: inline-block;
margin-right: 4px;
color: @label-required-color;
font-size: @form-item-label-font-size;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
.@{form-prefix-cls}-hide-required-mark & {
display: none;
}
}
// Optional mark
.@{form-item-prefix-cls}-optional {
display: inline-block;
margin-left: @margin-xss;
color: @text-color-secondary;
.@{form-prefix-cls}-hide-required-mark & {
display: none;
}
}
// Optional mark
.@{form-item-prefix-cls}-tooltip {
color: @text-color-secondary;
cursor: help;
writing-mode: horizontal-tb;
margin-inline-start: @margin-xss;
}
&::after {
& when (@form-item-trailing-colon=true) {
content: ':';
}
& when not (@form-item-trailing-colon=true) {
content: ' ';
}
position: relative;
top: -0.5px;
margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
}
&.@{form-item-prefix-cls}-no-colon::after {
content: ' ';
}
}
}
// ==============================================================
// = Input =
// ==============================================================
&-control {
display: flex;
flex-direction: column;
flex-grow: 1;
&:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
width: 100%;
}
}
&-control-input {
position: relative;
display: flex;
align-items: center;
min-height: @input-height-base;
&-content {
flex: auto;
max-width: 100%;
}
}
// ==============================================================
// = Explain =
// ==============================================================
&-explain,
&-extra {
clear: both;
color: @text-color-secondary;
font-size: @font-size-base;
line-height: @line-height-base;
transition: color 0.3s @ease-out; // sync input color transition
.explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
}
&-explain-connected {
height: 0;
min-height: 0;
opacity: 0;
}
&-extra {
min-height: @form-item-margin-bottom;
}
.@{ant-prefix}-input-textarea-show-count {
&::after {
margin-bottom: -22px;
}
}
&-with-help &-explain {
height: auto;
min-height: @form-item-margin-bottom;
opacity: 1;
}
}
// >>>>>>>>>> Motion <<<<<<<<<<
// Explain holder
.@{ant-prefix}-show-help {
transition: height @animation-duration-slow linear, min-height @animation-duration-slow linear,
margin-bottom @animation-duration-slow @ease-in-out,
opacity @animation-duration-slow @ease-in-out;
&-leave {
min-height: @form-item-margin-bottom;
&-active {
min-height: 0;
}
}
}
// Explain
.@{ant-prefix}-show-help-item {
overflow: hidden;
transition: height @animation-duration-slow @ease-in-out,
opacity @animation-duration-slow @ease-in-out, transform @animation-duration-slow @ease-in-out !important;
&-appear,
&-enter {
transform: translateY(-5px);
opacity: 0;
&-active {
transform: translateY(0);
opacity: 1;
}
}
&-leave-active {
transform: translateY(-5px);
}
}
// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes diffZoomIn2 {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes diffZoomIn3 {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@import './rtl';

View File

@ -0,0 +1,38 @@
@import (reference) '../../style/themes/index';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
.@{form-prefix-cls}-inline {
display: flex;
flex-wrap: wrap;
.@{form-prefix-cls}-item {
flex: none;
flex-wrap: nowrap;
margin-right: 16px;
margin-bottom: 0;
&-with-help {
margin-bottom: @form-item-margin-bottom;
}
> .@{form-item-prefix-cls}-label,
> .@{form-item-prefix-cls}-control {
display: inline-block;
vertical-align: top;
}
> .@{form-item-prefix-cls}-label {
flex: none;
}
.@{form-prefix-cls}-text {
display: inline-block;
}
.@{form-item-prefix-cls}-has-feedback {
display: inline-block;
}
}
}

View File

@ -0,0 +1,110 @@
@import '../../input/style/mixin';
.form-control-validation(
@text-color: @input-color;
@border-color: @input-border-color;
@background-color: @input-bg;
@hoverBorderColor: @primary-color-hover;
@outlineColor: @primary-color-outline;
) {
.@{ant-prefix}-form-item-split {
color: @text-color;
}
// 输入框的不同校验状态
:not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input,
:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper {
&,
&:hover {
background-color: @background-color;
border-color: @border-color;
}
&:focus,
&-focused {
.active(@border-color, @hoverBorderColor, @outlineColor);
}
}
.@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
.active(@border-color, @hoverBorderColor, @outlineColor);
}
.@{ant-prefix}-input-prefix {
color: @text-color;
}
.@{ant-prefix}-input-group-addon,
.@{ant-prefix}-input-number-group-addon {
color: @text-color;
border-color: @border-color;
}
.has-feedback {
color: @text-color;
}
}
// Reset form styles
// -----------------------------
// Based on Bootstrap framework
.reset-form() {
legend {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 0;
color: @text-color-secondary;
font-size: @font-size-lg;
line-height: inherit;
border: 0;
border-bottom: @border-width-base @border-style-base @border-color-base;
}
label {
font-size: @font-size-base;
}
input[type='search'] {
box-sizing: border-box;
}
// Position radios and checkboxes better
input[type='radio'],
input[type='checkbox'] {
line-height: normal;
}
input[type='file'] {
display: block;
}
// Make range inputs behave like textual form controls
input[type='range'] {
display: block;
width: 100%;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
}
// Focus for file, radio, and checkbox
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Adjust output element
output {
display: block;
padding-top: 15px;
color: @input-color;
font-size: @font-size-base;
line-height: @line-height-base;
}
}

View File

@ -0,0 +1,196 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@import '../../grid/style/mixin';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
.@{form-prefix-cls} {
&-rtl {
direction: rtl;
}
}
// ================================================================
// = Item =
// ================================================================
.@{form-item-prefix-cls} {
// ==============================================================
// = Label =
// ==============================================================
&-label {
.@{form-prefix-cls}-rtl & {
text-align: left;
}
> label {
&.@{form-item-prefix-cls}-required::before {
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 4px;
}
}
&::after {
.@{form-prefix-cls}-rtl & {
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
}
}
.@{form-item-prefix-cls}-optional {
.@{form-prefix-cls}-rtl & {
margin-right: @margin-xss;
margin-left: 0;
}
}
}
}
// ==============================================================
// = Input =
// ==============================================================
&-control {
.@{ant-prefix}-col-rtl &:first-child {
width: 100%;
}
}
// status
&-has-feedback {
.@{ant-prefix}-input {
.@{form-prefix-cls}-rtl & {
padding-right: @input-padding-horizontal-base;
padding-left: 24px;
}
}
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input-suffix {
.@{form-prefix-cls}-rtl & {
padding-right: @input-padding-horizontal-base;
padding-left: 18px;
}
}
.@{ant-prefix}-input {
.@{form-prefix-cls}-rtl & {
padding: 0;
}
}
}
.@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
.@{ant-prefix}-input-suffix {
.@{form-prefix-cls}-rtl & {
right: auto;
left: 28px;
}
}
}
.@{ant-prefix}-input-number {
.@{form-prefix-cls}-rtl & {
padding-left: 18px;
}
}
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-clear,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-clear {
.@{form-prefix-cls}-rtl & {
right: auto;
left: 32px;
}
}
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
.@{form-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 42px;
}
}
.@{ant-prefix}-cascader-picker {
&-arrow {
.@{form-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 19px;
}
}
&-clear {
.@{form-prefix-cls}-rtl & {
right: auto;
left: 32px;
}
}
}
.@{ant-prefix}-picker {
.@{form-prefix-cls}-rtl & {
padding-right: @input-padding-horizontal-base;
padding-left: @input-padding-horizontal-base + @font-size-base * 1.3;
}
&-large {
.@{form-prefix-cls}-rtl & {
padding-right: @input-padding-horizontal-lg;
padding-left: @input-padding-horizontal-lg + @font-size-base * 1.3;
}
}
&-small {
.@{form-prefix-cls}-rtl & {
padding-right: @input-padding-horizontal-sm;
padding-left: @input-padding-horizontal-sm + @font-size-base * 1.3;
}
}
}
&.@{form-item-prefix-cls} {
&-has-success,
&-has-warning,
&-has-error,
&-is-validating {
// ====================== Icon ======================
.@{form-item-prefix-cls}-children-icon {
.@{form-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
}
}
}
}
// inline
.@{form-prefix-cls}-inline {
.@{form-prefix-cls}-item {
.@{form-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 16px;
}
}
}
// vertical
.make-vertical-layout-label() {
.@{form-prefix-cls}-rtl& {
text-align: right;
}
}

View File

@ -0,0 +1,310 @@
@import (reference) '../../style/themes/index';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
.@{form-item-prefix-cls} {
// ================================================================
// = Status =
// ================================================================
/* Some non-status related component style is in `components.less` */
// ========================= Explain =========================
/* To support leave along ErrorList. We add additional className to handle explain style */
&-explain {
&-error {
color: @error-color;
}
&-warning {
color: @warning-color;
}
}
&-has-feedback {
// ========================= Input =========================
.@{ant-prefix}-input {
padding-right: 24px;
}
// https://github.com/ant-design/ant-design/issues/19884
.@{ant-prefix}-input-affix-wrapper {
.@{ant-prefix}-input-suffix {
padding-right: 18px;
}
}
// Fix issue: https://github.com/ant-design/ant-design/issues/7854
.@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
.@{ant-prefix}-input-suffix {
right: 28px;
}
}
// ======================== Switch =========================
.@{ant-prefix}-switch {
margin: 2px 0 4px;
}
// ======================== Select =========================
// Fix overlapping between feedback icon and <Select>'s arrow.
// https://github.com/ant-design/ant-design/issues/4431
> .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
> .@{ant-prefix}-select .@{ant-prefix}-select-clear,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-clear,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-arrow,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-clear {
right: 32px;
}
> .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value,
:not(.@{ant-prefix}-input-number-group-addon)
> .@{ant-prefix}-select
.@{ant-prefix}-select-selection-selected-value {
padding-right: 42px;
}
// ======================= Cascader ========================
.@{ant-prefix}-cascader-picker {
&-arrow {
margin-right: 19px;
}
&-clear {
right: 32px;
}
}
// ======================== Picker =========================
// Fix issue: https://github.com/ant-design/ant-design/issues/4783
.@{ant-prefix}-picker {
padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
&-large {
padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
}
&-small {
padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
}
}
// ===================== Status Group ======================
&.@{form-item-prefix-cls} {
&-has-success,
&-has-warning,
&-has-error,
&-is-validating {
// ====================== Icon ======================
.@{form-item-prefix-cls}-children-icon {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
width: @input-height-base;
height: 20px;
margin-top: -10px;
font-size: @font-size-base;
line-height: 20px;
text-align: center;
visibility: visible;
animation: zoomIn 0.3s @ease-out-back;
pointer-events: none;
}
}
}
}
// ======================== Success ========================
&-has-success {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @success-color;
animation-name: diffZoomIn1 !important;
}
}
// ======================== Warning ========================
&-has-warning {
.form-control-validation(@warning-color; @warning-color; @form-warning-input-bg; @warning-color-hover; @warning-color-outline);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @warning-color;
animation-name: diffZoomIn3 !important;
}
// Select
.@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector {
background-color: @form-warning-input-bg;
border-color: @warning-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@warning-color, @warning-color-hover, @warning-color-outline);
}
}
// InputNumber, TimePicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
background-color: @form-warning-input-bg;
border-color: @warning-color;
&-focused,
&:focus {
.active(@warning-color, @warning-color-hover, @warning-color-outline);
}
&:not([disabled]):hover {
background-color: @form-warning-input-bg;
border-color: @warning-color;
}
}
.@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
.active(@warning-color, @warning-color-hover, @warning-color-outline);
}
}
// ========================= Error =========================
&-has-error {
.form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline);
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
color: @error-color;
animation-name: diffZoomIn2 !important;
}
// Select
.@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector {
background-color: @form-error-input-bg;
border-color: @error-color !important;
}
&.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
&.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
.active(@error-color, @error-color-hover, @error-color-outline);
}
}
// fixes https://github.com/ant-design/ant-design/issues/20482
.@{ant-prefix}-input-group-addon,
.@{ant-prefix}-input-number-group-addon {
.@{ant-prefix}-select {
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
background-color: inherit;
border: 0;
box-shadow: none;
}
}
}
.@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
.@{ant-prefix}-input:focus {
border-color: @error-color;
}
}
// InputNumber, TimePicker
.@{ant-prefix}-input-number,
.@{ant-prefix}-picker {
background-color: @form-error-input-bg;
border-color: @error-color;
&-focused,
&:focus {
.active(@error-color, @error-color-hover, @error-color-outline);
}
&:not([disabled]):hover {
background-color: @form-error-input-bg;
border-color: @error-color;
}
}
.@{ant-prefix}-mention-wrapper {
.@{ant-prefix}-mention-editor {
&,
&:not([disabled]):hover {
background-color: @form-error-input-bg;
border-color: @error-color;
}
}
&.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
.@{ant-prefix}-mention-editor:not([disabled]):focus {
.active(@error-color, @error-color-hover, @error-color-outline);
}
}
// Cascader
.@{ant-prefix}-cascader-picker {
&:hover
.@{ant-prefix}-cascader-picker-label:hover
+ .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
border-color: @error-color;
}
&:focus .@{ant-prefix}-cascader-input {
background-color: @form-error-input-bg;
.active(@error-color, @error-color-hover, @error-color-outline);
}
}
// Transfer
.@{ant-prefix}-transfer {
&-list {
border-color: @error-color;
&-search:not([disabled]) {
border-color: @input-border-color;
&:hover {
.hover();
}
&:focus {
.active();
}
}
}
}
// Radio.Group
.@{ant-prefix}-radio-button-wrapper {
border-color: @error-color !important;
&:not(:first-child) {
&::before {
background-color: @error-color;
}
}
}
// Mentions
.@{ant-prefix}-mentions {
border-color: @error-color !important;
&-focused,
&:focus {
.active(@error-color, @error-color-hover, @error-color-outline);
}
}
}
// ====================== Validating =======================
&-is-validating {
&.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
display: inline-block;
color: @primary-color;
}
}
}

View File

@ -0,0 +1,87 @@
@import (reference) '../../style/themes/index';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
// ================== Label ==================
.make-vertical-layout-label() {
& when (@form-vertical-label-margin > 0) {
margin: @form-vertical-label-margin;
}
padding: @form-vertical-label-padding;
line-height: @line-height-base;
white-space: initial;
text-align: left;
> label {
margin: 0;
&::after {
display: none;
}
}
}
.make-vertical-layout() {
.@{form-prefix-cls}-item .@{form-prefix-cls}-item-label {
.make-vertical-layout-label();
}
.@{form-prefix-cls} {
.@{form-prefix-cls}-item {
flex-wrap: wrap;
.@{form-prefix-cls}-item-label,
.@{form-prefix-cls}-item-control {
flex: 0 0 100%;
max-width: 100%;
}
}
}
}
.@{form-prefix-cls}-vertical {
.@{form-item-prefix-cls} {
flex-direction: column;
&-label > label {
height: auto;
}
}
}
.@{form-prefix-cls}-vertical .@{form-item-prefix-cls}-label,
/* when labelCol is 24, it is a vertical form */
.@{ant-prefix}-col-24.@{form-item-prefix-cls}-label,
.@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
@media (max-width: @screen-xs-max) {
.make-vertical-layout();
.@{ant-prefix}-col-xs-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
}
@media (max-width: @screen-sm-max) {
.@{ant-prefix}-col-sm-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
}
@media (max-width: @screen-md-max) {
.@{ant-prefix}-col-md-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
}
@media (max-width: @screen-lg-max) {
.@{ant-prefix}-col-lg-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
}
@media (max-width: @screen-xl-max) {
.@{ant-prefix}-col-xl-24.@{form-item-prefix-cls}-label {
.make-vertical-layout-label();
}
}

View File

@ -0,0 +1,118 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
// Grid system
.@{ant-prefix}-row {
display: flex;
flex-flow: row wrap;
&::before,
&::after {
display: flex;
}
// No wrap of flex
&-no-wrap {
flex-wrap: nowrap;
}
}
// x轴原点
.@{ant-prefix}-row-start {
justify-content: flex-start;
}
// x轴居中
.@{ant-prefix}-row-center {
justify-content: center;
}
// x轴反方向
.@{ant-prefix}-row-end {
justify-content: flex-end;
}
// x轴平分
.@{ant-prefix}-row-space-between {
justify-content: space-between;
}
// x轴有间隔地平分
.@{ant-prefix}-row-space-around {
justify-content: space-around;
}
// 顶部对齐
.@{ant-prefix}-row-top {
align-items: flex-start;
}
// 居中对齐
.@{ant-prefix}-row-middle {
align-items: center;
}
// 底部对齐
.@{ant-prefix}-row-bottom {
align-items: flex-end;
}
.@{ant-prefix}-col {
position: relative;
max-width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
}
.make-grid();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(-xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(-sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(-md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(-lg);
}
// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.
@media (min-width: @screen-xl-min) {
.make-grid(-xl);
}
// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.
@media (min-width: @screen-xxl-min) {
.make-grid(-xxl);
}
@import './rtl';

View File

@ -0,0 +1,53 @@
@import '../../style/mixins/index';
// mixins for grid system
// ------------------------
.loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-@{index} {
display: block;
flex: 0 0 percentage((@index / @grid-columns));
max-width: percentage((@index / @grid-columns));
}
.@{ant-prefix}-col@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
.@{ant-prefix}-col@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
.@{ant-prefix}-col@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
.@{ant-prefix}-col@{class}-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1), @class);
}
.loop-grid-columns(@index, @class) when (@index = 0) {
.@{ant-prefix}-col@{class}-@{index} {
display: none;
}
.@{ant-prefix}-col-push-@{index} {
left: auto;
}
.@{ant-prefix}-col-pull-@{index} {
right: auto;
}
.@{ant-prefix}-col@{class}-push-@{index} {
left: auto;
}
.@{ant-prefix}-col@{class}-pull-@{index} {
right: auto;
}
.@{ant-prefix}-col@{class}-offset-@{index} {
margin-left: 0;
}
.@{ant-prefix}-col@{class}-order-@{index} {
order: 0;
}
}
.make-grid(@class: ~'') {
.loop-grid-columns(@grid-columns, @class);
}

View File

@ -0,0 +1,68 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
.@{ant-prefix}-row {
&-rtl {
direction: rtl;
}
}
// mixin
.loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-push-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: percentage((@index / @grid-columns));
left: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
left: percentage((@index / @grid-columns));
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
margin-right: percentage((@index / @grid-columns));
margin-left: 0;
}
}
}
.loop-grid-columns(@index, @class) when (@index = 0) {
.@{ant-prefix}-col-push-@{index} {
// reset property in RTL direction
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col-pull-@{index} {
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-push-@{index} {
&.@{ant-prefix}-col-rtl {
right: auto;
}
}
.@{ant-prefix}-col@{class}-pull-@{index} {
&.@{ant-prefix}-col-rtl {
left: auto;
}
}
.@{ant-prefix}-col@{class}-offset-@{index} {
&.@{ant-prefix}-col-rtl {
margin-right: 0;
}
}
}

View File

@ -0,0 +1,181 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@image-prefix-cls: ~'@{ant-prefix}-image';
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
.@{image-prefix-cls} {
position: relative;
display: inline-block;
&-img {
display: block;
width: 100%;
height: auto;
&-placeholder {
background-color: @image-bg;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
}
}
&-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: @text-color-inverse;
background: fade(@black, 50%);
cursor: pointer;
opacity: 0;
transition: opacity @animation-duration-slow;
&-info {
padding: 0 @padding-xss;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.@{iconfont-css-prefix} {
margin-inline-end: @margin-xss;
}
}
&:hover {
opacity: 1;
}
}
&-placeholder {
.box();
}
&-preview {
.modal-mask();
height: 100%;
text-align: center;
&-body {
.box();
overflow: hidden;
}
&-img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
transform: scale3d(1, 1, 1);
cursor: grab;
transition: transform 0.3s @ease-out 0s;
user-select: none;
pointer-events: auto;
&-wrapper {
.box();
transition: transform 0.3s @ease-out 0s;
&::before {
display: inline-block;
width: 1px;
height: 50%;
margin-right: -1px;
content: '';
}
}
}
&-moving {
.@{image-prefix-cls}-preview-img {
cursor: grabbing;
&-wrapper {
transition-duration: 0s;
}
}
}
&-wrap {
z-index: @zindex-image;
}
&-operations {
.reset-component();
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: flex;
flex-direction: row-reverse;
align-items: center;
width: 100%;
color: @image-preview-operation-color;
list-style: none;
background: fade(@modal-mask-bg, 10%);
pointer-events: auto;
&-operation {
margin-left: @control-padding-horizontal;
padding: @control-padding-horizontal;
cursor: pointer;
&-disabled {
color: @image-preview-operation-disabled-color;
pointer-events: none;
}
&:last-of-type {
margin-left: 0;
}
}
&-icon {
font-size: @image-preview-operation-size;
}
}
&-switch-left,
&-switch-right {
position: absolute;
top: 50%;
right: 10px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-top: -22px;
color: @image-preview-operation-color;
background: fade(@modal-mask-bg, 10%);
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
&-disabled {
color: @image-preview-operation-disabled-color;
cursor: not-allowed;
> .@{iconfont-css-prefix} {
cursor: not-allowed;
}
}
> .@{iconfont-css-prefix} {
font-size: 18px;
}
}
&-switch-left {
left: 10px;
}
&-switch-right {
right: 10px;
}
}
}

View File

@ -0,0 +1,233 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
.@{input-number-prefix-cls} {
.reset-component();
.input();
//== Style for input-group: input with label, with button or dropdown...
&-group {
.reset-component();
.input-group(~'@{input-number-prefix-cls}');
&-wrapper {
display: inline-block;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
}
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
&-handler {
position: relative;
display: block;
width: 100%;
height: 50%;
overflow: hidden;
color: @text-color-secondary;
font-weight: bold;
line-height: 0;
text-align: center;
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
transition: all 0.1s linear;
&:active {
background: @input-number-handler-active-bg;
}
&:hover &-up-inner,
&:hover &-down-inner {
color: @input-number-handler-hover-bg;
}
}
&-handler-up-inner,
&-handler-down-inner {
.iconfont-mixin();
position: absolute;
right: 4px;
width: 12px;
height: 12px;
color: @text-color-secondary;
line-height: 12px;
transition: all 0.1s linear;
user-select: none;
}
&:hover {
.hover(@input-number-hover-border-color);
& + .@{form-item-prefix-cls}-children-icon {
opacity: 0;
transition: opacity 0.24s linear 0.24s;
}
}
&-focused {
.active();
}
&-disabled {
.disabled();
.@{input-number-prefix-cls}-input {
cursor: not-allowed;
}
.@{input-number-prefix-cls}-handler-wrap {
display: none;
}
}
&-readonly {
.@{input-number-prefix-cls}-handler-wrap {
display: none;
}
}
&-input {
width: 100%;
height: @input-height-base - 2px;
padding: 0 @control-padding-horizontal - 1px;
text-align: left;
background-color: transparent;
border: 0;
border-radius: @border-radius-base;
outline: 0;
transition: all 0.3s linear;
appearance: textfield !important;
.placeholder();
&[type='number']::-webkit-inner-spin-button,
&[type='number']::-webkit-outer-spin-button {
margin: 0;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-appearance: none;
appearance: none;
}
}
&-lg {
padding: 0;
font-size: @font-size-lg;
input {
height: @input-height-lg - 2px;
}
}
&-sm {
padding: 0;
input {
height: @input-height-sm - 2px;
padding: 0 @control-padding-horizontal-sm - 1px;
}
}
&-handler-wrap {
position: absolute;
top: 0;
right: 0;
width: 22px;
height: 100%;
background: @input-number-handler-bg;
border-radius: 0 @border-radius-base @border-radius-base 0;
opacity: 0;
transition: opacity 0.24s linear 0.1s;
// Fix input number inside Menu makes icon too large
// We arise the selector priority by nest selector here
// https://github.com/ant-design/ant-design/issues/14367
.@{input-number-prefix-cls}-handler {
.@{input-number-prefix-cls}-handler-up-inner,
.@{input-number-prefix-cls}-handler-down-inner {
display: flex;
align-items: center;
justify-content: center;
min-width: auto;
margin-right: 0;
font-size: 7px;
}
}
.@{input-number-prefix-cls}-borderless & {
border-left-width: 0;
}
}
&-handler-wrap:hover &-handler {
height: 40%;
}
&:hover &-handler-wrap,
&-focused &-handler-wrap {
opacity: 1;
}
&-handler-up {
border-top-right-radius: @border-radius-base;
cursor: pointer;
&-inner {
top: 50%;
margin-top: -5px;
text-align: center;
}
&:hover {
height: 60% !important;
}
}
&-handler-down {
top: 0;
border-top: @border-width-base @border-style-base @border-color-base;
border-bottom-right-radius: @border-radius-base;
cursor: pointer;
&-inner {
top: 50%;
text-align: center;
transform: translateY(-50%);
}
&:hover {
height: 60% !important;
}
.@{input-number-prefix-cls}-borderless & {
border-top-width: 0;
}
}
&-handler-up-disabled,
&-handler-down-disabled {
cursor: not-allowed;
}
&-handler-up-disabled:hover &-handler-up-inner,
&-handler-down-disabled:hover &-handler-down-inner {
color: @disabled-color;
}
&-borderless {
box-shadow: none;
}
// ===================== Out Of Range =====================
&-out-of-range {
input {
color: @error-color;
}
}
}
@import './rtl';

View File

@ -0,0 +1,48 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
.@{input-number-prefix-cls} {
&-rtl {
direction: rtl;
}
&-handler {
.@{input-number-prefix-cls}-rtl & {
border-right: @border-width-base @border-style-base @input-number-handler-border-color;
border-left: 0;
}
&-wrap {
.@{input-number-prefix-cls}-rtl & {
right: auto;
left: 0;
}
.@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
border-right-width: 0;
}
}
&-up {
.@{input-number-prefix-cls}-rtl & {
border-top-right-radius: 0;
}
}
&-down {
.@{input-number-prefix-cls}-rtl & {
border-bottom-right-radius: 0;
}
}
}
&-input {
.@{input-number-prefix-cls}-rtl & {
direction: ltr;
text-align: right;
}
}
}

View File

@ -0,0 +1,20 @@
// Fix Input component height issue in IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.@{ant-prefix}-input {
height: @input-height-base;
&-lg {
height: @input-height-lg;
}
&-sm {
height: @input-height-sm;
}
&-affix-wrapper {
> input.@{ant-prefix}-input {
height: auto;
}
}
}
}

View File

@ -0,0 +1,62 @@
@import './mixin';
@import (reference) '../../style/themes/index';
@input-prefix-cls: ~'@{ant-prefix}-input';
@input-affix-margin: 4px;
.@{ant-prefix}-input {
&-affix-wrapper {
.input();
display: inline-flex;
&:not(&-disabled):hover {
.hover();
z-index: 1;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
}
&-focused,
&:focus {
z-index: 1;
}
&-disabled {
.@{ant-prefix}-input[disabled] {
background: transparent;
}
}
> input.@{ant-prefix}-input {
padding: 0;
border: none;
outline: none;
&:focus {
box-shadow: none !important;
}
}
&::before {
width: 0;
visibility: hidden;
content: '\a0';
}
}
&-prefix,
&-suffix {
display: flex;
flex: none;
align-items: center;
}
&-prefix {
margin-right: @input-affix-margin;
}
&-suffix {
margin-left: @input-affix-margin;
}
}

View File

@ -0,0 +1,43 @@
@import (reference) '../../style/themes/index';
@input-prefix-cls: ~'@{ant-prefix}-input';
// ========================= Input =========================
.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon {
margin: 0;
color: @disabled-color;
font-size: @font-size-sm;
vertical-align: -1px;
// https://github.com/ant-design/ant-design/pull/18151
// https://codesandbox.io/s/wizardly-sun-u10br
cursor: pointer;
transition: color 0.3s;
&:hover {
color: @text-color-secondary;
}
&:active {
color: @text-color;
}
&-hidden {
visibility: hidden;
}
&-has-suffix {
margin: 0 @input-affix-margin;
}
}
// ======================= TextArea ========================
.@{ant-prefix}-input-affix-wrapper-textarea-with-clear-btn {
padding: 0 !important;
border: 0 !important;
.@{ant-prefix}-input-clear-icon {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
}

View File

@ -0,0 +1,63 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@import './affix';
@import './allow-clear';
@input-prefix-cls: ~'@{ant-prefix}-input';
// Input styles
.@{input-prefix-cls} {
.reset-component();
.input();
//== Style for input-group: input with label, with button or dropdown...
&-group {
.reset-component();
.input-group(~'@{input-prefix-cls}');
&-wrapper {
display: inline-block;
width: 100%;
text-align: start;
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
}
}
&-password-icon {
color: @text-color-secondary;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: @input-icon-hover-color;
}
}
&[type='color'] {
height: @input-height-base;
&.@{input-prefix-cls}-lg {
height: @input-height-lg;
}
&.@{input-prefix-cls}-sm {
height: @input-height-sm;
padding-top: 3px;
padding-bottom: 3px;
}
}
&-textarea {
&-show-count::after {
float: right;
color: @text-color-secondary;
white-space: nowrap;
content: attr(data-count);
pointer-events: none;
}
}
}
@import './search-input';
@import './rtl';
@import './IE11';

View File

@ -0,0 +1,424 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@input-affix-with-clear-btn-width: 38px;
// size mixins for input
.input-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;
}
// input status
// == when focus or active
.active(@borderColor: @primary-color; @hoverBorderColor: @primary-color-hover; @outlineColor: @primary-color-outline) {
& when (@theme = dark) {
border-color: @borderColor;
}
& when (not (@theme = dark) and not (@theme = variable)) {
border-color: @hoverBorderColor;
}
& when not (@theme = variable) {
box-shadow: @input-outline-offset @outline-blur-size @outline-width
fade(@borderColor, @outline-fade);
}
& when (@theme = variable) {
border-color: @hoverBorderColor;
box-shadow: @input-outline-offset @outline-blur-size @outline-width @outlineColor;
}
border-right-width: @border-width-base !important;
outline: 0;
}
// == when hover
.hover(@color: @input-hover-border-color) {
border-color: @color;
border-right-width: @border-width-base !important;
}
.disabled() {
color: @input-disabled-color;
background-color: @input-disabled-bg;
border-color: @input-border-color;
box-shadow: none;
cursor: not-allowed;
opacity: 1;
&:hover {
.hover(@input-border-color);
}
}
// Basic style for input
.input() {
position: relative;
display: inline-block;
width: 100%;
min-width: 0;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
color: @input-color;
font-size: @font-size-base;
line-height: @line-height-base;
background-color: @input-bg;
background-image: none;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
transition: all 0.3s;
.placeholder(); // Reset placeholder
&:hover {
.hover();
}
&:focus,
&-focused {
.active();
}
&-disabled {
.disabled();
}
&[disabled] {
.disabled();
}
&-borderless {
&,
&:hover,
&:focus,
&-focused,
&-disabled,
&[disabled] {
background-color: transparent;
border: none;
box-shadow: none;
}
}
// Reset height for `textarea`s
textarea& {
max-width: 100%; // prevent textearea resize from coming out of its container
height: auto;
min-height: @input-height-base;
line-height: @line-height-base;
vertical-align: bottom;
transition: all 0.3s, height 0s;
}
// Size
&-lg {
.input-lg();
}
&-sm {
.input-sm();
}
}
// label input
.input-group(@inputClass) {
position: relative;
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
// Undo padding and float of grid classes
&[class*='col-'] {
float: none;
padding-right: 0;
padding-left: 0;
}
> [class*='col-'] {
padding-right: 8px;
&:last-child {
padding-right: 0;
}
}
&-addon,
&-wrap,
> .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
&-addon,
&-wrap {
width: 1px; // To make addon/wrap as small as possible
white-space: nowrap;
vertical-align: middle;
}
&-wrap > * {
display: block !important;
}
.@{inputClass} {
float: left;
width: 100%;
margin-bottom: 0;
text-align: inherit;
&:focus {
z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
border-right-width: 1px;
}
&:hover {
z-index: 1;
border-right-width: 1px;
.@{ant-prefix}-input-search-with-button & {
z-index: 0;
}
}
}
&-addon {
position: relative;
padding: 0 @input-padding-horizontal-base;
color: @input-color;
font-weight: normal;
font-size: @font-size-base;
text-align: center;
background-color: @input-addon-bg;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
transition: all 0.3s;
// Reset Select's style in addon
.@{ant-prefix}-select {
margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
&.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
.@{ant-prefix}-select-selector {
background-color: inherit;
border: @border-width-base @border-style-base transparent;
box-shadow: none;
}
&-open,
&-focused {
.@{ant-prefix}-select-selector {
color: @primary-color;
}
}
}
// https://github.com/ant-design/ant-design/issues/31333
.@{ant-prefix}-cascader-picker {
margin: -9px (-@control-padding-horizontal);
background-color: transparent;
.@{ant-prefix}-cascader-input {
text-align: left;
border: 0;
box-shadow: none;
}
}
}
// Reset rounded corners
> .@{inputClass}:first-child,
&-addon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
// Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selector {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
> .@{inputClass}-affix-wrapper {
&:not(:first-child) .@{inputClass} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) .@{inputClass} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&-addon:first-child {
border-right: 0;
}
&-addon:last-child {
border-left: 0;
}
> .@{inputClass}:last-child,
&-addon:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
// Reset Select's style in addon
.@{ant-prefix}-select .@{ant-prefix}-select-selector {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
// Sizing options
&-lg .@{inputClass},
&-lg > &-addon {
.input-lg();
}
&-sm .@{inputClass},
&-sm > &-addon {
.input-sm();
}
// Fix https://github.com/ant-design/ant-design/issues/5754
&-lg .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-lg;
}
&-sm .@{ant-prefix}-select-single .@{ant-prefix}-select-selector {
height: @input-height-sm;
}
.@{inputClass}-affix-wrapper {
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.@{ant-prefix}-input-search & {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
}
&:not(:first-child),
.@{ant-prefix}-input-search &:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&&-compact {
display: block;
.clearfix();
&-addon,
&-wrap,
> .@{inputClass} {
&:not(:first-child):not(:last-child) {
border-right-width: @border-width-base;
&:hover {
z-index: 1;
}
&:focus {
z-index: 1;
}
}
}
& > * {
display: inline-block;
float: none;
vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
border-radius: 0;
}
& > .@{inputClass}-affix-wrapper {
display: inline-flex;
}
& > .@{ant-prefix}-picker-range {
display: inline-flex;
}
& > *:not(:last-child) {
margin-right: -@border-width-base;
border-right-width: @border-width-base;
}
// Undo float for .ant-input-group .ant-input
.@{inputClass} {
float: none;
}
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
& > .@{ant-prefix}-select > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
& > .@{ant-prefix}-input-group-wrapper .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-radius: 0;
&:hover {
z-index: 1;
}
&:focus {
z-index: 1;
}
}
& > .@{ant-prefix}-select-focused {
z-index: 1;
}
// update z-index for arrow icon
& > .@{ant-prefix}-select > .@{ant-prefix}-select-arrow {
z-index: 1; // https://github.com/ant-design/ant-design/issues/20371
}
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
border-right-width: @border-width-base;
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
}
// https://github.com/ant-design/ant-design/issues/12493
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
vertical-align: top;
}
.@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper {
margin-left: -1px;
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
}
.@{ant-prefix}-input-group-wrapper:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input-group-addon > .@{ant-prefix}-input-search-button {
border-radius: 0;
}
& > .@{ant-prefix}-input {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}
}

View File

@ -0,0 +1,206 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
&-wrapper {
&-rtl {
direction: rtl;
}
}
&-rtl {
direction: rtl;
}
}
// affix
@input-affix-margin: 4px;
.@{ant-prefix}-input {
&-affix-wrapper&-affix-wrapper-rtl {
> input.@{ant-prefix}-input {
border: none;
outline: none;
}
}
&-affix-wrapper-rtl {
.@{ant-prefix}-input-prefix {
margin: 0 0 0 @input-affix-margin;
}
.@{ant-prefix}-input-suffix {
margin: 0 @input-affix-margin 0 0;
}
}
&-textarea {
&-rtl {
direction: rtl;
}
&-rtl&-show-count::after {
text-align: left;
}
}
}
// allow-clear
.@{ant-prefix}-input-clear-icon {
&-has-suffix {
.@{ant-prefix}-input-affix-wrapper-rtl & {
margin-right: 0;
margin-left: @input-affix-margin;
}
}
.@{ant-prefix}-input-affix-wrapper-rtl & {
right: auto;
left: 8px;
}
}
// mixin
@input-rtl-cls: ~'@{ant-prefix}-input-rtl';
.active() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.hover() {
.@{input-rtl-cls} & {
border-right-width: 0;
border-left-width: @border-width-base !important;
}
}
.input() {
&-rtl {
direction: rtl;
}
}
// label input
.input-group(@inputClass) {
> .@{inputClass}-rtl:first-child,
&-rtl &-addon:first-child {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
&-addon:first-child {
.@{inputClass}-group-rtl & {
border-right: @border-width-base @border-style-base @input-border-color;
border-left: 0;
}
}
&-addon:last-child {
.@{inputClass}-group-rtl & {
border-right: 0;
border-left: @border-width-base @border-style-base @input-border-color;
}
}
> .@{inputClass}:last-child,
&-addon:last-child {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{inputClass}-affix-wrapper {
&:not(:first-child) {
.@{inputClass}-group-rtl& {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
&:not(:last-child) {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
&&-compact {
& > *:not(:last-child) {
.@{inputClass}-group-rtl& {
margin-right: 0;
margin-left: -@border-width-base;
border-left-width: @border-width-base;
}
}
& > *:first-child,
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
& > *:last-child,
& > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selector,
& > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
.@{inputClass}-group-rtl& {
border-left-width: @border-width-base;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
.@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
margin-right: -1px;
margin-left: 0;
}
.@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
& > .@{ant-prefix}-input {
border-radius: 0 @border-radius-base @border-radius-base 0;
}
}
}
}
}
// search-input
@search-prefix: ~'@{ant-prefix}-input-search';
@search-rtl-cls: ~'@{search-prefix}-rtl';
.@{search-prefix}-rtl {
direction: rtl;
.@{ant-prefix}-input {
&:hover,
&:focus {
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-right-color: @input-hover-border-color;
border-left-color: @border-color-base;
}
}
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-affix-wrapper {
&:hover,
&-focused {
border-right-color: @input-hover-border-color;
}
}
> .@{ant-prefix}-input-group-addon {
right: -1px;
left: auto;
.@{search-prefix}-button {
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}

View File

@ -0,0 +1,71 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';
@search-prefix: ~'@{ant-prefix}-input-search';
.@{search-prefix} {
.@{ant-prefix}-input {
&:hover,
&:focus {
border-color: @input-hover-border-color;
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
border-left-color: @input-hover-border-color;
}
}
}
.@{ant-prefix}-input-affix-wrapper {
border-radius: 0;
}
// fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
.@{ant-prefix}-input-lg {
line-height: @line-height-base - 0.0002;
}
> .@{ant-prefix}-input-group {
> .@{ant-prefix}-input-group-addon:last-child {
left: -1px;
padding: 0;
border: 0;
.@{search-prefix}-button {
padding-top: 0;
padding-bottom: 0;
border-radius: 0 @border-radius-base @border-radius-base 0;
}
.@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
color: @text-color-secondary;
&.@{ant-prefix}-btn-loading::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
}
}
&-button {
height: @input-height-base;
&:hover,
&:focus {
z-index: 1;
}
}
&-large &-button {
height: @input-height-lg;
}
&-small &-button {
height: @input-height-sm;
}
}

View File

@ -0,0 +1,145 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@layout-prefix-cls: ~'@{ant-prefix}-layout';
@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
.@{layout-prefix-cls} {
display: flex;
flex: auto;
flex-direction: column;
/* fix firefox can't set height smaller than content on flex item */
min-height: 0;
background: @layout-body-background;
&,
* {
box-sizing: border-box;
}
&&-has-sider {
flex-direction: row;
> .@{layout-prefix-cls},
> .@{layout-prefix-cls}-content {
width: 0; // https://segmentfault.com/a/1190000019498300
}
}
&-header,
&-footer {
flex: 0 0 auto;
}
&-header {
height: @layout-header-height;
padding: @layout-header-padding;
color: @layout-header-color;
line-height: @layout-header-height;
background: @layout-header-background;
}
&-footer {
padding: @layout-footer-padding;
color: @text-color;
font-size: @font-size-base;
background: @layout-footer-background;
}
&-content {
flex: auto;
/* fix firefox can't set height smaller than content on flex item */
min-height: 0;
}
&-sider {
position: relative;
/* 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;
.@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
width: auto;
}
}
&-has-trigger {
padding-bottom: @layout-trigger-height;
}
&-right {
order: 1;
}
&-trigger {
position: fixed;
bottom: 0;
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;
}
&-zero-width {
> * {
overflow: hidden;
}
&-trigger {
position: absolute;
top: @layout-header-height;
right: -@layout-zero-trigger-width;
z-index: 1;
width: @layout-zero-trigger-width;
height: @layout-zero-trigger-height;
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;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: all 0.3s;
content: '';
}
&:hover::after {
background: rgba(255, 255, 255, 0.1);
}
&-right {
left: -@layout-zero-trigger-width;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}
}
@import './light';
@import './rtl';

View File

@ -0,0 +1,11 @@
.@{layout-prefix-cls}-sider-light {
background: @layout-sider-background-light;
.@{layout-prefix-cls}-sider-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
.@{layout-prefix-cls}-sider-zero-width-trigger {
color: @layout-trigger-color-light;
background: @layout-trigger-background-light;
}
}

View File

@ -0,0 +1,10 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@layout-prefix-cls: ~'@{ant-prefix}-layout';
.@{layout-prefix-cls} {
&-rtl {
direction: rtl;
}
}

View File

@ -0,0 +1,44 @@
@import '../../style/themes/index';
.@{list-prefix-cls}-bordered {
border: 1px solid @border-color-base;
border-radius: @border-radius-base;
.@{list-prefix-cls}-header {
padding-right: @padding-lg;
padding-left: @padding-lg;
}
.@{list-prefix-cls}-footer {
padding-right: @padding-lg;
padding-left: @padding-lg;
}
.@{list-prefix-cls}-item {
padding-right: @padding-lg;
padding-left: @padding-lg;
}
.@{list-prefix-cls}-pagination {
margin: @margin-md @margin-lg;
}
&.@{list-prefix-cls}-sm {
.@{list-prefix-cls}-item {
padding: @list-item-padding-sm;
}
.@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer {
padding: @list-item-padding-sm;
}
}
&.@{list-prefix-cls}-lg {
.@{list-prefix-cls}-item {
padding: @list-item-padding-lg;
}
.@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer {
padding: @list-item-padding-lg;
}
}
}

View File

@ -0,0 +1,249 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './customize.less';
@list-prefix-cls: ~'@{ant-prefix}-list';
.@{list-prefix-cls} {
.reset-component();
position: relative;
* {
outline: none;
}
&-pagination {
margin-top: @margin-lg;
text-align: right;
// https://github.com/ant-design/ant-design/issues/20037
.@{ant-prefix}-pagination-options {
text-align: left;
}
}
&-more {
margin-top: @margin-sm;
text-align: center;
button {
padding-right: 32px;
padding-left: 32px;
}
}
&-spin {
min-height: 40px;
text-align: center;
}
&-empty-text {
padding: @list-empty-text-padding;
color: @disabled-color;
font-size: @font-size-base;
text-align: center;
}
&-items {
margin: 0;
padding: 0;
list-style: none;
}
&-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: @list-item-padding;
color: @text-color;
&-meta {
display: flex;
flex: 1;
align-items: flex-start;
max-width: 100%;
&-avatar {
margin-right: @list-item-meta-avatar-margin-right;
}
&-content {
flex: 1 0;
width: 0;
color: @text-color;
}
&-title {
margin-bottom: 4px;
color: @text-color;
font-size: @font-size-base;
line-height: @line-height-base;
> a {
color: @text-color;
transition: all 0.3s;
&:hover {
color: @primary-color;
}
}
}
&-description {
color: @text-color-secondary;
font-size: @list-item-meta-description-font-size;
line-height: @line-height-base;
}
}
&-action {
flex: 0 0 auto;
margin-left: 48px;
padding: 0;
font-size: 0;
list-style: none;
& > li {
position: relative;
display: inline-block;
padding: 0 @padding-xs;
color: @text-color-secondary;
font-size: @font-size-base;
line-height: @line-height-base;
text-align: center;
&:first-child {
padding-left: 0;
}
}
&-split {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
margin-top: -7px;
background-color: @border-color-split;
}
}
}
&-header {
background: @list-header-background;
}
&-footer {
background: @list-footer-background;
}
&-header,
&-footer {
padding-top: @padding-sm;
padding-bottom: @padding-sm;
}
&-empty {
padding: @padding-md 0;
color: @text-color-secondary;
font-size: 12px;
text-align: center;
}
&-split &-item {
border-bottom: 1px solid @border-color-split;
&:last-child {
border-bottom: none;
}
}
&-split &-header {
border-bottom: 1px solid @border-color-split;
}
&-split&-empty &-footer {
border-top: 1px solid @border-color-split;
}
&-loading &-spin-nested-loading {
min-height: 32px;
}
&-split&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
border-bottom: 1px solid @border-color-split;
}
&-lg &-item {
padding: @list-item-padding-lg;
}
&-sm &-item {
padding: @list-item-padding-sm;
}
&-vertical &-item {
align-items: initial;
&-main {
display: block;
flex: 1;
}
&-extra {
margin-left: 40px;
}
&-meta {
margin-bottom: @list-item-meta-margin-bottom;
&-title {
margin-bottom: @list-item-meta-title-margin-bottom;
color: @heading-color;
font-size: @font-size-lg;
line-height: 24px;
}
}
&-action {
margin-top: @padding-md;
margin-left: auto;
> li {
padding: 0 @padding-md;
&:first-child {
padding-left: 0;
}
}
}
}
&-grid .@{ant-prefix}-col > &-item {
display: block;
max-width: 100%;
margin-bottom: @margin-md;
padding-top: 0;
padding-bottom: 0;
border-bottom: none;
}
// ============================ without flex ============================
&-item-no-flex {
display: block;
}
// Horizontal
&:not(.@{list-prefix-cls}-vertical) {
.@{list-prefix-cls}-item-no-flex {
.@{list-prefix-cls}-item-action {
float: right;
}
}
}
}
@import './bordered';
@import './responsive';
@import './rtl';

View File

@ -0,0 +1,43 @@
@media screen and (max-width: @screen-md) {
.@{list-prefix-cls} {
&-item {
&-action {
margin-left: 24px;
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
&-extra {
margin-left: 24px;
}
}
}
}
@media screen and (max-width: @screen-sm) {
.@{list-prefix-cls} {
&-item {
flex-wrap: wrap;
&-action {
margin-left: 12px;
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
flex-wrap: wrap-reverse;
&-main {
min-width: 220px;
}
&-extra {
margin: auto auto 16px;
}
}
}
}

View File

@ -0,0 +1,139 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './customize.less';
@list-prefix-cls: ~'@{ant-prefix}-list';
.@{list-prefix-cls} {
&-rtl {
direction: rtl;
text-align: right;
// fix for virtual scroll style attribute > (direction:ltr)
.ReactVirtualized__List .@{list-prefix-cls}-item {
direction: rtl;
}
}
&-pagination {
.@{list-prefix-cls}-rtl & {
text-align: left;
}
}
&-item {
&-meta {
&-avatar {
.@{list-prefix-cls}-rtl & {
margin-right: 0;
margin-left: @list-item-meta-avatar-margin-right;
}
}
}
&-action {
.@{list-prefix-cls}-rtl & {
margin-right: 48px;
margin-left: 0;
}
& > li:first-child {
.@{list-prefix-cls}.@{list-prefix-cls}-rtl & {
padding-right: 0;
padding-left: @padding-md;
}
}
&-split {
.@{list-prefix-cls}-rtl & {
right: auto;
left: 0;
}
}
}
}
&-vertical &-item {
&-extra {
.@{list-prefix-cls}-rtl& {
margin-right: 40px;
margin-left: 0;
}
}
&-action {
.@{list-prefix-cls}-rtl& {
margin-right: auto;
}
> li {
&:first-child {
.@{list-prefix-cls}-rtl & {
padding-right: 0;
padding-left: @padding-md;
}
}
}
}
}
// Horizontal
&:not(.@{list-prefix-cls}-vertical) {
.@{list-prefix-cls}-item-no-flex {
.@{list-prefix-cls}-item-action {
.@{list-prefix-cls}-rtl & {
float: left;
}
}
}
}
}
// responsive
@media screen and (max-width: @screen-md) {
.@{list-prefix-cls} {
&-item {
&-action {
.@{list-prefix-cls}-rtl & {
margin-right: 24px;
margin-left: 0;
}
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
&-extra {
.@{list-prefix-cls}-rtl & {
margin-right: 24px;
margin-left: 0;
}
}
}
}
}
@media screen and (max-width: @screen-sm) {
.@{list-prefix-cls} {
&-item {
&-action {
.@{list-prefix-cls}-rtl & {
margin-right: 22px;
margin-left: 0;
}
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
&-extra {
// to override margins on rtl view
.@{list-prefix-cls}-rtl& {
margin: auto auto 16px;
}
}
}
}
}

View File

@ -0,0 +1,167 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@mention-prefix-cls: ~'@{ant-prefix}-mentions';
.@{mention-prefix-cls} {
.reset-component();
.input();
position: relative;
display: inline-block;
height: auto;
padding: 0;
overflow: hidden;
line-height: @line-height-base;
white-space: pre-wrap;
vertical-align: bottom;
// =================== Status ===================
&-disabled {
> textarea {
.disabled();
}
}
&-focused {
.active();
}
// ================= Input Area =================
> textarea,
&-measure {
min-height: @input-height-base - 2px;
margin: 0;
padding: @input-padding-vertical-base @input-padding-horizontal-base;
overflow: inherit;
overflow-x: hidden;
overflow-y: auto;
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
font-weight: inherit;
font-size: inherit;
font-family: inherit;
font-style: inherit;
font-variant: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
line-height: inherit;
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
direction: inherit;
letter-spacing: inherit;
white-space: inherit;
text-align: inherit;
vertical-align: top;
word-wrap: break-word;
word-break: inherit;
tab-size: inherit;
}
> textarea {
width: 100%;
border: none;
outline: none;
resize: none;
& when (@theme = dark) {
background-color: transparent;
}
.placeholder();
}
&-measure {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
color: transparent;
pointer-events: none;
> span {
display: inline-block;
min-height: 1em;
}
}
// ================== Dropdown ==================
&-dropdown {
// Ref select dropdown style
.reset-component();
position: absolute;
top: -9999px;
left: -9999px;
z-index: @zindex-dropdown;
box-sizing: border-box;
font-size: @font-size-base;
font-variant: initial;
background-color: @mentions-dropdown-bg;
border-radius: @border-radius-base;
outline: none;
box-shadow: @box-shadow-base;
&-hidden {
display: none;
}
&-menu {
max-height: 250px;
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
overflow: auto;
list-style: none;
outline: none;
&-item {
position: relative;
display: block;
min-width: 100px;
padding: 5px @control-padding-horizontal;
overflow: hidden;
color: @text-color;
font-weight: normal;
line-height: @line-height-base;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
transition: background 0.3s ease;
&:hover {
background-color: @item-hover-bg;
}
&:first-child {
border-radius: @border-radius-base @border-radius-base 0 0;
}
&:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
&-disabled {
color: @disabled-color;
cursor: not-allowed;
&:hover {
color: @disabled-color;
background-color: @mentions-dropdown-menu-item-hover-bg;
cursor: not-allowed;
}
}
&-selected {
color: @text-color;
font-weight: @select-item-selected-font-weight;
background-color: @background-color-light;
}
&-active {
background-color: @item-hover-bg;
}
}
}
}
}
@import './rtl';

View File

@ -0,0 +1,10 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@mention-prefix-cls: ~'@{ant-prefix}-mentions';
.@{mention-prefix-cls} {
&-rtl {
direction: rtl;
}
}

View File

@ -0,0 +1,162 @@
.@{menu-prefix-cls} {
// dark theme
&&-dark,
&-dark &-sub,
&&-dark &-sub {
color: @menu-dark-color;
background: @menu-dark-bg;
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
opacity: 0.45;
transition: all 0.3s;
&::after,
&::before {
background: @menu-dark-arrow-color;
}
}
}
&-dark&-submenu-popup {
background: transparent;
}
&-dark &-inline&-sub {
background: @menu-dark-inline-submenu-bg;
}
&-dark&-horizontal {
border-bottom: 0;
}
&-dark&-horizontal > &-item,
&-dark&-horizontal > &-submenu {
top: 0;
margin-top: 0;
padding: @menu-item-padding;
border-color: @menu-dark-bg;
border-bottom: 0;
}
&-dark&-horizontal > &-item:hover {
background-color: @menu-dark-item-active-bg;
}
&-dark&-horizontal > &-item > a::before {
bottom: 0;
}
&-dark &-item,
&-dark &-item-group-title,
&-dark &-item > a,
&-dark &-item > span > a {
color: @menu-dark-color;
}
&-dark&-inline,
&-dark&-vertical,
&-dark&-vertical-left,
&-dark&-vertical-right {
border-right: 0;
}
&-dark&-inline &-item,
&-dark&-vertical &-item,
&-dark&-vertical-left &-item,
&-dark&-vertical-right &-item {
left: 0;
margin-left: 0;
border-right: 0;
&::after {
border-right: 0;
}
}
&-dark&-inline &-item,
&-dark&-inline &-submenu-title {
width: 100%;
}
&-dark &-item:hover,
&-dark &-item-active,
&-dark &-submenu-active,
&-dark &-submenu-open,
&-dark &-submenu-selected,
&-dark &-submenu-title:hover {
color: @menu-dark-highlight-color;
background-color: transparent;
> a,
> span > a {
color: @menu-dark-highlight-color;
}
> .@{menu-prefix-cls}-submenu-title {
> .@{menu-prefix-cls}-submenu-arrow {
opacity: 1;
&::after,
&::before {
background: @menu-dark-highlight-color;
}
}
}
}
&-dark &-item:hover {
background-color: @menu-dark-item-hover-bg;
}
&-dark&-dark:not(&-horizontal) &-item-selected {
background-color: @menu-dark-item-active-bg;
}
&-dark &-item-selected {
color: @menu-dark-highlight-color;
border-right: 0;
&::after {
border-right: 0;
}
> a,
> span > a,
> a:hover,
> span > a:hover {
color: @menu-dark-highlight-color;
}
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
color: @menu-dark-selected-item-icon-color;
+ span {
color: @menu-dark-selected-item-text-color;
}
}
}
&&-dark &-item-selected,
&-submenu-popup&-dark &-item-selected {
background-color: @menu-dark-item-active-bg;
}
// Disabled state sets text to dark gray and nukes hover/tab effects
&-dark &-item-disabled,
&-dark &-submenu-disabled {
&,
> a,
> span > a {
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 {
background: @disabled-color-dark !important;
}
}
}
}
}

View File

@ -0,0 +1,700 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './status';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
@menu-animation-duration-normal: 0.15s;
.accessibility-focus() {
box-shadow: 0 0 0 2px @primary-1;
}
// TODO: Should remove icon style compatible in v5
// default theme
.@{menu-prefix-cls} {
.reset-component();
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
color: @menu-item-color;
font-size: @menu-item-font-size;
line-height: 0; // Fix display inline-block gap
text-align: left;
list-style: none;
background: @menu-bg;
outline: none;
box-shadow: @box-shadow-base;
transition: background @animation-duration-slow,
width @animation-duration-slow cubic-bezier(0.2, 0, 0, 1) 0s;
.clearfix();
&&-root:focus-visible {
.accessibility-focus();
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
// Overflow ellipsis
&-overflow {
display: flex;
&-item {
flex: none;
}
}
&-hidden,
&-submenu-hidden {
display: none;
}
&-item-group-title {
height: @menu-item-group-height;
padding: 8px 16px;
color: @menu-item-group-title-color;
font-size: @menu-item-group-title-font-size;
line-height: @menu-item-group-height;
transition: all @animation-duration-slow;
}
&-horizontal &-submenu {
transition: border-color @animation-duration-slow @ease-in-out,
background @animation-duration-slow @ease-in-out;
}
&-submenu,
&-submenu-inline {
transition: border-color @animation-duration-slow @ease-in-out,
background @animation-duration-slow @ease-in-out,
padding @menu-animation-duration-normal @ease-in-out;
}
&-submenu-selected {
color: @menu-highlight-color;
}
&-item:active,
&-submenu-title:active {
background: @menu-item-active-bg;
}
&-submenu &-sub {
cursor: initial;
transition: background @animation-duration-slow @ease-in-out,
padding @animation-duration-slow @ease-in-out;
}
&-title-content {
transition: color @animation-duration-slow;
}
&-item a {
color: @menu-item-color;
&:hover {
color: @menu-highlight-color;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
content: '';
}
}
// https://github.com/ant-design/ant-design/issues/19809
&-item > .@{ant-prefix}-badge a {
color: @menu-item-color;
&:hover {
color: @menu-highlight-color;
}
}
&-item-divider {
overflow: hidden;
line-height: 0;
border-color: @border-color-split;
border-style: solid;
border-width: 1px 0 0;
}
&-item-divider-dashed {
border-style: dashed;
}
&-horizontal &-item,
&-horizontal &-submenu {
margin-top: -1px;
}
&-horizontal > &-item:hover,
&-horizontal > &-item-active,
&-horizontal > &-submenu &-submenu-title:hover {
background-color: transparent;
}
&-item-selected {
color: @menu-highlight-color;
a,
a:hover {
color: @menu-highlight-color;
}
}
&:not(&-horizontal) &-item-selected {
background-color: @menu-item-active-bg;
}
&-inline,
&-vertical,
&-vertical-left {
border-right: @border-width-base @border-style-base @border-color-split;
}
&-vertical-right {
border-left: @border-width-base @border-style-base @border-color-split;
}
&-vertical&-sub,
&-vertical-left&-sub,
&-vertical-right&-sub {
min-width: 160px;
max-height: calc(100vh - 100px);
padding: 0;
overflow: hidden;
border-right: 0;
// https://github.com/ant-design/ant-design/issues/22244
// https://github.com/ant-design/ant-design/issues/26812
&:not([class*='-active']) {
overflow-x: hidden;
overflow-y: auto;
}
.@{menu-prefix-cls}-item {
left: 0;
margin-left: 0;
border-right: 0;
&::after {
border-right: 0;
}
}
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
transform-origin: 0 0;
}
}
&-horizontal&-sub {
min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
}
&-horizontal &-item,
&-horizontal &-submenu-title {
transition: border-color @animation-duration-slow, background @animation-duration-slow;
}
&-item,
&-submenu-title {
position: relative;
display: block;
margin: 0;
padding: @menu-item-padding;
white-space: nowrap;
cursor: pointer;
transition: border-color @animation-duration-slow, background @animation-duration-slow,
padding @animation-duration-slow @ease-in-out;
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
min-width: 14px;
font-size: @menu-icon-size;
transition: font-size @menu-animation-duration-normal @ease-out,
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+ span {
margin-left: @menu-icon-margin-right;
opacity: 1;
transition: opacity @animation-duration-slow @ease-in-out, margin @animation-duration-slow,
color @animation-duration-slow;
}
}
.@{menu-prefix-cls}-item-icon.svg {
vertical-align: -0.125em;
}
&.@{menu-prefix-cls}-item-only-child {
> .@{iconfont-css-prefix},
> .@{menu-prefix-cls}-item-icon {
margin-right: 0;
}
}
&:focus-visible {
.accessibility-focus();
}
}
& > &-item-divider {
margin: 1px 0;
padding: 0;
}
&-submenu {
&-popup {
position: absolute;
z-index: @zindex-dropdown;
background: transparent;
border-radius: @border-radius-base;
box-shadow: none;
transform-origin: 0 0;
// https://github.com/ant-design/ant-design/issues/13955
&::before {
position: absolute;
top: -7px;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0.0001;
content: ' ';
}
}
// https://github.com/ant-design/ant-design/issues/13955
&-placement-rightTop::before {
top: 0;
left: -7px;
}
> .@{menu-prefix-cls} {
background-color: @menu-bg;
border-radius: @border-radius-base;
&-submenu-title::after {
transition: transform @animation-duration-slow @ease-in-out;
}
}
&-popup > .@{menu-prefix-cls} {
background-color: @menu-popup-bg;
}
&-expand-icon,
&-arrow {
position: absolute;
top: 50%;
right: 16px;
width: 10px;
color: @menu-item-color;
transform: translateY(-50%);
transition: transform @animation-duration-slow @ease-in-out;
}
&-arrow {
// →
&::before,
&::after {
position: absolute;
width: 6px;
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: background @animation-duration-slow @ease-in-out,
transform @animation-duration-slow @ease-in-out, top @animation-duration-slow @ease-in-out,
color @animation-duration-slow @ease-in-out;
content: '';
}
&::before {
transform: rotate(45deg) translateY(-2.5px);
}
&::after {
transform: rotate(-45deg) translateY(2.5px);
}
}
&:hover > &-title > &-expand-icon,
&:hover > &-title > &-arrow {
color: @menu-highlight-color;
}
.@{menu-prefix-cls}-inline-collapsed &-arrow,
&-inline &-arrow {
// ↓
&::before {
transform: rotate(-45deg) translateX(2.5px);
}
&::after {
transform: rotate(45deg) translateX(-2.5px);
}
}
&-horizontal &-arrow {
display: none;
}
&-open&-inline > &-title > &-arrow {
// ↑
transform: translateY(-2px);
&::after {
transform: rotate(-45deg) translateX(-2.5px);
}
&::before {
transform: rotate(45deg) translateX(2.5px);
}
}
}
&-vertical &-submenu-selected,
&-vertical-left &-submenu-selected,
&-vertical-right &-submenu-selected {
color: @menu-highlight-color;
}
&-horizontal {
line-height: @menu-horizontal-line-height;
border: 0;
border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none;
&:not(.@{menu-prefix-cls}-dark) {
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
margin-top: -1px;
margin-bottom: 0;
padding: @menu-item-padding;
&:hover,
&-active,
&-open,
&-selected {
color: @menu-highlight-color;
&::after {
border-bottom: 2px solid @menu-highlight-color;
}
}
}
}
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
position: relative;
top: 1px;
display: inline-block;
vertical-align: bottom;
&::after {
position: absolute;
right: @menu-item-padding-horizontal;
bottom: 0;
left: @menu-item-padding-horizontal;
border-bottom: 2px solid transparent;
transition: border-color @animation-duration-slow @ease-in-out;
content: '';
}
}
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
padding: 0;
}
> .@{menu-prefix-cls}-item {
a {
color: @menu-item-color;
&:hover {
color: @menu-highlight-color;
}
&::before {
bottom: -2px;
}
}
&-selected a {
color: @menu-highlight-color;
}
}
&::after {
display: block;
clear: both;
height: 0;
content: '\20';
}
}
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
.@{menu-prefix-cls}-item {
position: relative;
&::after {
position: absolute;
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 @menu-animation-duration-normal @ease-out,
opacity @menu-animation-duration-normal @ease-out;
content: '';
}
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
height: @menu-item-height;
margin-top: @menu-item-vertical-margin;
margin-bottom: @menu-item-vertical-margin;
padding: 0 16px;
overflow: hidden;
line-height: @menu-item-height;
text-overflow: ellipsis;
}
// disable margin collapsed
.@{menu-prefix-cls}-submenu {
padding-bottom: 0.02px;
}
.@{menu-prefix-cls}-item:not(:last-child) {
margin-bottom: @menu-item-boundary-margin;
}
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
height: @menu-inline-toplevel-item-height;
line-height: @menu-inline-toplevel-item-height;
}
}
&-vertical {
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
.@{menu-prefix-cls}-submenu-title {
padding-right: 34px;
}
}
&-inline {
width: 100%;
.@{menu-prefix-cls}-selected,
.@{menu-prefix-cls}-item-selected {
&::after {
transform: scaleY(1);
opacity: 1;
transition: transform @menu-animation-duration-normal @ease-in-out,
opacity @menu-animation-duration-normal @ease-in-out;
}
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
width: ~'calc(100% + 1px)';
}
.@{menu-prefix-cls}-item-group-list .@{menu-prefix-cls}-submenu-title,
.@{menu-prefix-cls}-submenu-title {
padding-right: 34px;
}
// Motion enhance for first level
&.@{menu-prefix-cls}-root {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
display: flex;
align-items: center;
transition: border-color @animation-duration-slow, background @animation-duration-slow,
padding 0.1s @ease-out;
> .@{menu-prefix-cls}-title-content {
flex: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
> * {
flex: none;
}
}
}
}
&&-inline-collapsed {
width: @menu-collapsed-width;
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-item-group
> .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-item-group
> .@{menu-prefix-cls}-item-group-list
> .@{menu-prefix-cls}-submenu
> .@{menu-prefix-cls}-submenu-title,
> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
left: 0;
padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
text-overflow: clip;
.@{menu-prefix-cls}-submenu-arrow {
opacity: 0;
}
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
margin: 0;
font-size: @menu-icon-size-lg;
line-height: @menu-item-height;
+ span {
display: inline-block;
opacity: 0;
}
}
}
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
display: inline-block;
}
&-tooltip {
pointer-events: none;
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
display: none;
}
a {
color: @text-color-dark;
}
}
.@{menu-prefix-cls}-item-group-title {
padding-right: 4px;
padding-left: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
&-item-group-list {
margin: 0;
padding: 0;
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
padding: 0 16px 0 28px;
}
}
&-root&-vertical,
&-root&-vertical-left,
&-root&-vertical-right,
&-root&-inline {
box-shadow: none;
}
&-root&-inline-collapsed {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-title {
> .@{menu-prefix-cls}-inline-collapsed-noicon {
font-size: @menu-icon-size-lg;
text-align: center;
}
}
}
&-sub&-inline {
padding: 0;
background: @menu-inline-submenu-bg;
border: 0;
border-radius: 0;
box-shadow: none;
& > .@{menu-prefix-cls}-item,
& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
height: @menu-item-height;
line-height: @menu-item-height;
list-style-position: inside;
list-style-type: disc;
}
& .@{menu-prefix-cls}-item-group-title {
padding-left: 32px;
}
}
// Disabled state sets text to gray and nukes hover/tab effects
&-item-disabled,
&-submenu-disabled {
color: @disabled-color !important;
background: none;
cursor: not-allowed;
&::after {
border-color: transparent !important;
}
a {
color: @disabled-color !important;
pointer-events: none;
}
> .@{menu-prefix-cls}-submenu-title {
color: @disabled-color !important;
cursor: not-allowed;
> .@{menu-prefix-cls}-submenu-arrow {
&::before,
&::after {
background: @disabled-color !important;
}
}
}
}
}
// Integration with header element so menu items have the same height
.@{ant-prefix}-layout-header {
.@{menu-prefix-cls} {
line-height: inherit;
}
}
// https://github.com/ant-design/ant-design/issues/32950
.@{ant-prefix}-menu-inline-collapsed-tooltip {
a,
a:hover {
color: @white;
}
}
@import './light';
@import './dark';
@import './rtl';

View File

@ -0,0 +1,12 @@
.@{menu-prefix-cls} {
// light theme
&-light {
.@{menu-prefix-cls}-item:hover,
.@{menu-prefix-cls}-item-active,
.@{menu-prefix-cls}:not(.@{menu-prefix-cls}-inline) .@{menu-prefix-cls}-submenu-open,
.@{menu-prefix-cls}-submenu-active,
.@{menu-prefix-cls}-submenu-title:hover {
color: @menu-highlight-color;
}
}
}

View File

@ -0,0 +1,165 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
.@{menu-prefix-cls} {
&&-rtl {
direction: rtl;
text-align: right;
}
&-item-group-title {
.@{menu-prefix-cls}-rtl & {
text-align: right;
}
}
&-inline,
&-vertical {
.@{menu-prefix-cls}-rtl& {
border-right: none;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
&-dark&-inline,
&-dark&-vertical {
.@{menu-prefix-cls}-rtl& {
border-left: none;
}
}
&-vertical&-sub,
&-vertical-left&-sub,
&-vertical-right&-sub {
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
.@{menu-prefix-cls}-rtl& {
transform-origin: top right;
}
}
}
&-item,
&-submenu-title {
.@{menu-prefix-cls}-item-icon,
.@{iconfont-css-prefix} {
.@{menu-prefix-cls}-rtl & {
margin-right: auto;
margin-left: @menu-icon-margin-right;
}
}
&.@{menu-prefix-cls}-item-only-child {
> .@{menu-prefix-cls}-item-icon,
> .@{iconfont-css-prefix} {
.@{menu-prefix-cls}-rtl & {
margin-left: 0;
}
}
}
}
&-submenu {
&-rtl.@{menu-prefix-cls}-submenu-popup {
transform-origin: 100% 0;
}
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
.@{menu-prefix-cls}-rtl & {
right: auto;
left: 16px;
}
}
}
&-vertical,
&-vertical-left,
&-vertical-right {
> .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
&::before {
.@{menu-prefix-cls}-rtl & {
transform: rotate(-45deg) translateY(-2px);
}
}
&::after {
.@{menu-prefix-cls}-rtl & {
transform: rotate(45deg) translateY(2px);
}
}
}
}
}
&-vertical,
&-vertical-left,
&-vertical-right,
&-inline {
.@{menu-prefix-cls}-item {
&::after {
.@{menu-prefix-cls}-rtl& {
right: auto;
left: 0;
}
}
}
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
text-align: right;
}
}
}
&-inline {
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
padding-right: 0;
padding-left: 34px;
}
}
}
&-vertical {
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
padding-right: 16px;
padding-left: 34px;
}
}
}
&-inline-collapsed&-vertical {
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl& {
padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
}
}
}
&-item-group-list {
.@{menu-prefix-cls}-item,
.@{menu-prefix-cls}-submenu-title {
.@{menu-prefix-cls}-rtl & {
padding: 0 28px 0 16px;
}
}
}
&-sub&-inline {
border: 0;
& .@{menu-prefix-cls}-item-group-title {
.@{menu-prefix-cls}-rtl& {
padding-right: 32px;
padding-left: 0;
}
}
}
}

View File

@ -0,0 +1,49 @@
@import (reference) '../../style/themes/index';
@menu-prefix-cls: ~'@{ant-prefix}-menu';
.@{menu-prefix-cls} {
// Danger
&-item-danger&-item {
color: @menu-highlight-danger-color;
&:hover,
&-active {
color: @menu-highlight-danger-color;
}
&:active {
background: @menu-item-active-danger-bg;
}
&-selected {
color: @menu-highlight-danger-color;
> a,
> a:hover {
color: @menu-highlight-danger-color;
}
}
.@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) &-selected {
background-color: @menu-item-active-danger-bg;
}
.@{menu-prefix-cls}-inline &::after {
border-right-color: @menu-highlight-danger-color;
}
}
// ==================== Dark ====================
&-dark &-item-danger&-item {
&,
&:hover,
& > a {
color: @menu-dark-danger-color;
}
}
&-dark&-dark:not(&-horizontal) &-item-danger&-item-selected {
color: @menu-dark-highlight-color;
background-color: @menu-dark-item-active-danger-bg;
}
}

View File

@ -0,0 +1,74 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@message-prefix-cls: ~'@{ant-prefix}-message';
.@{message-prefix-cls} {
.reset-component();
position: fixed;
top: 8px;
left: 0;
z-index: @zindex-message;
width: 100%;
pointer-events: none;
&-notice {
padding: 8px;
text-align: center;
}
&-notice-content {
display: inline-block;
padding: @message-notice-content-padding;
background: @message-notice-content-bg;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
pointer-events: all;
}
&-success .@{iconfont-css-prefix} {
color: @success-color;
}
&-error .@{iconfont-css-prefix} {
color: @error-color;
}
&-warning .@{iconfont-css-prefix} {
color: @warning-color;
}
&-info .@{iconfont-css-prefix},
&-loading .@{iconfont-css-prefix} {
color: @info-color;
}
.@{iconfont-css-prefix} {
position: relative;
top: 1px;
margin-right: 8px;
font-size: @font-size-lg;
}
&-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active {
animation-name: MessageMoveOut;
animation-duration: 0.3s;
}
}
@keyframes MessageMoveOut {
0% {
max-height: 150px;
padding: 8px;
opacity: 1;
}
100% {
max-height: 0;
padding: 0;
opacity: 0;
}
}
@import './rtl';

View File

@ -0,0 +1,17 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@message-prefix-cls: ~'@{ant-prefix}-message';
.@{message-prefix-cls}-rtl {
direction: rtl;
span {
direction: rtl;
}
.@{iconfont-css-prefix} {
margin-right: 0;
margin-left: 8px;
}
}

View File

@ -0,0 +1,74 @@
@import '../../style/mixins/index';
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
.@{confirm-prefix-cls} {
.@{ant-prefix}-modal-header {
display: none;
}
.@{ant-prefix}-modal-body {
padding: @modal-confirm-body-padding;
}
&-body-wrapper {
.clearfix();
}
&-body {
.@{confirm-prefix-cls}-title {
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-top: 8px;
color: @text-color;
font-size: @font-size-base;
}
> .@{iconfont-css-prefix} {
float: left;
margin-right: 16px;
font-size: 22px;
// `content` after `icon` should set marginLeft
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
margin-left: 38px;
}
}
}
.@{confirm-prefix-cls}-btns {
float: right;
margin-top: 24px;
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
margin-bottom: 0;
margin-left: 8px;
}
}
&-error &-body > .@{iconfont-css-prefix} {
color: @error-color;
}
&-warning &-body > .@{iconfont-css-prefix},
&-confirm &-body > .@{iconfont-css-prefix} {
color: @warning-color;
}
&-info &-body > .@{iconfont-css-prefix} {
color: @info-color;
}
&-success &-body > .@{iconfont-css-prefix} {
color: @success-color;
}
}

View File

@ -0,0 +1,135 @@
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
.@{dialog-prefix-cls} {
.reset-component();
.modal-mask();
position: relative;
top: 100px;
width: auto;
max-width: calc(100vw - 32px);
margin: 0 auto;
padding-bottom: 24px;
&-wrap {
z-index: @zindex-modal;
}
&-title {
margin: 0;
color: @modal-heading-color;
font-weight: 500;
font-size: @modal-header-title-font-size;
line-height: @modal-header-title-line-height;
word-wrap: break-word;
}
&-content {
position: relative;
background-color: @modal-content-bg;
background-clip: padding-box;
border: 0;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
pointer-events: auto;
}
&-close {
position: absolute;
top: 0;
right: 0;
z-index: @zindex-popup-close;
padding: 0;
color: @modal-close-color;
font-weight: 700;
line-height: 1;
text-decoration: none;
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
transition: color 0.3s;
&-x {
display: block;
width: @modal-header-close-size;
height: @modal-header-close-size;
font-size: @font-size-lg;
font-style: normal;
line-height: @modal-header-close-size;
text-align: center;
text-transform: none;
text-rendering: auto;
}
&:focus,
&:hover {
color: @icon-color-hover;
text-decoration: none;
}
}
&-header {
padding: @modal-header-padding;
color: @text-color;
background: @modal-header-bg;
border-bottom: @modal-header-border-width @modal-header-border-style
@modal-header-border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
}
&-body {
padding: @modal-body-padding;
font-size: @font-size-base;
line-height: @line-height-base;
word-wrap: break-word;
}
&-footer {
padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
text-align: right;
background: @modal-footer-bg;
border-top: @modal-footer-border-width @modal-footer-border-style
@modal-footer-border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
.@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
margin-bottom: 0;
margin-left: 8px;
}
}
&-open {
overflow: hidden;
}
}
.@{dialog-prefix-cls}-centered {
text-align: center;
&::before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.@{dialog-prefix-cls} {
top: 0;
display: inline-block;
text-align: left;
vertical-align: middle;
}
}
@media (max-width: @screen-sm-max) {
.@{dialog-prefix-cls} {
max-width: calc(100vw - 16px);
margin: 8px auto;
}
.@{dialog-prefix-cls}-centered {
.@{dialog-prefix-cls} {
flex: 1;
}
}
}

View File

@ -0,0 +1,74 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
.@{dialog-prefix-cls} {
&-wrap {
&-rtl {
direction: rtl;
}
}
&-close {
.@{dialog-wrap-rtl-cls} & {
right: initial;
left: 0;
}
}
&-footer {
.@{dialog-wrap-rtl-cls} & {
text-align: left;
}
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & {
margin-right: 8px;
margin-left: 0;
}
}
}
&-confirm {
&-body {
.@{dialog-wrap-rtl-cls} & {
direction: rtl;
}
> .@{iconfont-css-prefix} {
.@{dialog-wrap-rtl-cls} & {
float: right;
margin-right: 0;
margin-left: 16px;
}
+ .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
.@{dialog-wrap-rtl-cls} & {
margin-right: 38px;
margin-left: 0;
}
}
}
}
&-btns {
.@{dialog-wrap-rtl-cls} & {
float: left;
}
.@{ant-prefix}-btn + .@{ant-prefix}-btn {
.@{dialog-wrap-rtl-cls} & {
margin-right: 8px;
margin-left: 0;
}
}
}
}
}
.@{dialog-prefix-cls}-centered {
.@{dialog-prefix-cls} {
.@{dialog-wrap-rtl-cls}& {
text-align: right;
}
}
}

View File

@ -0,0 +1,223 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
.popover-customize-bg(@notification-prefix-cls, @popover-background);
@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;
@notification-margin-edge: 24px;
.@{notification-prefix-cls} {
.reset-component();
position: fixed;
z-index: @zindex-notification;
margin-right: @notification-margin-edge;
&-topLeft,
&-bottomLeft {
margin-right: 0;
margin-left: @notification-margin-edge;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationLeftFadeIn;
}
}
&-close-icon {
font-size: @font-size-base;
cursor: pointer;
}
&-hook-holder {
position: relative;
}
&-notice {
position: relative;
width: @notification-width;
max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
margin-bottom: @notification-margin-bottom;
margin-left: auto;
padding: @notification-padding;
overflow: hidden;
line-height: @line-height-base;
word-wrap: break-word;
background: @notification-bg;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
.@{notification-prefix-cls}-topLeft &,
.@{notification-prefix-cls}-bottomLeft & {
margin-right: auto;
margin-left: 0;
}
&-message {
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;
&::before {
display: block;
content: '';
}
}
}
&-description {
font-size: @font-size-base;
}
&-closable &-message {
padding-right: 24px;
}
&-with-icon &-message {
margin-bottom: 4px;
margin-left: 48px;
font-size: @font-size-lg;
}
&-with-icon &-description {
margin-left: 48px;
font-size: @font-size-base;
}
// Icon & color style in different selector level
// https://github.com/ant-design/ant-design/issues/16503
// https://github.com/ant-design/ant-design/issues/15512
&-icon {
position: absolute;
margin-left: 4px;
font-size: 24px;
line-height: 24px;
}
.@{iconfont-css-prefix}&-icon {
&-success {
color: @success-color;
}
&-info {
color: @info-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
}
&-close {
position: absolute;
top: 16px;
right: 22px;
color: @text-color-secondary;
outline: none;
&:hover {
& when (@theme = dark) {
color: fade(@white, 85%);
}
& when not (@theme = dark) {
color: shade(@text-color-secondary, 40%);
}
}
}
&-btn {
float: right;
margin-top: 16px;
}
}
.notification-fade-effect {
animation-duration: 0.24s;
animation-timing-function: @ease-in-out;
animation-fill-mode: both;
}
&-fade-enter,
&-fade-appear {
.notification-fade-effect();
opacity: 0;
animation-play-state: paused;
}
&-fade-leave {
.notification-fade-effect();
animation-duration: 0.2s;
animation-play-state: paused;
}
&-fade-enter&-fade-enter-active,
&-fade-appear&-fade-appear-active {
animation-name: NotificationFadeIn;
animation-play-state: running;
}
&-fade-leave&-fade-leave-active {
animation-name: NotificationFadeOut;
animation-play-state: running;
}
}
@keyframes NotificationFadeIn {
0% {
left: @notification-width;
opacity: 0;
}
100% {
left: 0;
opacity: 1;
}
}
@keyframes NotificationLeftFadeIn {
0% {
right: @notification-width;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
@keyframes NotificationFadeOut {
0% {
max-height: 150px;
margin-bottom: @notification-margin-bottom;
opacity: 1;
}
100% {
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
}
@import './rtl';

View File

@ -0,0 +1,53 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@notification-prefix-cls: ~'@{ant-prefix}-notification';
.@{notification-prefix-cls} {
&-rtl {
direction: rtl;
}
&-notice {
&-closable &-message {
.@{notification-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 24px;
}
}
&-with-icon &-message {
.@{notification-prefix-cls}-rtl & {
margin-right: 48px;
margin-left: 0;
}
}
&-with-icon &-description {
.@{notification-prefix-cls}-rtl & {
margin-right: 48px;
margin-left: 0;
}
}
&-icon {
.@{notification-prefix-cls}-rtl & {
margin-right: 4px;
margin-left: 0;
}
}
&-close {
.@{notification-prefix-cls}-rtl & {
right: auto;
left: 22px;
}
}
&-btn {
.@{notification-prefix-cls}-rtl & {
float: left;
}
}
}
}

View File

@ -0,0 +1,128 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
.@{pageheader-prefix-cls} {
.reset-component();
position: relative;
padding: @page-header-padding-vertical @page-header-padding;
background-color: @component-background;
&-ghost {
background-color: @page-header-ghost-bg;
}
&.has-breadcrumb {
padding-top: @page-header-padding-breadcrumb;
}
&.has-footer {
padding-bottom: 0;
}
&-back {
margin-right: @margin-md;
font-size: 16px;
line-height: 1;
&-button {
.operation-unit();
color: @page-header-back-color;
cursor: pointer;
}
}
.@{ant-prefix}-divider-vertical {
height: 14px;
margin: 0 @margin-sm;
vertical-align: middle;
}
.@{ant-prefix}-breadcrumb + &-heading {
margin-top: @margin-xs;
}
.text-overflow-ellipsis() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-heading {
display: flex;
justify-content: space-between;
&-left {
display: flex;
align-items: center;
margin: (@margin-xs / 2) 0;
overflow: hidden;
}
&-title {
margin-right: @margin-sm;
margin-bottom: 0;
color: @heading-color;
font-weight: 600;
font-size: @page-header-heading-title;
line-height: @height-base;
.text-overflow-ellipsis();
}
.@{ant-prefix}-avatar {
margin-right: @margin-sm;
}
&-sub-title {
margin-right: @margin-sm;
color: @text-color-secondary;
font-size: @page-header-heading-sub-title;
line-height: @line-height-base;
.text-overflow-ellipsis();
}
&-extra {
margin: (@margin-xs / 2) 0;
white-space: nowrap;
> * {
margin-left: @margin-sm;
white-space: unset;
}
> *:first-child {
margin-left: 0;
}
}
}
&-content {
padding-top: @page-header-content-padding-vertical;
}
&-footer {
margin-top: @margin-md;
.@{ant-prefix}-tabs {
> .@{ant-prefix}-tabs-nav {
margin: 0;
&::before {
border: none;
}
}
.@{ant-prefix}-tabs-tab {
padding-top: @padding-xs;
padding-bottom: @padding-xs;
font-size: @page-header-tabs-tab-font-size;
}
}
}
&-compact &-heading {
flex-wrap: wrap;
}
}
@import './rtl';

View File

@ -0,0 +1,77 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
.@{pageheader-prefix-cls} {
&-rtl {
direction: rtl;
}
&-back {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 16px;
}
}
&-heading {
&-title {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
margin-left: @margin-sm;
}
}
.@{ant-prefix}-avatar {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
margin-left: @margin-sm;
}
}
&-sub-title {
.@{pageheader-prefix-cls}-rtl & {
float: right;
margin-right: 0;
margin-left: 12px;
}
}
&-tags {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
&-extra {
.@{pageheader-prefix-cls}-rtl & {
float: left;
}
> * {
.@{pageheader-prefix-cls}-rtl & {
margin-right: @margin-sm;
margin-left: 0;
}
}
> *:first-child {
.@{pageheader-prefix-cls}-rtl & {
margin-right: 0;
}
}
}
}
&-footer {
.@{ant-prefix}-tabs-bar {
.@{ant-prefix}-tabs-nav {
.@{pageheader-prefix-cls}-rtl & {
float: right;
}
}
}
}
}

View File

@ -0,0 +1,436 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
.@{pagination-prefix-cls} {
.reset-component();
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
&::after {
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
content: ' ';
}
&-total-text {
display: inline-block;
height: @pagination-item-size;
margin-right: 8px;
line-height: @pagination-item-size - 2px;
vertical-align: middle;
}
&-item {
display: inline-block;
min-width: @pagination-item-size;
height: @pagination-item-size;
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: @pagination-item-bg;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
outline: 0;
cursor: pointer;
user-select: none;
a {
display: block;
padding: 0 6px;
color: @text-color;
transition: none;
&:hover {
text-decoration: none;
}
}
&:focus-visible,
&:hover {
border-color: @primary-color;
transition: all 0.3s;
a {
color: @primary-color;
}
}
&-active {
font-weight: @pagination-font-weight-active;
background: @pagination-item-bg-active;
border-color: @primary-color;
a {
color: @primary-color;
}
&:focus-visible,
&:hover {
border-color: @primary-5;
}
&:focus-visible a,
&:hover a {
color: @primary-5;
}
}
}
&-jump-prev,
&-jump-next {
outline: 0;
.@{pagination-prefix-cls}-item-container {
position: relative;
.@{pagination-prefix-cls}-item-link-icon {
color: @primary-color;
font-size: @font-size-sm;
letter-spacing: -1px;
opacity: 0;
transition: all 0.2s;
&-svg {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
.@{pagination-prefix-cls}-item-ellipsis {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
margin: auto;
color: @disabled-color;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2px;
text-align: center;
text-indent: 0.13em;
opacity: 1;
transition: all 0.2s;
}
}
&:focus-visible,
&:hover {
.@{pagination-prefix-cls}-item-link-icon {
opacity: 1;
}
.@{pagination-prefix-cls}-item-ellipsis {
opacity: 0;
}
}
}
&-prev,
&-jump-prev,
&-jump-next {
margin-right: 8px;
}
&-prev,
&-next,
&-jump-prev,
&-jump-next {
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;
vertical-align: middle;
list-style: none;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s;
}
&-prev,
&-next {
font-family: Arial, Helvetica, sans-serif;
outline: 0;
button {
color: @text-color;
cursor: pointer;
user-select: none;
}
&:hover button {
border-color: @primary-5;
}
.@{pagination-prefix-cls}-item-link {
display: block;
width: 100%;
height: 100%;
padding: 0;
font-size: 12px;
text-align: center;
background-color: @pagination-item-link-bg;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
outline: none;
transition: all 0.3s;
}
&:focus-visible .@{pagination-prefix-cls}-item-link,
&:hover .@{pagination-prefix-cls}-item-link {
color: @primary-color;
border-color: @primary-color;
}
}
&-disabled {
&,
&:hover,
&:focus-visible {
cursor: not-allowed;
.@{pagination-prefix-cls}-item-link {
color: @disabled-color;
border-color: @border-color-base;
cursor: not-allowed;
}
}
}
&-slash {
margin: 0 10px 0 5px;
}
&-options {
display: inline-block;
margin-left: 16px;
vertical-align: middle;
// IE11 css hack. `*::-ms-backdrop,` is a must have
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop,
& {
vertical-align: top;
}
}
&-size-changer.@{ant-prefix}-select {
display: inline-block;
width: auto;
}
&-quick-jumper {
display: inline-block;
height: @input-height-base;
margin-left: @margin-xs;
line-height: @input-height-base;
vertical-align: top;
input {
.input();
width: 50px;
height: @input-height-base;
margin: 0 8px;
}
}
}
&-simple &-prev,
&-simple &-next {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
vertical-align: top;
.@{pagination-prefix-cls}-item-link {
height: @pagination-item-size-sm;
background-color: transparent;
border: 0;
&::after {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
}
}
}
&-simple &-simple-pager {
display: inline-block;
height: @pagination-item-size-sm;
margin-right: 8px;
input {
box-sizing: border-box;
height: 100%;
margin-right: 8px;
padding: 0 6px;
text-align: center;
background-color: @pagination-item-input-bg;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
outline: none;
transition: border-color 0.3s;
&:hover {
border-color: @primary-color;
}
&:focus {
border-color: @primary-color-hover;
box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
}
&[disabled] {
color: @disabled-color;
background: @disabled-bg;
border-color: @border-color-base;
cursor: not-allowed;
}
}
}
&.mini &-total-text,
&.mini &-simple-pager {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
}
&.mini &-item {
min-width: @pagination-item-size-sm;
height: @pagination-item-size-sm;
margin: 0;
line-height: @pagination-item-size-sm - 2px;
}
&.mini &-item:not(&-item-active) {
background: transparent;
border-color: transparent;
}
&.mini &-prev,
&.mini &-next {
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 {
background: transparent;
border-color: transparent;
&::after {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
}
}
&.mini &-jump-prev,
&.mini &-jump-next {
height: @pagination-item-size-sm;
margin-right: 0;
line-height: @pagination-item-size-sm;
}
&.mini &-options {
margin-left: 2px;
&-size-changer {
top: @pagination-mini-options-size-changer-top;
}
&-quick-jumper {
height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm;
input {
.input-sm();
width: 44px;
height: @input-height-sm;
}
}
}
// ============================ Disabled ============================
&&-disabled {
cursor: not-allowed;
.@{pagination-prefix-cls}-item {
background: @disabled-bg;
border-color: @border-color-base;
cursor: not-allowed;
a {
color: @disabled-color;
background: transparent;
border: none;
cursor: not-allowed;
}
&-active {
background: @pagination-item-disabled-bg-active;
a {
color: @pagination-item-disabled-color-active;
}
}
}
.@{pagination-prefix-cls}-item-link {
color: @disabled-color;
background: @disabled-bg;
border-color: @border-color-base;
cursor: not-allowed;
.@{pagination-prefix-cls}-simple& {
background: transparent;
}
}
.@{pagination-prefix-cls}-item-link-icon {
opacity: 0;
}
.@{pagination-prefix-cls}-item-ellipsis {
opacity: 1;
}
.@{pagination-prefix-cls}-simple-pager {
color: @disabled-color;
}
}
}
@media only screen and (max-width: @screen-lg) {
.@{pagination-prefix-cls}-item {
&-after-jump-prev,
&-before-jump-next {
display: none;
}
}
}
@media only screen and (max-width: @screen-sm) {
.@{pagination-prefix-cls}-options {
display: none;
}
}
@import './rtl';

View File

@ -0,0 +1,55 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
.@{pagination-prefix-cls}-rtl {
.@{pagination-prefix-cls}-total-text {
margin-right: 0;
margin-left: 8px;
}
.@{pagination-prefix-cls}-item,
.@{pagination-prefix-cls}-prev,
.@{pagination-prefix-cls}-jump-prev,
.@{pagination-prefix-cls}-jump-next {
margin-right: 0;
margin-left: 8px;
}
.@{pagination-prefix-cls}-slash {
margin: 0 5px 0 10px;
}
.@{pagination-prefix-cls}-options {
margin-right: 16px;
margin-left: 0;
.@{pagination-prefix-cls}-options-size-changer.@{ant-prefix}-select {
margin-right: 0;
margin-left: 8px;
}
.@{pagination-prefix-cls}-options-quick-jumper {
margin-left: 0;
}
}
&.@{pagination-prefix-cls}-simple {
.@{pagination-prefix-cls}-simple-pager {
margin-right: 0;
margin-left: 8px;
input {
margin-right: 0;
margin-left: 8px;
}
}
}
&.@{pagination-prefix-cls}.mini .@{pagination-prefix-cls}-options {
margin-right: 2px;
margin-left: 0;
}
}

View File

@ -0,0 +1,8 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@popconfirm-prefix-cls: ~'@{ant-prefix}-popconfirm';
.@{popconfirm-prefix-cls} {
z-index: @zindex-popoconfirm;
}

View File

@ -0,0 +1,257 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@popover-prefix-cls: ~'@{ant-prefix}-popover';
@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
@popover-arrow-offset-vertical: 12px;
@popover-arrow-offset-horizontal: 16px;
.@{popover-prefix-cls} {
.reset-component();
position: absolute;
top: 0;
left: 0;
z-index: @zindex-popover;
font-weight: normal;
white-space: normal;
text-align: left;
cursor: auto;
user-select: text;
&::after {
position: absolute;
background: fade(@white, 1%);
content: '';
}
&-hidden {
display: none;
}
// Offset the popover to account for the popover arrow
&-placement-top,
&-placement-topLeft,
&-placement-topRight {
padding-bottom: @popover-distance;
}
&-placement-right,
&-placement-rightTop,
&-placement-rightBottom {
padding-left: @popover-distance;
}
&-placement-bottom,
&-placement-bottomLeft,
&-placement-bottomRight {
padding-top: @popover-distance;
}
&-placement-left,
&-placement-leftTop,
&-placement-leftBottom {
padding-right: @popover-distance;
}
&-inner {
background-color: @popover-bg;
background-clip: padding-box;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
box-shadow: ~'0 0 8px @{shadow-color} \9';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
&-inner {
box-shadow: @box-shadow-base;
}
}
&-title {
min-width: @popover-min-width;
min-height: @popover-min-height;
margin: 0; // reset heading margin
padding: 5px @popover-padding-horizontal 4px;
color: @heading-color;
font-weight: 500;
border-bottom: 1px solid @border-color-split;
}
&-inner-content {
padding: @padding-sm @popover-padding-horizontal;
color: @popover-color;
}
&-message {
position: relative;
padding: 4px 0 12px;
color: @popover-color;
font-size: @font-size-base;
> .@{iconfont-css-prefix} {
position: absolute;
top: (
4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
); // 4px for padding-top, 4px for vertical middle
color: @warning-color;
font-size: @font-size-base;
}
&-title {
padding-left: @font-size-base + 8px;
}
}
&-buttons {
margin-bottom: 4px;
text-align: right;
button {
margin-left: 8px;
}
}
// Arrows
&-arrow {
position: absolute;
display: block;
width: @popover-arrow-rotate-width;
height: @popover-arrow-rotate-width;
overflow: hidden;
background: transparent;
pointer-events: none;
&-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: @popover-arrow-width;
height: @popover-arrow-width;
margin: auto;
background-color: @popover-bg;
content: '';
pointer-events: auto;
}
}
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: 3px 3px 7px fade(@black, 7%);
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
}
}
&-placement-top &-arrow {
left: 50%;
transform: translateX(-50%);
}
&-placement-topLeft &-arrow {
left: @popover-arrow-offset-horizontal;
}
&-placement-topRight &-arrow {
right: @popover-arrow-offset-horizontal;
}
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -3px 3px 7px fade(@black, 7%);
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
}
}
&-placement-right &-arrow {
top: 50%;
transform: translateY(-50%);
}
&-placement-rightTop &-arrow {
top: @popover-arrow-offset-vertical;
}
&-placement-rightBottom &-arrow {
bottom: @popover-arrow-offset-vertical;
}
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: -2px -2px 5px fade(@black, 6%);
transform: translateY((@popover-arrow-rotate-width / 2)) rotate(45deg);
}
}
&-placement-bottom &-arrow {
left: 50%;
transform: translateX(-50%);
}
&-placement-bottomLeft &-arrow {
left: @popover-arrow-offset-horizontal;
}
&-placement-bottomRight &-arrow {
right: @popover-arrow-offset-horizontal;
}
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: @popover-distance - @popover-arrow-rotate-width;
&-content {
box-shadow: 3px -3px 7px fade(@black, 7%);
transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(45deg);
}
}
&-placement-left &-arrow {
top: 50%;
transform: translateY(-50%);
}
&-placement-leftTop &-arrow {
top: @popover-arrow-offset-vertical;
}
&-placement-leftBottom &-arrow {
bottom: @popover-arrow-offset-vertical;
}
}
.generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) {
.generator-popover-preset-color(@i - 1);
@color: extract(@preset-colors, @i);
@lightColor: '@{color}-6';
.@{popover-prefix-cls}-@{color} {
.@{popover-prefix-cls}-inner {
background-color: @@lightColor;
}
.@{popover-prefix-cls}-arrow {
&-content {
background-color: @@lightColor;
}
}
}
}
.generator-popover-preset-color();
@import './rtl';

View File

@ -0,0 +1,33 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@popover-prefix-cls: ~'@{ant-prefix}-popover';
.@{popover-prefix-cls} {
&-rtl {
direction: rtl;
text-align: right;
}
&-message {
&-title {
.@{popover-prefix-cls}-rtl & {
padding-right: @font-size-base + 8px;
padding-left: @padding-md;
}
}
}
&-buttons {
.@{popover-prefix-cls}-rtl & {
text-align: left;
}
button {
.@{popover-prefix-cls}-rtl & {
margin-right: 8px;
margin-left: 0;
}
}
}
}

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