searchbar.less 5.11 KB
Newer Older
1
2
@searchbar-border-color: #585858;
@searchbar-border-color-light: #777777;
3

4
.searchbar {
5
    display: -webkit-box;
Dominik Hebeler's avatar
Dominik Hebeler committed
6
    display: -moz-box;
7
    display: -ms-flexbox;
Dominik Hebeler's avatar
Dominik Hebeler committed
8
    display: -webkit-flex;
9
    display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
10
11
12
13
14
15
16
17
18
19
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
20
    -webkit-box-pack: center;
Dominik Hebeler's avatar
Dominik Hebeler committed
21
22
    -moz-box-pack: center;
    -webkit-justify-content: center;
23
24
    -ms-flex-pack: center;
    justify-content: center;
Dominik Hebeler's avatar
Dominik Hebeler committed
25
26
27
28
29
30
31
32
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
33
    font-size: 1em;
34
    background-color: transparent;
35
    color: #333;
36

37
    .search-input-submit {
Dominik Hebeler's avatar
Dominik Hebeler committed
38
        width: 100%;
Dominik Hebeler's avatar
Dominik Hebeler committed
39
        width: calc(100% - 16px);
Dominik Hebeler's avatar
Dominik Hebeler committed
40
        max-width: 600px;
41
        background-color: @searchbar-background-color;
42
        -webkit-box-flex: 1;
43
44
        -ms-flex-positive: 1;
        flex-grow: 1;
45
46
        display: -webkit-box;
        display: -ms-flexbox;
47
        display: flex;
48
        align-items: center;
49

50
        #search-key {
51
            display: flex;
Dominik Hebeler's avatar
Dominik Hebeler committed
52
53
            justify-content: center;
            align-items: center;
54
55

            >a {
Dominik Hebeler's avatar
Dominik Hebeler committed
56
                padding: 0px 16px 0px 16px;
57
                color: #585858;
58

59
                &.authorized {
60
                    color: green;
61
                }
62
63
            }
        }
64

65
        .search-input {
66
            position: relative;
67
68
69
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
70

71
72
73
74
75
            input {
                border: none;
                height: 40px;
                -webkit-box-shadow: none;
                box-shadow: none;
76
                background-color: transparent;
77
                color: @text-color;
78
            }
79

80
81
            #search-delete-btn {
                position: absolute;
82
83
                right: 0;
                bottom: 0;
84
                width: auto;
85
86
                height: calc(100% - 4px);
                margin: 2px 2px 2px 0;
87
                border: none;
Davide's avatar
Davide committed
88
                background-color: transparent;
89
                font-size: 1.8em;
90
                font-weight: normal;
Dominik Hebeler's avatar
Dominik Hebeler committed
91
                display: none;
Davide's avatar
Davide committed
92
                filter: invert(@icon-color);
93

Dominik Hebeler's avatar
Dominik Hebeler committed
94
95
                &:hover {
                    color: red;
Davide's avatar
Davide committed
96
                    filter: invert(0);
Dominik Hebeler's avatar
Dominik Hebeler committed
97
                }
98
            }
99
        }
100

101
102
103
104
105
106
107
        .search-submit {
            button {
                width: 50px;
                line-height: 100%;
                border: 0;
                background-color: transparent;
                padding: 0;
108
                color: #585858;
Davide's avatar
Davide committed
109
                filter: invert(@icon-color);
110
            }
111
112
        }
    }
113

114
115
116
    .search-hidden {
        display: none;
    }
117

118
119
120
    .search-custom-hidden {
        display: none;
    }
121

122
    @media (max-width: @screen-mobile) {
123
124
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
125
126
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
127
128
129
    }
}

130
131
.startpage-searchbar {
    >* {
132
        border: 1px solid @searchbar-border-color;
133

134
135
136
137
        &:not(:first-child) {
            border-left: none;
        }
    }
138

139
    .search-input-submit {
140
        border-radius: 5px;
Dominik Hebeler's avatar
Dominik Hebeler committed
141
        margin: 0 8px;
142

143
        @media (max-width: @screen-mobile) {
Karl Hasselbring's avatar
Karl Hasselbring committed
144
145
            max-width: initial;
        }
146

Dominik Hebeler's avatar
Dominik Hebeler committed
147
        >#search-key {
148
            border-right: 1px solid @searchbar-border-color-light;
Dominik Hebeler's avatar
Dominik Hebeler committed
149
        }
150

Dominik Hebeler's avatar
Dominik Hebeler committed
151
        >#submit-inputgroup {
152
            border-left: 1px solid @searchbar-border-color-light;
153
        }
154
    }
155

156
    @media (max-width: @screen-mobile) {
157
158
159
160
161
        .search-focus-selector {
            border: 1px solid #aaa;
            border-top: none;
            border-radius: 5px;
        }
162

163
164
165
166
        .search-input-submit {
            border: 1px solid #aaa;
            border-radius: 5px;
        }
167

168
169
170
171
        >* {
            border: 1px solid #aaa;
            border-radius: 5px;
            min-height: 40px;
172

173
174
175
176
177
            &:not(:first-child) {
                border-left: 1px solid #aaa;
            }
        }
    }
178
179
}

180
.resultpage-searchbar {
181
182
    #search-key>a {
        padding: 5px 16px 0px 16px !important;
Dominik Hebeler's avatar
Dominik Hebeler committed
183
    }
184

185
    .search-input-submit {
186
187
188
        .search-input input {
            padding-right: 35px; // Makes it so the overlayed delete button does not hide the text belowF
        }
189
190
191
192

        .search-submit button {
            @media(max-width: @screen-mobile) {
                margin-right: 30px;
193
            }
194

195
196
197
            i.fa-search {
                margin-top: 5px;
            }
198
        }
199
200
201
    }
}

202
203
#research-bar-placeholder {
    width: 100%;
204
    max-width: 760px;
205
    height: 51px;
206
207
208
209
}

#searchForm {
    margin: 0;
210
211
}

Phil Höfer's avatar
Phil Höfer committed
212
213
214
215
#searchbar-img-key {
    height: 15px;
    filter: invert(1) brightness(0.4);
}
Phil Höfer's avatar
Phil Höfer committed
216

217
#searchbar-img-lupe {
Dominik Hebeler's avatar
Dominik Hebeler committed
218
    height: 15px;
Phil Höfer's avatar
Phil Höfer committed
219
    filter: invert(1) brightness(0.1);
Kim Höfer's avatar
Kim Höfer committed
220
}
221

Kim Höfer's avatar
Kim Höfer committed
222
223
.search-submit button {
    cursor: pointer;
Phil Höfer's avatar
Phil Höfer committed
224
225
226
227
}

.authorized #searchbar-img-key {
    filter: initial;
228
}