@egovernments/digit-ui-components-css 0.0.2-beta.20 → 0.0.2-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/index.css +176 -25
  3. package/dist/index.min.css +2 -2
  4. package/package.json +1 -1
  5. package/src/digitv2/components/tooltipwrapperV2.scss +206 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@egovernments/digit-ui-components-css",
3
- "version": "0.0.2-beta.20",
3
+ "version": "0.0.2-beta.21",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.css",
6
6
  "author": "Jagankumar <jagan.kumar@egovernments.org>",
package/src/digitv2/components/tooltipwrapperV2.scss CHANGED
@@ -13,6 +13,9 @@
13
13
  pointer-events: none;
14
14
  width: max-content;
15
15
  transition: all 0.5s ease;
16
+ display: flex;
17
+ justify-content: center;
18
+ flex-direction: column;
16
19
 
17
20
  min-width: 4.125rem;
18
21
  max-width: 14.563rem;
@@ -35,62 +38,229 @@
35
38
  }
36
39
  }
37
40
 
38
- .tooltip-content.tooltip-left{
39
- left: -10rem;
41
+ .tooltip-content.tooltip-bottom-start {
42
+ top: theme(digitv2.spacers.spacer12);
43
+ left: 0;
44
+
45
+ &.with-arrow{
46
+ border-top-left-radius: theme(digitv2.spacers.spacer0);
47
+ }
48
+
49
+ }
50
+
51
+ .tooltip-content.tooltip-bottom {
52
+ top: theme(digitv2.spacers.spacer12);
53
+ left: 50%;
54
+ transform: translateX(-50%);
40
55
  }
41
56
 
42
- .tooltip-content.tooltip-right{
43
- left: 10rem;
57
+ .tooltip-content.tooltip-bottom-end {
58
+ top: theme(digitv2.spacers.spacer12);
59
+ right: 0;
60
+
61
+ &.with-arrow{
62
+ border-top-right-radius: 0px;
63
+ }
44
64
  }
45
65
 
46
- .tooltip-content.tooltip-top{
47
- top: -3.75rem;
66
+ .tooltip-content.tooltip-top-start {
67
+ bottom: theme(digitv2.spacers.spacer12);
68
+ left: 0;
69
+
70
+ &.with-arrow{
71
+ border-bottom-left-radius: theme(digitv2.spacers.spacer0);
72
+ }
48
73
  }
49
74
 
50
- .tooltip-content.tooltip-bottom{
51
- top: 3.75rem;
75
+ .tooltip-content.tooltip-top {
76
+ bottom: theme(digitv2.spacers.spacer12);
77
+ left: 50%;
78
+ transform: translateX(-50%);
79
+ }
80
+
81
+
82
+ .tooltip-content.tooltip-top-end {
83
+ bottom: theme(digitv2.spacers.spacer12);
84
+ right: 0;
85
+
86
+ &.with-arrow{
87
+ border-bottom-right-radius: theme(digitv2.spacers.spacer0);
88
+ }
89
+ }
90
+
91
+ .tooltip-content.tooltip-left-start {
92
+ right: calc(100% + theme(digitv2.spacers.spacer2));
93
+ top: 0;
94
+
95
+ &.with-arrow{
96
+ border-top-right-radius: theme(digitv2.spacers.spacer0);
97
+ }
52
98
  }
53
99
 
54
- .tooltip-left:before{
100
+ .tooltip-content.tooltip-left {
101
+ right: calc(100% + theme(digitv2.spacers.spacer2));
102
+ top: 50%;
103
+ transform: translateY(-50%);
104
+ }
105
+
106
+ .tooltip-content.tooltip-left-end {
107
+ right: calc(100% + theme(digitv2.spacers.spacer2));
108
+ bottom: 0;
109
+
110
+ &.with-arrow{
111
+ border-bottom-right-radius: theme(digitv2.spacers.spacer0);
112
+ }
113
+ }
114
+
115
+ .tooltip-content.tooltip-right-start {
116
+ left: calc(100% + theme(digitv2.spacers.spacer2));
117
+ top: 0;
118
+
119
+ &.with-arrow{
120
+ border-top-left-radius: theme(digitv2.spacers.spacer0);
121
+ }
122
+ }
123
+
124
+ .tooltip-content.tooltip-right {
125
+ left: calc(100% + theme(digitv2.spacers.spacer2));
126
+ top: 50%;
127
+ transform: translateY(-50%);
128
+ }
129
+
130
+ .tooltip-content.tooltip-right-end {
131
+ left: calc(100% + theme(digitv2.spacers.spacer2));
132
+ bottom: 0;
133
+
134
+ &.with-arrow{
135
+ border-bottom-left-radius: theme(digitv2.spacers.spacer0);
136
+ }
137
+ }
138
+
139
+
140
+ .tooltip-bottom-start.with-arrow:before{
55
141
  content: "";
56
142
  position: absolute;
57
- top: 0;
58
- right:-0.625rem;
59
- border-left:0.625rem solid transparent;
60
- border-right:0.625rem solid transparent;
61
- border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
62
- border-bottom:0.625rem solid transparent;
143
+ top: -0.5rem;
144
+ left:theme(digitv2.spacers.spacer1);
145
+ transform: translateX(-50%);
146
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
147
+ border-right:theme(digitv2.spacers.spacer2) solid transparent;
63
148
  }
64
149
 
65
- .tooltip-right:before{
150
+ .tooltip-bottom.with-arrow:before{
66
151
  content: "";
67
152
  position: absolute;
68
- top: 0;
69
- left:-0.625rem;
70
- border-left:0.625rem solid transparent;
71
- border-right:0.625rem solid transparent;
72
- border-top:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
73
- border-bottom:0.625rem solid transparent;
153
+ top: -0.5rem;
154
+ left: 50%;
155
+ transform: translateX(-50%);
156
+ border-bottom: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
157
+ border-left: theme(digitv2.spacers.spacer1) solid transparent;
158
+ border-right: theme(digitv2.spacers.spacer1) solid transparent;
159
+ }
160
+
161
+
162
+ .tooltip-bottom-end.with-arrow:before {
163
+ content: "";
164
+ position: absolute;
165
+ top: -0.5rem;
166
+ left:calc(100% -0.25rem);
167
+ transform: translateX(-50%);
168
+ border-bottom:theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
169
+ border-left: theme(digitv2.spacers.spacer2) solid transparent;
74
170
  }
75
171
 
76
- .tooltip-top:before{
172
+
173
+ .tooltip-top-start.with-arrow:before{
77
174
  content: "";
78
175
  position: absolute;
79
- bottom:-0.625rem;
80
- right:0rem;
81
- border-left:0.625rem solid transparent;
82
- border-right:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
83
- border-top:0.625rem solid transparent;
84
- border-bottom:0.625rem solid transparent;
176
+ bottom: -0.5rem;
177
+ left: theme(digitv2.spacers.spacer1);
178
+ transform: translateX(-50%);
179
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
180
+ border-right: theme(digitv2.spacers.spacer2) solid transparent;
85
181
  }
86
182
 
87
- .tooltip-bottom:before{
183
+ .tooltip-top.with-arrow:before{
184
+ content: "";
185
+ position: absolute;
186
+ bottom: -0.5rem;
187
+ left: 50%;
188
+ transform: translateX(-50%);
189
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
190
+ border-left: theme(digitv2.spacers.spacer1) solid transparent;
191
+ border-right: theme(digitv2.spacers.spacer1) solid transparent;
192
+ }
193
+
194
+ .tooltip-top-end.with-arrow:before {
195
+ content: "";
196
+ position: absolute;
197
+ bottom: -0.5rem;
198
+ left:calc(100% -0.25rem);
199
+ transform: translateX(-50%);
200
+ border-top: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
201
+ border-left: theme(digitv2.spacers.spacer2) solid transparent;
202
+ }
203
+
204
+
205
+ .tooltip-left-start.with-arrow:before{
206
+ content: "";
207
+ position: absolute;
208
+ top: theme(digitv2.spacers.spacer1);
209
+ right: -0.45rem;
210
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
211
+ border-bottom: theme(digitv2.spacers.spacer2) solid transparent;
212
+ transform: translateY(-50%);
213
+ }
214
+
215
+ .tooltip-left.with-arrow:before {
216
+ content: "";
217
+ position: absolute;
218
+ top: 50%;
219
+ right: -0.5rem;
220
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
221
+ border-top: theme(digitv2.spacers.spacer1) solid transparent;
222
+ border-bottom: theme(digitv2.spacers.spacer1) solid transparent;
223
+ transform: translateY(-50%);
224
+ }
225
+
226
+ .tooltip-left-end.with-arrow:before {
227
+ content: "";
228
+ position: absolute;
229
+ top:calc(100% -0.25rem);
230
+ right: -0.45rem;
231
+ border-left: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
232
+ border-top: theme(digitv2.spacers.spacer2) solid transparent;
233
+ transform: translateY(-50%);
234
+ }
235
+
236
+ .tooltip-right-start.with-arrow:before{
237
+ content: "";
238
+ position: absolute;
239
+ top: theme(digitv2.spacers.spacer1);
240
+ left: -0.45rem;
241
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
242
+ border-bottom: theme(digitv2.spacers.spacer2) solid transparent;
243
+ transform: translateY(-50%);
244
+ }
245
+
246
+ .tooltip-right.with-arrow:before{
247
+ content: "";
248
+ position: absolute;
249
+ top: 50%;
250
+ left: -0.5rem;
251
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
252
+ border-top: theme(digitv2.spacers.spacer1) solid transparent;
253
+ border-bottom: theme(digitv2.spacers.spacer1) solid transparent;
254
+ transform: translateY(-50%);
255
+ }
256
+
257
+
258
+ .tooltip-right-end.with-arrow:before {
88
259
  content: "";
89
260
  position: absolute;
90
- top:-0.625rem;
91
- left:0rem;
92
- border-left:0.625rem solid theme(digitv2.lightTheme.generic-inputborder);
93
- border-right:0.625rem solid transparent;
94
- border-top:0.625rem solid transparent;
95
- border-bottom:0.625rem solid transparent;
261
+ top:calc(100% -0.25rem);
262
+ left: -0.45rem;
263
+ border-right: theme(digitv2.spacers.spacer2) solid theme(digitv2.lightTheme.generic-inputborder);
264
+ border-top: theme(digitv2.spacers.spacer2) solid transparent;
265
+ transform: translateY(-50%);
96
266
  }