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

feat: update style css to 3.13.6

pull/666/head
wangxueliang 6 years ago
parent
e6d5999528
commit
a4d415392f
18 changed files with 409 additions and 420 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      components/alert/style/index.less
  2. 36
      components/anchor/style/index.less
  3. 14
      components/auto-complete/style/index.less
  4. 10
      components/avatar/style/index.less
  5. 14
      components/back-top/style/index.less
  6. 69
      components/badge/style/index.less
  7. 37
      components/button/style/index.less
  8. 120
      components/button/style/mixin.less
  9. 71
      components/calendar/style/index.less
  10. 100
      components/card/style/index.less
  11. 25
      components/card/style/size.less
  12. 79
      components/carousel/style/index.less
  13. 1
      components/cascader/style/index.js
  14. 60
      components/cascader/style/index.less
  15. 84
      components/checkbox/style/mixin.less
  16. 33
      components/collapse/style/index.less
  17. 22
      components/comment/style/index.less
  18. 2
      scripts/syncStyleFromAntd.js

52
components/alert/style/index.less
Unescape View File

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

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

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

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

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

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

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

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

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

69
components/badge/style/index.less
Unescape View File

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

37
components/button/style/index.less
Unescape View File

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

120
components/button/style/mixin.less
Unescape View File

@ -1,13 +1,14 @@
// mixins for button
// ------------------------
.button-size(@height; @padding; @font-size; @border-radius) {
height: @height;
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
height: @height;
}
.button-disabled() {
&-disabled,
&.disabled,
&[disabled] {
&,
@ -24,8 +25,8 @@
.button-variant-primary(@color; @background) {
.button-color(@color; @background; @background);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
text-shadow: @btn-text-shadow;
box-shadow: @btn-primary-shadow;
&:hover,
&:focus {
@ -49,57 +50,53 @@
&:hover,
&:focus {
.button-color(@primary-5; @background; @primary-5);
.button-color(
~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
`
);
}
&:active,
&.active {
.button-color(@primary-7; @background; @primary-7);
.button-color(
~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
`
);
}
.button-disabled();
}
.button-variant-danger(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover {
.button-color(
@btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
);
}
&:focus {
.button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `);
.button-color(
~`colorPalette('@{color}', 5) `; @component-background; ~`colorPalette('@{color}', 5) `
);
}
&:active,
&.active {
.button-color(
@btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
);
}
.button-disabled();
}
.button-variant-ghost(@color) {
.button-color(@color; transparent; @color);
text-shadow: none;
&:hover,
&:focus {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
}
&:active,
&.active {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
}
.button-disabled();
}
.button-color(@color; @background; @border) {
color: @color;
background-color: @background;
@ -108,44 +105,39 @@
// http://stackoverflow.com/a/17253457
> a:only-child {
color: currentColor;
&:after {
content: '';
&::after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
content: '';
}
}
}
.button-group-base(@btnClassName) {
position: relative;
display: inline-block;
> .@{btnClassName},
> span > .@{btnClassName} {
position: relative;
&:hover,
&:focus,
&:active,
&.active {
z-index: 2;
}
&:disabled {
z-index: 0;
}
}
// size
&-lg > .@{btnClassName},
&-lg > span > .@{btnClassName} {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
line-height: @btn-height-lg - 2px;
}
&-sm > .@{btnClassName},
&-sm > span > .@{btnClassName} {
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
@ -155,43 +147,37 @@
}
}
}
// Base styles of buttons
// --------------------------------------------------
.btn() {
position: relative;
display: inline-block;
font-weight: @btn-font-weight;
white-space: nowrap;
text-align: center;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: @border-width-base @border-style-base transparent;
white-space: nowrap;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
user-select: none;
box-shadow: @btn-shadow;
cursor: pointer;
transition: all 0.3s @ease-in-out;
position: relative;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
user-select: none;
touch-action: manipulation;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
> .@{iconfont-css-prefix} {
line-height: 1;
}
&,
&:active,
&:focus {
outline: 0;
}
&:not([disabled]):hover {
text-decoration: none;
}
&:not([disabled]):active {
outline: 0;
box-shadow: none;
}
&.disabled,
&[disabled] {
cursor: not-allowed;
@ -199,21 +185,17 @@
pointer-events: none;
}
}
&-lg {
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
}
&-sm {
.button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
}
}
// primary button style
.btn-primary() {
.button-variant-primary(@btn-primary-color; @btn-primary-bg);
}
// default button style
.btn-default() {
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
@ -221,48 +203,54 @@
&:focus,
&:active,
&.active {
background: @btn-default-bg;
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-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}
// round button
.btn-round(@btnClassName: btn) {
.button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);
&.@{btnClassName}-lg {
.button-size(
@btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg + 2px; @btn-circle-size-lg
);
}
&.@{btnClassName}-sm {
.button-size(
@btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
);
}
}
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
.square(@btn-circle-size);
.button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%);
&.@{btnClassName}-lg {
.square(@btn-circle-size-lg);
.button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%);
}
&.@{btnClassName}-sm {
.square(@btn-circle-size-sm);
.button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
}
}
// Horizontal button groups styl
// --------------------------------------------------
.btn-group(@btnClassName: btn) {
.button-group-base(@btnClassName);
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
span + .@{btnClassName},
@ -272,15 +260,12 @@
& + & {
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;
@ -291,19 +276,16 @@
> span:only-child > .@{btnClassName} {
border-radius: @btn-border-radius-base;
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-base;
border-top-left-radius: @btn-border-radius-base;
border-bottom-left-radius: @btn-border-radius-base;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-base;
border-top-right-radius: @btn-border-radius-base;
border-bottom-right-radius: @btn-border-radius-base;
}
&-sm {
> .@{btnClassName}:only-child {
border-radius: @btn-border-radius-sm;
@ -313,35 +295,31 @@
}
> .@{btnClassName}:first-child:not(:last-child),
> span:first-child:not(:last-child) > .@{btnClassName} {
border-bottom-left-radius: @btn-border-radius-sm;
border-top-left-radius: @btn-border-radius-sm;
border-bottom-left-radius: @btn-border-radius-sm;
}
> .@{btnClassName}:last-child:not(:first-child),
> span:last-child:not(:first-child) > .@{btnClassName} {
border-bottom-right-radius: @btn-border-radius-sm;
border-top-right-radius: @btn-border-radius-sm;
border-bottom-right-radius: @btn-border-radius-sm;
}
}
& > & {
float: left;
}
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
border-radius: 0;
}
& > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

71
components/calendar/style/index.less
Unescape View File

@ -5,11 +5,24 @@
.@{full-calendar-prefix-cls} {
.reset-component;
outline: none;
border-top: @border-width-base @border-style-base @border-color-base;
outline: none;
.@{ant-prefix}-select&-year-select {
min-width: 90px;
&.@{ant-prefix}-select-sm {
min-width: 70px;
}
}
.@{ant-prefix}-select&-month-select {
min-width: 80px;
margin-left: 8px;
&-month-select {
margin-left: 5px;
&.@{ant-prefix}-select-sm {
min-width: 60px;
}
}
&-header {
@ -27,8 +40,8 @@
label.@{ant-prefix}-radio-button {
height: 22px;
line-height: 20px;
padding: 0 10px;
line-height: 20px;
}
}
@ -42,11 +55,11 @@
}
table {
border-collapse: collapse;
max-width: 100%;
background-color: transparent;
width: 100%;
max-width: 100%;
height: 256px;
background-color: transparent;
border-collapse: collapse;
}
table,
@ -60,14 +73,14 @@
}
&-calendar-table {
border-spacing: 0;
margin-bottom: 0;
border-spacing: 0;
}
&-column-header {
line-height: 18px;
padding: 0;
width: 33px;
padding: 0;
line-height: 18px;
text-align: center;
.@{full-calendar-prefix-cls}-column-header-inner {
display: block;
@ -89,14 +102,14 @@
&-value {
display: block;
margin: 0 auto;
color: @text-color;
border-radius: @border-radius-sm;
width: 24px;
height: 24px;
margin: 0 auto;
padding: 0;
background: transparent;
color: @text-color;
line-height: 24px;
background: transparent;
border-radius: @border-radius-sm;
transition: all 0.3s;
&:hover {
@ -105,8 +118,8 @@
}
&:active {
color: @text-color-inverse;
background: @primary-color;
color: #fff;
}
}
@ -121,8 +134,8 @@
&-selected-day &-value,
&-month-panel-selected-cell &-value {
color: @text-color-inverse;
background: @primary-color;
color: #fff;
}
&-disabled-cell-first-of-row &-value {
@ -141,16 +154,16 @@
}
&-month-panel-table {
table-layout: fixed;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
&-content {
position: absolute;
width: 100%;
left: 0;
bottom: -9px;
left: 0;
width: 100%;
}
&-fullscreen {
@ -173,12 +186,12 @@
&-fullscreen &-month,
&-fullscreen &-date {
text-align: left;
margin: 0 4px;
display: block;
color: @text-color;
height: 116px;
margin: 0 4px;
padding: 4px 8px;
color: @text-color;
text-align: left;
border-top: 2px solid @border-color-split;
transition: background 0.3s;
@ -193,15 +206,15 @@
}
&-fullscreen &-column-header {
text-align: right;
padding-right: 12px;
padding-bottom: 5px;
text-align: right;
}
&-fullscreen &-value {
width: auto;
text-align: right;
background: transparent;
width: auto;
}
&-fullscreen &-today &-value {
@ -210,8 +223,8 @@
&-fullscreen &-month-panel-current-cell &-month,
&-fullscreen &-today &-date {
border-top-color: @primary-color;
background: transparent;
border-top-color: @primary-color;
}
&-fullscreen &-month-panel-current-cell &-value,
@ -235,12 +248,10 @@
}
&-fullscreen &-content {
height: 88px;
overflow-y: auto;
position: static;
width: auto;
left: auto;
bottom: auto;
height: 88px;
overflow-y: auto;
}
&-disabled-cell &-date {
@ -258,9 +269,9 @@
}
&-disabled-cell &-value {
width: auto;
color: @disabled-color;
border-radius: 0;
width: auto;
cursor: not-allowed;
}
}

100
components/card/style/index.less
Unescape View File

@ -3,21 +3,23 @@
@card-prefix-cls: ~'@{ant-prefix}-card';
@card-head-height: 48px;
@card-hover-border: rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm;
@card-hover-border: fade(@black, 9%);
@gradient-min: fade(@card-background, 20%);
@gradient-max: fade(@card-background, 40%);
.@{card-prefix-cls} {
.reset-component;
position: relative;
background: @component-background;
border-radius: @card-radius;
position: relative;
transition: all 0.3s;
&-hoverable {
cursor: pointer;
&:hover {
box-shadow: @card-shadow;
border-color: @card-hover-border;
box-shadow: @card-shadow;
}
}
@ -26,16 +28,16 @@
}
&-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: @font-size-lg;
background: @card-head-background;
border-bottom: @border-width-base @border-style-base @border-color-split;
padding: 0 @card-padding-base;
border-radius: @card-radius @card-radius 0 0;
.clearfix;
margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
min-height: @card-head-height;
font-size: @font-size-lg;
color: @card-head-color;
font-weight: 500;
&-wrapper {
display: flex;
@ -43,20 +45,20 @@
}
&-title {
display: inline-block;
flex: 1;
padding: @card-head-padding 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex: 1;
display: inline-block;
text-overflow: ellipsis;
}
.@{ant-prefix}-tabs {
margin-bottom: -17px;
clear: both;
font-size: @font-size-base;
margin-bottom: -17px;
color: @text-color;
font-weight: normal;
font-size: @font-size-base;
&-bar {
border-bottom: @border-width-base @border-style-base @border-color-split;
@ -66,12 +68,12 @@
&-extra {
float: right;
// https://stackoverflow.com/a/22429853/3040605
margin-left: auto;
padding: @card-head-padding 0;
font-size: @font-size-base;
color: @text-color;
font-weight: normal;
// https://stackoverflow.com/a/22429853/3040605
margin-left: auto;
font-size: @font-size-base;
}
&-body {
@ -85,14 +87,14 @@
}
&-grid {
border-radius: 0;
float: left;
width: 33.33%;
padding: @card-padding-base;
border: 0;
border-radius: 0;
box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
0 1px 0 0 @border-color-split inset;
width: 33.33%;
float: left;
padding: @card-padding-base;
transition: all 0.3s;
&:hover {
position: relative;
@ -102,8 +104,8 @@
}
&-contain-tabs > &-head &-head-title {
padding-bottom: 0;
min-height: @card-head-height - @card-head-padding;
padding-bottom: 0;
}
&-contain-tabs &-extra {
@ -112,8 +114,8 @@
&-cover {
> * {
width: 100%;
display: block;
width: 100%;
}
img {
border-radius: @card-radius @card-radius 0 0;
@ -121,26 +123,26 @@
}
&-actions {
border-top: @border-width-base @border-style-base @border-color-split;
background: @card-actions-background;
.clearfix;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
background: @card-actions-background;
border-top: @border-width-base @border-style-base @border-color-split;
.clearfix;
& > li {
float: left;
text-align: center;
margin: 12px 0;
color: @text-color-secondary;
text-align: center;
& > span {
position: relative;
display: inline-block;
min-width: 32px;
font-size: 14px;
cursor: pointer;
line-height: 22px;
min-width: 32px;
position: relative;
cursor: pointer;
&:hover {
color: @primary-color;
@ -153,10 +155,10 @@
}
a {
color: @text-color-secondary;
line-height: 22px;
display: inline-block;
width: 100%;
color: @text-color-secondary;
line-height: 22px;
&:hover {
color: @primary-color;
@ -206,8 +208,8 @@
.clearfix;
&-avatar {
padding-right: 16px;
float: left;
padding-right: 16px;
}
&-detail {
@ -218,12 +220,12 @@
}
&-title {
font-size: @font-size-lg;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: @card-head-color;
font-weight: 500;
font-size: @font-size-lg;
white-space: nowrap;
text-overflow: ellipsis;
}
&-description {
@ -233,17 +235,6 @@
&-loading {
overflow: hidden;
position: relative;
&:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: @card-padding-base;
background: @component-background;
content: '';
}
}
&-loading &-body {
@ -259,15 +250,10 @@
&-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;
background: linear-gradient(
90deg,
rgba(207, 216, 220, 0.2),
rgba(207, 216, 220, 0.4),
rgba(207, 216, 220, 0.2)
);
animation: card-loading 1.4s ease infinite;
background-size: 600% 600%;
}
}
@ -280,3 +266,5 @@
background-position: 100% 50%;
}
}
@import './size';

25
components/card/style/size.less
Unescape View File

@ -0,0 +1,25 @@
@card-head-height-sm: 36px;
@card-padding-base-sm: @card-padding-base / 2;
@card-head-padding-sm: @card-head-padding / 2;
@card-head-font-size-sm: @font-size-base;
.@{card-prefix-cls}-small {
> .@{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;
}
}

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

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

1
components/cascader/style/index.js
Unescape View File

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

60
components/cascader/style/index.less
Unescape View File

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

84
components/checkbox/style/mixin.less
Unescape View File

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

33
components/collapse/style/index.less
Unescape View File

@ -3,19 +3,12 @@
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
.collapse-close() {
transform: rotate(0);
}
.collapse-open() {
transform: rotate(90deg);
}
.@{collapse-prefix-cls} {
.reset-component;
background-color: @collapse-header-bg;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
border-radius: @border-radius-base;
& > &-item {
border-bottom: @border-width-base @border-style-base @border-color-base;
@ -28,25 +21,25 @@
}
> .@{collapse-prefix-cls}-header {
line-height: 22px;
position: relative;
padding: @collapse-header-padding;
color: @heading-color;
line-height: 22px;
cursor: pointer;
position: relative;
transition: all 0.3s;
.arrow {
.@{collapse-prefix-cls}-arrow {
.iconfont-mixin();
font-size: @font-size-sm;
position: absolute;
top: 50%;
left: @padding-md;
display: inline-block;
margin-top: 2px;
font-size: @font-size-sm;
line-height: 46px;
vertical-align: top;
top: 50%;
transform: translateY(-50%);
left: @padding-md;
& svg {
.collapse-close();
transition: transform 0.24s;
}
}
@ -88,12 +81,6 @@
}
}
& > &-item > &-header[aria-expanded='true'] {
.anticon-right svg {
.collapse-open();
}
}
&-borderless {
background-color: @component-background;
border: 0;
@ -120,8 +107,8 @@
& &-item-disabled > &-header {
&,
& > .arrow {
cursor: not-allowed;
color: @disabled-color;
cursor: not-allowed;
}
}
}

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

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

2
scripts/syncStyleFromAntd.js
Unescape View File

@ -6,7 +6,7 @@ const path = require('path');
const owner = 'ant-design';
const repo = 'ant-design';
const tag = '3.11.6';
const tag = '3.13.6';
const clientId = '5f6ccfdc4cdc69f8ba12';
const clientSecret = process.env.CLIENT_SECRET;

Write Preview
Loading…
Cancel
Save