← All changes | css/edit/_sidebar.scss +99 -58 3.10.0-beta.1 → trunk View file →

		@@ -41,8 +41,9 @@
41	41	justify-content: center;
42	42	align-items: center;
43	43
44	44	label {
	45	+ font-size: 13px;
45	46	font-weight: 600;
46	47	}
47	48
48	49	span:first-of-type {
		@@ -55,16 +56,27 @@
55	56	block-size: 48px;
56	57	}
57	58
58	59	.box {
59		- background-color: #fff;
60		- border: 1px solid #ccc;
61		- border-radius: 4px;
62		- padding: 1.5em;
	60	+ background-color: var(--cs-color-surface);
	61	+ border: 1px solid var(--cs-color-border);
	62	+ border-radius: 5px;
	63	+ padding: 0;
63	64	display: flex;
64	65	flex-flow: column;
65		- gap: 1em;
	66	+ gap: 0;
	67	+ overflow: hidden;
66	68
	69	+ > * {
	70	+ box-sizing: border-box;
	71	+ padding: 24px;
	72	+ border-block-end: 1px solid var(--cs-color-border);
	73	+ }
	74	+
	75	+ > :last-child {
	76	+ border-block-end: 0;
	77	+ }
	78	+
67	79	.inline-form-field {
68	80	display: flex;
69	81	flex-flow: row wrap;
70	82	justify-content: space-between;
		@@ -75,91 +87,124 @@
75	87	.block-form-field {
76	88	display: flex;
77	89	flex-flow: column;
78	90	gap: 4px;
	91	+ }
	92	+ }
79	93
	94	+ label {
	95	+ font-size: 13px;
	96	+ font-weight: 600;
	97	+ }
	98	+
	99	+ .activation-switch-container {
	100	+ label,
	101	+ .status-text {
	102	+ font-size: 16px;
	103	+ line-height: 24px;
80	104	}
81	105	}
82	106
83		- .inline-form-field.row-actions {
	107	+ .snippet-editor-sidebar-settings {
84	108	display: flex;
	109	+ flex-flow: column;
	110	+ gap: 24px;
85	111
86		- // Keep the export/download, trash and lock controls on a single row; the
87		- // base .inline-form-field sets `row wrap`, which would otherwise drop the
88		- // lock control onto a second line in the narrow sidebar.
89		- flex-wrap: nowrap;
90		- gap: 0;
	112	+ .conditions-editor-open {
	113	+ gap: 16px;
91	114
92		- // Lay the export + download pair out inline too — the group is a plain
93		- // block by default, so its two links would otherwise stack vertically.
	115	+ .conditions-editor-header {
	116	+ margin-block-end: 0;
	117	+
	118	+ strong {
	119	+ font-size: 16px;
	120	+ line-height: 24px;
	121	+ }
	122	+ }
	123	+ }
	124	+
	125	+ label {
	126	+ font-size: 16px;
	127	+ line-height: 24px;
	128	+ }
	129	+
	130	+ .code-snippets-select-location {
	131	+ inline-size: 100%;
	132	+ }
	133	+ }
	134	+
	135	+ .inline-form-field.row-actions {
	136	+ display: grid;
	137	+ grid-template-columns: repeat(2, minmax(0, 1fr));
	138	+ align-items: stretch;
	139	+ gap: 12px;
	140	+
94	141	.snippet-export-buttons {
	142	+ display: contents;
	143	+ }
	144	+
	145	+ .snippet-lock-control {
95	146	display: flex;
96		- flex-wrap: nowrap;
97		- gap: 12px;
98	147	min-inline-size: 0;
	148	+
	149	+ > .snippet-lock-control {
	150	+ inline-size: 100%;
	151	+ display: flex;
	152	+ }
99	153	}
100	154
101		- // Row-action buttons render as plain inline links. Neutralise the generic `.button`
102		- // WP 7.0 compatibility styling (fill/border/radius/40px height) here — emitted after
103		- // the wp-admin layer at equal specificity, so it wins. Export/Download inherit the accent.
104	155	.button {
105		- block-size: auto;
106		- min-block-size: theme.$control-height;
107		- padding-block: 0;
108		- padding-inline: 8px;
	156	+ block-size: 48px;
	157	+ min-block-size: 48px;
	158	+ inline-size: 100%;
	159	+ min-inline-size: 0;
	160	+ padding: 0 12px;
	161	+ border: 1px solid var(--cs-color-accent);
	162	+ border-radius: var(--cs-control-radius);
	163	+ background: transparent;
	164	+ box-shadow: none;
	165	+ color: var(--cs-color-accent);
109	166	font-weight: 400;
110	167	display: inline-flex;
111	168	justify-content: center;
112	169	align-items: center;
	170	+ gap: 8px;
113	171
114	172	.dashicons {
	173	+ block-size: 20px;
	174	+ inline-size: 20px;
115	175	color: inherit;
	176	+ font-size: 20px;
116	177	line-height: 1;
117		- vertical-align: text-bottom;
	178	+ vertical-align: middle;
118	179	}
119	180
120		- &:not(.snippet-lock-button) {
121		- border: 0;
122		- border-radius: 0;
123		- padding-inline: 0;
124		- background: none;
	181	+ &:hover:not(:disabled),
	182	+ &:focus:not(:disabled),
	183	+ &:active:not(:disabled) {
	184	+ background: #f6f7f7;
	185	+ border-color: var(--cs-color-accent);
125	186	box-shadow: none;
126		-
127		- // WordPress paints a fill on disabled buttons with !important;
128		- // keep the disabled trash flat like the rest of the row.
129		- &:disabled {
130		- background: none !important;
131		- border: 0;
132		- box-shadow: none;
133		- }
134		-
135		- &:hover:not(:disabled),
136		- &:focus:not(:disabled),
137		- &:active:not(:disabled) {
138		- background: none;
139		- border: 0;
140		- box-shadow: none;
141		- }
	187	+ color: var(--cs-color-accent-hover);
142	188	}
143	189	}
144	190
145		- // Nested under `.row-actions` so the dark-red trash colour outranks the generic
146		- // `.button` accent text colour from the wp-admin compatibility layer.
147	191	.delete-button {
	192	+ border-color: #cc1818;
148	193	color: #cc1818;
149	194
150	195	&:disabled {
151		- color: #a7aaad;
	196	+ border-color: #a7aaad;
	197	+ color: var(--cs-color-text-disabled);
152	198	cursor: not-allowed;
153	199	}
154	200
155		- &:hover:not(:disabled) {
	201	+ &:hover:not(:disabled),
	202	+ &:focus:not(:disabled),
	203	+ &:active:not(:disabled) {
	204	+ border-color: #9e1313;
156	205	color: #9e1313;
157	206	}
158		-
159		- &:focus:not(:disabled) {
160		- color: #710d0d;
161		- }
162	207	}
163	208	}
164	209
165	210	.help-tooltip {
		@@ -166,14 +211,10 @@
166	211	margin-block: 0;
167	212	margin-inline: 5px auto;
168	213	}
169	214
170		- label {
171		- font-weight: 600;
172		- }
173		-
174	215	.beta-badge {
175		- color: theme.$accent;
	216	+ color: var(--cs-color-accent);
176	217	border: 1px solid currentcolor;
177	218	margin-inline-start: auto;
178	219	}
179	220
		@@ -194,9 +235,9 @@
194	235	padding-block-start: 0;
195	236	}
196	237
197	238	.shortcode-tag-wrapper {
198		- background: #fff;
	239	+ background: var(--cs-color-surface);
199	240	min-block-size: 54px;
200	241	display: flex;
201	242	align-items: center;
202	243	justify-content: space-between;