← All changes | css/common/_tooltips.scss +33 -42 4.0.0-beta.1 → trunk View file →

		@@ -1,44 +1,12 @@
1		-$bg-color: hsl(0deg 0% 20% / 90%);
	1	+@use 'theme';
2	2
3		-.help-tooltip {
4		- display: inline-flex;
5		- flex-direction: column;
6		- justify-content: center;
7		- border-block-end: 1px dotted;
8		- position: relative;
9		- vertical-align: middle;
10		-}
11		-
12		-.help-tooltip-anchor {
13		- cursor: help;
14		- padding-block: 0.3em 0;
15		- padding-inline: 0.3em;
16		- display: inline-block;
17		- font-size: 10px;
18		- background: transparent !important;
19		-}
20		-
21	3	.tooltip {
22		- cursor: help !important;
23	4	position: relative;
24	5	display: inline-block;
25		-
26		- .dashicons {
27		- color: lightslategrey;
28		- }
29		-
30		- &.badge {
31		- display: inline-flex;
32		-
33		- .dashicons {
34		- color: inherit;
35		- }
36		- }
37	6	}
38	7
39	8	.tooltip-trigger {
40		- cursor: help;
41	9	display: inline-flex;
42	10	align-items: center;
43	11	background: transparent;
44	12	padding: 0;
		@@ -53,9 +21,9 @@
53	21	box-shadow: none;
54	22	}
55	23
56	24	&:focus-visible {
57		- outline: 2px solid #2271b1;
	25	+ outline: 2px solid var(--cs-color-accent);
58	26	outline-offset: 2px;
59	27	}
60	28	}
61	29
		@@ -88,16 +56,18 @@
88	56
89	57	.tooltip-content {
90	58	z-index: 1000;
91	59	padding: 8px;
92		- background-color: $bg-color;
	60	+ background-color: var(--cs-tooltip-background-color);
93	61	color: #fff;
94		- border-radius: 6px;
	62	+ border-radius: 5px;
95	63	position: absolute;
96		- font-size: small;
	64	+ font-size: 12px;
97	65	font-weight: normal;
98	66	text-transform: none;
99		- min-inline-size: 200px;
	67	+ white-space: normal;
	68	+ inline-size: max-content;
	69	+ max-inline-size: 200px;
100	70	backdrop-filter: blur(3px);
101	71
102	72	.tooltip-block & {
103	73	margin-inline-start: -80px;
		@@ -116,9 +86,9 @@
116	86	.tooltip-block.tooltip-start {
117	87	&::before {
118	88	margin-inline-start: -6px;
119	89	margin-block-end: -12px;
120		- border-block-start-color: $bg-color;
	90	+ border-block-start-color: var(--cs-tooltip-background-color);
121	91	}
122	92
123	93	&::before, .tooltip-content {
124	94	inset-block-end: 100%;
		@@ -129,9 +99,9 @@
129	99	.tooltip-block.tooltip-end {
130	100	&::before {
131	101	margin-block: -12px 0;
132	102	border-block-start-color: transparent;
133		- border-block-end-color: $bg-color;
	103	+ border-block-end-color: var(--cs-tooltip-background-color);
134	104	}
135	105
136	106	&::before, .tooltip-content {
137	107	inset-block: 100% auto;
		@@ -148,9 +118,9 @@
148	118	inset-block-end: 50%;
149	119	margin-inline: 0 -12px;
150	120	margin-block-end: 0;
151	121	border-block-start-color: transparent;
152		- border-inline-start-color: $bg-color;
	122	+ border-inline-start-color: var(--cs-tooltip-background-color);
153	123	}
154	124
155	125	&::before, .tooltip-content {
156	126	inset-inline: auto 100%;
		@@ -161,9 +131,9 @@
161	131	&::before {
162	132	margin-block-end: 0;
163	133	margin-inline-start: -12px;
164	134	border-block-start-color: transparent;
165		- border-inline-end-color: $bg-color;
	135	+ border-inline-end-color: var(--cs-tooltip-background-color);
166	136	}
167	137
168	138	&::before, .tooltip-content {
169	139	inset-inline-start: 100%;
		@@ -211,6 +181,27 @@
211	181	.tooltip-inline.tooltip-start:focus,
212	182	.tooltip-inline.tooltip-start:focus-within {
213	183	&::before, .tooltip-content {
214	184	transform: translateX(calc(-10px * var(--cs-direction-multiplier)));
	185	+ }
	186	+}
	187	+
	188	+
	189	+.help-tooltip {
	190	+ cursor: help !important;
	191	+
	192	+ .tooltip-trigger {
	193	+ cursor: help;
	194	+ }
	195	+
	196	+ .dashicons {
	197	+ color: lightslategrey;
	198	+ }
	199	+
	200	+ &.badge {
	201	+ display: inline-flex;
	202	+
	203	+ .dashicons {
	204	+ color: inherit;
	205	+ }
215	206	}
216	207	}