← All changes | css/common/_tooltips.scss +63 -40 3.9.6 → trunk View file →

		@@ -1,39 +1,30 @@
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;
	3	+.tooltip {
8	4	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	5	display: inline-block;
17		- font-size: 10px;
18		- background: transparent !important;
19	6	}
20	7
21		-.tooltip {
22		- cursor: help !important;
23		- position: relative;
24		- display: inline-block;
	8	+.tooltip-trigger {
	9	+ display: inline-flex;
	10	+ align-items: center;
	11	+ background: transparent;
	12	+ padding: 0;
	13	+ margin: 0;
	14	+ border: 0;
	15	+ border-radius: 50%;
	16	+ color: inherit;
	17	+ font: inherit;
25	18
26		- .dashicons {
27		- color: lightslategrey;
	19	+ &:hover,
	20	+ &:focus {
	21	+ box-shadow: none;
28	22	}
29	23
30		- &.badge {
31		- display: inline-flex;
32		-
33		- .dashicons {
34		- color: inherit;
35		- }
	24	+ &:focus-visible {
	25	+ outline: 2px solid var(--cs-color-accent);
	26	+ outline-offset: 2px;
36	27	}
37	28	}
38	29
39	30	.tooltip::before,
		@@ -45,8 +36,12 @@
45	36	visibility 0.2s ease-in-out,
46	37	transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
47	38	transform: translate3d(0, 0, 0);
48	39	pointer-events: none;
	40	+
	41	+ @media (prefers-reduced-motion: reduce) {
	42	+ transition-duration: 0.01s;
	43	+ }
49	44	}
50	45
51	46	.tooltip::before {
52	47	z-index: 1001;
		@@ -61,16 +56,18 @@
61	56
62	57	.tooltip-content {
63	58	z-index: 1000;
64	59	padding: 8px;
65		- background-color: $bg-color;
	60	+ background-color: var(--cs-tooltip-background-color);
66	61	color: #fff;
67		- border-radius: 6px;
	62	+ border-radius: 5px;
68	63	position: absolute;
69		- font-size: small;
	64	+ font-size: 12px;
70	65	font-weight: normal;
71	66	text-transform: none;
72		- min-inline-size: 200px;
	67	+ white-space: normal;
	68	+ inline-size: max-content;
	69	+ max-inline-size: 200px;
73	70	backdrop-filter: blur(3px);
74	71
75	72	.tooltip-block & {
76	73	margin-inline-start: -80px;
		@@ -89,9 +86,9 @@
89	86	.tooltip-block.tooltip-start {
90	87	&::before {
91	88	margin-inline-start: -6px;
92	89	margin-block-end: -12px;
93		- border-block-start-color: $bg-color;
	90	+ border-block-start-color: var(--cs-tooltip-background-color);
94	91	}
95	92
96	93	&::before, .tooltip-content {
97	94	inset-block-end: 100%;
		@@ -102,9 +99,9 @@
102	99	.tooltip-block.tooltip-end {
103	100	&::before {
104	101	margin-block: -12px 0;
105	102	border-block-start-color: transparent;
106		- border-block-end-color: $bg-color;
	103	+ border-block-end-color: var(--cs-tooltip-background-color);
107	104	}
108	105
109	106	&::before, .tooltip-content {
110	107	inset-block: 100% auto;
		@@ -121,9 +118,9 @@
121	118	inset-block-end: 50%;
122	119	margin-inline: 0 -12px;
123	120	margin-block-end: 0;
124	121	border-block-start-color: transparent;
125		- border-inline-start-color: $bg-color;
	122	+ border-inline-start-color: var(--cs-tooltip-background-color);
126	123	}
127	124
128	125	&::before, .tooltip-content {
129	126	inset-inline: auto 100%;
		@@ -134,9 +131,9 @@
134	131	&::before {
135	132	margin-block-end: 0;
136	133	margin-inline-start: -12px;
137	134	border-block-start-color: transparent;
138		- border-inline-end-color: $bg-color;
	135	+ border-inline-end-color: var(--cs-tooltip-background-color);
139	136	}
140	137
141	138	&::before, .tooltip-content {
142	139	inset-inline-start: 100%;
		@@ -147,9 +144,10 @@
147	144	}
148	145	}
149	146
150	147	.tooltip:hover,
151		-.tooltip:focus {
	148	+.tooltip:focus,
	149	+.tooltip:focus-within {
152	150	&::before, .tooltip-content {
153	151	visibility: visible;
154	152	opacity: 1;
155	153	}
		@@ -155,9 +153,10 @@
155	153	}
156	154	}
157	155
158	156	.tooltip-block.tooltip-start:hover,
159		-.tooltip-block.tooltip-start:focus {
	157	+.tooltip-block.tooltip-start:focus,
	158	+.tooltip-block.tooltip-start:focus-within {
160	159	&::before, .tooltip-content {
161	160	transform: translateY(-10px);
162	161	}
163	162	}
		@@ -162,9 +161,10 @@
162	161	}
163	162	}
164	163
165	164	.tooltip-block.tooltip-end:hover,
166		-.tooltip-block.tooltip-end:focus {
	165	+.tooltip-block.tooltip-end:focus,
	166	+.tooltip-block.tooltip-end:focus-within {
167	167	&::before, .tooltip-content {
168	168	transform: translateY(10px);
169	169	}
170	170	}
		@@ -169,9 +169,10 @@
169	169	}
170	170	}
171	171
172	172	.tooltip-inline.tooltip-end:hover,
173		-.tooltip-inline.tooltip-end:focus {
	173	+.tooltip-inline.tooltip-end:focus,
	174	+.tooltip-inline.tooltip-end:focus-within {
174	175	&::before, .tooltip-content {
175	176	transform: translateX(calc(10px * var(--cs-direction-multiplier)));
176	177	}
177	178	}
		@@ -176,9 +177,31 @@
176	177	}
177	178	}
178	179
179	180	.tooltip-inline.tooltip-start:hover,
180		-.tooltip-inline.tooltip-start:focus {
	181	+.tooltip-inline.tooltip-start:focus,
	182	+.tooltip-inline.tooltip-start:focus-within {
181	183	&::before, .tooltip-content {
182	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	+ }
183	206	}
184	207	}