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
9.4 KiB

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