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.

221 lines
4.8 KiB

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