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.

382 lines
9.5 KiB

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