_editor_common_core.scss — VK Blocks trunk

vk-blocks / editor-css / _editor_common_core.scss

vk-blocks / editor-css Last commit date

_editor_common_core.scss

167 lines

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