|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Tooltips
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7
|
|
|
8 .fancy-tooltip {
|
|
|
9 display: inline-block;
|
|
|
10 position: relative;
|
|
|
11 font-weight: 700;
|
|
|
12
|
|
|
13 .list-icon {
|
|
|
14 vertical-align: bottom;
|
|
|
15 }
|
|
|
16 }
|
|
|
17
|
|
|
18 .tooltip-item {
|
|
|
19 cursor: pointer;
|
|
|
20 display: inline-block;
|
|
|
21 font-weight: 500;
|
|
|
22
|
|
|
23 .fancy-tooltip:not(a) & {
|
|
|
24 padding: 0 em(10);
|
|
|
25 background: rgba(0, 0, 0, 0.1);
|
|
|
26 }
|
|
|
27 }
|
|
|
28
|
|
|
29 .tooltip-content {
|
|
|
30 font-weight: 500;
|
|
|
31 border-radius: rem(5);
|
|
|
32 position: absolute;
|
|
|
33 z-index: 99;
|
|
|
34 width: rem(300);
|
|
|
35 left: 50%;
|
|
|
36 margin: 0 0 rem(20) rem(-150);
|
|
|
37 bottom: 100%;
|
|
|
38 text-align: left;
|
|
|
39 box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
|
|
|
40 background: #2b2b2b;
|
|
|
41 color: #fff;
|
|
|
42 opacity: 0;
|
|
|
43 cursor: default;
|
|
|
44 pointer-events: none;
|
|
|
45
|
|
|
46 img {
|
|
|
47 position: relative;
|
|
|
48 border-top-left-radius: rem(5);
|
|
|
49 border-bottom-left-radius: rem(5);
|
|
|
50 height: em(140);
|
|
|
51 display: block;
|
|
|
52 float: left;
|
|
|
53 margin-right: 1em;
|
|
|
54 }
|
|
|
55
|
|
|
56 &::after {
|
|
|
57 content: '';
|
|
|
58 top: 95%;
|
|
|
59 left: 50%;
|
|
|
60 border: solid transparent;
|
|
|
61 height: em(15);
|
|
|
62 width: em(15);
|
|
|
63 transform: rotate(45deg);
|
|
|
64 position: absolute;
|
|
|
65 pointer-events: none;
|
|
|
66 border-color: transparent;
|
|
|
67 background: inherit;
|
|
|
68 margin-left: em(-10);
|
|
|
69 }
|
|
|
70
|
|
|
71
|
|
|
72 /* SlideInDown Effect
|
|
|
73 ========================*/
|
|
|
74 .tooltip-effect-slideInDown & {
|
|
|
75 transform: translate3d(0, em(-10), 0);
|
|
|
76 transition: opacity 0.3s, transform 0.3s;
|
|
|
77 }
|
|
|
78
|
|
|
79
|
|
|
80 /* SlideInUp Effect
|
|
|
81 ========================*/
|
|
|
82 .tooltip-effect-slideInUp & {
|
|
|
83 transform-origin: 50% calc(110%);
|
|
|
84 transform: perspective( em(1000) ) rotate3d(1, 0, 0, 45deg);
|
|
|
85 transition: opacity 0.2s, transform 0.2s;
|
|
|
86 }
|
|
|
87
|
|
|
88
|
|
|
89 /* Rotate Effect
|
|
|
90 ========================*/
|
|
|
91 .tooltip-effect-rotate & {
|
|
|
92 transform-origin: 50% calc(106%);
|
|
|
93 transform: rotate3d(0, 0, 1, 15deg);
|
|
|
94 transition: opacity 0.3s, transform 0.3s;
|
|
|
95 }
|
|
|
96
|
|
|
97 .icon-tooltip.tooltip-effect-rotate & {
|
|
|
98 transform: translate3d(0,em(10),0) rotate3d(1,1,1,45deg);
|
|
|
99 transform-origin: 50% 100%;
|
|
|
100 }
|
|
|
101
|
|
|
102
|
|
|
103 /* Spin Effect
|
|
|
104 ========================*/
|
|
|
105 .tooltip-effect-spin & {
|
|
|
106 transform: translate3d(0,em(10),0) rotate3d(0,1,0,90deg);
|
|
|
107 transform-origin: 50% 100%;
|
|
|
108 transition: opacity .3s, transform .3s;
|
|
|
109 }
|
|
|
110
|
|
|
111 .fancy-tooltip:hover &,
|
|
|
112 .fancy-tooltip:active & {
|
|
|
113 pointer-events: auto;
|
|
|
114 opacity: 1;
|
|
|
115 transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
|
|
|
116 }
|
|
|
117 }
|
|
|
118
|
|
|
119 .tooltip-text {
|
|
|
120 display: block;
|
|
|
121 font-size: em(16);
|
|
|
122 padding: em(20,16);
|
|
|
123 }
|
|
|
124
|
|
|
125
|
|
|
126 /* Icon Tooltips
|
|
|
127 ========================*/
|
|
|
128 .icon-tooltip {
|
|
|
129 .tooltip-text {
|
|
|
130 padding: 0;
|
|
|
131 }
|
|
|
132
|
|
|
133 .tooltip-content {
|
|
|
134 padding: 0;
|
|
|
135 text-align: center;
|
|
|
136 border-radius: 50%;
|
|
|
137 width: em(80);
|
|
|
138 height: em(80);
|
|
|
139 line-height: em(80);
|
|
|
140 margin-left: em(-40);
|
|
|
141 box-shadow: none;
|
|
|
142 background: $primary;
|
|
|
143 color: #fff;
|
|
|
144
|
|
|
145 .list-icon {
|
|
|
146 line-height: em(80,20);
|
|
|
147 font-size: em(20);
|
|
|
148 }
|
|
|
149
|
|
|
150 &::after {
|
|
|
151 top: em(78);
|
|
|
152 border-top-color: $primary;
|
|
|
153 }
|
|
|
154 }
|
|
|
155 }
|
