← All changes | blocks/column/style.css +92 -0 2.0.2 → 2.0.13 View file →

		@@ -36,8 +36,21 @@
36	36	display: flex;
37	37	flex-direction: column;
38	38	}
39	39
	40	+/* Column Vertical Alignment */
	41	+.bkbg-column--valign-top .bkbg-column__inner {
	42	+ justify-content: flex-start;
	43	+}
	44	+
	45	+.bkbg-column--valign-middle .bkbg-column__inner {
	46	+ justify-content: center;
	47	+}
	48	+
	49	+.bkbg-column--valign-bottom .bkbg-column__inner {
	50	+ justify-content: flex-end;
	51	+}
	52	+
40	53	/* Inner Padding Variants */
41	54	.bkbg-column--padding-none .bkbg-column__inner {
42	55	padding: var(--bkbg-col-padding-none);
43	56	}
		@@ -61,8 +74,11 @@
61	74	.bkbg-column--padding-xl .bkbg-column__inner {
62	75	padding: var(--bkbg-col-padding-xl);
63	76	}
64	77
	78	+/* Typography */
	79	+.bkbg-column { font-size: var(--bkbg-col-cn-font-size-d, 16px); font-weight: var(--bkbg-col-cn-font-weight, 400); line-height: var(--bkbg-col-cn-line-height-d, 1.6); font-family: var(--bkbg-col-cn-font-family, inherit); font-style: var(--bkbg-col-cn-font-style, normal); text-transform: var(--bkbg-col-cn-text-transform, none); text-decoration: var(--bkbg-col-cn-text-decoration, none); letter-spacing: var(--bkbg-col-cn-letter-spacing-d, normal); word-spacing: var(--bkbg-col-cn-word-spacing-d, normal); }
	80	+
65	81	/* ========================================
66	82	Responsive Breakpoints
67	83	======================================== */
68	84
		@@ -72,8 +88,9 @@
72	88	flex-basis: var(--bkbg-col-tablet, var(--bkbg-col-desktop));
73	89	max-width: var(--bkbg-col-tablet, var(--bkbg-col-desktop));
74	90	width: var(--bkbg-col-tablet, var(--bkbg-col-desktop));
75	91	}
	92	+ .bkbg-column { font-size: var(--bkbg-col-cn-font-size-t, var(--bkbg-col-cn-font-size-d, 16px)); line-height: var(--bkbg-col-cn-line-height-t, var(--bkbg-col-cn-line-height-d, 1.6)); letter-spacing: var(--bkbg-col-cn-letter-spacing-t, var(--bkbg-col-cn-letter-spacing-d, normal)); word-spacing: var(--bkbg-col-cn-word-spacing-t, var(--bkbg-col-cn-word-spacing-d, normal)); }
76	93	}
77	94
78	95	/* Mobile: < 768px */
79	96	@media (max-width: 767px) {
		@@ -88,8 +105,9 @@
88	105	flex-basis: 100% !important;
89	106	max-width: 100% !important;
90	107	width: 100% !important;
91	108	}
	109	+ .bkbg-column { font-size: var(--bkbg-col-cn-font-size-m, var(--bkbg-col-cn-font-size-t, var(--bkbg-col-cn-font-size-d, 16px))); line-height: var(--bkbg-col-cn-line-height-m, var(--bkbg-col-cn-line-height-t, var(--bkbg-col-cn-line-height-d, 1.6))); letter-spacing: var(--bkbg-col-cn-letter-spacing-m, var(--bkbg-col-cn-letter-spacing-t, var(--bkbg-col-cn-letter-spacing-d, normal))); word-spacing: var(--bkbg-col-cn-word-spacing-m, var(--bkbg-col-cn-word-spacing-t, var(--bkbg-col-cn-word-spacing-d, normal))); }
