1/**
2 * This file provides the design styles for the quick search.
3 */
4
5.search.main-sidebar {
6    @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
7    @icon-size: @page-header_height;
8    @icon-search_font-size: @font-size-big;
9
10    @media @screen_md-lg {
11        margin-left: -(@menu-margin-lg);
12    }
13
14    p.toggleSearch a,
15    button[type="submit"] {
16        .fontello();
17        .hide-text-show-before();
18        .icon-search();
19
20        position: relative;
21        width: @icon-size;
22        min-height: @icon-size;
23        overflow: visible;
24        background-image: none;
25        background-color: transparent; // fix
26        border: solid 1px transparent;
27        padding: 0;
28        transition: @transition color, @transition background-color, @transition border-color;
29
30        &:hover,
31        &:focus,
32        &:active {
33            min-height: @icon-size;
34            background-color: @ini_button_color;
35            border: solid 1px @ini_button_background;
36
37            &::after {
38                background-color: @ini_button_background;
39            }
40        }
41
42        &::before {
43            width: 100%;
44            color: inherit;
45            font-size: @icon-search_font-size;
46            text-align: center;
47            margin: 0;
48        }
49    }
50
51    p.toggleSearch {
52        display: none;
53        margin: -2px 0 0; // reverse transparent border and box-sizing of a child
54        padding: 0;
55
56        @media @screen_max-xxlg {
57            margin-top: -1px;
58        }
59
60        a {
61            min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
62            width: @main-ico-dummy;
63            border-radius: @fix_border-radius;
64            color: @ini_nav_menu_color;
65            text-decoration: none;
66            box-sizing: border-box;
67
68            &::before {
69                position: absolute;
70                top: 50%;
71                left: 0;
72                color: inherit;
73                text-align: center;
74                margin-top: -(@icon-search_font-size / 2);
75            }
76
77            &:hover,
78            &:focus,
79            &:active {
80                background-color: @ini_nav_menu_hover_bg;
81                border-color: @ini_nav_menu_hover_color;
82                color: @ini_nav_menu_hover_color;
83            }
84        }
85    }
86
87    button[type="submit"] {
88        position: absolute;
89        top: 1px;
90        bottom: 1px;
91        right: 0;
92        height: auto;
93        min-height: (@icon-size - .2);
94        color: @quicksearch-button-color;
95
96        &:hover,
97        &:focus,
98        &:active {
99            top: 0;
100            bottom: 0;
101            min-height: @icon-size;
102            background-color: @ini_button_color;
103            border: solid 1px @ini_button_background;
104            color: @ini_button_background;
105        }
106    }
107
108    /* + + +  form  + + + */
109    form {
110        position: relative;
111        display: block;
112        margin: 0 0 @margin-default;
113
114        .no {
115            display: block;
116
117            #qsearch__in {
118                width: 100%;
119                padding-left: 10px;
120                padding-right: @icon-size;
121            }
122        }
123
124        input {
125            min-height: @icon-size;
126            box-sizing: border-box;
127        }
128
129        button[type="submit"] {
130            border: solid 1px transparent;
131            border-right-color: @ini_border;
132            margin-left: -(@icon-size);
133
134            &::after {
135                content: '';
136                position: absolute;
137                top: 15%;
138                bottom: 15%;
139                width: 1px;
140                left: -1px;
141                background-color: @ini_border;
142                transition: @transition background-color;
143            }
144        }
145
146        div.ajax_qsearch {
147            box-shadow: none;
148            background-color: #FFF;
149            padding: 0;
150
151            strong {
152                color: @quicksearch-button-color;
153                padding: 0.25rem 0.5rem
154            }
155
156            ul li {
157                color: @quicksearch-button-color;
158
159                a {
160                    display: block;
161                    padding: 0.25rem 0.5rem;
162                    overflow: hidden;
163                    color: inherit;
164                    text-overflow: ellipsis;
165                }
166            }
167
168            ul li {
169                &:nth-child(odd) {
170                    background-color: @suggestion-zebra;
171                }
172            }
173        }
174    }
175
176    /* + + + + +  suggestionlist  + + + + + */
177    #qsearch__out {
178        left: auto;
179        top: auto;
180        width: 100%;
181        min-width: 20rem;
182    }
183}
184
185/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
186/* min-width: 1024px */
187@media @screen_min-md {
188
189    // wide page content
190    .wide-content {
191        .search.main-sidebar {
192            p.toggleSearch {
193                position: relative;
194                display: block;
195                float: left;
196                width: auto;
197            }
198
199            form {
200                input {
201                    border: 0 none;
202                }
203
204                .no {
205                    #qsearch__in {
206                        width: 0;
207                        padding: 0;
208                        margin: 0;
209                    }
210
211                    button[type="submit"] {
212                        display: none;
213                    }
214                }
215            }
216        }
217    }
218}
219
220/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
221/* max-width: 1023px */
222@media @screen_max-md {
223
224    // show when toggled
225    body.show-mobile-sidebar {
226        p.toggleSearch {
227            display: none !important;
228        }
229
230        .search.main-sidebar {
231            display: block !important;
232            position: relative;
233            margin-left: -1px;
234            margin-right: -1px;
235
236            form {
237                margin-bottom: 1rem;
238            }
239        }
240    }
241}
242