OSDN Git Service

Merge pull request #41 from Bytom/dev
[bytom/vapor.git] / tools / side_chain_tool / web / node_modules / bootstrap / scss / _tooltip.scss
1 // Base class
2 .tooltip {
3   position: absolute;
4   z-index: $zindex-tooltip;
5   display: block;
6   margin: $tooltip-margin;
7   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
8   // So reset our font and text properties to avoid inheriting weird values.
9   @include reset-text();
10   font-size: $tooltip-font-size;
11   // Allow breaking very long words so they don't overflow the tooltip's bounds
12   word-wrap: break-word;
13   opacity: 0;
14
15   &.show { opacity: $tooltip-opacity; }
16
17   .arrow {
18     position: absolute;
19     display: block;
20     width: $tooltip-arrow-width;
21     height: $tooltip-arrow-height;
22
23     &::before {
24       position: absolute;
25       content: "";
26       border-color: transparent;
27       border-style: solid;
28     }
29   }
30 }
31
32 .bs-tooltip-top {
33   padding: $tooltip-arrow-height 0;
34
35   .arrow {
36     bottom: 0;
37
38     &::before {
39       top: 0;
40       border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41       border-top-color: $tooltip-arrow-color;
42     }
43   }
44 }
45
46 .bs-tooltip-right {
47   padding: 0 $tooltip-arrow-height;
48
49   .arrow {
50     left: 0;
51     width: $tooltip-arrow-height;
52     height: $tooltip-arrow-width;
53
54     &::before {
55       right: 0;
56       border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57       border-right-color: $tooltip-arrow-color;
58     }
59   }
60 }
61
62 .bs-tooltip-bottom {
63   padding: $tooltip-arrow-height 0;
64
65   .arrow {
66     top: 0;
67
68     &::before {
69       bottom: 0;
70       border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71       border-bottom-color: $tooltip-arrow-color;
72     }
73   }
74 }
75
76 .bs-tooltip-left {
77   padding: 0 $tooltip-arrow-height;
78
79   .arrow {
80     right: 0;
81     width: $tooltip-arrow-height;
82     height: $tooltip-arrow-width;
83
84     &::before {
85       left: 0;
86       border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87       border-left-color: $tooltip-arrow-color;
88     }
89   }
90 }
91
92 .bs-tooltip-auto {
93   &[x-placement^="top"] {
94     @extend .bs-tooltip-top;
95   }
96   &[x-placement^="right"] {
97     @extend .bs-tooltip-right;
98   }
99   &[x-placement^="bottom"] {
100     @extend .bs-tooltip-bottom;
101   }
102   &[x-placement^="left"] {
103     @extend .bs-tooltip-left;
104   }
105 }
106
107 // Wrapper for the tooltip content
108 .tooltip-inner {
109   max-width: $tooltip-max-width;
110   padding: $tooltip-padding-y $tooltip-padding-x;
111   color: $tooltip-color;
112   text-align: center;
113   background-color: $tooltip-bg;
114   @include border-radius($tooltip-border-radius);
115 }