92	110	}
93	111
94	112	/* ========================================
95	113	Editor-specific Styles
		@@ -207,18 +225,42 @@
207	225
208	226	/* Ensure inner blocks fill column */
209	227	.editor-styles-wrapper .bkbg-column .bkbg-column__inner {
210	228	min-height: 40px;
	229	+ display: flex;
	230	+ flex-direction: column;
	231	+ flex: 1;
211	232	}
212	233
213	234	.editor-styles-wrapper .bkbg-column .block-editor-inner-blocks {
214	235	width: 100%;
	236	+ display: flex;
	237	+ flex-direction: column;
	238	+ flex: 1;
	239	+ min-height: 100%;
215	240	}
216	241
217	242	.editor-styles-wrapper .bkbg-column .block-editor-block-list__layout {
218	243	width: 100%;
	244	+ display: flex;
	245	+ flex-direction: column;
	246	+ flex: 1;
	247	+ min-height: 100%;
219	248	}
220	249
	250	+/* Editor preview: vertical alignment must target block list layout wrappers */
	251	+.editor-styles-wrapper .bkbg-column.bkbg-column--valign-top > .bkbg-column__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	252	+ justify-content: flex-start !important;
	253	+}
	254	+
	255	+.editor-styles-wrapper .bkbg-column.bkbg-column--valign-middle > .bkbg-column__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	256	+ justify-content: center !important;
	257	+}
	258	+
	259	+.editor-styles-wrapper .bkbg-column.bkbg-column--valign-bottom > .bkbg-column__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	260	+ justify-content: flex-end !important;
	261	+}
	262	+
221	263	/* Column width controls in inspector */
222	264	.bkbg-column-widths-controls {
223	265	margin-top: 8px;
224	266	}
		@@ -423,5 +465,55 @@
423	465	.block-list-appender.bkbg-drop-target .block-editor-button-block-appender svg,
424	466	.editor-styles-wrapper .bkbg-column .block-list-appender.bkbg-drop-target .block-editor-button-block-appender svg {
425	467	stroke: rgba(59, 130, 246, 1) !important;
426	468	fill: rgba(59, 130, 246, 0.3) !important;
	469	+}
	470	+
	471	+/* Inspector: spacing controls */
	472	+.block-editor-page .bkbg-spacing-control,
	473	+.interface-interface-skeleton__editor .bkbg-spacing-control {
	474	+ margin-top: 12px;
	475	+ padding-top: 10px;
	476	+ border-top: 1px solid #e2e8f0;
	477	+}
	478	+
	479	+.block-editor-page .bkbg-spacing-control__title,
	480	+.interface-interface-skeleton__editor .bkbg-spacing-control__title {
	481	+ font-size: 13px;
	482	+ font-weight: 600;
	483	+ color: #1f2937;
	484	+ margin-bottom: 10px;
	485	+}
	486	+
	487	+.block-editor-page .bkbg-spacing-control__grid,
	488	+.interface-interface-skeleton__editor .bkbg-spacing-control__grid {
	489	+ display: grid;
	490	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	491	+ gap: 10px 12px;
	492	+}
	493	+
	494	+.block-editor-page .bkbg-spacing-control__item,
	495	+.interface-interface-skeleton__editor .bkbg-spacing-control__item {
	496	+ min-width: 0;
	497	+}
	498	+
	499	+.block-editor-page .bkbg-spacing-control__label,
	500	+.interface-interface-skeleton__editor .bkbg-spacing-control__label {
	501	+ display: block;
	502	+ font-size: 12px;
	503	+ font-weight: 500;
	504	+ color: #374151;
	505	+ margin-bottom: 4px;
	506	+}
	507	+
	508	+.block-editor-page .bkbg-spacing-control__row,
	509	+.interface-interface-skeleton__editor .bkbg-spacing-control__row {
	510	+ display: grid;
	511	+ grid-template-columns: minmax(0, 1fr) 78px;
	512	+ gap: 6px;
	513	+ align-items: center;
	514	+}
	515	+
	516	+.block-editor-page .bkbg-spacing-control__custom-unit,
	517	+.interface-interface-skeleton__editor .bkbg-spacing-control__custom-unit {
	518	+ margin-top: 6px;
427	519	}