_editor_common_core.scss — VK Blocks 1.126.2

vk-blocks / editor-css / _editor_common_core.scss

vk-blocks / editor-css Last commit date

_editor_common_core.scss

189 lines

1	// Load src/utils/_breakpoints.scss, the single source of truth for breakpoint variables (Issue #3091).
2	// ブレークポイント変数を一�
3	�管理する src/utils/_breakpoints.scss を読み込む（Issue #3091）。
4	// The 'sass_editor' gulp task concatenates _editor_common_core.scss → _editor_before.scss → _editor_after.scss
5	// into one file before compiling it, so @use must sit at the top of the concatenated result (i.e. this file's top).
6	// editor-css は gulp task 'sass_editor' で _editor_common_core.scss → _editor_before.scss → _editor_after.scss を
7	// 連結してから1つのファイルとしてコンパイルするため、@use は連結後の�
8	�頭（＝このファイルの�
9	�頭）に置く�
10	要がある。
11	@use 'utils/breakpoints' as *;
12
13	/*
14	コア側のブロックcssを上書き用のファイルです
15	--------------------------------------------*/
16	.editor-styles-wrapper { //サイトエディター
17	//ソーシャルアイコン
18	.vk_card_item .block-editor-inner-blocks .block-editor-block-list__layout,//これがないとカード�
19	のインナーブロックで効かない
20	.wp-block-social-links{
21	.wp-block.wp-social-link{
22	width: auto;
23	margin: 0 8px .8em 0;
24	}
25	}
26
27	//他テーマ（Twenty Twenty）上書き用
28	.wp-block-image figcaption{
29	display: block;
30	}
31	//他テーマ（Twenty Twenty）上書き用
32	ul li,
33	ol li{
34	margin:calc( 1rem * 0.8 ) 0;
35	}
36
37	//グループブロック
38	.wp-block-group {
39	&.is-style-vk-group-stitch:before {
40	width: calc(100% - 1.25em);
41	height: calc(100% - 1.25em);
42	}
43	}
44	}
45
46	.vk-blocks-format-popover {
47	// WP5.9でPopoverコンポーネントにpaddingがなくなったため
48	.components-popover__content > div {
49	padding: 20px 18px;
50	}
51
52	// インライン文字サイズを再編集時に選択されたフォントサイズが黒バックの白抜きになるため
53	.components-toggle-group-control > div[data-active=true]=true] {
54	background: rgb(30, 30, 30);
55	border-radius: 2px;
56	}
57	}
58
59	.vk-block-editor-url-input-wrapper {
60	display: flex;
61	margin-bottom: 8px;
62	gap: 4px;
63	// URLInput が flex で�
64	を正しく計算できるようにする（検索窓の表示崩れ防止）
65	> *:first-child {
66	flex: 1;
67	min-width: 0;
68	}
69	}
70
71	/-------------------------------------------/
72	/* リンクツールバー（投稿へのリンク / URL指定）
73	/-------------------------------------------/
74	.vk-block-editor-link-toolbar-popover {
75	min-width: 280px;
76	padding: 4px 0;
77	// URLInput（.block-editor-url-input）が flex �
78	で�
79	を正しく取るように
80	.block-editor-url-input {
81	min-width: 0;
82	flex: 1;
83	}
84	// リンクプレビュー：コアの __preview 系クラス・構造に合わせているため、コアの block-editor-link-control__preview 用CSSが使われる
85	// 当コンポーネントは Flex を使わないため、レイアウト用の flex と見た目の微調整をここで指定
86	.block-editor-link-control__preview {
87	display: flex;
88	align-items: flex-start;
89	gap: 8px;
90	margin-bottom: 8px;
91	.block-editor-link-control__link-information {
92	display: flex;
93	justify-content: flex-start;
94	align-items: flex-start;
95	gap: 10px;
96	flex: 1;
97	min-width: 0;
98	}
99	.block-editor-link-control__preview-icon {
100	display: flex;
101	align-items: center;
102	justify-content: center;
103	flex-shrink: 0;
104	width: 32px;
105	height: 32px;
106	min-width: 32px;
107	svg {
108	width: 20px;
109	height: 20px;
110	}
111	}
112	.block-editor-link-control__preview-details {
113	display: flex;
114	flex-direction: column;
115	gap: 2px;
116	min-width: 0;
117	overflow: hidden;
118	}
119	.block-editor-link-control__preview-title,
120	.block-editor-link-control__preview-info {
121	overflow: hidden;
122	text-overflow: ellipsis;
123	white-space: nowrap;
124	}
125	}
126	}
127
128	.vk-block-editor-link-destination-choice {
129	margin-bottom: 12px;
130	}
131
132	/* セクション余白 */
133	.vk-block-editor-link-toolbar-popover {
134	.vk-block-editor-link-toolbar-form {
135	display: flex;
136	flex-direction: column;
137	gap: 0;
138	}
139	.vk-block-editor-link-toolbar-section {
140	padding-top: 12px;
141	&:first-of-type {
142	padding-top: 0;
143	}
144	}
145	.vk-block-editor-link-toolbar-section-options {
146	display: flex;
147	flex-direction: column;
148	gap: 4px;
149	}
150	}
151
152	/* URL指定時もツールバーアイコンを反転 */
153	.vk-block-editor-link-toolbar-button.is-pressed {
154	background: var(--wp-admin-theme-color, #007cba);
155	color: #fff;
156	}
157
158	/-------------------------------------------/
159	/* カラムの方向が逆のラベル
160	/-------------------------------------------/
161	.wp-block-columns {
162	&.is-vk-row-reverse {
163	border: 1px dashed #ccc !important;
164	left:0;
165	&:before {
166	position:absolute !important;
167	right:0;
168	top:0;
169	font-size:10px;
170	background: #eeeeee;
171	padding: .2em .6em;
172	z-index: 1000;
173	line-height: 1.2;
174	letter-spacing: 1px;
175	content: 'Reverse' !important;
176	}
177	}
178	}
179
180	/-------------------------------------------/
181	/* サイドバーパネル�
182	Notice の下余白
183	/* Notice コンポーネント自体にデフォルトの余白が無く、
184	/* 直下のコントロールと接着してしまうため確保する
185	/-------------------------------------------/
186	.editor-sidebar__panel .components-notice {
187	margin-bottom: 16px;
188	}
189