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
.help-tip {
6
    color: $argo-color-gray-4;
7
}
8

9
@mixin responsive-widths {
10
    @include breakpoint(large up) {
11
        max-width: 250px;
12
    }
13
    @include breakpoint(xlarge up) {
14
        min-width: 250px;
15
        max-width: 300px;
16
    }
17
    @include breakpoint(xxlarge up) {
18
        min-width: 325px;
19
        max-width: 350px;
20
    }
21
    @include breakpoint(xxxlarge up) {
22
        min-width: 375px;
23
        max-width: 450px;
24
    }
25
}
26

27
.application-status-panel {
28
    font-size: 0.875em;
29
    @include themify($themes) {
30
        background-color: themed('background-2');
31
        color: themed('text-1');
32
    }
33
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
34
    flex-wrap: nowrap;
35
    flex-shrink: 1;
36
    overflow-x: auto;
37
    padding-bottom: 0.5em;
38

39
    $row-width: 250px;
40

41
    &__conditions {
42
        display: flex;
43
        max-width: 250px;
44
        margin: auto;
45
        flex-wrap: wrap;
46
        justify-content: center;
47
        line-height: 1.5em;
48
        a {
49
            display: block;
50
            margin-right: 12px;
51
        }
52
    }
53

54
    &__more-button {
55
        margin-left: auto;
56
        font-size: 14px;
57
        line-height: 20px;
58
        padding: 0 5px;
59
        cursor: pointer;
60
        color: $argo-color-gray-6;
61
    }
62

63
    &__item {
64
        margin-top: 5px;
65
        padding: 5px 20px;
66
        font-size: 0.8em;
67
        line-height: 1.2;
68
        @include themify($themes) {
69
            color: themed('text-1');
70
        }
71
        display: flex;
72
        flex-direction: column;
73
        justify-content: flex-start;
74
        flex-shrink: 0;
75
        flex-grow: 0;
76

77
        &__row {
78
            display: flex;
79
            max-width: $row-width;
80
            margin-bottom: 0.25em;
81
            flex-shrink: 1;
82
            div:first-child {
83
                width: 80px;
84
                margin-right: 10px;
85
                text-align: right;
86
            }
87
            div:last-child {
88
                font-weight: 500;
89
                width: 100%;
90
                white-space: nowrap;
91
                overflow: hidden;
92
                text-overflow: ellipsis;
93
                text-align: left;
94
            }
95

96
            @include responsive-widths();
97
        }
98

99
        &:first-child {
100
            margin-top: 7px;
101
        }
102

103
        &:not(:first-child) {
104
            @include themify($themes) {
105
                border-left: 1px solid themed('border');
106
            }
107
        }
108

109
        & {
110
            a.error {
111
                color: $argo-failed-color-dark;
112
            }
113
        }
114
        & {
115
            a.warning {
116
                color: $argo-status-warning-color;
117
            }
118
        }
119
        & {
120
            a.info {
121
                color: $argo-success-color;
122
            }
123
        }
124

125
        label {
126
            display: block;
127
            @include themify($themes) {
128
                color: themed('text-1');
129
            }
130
            font-size: 13px;
131
            margin-right: 10px;
132
        }
133

134
        max-width: 100%;
135
        width: auto;
136
    }
137

138
    &__item-value {
139
        display: flex;
140
        align-items: center;
141
        margin-bottom: 0.5em;
142
        font-weight: 500;
143
        .fa {
144
            font-size: 1em;
145
        }
146

147
        font-size: 2em;
148
        @include themify($themes) {
149
            color: themed('text-1');
150
        }
151
        &--highlight {
152
            color: $argo-color-teal-6;
153
        }
154

155
        &--Running a,
156
        &--Terminating a {
157
            color: $argo-running-color;
158
        }
159

160
        &--Error a,
161
        &--Failed a {
162
            color: $argo-failed-color;
163
        }
164

165
        &--Succeeded a {
166
            color: $argo-success-color;
167
        }
168

169
        i {
170
            font-size: 0.6em;
171
        }
172

173
        &__revision {
174
            font-size: 14px;
175
            @include themify($themes) {
176
                color: themed('text-1');
177
            }
178
            font-weight: 500;
179
            padding-left: 8px;
180
            margin-bottom: 2px;
181
        }
182
    }
183

184
    &__item-name {
185
        margin: auto 0;
186
        max-width: $row-width;
187
        display: -webkit-box;
188
        -webkit-line-clamp: 2;
189
        -webkit-box-orient: vertical;
190
        i {
191
            position: relative;
192
            top: -2px;
193
        }
194
        @include responsive-widths();
195
    }
196
    &__item-name,
197
    &__item-value {
198
        overflow: hidden;
199
        text-overflow: ellipsis;
200
    }
201
}
202