1 | @import '../../style/themes/default';
|
2 | @import '../../style/mixins/index';
|
3 |
|
4 | @card-prefix-cls: ~'@{c7n-prefix}-card';
|
5 | @card-head-height: 0.48rem;
|
6 | @card-hover-border: rgba(0, 0, 0, 0.09);
|
7 |
|
8 | .@{card-prefix-cls} {
|
9 | .reset-component;
|
10 | position: relative;
|
11 | background: @component-background;
|
12 | border-radius: @border-radius-sm;
|
13 | transition: all @animation-duration-slow;
|
14 |
|
15 | &-hoverable {
|
16 | cursor: pointer;
|
17 | &:hover {
|
18 | border-color: @card-hover-border;
|
19 | box-shadow: @card-shadow;
|
20 | }
|
21 | }
|
22 |
|
23 | &-bordered {
|
24 | border: @border-width-base @border-style-base @border-color-split;
|
25 | }
|
26 |
|
27 | &-head {
|
28 | min-height: @card-head-height;
|
29 | margin-bottom: -0.01rem;
|
30 | padding: 0 @card-padding-base;
|
31 | background: @card-head-background;
|
32 | border-bottom: @border-width-base @border-style-base @border-color-split;
|
33 | border-radius: @border-radius-sm @border-radius-sm 0 0;
|
34 | .clearfix;
|
35 |
|
36 | &-wrapper {
|
37 | display: flex;
|
38 | }
|
39 |
|
40 | &-title {
|
41 | display: inline-block;
|
42 | flex: 1;
|
43 | padding: @card-head-padding 0;
|
44 | overflow: hidden;
|
45 | color: @card-head-color;
|
46 | font-weight: 500;
|
47 | font-size: @font-size-lg;
|
48 | white-space: nowrap;
|
49 | text-overflow: ellipsis;
|
50 | }
|
51 |
|
52 | .@{c7n-prefix}-tabs {
|
53 | clear: both;
|
54 | margin-bottom: -0.17rem;
|
55 |
|
56 | &-bar {
|
57 | border-bottom: @border-width-base @border-style-base @border-color-split;
|
58 | }
|
59 | }
|
60 | }
|
61 |
|
62 | &-extra {
|
63 | float: right;
|
64 |
|
65 | margin-left: auto;
|
66 | padding: @card-head-padding + 0.015rem 0;
|
67 | text-align: right;
|
68 | }
|
69 |
|
70 | &-body {
|
71 | padding: @card-padding-base;
|
72 | .clearfix;
|
73 | }
|
74 |
|
75 | &-contain-grid &-body {
|
76 | margin: -0.01rem 0 0 -0.01rem;
|
77 | padding: 0;
|
78 | }
|
79 |
|
80 | &-grid {
|
81 | float: left;
|
82 | width: 33.33%;
|
83 | padding: @card-padding-base;
|
84 | border: 0;
|
85 | border-radius: 0;
|
86 | box-shadow: 0.01rem 0 0 0 @border-color-split, 0 0.01rem 0 0 @border-color-split,
|
87 | 0.01rem 0.01rem 0 0 @border-color-split, 0.01rem 0 0 0 @border-color-split inset,
|
88 | 0 0.01rem 0 0 @border-color-split inset;
|
89 | transition: all @animation-duration-slow;
|
90 | &:hover {
|
91 | position: relative;
|
92 | z-index: 1;
|
93 | box-shadow: @box-shadow-base;
|
94 | }
|
95 | }
|
96 |
|
97 | &-contain-tabs &-head-title {
|
98 | min-height: @card-head-height - @card-head-padding;
|
99 | padding-bottom: 0;
|
100 | }
|
101 |
|
102 | &-contain-tabs &-extra {
|
103 | padding-bottom: 0;
|
104 | }
|
105 |
|
106 | &-cover > * {
|
107 | display: block;
|
108 | width: 100%;
|
109 | }
|
110 |
|
111 | &-actions {
|
112 | margin: 0;
|
113 | padding: 0;
|
114 | list-style: none;
|
115 | background: @card-actions-background;
|
116 | border-top: @border-width-base @border-style-base @border-color-split;
|
117 | .clearfix;
|
118 |
|
119 | & > li {
|
120 | float: left;
|
121 | margin: 0.12rem 0;
|
122 | color: @text-color-secondary;
|
123 | text-align: center;
|
124 |
|
125 | & > span {
|
126 | position: relative;
|
127 | display: inline-block;
|
128 | min-width: 0.32rem;
|
129 | font-size: 0.14rem;
|
130 | line-height: 0.22rem;
|
131 | cursor: pointer;
|
132 |
|
133 | &:hover {
|
134 | color: @primary-color;
|
135 | transition: color @animation-duration-slow;
|
136 | }
|
137 |
|
138 | & > .anticon {
|
139 | font-size: 0.16rem;
|
140 | }
|
141 |
|
142 | a {
|
143 | color: @text-color-secondary;
|
144 |
|
145 | &:hover {
|
146 | color: @primary-color;
|
147 | }
|
148 | }
|
149 | }
|
150 |
|
151 | &:not(:last-child) {
|
152 | border-right: @border-width-base @border-style-base @border-color-split;
|
153 | }
|
154 | }
|
155 | }
|
156 |
|
157 | &-wider-padding &-head {
|
158 | padding: 0 @card-padding-wider;
|
159 | }
|
160 |
|
161 | &-wider-padding &-body {
|
162 | padding: @card-padding-base @card-padding-wider;
|
163 | }
|
164 |
|
165 | &-padding-transition &-head,
|
166 | &-padding-transition &-body {
|
167 | transition: padding @animation-duration-slow;
|
168 | }
|
169 |
|
170 | &-padding-transition &-extra {
|
171 | transition: right @animation-duration-slow;
|
172 | }
|
173 |
|
174 | &-type-inner &-head {
|
175 | padding: 0 @card-padding-base;
|
176 | background: @background-color-light;
|
177 |
|
178 | &-title {
|
179 | padding: @card-inner-head-padding 0;
|
180 | font-size: @font-size-base;
|
181 | }
|
182 | }
|
183 |
|
184 | &-type-inner &-body {
|
185 | padding: 0.16rem @card-padding-base;
|
186 | }
|
187 |
|
188 | &-type-inner &-extra {
|
189 | padding: @card-inner-head-padding + 0.015rem 0;
|
190 | }
|
191 |
|
192 | &-meta {
|
193 | margin: -0.04rem 0;
|
194 | .clearfix;
|
195 |
|
196 | &-avatar {
|
197 | float: left;
|
198 | padding-right: 0.16rem;
|
199 | }
|
200 |
|
201 | &-detail {
|
202 | overflow: hidden;
|
203 | > div:not(:last-child) {
|
204 | margin-bottom: 0.08rem;
|
205 | }
|
206 | }
|
207 |
|
208 | &-title {
|
209 | overflow: hidden;
|
210 | color: @card-head-color;
|
211 | font-weight: 500;
|
212 | font-size: @font-size-lg;
|
213 | white-space: nowrap;
|
214 | text-overflow: ellipsis;
|
215 | }
|
216 |
|
217 | &-description {
|
218 | color: @text-color-secondary;
|
219 | }
|
220 | }
|
221 |
|
222 | &-loading &-body {
|
223 | padding: 0;
|
224 | user-select: none;
|
225 | }
|
226 |
|
227 | &-loading-content {
|
228 | padding: @card-padding-base;
|
229 | p {
|
230 | margin: 0;
|
231 | }
|
232 | }
|
233 |
|
234 | &-loading-block {
|
235 | display: inline-block;
|
236 | height: 0.14rem;
|
237 | margin: 0.05rem 2% 0 0;
|
238 | background: linear-gradient(
|
239 | 90deg,
|
240 | rgba(207, 216, 220, 0.2),
|
241 | rgba(207, 216, 220, 0.4),
|
242 | rgba(207, 216, 220, 0.2)
|
243 | );
|
244 | background-size: 600% 600%;
|
245 | border-radius: @border-radius-sm;
|
246 | animation: card-loading 1.4s ease infinite;
|
247 | }
|
248 | }
|
249 |
|
250 | @keyframes card-loading {
|
251 | 0%,
|
252 | 100% {
|
253 | background-position: 0 50%;
|
254 | }
|
255 | 50% {
|
256 | background-position: 100% 50%;
|
257 | }
|
258 | }
|