Mercurial > nebulaweb3

comparison default/assets/scss/components/_tooltip.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }