1
0

search.css 9.7 KB

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