← All changes | blocks/progress-bar/style.css +87 -31 2.0.2 → 2.0.14 View file →

		@@ -7,14 +7,10 @@
7	7	--bkbg-pb-bar-spacing: 24px;
8	8	--bkbg-pb-bar-radius: 10px;
9	9	--bkbg-pb-track-color: #e5e7eb;
10	10	--bkbg-pb-label-color: #1f2937;
11		- --bkbg-pb-label-size: 16px;
12		- --bkbg-pb-label-weight: 500;
13	11	--bkbg-pb-percentage-color: #6b7280;
14		- --bkbg-pb-percentage-size: 14px;
15	12	--bkbg-pb-title-color: #1f2937;
16		- --bkbg-pb-title-size: 24px;
17	13	--bkbg-pb-animation-duration: 1000ms;
18	14
19	15	width: 100%;
20	16	}
		@@ -20,10 +16,17 @@
20	16	}
21	17
22	18	/* Title */
23	19	.bkbg-pb-title {
24		- font-size: var(--bkbg-pb-title-size);
25		- font-weight: 700;
	20	+ font-family: var(--bkbg-pb-tt-font-family, inherit);
	21	+ font-size: var(--bkbg-pb-tt-font-size-d, 24px);
	22	+ font-weight: var(--bkbg-pb-tt-font-weight, 700);
	23	+ font-style: var(--bkbg-pb-tt-font-style, normal);
	24	+ text-decoration: var(--bkbg-pb-tt-text-decoration, none);
	25	+ text-transform: var(--bkbg-pb-tt-text-transform, none);
	26	+ line-height: var(--bkbg-pb-tt-line-height-d, 1.3);
	27	+ letter-spacing: var(--bkbg-pb-tt-letter-spacing-d, normal);
	28	+ word-spacing: var(--bkbg-pb-tt-word-spacing-d, normal);
26	29	color: var(--bkbg-pb-title-color);
27	30	margin-bottom: 24px;
28	31	}
29	32
		@@ -48,18 +51,31 @@
48	51	}
49	52
50	53	/* Label */
51	54	.bkbg-pb-label {
52		- font-size: var(--bkbg-pb-label-size);
53		- font-weight: var(--bkbg-pb-label-weight);
	55	+ font-family: var(--bkbg-pb-lb-font-family, inherit);
	56	+ font-size: var(--bkbg-pb-lb-font-size-d, 16px);
	57	+ font-weight: var(--bkbg-pb-lb-font-weight, 500);
	58	+ font-style: var(--bkbg-pb-lb-font-style, normal);
	59	+ text-decoration: var(--bkbg-pb-lb-text-decoration, none);
	60	+ text-transform: var(--bkbg-pb-lb-text-transform, none);
	61	+ line-height: var(--bkbg-pb-lb-line-height-d, 1.4);
	62	+ letter-spacing: var(--bkbg-pb-lb-letter-spacing-d, normal);
	63	+ word-spacing: var(--bkbg-pb-lb-word-spacing-d, normal);
54	64	color: var(--bkbg-pb-label-color);
55		- line-height: 1.4;
56	65	}
57	66
58	67	/* Percentage */
59	68	.bkbg-pb-percentage {
60		- font-size: var(--bkbg-pb-percentage-size);
61		- font-weight: 600;
	69	+ font-family: var(--bkbg-pb-pct-font-family, inherit);
	70	+ font-size: var(--bkbg-pb-pct-font-size-d, 14px);
	71	+ font-weight: var(--bkbg-pb-pct-font-weight, 600);
	72	+ font-style: var(--bkbg-pb-pct-font-style, normal);
	73	+ text-decoration: var(--bkbg-pb-pct-text-decoration, none);
	74	+ text-transform: var(--bkbg-pb-pct-text-transform, none);
	75	+ line-height: var(--bkbg-pb-pct-line-height-d, 1);
	76	+ letter-spacing: var(--bkbg-pb-pct-letter-spacing-d, normal);
	77	+ word-spacing: var(--bkbg-pb-pct-word-spacing-d, normal);
62	78	color: var(--bkbg-pb-percentage-color);
63	79	font-variant-numeric: tabular-nums;
64	80	}
65	81
		@@ -103,10 +119,11 @@
