UNPKG

13.8 kBSCSSView Raw
1//
2// Copyright IBM Corp. 2016, 2018
3//
4// This source code is licensed under the Apache-2.0 license found in the
5// LICENSE file in the root directory of this source tree.
6//
7
8@import '../../globals/scss/vars';
9@import '../../globals/scss/layer';
10@import '../../globals/scss/helper-mixins';
11@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
12@import '../../globals/scss/css--reset';
13@import '../../globals/scss/css--typography';
14
15@mixin tooltip {
16 .#{$prefix}--tooltip--icon {
17 display: flex;
18 align-items: center;
19 }
20
21 .#{$prefix}--tooltip__label {
22 @include font-family;
23 @include typescale('epsilon');
24 display: inline-flex;
25 align-items: center;
26 color: $text-01;
27 font-weight: normal;
28
29 .#{$prefix}--tooltip__trigger {
30 margin-left: $spacing-xs;
31 }
32 }
33
34 .#{$prefix}--tooltip__trigger {
35 @include button-reset($width: false);
36 display: inline-flex;
37 align-items: center;
38 cursor: pointer;
39 font-size: 1rem;
40
41 &:focus {
42 @include focus-outline('border');
43 fill: $hover-primary;
44 }
45
46 path,
47 polygon,
48 circle {
49 fill: $brand-01;
50 }
51
52 &:hover,
53 &:focus {
54 color: $text-01;
55
56 path,
57 polygon,
58 circle {
59 fill: $hover-primary;
60 }
61 }
62 }
63
64 .#{$prefix}--tooltip__label--bold {
65 font-weight: 600;
66 }
67
68 .#{$prefix}--tooltip {
69 @include layer('overlay');
70 @include reset;
71 position: absolute;
72 display: none;
73 max-width: rem(240px);
74 background: $ui-01;
75 margin-top: $spacing-2xs;
76 padding: $spacing-md;
77 border: 1px solid $ui-03;
78 border-radius: rem(4px);
79 z-index: z('floating');
80 word-wrap: break-word;
81 color: $text-01;
82
83 p {
84 @include font-family;
85 @include typescale('zeta');
86 }
87
88 .#{$prefix}--tooltip__footer {
89 display: flex;
90 justify-content: space-between;
91 align-items: flex-end;
92 margin-top: 1rem;
93 }
94
95 .#{$prefix}--tooltip__caret {
96 position: absolute;
97 background: $ui-01;
98 left: 0;
99 top: rem(-5px);
100 right: 0;
101 transform: rotate(-135deg);
102 width: 0.6rem;
103 height: 0.6rem;
104 border-right: 1px solid $ui-03;
105 border-bottom: 1px solid $ui-03;
106 margin: 0 auto;
107 content: '';
108 }
109
110 &[data-floating-menu-direction='left'] {
111 .#{$prefix}--tooltip__caret {
112 left: auto;
113 top: 50%;
114 right: rem(-5px);
115 transform: rotate(-45deg) translate(50%, -50%);
116 }
117 }
118
119 &[data-floating-menu-direction='top'] {
120 .#{$prefix}--tooltip__caret {
121 top: auto;
122 bottom: rem(-6px);
123 transform: rotate(45deg);
124 }
125 }
126
127 &[data-floating-menu-direction='right'] {
128 .#{$prefix}--tooltip__caret {
129 left: rem(-5px);
130 top: 50%;
131 right: auto;
132 transform: rotate(135deg) translate(-50%, 50%);
133 }
134 }
135 }
136
137 .#{$prefix}--tooltip--shown {
138 display: block;
139 }
140
141 // Tooltip Definition
142 // Definition CSS only tooltip
143 .#{$prefix}--tooltip--definition {
144 @include font-family;
145 @include reset;
146 @include typescale('delta');
147
148 position: relative;
149
150 .#{$prefix}--tooltip__trigger {
151 display: inline-flex;
152 position: relative;
153 border-bottom: 2px dotted $ui-04;
154
155 &:hover {
156 border-bottom: 2px dotted $hover-primary;
157 cursor: pointer;
158
159 + .#{$prefix}--tooltip--definition__top,
160 + .#{$prefix}--tooltip--definition__bottom {
161 display: block;
162 }
163 }
164
165 &:focus {
166 @include focus-outline('border');
167
168 + .#{$prefix}--tooltip--definition__top,
169 + .#{$prefix}--tooltip--definition__bottom {
170 display: block;
171 }
172 }
173 }
174 }
175
176 .#{$prefix}--tooltip--definition__bottom,
177 .#{$prefix}--tooltip--definition__top {
178 @include layer('overlay');
179 position: absolute;
180 z-index: 1;
181 display: none;
182 background: $inverse-02;
183 max-width: rem(176px);
184 margin-top: $spacing-sm;
185 padding: $spacing-xs;
186 border-radius: rem(4px);
187 pointer-events: none;
188 cursor: pointer;
189
190 p {
191 @include font-family;
192 @include typescale('omega');
193 color: $inverse-01;
194 }
195
196 .#{$prefix}--tooltip__caret {
197 position: absolute;
198 right: 0;
199 left: 0;
200 width: 0.6rem;
201 height: 0.6rem;
202 background: $inverse-02;
203 margin-left: $spacing-lg;
204 }
205 }
206
207 // Tooltip Definition caret - bottom position
208 .#{$prefix}--tooltip--definition__bottom {
209 .#{$prefix}--tooltip__caret {
210 top: -0.2rem;
211 transform: rotate(-135deg);
212 }
213 }
214
215 // Tooltip Definition caret - top position
216 .#{$prefix}--tooltip--definition__top {
217 transform: translateY(-100%);
218 margin-top: rem(-32px);
219
220 .#{$prefix}--tooltip__caret {
221 bottom: -0.2rem;
222 transform: rotate(45deg);
223 }
224 }
225
226 // Tooltip Icon
227 // Icon CSS only tooltip
228 .#{$prefix}--tooltip--icon__top,
229 .#{$prefix}--tooltip--icon__bottom {
230 @include font-family;
231 @include reset;
232 position: relative;
233 display: inline-flex;
234 align-items: center;
235 cursor: pointer;
236 overflow: visible;
237
238 path {
239 fill: $brand-01;
240 }
241
242 // Tooltip - renders as a combo of :before and :after elements
243 &:before,
244 &:after {
245 @include font-family;
246 position: absolute;
247 display: none;
248 background-color: $inverse-02;
249 }
250
251 &:before {
252 right: 0;
253 left: 0;
254 width: 0.6rem;
255 height: 0.6rem;
256 margin: 0 auto;
257 content: '';
258 margin-top: 1px;
259 margin-left: 50%;
260 }
261
262 &:after {
263 @include typescale('omega');
264 @include layer('overlay');
265 max-width: rem(176px);
266 margin-left: 50%;
267 padding: $spacing-2xs;
268 border-radius: 4px;
269 color: $inverse-01;
270 font-weight: 400;
271 content: attr(aria-label);
272 transform: translateX(-50%);
273 white-space: nowrap;
274 pointer-events: none;
275 margin-left: 50%;
276 }
277
278 &:hover,
279 &:focus {
280 path {
281 fill: $hover-primary;
282 }
283
284 &:before,
285 &:after {
286 position: absolute;
287 display: block;
288 }
289 }
290
291 &:focus {
292 outline: 1px solid transparent;
293
294 svg {
295 @include focus-outline('border');
296 }
297 }
298 }
299
300 // Tooltip Icon caret - top position
301 .#{$prefix}--tooltip--icon__top {
302 &:before {
303 top: 0;
304 transform: translate(-50%, calc(-100% - 10px)) rotate(45deg);
305 }
306
307 &:after {
308 top: 0;
309 transform: translate(-50%, calc(-100% - 10px));
310 }
311 }
312
313 // Tooltip Icon caret - bottom position
314 .#{$prefix}--tooltip--icon__bottom {
315 &:before {
316 bottom: 0;
317 transform: translate(-50%, calc(100% + 10px)) rotate(135deg);
318 }
319
320 &:after {
321 bottom: 0;
322 transform: translate(-50%, calc(100% + 10px));
323 }
324 }
325
326 // Tooltip position - icon only
327 .#{$prefix}--tooltip--icon {
328 .#{$prefix}--tooltip__trigger {
329 svg {
330 margin-left: 0;
331 }
332 }
333 }
334}
335
336@mixin tooltip--x {
337 .#{$prefix}--tooltip--icon {
338 display: flex;
339 align-items: center;
340 }
341
342 .#{$prefix}--tooltip__label {
343 @include type-style('label-01');
344 display: inline-flex;
345 align-items: center;
346 color: $text-02;
347
348 .#{$prefix}--tooltip__trigger {
349 margin-left: $carbon--spacing-03;
350 }
351 }
352
353 .#{$prefix}--tooltip__label:focus {
354 @include focus-outline('border');
355 }
356
357 .#{$prefix}--tooltip__trigger {
358 @include button-reset($width: false);
359 display: inline-flex;
360 align-items: center;
361 cursor: pointer;
362 font-size: 1rem;
363
364 &:focus {
365 @include focus-outline('border');
366 fill: $hover-primary;
367 }
368
369 path,
370 polygon,
371 circle {
372 fill: $icon-02;
373 }
374 }
375
376 .#{$prefix}--tooltip__label--bold {
377 font-weight: 600;
378 }
379
380 .#{$prefix}--tooltip {
381 @include layer('overlay');
382 @include reset;
383 position: absolute;
384 display: none;
385 min-width: rem(208px);
386 max-width: rem(288px);
387 background: $inverse-02;
388 margin-top: $carbon--spacing-02;
389 padding: 1rem;
390 border-radius: rem(2px);
391 z-index: z('floating');
392 word-wrap: break-word;
393 color: $inverse-01;
394
395 p {
396 @include type-style('body-short-01');
397 }
398
399 button {
400 padding-right: $carbon--spacing-07;
401 }
402
403 .#{$prefix}--link {
404 // Need to add new link / UI color -- IBM Color Blue 40
405 color: $link-inverse-color;
406 font-size: rem(14px);
407
408 &:active {
409 color: $inverse-01;
410 }
411
412 &:visited {
413 color: $link-inverse-color;
414 }
415 }
416
417 .#{$prefix}--tooltip__caret {
418 position: absolute;
419 background: $inverse-02;
420 left: 0;
421 top: rem(-4px);
422 right: 0;
423 transform: rotate(-135deg);
424 width: 0.6rem;
425 height: 0.6rem;
426 margin: 0 auto;
427 content: '';
428 }
429
430 .#{$prefix}--tooltip__footer {
431 display: flex;
432 align-items: center;
433 justify-content: space-between;
434 margin-top: 1rem;
435 }
436
437 &[data-floating-menu-direction='left'] {
438 .#{$prefix}--tooltip__caret {
439 left: auto;
440 top: 50%;
441 right: rem(-4px);
442 transform: rotate(-45deg) translate(50%, -50%);
443 }
444 }
445
446 &[data-floating-menu-direction='top'] {
447 .#{$prefix}--tooltip__caret {
448 top: auto;
449 bottom: rem(-4px);
450 transform: rotate(45deg);
451 }
452 }
453
454 &[data-floating-menu-direction='right'] {
455 .#{$prefix}--tooltip__caret {
456 left: rem(-4px);
457 top: 50%;
458 right: auto;
459 transform: rotate(135deg) translate(-50%, 50%);
460 }
461 }
462 }
463
464 .#{$prefix}--tooltip--shown {
465 display: block;
466 }
467
468 // Tooltip Definition
469 // Definition CSS only tooltip
470 .#{$prefix}--tooltip--definition {
471 @include reset;
472 position: relative;
473
474 .#{$prefix}--tooltip__trigger {
475 @include type-style('label-01');
476 display: inline-flex;
477 position: relative;
478 border-bottom: 1px dotted $interactive-01;
479 color: $text-01;
480
481 &:hover {
482 cursor: pointer;
483
484 + .#{$prefix}--tooltip--definition__top,
485 + .#{$prefix}--tooltip--definition__bottom {
486 display: block;
487 }
488 }
489
490 &:focus {
491 @include focus-outline('border');
492
493 + .#{$prefix}--tooltip--definition__top,
494 + .#{$prefix}--tooltip--definition__bottom {
495 display: block;
496 }
497 }
498 }
499 }
500
501 .#{$prefix}--tooltip--definition__bottom,
502 .#{$prefix}--tooltip--definition__top {
503 @include layer('overlay');
504 position: absolute;
505 z-index: 1;
506 display: none;
507 background: $inverse-02;
508 width: rem(208px);
509 margin-top: $carbon--spacing-04;
510 padding: $carbon--spacing-03 $carbon--spacing-05;
511 border-radius: rem(2px);
512 pointer-events: none;
513 cursor: pointer;
514
515 p {
516 @include type-style('body-short-01');
517 color: $inverse-01;
518 }
519
520 .#{$prefix}--tooltip__caret {
521 position: absolute;
522 right: 0;
523 left: 0;
524 width: 0.6rem;
525 height: 0.6rem;
526 background: $inverse-02;
527 margin-left: $carbon--spacing-05;
528 }
529 }
530
531 // Tooltip Definition caret - bottom position
532 .#{$prefix}--tooltip--definition__bottom .#{$prefix}--tooltip__caret {
533 top: -0.2rem;
534 transform: rotate(-135deg);
535 }
536
537 // Tooltip Definition caret - top position
538 .#{$prefix}--tooltip--definition__top {
539 transform: translateY(-100%);
540 margin-top: rem(-32px);
541
542 .#{$prefix}--tooltip__caret {
543 bottom: -0.2rem;
544 transform: rotate(45deg);
545 }
546 }
547
548 // Tooltip Icon
549 // Icon CSS only tooltip
550 .#{$prefix}--tooltip--icon__top,
551 .#{$prefix}--tooltip--icon__bottom {
552 @include reset;
553 position: relative;
554 display: inline-flex;
555 align-items: center;
556 cursor: pointer;
557 overflow: visible;
558
559 path {
560 fill: $icon-02;
561 }
562
563 // Tooltip - renders as a combo of ::before and ::after elements
564 &::before,
565 &::after {
566 @include type-style('body-short-01');
567 position: absolute;
568 display: none;
569 background-color: $inverse-02;
570 }
571
572 &::before {
573 right: 0;
574 left: 0;
575 width: rem(18px);
576 height: rem(18px);
577 margin: 0 auto;
578 content: '';
579 margin-top: 1px;
580 margin-left: 50%;
581 }
582
583 &::after {
584 @include layer('overlay');
585 min-width: rem(24px);
586 max-width: rem(208px);
587 height: rem(24px);
588 margin-left: 50%;
589 padding: 0 1rem;
590 border-radius: rem(2px);
591 color: $inverse-01;
592 font-weight: 400;
593 content: attr(aria-label);
594 transform: translateX(-50%);
595 white-space: nowrap;
596 pointer-events: none;
597 margin-left: 50%;
598 }
599
600 &:hover,
601 &:focus {
602 path {
603 fill: $icon-02;
604 }
605
606 &::before,
607 &::after {
608 position: absolute;
609 display: flex;
610 align-items: center;
611 }
612 }
613
614 &:focus {
615 outline: 1px solid transparent;
616
617 svg {
618 @include focus-outline('border');
619 }
620 }
621 }
622
623 // Tooltip Icon caret - top position
624 .#{$prefix}--tooltip--icon__top {
625 &::before {
626 top: 1px;
627 transform: translate(-50%, calc(-100% - 12px)) rotate(45deg);
628 }
629
630 &::after {
631 top: 0;
632 transform: translate(-50%, calc(-100% - 12px));
633 }
634 }
635
636 // Tooltip Icon caret - bottom position
637 .#{$prefix}--tooltip--icon__bottom {
638 &::before {
639 bottom: 0;
640 transform: translate(-50%, calc(100% + 9px)) rotate(135deg);
641 }
642
643 &::after {
644 bottom: 0;
645 transform: translate(-50%, calc(100% + 10px));
646 }
647 }
648
649 // Tooltip position - icon only
650 .#{$prefix}--tooltip--icon .#{$prefix}--tooltip__trigger svg {
651 margin-left: 0;
652 }
653}
654
655@include exports('tooltip') {
656 @if feature-flag-enabled('components-x') {
657 @include tooltip--x;
658 } @else {
659 @include tooltip;
660 }
661}