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.

373 lines
9.3 KiB

  1. /*
  2. * # Semantic - Search
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Global Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Breakpoints
  50. --------------------*/
  51. /*-------------------
  52. Fonts
  53. --------------------*/
  54. /*-------------------
  55. Icons
  56. --------------------*/
  57. /* Max Width of Icon */
  58. /*-------------------
  59. Easing
  60. --------------------*/
  61. /*******************************
  62. BG Colors
  63. *******************************/
  64. /*******************************
  65. Colors
  66. *******************************/
  67. /*--- Colors ---*/
  68. /*--- Neutrals ---*/
  69. /*--- Text Colors ---*/
  70. /* Preserve */
  71. /* Adjust for Legibility */
  72. /*--- Backgrounds ---*/
  73. /*-------------------
  74. Emotive Colors
  75. --------------------*/
  76. /* Positive / Negative */
  77. /* Messages */
  78. /*-------------------
  79. Text Colors
  80. --------------------*/
  81. /*-------------------
  82. Brand Colors
  83. --------------------*/
  84. /*-------------------
  85. Borders
  86. --------------------*/
  87. /*-------------------
  88. Sizes
  89. --------------------*/
  90. /*-------------------
  91. Transitions
  92. --------------------*/
  93. /*******************************
  94. States
  95. *******************************/
  96. /*-------------------
  97. Disabled
  98. --------------------*/
  99. /*-------------------
  100. Hover
  101. --------------------*/
  102. /*--- Colors ---*/
  103. /*--- Emotive ---*/
  104. /*--- Neutrals ---*/
  105. /*-------------------
  106. Down (:active)
  107. --------------------*/
  108. /*--- Colors ---*/
  109. /*--- Emotive ---*/
  110. /*--- Neutrals ---*/
  111. /*-------------------
  112. Active
  113. --------------------*/
  114. /*--- Standard ---*/
  115. /*--- Emotive ---*/
  116. /*--- Neutrals ---*/
  117. /*******************************
  118. Search
  119. *******************************/
  120. /* Result Box */
  121. /* Result */
  122. /* Result Image */
  123. /* Result Content */
  124. /* Special Message */
  125. /* All Results Link */
  126. /*******************************
  127. States
  128. *******************************/
  129. /* Hover */
  130. /* Loading */
  131. /* Active Category */
  132. /* Active Result */
  133. /*******************************
  134. Types
  135. *******************************/
  136. /* Category */
  137. /* Sizes */
  138. /*------------------
  139. Load Theme
  140. -------------------*/
  141. /*------------------
  142. Load Site
  143. -------------------*/
  144. /*******************************
  145. User Global Variables
  146. *******************************/
  147. /*******************************
  148. Overrides
  149. *******************************/
  150. /*------------------
  151. Override Mix-in
  152. -------------------*/
  153. /*******************************
  154. Search
  155. *******************************/
  156. .ui.search {
  157. position: relative;
  158. text-shadow: none;
  159. font-style: normal;
  160. font-weight: normal;
  161. }
  162. .ui.search input {
  163. border-radius: 500rem;
  164. }
  165. /*--------------
  166. Icon
  167. ---------------*/
  168. .ui.search .prompt ~ .search.icon {
  169. cursor: pointer;
  170. }
  171. /*--------------
  172. Results
  173. ---------------*/
  174. .ui.search .results {
  175. display: none;
  176. position: absolute;
  177. z-index: 998;
  178. top: 100%;
  179. left: 0%;
  180. overflow: hidden;
  181. background: #ffffff;
  182. margin-top: 0.5em;
  183. width: 380px;
  184. border-radius: 0.25em;
  185. -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  186. box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  187. }
  188. /*--------------
  189. Result
  190. ---------------*/
  191. .ui.search .result {
  192. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  193. cursor: pointer;
  194. overflow: hidden;
  195. font-size: 0.9em;
  196. padding: 0.5em 1em;
  197. color: rgba(0, 0, 0, 0.8);
  198. line-height: 1.33;
  199. }
  200. .ui.search .result:first-child {
  201. border-top: none;
  202. }
  203. /* Image */
  204. .ui.search .result .image {
  205. float: right;
  206. overflow: hidden;
  207. background: none;
  208. width: 5em;
  209. height: 3em;
  210. border-radius: 0.25em;
  211. }
  212. .ui.search .result .image img {
  213. display: block;
  214. width: auto;
  215. height: 100%;
  216. }
  217. /*--------------
  218. Info
  219. ---------------*/
  220. .ui.search .result .image + .content {
  221. margin: 0em 6em 0em 0em;
  222. }
  223. .ui.search .result .title {
  224. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  225. font-weight: normal;
  226. color: rgba(0, 0, 0, 0.85);
  227. }
  228. .ui.search .result .description {
  229. color: rgba(0, 0, 0, 0.8);
  230. }
  231. .ui.search .result .price {
  232. float: right;
  233. color: #2ecc40;
  234. }
  235. /*--------------
  236. Message
  237. ---------------*/
  238. .ui.search .message {
  239. padding: 1em 1em;
  240. }
  241. .ui.search .message .header {
  242. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  243. font-size: 1.2em;
  244. font-weight: bold;
  245. color: rgba(0, 0, 0, 0.8);
  246. }
  247. .ui.search .message .description {
  248. margin-top: 0.25rem;
  249. font-size: 1rem;
  250. color: rgba(0, 0, 0, 0.8);
  251. }
  252. /* View All Results */
  253. .ui.search .all {
  254. display: block;
  255. border-top: 1px solid rgba(0, 0, 0, 0.1);
  256. background-color: #f0f0f0;
  257. height: 2em;
  258. line-height: 2em;
  259. color: rgba(0, 0, 0, 0.8);
  260. font-weight: bold;
  261. text-align: center;
  262. }
  263. /*******************************
  264. States
  265. *******************************/
  266. /*--------------
  267. Hover
  268. ---------------*/
  269. .ui.search .result:hover,
  270. .ui.search .results .category .result:hover {
  271. background: #fafafa;
  272. }
  273. .ui.search .all:hover {
  274. background: #fafafa;
  275. }
  276. /*--------------
  277. Loading
  278. ---------------*/
  279. .ui.search.loading .input .icon {
  280. background: url("../../themes/packages/default/assets/images/loader-mini.gif") no-repeat 50% 50%;
  281. }
  282. .ui.search.loading .input .icon:before,
  283. .ui.search.loading .input .icon:after {
  284. display: none;
  285. }
  286. /*--------------
  287. Active
  288. ---------------*/
  289. .ui.search .results .category.active {
  290. background-color: #f1f1f1;
  291. }
  292. .ui.search .results .category.active > .name {
  293. color: rgba(0, 0, 0, 0.8);
  294. }
  295. .ui.search .result.active,
  296. .ui.search .results .category .result.active {
  297. border-left-color: transparent;
  298. background-color: #f0f0f0;
  299. -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  300. box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  301. }
  302. .ui.search .result.active .title {
  303. color: rgba(0, 0, 0, 0.85);
  304. }
  305. .ui.search .result.active .description {
  306. color: rgba(0, 0, 0, 0.85);
  307. }
  308. /*******************************
  309. Types
  310. *******************************/
  311. /*-------------------
  312. Left / Right
  313. --------------------*/
  314. .ui.right.aligned.search .results {
  315. right: 0%;
  316. left: auto;
  317. }
  318. /*--------------
  319. Categories
  320. ---------------*/
  321. .ui.search .results .category {
  322. background: #f0f0f0;
  323. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  324. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  325. }
  326. .ui.search .results .category,
  327. .ui.search .results .category .result {
  328. position: relative;
  329. -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  330. transition: background 0.2s ease, border-color 0.2s ease;
  331. }
  332. .ui.search .results .category:first-child {
  333. -webkit-box-shadow: none;
  334. box-shadow: none;
  335. }
  336. .ui.search .results .category > .name {
  337. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  338. float: 0.9em;
  339. float: left;
  340. padding: 0.4em 0em 0em 1em;
  341. font-weight: bold;
  342. color: rgba(0, 0, 0, 0.4);
  343. }
  344. .ui.search .results .category .result {
  345. background-color: #ffffff;
  346. margin-left: 100px;
  347. border-left: 1px solid rgba(0, 0, 0, 0.1);
  348. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  349. }
  350. /*******************************
  351. Variations
  352. *******************************/
  353. .ui.search {
  354. font-size: 1em;
  355. }
  356. .ui.large.search {
  357. font-size: 1.1em;
  358. }
  359. /*******************************
  360. Overrides
  361. *******************************/
  362. /*******************************
  363. Overrides
  364. *******************************/