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.

198 lines
3.4 KiB

  1. .ui.search {
  2. position: relative;
  3. text-shadow: none;
  4. font-style: normal;
  5. font-weight: 400;
  6. }
  7. .ui.search input {
  8. border-radius: 500rem;
  9. }
  10. .ui.search>.button {
  11. position: relative;
  12. z-index: 2;
  13. float: left;
  14. margin: 0 -15px 0 0;
  15. padding: 6px 15px 7px;
  16. border-radius: 15px 0 0 15px;
  17. -webkit-box-shadow: none;
  18. box-shadow: none;
  19. }
  20. .ui.search .results {
  21. display: none;
  22. position: absolute;
  23. z-index: 999;
  24. top: 100%;
  25. right: 0;
  26. overflow: hidden;
  27. background-color: #FFF;
  28. margin-top: .5em;
  29. width: 380px;
  30. font-size: .875em;
  31. line-height: 1.2;
  32. color: #555;
  33. border-radius: 3px;
  34. -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1),0 -2px 0 0 rgba(0,0,0,.1) inset;
  35. box-shadow: 0 0 1px 1px rgba(0,0,0,.1),0 -2px 0 0 rgba(0,0,0,.1) inset;
  36. }
  37. .ui.search .result {
  38. cursor: pointer;
  39. overflow: hidden;
  40. padding: .5em 1em;
  41. }
  42. .ui.search .result:first-child {
  43. border-top: 0;
  44. }
  45. .ui.search .result .image {
  46. background: #F0F0F0;
  47. margin-left: 10px;
  48. float: right;
  49. overflow: hidden;
  50. border-radius: 3px;
  51. width: 38px;
  52. height: 38px;
  53. }
  54. .ui.search .result .image img {
  55. display: block;
  56. width: 38px;
  57. height: 38px;
  58. }
  59. .ui.search .result .image~.info {
  60. float: none;
  61. margin-right: 50px;
  62. }
  63. .ui.search .result .info {
  64. float: right;
  65. }
  66. .ui.search .result .title {
  67. font-weight: 700;
  68. color: rgba(0,0,0,.8);
  69. }
  70. .ui.search .result .description {
  71. color: rgba(0,0,0,.6);
  72. }
  73. .ui.search .result .price {
  74. float: left;
  75. color: #5BBD72;
  76. font-weight: 700;
  77. }
  78. .ui.search .message {
  79. padding: 1em;
  80. }
  81. .ui.search .message .text .title {
  82. margin: 0 0 .5rem;
  83. font-size: 1.25rem;
  84. font-weight: 700;
  85. color: rgba(0,0,0,.8);
  86. }
  87. .ui.search .message .text .description {
  88. margin: 0;
  89. font-size: 1rem;
  90. color: rgba(0,0,0,.5);
  91. }
  92. .ui.search .results .category {
  93. background-color: #FAFAFA;
  94. border-top: 1px solid rgba(0,0,0,.1);
  95. -webkit-transition: background .2s ease-in;
  96. transition: background .2s ease-in;
  97. }
  98. .ui.search .results .category:first-child {
  99. border-top: 0;
  100. }
  101. .ui.search .results .category>.name {
  102. float: right;
  103. padding: 12px 8px 0 0;
  104. font-weight: 700;
  105. color: #777;
  106. text-shadow: 0 1px 0 rgba(255,255,255,.8);
  107. }
  108. .ui.search .results .category .result {
  109. background-color: #FFF;
  110. margin-right: 80px;
  111. border-right: 1px solid rgba(0,0,0,.1);
  112. }
  113. .ui.search .all {
  114. display: block;
  115. border-top: 1px solid rgba(0,0,0,.1);
  116. background-color: #FAFAFA;
  117. height: 2em;
  118. line-height: 2em;
  119. color: rgba(0,0,0,.6);
  120. font-weight: 700;
  121. text-align: center;
  122. }
  123. .ui.search .result:hover,
  124. .ui.search .category .result:hover {
  125. background-color: #F8F8F8;
  126. }
  127. .ui.search .all:hover {
  128. background-color: #F0F0F0;
  129. }
  130. .ui.search.loading .input .icon {
  131. background: url(../images/loader-mini.gif) no-repeat 50% 50%;
  132. }
  133. .ui.search.loading .input .icon:before,
  134. .ui.search.loading .input .icon:after {
  135. display: none;
  136. }
  137. .ui.search .results .category.active {
  138. background-color: #F1F1F1;
  139. }
  140. .ui.search .results .category.active>.name {
  141. color: #333;
  142. }
  143. .ui.search .result.active,
  144. .ui.search .category .result.active {
  145. background-color: #FBFBFB;
  146. }
  147. .ui.search .result.active .title {
  148. color: #000;
  149. }
  150. .ui.search .result.active .description {
  151. color: #555;
  152. }
  153. .ui.search .large.result .image,
  154. .ui.search .large.result .image img {
  155. width: 50px;
  156. height: 50px;
  157. }
  158. .ui.search .large.results .indented.info {
  159. margin-right: 65px;
  160. }
  161. .ui.search .large.results .info .title {
  162. font-size: 16px;
  163. }
  164. .ui.search .large.results .info .description {
  165. font-size: 11px;
  166. }