argo-cd

1
@import 'node_modules/argo-ui/src/styles/config';
2
@import 'node_modules/foundation-sites/scss/util/util';
3
@import 'node_modules/argo-ui/src/styles/theme';
4
@import '../../../shared/config.scss';
5

6
$header: 120px;
7

8
.application-details {
9
    height: 100vh;
10
    width: 100%;
11

12
    &__wrapper {
13
        display: flex;
14
        flex-direction: column;
15
        height: calc(100vh - 2 * $top-bar-height);
16
        overflow: hidden;
17

18
        @media screen and (max-width: map-get($breakpoints, xxlarge)) {
19
            height: calc(100vh - 3 * $top-bar-height);
20
            margin-top: $top-bar-height;
21
        }
22
    }
23

24
    .argo-dropdown__content.is-menu {
25
        max-height: 500px;
26
    }
27

28
    &__tree {
29
        padding: 1em;
30

31
        flex: 1;
32
        overflow-x: auto;
33
        overflow-y: auto;
34
        overscroll-behavior-x: none;
35
    }
36

37
    &__sliding-panel-pagination-wrap {
38
        margin-top: 1.25em;
39
    }
40

41
    &__warning {
42
        font-size: 0.8em;
43
        color: darken($argo-status-warning-color, 20%);
44
        min-height: 1.2rem;
45
    }
46

47
    &__refreshing-label {
48
        color: $white-color;
49
        position: fixed;
50
        margin-top: -20px;
51
        left: 50%;
52
        background-color: $argo-color-gray-7;
53
        border: 1px solid $argo-color-gray-5;
54
        border-radius: 5px;
55
        padding: 5px 5px;
56
        font-size: 0.6em;
57
        z-index: 1;
58
    }
59

60
    &__tab-content-full-height {
61
        height: calc(100vh - 2 * 76px);
62
        div.row,
63
        div.columns {
64
            height: 100%;
65
        }
66
    }
67

68
    &__container {
69
        position: relative;
70
        text-transform: uppercase;
71
        margin-top: 0.5em;
72
        cursor: pointer;
73
        font-size: 0.8em;
74
        white-space: nowrap;
75
        overflow: hidden;
76
        text-overflow: ellipsis;
77
        padding-left: 10px;
78

79
        i {
80
            position: absolute;
81
            left: 0px;
82
            top: 2px;
83
        }
84

85
        span {
86
            color: $argo-color-teal-5;
87
        }
88
    }
89

90
    &__resource-icon {
91
        text-align: center;
92
        position: absolute;
93
        left: 0;
94
        top: 10px;
95
        width: 60px;
96
        line-height: 1;
97
        color: $argo-color-gray-7;
98
        font-size: 0.8em;
99
    }
100

101
    .application-resource-tree {
102
        margin: 0 auto;
103
    }
104

105
    &__view-type {
106
        margin-bottom: -6px;
107
        display: inline-block;
108
        vertical-align: middle;
109
        white-space: nowrap;
110
        i {
111
            cursor: pointer;
112
            color: $argo-color-gray-5;
113
            margin: 0 0.5em;
114
            &::before {
115
                font-size: 1.5em;
116
            }
117
        }
118
        i.selected {
119
            cursor: default;
120
            color: $argo-color-gray-7;
121
        }
122
    }
123

124
    &__node-menu {
125
        position: absolute;
126
        right: 0;
127
        top: 0;
128
    }
129

130
    &__external_link {
131
        margin-left: 5px;
132
    }
133

134
    pre {
135
        font-family: monospace;
136
        line-height: normal;
137
        white-space: pre;
138
    }
139

140
    &__action-menu {
141
        text-transform: capitalize;
142

143
        &.disabled {
144
            cursor: default !important;
145
            color: $argo-color-gray-3 !important;
146
        }
147
    }
148

149
    .argo-table-list__row {
150
        .columns.small-1.xxxlarge-1 {
151
            width: 60px;
152
            text-align: center;
153
        }
154
    }
155

156
    @media screen and (max-width: map-get($breakpoints, xxlarge)) {
157
        .page__content-wrapper {
158
            min-height: calc(100vh - 3 * 50px);
159
        }
160
        .top-bar.row {
161
            display: block;
162
            .top-bar__left-side,
163
            .top-bar__right-side {
164
                width: 100%;
165
                max-width: 100%;
166
                flex: auto;
167
            }
168
            .top-bar__left-side {
169
                .argo-button {
170
                    i {
171
                        @media screen and (max-width: map-get($breakpoints, large)) {
172
                            margin: 0 auto !important;
173
                        }
174
                    }
175
                }
176
            }
177
        }
178
    }
179

180
    @media screen and (max-width: map-get($breakpoints, large)) {
181
        .top-bar.row {
182
            .top-bar__left-side {
183
                > div {
184
                    display: flex;
185
                    justify-content: center;
186
                    height: 50px;
187
                    align-items: center;
188
                    .argo-button {
189
                        height: 34px;
190
                    }
191
                }
192
            }
193
            .top-bar__right-side {
194
                display: flex;
195
                justify-content: center;
196
            }
197
        }
198
    }
199

200
    &__commit-message {
201
        line-height: 1.5em;
202
    }
203

204
    .filters-group__panel {
205
        top: 230px;
206
    }
207

208
    .graph-options-panel {
209
        margin-left: 10px;
210
        z-index: 1;
211
        padding: 5px;
212
        display: inline-block;
213
        box-shadow: 1px 1px 3px $argo-color-gray-5;
214
        position: absolute;
215

216
        @include themify($themes) {
217
            background: themed('background-2');
218
        }
219

220

221
        a {
222
            padding: 5px;
223
            margin: 2px;
224
            color: $argo-color-gray-6;
225
            border: 1px solid transparent;
226
            border-radius: 5px;
227

228
            &.group-nodes-button {
229
                cursor: pointer;
230
                position: relative;
231
                display: inline-block;
232
                vertical-align: middle;
233
                font-weight: 500;
234
                line-height: 1.4;
235
                text-align: center;
236
                user-select: none;
237
                transition: background-color 0.2s, border 0.2s, color 0.2s;
238
                text-transform: uppercase;
239
                &:hover {
240
                    background-color: #d1d5d9;
241
                }
242
                &:active {
243
                    transition: background-color 0.2s, border 0.2s, color 0.2s;
244
                    border: 1px $argo-color-teal-5 solid;
245
                }
246
            }
247

248
            &.group-nodes-button-on {
249
                color: $argo-color-gray-1;
250
                background-color: $argo-color-gray-6;
251
                border: 3px solid $argo-color-teal-4;
252
                font-size: 14px;
253
                outline-style: solid;
254
                &:hover {
255
                    background-color: $argo-color-gray-5;
256
                }
257

258
            }
259
        }
260

261
        .separator {
262
            @include themify($themes) {
263
                border-right: 1px solid themed('border');
264
            }
265
            padding-top: 6px;
266
            padding-bottom: 6px;
267
        }
268

269
        .zoom-value {
270
            user-select: none;
271
            margin-top: 5px;
272
            margin-right: 6px;
273
            margin-left: 4px;
274
            font-size: 14px;
275
            text-align-last: right;
276
            float: right;
277
            width: 40px;
278
            border: 1px $argo-color-gray-5 solid;
279
            background-color: $argo-color-gray-3;
280
            padding: 2px;
281
            color: $argo-color-gray-7;
282
        }
283
    }
284

285

286
    @media screen and (max-width: map-get($breakpoints, large)) {
287
        .sliding-panel__body {
288
            padding: 4px !important;
289
        }
290
        .sliding-panel--is-middle .sliding-panel__wrapper {
291
            width: 90% !important;
292
        }
293
        .sliding-panel--is-middle .sliding-panel__body {
294
            padding: 18px !important;
295
        }
296
        .sliding-panel__close {
297
            z-index: 2 !important;
298
        }
299
        .top-bar__title {
300
            display: none;
301
        }
302

303
        .top-bar__left-side {
304
            white-space: normal !important;
305
        }
306
        .top-bar__left-side > div {
307
            display: block !important;
308
        }
309
        .top-bar__right-side {
310
            justify-content: right !important;
311
        }
312
        .application-status-panel.row {
313
            flex-flow: unset;
314
        }
315
        .application-status-panel__item label {
316
            margin-right: 0;
317
        }
318
        .application-status-panel__item {
319
            padding: 5px 10px;
320
        }
321

322
        .white-box, .tabs__content {
323
            padding: 4px !important;
324
        }
325
        .white-box__details-row .columns.small-3 {
326
            overflow-wrap: unset !important;
327
            overflow: scroll;
328
        }
329
        .white-box__details-row .columns.small-9{
330
            padding-left: 4px;
331
        }
332

333
        .resource-details__header h1 {
334
            font-size: 16px;
335
        }
336
        .resource-details__header {
337
            margin-top: 30px;
338
            padding-right: 4px;
339
        }
340

341
        .tabs__nav a:first-child, .tabs__nav a {
342
            margin-left: 0 !important;
343
        }
344

345
        .editable-panel__buttons {
346
            top: unset;
347
        }
348
    }
349
}
350

351
.resource-parent-node-info-title {
352
    flex-direction: column;
353
    color: $argo-color-gray-6;
354

355
    &__label {
356
        display: flex;
357
        margin-bottom: 0.25em;
358
        flex-shrink: 1;
359
        div:first-child {
360
            margin-right: 10px;
361
            width: 60px;
362
            text-align: right;
363
        }
364
        div:last-child {
365
            font-weight: 500;
366
            width: 100%;
367
            white-space: nowrap;
368
            overflow: hidden;
369
            text-overflow: ellipsis;
370
            text-align: left;
371

372
        }
373
    }
374
}
375

376

377

378