1 |
|
2 |
|
3 |
|
4 | @import "../../common/variables";
|
5 | @import "../popover/common";
|
6 | @import "./common";
|
7 |
|
8 | .#{$ns}-tooltip {
|
9 | @include popover-sizing(
|
10 | $arrow-square-size: 22px,
|
11 | $arrow-offset: 3px,
|
12 | $arrow-target-offset: -4px
|
13 | );
|
14 | @include popover-appearance(
|
15 | $tooltip-background-color,
|
16 | $tooltip-text-color,
|
17 | $pt-tooltip-box-shadow,
|
18 | $pt-drop-shadow-opacity,
|
19 | $pt-border-shadow-opacity
|
20 | );
|
21 |
|
22 | @include react-transition(
|
23 | "#{$ns}-popover",
|
24 | (transform: scale(0.8) scale(1)),
|
25 | $duration: $pt-transition-duration,
|
26 | $after: "> &"
|
27 | );
|
28 |
|
29 | .#{$ns}-popover-content {
|
30 | padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
|
31 | }
|
32 |
|
33 | &.#{$ns}-dark,
|
34 | .#{$ns}-dark & {
|
35 | @include popover-appearance(
|
36 | $dark-tooltip-background-color,
|
37 | $dark-tooltip-text-color,
|
38 | $pt-dark-tooltip-box-shadow,
|
39 | $pt-dark-drop-shadow-opacity,
|
40 | $pt-dark-border-shadow-opacity
|
41 | );
|
42 | }
|
43 |
|
44 | @each $intent, $color in $pt-intent-colors {
|
45 | &.#{$ns}-intent-#{$intent} {
|
46 | .#{$ns}-popover-content {
|
47 | background: $color;
|
48 | color: $white;
|
49 | }
|
50 |
|
51 | .#{$ns}-popover-arrow-fill {
|
52 | fill: $color;
|
53 | }
|
54 | }
|
55 | }
|
56 | }
|
57 |
|
58 | .#{$ns}-tooltip-indicator {
|
59 | border-bottom: dotted 1px;
|
60 | cursor: help;
|
61 | }
|