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/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: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
  61. -moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
  62. box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset;
  63. }
  64. .ui.search .result {
  65. cursor: pointer;
  66. overflow: hidden;
  67. padding: 0.5em 1em;
  68. }
  69. .ui.search .result:first-child {
  70. border-top: none;
  71. }
  72. .ui.search .result .image {
  73. background: #F0F0F0;
  74. margin-left: 10px;
  75. float: right;
  76. overflow: hidden;
  77. -webkit-border-radius: 3px;
  78. -moz-border-radius: 3px;
  79. border-radius: 3px;
  80. width: 38px;
  81. height: 38px;
  82. }
  83. .ui.search .result .image img {
  84. display: block;
  85. width: 38px;
  86. height: 38px;
  87. }
  88. .ui.search .result .image ~ .info {
  89. float: none;
  90. margin-right: 50px;
  91. }
  92. .ui.search .result .info {
  93. float: right;
  94. }
  95. .ui.search .result .title {
  96. font-weight: bold;
  97. color: rgba(0, 0, 0, 0.8);
  98. }
  99. .ui.search .result .description {
  100. color: rgba(0, 0, 0, 0.6);
  101. }
  102. .ui.search .result .price {
  103. float: left;
  104. color: #5BBD72;
  105. font-weight: bold;
  106. }
  107. /*--------------
  108. Message
  109. ---------------*/
  110. .ui.search .message {
  111. padding: 1em;
  112. }
  113. .ui.search .message .text .title {
  114. margin: 0em 0em 0.5rem;
  115. font-size: 1.25rem;
  116. font-weight: bold;
  117. color: rgba(0, 0, 0, 0.8);
  118. }
  119. .ui.search .message .text .description {
  120. margin: 0em;
  121. font-size: 1rem;
  122. color: rgba(0, 0, 0, 0.5);
  123. }
  124. /*--------------
  125. Categories
  126. ---------------*/
  127. .ui.search .results .category {
  128. background-color: #FAFAFA;
  129. border-top: 1px solid rgba(0, 0, 0, 0.1);
  130. -webkit-transition: background 0.2s ease-in;
  131. -moz-transition: background 0.2s ease-in;
  132. -o-transition: background 0.2s ease-in;
  133. -ms-transition: background 0.2s ease-in;
  134. transition: background 0.2s ease-in;
  135. }
  136. .ui.search .results .category:first-child {
  137. border-top: none;
  138. }
  139. .ui.search .results .category > .name {
  140. float: right;
  141. padding: 12px 8px 0px 0px;
  142. font-weight: bold;
  143. color: #777777;
  144. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
  145. }
  146. .ui.search .results .category .result {
  147. background-color: #FFFFFF;
  148. margin-right: 80px;
  149. border-right: 1px solid rgba(0, 0, 0, 0.1);
  150. }
  151. /* View All Results */
  152. .ui.search .all {
  153. display: block;
  154. border-top: 1px solid rgba(0, 0, 0, 0.1);
  155. background-color: #FAFAFA;
  156. height: 2em;
  157. line-height: 2em;
  158. color: rgba(0, 0, 0, 0.6);
  159. font-weight: bold;
  160. text-align: center;
  161. }
  162. /*******************************
  163. States
  164. *******************************/
  165. /*--------------
  166. Hover
  167. ---------------*/
  168. .ui.search .result:hover,
  169. .ui.search .category .result:hover {
  170. background-color: #F8F8F8;
  171. }
  172. .ui.search .all:hover {
  173. background-color: #F0F0F0;
  174. }
  175. /*--------------
  176. Loading
  177. ---------------*/
  178. .ui.search.loading .input .icon {
  179. background: url(../images/loader-mini.gif) no-repeat 50% 50%;
  180. }
  181. .ui.search.loading .input .icon:before,
  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-right: 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. }