103	119
104	120	.bkbg-pb-percentage-above {
105	121	position: absolute;
106	122	transform: translateX(-50%);
107		- font-size: var(--bkbg-pb-percentage-size);
108		- font-weight: 600;
	123	+ font-family: var(--bkbg-pb-pct-font-family, inherit);
	124	+ font-size: var(--bkbg-pb-pct-font-size-d, 14px);
	125	+ font-weight: var(--bkbg-pb-pct-font-weight, 600);
109	126	color: var(--bkbg-pb-percentage-color);
110	127	font-variant-numeric: tabular-nums;
111	128	transition: left var(--bkbg-pb-animation-duration) ease-out;
112	129	}
		@@ -242,10 +259,14 @@
242	259	background: #fff;
243	260	}
244	261
245	262	input.bkbg-pb-title.bkbg-pb-input-active {
246		- font-size: var(--bkbg-pb-title-size);
247		- font-weight: 700;
	263	+ font: inherit;
	264	+ text-transform: inherit;
	265	+ font-style: inherit;
	266	+ text-decoration: inherit;
	267	+ letter-spacing: inherit;
	268	+ word-spacing: inherit;
248	269	color: var(--bkbg-pb-title-color);
249	270	width: 100%;
250	271	margin-bottom: 24px;
251	272	}
		@@ -250,10 +271,14 @@
250	271	margin-bottom: 24px;
251	272	}
252	273
253	274	input.bkbg-pb-label.bkbg-pb-input-active {
254		- font-size: var(--bkbg-pb-label-size);
255		- font-weight: var(--bkbg-pb-label-weight);
	275	+ font: inherit;
	276	+ text-transform: inherit;
	277	+ font-style: inherit;
	278	+ text-decoration: inherit;
	279	+ letter-spacing: inherit;
	280	+ word-spacing: inherit;
256	281	color: var(--bkbg-pb-label-color);
257	282	}
258	283
259	284	/* Inspector Controls Styles */
		@@ -381,21 +406,10 @@
381	406	background: #fef2f2;
382	407	color: #dc2626;
383	408	}
384	409
385		-/* Floating add button */
386		-.bkbg-pb-add-floating {
387		- display: flex;
388		- justify-content: center;
389		- margin-top: 16px;
390		- padding-top: 16px;
391		- border-top: 2px dashed #e5e7eb;
392		-}
	410	+/* Add button UI is standardized via assets/css/editor.css (.bkbg-editor-actions) */
393	411
394		-.bkbg-pb-add-floating .components-button {
395		- gap: 6px;
396		-}
397		-
398	412	/* ========================================
399	413	Responsive
400	414	======================================== */
401	415
		@@ -401,10 +415,8 @@
