@appscode/design-system 2.17.42 → 2.17.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/main.scss +1 -0
- package/package.json +1 -1
- package/vue-components/styles/components/_all.scss +1 -0
- package/vue-components/styles/components/_skeletons.scss +38 -0
- package/vue-components/v3/cards/DbCard.vue +137 -29
- package/vue-components/v3/skeleton/Skeleton.vue +5 -42
- package/vue-components/v3/table/ListTable.vue +240 -0
package/main.scss
CHANGED
|
@@ -34,5 +34,6 @@
|
|
|
34
34
|
@import "@/components/vue-components/styles/components/cards/cards-group";
|
|
35
35
|
@import "@/components/vue-components/styles/components/file-explore";
|
|
36
36
|
@import "@/components/vue-components/styles/components/ac-duration";
|
|
37
|
+
@import "@/components/vue-components/styles/components/skeletons";
|
|
37
38
|
|
|
38
39
|
// @import "@/components/vue-components/styles/theme/appscode.scss";
|
package/package.json
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.skeletons {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 8px;
|
|
5
|
+
}
|
|
6
|
+
.skeleton {
|
|
7
|
+
background: linear-gradient(90deg, $secondary-95 25%, $secondary-90 50%, $secondary-95 75%);
|
|
8
|
+
background-size: 200% 100%;
|
|
9
|
+
animation: loading 2s infinite ease-in-out;
|
|
10
|
+
border-radius: 4px;
|
|
11
|
+
display: flex;
|
|
12
|
+
height: var(--height);
|
|
13
|
+
width: var(--width);
|
|
14
|
+
&.is-rounded {
|
|
15
|
+
border-radius: 50%;
|
|
16
|
+
}
|
|
17
|
+
&.is-dark {
|
|
18
|
+
background: linear-gradient(
|
|
19
|
+
90deg,
|
|
20
|
+
$secondary-30 0%,
|
|
21
|
+
$secondary-30 20%,
|
|
22
|
+
$secondary-10 50%,
|
|
23
|
+
$secondary-30 80%,
|
|
24
|
+
$secondary-30 100%
|
|
25
|
+
);
|
|
26
|
+
background-size: 200% 100%;
|
|
27
|
+
animation: loading 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@keyframes loading {
|
|
32
|
+
0% {
|
|
33
|
+
background-position: 200% 0;
|
|
34
|
+
}
|
|
35
|
+
100% {
|
|
36
|
+
background-position: -200% 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="columns is-multiline is-mobile
|
|
2
|
+
<div class="columns is-multiline is-mobile">
|
|
3
3
|
<!-- MariaDB Card -->
|
|
4
4
|
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
5
5
|
<div class="card db-card db-card-blue">
|
|
6
6
|
<div class="card-gradient"></div>
|
|
7
7
|
<div class="card-glow"></div>
|
|
8
|
-
|
|
8
|
+
|
|
9
9
|
<div class="card-content">
|
|
10
10
|
<div class="level is-mobile mb-4">
|
|
11
11
|
<div class="level-left">
|
|
12
12
|
<div class="icon-wrapper icon-blue">
|
|
13
|
-
<svg
|
|
13
|
+
<svg
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
width="24"
|
|
16
|
+
height="24"
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
stroke="currentColor"
|
|
20
|
+
stroke-width="2"
|
|
21
|
+
stroke-linecap="round"
|
|
22
|
+
stroke-linejoin="round"
|
|
23
|
+
>
|
|
14
24
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
15
25
|
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
16
26
|
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
@@ -19,7 +29,17 @@
|
|
|
19
29
|
</div>
|
|
20
30
|
<div class="level-right">
|
|
21
31
|
<span class="status-badge">
|
|
22
|
-
<svg
|
|
32
|
+
<svg
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
width="16"
|
|
35
|
+
height="16"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
fill="none"
|
|
38
|
+
stroke="currentColor"
|
|
39
|
+
stroke-width="2.5"
|
|
40
|
+
stroke-linecap="round"
|
|
41
|
+
stroke-linejoin="round"
|
|
42
|
+
>
|
|
23
43
|
<circle cx="12" cy="12" r="10"></circle>
|
|
24
44
|
<path d="m9 12 2 2 4-4"></path>
|
|
25
45
|
</svg>
|
|
@@ -70,12 +90,22 @@
|
|
|
70
90
|
<div class="card db-card db-card-green">
|
|
71
91
|
<div class="card-gradient"></div>
|
|
72
92
|
<div class="card-glow"></div>
|
|
73
|
-
|
|
93
|
+
|
|
74
94
|
<div class="card-content">
|
|
75
95
|
<div class="level is-mobile mb-4">
|
|
76
96
|
<div class="level-left">
|
|
77
97
|
<div class="icon-wrapper icon-green">
|
|
78
|
-
<svg
|
|
98
|
+
<svg
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
width="24"
|
|
101
|
+
height="24"
|
|
102
|
+
viewBox="0 0 24 24"
|
|
103
|
+
fill="none"
|
|
104
|
+
stroke="currentColor"
|
|
105
|
+
stroke-width="2"
|
|
106
|
+
stroke-linecap="round"
|
|
107
|
+
stroke-linejoin="round"
|
|
108
|
+
>
|
|
79
109
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
80
110
|
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
81
111
|
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
@@ -84,7 +114,17 @@
|
|
|
84
114
|
</div>
|
|
85
115
|
<div class="level-right">
|
|
86
116
|
<span class="status-badge">
|
|
87
|
-
<svg
|
|
117
|
+
<svg
|
|
118
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
119
|
+
width="16"
|
|
120
|
+
height="16"
|
|
121
|
+
viewBox="0 0 24 24"
|
|
122
|
+
fill="none"
|
|
123
|
+
stroke="currentColor"
|
|
124
|
+
stroke-width="2.5"
|
|
125
|
+
stroke-linecap="round"
|
|
126
|
+
stroke-linejoin="round"
|
|
127
|
+
>
|
|
88
128
|
<circle cx="12" cy="12" r="10"></circle>
|
|
89
129
|
<path d="m9 12 2 2 4-4"></path>
|
|
90
130
|
</svg>
|
|
@@ -135,12 +175,22 @@
|
|
|
135
175
|
<div class="card db-card db-card-orange">
|
|
136
176
|
<div class="card-gradient"></div>
|
|
137
177
|
<div class="card-glow"></div>
|
|
138
|
-
|
|
178
|
+
|
|
139
179
|
<div class="card-content">
|
|
140
180
|
<div class="level is-mobile mb-4">
|
|
141
181
|
<div class="level-left">
|
|
142
182
|
<div class="icon-wrapper icon-orange">
|
|
143
|
-
<svg
|
|
183
|
+
<svg
|
|
184
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
185
|
+
width="24"
|
|
186
|
+
height="24"
|
|
187
|
+
viewBox="0 0 24 24"
|
|
188
|
+
fill="none"
|
|
189
|
+
stroke="currentColor"
|
|
190
|
+
stroke-width="2"
|
|
191
|
+
stroke-linecap="round"
|
|
192
|
+
stroke-linejoin="round"
|
|
193
|
+
>
|
|
144
194
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
145
195
|
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
146
196
|
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
@@ -149,7 +199,17 @@
|
|
|
149
199
|
</div>
|
|
150
200
|
<div class="level-right">
|
|
151
201
|
<span class="status-badge">
|
|
152
|
-
<svg
|
|
202
|
+
<svg
|
|
203
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
204
|
+
width="16"
|
|
205
|
+
height="16"
|
|
206
|
+
viewBox="0 0 24 24"
|
|
207
|
+
fill="none"
|
|
208
|
+
stroke="currentColor"
|
|
209
|
+
stroke-width="2.5"
|
|
210
|
+
stroke-linecap="round"
|
|
211
|
+
stroke-linejoin="round"
|
|
212
|
+
>
|
|
153
213
|
<circle cx="12" cy="12" r="10"></circle>
|
|
154
214
|
<path d="m9 12 2 2 4-4"></path>
|
|
155
215
|
</svg>
|
|
@@ -200,12 +260,22 @@
|
|
|
200
260
|
<div class="card db-card db-card-cyan">
|
|
201
261
|
<div class="card-gradient"></div>
|
|
202
262
|
<div class="card-glow"></div>
|
|
203
|
-
|
|
263
|
+
|
|
204
264
|
<div class="card-content">
|
|
205
265
|
<div class="level is-mobile mb-4">
|
|
206
266
|
<div class="level-left">
|
|
207
267
|
<div class="icon-wrapper icon-cyan">
|
|
208
|
-
<svg
|
|
268
|
+
<svg
|
|
269
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
270
|
+
width="24"
|
|
271
|
+
height="24"
|
|
272
|
+
viewBox="0 0 24 24"
|
|
273
|
+
fill="none"
|
|
274
|
+
stroke="currentColor"
|
|
275
|
+
stroke-width="2"
|
|
276
|
+
stroke-linecap="round"
|
|
277
|
+
stroke-linejoin="round"
|
|
278
|
+
>
|
|
209
279
|
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
210
280
|
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
211
281
|
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
@@ -214,7 +284,17 @@
|
|
|
214
284
|
</div>
|
|
215
285
|
<div class="level-right">
|
|
216
286
|
<span class="status-badge">
|
|
217
|
-
<svg
|
|
287
|
+
<svg
|
|
288
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
289
|
+
width="16"
|
|
290
|
+
height="16"
|
|
291
|
+
viewBox="0 0 24 24"
|
|
292
|
+
fill="none"
|
|
293
|
+
stroke="currentColor"
|
|
294
|
+
stroke-width="2.5"
|
|
295
|
+
stroke-linecap="round"
|
|
296
|
+
stroke-linejoin="round"
|
|
297
|
+
>
|
|
218
298
|
<circle cx="12" cy="12" r="10"></circle>
|
|
219
299
|
<path d="m9 12 2 2 4-4"></path>
|
|
220
300
|
</svg>
|
|
@@ -265,12 +345,22 @@
|
|
|
265
345
|
<div class="card db-card db-card-red">
|
|
266
346
|
<div class="card-gradient"></div>
|
|
267
347
|
<div class="card-glow"></div>
|
|
268
|
-
|
|
348
|
+
|
|
269
349
|
<div class="card-content">
|
|
270
350
|
<div class="level is-mobile mb-4">
|
|
271
351
|
<div class="level-left">
|
|
272
352
|
<div class="icon-wrapper icon-red">
|
|
273
|
-
<svg
|
|
353
|
+
<svg
|
|
354
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
355
|
+
width="24"
|
|
356
|
+
height="24"
|
|
357
|
+
viewBox="0 0 24 24"
|
|
358
|
+
fill="none"
|
|
359
|
+
stroke="currentColor"
|
|
360
|
+
stroke-width="2"
|
|
361
|
+
stroke-linecap="round"
|
|
362
|
+
stroke-linejoin="round"
|
|
363
|
+
>
|
|
274
364
|
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
|
|
275
365
|
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
|
|
276
366
|
<line x1="6" x2="6.01" y1="6" y2="6"></line>
|
|
@@ -280,7 +370,17 @@
|
|
|
280
370
|
</div>
|
|
281
371
|
<div class="level-right">
|
|
282
372
|
<span class="status-badge">
|
|
283
|
-
<svg
|
|
373
|
+
<svg
|
|
374
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
375
|
+
width="16"
|
|
376
|
+
height="16"
|
|
377
|
+
viewBox="0 0 24 24"
|
|
378
|
+
fill="none"
|
|
379
|
+
stroke="currentColor"
|
|
380
|
+
stroke-width="2.5"
|
|
381
|
+
stroke-linecap="round"
|
|
382
|
+
stroke-linejoin="round"
|
|
383
|
+
>
|
|
284
384
|
<circle cx="12" cy="12" r="10"></circle>
|
|
285
385
|
<path d="m9 12 2 2 4-4"></path>
|
|
286
386
|
</svg>
|
|
@@ -325,14 +425,10 @@
|
|
|
325
425
|
</div>
|
|
326
426
|
</div>
|
|
327
427
|
</div>
|
|
328
|
-
|
|
329
|
-
|
|
330
428
|
</div>
|
|
331
429
|
</template>
|
|
332
430
|
|
|
333
|
-
<script setup>
|
|
334
|
-
|
|
335
|
-
</script>
|
|
431
|
+
<script setup></script>
|
|
336
432
|
|
|
337
433
|
<style scoped>
|
|
338
434
|
/* Container */
|
|
@@ -651,7 +747,7 @@
|
|
|
651
747
|
}
|
|
652
748
|
|
|
653
749
|
.stats-section .tag {
|
|
654
|
-
font-family:
|
|
750
|
+
font-family: "Courier New", monospace;
|
|
655
751
|
background-color: rgba(0, 0, 0, 0.03);
|
|
656
752
|
}
|
|
657
753
|
|
|
@@ -675,19 +771,31 @@
|
|
|
675
771
|
animation: fadeInUp 0.5s ease-out;
|
|
676
772
|
}
|
|
677
773
|
|
|
678
|
-
.column:nth-child(1) .db-card {
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
.column:nth-child(
|
|
682
|
-
|
|
683
|
-
|
|
774
|
+
.column:nth-child(1) .db-card {
|
|
775
|
+
animation-delay: 0ms;
|
|
776
|
+
}
|
|
777
|
+
.column:nth-child(2) .db-card {
|
|
778
|
+
animation-delay: 50ms;
|
|
779
|
+
}
|
|
780
|
+
.column:nth-child(3) .db-card {
|
|
781
|
+
animation-delay: 100ms;
|
|
782
|
+
}
|
|
783
|
+
.column:nth-child(4) .db-card {
|
|
784
|
+
animation-delay: 150ms;
|
|
785
|
+
}
|
|
786
|
+
.column:nth-child(5) .db-card {
|
|
787
|
+
animation-delay: 200ms;
|
|
788
|
+
}
|
|
789
|
+
.column:nth-child(6) .db-card {
|
|
790
|
+
animation-delay: 250ms;
|
|
791
|
+
}
|
|
684
792
|
|
|
685
793
|
/* Responsive adjustments */
|
|
686
794
|
@media screen and (max-width: 768px) {
|
|
687
795
|
.db-cards-container {
|
|
688
796
|
padding: 0.5rem;
|
|
689
797
|
}
|
|
690
|
-
|
|
798
|
+
|
|
691
799
|
.icon-wrapper {
|
|
692
800
|
width: 2.5rem;
|
|
693
801
|
height: 2.5rem;
|
|
@@ -17,46 +17,9 @@ withDefaults(defineProps<Props>(), {
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
|
-
<div
|
|
20
|
+
<div
|
|
21
|
+
class="skeleton"
|
|
22
|
+
:class="[rounded ? 'is-rounded' : '', dark ? 'is-dark' : '', modifierClasses]"
|
|
23
|
+
:style="[{ height: height, width: width }]"
|
|
24
|
+
></div>
|
|
21
25
|
</template>
|
|
22
|
-
|
|
23
|
-
<style lang="scss">
|
|
24
|
-
.skeletons {
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
27
|
-
gap: 8px;
|
|
28
|
-
}
|
|
29
|
-
.skeleton {
|
|
30
|
-
background: linear-gradient(90deg, $secondary-95 25%, $secondary-90 50%, $secondary-95 75%);
|
|
31
|
-
background-size: 200% 100%;
|
|
32
|
-
animation: loading 2s infinite ease-in-out;
|
|
33
|
-
border-radius: 4px;
|
|
34
|
-
display: flex;
|
|
35
|
-
height: v-bind(height);
|
|
36
|
-
width: v-bind(width);
|
|
37
|
-
&.is-rounded {
|
|
38
|
-
border-radius: 50%;
|
|
39
|
-
}
|
|
40
|
-
&.is-dark {
|
|
41
|
-
background: linear-gradient(
|
|
42
|
-
90deg,
|
|
43
|
-
$secondary-30 0%,
|
|
44
|
-
$secondary-30 20%,
|
|
45
|
-
$secondary-10 50%,
|
|
46
|
-
$secondary-30 80%,
|
|
47
|
-
$secondary-30 100%
|
|
48
|
-
);
|
|
49
|
-
background-size: 200% 100%;
|
|
50
|
-
animation: loading 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@keyframes loading {
|
|
55
|
-
0% {
|
|
56
|
-
background-position: 200% 0;
|
|
57
|
-
}
|
|
58
|
-
100% {
|
|
59
|
-
background-position: -200% 0;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="recommendations-container">
|
|
3
|
+
<div class="box recommendations-card">
|
|
4
|
+
<!-- Header -->
|
|
5
|
+
<div class="card-header-section">
|
|
6
|
+
<h2 class="title is-5 mb-2 has-text-weight-semibold">Recommendations</h2>
|
|
7
|
+
<p class="subtitle is-7 has-text-grey">Smart suggestions for your databases</p>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<!-- Content -->
|
|
11
|
+
<div class="card-content-section">
|
|
12
|
+
<!-- Recommendation Item 1 -->
|
|
13
|
+
<div class="recommendation-item">
|
|
14
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
15
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
16
|
+
<svg
|
|
17
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
+
width="16"
|
|
19
|
+
height="16"
|
|
20
|
+
viewBox="0 0 24 24"
|
|
21
|
+
fill="none"
|
|
22
|
+
stroke="currentColor"
|
|
23
|
+
stroke-width="2"
|
|
24
|
+
stroke-linecap="round"
|
|
25
|
+
stroke-linejoin="round"
|
|
26
|
+
>
|
|
27
|
+
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
|
|
28
|
+
<path d="M12 9v4"></path>
|
|
29
|
+
<path d="M12 17h.01"></path>
|
|
30
|
+
</svg>
|
|
31
|
+
</span>
|
|
32
|
+
<div class="is-flex-grow-1">
|
|
33
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
34
|
+
mgc-x-mongodb-x-update-same-version-1u0fc
|
|
35
|
+
</p>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
39
|
+
Same version update is required. Update details: 1.0.1-acdc...
|
|
40
|
+
</p>
|
|
41
|
+
<div class="tags">
|
|
42
|
+
<span class="badge is-success is-light">Pending</span>
|
|
43
|
+
<span class="badge is-danger">High</span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Recommendation Item 2 -->
|
|
48
|
+
<div class="recommendation-item">
|
|
49
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
50
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
51
|
+
<svg
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
width="16"
|
|
54
|
+
height="16"
|
|
55
|
+
viewBox="0 0 24 24"
|
|
56
|
+
fill="none"
|
|
57
|
+
stroke="currentColor"
|
|
58
|
+
stroke-width="2"
|
|
59
|
+
stroke-linecap="round"
|
|
60
|
+
stroke-linejoin="round"
|
|
61
|
+
>
|
|
62
|
+
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
|
|
63
|
+
<polyline points="16 7 22 7 22 13"></polyline>
|
|
64
|
+
</svg>
|
|
65
|
+
</span>
|
|
66
|
+
<div class="is-flex-grow-1">
|
|
67
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
68
|
+
mgc-x-mongodb-x-update-version-xr72jx
|
|
69
|
+
</p>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
73
|
+
Latest Major/Minor version is available. Recommending version Update...
|
|
74
|
+
</p>
|
|
75
|
+
<div class="tags">
|
|
76
|
+
<span class="badge is-success is-light">Skipped</span>
|
|
77
|
+
<span class="badge is-warning">Medium</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Recommendation Item 3 -->
|
|
82
|
+
<div class="recommendation-item">
|
|
83
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
84
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
85
|
+
<svg
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
87
|
+
width="16"
|
|
88
|
+
height="16"
|
|
89
|
+
viewBox="0 0 24 24"
|
|
90
|
+
fill="none"
|
|
91
|
+
stroke="currentColor"
|
|
92
|
+
stroke-width="2"
|
|
93
|
+
stroke-linecap="round"
|
|
94
|
+
stroke-linejoin="round"
|
|
95
|
+
>
|
|
96
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
97
|
+
<path d="M12 16v-4"></path>
|
|
98
|
+
<path d="M12 8h.01"></path>
|
|
99
|
+
</svg>
|
|
100
|
+
</span>
|
|
101
|
+
<div class="is-flex-grow-1">
|
|
102
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
103
|
+
mgc-x-mongodb-x-update-version-xw2jhm
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
108
|
+
Latest Major/Minor version is available. Recommending version Update...
|
|
109
|
+
</p>
|
|
110
|
+
<div class="tags">
|
|
111
|
+
<span class="badge is-success is-light">Pending</span>
|
|
112
|
+
<span class="badge is-warning">Medium</span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- Footer -->
|
|
118
|
+
<div class="card-footer-section">
|
|
119
|
+
<button class="button ac-button is-primary is-fullwidth has-text-weight-semibold">View All</button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</template>
|
|
124
|
+
|
|
125
|
+
<style scoped>
|
|
126
|
+
.recommendations-container {
|
|
127
|
+
max-width: 500px;
|
|
128
|
+
width: 100%;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Card Container - 60% Neutral Base */
|
|
132
|
+
.recommendations-card {
|
|
133
|
+
background: linear-gradient(135deg, hsl(0, 0%, 99%) 0%, hsl(0, 0%, 97%) 100%);
|
|
134
|
+
border-radius: 12px;
|
|
135
|
+
border: 1px solid hsl(0, 0%, 90%);
|
|
136
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
137
|
+
padding: 0;
|
|
138
|
+
transition: all 0.3s ease;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.recommendations-card:hover {
|
|
143
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
144
|
+
border-color: hsl(0, 0%, 85%);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Header Section - 30% Secondary */
|
|
148
|
+
.card-header-section {
|
|
149
|
+
padding: 1.25rem 1.5rem;
|
|
150
|
+
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
151
|
+
background: linear-gradient(180deg, hsl(0, 0%, 98%) 0%, transparent 100%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.card-header-section .title {
|
|
155
|
+
color: hsl(0, 0%, 20%);
|
|
156
|
+
margin-bottom: 0.375rem;
|
|
157
|
+
font-size: 1.125rem;
|
|
158
|
+
line-height: 1.3;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.card-header-section .subtitle {
|
|
162
|
+
color: hsl(0, 0%, 50%);
|
|
163
|
+
margin: 0;
|
|
164
|
+
line-height: 1.4;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.card-content-section {
|
|
168
|
+
padding: 0;
|
|
169
|
+
max-height: 400px;
|
|
170
|
+
overflow-y: auto;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.recommendation-item {
|
|
174
|
+
padding: 1.125rem 1.5rem;
|
|
175
|
+
border-bottom: 1px solid hsl(0, 0%, 94%);
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
transition: all 0.2s ease;
|
|
178
|
+
position: relative;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.recommendation-item:hover {
|
|
182
|
+
background: hsl(0, 0%, 98%);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.recommendation-item:last-child {
|
|
186
|
+
border-bottom: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.recommendation-item .icon {
|
|
190
|
+
margin-top: 2px;
|
|
191
|
+
flex-shrink: 0;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.recommendation-item .icon svg {
|
|
195
|
+
transition: color 0.2s ease;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.recommendation-item:hover .icon svg {
|
|
199
|
+
color: #3b82f6 !important;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Title */
|
|
203
|
+
.recommendation-title {
|
|
204
|
+
overflow: hidden;
|
|
205
|
+
text-overflow: ellipsis;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
line-height: 1.4;
|
|
208
|
+
transition: color 0.2s ease;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.recommendation-item:hover .recommendation-title {
|
|
212
|
+
color: #3b82f6 !important;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.card-footer-section {
|
|
216
|
+
padding: 1.125rem 1.5rem;
|
|
217
|
+
border-top: 1px solid hsl(0, 0%, 92%);
|
|
218
|
+
background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, transparent 100%);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Responsive Design */
|
|
222
|
+
@media screen and (max-width: 768px) {
|
|
223
|
+
.recommendations-container {
|
|
224
|
+
max-width: 100%;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.card-header-section,
|
|
228
|
+
.card-footer-section {
|
|
229
|
+
padding: 1rem 1.25rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.recommendation-item {
|
|
233
|
+
padding: 1rem 1.25rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.card-header-section .title {
|
|
237
|
+
font-size: 1rem;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
</style>
|