_plugins.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. .plugins_search_container {
  2. max-width:405px;
  3. margin:auto;
  4. .input-group {
  5. width:100%;
  6. }
  7. }
  8. .whatisplugin_box {
  9. margin-top:20px;
  10. img {
  11. float:left;
  12. padding-right: 20px;
  13. padding-bottom: 20px;
  14. width: 84px;
  15. }
  16. }
  17. .plugins_links {
  18. max-width: 405px;
  19. margin:auto;
  20. }
  21. .progress {
  22. width:12%;
  23. margin:0;
  24. }
  25. .featured-list-header{
  26. margin-top:0;
  27. }
  28. .well.featured-list {
  29. padding:0;
  30. h2 { text-align: center; }
  31. ul {
  32. list-style: none;
  33. padding-left:0;
  34. div { display:inline-block; }
  35. li {
  36. padding-left:19px;
  37. padding-right:19px;
  38. padding-top:5px;
  39. height:33px;
  40. }
  41. li:nth-child(odd) {
  42. background-color:$gray-20;
  43. }
  44. }
  45. }
  46. .plugin {
  47. position:absolute;
  48. left:126px;
  49. }
  50. .plugin-stats {
  51. position: absolute;
  52. right:0;
  53. width:100px;
  54. }
  55. .filter-by-platforms {
  56. margin-top:40px;
  57. margin-bottom:10px;
  58. }
  59. .filter-by-platform-label {
  60. line-height:40px;
  61. vertical-align: top;
  62. }
  63. .filter-by-platform-filters {
  64. display: inline-block;
  65. button.btn {
  66. margin-bottom: 2px;
  67. margin-right: 2px;
  68. width: 120px;
  69. &.btn-primary {
  70. background-color: $brand-primary;
  71. }
  72. &.btn-default {
  73. background-color: $gray-10;
  74. &:hover {
  75. background-color: $brand-primary;
  76. }
  77. }
  78. }
  79. }
  80. .nav-pills > li > a {
  81. background-color:$gray-5;
  82. }
  83. .nav > li > a:hover {
  84. background-color:$gray-10;
  85. }
  86. .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  87. background-color:$brand-primary;
  88. color:black;
  89. }
  90. .plugins-sort-dropdown {
  91. height:40px;
  92. }
  93. /***
  94. **** Plugins Results
  95. ****
  96. */
  97. .plugins-results-container {
  98. margin-bottom:20px;
  99. padding:0;
  100. }
  101. .plugin-results-number {
  102. line-height:40px;
  103. vertical-align: top;
  104. text-align: center;
  105. }
  106. .plugin-results-result {
  107. margin-bottom:20px;
  108. background-color:$gray-5;
  109. position: relative;
  110. }
  111. .plugin-results-show-more {
  112. text-align: center;
  113. cursor:pointer;
  114. padding: 10px;
  115. background-color: $brand-primary;
  116. color: #000;
  117. }
  118. .plugin-results-show-more:hover {
  119. color: #000;
  120. }
  121. .version_and_author {
  122. display: inline-block;
  123. }
  124. .plugins-copy-to-clipboard {
  125. width:15px;
  126. position:absolute;
  127. right:0;
  128. top:20px;
  129. margin-right:10px;
  130. cursor:pointer;
  131. }
  132. .plugins-featured {
  133. -webkit-box-shadow: inset 3px 0 0 0 $brand-primary;
  134. -moz-box-shadow: inset 3px 0 0 0 $brand-primary;
  135. box-shadow: inset 3px 0 0 0 $brand-primary;
  136. border-left-width: 0px;
  137. }
  138. .plugin-search-credit {
  139. margin-left: 0px;
  140. margin-bottom: 5px;
  141. }
  142. @media (min-width: 767px) {
  143. .version_and_author {
  144. float:right;
  145. margin-top:20px;
  146. }
  147. h2 { display: inline-block }
  148. }
  149. .license { font-weight: bold }
  150. hr.results-divider-line {
  151. border-color:$gray-20;
  152. }
  153. .cordova-add-command {
  154. width: 1px;
  155. height: 1px;
  156. overflow: hidden;
  157. }
  158. .results-supported-platforms {
  159. list-style: none;
  160. padding:0;
  161. margin-bottom:0;
  162. }
  163. .results-supported-platforms li {
  164. display: inline-block;
  165. }
  166. .results-supported-platforms > li > div {
  167. background-image:url('{{ site.baseurl }}/static/img/platform-logos-all-sprite.svg');
  168. width:50px;
  169. height:50px;
  170. display:inline-block;
  171. background-size: 550px 50px;
  172. }
  173. .android { background-position: 0 }
  174. .ios { background-position: 10%; }
  175. .windows { background-position: 20%; }
  176. .blackberry { background-position: 30%; }
  177. .ubuntu { background-position: 40%; }
  178. .firefox { background-position: 50%; }
  179. .webos { background-position: 60%; }
  180. .fireos { background-position: 70%; }
  181. .osx { background-position: 80.8%; }
  182. .browser { background-position: 92.2%; }