argo-cd

pod-view.scss
252 строки · 6.9 Кб
Перенос по словам
1
@import 'node_modules/argo-ui/src/styles/config';
2

3
$pod-size: 25px;
4
$gutter: 3px;
5
$pods-per-row: 8;
6
$pods-per-column: 4;
7
$max-rows: 5;
8
$num-stats: 2;
9

10
$pod-age-icon-clr: #ffce25;
11

12
.circle-icon {
13
    color: $pod-age-icon-clr;
14
    font-size: 10px;
15
}
16

17
.pod-view {
18
    &__settings {
19
        align-items: center;
20
        display: flex;
21
        margin-bottom: 1em;
22
        &__section {
23
            margin-left: 10px;
24
            padding-right: 10px;
25
            border-right: 1px solid $argo-color-gray-4;
26
            &:last-child {
27
                border-right: none;
28
            }
29
        }
30
    }
31

32
    &__nodes-container {
33
        display: flex;
34
        flex-wrap: wrap;
35
    }
36

37
    &__node {
38
        $pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
39
        $pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
40
        $padding: 15px;
41
        $stat-width: 12px;
42
        padding: $padding;
43
        margin: 10px;
44
        margin-bottom: 14px !important;
45
        width: $pod-container-width + 2 * $padding;
46

47
        &--large {
48
            width: $pod-container-width + (2 * $padding) + ($num-stats * ($stat-width + 2 * $gutter)) + 6 * $gutter;
49
        }
50
        &__container {
51
            display: flex;
52
            &--header {
53
                align-items: center;
54
                margin-bottom: 1em;
55
            }
56
            &--stats {
57
                margin-left: -2 * $gutter;
58
                margin-right: 4 * $gutter;
59
            }
60
        }
61
        &__info {
62
            margin-top: 1em;
63
            display: flex;
64
            justify-content: end;
65
            div {
66
                border-radius: 3px;
67
                background-color: $argo-color-gray-3;
68
                color: $argo-color-gray-7;
69
                margin-right: 5px;
70
                padding: 3px 5px;
71
            }
72
        }
73
        &__info--large {
74
            margin: 1em 0;
75
            padding: 10px;
76
            border-radius: 3px;
77
            background-color: $argo-color-gray-3;
78
            color: $argo-color-gray-6;
79
            div {
80
                display: flex;
81
                & div:last-child {
82
                    font-weight: 500;
83
                    margin-left: auto;
84
                }
85
            }
86
        }
87
        &__label {
88
            margin-top: 1em;
89
            font-size: 10px;
90
            text-align: center;
91
        }
92
        &__pod-container {
93
            flex-direction: column;
94
            width: $pod-container-width;
95
            margin-top: auto;
96
            &__pods {
97
                display: flex;
98
                flex-wrap: wrap;
99
                width: 100%;
100
                background-color: $argo-color-gray-3;
101
                border-radius: 3px;
102
                padding: $gutter * 2;
103
                margin-right: -1 * $gutter;
104
                margin-bottom: -1 * $gutter;
105
            }
106
        }
107

108
        &__pod {
109
            border-radius: 3px;
110
            width: $pod-size;
111
            height: $pod-size;
112
            margin: $gutter;
113
            cursor: pointer;
114
            display: flex;
115
            align-items: center;
116
            justify-content: center;
117
            background-color: $argo-color-gray-5;
118
            i.fa {
119
                color: white !important;
120
            }
121
            &--succeeded,
122
            &--healthy {
123
                background-color: $argo-success-color;
124
                &:hover {
125
                    background-color: $argo-success-color-dark;
126
                }
127
            }
128
            &--pending,
129
            &--suspended {
130
                background-color: $argo-status-warning-color;
131
                &:hover {
132
                    background-color: darken($argo-status-warning-color, 10%);
133
                }
134
            }
135
            &--running,
136
            &--progressing {
137
                background-color: $argo-running-color;
138
                &:hover {
139
                    background-color: $argo-running-color-dark;
140
                }
141
            }
142
            &--failed,
143
            &--degraded {
144
                background-color: $argo-failed-color;
145
                border: 2px solid rgba(0, 0, 0, 0.3);
146
                &:hover {
147
                    background-color: $argo-failed-color-dark;
148
                }
149
            }
150
            &--unknown,
151
            &--missing {
152
                background-color: $argo-color-gray-5;
153
                &:hover {
154
                    background-color: $argo-color-gray-6;
155
                }
156
            }
157
            &__new-pod-icon {
158
                background: none;
159
                color: $pod-age-icon-clr;
160
                display: block;
161
                left: 20px;
162
                margin: 0px;
163
                position: absolute;
164
                top: -4px;
165
                font-size: 10px;
166
            }
167
            &__stat-tooltip {
168
                text-align: left;
169

170
                i {
171
                    display: inline-block;
172
                    height: 1em;
173
                    width: 1em;
174
                    border-radius: 5px;
175
                }
176
            }
177

178
            &__stat-icon-app {
179
                background-color: $argo-color-teal-7;
180
            }
181

182
            &__stat-icon-neighbors {
183
                background-color: $argo-color-gray-6;
184
            }
185

186
            &__stat {
187
                &__bar {
188
                    background-color: $argo-color-gray-4;
189
                    height: $max-rows * $pod-size;
190
                    width: $stat-width;
191
                    position: relative;
192
                    border-radius: 2px;
193
                    margin: 0 $gutter * 2;
194
                    overflow: hidden;
195
                    cursor: pointer;
196

197
                    &--fill {
198
                        position: absolute;
199
                        background-color: $argo-color-teal-7;
200
                        width: 100%;
201
                        bottom: 0;
202
                    }
203

204
                    &--neighbors {
205
                        background-color: $argo-color-gray-6;
206
                    }
207

208
                    &:hover > &--fill {
209
                        background-color: $argo-color-teal-8;
210
                    }
211

212
                    &:hover &--neighbors {
213
                        background-color: $argo-color-gray-7;
214
                    }
215
                }
216
            }
217
        }
218

219
        &__quick-start-actions {
220
            display: flex;
221
            padding-top: 1em;
222
            justify-content: center;
223

224
            &.disabled {
225
                cursor: default !important;
226
                color: $argo-color-gray-3 !important;
227
            }
228
        }
229
    }
230

231
    @media screen and (max-width: map-get($breakpoints, large)) {
232
        &__nodes-container {
233
            justify-content: center;
234
        }
235
    }
236

237
    @media screen and (max-width: map-get($breakpoints, medium)) {
238
        &__node {
239
            width: 95%;
240
            &--large {
241
                width: 95%;
242
            }
243
            &__pod-container {
244
                width: 100%;
245
            }
246
        }
247
    }
248
}
249

250
.tippy-content {
251
    text-align: left;
252
}
253
argo-cd

Использование cookies
