← All changes | css/common/_notices.scss +51 -18 4.0.0-beta.1 → trunk View file →

		@@ -1,27 +1,60 @@
1		-.code-snippets-notice {
2		- .notice-dismiss {
3		- position: absolute;
4		- transform: initial;
5		- inset-inline-end: 0;
6		- inset-block-start: 0;
7		- }
	1	+@use 'sass:list';
8	2
9		- details {
10		- margin: .5em 0;
11		- padding: 2px;
	3	+$notices: (
	4	+ success: #d3e9d3 #377a37,
	5	+ warning: #f2ebc3 #b0730a,
	6	+ error: #f8d7da #721c24,
	7	+ info: #d2e6f4 #2b71a3,
	8	+ neutral: #e2e5e5 #6c7e7e,
	9	+ special: #dfc5ef #6e249c
	10	+);
12	11
13		- summary {
14		- cursor: pointer;
	12	+@mixin notices($class: 'notice') {
	13	+ .#{$class} {
	14	+ border: 0;
	15	+ border-radius: 5px;
	16	+ display: flex;
	17	+ align-items: center;
	18	+ padding: 6px 10px;
	19	+ gap: 8px;
	20	+ margin: 0;
	21	+
	22	+ .#{$class}-dismiss {
	23	+ position: unset;
	24	+ margin-inline-start: auto;
	25	+ padding: 0;
	26	+
	27	+ &, &::before {
	28	+ color: inherit;
	29	+ }
15	30	}
16	31
17		- pre {
18		- max-inline-size: 100%;
19		- overflow: auto hidden;
20		- white-space: pre;
	32	+ .wp-core-ui &.is-dismissible {
	33	+ position: unset;
	34	+ padding-inline-end: 10px;
21	35	}
	36	+ }
22	37
23		- .stack-trace-hint {
24		- opacity: 0.5;
	38	+ @each $name, $colors in $notices {
	39	+ .#{$class}-#{$name} {
	40	+ color: list.nth($colors, 2);
	41	+ background-color: list.nth($colors, 1);
25	42	}
	43	+ }
	44	+
	45	+ .#{$class}-success::before {
	46	+ content: '✓';
	47	+ font-weight: bold;
	48	+ font-size: 16px;
	49	+ }
	50	+}
	51	+
	52	+
	53	+.code-snippets-notice {
	54	+ .notice-dismiss {
	55	+ position: absolute;
	56	+ transform: initial;
	57	+ inset-inline-end: 0;
	58	+ inset-block-start: 0;
26	59	}
27	60	}