-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathTooltip.scss
More file actions
executable file
·102 lines (100 loc) · 3.29 KB
/
Tooltip.scss
File metadata and controls
executable file
·102 lines (100 loc) · 3.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
///
/// Punica CSS Framework
/// Module : Tooltip
///
@use "../../Core/Global/Getters" as *;
@use "../../Core/Global/Options" as *;
@use "../../Core/Global/Mixins" as *;
@if enabled('tooltip') {
.#{class('tooltip', 'name')} {
display : module('tooltip', 'display');
justify-content : module('tooltip', 'justify-content');
align-items : module('tooltip', 'align-items');
position : module('tooltip', 'position');
cursor : module('tooltip', 'cursor');
transition : module('tooltip', 'transition');
.#{class('tooltip', 'text')} {
position : absolute;
visibility : hidden;
opacity : 0;
top : module('tooltip', 'text', 'top');
display : module('tooltip', 'text', 'display');
align-items : module('tooltip', 'text', 'align-items');
justify-content : module('tooltip', 'text', 'justify-content');
border-radius : module('tooltip', 'border-radius');
background-color: module('tooltip', 'background-color');
z-index : module('tooltip', 'text', 'z-index');
color : module('tooltip', 'text', 'color');
font-size : module('tooltip', 'text', 'font-size');
font-family : module('tooltip', 'text', 'font-family');
font-weight : module('tooltip', 'text', 'font-weight');
width : module('tooltip', 'text', 'width');
max-width : module('tooltip', 'text', 'max-width');
text-wrap : module('tooltip', 'text', 'text-wrap');
white-space : module('tooltip', 'text', 'white-space');
text-align : module('tooltip', 'text', 'text-align');
line-height : module('tooltip', 'text', 'line-height');
padding : module('tooltip', 'text', 'padding');
&::after {
content : "";
position : absolute;
top : auto;
bottom : 100%;
left : 50%;
margin-left : -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent module('tooltip', 'background-color') transparent;
}
}
///
/// DIRECTIONS
///
@if features('tooltip', 'directions') {
&.#{class('tooltip', 'left')},
&.#{class('tooltip', 'right')},
&.#{class('tooltip', 'top')} {
&>.#{class('tooltip', 'text')} {
top: auto;
&::after {
bottom: auto;
}
}
}
&.#{class('tooltip', 'right')} {
&>.#{class('tooltip', 'text')} {
left: 110%;
&::after {
right : 100%;
left : auto;
border-color: transparent module('tooltip', 'background-color') transparent transparent;
}
}
}
&.#{class('tooltip', 'left')} {
&>.#{class('tooltip', 'text')} {
right: 110%;
&::after {
left : 100%;
right : auto;
margin : auto -5px auto auto ;
border-color: transparent transparent transparent module('tooltip', 'background-color');
}
}
}
&.#{class('tooltip', 'top')} {
&>.#{class('tooltip', 'text')} {
bottom: 120%;
&::after {
top : 100%;
border-color: module('tooltip', 'background-color') transparent transparent transparent;
}
}
}
}
&:hover .#{class('tooltip', 'text')} {
visibility: visible;
opacity : 1;
}
}
}