github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/search.less (about) 1 /*! 2 * # Semantic UI - Search 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Theme 15 *******************************/ 16 17 @type : 'module'; 18 @element : 'search'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Search 24 *******************************/ 25 26 .ui.search { 27 position: relative; 28 } 29 30 .ui.search > .prompt { 31 margin: 0em; 32 outline: none; 33 -webkit-appearance: none; 34 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 35 36 text-shadow: none; 37 font-style: normal; 38 font-weight: normal; 39 40 line-height: @promptLineHeight; 41 padding: @promptPadding; 42 font-size: @promptFontSize; 43 44 background: @promptBackground; 45 border: @promptBorder; 46 color: @promptColor; 47 box-shadow: @promptBoxShadow; 48 transition: @promptTransition; 49 } 50 51 .ui.search .prompt { 52 border-radius: @promptBorderRadius; 53 } 54 55 56 /*-------------- 57 Icon 58 ---------------*/ 59 60 .ui.search .prompt ~ .search.icon { 61 cursor: pointer; 62 } 63 64 /*-------------- 65 Results 66 ---------------*/ 67 68 .ui.search > .results { 69 display: none; 70 71 position: absolute; 72 top: 100%; 73 left: 0%; 74 75 background: @resultsBackground; 76 77 margin-top: @resultsDistance; 78 width: @resultsWidth; 79 80 border-radius: @resultsBorderRadius; 81 box-shadow: @resultsBoxShadow; 82 z-index: @resultsZIndex; 83 } 84 85 /*-------------- 86 Result 87 ---------------*/ 88 89 .ui.search > .results .result { 90 cursor: pointer; 91 display: block; 92 overflow: hidden; 93 font-size: @resultFontSize; 94 padding: @resultVerticalPadding @resultHorizontalPadding; 95 color: @resultTextColor; 96 line-height: @resultLineHeight; 97 border-bottom: @resultDivider; 98 } 99 .ui.search > .results .result:last-child { 100 border-bottom: @resultLastDivider; 101 } 102 103 /* Image */ 104 .ui.search > .results .result .image { 105 float: @resultImageFloat; 106 overflow: hidden; 107 background: @resultImageBackground; 108 width: @resultImageWidth; 109 height: @resultImageHeight; 110 border-radius: @resultImageBorderRadius; 111 } 112 .ui.search > .results .result .image img { 113 display: block; 114 width: auto; 115 height: 100%; 116 } 117 118 /*-------------- 119 Info 120 ---------------*/ 121 122 .ui.search > .results .result .image + .content { 123 margin: @resultImageMargin; 124 } 125 126 .ui.search > .results .result .title { 127 font-family: @resultTitleFont; 128 font-weight: @resultTitleFontWeight; 129 font-size: @resultTitleFontSize; 130 color: @resultTitleColor; 131 } 132 .ui.search > .results .result .description { 133 margin-top: @resultDescriptionDistance; 134 font-size: @resultDescriptionFontSize; 135 color: @resultDescriptionColor; 136 } 137 .ui.search > .results .result .price { 138 float: @resultPriceFloat; 139 color: @resultPriceColor; 140 } 141 142 /*-------------- 143 Message 144 ---------------*/ 145 146 .ui.search > .results > .message { 147 padding: @messageVerticalPadding @messageHorizontalPadding; 148 } 149 .ui.search > .results > .message .header { 150 font-family: @headerFont; 151 font-size: @messageHeaderFontSize; 152 font-weight: @messageHeaderFontWeight; 153 color: @messageHeaderColor; 154 } 155 .ui.search > .results > .message .description { 156 margin-top: @messageDescriptionDistance; 157 font-size: @messageDescriptionFontSize; 158 color: @messageDescriptionColor; 159 } 160 161 /* View All Results */ 162 .ui.search > .results > .action { 163 display: block; 164 border-top: @actionBorder; 165 background: @actionBackground; 166 padding: @actionPadding; 167 color: @actionColor; 168 font-weight: @actionFontWeight; 169 text-align: @actionAlign; 170 } 171 172 173 /******************************* 174 States 175 *******************************/ 176 177 /*-------------------- 178 Loading 179 ---------------------*/ 180 181 .ui.loading.search .input > .icon:before { 182 position: absolute; 183 content: ''; 184 top: 50%; 185 left: 50%; 186 187 margin: @loaderMargin; 188 width: @loaderSize; 189 height: @loaderSize; 190 191 border-radius: @circularRadius; 192 border: @loaderLineWidth solid @loaderFillColor; 193 } 194 .ui.loading.search .input > .icon:after { 195 position: absolute; 196 content: ''; 197 top: 50%; 198 left: 50%; 199 200 margin: @loaderMargin; 201 width: @loaderSize; 202 height: @loaderSize; 203 204 animation: button-spin @loaderSpeed linear; 205 animation-iteration-count: infinite; 206 207 border-radius: @circularRadius; 208 209 border-color: @loaderLineColor transparent transparent; 210 border-style: solid; 211 border-width: @loaderLineWidth; 212 213 box-shadow: 0px 0px 0px 1px transparent; 214 } 215 216 217 /*-------------- 218 Hover 219 ---------------*/ 220 221 .ui.search > .results .result:hover, 222 .ui.category.search > .results .category .result:hover { 223 background: @resultHoverBackground; 224 } 225 .ui.search .action:hover { 226 background: @actionHoverBackground; 227 } 228 229 /*-------------- 230 Active 231 ---------------*/ 232 233 .ui.search > .results .category.active { 234 background: @categoryActiveBackground; 235 } 236 .ui.search > .results .category.active > .name { 237 color: @categoryNameActiveColor; 238 } 239 240 .ui.search > .results .result.active, 241 .ui.category.search > .results .category .result.active { 242 position: relative; 243 border-left-color: @resultActiveBorderLeft; 244 background: @resultActiveBackground; 245 box-shadow: @resultActiveBoxShadow; 246 } 247 .ui.search > .results .result.active .title { 248 color: @resultActiveTitleColor; 249 } 250 .ui.search > .results .result.active .description { 251 color: @resultActiveDescriptionColor; 252 } 253 254 /******************************* 255 Types 256 *******************************/ 257 258 /*-------------- 259 Categories 260 ---------------*/ 261 262 .ui.category.search .results { 263 width: @categoryResultsWidth; 264 } 265 266 /* Category */ 267 .ui.category.search > .results .category { 268 background: @categoryBackground; 269 box-shadow: @categoryBoxShadow; 270 border-bottom: @categoryDivider; 271 transition: @categoryTransition; 272 } 273 .ui.category.search > .results .category:last-child { 274 border-bottom: none; 275 } 276 277 /* Category Result */ 278 .ui.category.search > .results .category .result { 279 background: @categoryResultBackground; 280 margin-left: @categoryNameWidth; 281 border-left: @categoryResultLeftBorder; 282 border-bottom: @categoryResultDivider; 283 transition: @categoryResultTransition; 284 } 285 .ui.category.search > .results .category .result:last-child { 286 border-bottom: @categoryResultLastDivider; 287 } 288 289 /* Category Result Name */ 290 .ui.category.search > .results .category > .name { 291 width: @categoryNameWidth; 292 background: @categoryNameBackground; 293 font-family: @categoryNameFont; 294 font-size: @categoryNameFontSize; 295 float: @categoryNameFontSize; 296 float: @categoryNameFloat; 297 padding: @categoryNamePadding; 298 font-weight: @categoryNameFontWeight; 299 color: @categoryNameColor; 300 } 301 302 /******************************* 303 Variations 304 *******************************/ 305 306 /*------------------- 307 Left / Right 308 --------------------*/ 309 310 .ui[class*="left aligned"].search > .results { 311 right: auto; 312 left: 0%; 313 } 314 .ui[class*="right aligned"].search > .results { 315 right: 0%; 316 left: auto; 317 } 318 319 /*-------------- 320 Fluid 321 ---------------*/ 322 323 .ui.fluid.search .results { 324 width: 100%; 325 } 326 327 328 /*-------------- 329 Sizes 330 ---------------*/ 331 332 .ui.search { 333 font-size: @medium; 334 } 335 .ui.large.search { 336 font-size: @large; 337 } 338 339 .loadUIOverrides();