401	415
402	416	@media (max-width: 768px) {
403	417	.bkbg-pb-wrap {
404	418	--bkbg-pb-bar-height: 16px;
405		- --bkbg-pb-label-size: 14px;
406		- --bkbg-pb-percentage-size: 12px;
407	419	}
408	420
409	421	.bkbg-pb-header {
410	422	flex-wrap: wrap;
		@@ -412,6 +424,50 @@
412	424	}
413	425
414	426	.bkbg-pb-item .bkbg-pb-item-actions {
415	427	right: -40px;
	428	+ }
	429	+}
	430	+
	431	+@media (max-width: 1024px) {
	432	+ .bkbg-pb-title {
	433	+ font-size: var(--bkbg-pb-tt-font-size-t, var(--bkbg-pb-tt-font-size-d, 24px));
	434	+ line-height: var(--bkbg-pb-tt-line-height-t, var(--bkbg-pb-tt-line-height-d, 1.3));
	435	+ letter-spacing: var(--bkbg-pb-tt-letter-spacing-t, var(--bkbg-pb-tt-letter-spacing-d, normal));
	436	+ word-spacing: var(--bkbg-pb-tt-word-spacing-t, var(--bkbg-pb-tt-word-spacing-d, normal));
	437	+ }
	438	+ .bkbg-pb-label {
	439	+ font-size: var(--bkbg-pb-lb-font-size-t, var(--bkbg-pb-lb-font-size-d, 16px));
	440	+ line-height: var(--bkbg-pb-lb-line-height-t, var(--bkbg-pb-lb-line-height-d, 1.4));
	441	+ letter-spacing: var(--bkbg-pb-lb-letter-spacing-t, var(--bkbg-pb-lb-letter-spacing-d, normal));
	442	+ word-spacing: var(--bkbg-pb-lb-word-spacing-t, var(--bkbg-pb-lb-word-spacing-d, normal));
	443	+ }
	444	+ .bkbg-pb-percentage,
	445	+ .bkbg-pb-percentage-above {
	446	+ font-size: var(--bkbg-pb-pct-font-size-t, var(--bkbg-pb-pct-font-size-d, 14px));
	447	+ line-height: var(--bkbg-pb-pct-line-height-t, var(--bkbg-pb-pct-line-height-d, 1));
	448	+ letter-spacing: var(--bkbg-pb-pct-letter-spacing-t, var(--bkbg-pb-pct-letter-spacing-d, normal));
	449	+ word-spacing: var(--bkbg-pb-pct-word-spacing-t, var(--bkbg-pb-pct-word-spacing-d, normal));
	450	+ }
	451	+}
	452	+
	453	+@media (max-width: 767px) {
	454	+ .bkbg-pb-title {
	455	+ font-size: var(--bkbg-pb-tt-font-size-m, var(--bkbg-pb-tt-font-size-t, var(--bkbg-pb-tt-font-size-d, 24px)));
	456	+ line-height: var(--bkbg-pb-tt-line-height-m, var(--bkbg-pb-tt-line-height-t, var(--bkbg-pb-tt-line-height-d, 1.3)));
	457	+ letter-spacing: var(--bkbg-pb-tt-letter-spacing-m, var(--bkbg-pb-tt-letter-spacing-t, var(--bkbg-pb-tt-letter-spacing-d, normal)));
	458	+ word-spacing: var(--bkbg-pb-tt-word-spacing-m, var(--bkbg-pb-tt-word-spacing-t, var(--bkbg-pb-tt-word-spacing-d, normal)));
	459	+ }
	460	+ .bkbg-pb-label {
	461	+ font-size: var(--bkbg-pb-lb-font-size-m, var(--bkbg-pb-lb-font-size-t, var(--bkbg-pb-lb-font-size-d, 14px)));
	462	+ line-height: var(--bkbg-pb-lb-line-height-m, var(--bkbg-pb-lb-line-height-t, var(--bkbg-pb-lb-line-height-d, 1.4)));
	463	+ letter-spacing: var(--bkbg-pb-lb-letter-spacing-m, var(--bkbg-pb-lb-letter-spacing-t, var(--bkbg-pb-lb-letter-spacing-d, normal)));
	464	+ word-spacing: var(--bkbg-pb-lb-word-spacing-m, var(--bkbg-pb-lb-word-spacing-t, var(--bkbg-pb-lb-word-spacing-d, normal)));
	465	+ }
	466	+ .bkbg-pb-percentage,
	467	+ .bkbg-pb-percentage-above {
	468	+ font-size: var(--bkbg-pb-pct-font-size-m, var(--bkbg-pb-pct-font-size-t, var(--bkbg-pb-pct-font-size-d, 12px)));
	469	+ line-height: var(--bkbg-pb-pct-line-height-m, var(--bkbg-pb-pct-line-height-t, var(--bkbg-pb-pct-line-height-d, 1)));
	470	+ letter-spacing: var(--bkbg-pb-pct-letter-spacing-m, var(--bkbg-pb-pct-letter-spacing-t, var(--bkbg-pb-pct-letter-spacing-d, normal)));
	471	+ word-spacing: var(--bkbg-pb-pct-word-spacing-m, var(--bkbg-pb-pct-word-spacing-t, var(--bkbg-pb-pct-word-spacing-d, normal)));
416	472	}
417	473	}