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