argo-cd

1
@import 'node_modules/argo-ui/src/styles/config';
2
@import 'node_modules/argo-ui/src/styles/theme';
3

4
.application-resource-tree {
5
    position: relative;
6
    overflow: hidden;
7

8
    &__line {
9
        position: absolute;
10
        z-index: -1;
11
        transition: all 0.2s linear;
12
        border-top: 1px dashed $argo-color-gray-5;
13
    }
14

15
    &__edge {
16
        .application-resource-tree__line {
17
            &:last-child {
18
                &:after {
19
                    content: '\25BA';
20
                    position: absolute;
21
                    color: #A3A3A3;
22
                    font-size: 10px;
23
                    top: -10px;
24
                    transform: rotate(180deg);
25
                }
26
            }
27
        }
28
    }
29

30
    &--network {
31
        .application-resource-tree__line {
32
            background-image: linear-gradient(90deg, $argo-color-teal-5 50%, transparent 50%);
33
            background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
34
            background-size: 20px 3px, 0px 0px, 0px 0px, 0px 0px;
35
            background-position: left top, right bottom, left bottom, right top;
36
            animation: network-flow 1s infinite linear;
37
            height: 3px;
38
            border-top: none;
39
        }
40
        @keyframes network-flow {
41
            0% {
42
                background-position: left 20px top, right 20px bottom , left bottom 20px , right top 20px;
43
            }
44
            100% {
45
                background-position: left top, right bottom, left bottom, right top;
46
            }
47
        }
48

49
        .application-resource-tree__edge {
50
            .application-resource-tree__line {
51
                &:last-child {
52
                    &:after {
53
                        content: none;
54
                    }
55
                }
56
            }
57
        }
58
    }
59

60
    $pod-size: 25px;
61
    $gutter: 3px;
62
    $pods-per-row: 8;
63
    $pods-per-column: 4;
64
    $max-rows: 5;
65
    $num-stats: 2;
66

67
    &__node {
68
        position: absolute;
69
        transition: all 0.2s linear;
70
        padding-left: 3.5em;
71
        padding-right: 1em;
72
        margin: 10px;
73
        box-shadow: 1px 1px 1px $argo-color-gray-4;
74
        @include themify($themes) {
75
            background-color: themed('background-2');
76
            color: themed('text-2');
77
        }
78
        border-radius: 4px;
79
        border: 1px solid transparent;
80
        cursor: pointer;
81

82
        .theme-dark & {
83
            box-shadow: 1px 1px 1px $argo-color-gray-7;
84
        }
85

86
        .icon {
87
            font-size: 2em;
88
        }
89

90
        .icon-background
91
        {
92
            color: $argo-color-gray-4;
93
        }
94

95
        .fa-filter {
96
            margin-left: 8px;
97
            padding: 2px;
98
        }
99

100
        &.active {
101
            border-color: $argo-color-teal-6;
102
        }
103

104
        &--orphaned {
105
            @include themify($themes) {
106
                background-color: themed('light-argo-gray-2') !important;
107
            }
108
        }
109

110
        &--load-balancer {
111
            cursor: default;
112
            background-color: $argo-color-teal-2;
113
        }
114

115
        &--expansion {
116
            position: absolute;
117
            flex-shrink: 0px;
118
            z-index: 10;
119
            font-size: 0.5em;
120
            padding: 2px;
121
            box-shadow: 1px 1px 1px $argo-color-gray-4;
122
            @include themify($themes) {
123
                background-color: themed('background-2');
124
            }
125
            margin-top: 9px;
126
            margin-left: 215px;
127

128
            .theme-dark & {
129
                box-shadow: 1px 1px 1px $argo-color-gray-7;
130
            }
131
        }
132

133
        &--podgroup--expansion {
134
            position: absolute;
135
            flex-shrink: 0px;
136
            z-index: 10;
137
            font-size: 0.5em;
138
            padding: 2px;
139
            box-shadow: 1px 1px 1px $argo-color-gray-4;
140
            background-color: white;
141
            margin-left: 215px;
142

143
            .theme-dark & {
144
                box-shadow: 1px 1px 1px $argo-color-gray-7;
145
            }
146
        }
147

148
        &--pod {
149
            @include themify($themes) {
150
                background-color: themed('pod-cyan') !important;
151
            }
152
        }
153
        &--nodegroup{
154
            padding-left: 3.5em;
155
            padding-top: 25px;
156
        }
157

158
        &--lower-section {
159
            left: 8px;
160
            right: 10px;
161
            margin-top: 10px;
162
            margin-bottom: 10px;
163
            $pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
164
            $pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
165
            $padding: 1px;
166
            $stat-width: 1px;
167
            padding: $padding;
168
            transition: all 1s linear;
169
            position: absolute;
170

171
            &__pod-group {
172
                $pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
173
                $pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
174
                padding: $padding;
175
                width: $pod-container-width + 2 * $padding;
176

177
                &__label {
178
                    margin-top: 1em;
179
                    font-size: 10px;
180
                    text-align: center;
181
                }
182
                &__pod-container {
183
                    flex-direction: column;
184
                    width: $pod-container-width;
185
                    margin-top: auto;
186
                    &__pods {
187
                        display: flex;
188
                        flex-wrap: wrap;
189
                        width: 100%;
190
                        background-color: $argo-color-gray-3;
191
                        border-radius: 3px;
192
                        align-items: center;
193
                        padding: $gutter * 2;
194
                        margin-right: -1 * $gutter;
195
                        margin-bottom: -1 * $gutter;
196
                    }
197
                }
198

199
                &__pod {
200
                    border-radius: 3px;
201
                    width: $pod-size;
202
                    height: $pod-size;
203
                    margin: $gutter;
204
                    cursor: pointer;
205
                    display: flex;
206
                    align-items: center;
207
                    justify-content: center;
208
                    background-color: $argo-color-gray-5;
209
                    transition: all 0.2s ease-in-out;
210
                    i.fa {
211
                        color: white !important;
212
                    }
213
                    &--succeeded,
214
                    &--healthy {
215
                        background-color: $argo-success-color;
216
                        &:hover {
217
                            background-color: $argo-success-color-dark;
218
                        }
219
                    }
220
                    &--pending,
221
                    &--suspended {
222
                        background-color: $argo-status-warning-color;
223
                        &:hover {
224
                            background-color: darken($argo-status-warning-color, 10%);
225
                        }
226
                    }
227
                    &--running,
228
                    &--progressing {
229
                        background-color: $argo-running-color;
230
                        &:hover {
231
                            background-color: $argo-running-color-dark;
232
                        }
233
                    }
234
                    &--failed,
235
                    &--degraded {
236
                        background-color: $argo-failed-color;
237
                        border: 2px solid rgba(0, 0, 0, 0.3);
238
                        &:hover {
239
                            background-color: $argo-failed-color-dark;
240
                        }
241
                    }
242
                    &--unknown,
243
                    &--missing {
244
                        background-color: $argo-color-gray-5;
245
                        &:hover {
246
                            background-color: $argo-color-gray-6;
247
                        }
248
                    }
249
                    &__star-icon {
250
                        background: none;
251
                        color: #ffce25;
252
                        display: block;
253
                        left: 20px;
254
                        margin: 0px;
255
                        position: absolute;
256
                        top: -5px;
257
                    }
258
                    &__stat-tooltip {
259
                        text-align: left;
260

261
                        i {
262
                            display: inline-block;
263
                            height: 1em;
264
                            width: 1em;
265
                            border-radius: 5px;
266
                        }
267
                    }
268

269
                    &__stat-icon-app {
270
                        background-color: $argo-color-teal-7;
271
                    }
272

273
                    &__stat-icon-neighbors {
274
                        background-color: $argo-color-gray-6;
275
                    }
276

277
                    &__stat {
278
                        &__bar {
279
                            background-color: $argo-color-gray-4;
280
                            height: $max-rows * $pod-size;
281
                            width: $stat-width;
282
                            position: relative;
283
                            border-radius: 2px;
284
                            margin: 0 $gutter * 2;
285
                            overflow: hidden;
286
                            cursor: pointer;
287

288
                            &--fill {
289
                                position: absolute;
290
                                background-color: $argo-color-teal-7;
291
                                width: 100%;
292
                                bottom: 0;
293
                            }
294

295
                            &--neighbors {
296
                                background-color: $argo-color-gray-6;
297
                            }
298

299
                            &:hover > &--fill {
300
                                background-color: $argo-color-teal-8;
301
                            }
302

303
                            &:hover &--neighbors {
304
                                background-color: $argo-color-gray-7;
305
                            }
306
                        }
307
                    }
308
                }
309
            }
310
        }
311
    }
312

313
    &__filtered-indicator {
314
        z-index: -1;
315
    }
316

317
    &__node-animation {
318
        position: absolute;
319
        left: 0;
320
        right: 0;
321
        top: 0;
322
        bottom: 0;
323
        animation: shadow-pulse 1s 1;
324
    }
325

326
    @keyframes shadow-pulse {
327
        0% {
328
            box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
329
        }
330
        100% {
331
            box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
332
        }
333
    }
334
    &__node-menu {
335
        position: absolute;
336
        right: 0px;
337
        top: 7px;
338
    }
339

340
    &__node-content {
341
        overflow: hidden;
342
        text-overflow: ellipsis;
343
        white-space: nowrap;
344
    }
345

346
    &__node-kind-icon {
347
        text-align: center;
348
        position: absolute;
349
        left: 0;
350
        top: 8px;
351
        width: 60px;
352
        line-height: 1;
353
        color: $argo-color-gray-7;
354

355
        &--big {
356
            background: $argo-color-gray-5;
357
            position: absolute;
358
            width: 65px;
359
            height: 65px;
360
            border-radius: 33px;
361
            left: -20px;
362
            top: -8px;
363
            text-align: center;
364

365
            @include themify($themes) {
366
                border: 4px solid themed('background-2');
367
            }
368

369
            i {
370
                color: $white-color;
371
                line-height: 56px;
372
                font-size: 28px;
373
            }
374
        }
375
    }
376

377
    &__node-labels {
378
        position: absolute;
379
        bottom: -14px;
380
        right: 0;
381
    }
382

383
    &__node-label {
384
        background-color: $argo-color-gray-4;
385
        color: $argo-color-gray-7;
386
        border: 1px solid $argo-color-gray-5;
387
        border-radius: 5px;
388
        padding: 0 5px;
389
        font-size: 0.6em;
390
        text-transform: lowercase;
391
        margin-right: 1px;
392
    }
393

394

395
    &__node-kind {
396
        font-size: 0.7em;
397
        color: $argo-color-gray-6;
398
    }
399

400
    &__node-content {
401
        padding: 10px 20px 10px 10px;
402
        line-height: 0.95;
403
        display: flex;
404
        flex-direction: column;
405
    }
406

407
    &__node-title {
408
        font-size: 0.8em;
409
        padding-bottom: 5px;
410
        overflow: hidden;
411
        text-overflow: ellipsis;
412
        text-align: left;
413

414
    }
415

416
    &__node-status-icon {
417
        font-size: 0.8em;
418
        i {
419
            margin-right: 2px;
420
        }
421
    }
422
    &__direction-left {
423
        direction: ltl;
424
    }
425
    &__direction-right {
426
        direction: rtl;
427
    }
428
    &__direction-center-left {
429
        overflow: hidden;
430
        padding-top: 15px;
431
        padding-left: 15px;
432

433
    }
434

435
}