← All changes | css/edit/_form.scss +87 -18 4.0.0-beta.1 → trunk View file →

		@@ -1,13 +1,34 @@
1	1	@use '../common/theme';
2	2
3		-$sidebar-width: 321px;
4		-$sidebar-gap: 30px;
	3	+.snippet-form #titlediv #title {
	4	+ border-color: var(--cs-color-border);
	5	+ border-radius: 5px;
	6	+ block-size: 45px;
	7	+ margin: 0;
	8	+}
5	9
6		-.snippet-form #titlediv #title,
7		-.snippet-type-container {
8		- border-color: #ccc;
9		- block-size: 45px
	10	+// The type selector is a react-select control that sizes to its content; pin
	11	+// its bordered control box to the same 45px as the adjacent title field and
	12	+// keep the selected value vertically centred within it.
	13	+.snippet-type-container .code-snippets-select {
	14	+ block-size: 100%;
	15	+
	16	+ // Target the control box only (:first-of-type). The open menu is a later
	17	+ // sibling div; matching it here would clamp and flex-row the option list.
	18	+ > div:first-of-type {
	19	+ border-color: var(--cs-color-border);
	20	+ min-block-size: 45px;
	21	+ block-size: 45px;
	22	+ max-block-size: 45px;
	23	+ }
	24	+
	25	+ > div:first-of-type > div:first-child {
	26	+ display: flex;
	27	+ align-items: center;
	28	+ block-size: 45px;
	29	+ padding-block: 0;
	30	+ }
10	31	}
11	32
12	33	.snippet-type-option {
13	34	display: flex;
		@@ -15,8 +36,14 @@
15	36	justify-content: space-between;
16	37	flex-flow: row;
17	38	gap: 2em;
18	39
	40	+ .snippet-type-option-main {
	41	+ display: flex;
	42	+ align-items: center;
	43	+ gap: 8px;
	44	+ }
	45	+
19	46	.small-badge {
20	47	margin-inline-start: 0.5em;
21	48	}
22	49	}
		@@ -22,17 +49,30 @@
22	49	}
23	50
24	51
25	52	.conditions-editor-open {
	53	+ .conditions-editor-header {
	54	+ display: flex;
	55	+ align-items: center;
	56	+ justify-content: flex-start;
	57	+ gap: 8px;
	58	+ margin-block-end: 8px;
	59	+ }
	60	+
26	61	.button.button-large {
27		- block-size: 100%;
28	62	display: flex;
29	63	align-items: center;
30	64	gap: 8px;
31		- flex: 1;
32		- border-color: #ccc;
33		- padding-block: 6px;
34		- padding-inline: 12px;
	65	+ inline-size: 100%;
	66	+ min-block-size: 48px;
	67	+ border-color: var(--cs-color-accent);
	68	+ background: transparent;
	69	+ padding: 6px 12px;
	70	+
	71	+ &:hover:not(:disabled),
	72	+ &:focus:not(:disabled) {
	73	+ background: var(--cs-color-surface-subtle);
	74	+ }
35	75	}
36	76
37	77	&.no-condition .cond-badge {
38	78	background: transparent;
		@@ -41,18 +81,17 @@
41	81	}
42	82
43	83	&.no-condition:hover :not([disabled]) .cond-badge {
44	84	color: #fff;
45		- background: theme.$accent;
46		- border-color: theme.$accent;
	85	+ background: var(--cs-color-accent);
	86	+ border-color: var(--cs-color-accent);
47	87	}
48	88	}
49	89
50	90	.snippet-form {
51		- margin-block-start: 10px;
52	91	display: grid;
53		- gap: $sidebar-gap;
54		- grid-template-columns: 1fr $sidebar-width;
	92	+ gap: var(--cs-sidebar-gap);
	93	+ grid-template-columns: 1fr var(--cs-sidebar-width);
55	94	grid-template-areas: 'upper sidebar' 'lower sidebar';
56	95	transition: all 700ms;
57	96
58	97	@media (prefers-reduced-motion: reduce) {
		@@ -79,12 +118,20 @@
79	118	}
80	119
81	120	.snippet-editor-sidebar {
82	121	grid-area: span 3 / sidebar;
83		- max-inline-size: $sidebar-width;
	122	+ max-inline-size: var(--cs-sidebar-width);
84	123	position: sticky;
85		- inset-block-start: 32px;
	124	+ overflow: clip;
	125	+
	126	+ // Keep the sidebar clear of the fixed WordPress admin bar and leave a
	127	+ // usable visual gap beneath it while the editor scrolls.
	128	+ inset-block-start: 48px;
86	129	align-self: start;
	130	+
	131	+ @media (width <= 782px) {
	132	+ position: static;
	133	+ }
87	134	}
88	135
89	136	@media (width <= 1024px) {
90	137	grid-template-columns: 1fr;
		@@ -102,5 +149,27 @@
102	149	.button {
103	150	font-weight: normal;
104	151	}
105	152	}
	153	+}
	154	+
	155	+.above-editor-container {
	156	+ display: flex;
	157	+ flex-flow: row wrap;
	158	+ gap: 1em;
	159	+
	160	+ > * {
	161	+ flex: 1;
	162	+ display: flex;
	163	+ flex-flow: column;
	164	+ min-inline-size: 180px;
	165	+ }
	166	+}
	167	+
	168	+// Match the location selector's control height to the adjacent conditions
	169	+// button so the two sidebar controls line up. This targets a different
	170	+// container than the type selector rules above, so their relative order does
	171	+// not affect the cascade.
	172	+// stylelint-disable-next-line no-descending-specificity
	173	+.snippet-editor-sidebar .code-snippets-select.code-snippets-select-location > div:first-of-type {
	174	+ min-block-size: 48px;
106	175	}