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.

502 lines
12 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
  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 Defaults
  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. /* Status */
  86. /*-------------------
  87. Neutral Text
  88. --------------------*/
  89. /*-------------------
  90. Brand Colors
  91. --------------------*/
  92. /*-------------------
  93. Borders
  94. --------------------*/
  95. /*-------------------
  96. Sizes
  97. --------------------*/
  98. /*-------------------
  99. Transitions
  100. --------------------*/
  101. /*-------------------
  102. Derived Values
  103. --------------------*/
  104. /* Makes sure padded grid can fit at 320px */
  105. /* Used to match floats with text */
  106. /* Positive / Negative Dupes */
  107. /* Header Colors */
  108. /* Responsive */
  109. /* Columns */
  110. /*******************************
  111. States
  112. *******************************/
  113. /*-------------------
  114. Disabled
  115. --------------------*/
  116. /*-------------------
  117. Hover
  118. --------------------*/
  119. /*--- Colors ---*/
  120. /*--- Emotive ---*/
  121. /*--- Neutrals ---*/
  122. /*-------------------
  123. Down (:active)
  124. --------------------*/
  125. /*--- Colors ---*/
  126. /*--- Emotive ---*/
  127. /*--- Neutrals ---*/
  128. /*-------------------
  129. Active
  130. --------------------*/
  131. /*--- Standard ---*/
  132. /*--- Emotive ---*/
  133. /*--- Neutrals ---*/
  134. /*******************************
  135. Search
  136. *******************************/
  137. /* Result Box */
  138. /* Result */
  139. /* Result Image */
  140. /* Result Content */
  141. /* Special Message */
  142. /* All Results Link */
  143. /*******************************
  144. States
  145. *******************************/
  146. /* Hover */
  147. /* Loading */
  148. /* Active Category */
  149. /* Active Result */
  150. /*******************************
  151. Types
  152. *******************************/
  153. /* Category */
  154. /* Sizes */
  155. /*------------------
  156. Load Theme
  157. -------------------*/
  158. /*******************************
  159. Site Settings
  160. *******************************/
  161. /*-------------------
  162. Paths
  163. --------------------*/
  164. /*-------------------
  165. Fonts
  166. --------------------*/
  167. /*-------------------
  168. Site Colors
  169. --------------------*/
  170. /*--- Colors ---*/
  171. /*--- Light Colors ---*/
  172. /*-------------------
  173. Page
  174. --------------------*/
  175. /*-------------------
  176. Background Colors
  177. --------------------*/
  178. /* Used for differentiating neutrals */
  179. /* Used for differentiating layers */
  180. /*-------------------
  181. Grid
  182. --------------------*/
  183. /*-------------------
  184. Breakpoints
  185. --------------------*/
  186. /*******************************
  187. Power-User
  188. *******************************/
  189. /*-------------------
  190. Icons
  191. --------------------*/
  192. /* Max Width of Icon */
  193. /*-------------------
  194. Easing
  195. --------------------*/
  196. /*--- Neutrals ---*/
  197. /*--- Colored Backgrounds ---*/
  198. /*--- Colored Text ---*/
  199. /*--- Colored Headers ---*/
  200. /*-------------------
  201. Emotive Colors
  202. --------------------*/
  203. /* Mood */
  204. /* Status */
  205. /*-------------------
  206. Neutral Text
  207. --------------------*/
  208. /*-------------------
  209. Brand Colors
  210. --------------------*/
  211. /*-------------------
  212. Borders
  213. --------------------*/
  214. /*-------------------
  215. Sizes
  216. --------------------*/
  217. /*-------------------
  218. Transitions
  219. --------------------*/
  220. /*-------------------
  221. Derived Values
  222. --------------------*/
  223. /* Makes sure padded grid can fit at 320px */
  224. /* Used to match floats with text */
  225. /* Positive / Negative Dupes */
  226. /* Header Colors */
  227. /* Responsive */
  228. /* Columns */
  229. /*******************************
  230. States
  231. *******************************/
  232. /*-------------------
  233. Disabled
  234. --------------------*/
  235. /*-------------------
  236. Hover
  237. --------------------*/
  238. /*--- Colors ---*/
  239. /*--- Emotive ---*/
  240. /*--- Neutrals ---*/
  241. /*-------------------
  242. Down (:active)
  243. --------------------*/
  244. /*--- Colors ---*/
  245. /*--- Emotive ---*/
  246. /*--- Neutrals ---*/
  247. /*-------------------
  248. Active
  249. --------------------*/
  250. /*--- Standard ---*/
  251. /*--- Emotive ---*/
  252. /*--- Neutrals ---*/
  253. /*******************************
  254. Search
  255. *******************************/
  256. /* Result Box */
  257. /* Result */
  258. /* Result Image */
  259. /* Result Content */
  260. /* Special Message */
  261. /* All Results Link */
  262. /*******************************
  263. States
  264. *******************************/
  265. /* Hover */
  266. /* Loading */
  267. /* Active Category */
  268. /* Active Result */
  269. /*******************************
  270. Types
  271. *******************************/
  272. /* Category */
  273. /* Sizes */
  274. /*------------------
  275. Load Site
  276. -------------------*/
  277. /*******************************
  278. User Global Variables
  279. *******************************/
  280. /*******************************
  281. Overrides
  282. *******************************/
  283. /*------------------
  284. Override Loader
  285. -------------------*/
  286. /*******************************
  287. Search
  288. *******************************/
  289. .ui.search {
  290. position: relative;
  291. text-shadow: none;
  292. font-style: normal;
  293. font-weight: normal;
  294. }
  295. .ui.search input {
  296. border-radius: 500rem;
  297. }
  298. /*--------------
  299. Icon
  300. ---------------*/
  301. .ui.search .prompt ~ .search.icon {
  302. cursor: pointer;
  303. }
  304. /*--------------
  305. Results
  306. ---------------*/
  307. .ui.search .results {
  308. display: none;
  309. position: absolute;
  310. z-index: 998;
  311. top: 100%;
  312. left: 0%;
  313. overflow: hidden;
  314. background: #ffffff;
  315. margin-top: 0.5em;
  316. width: 380px;
  317. border-radius: 0.25em;
  318. box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2);
  319. }
  320. /*--------------
  321. Result
  322. ---------------*/
  323. .ui.search .result {
  324. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  325. cursor: pointer;
  326. overflow: hidden;
  327. font-size: 0.9em;
  328. padding: 0.5em 1em;
  329. color: rgba(0, 0, 0, 0.8);
  330. line-height: 1.33;
  331. }
  332. .ui.search .result:first-child {
  333. border-top: none;
  334. }
  335. /* Image */
  336. .ui.search .result .image {
  337. float: right;
  338. overflow: hidden;
  339. background: none;
  340. width: 5em;
  341. height: 3em;
  342. border-radius: 0.25em;
  343. }
  344. .ui.search .result .image img {
  345. display: block;
  346. width: auto;
  347. height: 100%;
  348. }
  349. /*--------------
  350. Info
  351. ---------------*/
  352. .ui.search .result .image + .content {
  353. margin: 0em 6em 0em 0em;
  354. }
  355. .ui.search .result .title {
  356. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  357. font-weight: normal;
  358. color: rgba(0, 0, 0, 0.85);
  359. }
  360. .ui.search .result .description {
  361. color: rgba(0, 0, 0, 0.8);
  362. }
  363. .ui.search .result .price {
  364. float: right;
  365. color: #5bbd72;
  366. }
  367. /*--------------
  368. Message
  369. ---------------*/
  370. .ui.search .message {
  371. padding: 1em 1em;
  372. }
  373. .ui.search .message .header {
  374. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  375. font-size: 1.2em;
  376. font-weight: bold;
  377. color: rgba(0, 0, 0, 0.8);
  378. }
  379. .ui.search .message .description {
  380. margin-top: 0.25rem;
  381. font-size: 1rem;
  382. color: rgba(0, 0, 0, 0.8);
  383. }
  384. /* View All Results */
  385. .ui.search .all {
  386. display: block;
  387. border-top: 1px solid rgba(0, 0, 0, 0.1);
  388. background-color: #f0f0f0;
  389. height: 2em;
  390. line-height: 2em;
  391. color: rgba(0, 0, 0, 0.8);
  392. font-weight: bold;
  393. text-align: center;
  394. }
  395. /*******************************
  396. States
  397. *******************************/
  398. /*--------------
  399. Hover
  400. ---------------*/
  401. .ui.search .result:hover,
  402. .ui.search .results .category .result:hover {
  403. background: #fafafa;
  404. }
  405. .ui.search .all:hover {
  406. background: #fafafa;
  407. }
  408. /*--------------
  409. Loading
  410. ---------------*/
  411. .ui.search.loading .input .icon {
  412. background: url("../../themes/packages/default/assets/images/loader-mini.gif") no-repeat 50% 50%;
  413. }
  414. .ui.search.loading .input .icon:before,
  415. .ui.search.loading .input .icon:after {
  416. display: none;
  417. }
  418. /*--------------
  419. Active
  420. ---------------*/
  421. .ui.search .results .category.active {
  422. background-color: #f1f1f1;
  423. }
  424. .ui.search .results .category.active > .name {
  425. color: rgba(0, 0, 0, 0.8);
  426. }
  427. .ui.search .result.active,
  428. .ui.search .results .category .result.active {
  429. border-left-color: transparent;
  430. background-color: #f0f0f0;
  431. box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
  432. }
  433. .ui.search .result.active .title {
  434. color: rgba(0, 0, 0, 0.85);
  435. }
  436. .ui.search .result.active .description {
  437. color: rgba(0, 0, 0, 0.85);
  438. }
  439. /*******************************
  440. Types
  441. *******************************/
  442. /*-------------------
  443. Left / Right
  444. --------------------*/
  445. .ui.right.aligned.search .results {
  446. right: 0%;
  447. left: auto;
  448. }
  449. /*--------------
  450. Categories
  451. ---------------*/
  452. .ui.search .results .category {
  453. background: #f0f0f0;
  454. box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  455. }
  456. .ui.search .results .category,
  457. .ui.search .results .category .result {
  458. position: relative;
  459. -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  460. transition: background 0.2s ease, border-color 0.2s ease;
  461. }
  462. .ui.search .results .category:first-child {
  463. box-shadow: none;
  464. }
  465. .ui.search .results .category > .name {
  466. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  467. float: 0.9em;
  468. float: left;
  469. padding: 0.4em 0em 0em 1em;
  470. font-weight: bold;
  471. color: rgba(0, 0, 0, 0.4);
  472. }
  473. .ui.search .results .category .result {
  474. background-color: #ffffff;
  475. margin-left: 100px;
  476. border-left: 1px solid rgba(0, 0, 0, 0.1);
  477. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  478. }
  479. /*******************************
  480. Variations
  481. *******************************/
  482. .ui.search {
  483. font-size: 1em;
  484. }
  485. .ui.large.search {
  486. font-size: 1.1em;
  487. }
  488. /*******************************
  489. Overrides
  490. *******************************/
  491. /*******************************
  492. Overrides
  493. *******************************/