argo-cd

1
@import 'node_modules/argo-ui/v2/styles/colors.scss';
2
@import '../shared/config.scss';
3

4
$deselected-text: #818d94;
5

6
.sidebar {
7
    min-width: $sidebar-width;
8
    width: $sidebar-width;
9
    padding: 0 20px;
10
    top: 0;
11
    left: 0;
12
    position: fixed;
13
    height: 100vh;
14
    max-height: 100vh;
15
    color: white;
16
    background-color: #0f2733;
17
    overflow: auto;
18
    z-index: 2;
19

20
    &__container {
21
        padding: 0 5px;
22
    }
23

24
    &__logo-container {
25
        margin-top: 10px;
26
        font-size: 12px;
27
        color: $deselected-text;
28
        margin-left: 12px;
29
    }
30

31
    &__logo {
32
        width: 100%;
33
        display: flex;
34
        flex-direction: row-reverse;
35
        align-items: center;
36
        justify-content: flex-end;
37
        font-size: 24px;
38
        font-weight: 500;
39
        margin: 1em 0;
40
        margin-left: -7px;
41

42
        &__character {
43
            width: 42px;
44
        }
45

46
        &__text-logo {
47
            height: 2em;
48
            filter: invert(100%);
49
        }
50
    }
51

52
    &__version {
53
        cursor: pointer;
54
        width: 110px;
55
        text-align: left;
56
        white-space: nowrap;
57
        overflow: hidden;
58
        text-overflow: ellipsis;
59
    }
60

61
    &__tooltip {
62
        max-width: 300px;
63
        @media screen and (max-width: 590px) {
64
            max-width: 250px;
65
        }
66
    }
67

68
    &__nav-item {
69
        cursor: pointer;
70
        display: flex;
71
        align-items: center;
72
        font-size: 16px;
73
        font-weight: 500;
74
        $height: 2.5em;
75
        height: $height;
76
        line-height: $height;
77
        color: $deselected-text;
78

79
        i {
80
            font-size: 26px;
81
            color: white;
82
            width: 40px;
83
            padding-right: 45px;
84
        }
85

86
        i.fa {
87
            font-size: 22px;
88
            margin-left: 2px;
89
            margin-right: -2px;
90
            margin-top: 12px;
91
            width: 32px;           
92
        }
93

94
        &--active {
95
            color: white;
96
            i {
97
                color: #fe733f;
98
            }
99
        }
100
    }
101

102
    &__collapse-button {
103
        text-align: center;
104
        cursor: pointer;
105
        margin-left: auto;
106
        margin-bottom: 1em;
107
        font-size: 20px;
108
        color: $deselected-text;
109
    }
110

111
    &--collapsed {
112
        min-width: $collapsed-sidebar-width;
113
        width: $collapsed-sidebar-width;
114
        padding: 15px 5px;
115
        overflow: hidden !important;
116

117
        .sidebar__logo {
118
            margin-left: 0;
119
            flex-direction: column;
120
            margin-bottom: 18px;
121
            margin-top: -7px;
122
            justify-content: center;
123
        }
124

125
        .sidebar__collapse-button {
126
            margin-left: 0;
127
            margin-top: 1em;
128
        }
129

130
        .sidebar__logo img {
131
            margin-right: 0;
132
        }
133

134
        .sidebar__nav-item i {
135
            margin-right: 0;
136
            margin-left: 7px;
137
        }
138

139
        .sidebar__nav-item i.fa {
140
            margin-left: 9px;
141
        }
142

143
        .sidebar__filter-button {
144
            i {
145
                font-size: 14px;
146
                margin-top: 2em;
147
                margin-left: 13px;
148
                color: $deselected-text;
149
            }
150
        }
151
    }
152
}
153