ant-design/components/progress/style/index.less

167 lines
3.1 KiB
Plaintext
Raw Normal View History

@import "../../style/themes/default";
@import "../../style/mixins/index";
@progress-prefix-cls: ~"@{ant-prefix}-progress";
2015-06-14 19:50:23 +08:00
2015-08-20 16:55:42 +08:00
.@{progress-prefix-cls} {
.reset-component;
2016-04-05 16:51:26 +08:00
display: inline-block;
&-line {
2015-07-29 22:20:05 +08:00
width: 100%;
2016-11-08 20:57:07 +08:00
font-size: @font-size-base;
2015-07-29 22:20:05 +08:00
position: relative;
}
2016-04-05 16:51:26 +08:00
&-small&-line,
&-small&-line &-text .@{iconfont-css-prefix} {
font-size: @font-size-sm;
}
2016-04-05 16:51:26 +08:00
&-outer {
2016-03-28 16:52:00 +08:00
display: inline-block;
width: 100%;
2016-04-05 16:51:26 +08:00
margin-right: 0;
padding-right: 0;
.@{progress-prefix-cls}-show-info & {
padding-right: ~"calc(2em + 8px)";
margin-right: ~"calc(-2em - 8px)";
2015-07-30 17:27:41 +08:00
}
}
2016-04-05 16:51:26 +08:00
&-inner {
2015-06-14 19:50:23 +08:00
display: inline-block;
2015-07-29 22:20:05 +08:00
width: 100%;
background-color: @progress-remaining-color;
2015-07-29 22:20:05 +08:00
border-radius: 100px;
2016-03-28 16:52:00 +08:00
vertical-align: middle;
2018-01-19 15:22:37 +08:00
position: relative;
2015-07-29 22:20:05 +08:00
}
2016-04-05 16:51:26 +08:00
&-circle-trail {
stroke: @progress-remaining-color;
}
&-circle-path {
stroke: @progress-default-color;
2017-08-15 16:48:49 +08:00
animation: ~"@{ant-prefix}-progress-appear" .3s;
}
2018-01-19 15:22:37 +08:00
&-success-bg,
2016-04-05 16:51:26 +08:00
&-bg {
background-color: @progress-default-color;
2016-07-21 14:27:54 +08:00
transition: all .4s @ease-out-circ 0s;
2015-09-23 11:56:38 +08:00
position: relative;
2015-06-14 19:50:23 +08:00
}
2016-04-05 16:51:26 +08:00
2018-01-19 15:22:37 +08:00
&-success-bg {
background-color: @success-color;
position: absolute;
top: 0;
left: 0;
}
2016-04-05 16:51:26 +08:00
&-text {
word-break: normal;
2017-06-05 14:12:59 +08:00
width: 2em;
2015-07-29 22:20:05 +08:00
text-align: left;
2015-06-14 19:50:23 +08:00
font-size: 1em;
margin-left: 8px;
2016-03-28 16:52:00 +08:00
vertical-align: middle;
display: inline-block;
color: @text-color-secondary;
line-height: 1;
.@{iconfont-css-prefix} {
2016-11-08 20:57:07 +08:00
font-size: @font-size-base;
2015-06-14 19:50:23 +08:00
}
}
2016-04-05 16:51:26 +08:00
&-status-active {
.@{progress-prefix-cls}-bg:before {
2015-07-30 15:07:38 +08:00
content: "";
opacity: 0;
position: absolute;
2015-08-20 16:55:42 +08:00
top: 0;
left: 0;
right: 0;
bottom: 0;
background: @component-background;
2015-07-30 15:07:38 +08:00
border-radius: 10px;
2017-01-09 23:05:18 +08:00
animation: ~"@{ant-prefix}-progress-active" 2.4s @ease-out-quint infinite;
2015-07-30 15:07:38 +08:00
}
}
2016-04-05 16:51:26 +08:00
&-status-exception {
.@{progress-prefix-cls}-bg {
2015-07-30 15:07:38 +08:00
background-color: @error-color;
2015-07-29 22:20:05 +08:00
}
2016-04-05 16:51:26 +08:00
.@{progress-prefix-cls}-text {
2015-07-30 15:07:38 +08:00
color: @error-color;
2015-07-29 22:20:05 +08:00
}
.@{progress-prefix-cls}-circle-path {
stroke: @error-color;
}
2015-07-29 22:20:05 +08:00
}
2016-04-05 16:51:26 +08:00
&-status-success {
.@{progress-prefix-cls}-bg {
2015-07-30 15:07:38 +08:00
background-color: @success-color;
2015-07-29 22:20:05 +08:00
}
2016-04-05 16:51:26 +08:00
.@{progress-prefix-cls}-text {
2015-07-30 15:07:38 +08:00
color: @success-color;
2015-07-29 22:20:05 +08:00
}
.@{progress-prefix-cls}-circle-path {
stroke: @success-color;
}
2015-07-29 22:20:05 +08:00
}
2015-06-14 20:07:21 +08:00
2016-04-05 16:51:26 +08:00
&-circle &-inner {
2015-06-14 20:07:21 +08:00
position: relative;
2015-06-14 23:04:43 +08:00
line-height: 1;
2016-04-05 16:51:26 +08:00
background-color: transparent;
2015-06-14 20:07:21 +08:00
}
2016-04-05 16:51:26 +08:00
&-circle &-text {
2015-06-14 20:07:21 +08:00
display: block;
position: absolute;
width: 100%;
text-align: center;
2015-06-14 23:04:43 +08:00
line-height: 1;
2015-06-15 17:30:24 +08:00
top: 50%;
transform: translateY(-50%);
2015-06-14 23:04:43 +08:00
left: 0;
2016-04-05 16:51:26 +08:00
margin: 0;
color: @text-color;
2015-06-14 20:07:21 +08:00
.@{iconfont-css-prefix} {
2015-08-20 16:55:42 +08:00
font-size: 14 / 12em;
2015-06-14 20:07:21 +08:00
}
}
2016-04-05 16:51:26 +08:00
&-circle&-status-exception {
2016-04-05 16:51:26 +08:00
.@{progress-prefix-cls}-text {
2015-07-30 15:54:08 +08:00
color: @error-color;
2015-07-29 23:32:24 +08:00
}
}
&-circle&-status-success {
2016-04-05 16:51:26 +08:00
.@{progress-prefix-cls}-text {
2015-07-30 15:54:08 +08:00
color: @success-color;
2015-07-29 23:32:24 +08:00
}
}
2015-06-15 11:00:27 +08:00
}
2015-07-30 15:07:38 +08:00
@keyframes ~"@{ant-prefix}-progress-active" {
2015-07-30 15:07:38 +08:00
0% {
2017-01-09 23:05:18 +08:00
opacity: 0.1;
width: 0;
}
20% {
opacity: 0.5;
2015-07-30 15:07:38 +08:00
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}