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

152 lines
2.9 KiB
Plaintext
Raw Normal View History

@import "../../style/themes/default";
@badge-prefix-cls: ~"@{ant-prefix}-badge";
@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
2015-09-01 13:59:07 +08:00
.@{badge-prefix-cls} {
position: relative;
display: inline-block;
2015-09-18 17:24:14 +08:00
line-height: 1;
2016-03-09 11:50:02 +08:00
vertical-align: middle;
2015-09-01 13:59:07 +08:00
&-count {
position: absolute;
transform: translateX(-50%);
top: -@badge-height / 2;
height: @badge-height;
border-radius: @badge-height / 2;
min-width: @badge-height;
2016-11-09 21:30:02 +08:00
background: @highlight-color;
2015-09-01 13:59:07 +08:00
color: #fff;
line-height: @badge-height;
2015-09-01 13:59:07 +08:00
text-align: center;
padding: 0 6px;
font-size: @badge-font-size;
2015-09-01 13:59:07 +08:00
white-space: nowrap;
2015-11-18 23:42:01 +08:00
transform-origin: -10% center;
2015-09-01 13:59:07 +08:00
font-family: tahoma;
2015-11-26 19:32:55 +08:00
a,
a:hover {
2015-09-01 13:59:07 +08:00
color: #fff;
}
}
&-dot {
position: absolute;
2015-11-18 23:42:01 +08:00
transform: translateX(-50%);
transform-origin: 0 center;
top: -@badge-dot-size / 2;
height: @badge-dot-size;
width: @badge-dot-size;
2015-09-01 13:59:07 +08:00
border-radius: 100%;
2016-11-09 21:30:02 +08:00
background: @highlight-color;
2015-09-01 13:59:07 +08:00
z-index: 10;
2015-09-01 17:26:06 +08:00
box-shadow: 0 0 0 1px #fff;
2015-09-01 13:59:07 +08:00
}
2015-11-19 00:13:16 +08:00
&-status {
2016-10-12 19:42:10 +08:00
line-height: inherit;
vertical-align: baseline;
2016-10-12 19:42:10 +08:00
&-dot {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
}
&-success {
background-color: @success-color;
}
&-processing {
background-color: @primary-color;
position: relative;
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid @primary-color;
content: '';
animation: antStatusProcessing 1.2s infinite ease-in-out;
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
&-text {
color: @text-color;
font-size: @badge-font-size;
2016-10-12 19:42:10 +08:00
margin-left: 8px;
}
}
2015-11-19 00:13:16 +08:00
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn .3s @ease-out-back;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomBadgeOut .3s @ease-in-back;
animation-fill-mode: both;
}
&-not-a-wrapper &-count {
top: auto;
display: block;
position: relative;
2016-10-24 11:48:25 +08:00
transform: none!important;
}
2015-09-01 13:59:07 +08:00
}
2015-09-01 17:16:51 +08:00
@keyframes antStatusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
2017-02-13 15:01:02 +08:00
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
2015-11-26 19:32:55 +08:00
.@{number-prefix-cls} {
2015-11-19 16:58:56 +08:00
overflow: hidden;
2015-11-26 19:32:55 +08:00
&-only {
2015-11-19 16:58:56 +08:00
display: inline-block;
transition: all .3s @ease-in-out;
height: @badge-height;
> p {
height: @badge-height;
}
2015-11-19 16:58:56 +08:00
}
}
2015-11-19 00:13:16 +08:00
@keyframes antZoomBadgeIn {
0% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
100% {
transform: scale(1) translateX(-50%);
}
}
@keyframes antZoomBadgeOut {
0% {
transform: scale(1) translateX(-50%);
}
100% {
opacity: 0;
transform: scale(0) translateX(-50%);
}
}