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.

368 lines
9.2 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. /* Width of largest icon */
  58. /*******************************
  59. BG Colors
  60. *******************************/
  61. /*******************************
  62. Colors
  63. *******************************/
  64. /*-------------------
  65. Background
  66. --------------------*/
  67. /*--- Colors ---*/
  68. /*--- Emotive ---*/
  69. /*--- Neutrals ---*/
  70. /*-------------------
  71. Emotive
  72. --------------------*/
  73. /*-------------------
  74. Text Colors
  75. --------------------*/
  76. /*-------------------
  77. Brand Colors
  78. --------------------*/
  79. /*-------------------
  80. Borders
  81. --------------------*/
  82. /*-------------------
  83. Sizes
  84. --------------------*/
  85. /*-------------------
  86. Transitions
  87. --------------------*/
  88. /*******************************
  89. States
  90. *******************************/
  91. /*-------------------
  92. Disabled
  93. --------------------*/
  94. /*-------------------
  95. Hover
  96. --------------------*/
  97. /*--- Colors ---*/
  98. /*--- Emotive ---*/
  99. /*--- Neutrals ---*/
  100. /*-------------------
  101. Down (:active)
  102. --------------------*/
  103. /*--- Colors ---*/
  104. /*--- Emotive ---*/
  105. /*--- Neutrals ---*/
  106. /*-------------------
  107. Active
  108. --------------------*/
  109. /*--- Standard ---*/
  110. /*--- Emotive ---*/
  111. /*--- Neutrals ---*/
  112. /*******************************
  113. Search
  114. *******************************/
  115. /* Result Box */
  116. /* Result */
  117. /* Result Image */
  118. /* Result Content */
  119. /* Special Message */
  120. /* All Results Link */
  121. /*******************************
  122. States
  123. *******************************/
  124. /* Hover */
  125. /* Loading */
  126. /* Active Category */
  127. /* Active Result */
  128. /*******************************
  129. Types
  130. *******************************/
  131. /* Category */
  132. /* Sizes */
  133. /*------------------
  134. Load Theme
  135. -------------------*/
  136. /*------------------
  137. Load Site
  138. -------------------*/
  139. /*******************************
  140. User Global Variables
  141. *******************************/
  142. /*******************************
  143. Overrides
  144. *******************************/
  145. /*------------------
  146. Override Mix-in
  147. -------------------*/
  148. /*******************************
  149. Search
  150. *******************************/
  151. .ui.search {
  152. position: relative;
  153. text-shadow: none;
  154. font-style: normal;
  155. font-weight: normal;
  156. }
  157. .ui.search input {
  158. border-radius: 500rem;
  159. }
  160. /*--------------
  161. Icon
  162. ---------------*/
  163. .ui.search .prompt ~ .search.icon {
  164. cursor: pointer;
  165. }
  166. /*--------------
  167. Results
  168. ---------------*/
  169. .ui.search .results {
  170. display: none;
  171. position: absolute;
  172. z-index: 998;
  173. top: 100%;
  174. left: 0%;
  175. overflow: hidden;
  176. background: #ffffff;
  177. margin-top: 0.5em;
  178. width: 380px;
  179. border-radius: 0.25em;
  180. -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  181. box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  182. }
  183. /*--------------
  184. Result
  185. ---------------*/
  186. .ui.search .result {
  187. font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  188. cursor: pointer;
  189. overflow: hidden;
  190. font-size: 0.9em;
  191. padding: 0.5em 1em;
  192. color: rgba(0, 0, 0, 0.8);
  193. line-height: 1.33;
  194. }
  195. .ui.search .result:first-child {
  196. border-top: none;
  197. }
  198. /* Image */
  199. .ui.search .result .image {
  200. float: right;
  201. overflow: hidden;
  202. background: none;
  203. width: 5em;
  204. height: 3em;
  205. border-radius: 0.25em;
  206. }
  207. .ui.search .result .image img {
  208. display: block;
  209. width: auto;
  210. height: 100%;
  211. }
  212. /*--------------
  213. Info
  214. ---------------*/
  215. .ui.search .result .image + .content {
  216. margin: 0em 6em 0em 0em;
  217. }
  218. .ui.search .result .title {
  219. font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  220. font-weight: normal;
  221. color: rgba(0, 0, 0, 0.85);
  222. }
  223. .ui.search .result .description {
  224. color: rgba(0, 0, 0, 0.8);
  225. }
  226. .ui.search .result .price {
  227. float: right;
  228. color: #2ecc40;
  229. }
  230. /*--------------
  231. Message
  232. ---------------*/
  233. .ui.search .message {
  234. padding: 1em 1em;
  235. }
  236. .ui.search .message .header {
  237. font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  238. font-size: 1.2em;
  239. font-weight: bold;
  240. color: rgba(0, 0, 0, 0.8);
  241. }
  242. .ui.search .message .description {
  243. margin-top: 0.25rem;
  244. font-size: 1rem;
  245. color: rgba(0, 0, 0, 0.8);
  246. }
  247. /* View All Results */
  248. .ui.search .all {
  249. display: block;
  250. border-top: 1px solid rgba(0, 0, 0, 0.1);
  251. background-color: #f0f0f0;
  252. height: 2em;
  253. line-height: 2em;
  254. color: rgba(0, 0, 0, 0.8);
  255. font-weight: bold;
  256. text-align: center;
  257. }
  258. /*******************************
  259. States
  260. *******************************/
  261. /*--------------
  262. Hover
  263. ---------------*/
  264. .ui.search .result:hover,
  265. .ui.search .results .category .result:hover {
  266. background: #fafafa;
  267. }
  268. .ui.search .all:hover {
  269. background: #fafafa;
  270. }
  271. /*--------------
  272. Loading
  273. ---------------*/
  274. .ui.search.loading .input .icon {
  275. background: url("../../themes/packages/default/assets/images/loader-mini.gif") no-repeat 50% 50%;
  276. }
  277. .ui.search.loading .input .icon:before,
  278. .ui.search.loading .input .icon:after {
  279. display: none;
  280. }
  281. /*--------------
  282. Active
  283. ---------------*/
  284. .ui.search .results .category.active {
  285. background-color: #f1f1f1;
  286. }
  287. .ui.search .results .category.active > .name {
  288. color: rgba(0, 0, 0, 0.8);
  289. }
  290. .ui.search .result.active,
  291. .ui.search .results .category .result.active {
  292. border-left-color: transparent;
  293. background-color: #f0f0f0;
  294. -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  295. box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  296. }
  297. .ui.search .result.active .title {
  298. color: rgba(0, 0, 0, 0.85);
  299. }
  300. .ui.search .result.active .description {
  301. color: rgba(0, 0, 0, 0.85);
  302. }
  303. /*******************************
  304. Types
  305. *******************************/
  306. /*-------------------
  307. Left / Right
  308. --------------------*/
  309. .ui.right.aligned.search .results {
  310. right: 0%;
  311. left: auto;
  312. }
  313. /*--------------
  314. Categories
  315. ---------------*/
  316. .ui.search .results .category {
  317. background: #f0f0f0;
  318. -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  319. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  320. }
  321. .ui.search .results .category,
  322. .ui.search .results .category .result {
  323. position: relative;
  324. -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  325. transition: background 0.2s ease, border-color 0.2s ease;
  326. }
  327. .ui.search .results .category:first-child {
  328. -webkit-box-shadow: none;
  329. box-shadow: none;
  330. }
  331. .ui.search .results .category > .name {
  332. font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  333. float: 0.9em;
  334. float: left;
  335. padding: 0.4em 0em 0em 1em;
  336. font-weight: bold;
  337. color: rgba(0, 0, 0, 0.4);
  338. }
  339. .ui.search .results .category .result {
  340. background-color: #ffffff;
  341. margin-left: 100px;
  342. border-left: 1px solid rgba(0, 0, 0, 0.1);
  343. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  344. }
  345. /*******************************
  346. Variations
  347. *******************************/
  348. .ui.search {
  349. font-size: 1em;
  350. }
  351. .ui.large.search {
  352. font-size: 1.1em;
  353. }
  354. /*******************************
  355. Overrides
  356. *******************************/
  357. /*******************************
  358. Overrides
  359. *******************************/