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