xref: /template/sprintdoc/css/area_main-sidebar-search.less (revision 07a6211583014e9c3aa819b007639d54439c138f) 
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                color: @quicksearch-button-color;
157                padding: 0.25rem 0.5rem
158            }
159
160            ul li {
161                color: @quicksearch-button-color;
162
163                a {
164                    display: block;
165                    padding: 0.25rem 0.5rem;
166                    overflow: hidden;
167                    color: inherit;
168                    text-overflow: ellipsis;
169                }
170            }
171
172            ul li {
173                &:nth-child(odd) {
174                    background-color: @suggestion-zebra;
175                }
176            }
177        }
178    }
179
180
181/* + + + + +  suggestionlist  + + + + + */
182    #qsearch__out {
183        left: auto;
184        top: auto;
185        width: 100%;
186        min-width: 20rem;
187    }
188}
189
190
191/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
192/* min-width: 1024px */
193
194@media @screen_min-md {
195
196    // wide page content
197    .wide-content {
198        .search.main-sidebar {
199            p.toggleSearch {
200                position: relative;
201                display: block;
202                float: left;
203                width: auto;
204            }
205
206            form {
207                input {
208                    border: 0 none;
209                }
210
211                .no {
212                    #qsearch__in {
213                        width: 0;
214                        padding: 0;
215                        margin: 0;
216                    }
217
218                    button[type="submit"] {
219                        display: none;
220                    }
221                }
222            }
223        }
224    }
225}
226
227
228/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
229/* max-width: 1023px */
230
231@media @screen_max-md {
232
233    // show when toggled
234    body.show-mobile-sidebar {
235        p.toggleSearch {
236            display: none !important;
237        }
238
239        .search.main-sidebar {
240            display: block !important;
241            position: relative;
242            margin-left: -1px;
243            margin-right: -1px;
244
245            form {
246                margin-bottom: 1rem;
247            }
248        }
249    }
250}
251