1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 |
|
4 | @badge-prefix-cls: ~'@{ant-prefix}-badge';
|
5 | @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
|
6 |
|
7 | .@{badge-prefix-cls} {
|
8 | .reset-component();
|
9 |
|
10 | position: relative;
|
11 | display: inline-block;
|
12 | line-height: 1;
|
13 |
|
14 | &-count {
|
15 | z-index: @zindex-badge;
|
16 | min-width: @badge-height;
|
17 | height: @badge-height;
|
18 | padding: 0 6px;
|
19 | color: @badge-text-color;
|
20 | font-weight: @badge-font-weight;
|
21 | font-size: @badge-font-size;
|
22 | line-height: @badge-height;
|
23 | white-space: nowrap;
|
24 | text-align: center;
|
25 | background: @badge-color;
|
26 | border-radius: (@badge-height / 2);
|
27 | box-shadow: 0 0 0 1px @shadow-color-inverse;
|
28 | a,
|
29 | a:hover {
|
30 | color: @badge-text-color;
|
31 | }
|
32 | }
|
33 |
|
34 | &-count-sm {
|
35 | min-width: @badge-height-sm;
|
36 | height: @badge-height-sm;
|
37 | padding: 0;
|
38 | font-size: @badge-font-size-sm;
|
39 | line-height: @badge-height-sm;
|
40 | border-radius: (@badge-height-sm / 2);
|
41 | }
|
42 |
|
43 | &-multiple-words {
|
44 | padding: 0 8px;
|
45 | }
|
46 |
|
47 | &-dot {
|
48 | z-index: @zindex-badge;
|
49 | width: @badge-dot-size;
|
50 | min-width: @badge-dot-size;
|
51 | height: @badge-dot-size;
|
52 | background: @highlight-color;
|
53 | border-radius: 100%;
|
54 | box-shadow: 0 0 0 1px @shadow-color-inverse;
|
55 | }
|
56 |
|
57 | &-count,
|
58 | &-dot,
|
59 | .@{number-prefix-cls}-custom-component {
|
60 | position: absolute;
|
61 | top: 0;
|
62 | right: 0;
|
63 | transform: translate(50%, -50%);
|
64 | transform-origin: 100% 0%;
|
65 |
|
66 | &.@{iconfont-css-prefix}-spin {
|
67 | animation: antBadgeLoadingCircle 1s infinite linear;
|
68 | }
|
69 | }
|
70 |
|
71 | &-status {
|
72 | line-height: inherit;
|
73 | vertical-align: baseline;
|
74 |
|
75 | &-dot {
|
76 | position: relative;
|
77 | top: -1px;
|
78 | display: inline-block;
|
79 | width: @badge-status-size;
|
80 | height: @badge-status-size;
|
81 | vertical-align: middle;
|
82 | border-radius: 50%;
|
83 | }
|
84 | &-success {
|
85 | background-color: @success-color;
|
86 | }
|
87 | &-processing {
|
88 | position: relative;
|
89 | background-color: @processing-color;
|
90 | &::after {
|
91 | position: absolute;
|
92 | top: 0;
|
93 | left: 0;
|
94 | width: 100%;
|
95 | height: 100%;
|
96 | border: 1px solid @processing-color;
|
97 | border-radius: 50%;
|
98 | animation: antStatusProcessing 1.2s infinite ease-in-out;
|
99 | content: '';
|
100 | }
|
101 | }
|
102 | &-default {
|
103 | background-color: @normal-color;
|
104 | }
|
105 | &-error {
|
106 | background-color: @error-color;
|
107 | }
|
108 | &-warning {
|
109 | background-color: @warning-color;
|
110 | }
|
111 |
|
112 |
|
113 | .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
|
114 | .make-color-classes(@i - 1);
|
115 | @color: extract(@preset-colors, @i);
|
116 | @darkColor: '@{color}-6';
|
117 | &-@{color} {
|
118 | background: @@darkColor;
|
119 | }
|
120 | }
|
121 | .make-color-classes();
|
122 |
|
123 | &-text {
|
124 | margin-left: 8px;
|
125 | color: @text-color;
|
126 | font-size: @font-size-base;
|
127 | }
|
128 | }
|
129 |
|
130 | &-zoom-appear,
|
131 | &-zoom-enter {
|
132 | animation: antZoomBadgeIn @animation-duration-slow @ease-out-back;
|
133 | animation-fill-mode: both;
|
134 | }
|
135 |
|
136 | &-zoom-leave {
|
137 | animation: antZoomBadgeOut @animation-duration-slow @ease-in-back;
|
138 | animation-fill-mode: both;
|
139 | }
|
140 |
|
141 | &-not-a-wrapper {
|
142 | .@{badge-prefix-cls}-zoom-appear,
|
143 | .@{badge-prefix-cls}-zoom-enter {
|
144 | animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back;
|
145 | }
|
146 |
|
147 | .@{badge-prefix-cls}-zoom-leave {
|
148 | animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back;
|
149 | }
|
150 |
|
151 | &:not(.@{badge-prefix-cls}-status) {
|
152 | vertical-align: middle;
|
153 | }
|
154 |
|
155 | .@{number-prefix-cls}-custom-component {
|
156 | transform: none;
|
157 | }
|
158 |
|
159 | .@{number-prefix-cls}-custom-component,
|
160 | .@{ant-prefix}-scroll-number {
|
161 | position: relative;
|
162 | top: auto;
|
163 | display: block;
|
164 | transform-origin: 50% 50%;
|
165 | }
|
166 |
|
167 | .@{badge-prefix-cls}-count {
|
168 | transform: none;
|
169 | }
|
170 | }
|
171 | }
|
172 |
|
173 | @keyframes antStatusProcessing {
|
174 | 0% {
|
175 | transform: scale(0.8);
|
176 | opacity: 0.5;
|
177 | }
|
178 | 100% {
|
179 | transform: scale(2.4);
|
180 | opacity: 0;
|
181 | }
|
182 | }
|
183 |
|
184 |
|
185 | .safari-fix-motion() {
|
186 | -webkit-transform-style: preserve-3d;
|
187 | -webkit-backface-visibility: hidden;
|
188 | }
|
189 |
|
190 | .@{number-prefix-cls} {
|
191 | overflow: hidden;
|
192 | &-only {
|
193 | position: relative;
|
194 | display: inline-block;
|
195 | height: @badge-height;
|
196 | transition: all @animation-duration-slow @ease-in-out;
|
197 | .safari-fix-motion;
|
198 |
|
199 | > p.@{number-prefix-cls}-only-unit {
|
200 | height: @badge-height;
|
201 | margin: 0;
|
202 | .safari-fix-motion;
|
203 | }
|
204 | }
|
205 |
|
206 | &-symbol {
|
207 | vertical-align: top;
|
208 | }
|
209 | }
|
210 |
|
211 | @keyframes antZoomBadgeIn {
|
212 | 0% {
|
213 | transform: scale(0) translate(50%, -50%);
|
214 | opacity: 0;
|
215 | }
|
216 | 100% {
|
217 | transform: scale(1) translate(50%, -50%);
|
218 | }
|
219 | }
|
220 |
|
221 | @keyframes antZoomBadgeOut {
|
222 | 0% {
|
223 | transform: scale(1) translate(50%, -50%);
|
224 | }
|
225 | 100% {
|
226 | transform: scale(0) translate(50%, -50%);
|
227 | opacity: 0;
|
228 | }
|
229 | }
|
230 |
|
231 | @keyframes antNoWrapperZoomBadgeIn {
|
232 | 0% {
|
233 | transform: scale(0);
|
234 | opacity: 0;
|
235 | }
|
236 | 100% {
|
237 | transform: scale(1);
|
238 | }
|
239 | }
|
240 |
|
241 | @keyframes antNoWrapperZoomBadgeOut {
|
242 | 0% {
|
243 | transform: scale(1);
|
244 | }
|
245 | 100% {
|
246 | transform: scale(0);
|
247 | opacity: 0;
|
248 | }
|
249 | }
|
250 |
|
251 | @keyframes antBadgeLoadingCircle {
|
252 | 0% {
|
253 | transform-origin: 50%;
|
254 | }
|
255 |
|
256 | 100% {
|
257 | transform: translate(50%, -50%) rotate(360deg);
|
258 | transform-origin: 50%;
|
259 | }
|
260 | }
|
261 |
|
262 | @import './ribbon';
|
263 | @import './rtl';
|