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.

273 lines
4.9 KiB

  1. /*
  2. * # Semantic - Search
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Search
  13. *******************************/
  14. .ui.search {
  15. position: relative;
  16. text-shadow: none;
  17. font-style: normal;
  18. font-weight: normal;
  19. }
  20. .ui.search input {
  21. -webkit-border-radius: 500rem;
  22. -moz-border-radius: 500rem;
  23. border-radius: 500rem;
  24. }
  25. /*--------------
  26. Button
  27. ---------------*/
  28. .ui.search > .button {
  29. position: relative;
  30. z-index: 2;
  31. float: left;
  32. margin: 0px -15px 0px 0px;
  33. padding: 6px 15px 7px;
  34. -webkit-border-radius: 15px 0px 0px 15px;
  35. -moz-border-radius: 15px 0px 0px 15px;
  36. border-radius: 15px 0px 0px 15px;
  37. -webkit-box-shadow: none;
  38. -moz-box-shadow: none;
  39. box-shadow: none;
  40. }
  41. /*--------------
  42. Results
  43. ---------------*/
  44. .ui.search .results {
  45. display: none;
  46. position: absolute;
  47. z-index: 999;
  48. top: 100%;
  49. right: 0px;
  50. overflow: hidden;
  51. background-color: #FFFFFF;
  52. margin-top: 0.5em;
  53. width: 380px;
  54. font-size: 0.875em;
  55. line-height: 1.2;
  56. color: #555555;
  57. -webkit-border-radius: 3px;
  58. -moz-border-radius: 3px;
  59. border-radius: 3px;
  60. -webkit-box-shadow:
  61. 0px 0px 1px 1px rgba(0, 0, 0, 0.1),
  62. 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
  63. ;
  64. -moz-box-shadow:
  65. 0px 0px 1px 1px rgba(0, 0, 0, 0.1),
  66. 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
  67. ;
  68. box-shadow:
  69. 0px 0px 1px 1px rgba(0, 0, 0, 0.1),
  70. 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset
  71. ;
  72. }
  73. .ui.search .result {
  74. cursor: pointer;
  75. overflow: hidden;
  76. padding: 0.5em 1em;
  77. }
  78. .ui.search .result:first-child {
  79. border-top: none;
  80. }
  81. .ui.search .result .image {
  82. background: #F0F0F0;
  83. margin-left: 10px;
  84. float: right;
  85. overflow: hidden;
  86. -webkit-border-radius: 3px;
  87. -moz-border-radius: 3px;
  88. border-radius: 3px;
  89. width: 38px;
  90. height: 38px;
  91. }
  92. .ui.search .result .image img {
  93. display: block;
  94. width: 38px;
  95. height: 38px;
  96. }
  97. .ui.search .result .image ~ .info {
  98. float: none;
  99. margin-right: 50px;
  100. }
  101. .ui.search .result .info {
  102. float: right;
  103. }
  104. .ui.search .result .title {
  105. font-weight: bold;
  106. color: rgba(0, 0, 0, 0.8);
  107. }
  108. .ui.search .result .description {
  109. color: rgba(0, 0, 0, 0.6);
  110. }
  111. .ui.search .result .price {
  112. float: left;
  113. color: #5BBD72;
  114. font-weight: bold;
  115. }
  116. /*--------------
  117. Message
  118. ---------------*/
  119. .ui.search .message {
  120. padding: 1em;
  121. }
  122. .ui.search .message .text .title {
  123. margin: 0em 0em 0.5rem;
  124. font-size: 1.25rem;
  125. font-weight: bold;
  126. color: rgba(0, 0, 0, 0.8);
  127. }
  128. .ui.search .message .text .description {
  129. margin: 0em;
  130. font-size: 1rem;
  131. color: rgba(0, 0, 0, 0.5);
  132. }
  133. /*--------------
  134. Categories
  135. ---------------*/
  136. .ui.search .results .category {
  137. background-color: #FAFAFA;
  138. border-top: 1px solid rgba(0, 0, 0, 0.1);
  139. -webkit-transition: background 0.2s ease-in;
  140. -moz-transition: background 0.2s ease-in;
  141. -o-transition: background 0.2s ease-in;
  142. -ms-transition: background 0.2s ease-in;
  143. transition: background 0.2s ease-in;
  144. }
  145. .ui.search .results .category:first-child {
  146. border-top: none;
  147. }
  148. .ui.search .results .category > .name {
  149. float: right;
  150. padding: 12px 8px 0px 0px;
  151. font-weight: bold;
  152. color: #777777;
  153. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
  154. }
  155. .ui.search .results .category .result {
  156. background-color: #FFFFFF;
  157. margin-right: 80px;
  158. border-right: 1px solid rgba(0, 0, 0, 0.1);
  159. }
  160. /* View All Results */
  161. .ui.search .all {
  162. display: block;
  163. border-top: 1px solid rgba(0, 0, 0, 0.1);
  164. background-color: #FAFAFA;
  165. height: 2em;
  166. line-height: 2em;
  167. color: rgba(0, 0, 0, 0.6);
  168. font-weight: bold;
  169. text-align: center;
  170. }
  171. /*******************************
  172. States
  173. *******************************/
  174. /*--------------
  175. Hover
  176. ---------------*/
  177. .ui.search .result:hover,
  178. .ui.search .category .result:hover {
  179. background-color: #F8F8F8;
  180. }
  181. .ui.search .all:hover {
  182. background-color: #F0F0F0;
  183. }
  184. /*--------------
  185. Loading
  186. ---------------*/
  187. .ui.search.loading .input .icon {
  188. background: url(../images/loader-mini.gif) no-repeat 50% 50%;
  189. }
  190. .ui.search.loading .input .icon:before,
  191. .ui.search.loading .input .icon:after {
  192. display: none;
  193. }
  194. /*--------------
  195. Active
  196. ---------------*/
  197. .ui.search .results .category.active {
  198. background-color: #F1F1F1;
  199. }
  200. .ui.search .results .category.active > .name {
  201. color: #333333;
  202. }
  203. .ui.search .result.active,
  204. .ui.search .category .result.active {
  205. background-color: #FBFBFB;
  206. }
  207. .ui.search .result.active .title {
  208. color: #000000;
  209. }
  210. .ui.search .result.active .description {
  211. color: #555555;
  212. }
  213. /*******************************
  214. Variations
  215. *******************************/
  216. /* Large */
  217. .ui.search .large.result .image,
  218. .ui.search .large.result .image img {
  219. width: 50px;
  220. height: 50px;
  221. }
  222. .ui.search .large.results .indented.info {
  223. margin-right: 65px;
  224. }
  225. .ui.search .large.results .info .title {
  226. font-size: 16px;
  227. }
  228. .ui.search .large.results .info .description {
  229. font-size: 11px;
  230. }