search.css 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. /*!
  2. * # Fomantic-UI - Search
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Search
  12. *******************************/
  13. .ui.search {
  14. position: relative;
  15. }
  16. .ui.search > .prompt {
  17. margin: 0;
  18. outline: none;
  19. -webkit-appearance: none;
  20. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  21. text-shadow: none;
  22. font-style: normal;
  23. font-weight: normal;
  24. line-height: 1.21428571em;
  25. padding: 0.67857143em 1em;
  26. font-size: 1em;
  27. background: #FFFFFF;
  28. border: 1px solid rgba(34, 36, 38, 0.15);
  29. color: rgba(0, 0, 0, 0.87);
  30. -webkit-box-shadow: 0 0 0 0 transparent inset;
  31. box-shadow: 0 0 0 0 transparent inset;
  32. -webkit-transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
  33. transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
  34. transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
  35. transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease;
  36. }
  37. .ui.search .prompt {
  38. border-radius: 500rem;
  39. }
  40. /*--------------
  41. Icon
  42. ---------------*/
  43. .ui.search .prompt ~ .search.icon {
  44. cursor: pointer;
  45. }
  46. /*--------------
  47. Results
  48. ---------------*/
  49. .ui.search > .results {
  50. display: none;
  51. position: absolute;
  52. top: 100%;
  53. left: 0;
  54. -webkit-transform-origin: center top;
  55. transform-origin: center top;
  56. white-space: normal;
  57. text-align: left;
  58. text-transform: none;
  59. background: #FFFFFF;
  60. margin-top: 0.5em;
  61. width: 18em;
  62. border-radius: 0.28571429rem;
  63. -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  64. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  65. border: 1px solid #D4D4D5;
  66. z-index: 998;
  67. }
  68. .ui.search > .results > :first-child {
  69. border-radius: 0.28571429rem 0.28571429rem 0 0;
  70. }
  71. .ui.search > .results > :last-child {
  72. border-radius: 0 0 0.28571429rem 0.28571429rem;
  73. }
  74. /*--------------
  75. Result
  76. ---------------*/
  77. .ui.search > .results .result {
  78. cursor: pointer;
  79. display: block;
  80. overflow: hidden;
  81. font-size: 1em;
  82. padding: 0.85714286em 1.14285714em;
  83. color: rgba(0, 0, 0, 0.87);
  84. line-height: 1.33;
  85. border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  86. }
  87. .ui.search > .results .result:last-child {
  88. border-bottom: none !important;
  89. }
  90. /* Image */
  91. .ui.search > .results .result .image {
  92. float: right;
  93. overflow: hidden;
  94. background: none;
  95. width: 5em;
  96. height: 3em;
  97. border-radius: 0.25em;
  98. }
  99. .ui.search > .results .result .image img {
  100. display: block;
  101. width: auto;
  102. height: 100%;
  103. }
  104. /*--------------
  105. Info
  106. ---------------*/
  107. .ui.search > .results .result .image + .content {
  108. margin: 0 6em 0 0;
  109. }
  110. .ui.search > .results .result .title {
  111. margin: -0.14285714em 0 0;
  112. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  113. font-weight: bold;
  114. font-size: 1em;
  115. color: rgba(0, 0, 0, 0.85);
  116. }
  117. .ui.search > .results .result .description {
  118. margin-top: 0;
  119. font-size: 0.92857143em;
  120. color: rgba(0, 0, 0, 0.4);
  121. }
  122. .ui.search > .results .result .price {
  123. float: right;
  124. color: #21BA45;
  125. }
  126. /*--------------
  127. Message
  128. ---------------*/
  129. .ui.search > .results > .message {
  130. padding: 1em 1em;
  131. }
  132. .ui.search > .results > .message .header {
  133. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  134. font-size: 1rem;
  135. font-weight: bold;
  136. color: rgba(0, 0, 0, 0.87);
  137. }
  138. .ui.search > .results > .message .description {
  139. margin-top: 0.25rem;
  140. font-size: 1em;
  141. color: rgba(0, 0, 0, 0.87);
  142. }
  143. /* View All Results */
  144. .ui.search > .results > .action {
  145. display: block;
  146. border-top: none;
  147. background: #F3F4F5;
  148. padding: 0.92857143em 1em;
  149. color: rgba(0, 0, 0, 0.87);
  150. font-weight: bold;
  151. text-align: center;
  152. }
  153. /*******************************
  154. States
  155. *******************************/
  156. /*--------------------
  157. Focus
  158. ---------------------*/
  159. .ui.search > .prompt:focus {
  160. border-color: rgba(34, 36, 38, 0.35);
  161. background: #FFFFFF;
  162. color: rgba(0, 0, 0, 0.95);
  163. }
  164. /*--------------------
  165. Loading
  166. ---------------------*/
  167. .ui.loading.search .input > i.icon:before {
  168. position: absolute;
  169. content: '';
  170. top: 50%;
  171. left: 50%;
  172. margin: -0.64285714em 0 0 -0.64285714em;
  173. width: 1.28571429em;
  174. height: 1.28571429em;
  175. border-radius: 500rem;
  176. border: 0.2em solid rgba(0, 0, 0, 0.1);
  177. }
  178. .ui.loading.search .input > i.icon:after {
  179. position: absolute;
  180. content: '';
  181. top: 50%;
  182. left: 50%;
  183. margin: -0.64285714em 0 0 -0.64285714em;
  184. width: 1.28571429em;
  185. height: 1.28571429em;
  186. -webkit-animation: loader 0.6s infinite linear;
  187. animation: loader 0.6s infinite linear;
  188. border: 0.2em solid #767676;
  189. border-radius: 500rem;
  190. -webkit-box-shadow: 0 0 0 1px transparent;
  191. box-shadow: 0 0 0 1px transparent;
  192. }
  193. /*--------------
  194. Hover
  195. ---------------*/
  196. .ui.search > .results .result:hover,
  197. .ui.category.search > .results .category .result:hover {
  198. background: #F9FAFB;
  199. }
  200. .ui.search .action:hover:not(div) {
  201. background: #E0E0E0;
  202. }
  203. /*--------------
  204. Active
  205. ---------------*/
  206. .ui.category.search > .results .category.active {
  207. background: #F3F4F5;
  208. }
  209. .ui.category.search > .results .category.active > .name {
  210. color: rgba(0, 0, 0, 0.87);
  211. }
  212. .ui.search > .results .result.active,
  213. .ui.category.search > .results .category .result.active {
  214. position: relative;
  215. border-left-color: rgba(34, 36, 38, 0.1);
  216. background: #F3F4F5;
  217. -webkit-box-shadow: none;
  218. box-shadow: none;
  219. }
  220. .ui.search > .results .result.active .title {
  221. color: rgba(0, 0, 0, 0.85);
  222. }
  223. .ui.search > .results .result.active .description {
  224. color: rgba(0, 0, 0, 0.85);
  225. }
  226. /*--------------------
  227. Disabled
  228. ----------------------*/
  229. /* Disabled */
  230. .ui.disabled.search {
  231. cursor: default;
  232. pointer-events: none;
  233. opacity: 0.45;
  234. }
  235. /*******************************
  236. Types
  237. *******************************/
  238. /*--------------
  239. Selection
  240. ---------------*/
  241. .ui.search.selection .prompt {
  242. border-radius: 0.28571429rem;
  243. }
  244. /* Remove input */
  245. .ui.search.selection > .icon.input > .remove.icon {
  246. pointer-events: none;
  247. position: absolute;
  248. left: auto;
  249. opacity: 0;
  250. color: '';
  251. top: 0;
  252. right: 0;
  253. -webkit-transition: color 0.1s ease, opacity 0.1s ease;
  254. transition: color 0.1s ease, opacity 0.1s ease;
  255. }
  256. .ui.search.selection > .icon.input > .active.remove.icon {
  257. cursor: pointer;
  258. opacity: 0.8;
  259. pointer-events: auto;
  260. }
  261. .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
  262. right: 1.85714em;
  263. }
  264. .ui.search.selection > .icon.input > .remove.icon:hover {
  265. opacity: 1;
  266. color: #DB2828;
  267. }
  268. /*--------------
  269. Category
  270. ---------------*/
  271. .ui.category.search .results {
  272. width: 28em;
  273. }
  274. .ui.category.search .results.animating,
  275. .ui.category.search .results.visible {
  276. display: table;
  277. }
  278. /* Category */
  279. .ui.category.search > .results .category {
  280. display: table-row;
  281. background: #F3F4F5;
  282. -webkit-box-shadow: none;
  283. box-shadow: none;
  284. -webkit-transition: background 0.1s ease, border-color 0.1s ease;
  285. transition: background 0.1s ease, border-color 0.1s ease;
  286. }
  287. /* Last Category */
  288. .ui.category.search > .results .category:last-child {
  289. border-bottom: none;
  290. }
  291. /* First / Last */
  292. .ui.category.search > .results .category:first-child .name + .result {
  293. border-radius: 0 0.28571429rem 0 0;
  294. }
  295. .ui.category.search > .results .category:last-child .result:last-child {
  296. border-radius: 0 0 0.28571429rem 0;
  297. }
  298. /* Category Result Name */
  299. .ui.category.search > .results .category > .name {
  300. display: table-cell;
  301. text-overflow: ellipsis;
  302. width: 100px;
  303. white-space: nowrap;
  304. background: transparent;
  305. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  306. font-size: 1em;
  307. padding: 0.4em 1em;
  308. font-weight: bold;
  309. color: rgba(0, 0, 0, 0.4);
  310. border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  311. }
  312. /* Category Result */
  313. .ui.category.search > .results .category .results {
  314. display: table-cell;
  315. background: #FFFFFF;
  316. border-left: 1px solid rgba(34, 36, 38, 0.15);
  317. border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  318. }
  319. .ui.category.search > .results .category .result {
  320. border-bottom: 1px solid rgba(34, 36, 38, 0.1);
  321. -webkit-transition: background 0.1s ease, border-color 0.1s ease;
  322. transition: background 0.1s ease, border-color 0.1s ease;
  323. padding: 0.85714286em 1.14285714em;
  324. }
  325. /*******************************
  326. Variations
  327. *******************************/
  328. /*-------------------
  329. Left / Right
  330. --------------------*/
  331. .ui[class*="left aligned"].search > .results {
  332. right: auto;
  333. left: 0;
  334. }
  335. .ui[class*="right aligned"].search > .results {
  336. right: 0;
  337. left: auto;
  338. }
  339. /*--------------
  340. Fluid
  341. ---------------*/
  342. .ui.fluid.search .results {
  343. width: 100%;
  344. }
  345. /*--------------
  346. Sizes
  347. ---------------*/
  348. .ui.search {
  349. font-size: 1em;
  350. }
  351. .ui.mini.search {
  352. font-size: 0.78571429em;
  353. }
  354. .ui.tiny.search {
  355. font-size: 0.85714286em;
  356. }
  357. .ui.small.search {
  358. font-size: 0.92857143em;
  359. }
  360. .ui.large.search {
  361. font-size: 1.14285714em;
  362. }
  363. .ui.big.search {
  364. font-size: 1.28571429em;
  365. }
  366. .ui.huge.search {
  367. font-size: 1.42857143em;
  368. }
  369. .ui.massive.search {
  370. font-size: 1.71428571em;
  371. }
  372. /*--------------
  373. Mobile
  374. ---------------*/
  375. @media only screen and (max-width: 767.98px) {
  376. .ui.search .results {
  377. max-width: calc(100vw - 2rem);
  378. }
  379. }
  380. /*******************************
  381. Theme Overrides
  382. *******************************/
  383. /*******************************
  384. Site Overrides
  385. *******************************/