You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

376 lines
8.0 KiB

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