@dialpad/dialtone 6.18.1 → 6.19.0
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.
- package/CHANGELOG.md +7 -0
- package/lib/build/less/components/modal.less +29 -1
- package/lib/build/less/components/popover.less +80 -0
- package/lib/build/less/components/tooltip.less +76 -56
- package/lib/build/less/dialtone.less +1 -0
- package/lib/build/less/utilities/layout.less +1 -0
- package/lib/build/less/variables/layout.less +2 -0
- package/lib/dist/css/dialtone.css +235 -5
- package/lib/dist/css/dialtone.min.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [6.19.0](https://github.com/dialpad/dialtone/compare/v6.18.1...v6.19.0) (2022-03-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* add popover into dialtone ([#557](https://github.com/dialpad/dialtone/issues/557)) ([846a4e3](https://github.com/dialpad/dialtone/commit/846a4e3d7d94d00d02a21379a2e32a75edcbb26c))
|
|
7
|
+
|
|
1
8
|
## [6.18.1](https://github.com/dialpad/dialtone/compare/v6.18.0...v6.18.1) (2022-03-04)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -50,6 +50,32 @@
|
|
|
50
50
|
will-change: visibility, z-index, opacity;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.d-modal--transparent {
|
|
54
|
+
// Component CSS Vars
|
|
55
|
+
// ------------------------------------------------------------------------
|
|
56
|
+
--modal--bgc: hsla(var(--black-900-hsl) ~' / ' 85%);
|
|
57
|
+
--modal-dialog--bgc: var(--white);
|
|
58
|
+
--modal-dialog--fc: var(--black-700);
|
|
59
|
+
--modal-header--fc: var(--black-800);
|
|
60
|
+
|
|
61
|
+
position: fixed;
|
|
62
|
+
top: 0;
|
|
63
|
+
right: 0;
|
|
64
|
+
bottom: 0;
|
|
65
|
+
left: 0;
|
|
66
|
+
z-index: var(--zi-hide);
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
padding: var(--su32);
|
|
72
|
+
background-color: var(--d-bgc-transparent);
|
|
73
|
+
backface-visibility: hidden;
|
|
74
|
+
visibility: hidden;
|
|
75
|
+
opacity: 0;
|
|
76
|
+
will-change: visibility, z-index, opacity;
|
|
77
|
+
}
|
|
78
|
+
|
|
53
79
|
// $$ MODAL DIALOG
|
|
54
80
|
// ----------------------------------------------------------------------------
|
|
55
81
|
.d-modal__dialog {
|
|
@@ -78,7 +104,9 @@
|
|
|
78
104
|
// $$ MAKE THEM APPEAR
|
|
79
105
|
// ----------------------------------------------------------------------------
|
|
80
106
|
.d-modal[aria-hidden='false'],
|
|
81
|
-
.d-modal[aria-hidden='false'] .d-modal__dialog
|
|
107
|
+
.d-modal[aria-hidden='false'] .d-modal__dialog,
|
|
108
|
+
.d-modal--transparent[aria-hidden='false'],
|
|
109
|
+
.d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
|
|
82
110
|
z-index: var(--zi-modal);
|
|
83
111
|
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
|
|
84
112
|
visibility: visible;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
//
|
|
2
|
+
// DIALTONE
|
|
3
|
+
// COMPONENTS: POPOVER
|
|
4
|
+
//
|
|
5
|
+
// These are popover classes for Dialpad's design system Dialtone.
|
|
6
|
+
// For further documentation of these and other classes,
|
|
7
|
+
// visit https://dialpad.design/components/popover
|
|
8
|
+
//
|
|
9
|
+
// TABLE OF CONTENTS
|
|
10
|
+
// • POPOVER
|
|
11
|
+
// • POPOVER DIALOG
|
|
12
|
+
// - Base dialog style
|
|
13
|
+
// - Content
|
|
14
|
+
// - Header / Footer
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
// $ POPOVER
|
|
18
|
+
// ----------------------------------------------------------------------------
|
|
19
|
+
|
|
20
|
+
// $ POPOVER DIALOG
|
|
21
|
+
// ----------------------------------------------------------------------------
|
|
22
|
+
.d-popover__dialog {
|
|
23
|
+
&,
|
|
24
|
+
*,
|
|
25
|
+
*::before,
|
|
26
|
+
*::after {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
display: grid;
|
|
31
|
+
grid-template-rows: auto 1fr;
|
|
32
|
+
overflow: auto;
|
|
33
|
+
background-color: var(--white);
|
|
34
|
+
border-color: var(--black-100);
|
|
35
|
+
border-radius: var(--su8);
|
|
36
|
+
box-shadow: var(--bs-card);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// to be set on the dialog when it is modal
|
|
40
|
+
.d-popover__dialog--modal {
|
|
41
|
+
z-index: var(--zi-modal-element);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// to be set on the anchor container whenever the modal dialog is opened.
|
|
45
|
+
.d-popover__anchor--modal-opened * {
|
|
46
|
+
z-index: 650;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// $$ DIALOG CONTENT
|
|
50
|
+
// ----------------------------------------------------------------------------
|
|
51
|
+
.d-popover__content {
|
|
52
|
+
overflow: auto;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// $$ DIALOG HEADER / FOOTER
|
|
56
|
+
// ----------------------------------------------------------------------------
|
|
57
|
+
.d-popover__header-footer-base {
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: flex-end;
|
|
61
|
+
width: 100%;
|
|
62
|
+
min-height: var(--size48);
|
|
63
|
+
padding-top: var(--su6);
|
|
64
|
+
padding-bottom: var(--su6);
|
|
65
|
+
overflow: auto;
|
|
66
|
+
font-weight: var(--fw-bold);
|
|
67
|
+
font-size: var(--fs16);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.d-popover__header {
|
|
71
|
+
.d-popover__header-footer-base();
|
|
72
|
+
|
|
73
|
+
border-bottom: var(--su1) solid var(--black-075);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.d-popover__footer {
|
|
77
|
+
.d-popover__header-footer-base();
|
|
78
|
+
|
|
79
|
+
border-top: var(--su1) solid var(--black-075);
|
|
80
|
+
}
|
|
@@ -113,128 +113,148 @@
|
|
|
113
113
|
// ============================================================================
|
|
114
114
|
// $$ TOP
|
|
115
115
|
// ----------------------------------------------------------------------------
|
|
116
|
+
.d-tooltip__arrow-tippy--bottom-start,
|
|
117
|
+
.d-tooltip__arrow-tippy--bottom,
|
|
118
|
+
.d-tooltip__arrow-tippy--bottom-end,
|
|
116
119
|
.d-tooltip__arrow--top-left,
|
|
117
120
|
.d-tooltip__arrow--top-center,
|
|
118
121
|
.d-tooltip__arrow--top-right {
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
top: calc(100% + var(--su12));
|
|
123
|
+
transform: translateY(var(--su16));
|
|
121
124
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
&::after {
|
|
126
|
+
top: var(--sun6);
|
|
127
|
+
border-top-width: 0;
|
|
128
|
+
border-bottom-color: var(--tooltip--bgc);
|
|
129
|
+
}
|
|
127
130
|
}
|
|
128
131
|
|
|
129
|
-
|
|
130
132
|
// $$ BOTTOM
|
|
131
133
|
// ----------------------------------------------------------------------------
|
|
134
|
+
.d-tooltip__arrow-tippy--top-start,
|
|
135
|
+
.d-tooltip__arrow-tippy--top,
|
|
136
|
+
.d-tooltip__arrow-tippy--top-end,
|
|
132
137
|
.d-tooltip__arrow--bottom-left,
|
|
133
138
|
.d-tooltip__arrow--bottom-center,
|
|
134
139
|
.d-tooltip__arrow--bottom-right {
|
|
135
|
-
|
|
136
|
-
|
|
140
|
+
bottom: calc(100% + var(--su12));
|
|
141
|
+
transform: translateY(var(--sun16));
|
|
137
142
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
+
&::after {
|
|
144
|
+
bottom: var(--sun6);
|
|
145
|
+
border-top-color: var(--tooltip--bgc);
|
|
146
|
+
border-bottom-width: 0;
|
|
147
|
+
}
|
|
143
148
|
}
|
|
144
149
|
|
|
145
|
-
|
|
146
150
|
// $$ TOP / BOTTOM LEFT
|
|
147
151
|
// ----------------------------------------------------------------------------
|
|
152
|
+
.d-tooltip__arrow-tippy--bottom-start,
|
|
153
|
+
.d-tooltip__arrow-tippy--top-start,
|
|
148
154
|
.d-tooltip__arrow--top-left,
|
|
149
155
|
.d-tooltip__arrow--bottom-left {
|
|
150
|
-
|
|
156
|
+
left: var(--sun2);
|
|
151
157
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
158
|
+
&::after {
|
|
159
|
+
left: var(--su16);
|
|
160
|
+
}
|
|
155
161
|
}
|
|
156
162
|
|
|
157
163
|
// $$ TOP / BOTTOM CENTER
|
|
158
164
|
// ----------------------------------------------------------------------------
|
|
165
|
+
.d-tooltip__arrow-tippy--bottom,
|
|
166
|
+
.d-tooltip__arrow-tippy--top,
|
|
159
167
|
.d-tooltip__arrow--top-center,
|
|
160
168
|
.d-tooltip__arrow--bottom-center {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
169
|
+
&::after {
|
|
170
|
+
left: 50%;
|
|
171
|
+
margin-left: var(--sun6);
|
|
172
|
+
}
|
|
165
173
|
}
|
|
166
174
|
|
|
167
175
|
// $$ TOP / BOTTOM RIGHT
|
|
168
176
|
// ----------------------------------------------------------------------------
|
|
177
|
+
.d-tooltip__arrow-tippy--bottom-end,
|
|
178
|
+
.d-tooltip__arrow-tippy--top-end,
|
|
169
179
|
.d-tooltip__arrow--top-right,
|
|
170
180
|
.d-tooltip__arrow--bottom-right {
|
|
171
|
-
|
|
181
|
+
right: var(--sun2);
|
|
172
182
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
183
|
+
&::after {
|
|
184
|
+
right: var(--su16);
|
|
185
|
+
}
|
|
176
186
|
}
|
|
177
187
|
|
|
178
188
|
// $$ RIGHT
|
|
179
189
|
// ----------------------------------------------------------------------------
|
|
190
|
+
.d-tooltip__arrow-tippy--left-start,
|
|
191
|
+
.d-tooltip__arrow-tippy--left,
|
|
192
|
+
.d-tooltip__arrow-tippy--left-end,
|
|
180
193
|
.d-tooltip__arrow--right-top,
|
|
181
194
|
.d-tooltip__arrow--right-center,
|
|
182
195
|
.d-tooltip__arrow--right-bottom {
|
|
183
|
-
|
|
184
|
-
|
|
196
|
+
right: calc(100% + var(--su12));
|
|
197
|
+
transform: translateX(var(--sun16));
|
|
185
198
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
199
|
+
&::after {
|
|
200
|
+
right: var(--sun6);
|
|
201
|
+
border-right-width: 0;
|
|
202
|
+
border-left-color: var(--tooltip--bgc);
|
|
203
|
+
}
|
|
191
204
|
}
|
|
192
205
|
|
|
193
|
-
|
|
194
206
|
// $$ LEFT
|
|
195
207
|
// ----------------------------------------------------------------------------
|
|
208
|
+
.d-tooltip__arrow-tippy--right-start,
|
|
209
|
+
.d-tooltip__arrow-tippy--right,
|
|
210
|
+
.d-tooltip__arrow-tippy--right-end,
|
|
196
211
|
.d-tooltip__arrow--left-top,
|
|
197
212
|
.d-tooltip__arrow--left-center,
|
|
198
213
|
.d-tooltip__arrow--left-bottom {
|
|
199
|
-
|
|
200
|
-
|
|
214
|
+
left: calc(100% + var(--su12));
|
|
215
|
+
transform: translateX(var(--su16));
|
|
201
216
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
217
|
+
&::after {
|
|
218
|
+
left: var(--sun6);
|
|
219
|
+
border-right-color: var(--tooltip--bgc);
|
|
220
|
+
border-left-width: 0;
|
|
221
|
+
}
|
|
207
222
|
}
|
|
208
223
|
|
|
209
|
-
|
|
210
224
|
// $$ RIGHT / LEFT TOP
|
|
211
225
|
// ----------------------------------------------------------------------------
|
|
226
|
+
.d-tooltip__arrow-tippy--right-start,
|
|
227
|
+
.d-tooltip__arrow-tippy--left-start,
|
|
212
228
|
.d-tooltip__arrow--right-top,
|
|
213
229
|
.d-tooltip__arrow--left-top {
|
|
214
|
-
|
|
230
|
+
top: var(--sun1);
|
|
215
231
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
232
|
+
&::after {
|
|
233
|
+
top: var(--su8);
|
|
234
|
+
}
|
|
219
235
|
}
|
|
220
236
|
|
|
221
237
|
// $$ RIGHT / LEFT CENTER
|
|
222
238
|
// ----------------------------------------------------------------------------
|
|
239
|
+
.d-tooltip__arrow-tippy--right,
|
|
240
|
+
.d-tooltip__arrow-tippy--left,
|
|
223
241
|
.d-tooltip__arrow--right-center,
|
|
224
242
|
.d-tooltip__arrow--left-center {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
243
|
+
&::after {
|
|
244
|
+
top: 50%;
|
|
245
|
+
margin-top: var(--sun6);
|
|
246
|
+
}
|
|
229
247
|
}
|
|
230
248
|
|
|
231
249
|
// $$ RIGHT / LEFT BOTTOM
|
|
232
250
|
// ----------------------------------------------------------------------------
|
|
251
|
+
.d-tooltip__arrow-tippy--right-end,
|
|
252
|
+
.d-tooltip__arrow-tippy--left-end,
|
|
233
253
|
.d-tooltip__arrow--right-bottom,
|
|
234
254
|
.d-tooltip__arrow--left-bottom {
|
|
235
|
-
|
|
255
|
+
bottom: var(--sun1);
|
|
236
256
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
257
|
+
&::after {
|
|
258
|
+
bottom: var(--su8);
|
|
259
|
+
}
|
|
240
260
|
}
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
@import 'components/modal';
|
|
24
24
|
@import 'components/toast'; // Needs to come before Notice styles
|
|
25
25
|
@import 'components/notice';
|
|
26
|
+
@import 'components/popover';
|
|
26
27
|
@import 'components/radio-checkbox';
|
|
27
28
|
@import 'components/selects';
|
|
28
29
|
@import 'components/skeleton';
|
|
@@ -196,5 +196,6 @@
|
|
|
196
196
|
.d-zi-tooltip { z-index: var(--zi-tooltip) !important; }
|
|
197
197
|
.d-zi-drawer { z-index: var(--zi-drawer) !important; }
|
|
198
198
|
.d-zi-modal { z-index: var(--zi-modal) !important; }
|
|
199
|
+
.d-zi-modal-element { z-index: var(--zi-modal-element) !important; }
|
|
199
200
|
.d-zi-notification { z-index: var(--zi-notification) !important; }
|
|
200
201
|
.d-zi-unset { z-index: unset !important; }
|
|
@@ -113,6 +113,7 @@
|
|
|
113
113
|
@zi-tooltip: 400;
|
|
114
114
|
@zi-drawer: 500;
|
|
115
115
|
@zi-modal: 600;
|
|
116
|
+
@zi-modal-element: 650;
|
|
116
117
|
@zi-notification: 700;
|
|
117
118
|
|
|
118
119
|
@zi-vars: {
|
|
@@ -128,6 +129,7 @@
|
|
|
128
129
|
zi-tooltip: @zi-tooltip;
|
|
129
130
|
zi-drawer: @zi-drawer;
|
|
130
131
|
zi-modal: @zi-modal;
|
|
132
|
+
zi-modal-element: @zi-modal-element;
|
|
131
133
|
zi-notification: @zi-notification;
|
|
132
134
|
}
|
|
133
135
|
|