searchbar.less 4.96 KB
Newer Older
1
2
3
4
5
.searchbar {
    display: flex;
    align-items: stretch;
    font-size: 16px;
    background-color: white;
Aria Givi's avatar
Aria Givi committed
6

7
8
9
    .search-focus-selector {
        background-color: transparent;
        border-radius: 5px 0px 0px 5px;
Aria Givi's avatar
Aria Givi committed
10
11
        display: flex;
        align-items: center;
Aria Givi's avatar
Aria Givi committed
12
13
14

        &>button {
            border: none;
Aria Givi's avatar
Aria Givi committed
15
            background-color: white;
Aria Givi's avatar
Aria Givi committed
16
17
18
            margin: 5px;
        }

19
20
21
22
23
24
25
26
        select {
            width: 100%;
            color: #777;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
            padding-right: 35px;
Aria Givi's avatar
Aria Givi committed
27
28
            border: 1px solid #ccc;
            border-radius: 4px;
29
30
        }
    }
Aria Givi's avatar
Aria Givi committed
31

Aria Givi's avatar
Aria Givi committed
32
    .search-option-frame {
Aria Givi's avatar
Aria Givi committed
33
        display: none;
Aria Givi's avatar
Aria Givi committed
34
        position: absolute;
Aria Givi's avatar
Aria Givi committed
35
        margin-top: 150px;
Aria Givi's avatar
Aria Givi committed
36
        padding: 1%;
Aria Givi's avatar
Aria Givi committed
37
        border: 1px solid rgb(175, 175, 175);
Aria Givi's avatar
Aria Givi committed
38
        border-radius: 4px;
Aria Givi's avatar
Aria Givi committed
39
40
41
42
43
44
45
46
47
48
49

        .searchbar-options-arrow {
            width: 0;
            height: 0;
            top: -5px;
            position: absolute;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid rgb(175, 175, 175);
            margin-left: 3%;
        }
Aria Givi's avatar
Aria Givi committed
50
51
    }

Aria Givi's avatar
Aria Givi committed
52
53
    .search-button-container {
        display: flex;
Aria Givi's avatar
Aria Givi committed
54
        margin-top: 3%;
Aria Givi's avatar
Aria Givi committed
55
56
57
58
59
60
61
62
63
64
        .search-add-focus {
            //display: flex;
            button {
                background-color: white;
                border: none;
                padding: 0px 8px;
                font-size: 16px;
                &:hover {
                    background-color: #e6e6e6;
                }
65
66
            }
        }
Aria Givi's avatar
Aria Givi committed
67
68
69
70
71
72
73
74
75
76
        .search-edit-focus {
            //display: flex;
            button {
                background-color: white;
                border: none;
                padding: 0px 8px;
                font-size: 16px;
                &:hover {
                    background-color: #e6e6e6;
                }
77
78
            }
        }
Aria Givi's avatar
Aria Givi committed
79
80
81
82
83
        .search-settings {
            //display: flex;
            a.btn {
                border: none;
                padding: 0px 8px;
Aria Givi's avatar
Aria Givi committed
84
                display: block;
Aria Givi's avatar
Aria Givi committed
85
86
87
                align-items: center;
                font-size: 16px;
            }
88
89
        }
    }
Aria Givi's avatar
Aria Givi committed
90

91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
    .search-input-submit {
        flex-grow: 1;
        display: flex;
    }
    .search-input {
        flex-grow: 1;
        input {
            border: none;
            height: 40px;
            &:focus {
                outline-color: rgb(255, 128, 0);
                -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                -moz-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
                border-color: rgba(255, 128, 0, 1);
            }
        }
    }
    .search-submit {
        button {
            width: 50px;
            line-height: 100%;
            border: 0;
            background-color: transparent;
            padding: 0;
            height: 100%;
        }
    }
    .search-hidden {
        display: none;
    }
122
123
124
    .search-custom-hidden {
        display: none;
    }
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
    @media (max-width: @screen-xs-max) {
        flex-direction: column-reverse;
    }
}


.searchform-bonus {
    li {
        margin: 5px;
    }
}

.startpage-searchbar {
    >* {
        border: 1px solid #aaa;
        &:not(:first-child) {
            border-left: none;
        }
    }
    .search-input-submit {
        border-radius: 0px 5px 5px 0px;
    }
    .search-submit {
        border-left: 1px solid #aaa;
    }
    @media (max-width: @screen-xs-max) {
        .search-focus-selector {
            border: 1px solid #aaa;
            border-top: none;
            border-radius: 5px;
        }
        .search-input-submit {
            border: 1px solid #aaa;
            border-radius: 5px;
        }
    }
161
162
163
164
165
166
167
168
169
170
171
172
173
    @media (max-width: @screen-xs-max) {
        >* {
            border: 1px solid #aaa;
            border-radius: 5px;
            min-height: 40px;
            &:not(:first-child) {
                border-left: 1px solid #aaa;
            }
        }
        *:not(.search-submit) {
            width: 100%;
        }
    }
174
175
176
177
}

.resultpage-searchbar {
    margin: 5px 0px 0px 5px;
178
179
180
    :first-child {
        border-left: none;
    }
181
182
183
}

.searchbar-tooltip {
184
185
    display: none;
    position: absolute;
186
    margin-top: 40px;
187
188
189
    &>.searchbar-tooltip-arrow {
        width: 0;
        height: 0;
190
191
192
193
194
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #ff8000;
        margin-left: 5%;
    }
195
    &>.searchbar-tooltip-content {
196
197
        position: relative;
        margin-left: -45%;
198
        &>p {
199
200
201
202
203
204
205
206
207
208
            display: inline-block;
            background: #ff8000;
            border-radius: .25em;
            font-size: 16px;
            color: white;
            padding: 5px 10px;
        }
    }
}

209
div:hover>.searchbar-tooltip {
210
    display: inline-block;
211
212
213
214
    
    @media (max-width: @screen-xs-max) {
        display: none;
    }
215
}