dashboard.scss — WooCommerce 11.0.1

woocommerce / assets / css / dashboard.scss

woocommerce / assets / css Last commit date

dashboard.scss

323 lines

1	/**
2	* dashboard.scss
3	* Styles for WooCommerce dashboard widgets, only loaded on the dashboard itself.
4	*/
5
6	/**
7	* Imports
8	*/
9	@import "mixins";
10	@import "variables";
11	@import "fonts";
12
13	/**
14	* Styling begins
15	*/
16	.wc-dashboard-widget-loading {
17	padding: 16px 10px;
18	text-align: center;
19
20	p {
21	align-items: center;
22	display: flex;
23	flex-direction: column;
24	gap: 8px;
25	margin: 0;
26	}
27
28	.spinner {
29	float: none;
30	margin: 0;
31	}
32
33	&__text {
34	color: $gray-700;
35	}
36	}
37
38	ul.woocommerce_stats {
39	overflow: hidden;
40	zoom: 1;
41
42	li {
43	width: 25%;
44	padding: 0 1em;
45	text-align: center;
46	float: left;
47	font-size: 0.8em;
48	border-left: 1px solid #fff;
49	border-right: 1px solid #ececec;
50	box-sizing: border-box;
51	}
52
53	li:first-child {
54	border-left: 0;
55	}
56
57	li:last-child {
58	border-right: 0;
59	}
60
61	strong {
62	font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
63	font-size: 4em;
64	line-height: 1.2em;
65	font-weight: normal;
66	text-align: center;
67	display: block;
68	}
69	}
70
71	#woocommerce_dashboard_status {
72
73	.inside {
74	padding: 0;
75	margin: 0;
76	}
77
78	.best-seller-this-month {
79
80	a {
81
82	strong {
83	margin-right: 48px;
84	}
85	}
86	}
87
88	.wc_status_list {
89	overflow: hidden;
90	margin: 0;
91	border-radius: 0 0 var(--wc-card-border-radius, 8px) var(--wc-card-border-radius, 8px);
92
93	li {
94	width: 50%;
95	float: left;
96	padding: 0;
97	box-sizing: border-box;
98	margin: 0;
99	border-top: 1px solid #ececec;
100	color: $subtext;
101
102	a {
103	display: block;
104	padding: 9px 12px 9px 44px;
105	position: relative;
106	font-size: 13px;
107	line-height: 1.5;
108	color: $wp-admin-icon-gray;
109
110	&:hover,
111	&:focus {
112	background-color: $wp-admin-hover-gray;
113	}
114
115	.wc_sparkline {
116	width: 4em;
117	height: 2em;
118	display: block;
119	float: right;
120	position: absolute;
121	right: 0;
122	top: 50%;
123	margin-right: 12px;
124	margin-top: -1.25em;
125	}
126
127	strong {
128	font-size: 16px;
129	line-height: 1.2em;
130	font-weight: normal;
131	display: block;
132	color: $gray-900;
133	}
134
135	&::before {
136
137	@include icon_dashicons( "\f14c" );
138	font-size: 20px;
139	position: absolute;
140	top: 50%;
141	left: 12px;
142	transform: translateY(-50%);
143	width: 20px;
144	height: 20px;
145	line-height: 20px;
146	color: $wp-admin-icon-gray;
147	float: none;
148	margin: 0;
149	}
150	}
151	}
152
153	li:first-child {
154	border-top: 0;
155	}
156
157	li:not(.sales-this-month):not(.best-seller-this-month):not(.processing-orders):not(.on-hold-orders):not(.low-in-stock):not(.out-of-stock) {
158	clear: both;
159	width: 100%;
160	}
161
162	li.sales-this-month {
163	width: 100%;
164
165	a::before {
166	content: "\f185";
167	}
168	}
169
170	li.best-seller-this-month {
171	width: 100%;
172
173	a::before {
174	content: "\f174";
175	}
176	}
177
178	li.processing-orders {
179	border-right: 1px solid #ececec;
180
181	a::before {
182	content: "\f469";
183	}
184	}
185
186	li.on-hold-orders {
187
188	a::before {
189	content: "\f523";
190	}
191	}
192
193	li.low-in-stock {
194	border-right: 1px solid #ececec;
195
196	a::before {
197	content: "\f14c";
198	}
199	}
200
201	li.out-of-stock {
202
203	a::before {
204	content: "\f158";
205	}
206	}
207	}
208	}
209
210	#woocommerce_dashboard_recent_reviews {
211
212	#wc-recent-reviews-widget-content > p {
213	margin-bottom: 0;
214	}
215
216	ul {
217	margin: 0;
218	}
219
220	li {
221	display: grid;
222	grid-template-columns: 32px minmax(0, 1fr) max-content;
223	column-gap: 10px;
224	align-items: start;
225	font-size: 13px;
226	line-height: 1.4;
227	margin-bottom: 12px;
228
229	&:last-child {
230	margin-bottom: 0;
231	}
232	}
233
234	h4.meta {
235	grid-column: 2;
236	grid-row: 1;
237	font-size: 13px;
238	line-height: 1.5;
239	margin: 0;
240	font-weight: normal;
241	color: $wp-admin-icon-gray;
242	}
243
244	blockquote {
245	grid-column: 2 / -1;
246	grid-row: 2;
247	line-height: 1.4;
248	padding: 0;
249	margin: 0;
250	}
251
252	.avatar {
253	float: none;
254	grid-column: 1;
255	grid-row: 1 / span 2;
256	margin: 0;
257	}
258
259	.star-rating {
260	float: none;
261	grid-column: 3;
262	grid-row: 1;
263	justify-self: end;
264	overflow: hidden;
265	position: relative;
266	height: 1.5em;
267	line-height: 1.5;
268	margin-left: 0.5em;
269	width: 5.4em;
270	font-family: "WooCommerce" !important;
271
272	&::before {
273	content: "\e021\e021\e021\e021\e021";
274	color: $wp-admin-icon-gray;
275	float: left;
276	top: 0;
277	left: 0;
278	position: absolute;
279	letter-spacing: 0.1em;
280	letter-spacing: 0\9; // IE8 & below hack ;-(
281	}
282
283	span {
284	overflow: hidden;
285	float: left;
286	top: 0;
287	left: 0;
288	position: absolute;
289	padding-top: 1.5em;
290	}
291
292	span::before {
293	content: "\e020\e020\e020\e020\e020";
294	top: 0;
295	position: absolute;
296	left: 0;
297	letter-spacing: 0.1em;
298	letter-spacing: 0\9; // IE8 & below hack ;-(
299	color: $wp-admin-text-gray;
300	}
301	}
302	}
303
304	#dash-right-now li.product-count a::before {
305	font-family: "WooCommerce";
306	content: "\e01d";
307	}
308
309	#dashboard_activity {
310	#activity-widget {
311	#the-comment-list {
312	.review.comment-item {
313	.avatar {
314	margin-right: 12px;
315	position: relative;
316	top: 0;
317	float: left;
318	}
319	}
320	}
321	}
322	}
323