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