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

5
.applications-list {
6
    padding: 1em;
7
    @media screen and (max-width: 1024px) {
8
        padding: 0;
9
    }
10
    min-height: 88vh;
11
    &__title {
12
        font-weight: bolder;
13
        font-size: 15px;
14
        @include themify($themes) {
15
            color: themed('text-1');
16
        }
17
        padding-top: 0.25em;
18
        padding-bottom: 0.5em;
19
        margin-left: 1em;
20
    }
21

22
    &__info {
23
        line-height: 24px;
24
        margin: 1em 0;
25
    }
26

27
    &__icons {
28
        line-height: 24px;
29
    }
30

31
    &__empty-state {
32
        text-align: center;
33
    }
34

35
    &__entry {
36
        padding-left: 1em;
37
        border-left: 5px solid $argo-color-gray-4;
38
        padding-right: 1em;
39
        color: $argo-color-gray-7;
40

41
        // healthy statuses
42
        &--health-Healthy {
43
            border-left-color: $argo-success-color;
44
        }
45

46
        // intermediate statuses
47
        &--health-Progressing {
48
            border-left-color: $argo-running-color;
49
        }
50

51
        &--health-Suspended {
52
            border-left-color: $argo-suspended-color;
53
        }
54

55
        // failed statuses
56
        &--health-Degraded {
57
            border-left-color: $argo-failed-color;
58
        }
59

60
        &--health-Unknown {
61
            border-left-color: $argo-color-gray-4;
62
        }
63

64
        &--health-Missing {
65
            border-left-color: $argo-status-warning-color;
66
        }
67

68
        &--actions {
69
            padding-top: 1em;
70
        }
71
    }
72

73
    &__accordion {
74
        cursor: pointer;
75
        text-align: center;
76
        border: none;
77
        outline: none;
78
        transition: 0.4s;
79
        margin-left: 10px;
80
    }
81

82
    &__view-type {
83
        white-space: nowrap;
84
        i {
85
            cursor: pointer;
86
            color: $argo-color-gray-4;
87
            margin-right: 1em;
88
            &::before {
89
                font-size: 1.5em;
90
            }
91
        }
92
        i.selected {
93
            cursor: default;
94
            color: $argo-color-teal-5;
95
        }
96
    }
97

98
    &__table-icon {
99
        display: inline-block;
100
        margin-right: 10px;
101
        width: 80px;
102
    }
103

104
    &__table-row {
105
        & > .columns:first-child {
106
            padding-left: 15px;
107
        }
108
        margin-left: -30px !important;
109
    }
110

111
    &__search-wrapper {
112
        margin-left: 15px;
113
        @include breakpoint(medium down) {
114
            flex-basis: 100%;
115
            margin-left: 0;
116
        }
117
        line-height: normal;
118
    }
119

120
    &__search {
121
        @include themify($themes) {
122
            background-color: themed('light-argo-gray-2');
123
            border: 1px solid themed('border');
124
        }
125
        border-radius: 7px;
126
        position: relative;
127
        padding: 0 10px;
128
        height: 33px;
129
        display: flex;
130
        align-items: center;
131
        transition: width 200ms;
132
        @include breakpoint(large up) {
133
            flex-shrink: 1;
134
            width: 300px;
135
        }
136
        i {
137
            font-size: 12px;
138
            color: $argo-color-gray-6;
139
        }
140
        .keyboard-hint {
141
            border: 1px solid $argo-color-gray-5;
142
            color: $argo-color-gray-7;
143
            border-radius: 3px;
144
            padding: 0 7px;
145
            font-size: 12px;
146
            font-weight: 600;
147
            flex-shrink: 0;
148
            text-align: center;
149
        }
150
        .select {
151
            width: 100%;
152
            border-radius: $border-radius;
153
        }
154
        &:focus-within {
155
            border: 1px solid $argo-color-teal-5;
156
            @include breakpoint(large up) {
157
                width: 500px;
158
            }
159
            i {
160
                color: $argo-color-gray-7;
161
            }
162
            .keyboard-hint {
163
                display: none;
164
            }
165
        }
166
        .argo-field {
167
            border: none;
168
            font-weight: 500;
169
            &::placeholder {
170
                color: $argo-color-gray-6;
171
            }
172
        }
173
    }
174

175
    &__external-link {
176
        position: absolute;
177
        top: 1em;
178
        right: 1em;
179

180
        .large-text-height {
181
            line-height: 1.5;
182
        }
183
    }
184

185
    &__external-links-icon-container {
186
        position: relative;
187
        display: inline-block;
188
    }
189

190
    .filters-group__panel {
191
        top: 120px;
192
    }
193
    @include breakpoint(medium down) {
194
        .filters-group__panel {
195
            top: 200px;
196
        }
197
    }
198

199
    ul {
200
        margin: 0;
201
    }
202

203
    .chart-group {
204
        margin: 0 0.8em;
205
    }
206

207
    .chart {
208
        justify-content: space-evenly;
209
    }
210
}
211
i.menu_icon {
212
    vertical-align: middle;
213
}
214

215
.argo-button {
216
    i {
217
        @media screen and (max-width: map-get($breakpoints, large)) {
218
            margin: 0 auto !important;
219
        }
220
    }
221
}