searchbar.less 4.6 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
35
36
37
38
        position: absolute;
        margin-top: 145px;
        padding: 1%;
        border: 1px solid #ccc;
        border-radius: 4px;
Aria Givi's avatar
Aria Givi committed
39
40
    }

Aria Givi's avatar
Aria Givi committed
41
42
43
44
45
46
47
48
49
50
51
52
53
    .search-button-container {
        display: flex;

        .search-add-focus {
            //display: flex;
            button {
                background-color: white;
                border: none;
                padding: 0px 8px;
                font-size: 16px;
                &:hover {
                    background-color: #e6e6e6;
                }
54
55
            }
        }
Aria Givi's avatar
Aria Givi committed
56
57
58
59
60
61
62
63
64
65
        .search-edit-focus {
            //display: flex;
            button {
                background-color: white;
                border: none;
                padding: 0px 8px;
                font-size: 16px;
                &:hover {
                    background-color: #e6e6e6;
                }
66
67
            }
        }
Aria Givi's avatar
Aria Givi committed
68
69
70
71
72
73
74
75
76
        .search-settings {
            //display: flex;
            a.btn {
                border: none;
                padding: 0px 8px;
                display: flex;
                align-items: center;
                font-size: 16px;
            }
77
78
        }
    }
Aria Givi's avatar
Aria Givi committed
79

80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
    .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;
    }
111
112
113
    .search-custom-hidden {
        display: none;
    }
114
115
116
117
118
119
120
121
122
123
124
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
    @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;
        }
    }
150
151
152
153
154
155
156
157
158
159
160
161
162
    @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%;
        }
    }
163
164
165
166
}

.resultpage-searchbar {
    margin: 5px 0px 0px 5px;
167
168
169
    :first-child {
        border-left: none;
    }
170
171
172
}

.searchbar-tooltip {
173
174
    display: none;
    position: absolute;
175
    margin-top: 40px;
176
177
178
    &>.searchbar-tooltip-arrow {
        width: 0;
        height: 0;
179
180
181
182
183
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #ff8000;
        margin-left: 5%;
    }
184
    &>.searchbar-tooltip-content {
185
186
        position: relative;
        margin-left: -45%;
187
        &>p {
188
189
190
191
192
193
194
195
196
197
            display: inline-block;
            background: #ff8000;
            border-radius: .25em;
            font-size: 16px;
            color: white;
            padding: 5px 10px;
        }
    }
}

198
div:hover>.searchbar-tooltip {
199
    display: inline-block;
200
201
202
203
    
    @media (max-width: @screen-xs-max) {
        display: none;
    }
204
}