dashboard.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. /**
  2. * dashboard.scss
  3. * Styles for WooCommerce dashboard widgets, only loaded on the dashboard itself.
  4. */
  5. /**
  6. * Imports
  7. */
  8. @import 'mixins';
  9. @import 'variables';
  10. @import 'fonts';
  11. /**
  12. * Styling begins
  13. */
  14. ul.woocommerce_stats {
  15. overflow: hidden;
  16. zoom: 1;
  17. li {
  18. width: 25%;
  19. padding: 0 1em;
  20. text-align: center;
  21. float: left;
  22. font-size: 0.8em;
  23. border-left: 1px solid #fff;
  24. border-right: 1px solid #ececec;
  25. box-sizing: border-box;
  26. }
  27. li:first-child {
  28. border-left: 0;
  29. }
  30. li:last-child {
  31. border-right: 0;
  32. }
  33. strong {
  34. font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
  35. font-size: 4em;
  36. line-height: 1.2em;
  37. font-weight: normal;
  38. text-align: center;
  39. display: block;
  40. }
  41. }
  42. #woocommerce_dashboard_status {
  43. .inside {
  44. padding: 0;
  45. margin: 0;
  46. }
  47. .best-seller-this-month {
  48. a {
  49. strong {
  50. margin-right: 48px;
  51. }
  52. }
  53. }
  54. .wc_status_list {
  55. overflow: hidden;
  56. margin: 0;
  57. li {
  58. width: 50%;
  59. float: left;
  60. padding: 0;
  61. box-sizing: border-box;
  62. margin: 0;
  63. border-top: 1px solid #ececec;
  64. color: #aaa;
  65. a {
  66. display: block;
  67. color: #aaa;
  68. padding: 9px 12px;
  69. transition: all ease 0.5s;
  70. position: relative;
  71. font-size: 12px;
  72. .wc_sparkline {
  73. width: 4em;
  74. height: 2em;
  75. display: block;
  76. float: right;
  77. position: absolute;
  78. right: 0;
  79. top: 50%;
  80. margin-right: 12px;
  81. margin-top: -1.25em;
  82. }
  83. strong {
  84. font-size: 18px;
  85. line-height: 1.2em;
  86. font-weight: normal;
  87. display: block;
  88. color: #21759b;
  89. }
  90. &:hover {
  91. color: #2ea2cc;
  92. &::before,
  93. strong {
  94. color: #2ea2cc !important;
  95. }
  96. }
  97. &::before {
  98. @include icon();
  99. font-size: 2em;
  100. position: relative;
  101. width: auto;
  102. line-height: 1.2em;
  103. color: #464646;
  104. float: left;
  105. margin-right: 12px;
  106. margin-bottom: 12px;
  107. }
  108. }
  109. }
  110. li:first-child {
  111. border-top: 0;
  112. }
  113. li.sales-this-month {
  114. width: 100%;
  115. a::before {
  116. font-family: 'Dashicons';
  117. content: '\f185';
  118. }
  119. }
  120. li.best-seller-this-month {
  121. width: 100%;
  122. a::before {
  123. content: '\e006';
  124. }
  125. }
  126. li.processing-orders {
  127. border-right: 1px solid #ececec;
  128. a::before {
  129. content: '\e011';
  130. color: $green;
  131. }
  132. }
  133. li.on-hold-orders {
  134. a::before {
  135. content: '\e033';
  136. color: #999;
  137. }
  138. }
  139. li.low-in-stock {
  140. border-right: 1px solid #ececec;
  141. a::before {
  142. content: '\e016';
  143. color: $orange;
  144. }
  145. }
  146. li.out-of-stock {
  147. a::before {
  148. content: '\e013';
  149. color: $red;
  150. }
  151. }
  152. }
  153. }
  154. #woocommerce_dashboard_recent_reviews {
  155. li {
  156. line-height: 1.5em;
  157. margin-bottom: 12px;
  158. }
  159. h4.meta {
  160. line-height: 1.4;
  161. margin: -0.2em 0 0 0;
  162. font-weight: normal;
  163. color: #999;
  164. }
  165. blockquote {
  166. padding: 0;
  167. margin: 0;
  168. }
  169. .avatar {
  170. float: left;
  171. margin: 0 10px 5px 0;
  172. }
  173. .star-rating {
  174. float: right;
  175. overflow: hidden;
  176. position: relative;
  177. height: 1.5em;
  178. line-height: 1.5;
  179. margin-left: 0.5em;
  180. width: 5.4em;
  181. font-family: 'WooCommerce' !important;
  182. &::before {
  183. content: '\e021\e021\e021\e021\e021';
  184. color: darken( #ccc, 10% );
  185. float: left;
  186. top: 0;
  187. left: 0;
  188. position: absolute;
  189. letter-spacing: 0.1em;
  190. letter-spacing: 0\9; // IE8 & below hack ;-(
  191. }
  192. span {
  193. overflow: hidden;
  194. float: left;
  195. top: 0;
  196. left: 0;
  197. position: absolute;
  198. padding-top: 1.5em;
  199. }
  200. span::before {
  201. content: '\e020\e020\e020\e020\e020';
  202. top: 0;
  203. position: absolute;
  204. left: 0;
  205. letter-spacing: 0.1em;
  206. letter-spacing: 0\9; // IE8 & below hack ;-(
  207. color: #9c5d90;
  208. }
  209. }
  210. }
  211. #dash-right-now li.product-count a::before {
  212. font-family: 'WooCommerce';
  213. content: '\e01d';
  214. }