@dialpad/dialtone 6.15.0-beta.2 → 6.15.0-beta.6

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 CHANGED
@@ -1,3 +1,36 @@
1
+ # [6.15.0-beta.6](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.5...v6.15.0-beta.6) (2022-02-17)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * add justify-content flex-end to header/footer ([6547fea](https://github.com/dialpad/dialtone/commit/6547fea38d80696629f1a50f91cd195c789607e4))
7
+
8
+ # [6.15.0-beta.5](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.4...v6.15.0-beta.5) (2022-02-16)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * popover example page issues ([574dee2](https://github.com/dialpad/dialtone/commit/574dee2fe898ac188405cc18683f9f3f6edb2076))
14
+
15
+
16
+ ### Features
17
+
18
+ * add transparent modal ([488f46a](https://github.com/dialpad/dialtone/commit/488f46a6c7995b4e67c40efb553e67fa7194412c))
19
+
20
+ # [6.15.0-beta.4](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.3...v6.15.0-beta.4) (2022-02-15)
21
+
22
+
23
+ ### Features
24
+
25
+ * popover css and documentation ([#540](https://github.com/dialpad/dialtone/issues/540)) ([2c4dc58](https://github.com/dialpad/dialtone/commit/2c4dc58404944036693816c23b69b0453f38399f))
26
+
27
+ # [6.15.0-beta.3](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.2...v6.15.0-beta.3) (2022-02-01)
28
+
29
+
30
+ ### Bug Fixes
31
+
32
+ * make z-index work on all children ([7aa3fd1](https://github.com/dialpad/dialtone/commit/7aa3fd1a54c058a5db096d72f46869506e41779c))
33
+
1
34
  # [6.15.0-beta.2](https://github.com/dialpad/dialtone/compare/v6.15.0-beta.1...v6.15.0-beta.2) (2022-02-01)
2
35
 
3
36
 
@@ -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;
@@ -1,3 +1,24 @@
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
+ // ----------------------------------------------------------------------------
1
22
  .d-popover__dialog {
2
23
  &,
3
24
  *,
@@ -6,7 +27,6 @@
6
27
  box-sizing: border-box;
7
28
  }
8
29
 
9
- z-index: var(--zi-popover);
10
30
  display: grid;
11
31
  grid-template-rows: auto 1fr;
12
32
  overflow: auto;
@@ -16,13 +36,32 @@
16
36
  box-shadow: var(--bs-card);
17
37
  }
18
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
+ z-index: var(--zi-modal-element);
45
+ }
46
+ }
47
+
48
+ // to be set on the anchor container whenever the modal dialog is opened.
49
+ .d-popover__anchor--modal-opened * {
50
+ z-index: 650;
51
+ }
52
+
53
+ // $$ DIALOG CONTENT
54
+ // ----------------------------------------------------------------------------
19
55
  .d-popover__content {
20
56
  overflow: auto;
21
57
  }
22
58
 
59
+ // $$ DIALOG HEADER / FOOTER
60
+ // ----------------------------------------------------------------------------
23
61
  .d-popover__header-footer-base {
24
62
  display: flex;
25
63
  align-items: center;
64
+ justify-content: flex-end;
26
65
  width: 100%;
27
66
  min-height: var(--size48);
28
67
  padding-top: var(--su6);
@@ -43,8 +82,3 @@
43
82
 
44
83
  border-top: var(--su1) solid var(--black-075);
45
84
  }
46
-
47
- //When modal overlay is displayed, put the popover anchor on top of it.
48
- .d-modal[aria-hidden='false'] + .d-popover > * {
49
- z-index: var(--zi-modal-element);
50
- }
@@ -1560,6 +1560,28 @@ legend .d-label {
1560
1560
  opacity: 0;
1561
1561
  will-change: visibility, z-index, opacity;
1562
1562
  }
1563
+ .d-modal--transparent {
1564
+ --modal--bgc: hsla(var(--black-900-hsl) / 85%);
1565
+ --modal-dialog--bgc: var(--white);
1566
+ --modal-dialog--fc: var(--black-700);
1567
+ --modal-header--fc: var(--black-800);
1568
+ position: fixed;
1569
+ top: 0;
1570
+ right: 0;
1571
+ bottom: 0;
1572
+ left: 0;
1573
+ z-index: var(--zi-hide);
1574
+ display: flex;
1575
+ flex-direction: column;
1576
+ align-items: center;
1577
+ justify-content: center;
1578
+ padding: var(--su32);
1579
+ background-color: var(--d-bgc-transparent);
1580
+ backface-visibility: hidden;
1581
+ visibility: hidden;
1582
+ opacity: 0;
1583
+ will-change: visibility, z-index, opacity;
1584
+ }
1563
1585
  .d-modal__dialog {
1564
1586
  position: relative;
1565
1587
  z-index: var(--zi-hide);
@@ -1584,7 +1606,9 @@ legend .d-label {
1584
1606
  margin-top: 1.6rem !important;
1585
1607
  }
1586
1608
  .d-modal[aria-hidden='false'],
1587
- .d-modal[aria-hidden='false'] .d-modal__dialog {
1609
+ .d-modal[aria-hidden='false'] .d-modal__dialog,
1610
+ .d-modal--transparent[aria-hidden='false'],
1611
+ .d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
1588
1612
  z-index: var(--zi-modal);
1589
1613
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
1590
1614
  visibility: visible;
@@ -1939,7 +1963,6 @@ legend .d-label {
1939
1963
  --notice--fc: var(--fc-dark);
1940
1964
  }
1941
1965
  .d-popover__dialog {
1942
- z-index: var(--zi-popover);
1943
1966
  display: grid;
1944
1967
  grid-template-rows: auto 1fr;
1945
1968
  overflow: auto;
@@ -1954,12 +1977,22 @@ legend .d-label {
1954
1977
  .d-popover__dialog *::after {
1955
1978
  box-sizing: border-box;
1956
1979
  }
1980
+ .d-popover__dialog--modal {
1981
+ z-index: var(--zi-modal-element);
1982
+ }
1983
+ .d-popover__dialog--modal * {
1984
+ z-index: var(--zi-modal-element);
1985
+ }
1986
+ .d-popover__anchor--modal-opened * {
1987
+ z-index: 650;
1988
+ }
1957
1989
  .d-popover__content {
1958
1990
  overflow: auto;
1959
1991
  }
1960
1992
  .d-popover__header-footer-base {
1961
1993
  display: flex;
1962
1994
  align-items: center;
1995
+ justify-content: flex-end;
1963
1996
  width: 100%;
1964
1997
  min-height: var(--size48);
1965
1998
  padding-top: var(--su6);
@@ -1971,6 +2004,7 @@ legend .d-label {
1971
2004
  .d-popover__header {
1972
2005
  display: flex;
1973
2006
  align-items: center;
2007
+ justify-content: flex-end;
1974
2008
  width: 100%;
1975
2009
  min-height: var(--size48);
1976
2010
  padding-top: var(--su6);
@@ -1983,6 +2017,7 @@ legend .d-label {
1983
2017
  .d-popover__footer {
1984
2018
  display: flex;
1985
2019
  align-items: center;
2020
+ justify-content: flex-end;
1986
2021
  width: 100%;
1987
2022
  min-height: var(--size48);
1988
2023
  padding-top: var(--su6);
@@ -1992,9 +2027,6 @@ legend .d-label {
1992
2027
  font-size: var(--fs16);
1993
2028
  border-top: var(--su1) solid var(--black-075);
1994
2029
  }
1995
- .d-modal[aria-hidden='false'] + .d-popover > * {
1996
- z-index: var(--zi-modal-element);
1997
- }
1998
2030
  .d-checkbox,
1999
2031
  .d-radio {
2000
2032
  --check-radio--color: var(--primary-color);
@@ -19995,6 +20027,28 @@ body.theme-dark {
19995
20027
  opacity: 0;
19996
20028
  will-change: visibility, z-index, opacity;
19997
20029
  }
20030
+ .sm\:d-modal--transparent {
20031
+ --modal--bgc: hsla(var(--black-900-hsl) / 85%);
20032
+ --modal-dialog--bgc: var(--white);
20033
+ --modal-dialog--fc: var(--black-700);
20034
+ --modal-header--fc: var(--black-800);
20035
+ position: fixed;
20036
+ top: 0;
20037
+ right: 0;
20038
+ bottom: 0;
20039
+ left: 0;
20040
+ z-index: var(--zi-hide);
20041
+ display: flex;
20042
+ flex-direction: column;
20043
+ align-items: center;
20044
+ justify-content: center;
20045
+ padding: var(--su32);
20046
+ background-color: var(--d-bgc-transparent);
20047
+ backface-visibility: hidden;
20048
+ visibility: hidden;
20049
+ opacity: 0;
20050
+ will-change: visibility, z-index, opacity;
20051
+ }
19998
20052
  .sm\:d-modal__dialog {
19999
20053
  position: relative;
20000
20054
  z-index: var(--zi-hide);
@@ -20019,7 +20073,9 @@ body.theme-dark {
20019
20073
  margin-top: 1.6rem !important;
20020
20074
  }
20021
20075
  .sm\:d-modal[aria-hidden='false'],
20022
- .d-modal[aria-hidden='false'] .d-modal__dialog {
20076
+ .d-modal[aria-hidden='false'] .d-modal__dialog,
20077
+ .d-modal--transparent[aria-hidden='false'],
20078
+ .d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
20023
20079
  z-index: var(--zi-modal);
20024
20080
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
20025
20081
  visibility: visible;
@@ -20130,9 +20186,6 @@ body.theme-dark {
20130
20186
  .sm\:d-modal__dialog--animate-out {
20131
20187
  transition: none !important;
20132
20188
  }
20133
- .sm\:d-modal[aria-hidden='false'] + .d-popover > * {
20134
- z-index: var(--zi-modal-element);
20135
- }
20136
20189
  .sm\:d-m0 {
20137
20190
  margin: 0 !important;
20138
20191
  }
@@ -21110,6 +21163,28 @@ body.theme-dark {
21110
21163
  opacity: 0;
21111
21164
  will-change: visibility, z-index, opacity;
21112
21165
  }
21166
+ .md\:d-modal--transparent {
21167
+ --modal--bgc: hsla(var(--black-900-hsl) / 85%);
21168
+ --modal-dialog--bgc: var(--white);
21169
+ --modal-dialog--fc: var(--black-700);
21170
+ --modal-header--fc: var(--black-800);
21171
+ position: fixed;
21172
+ top: 0;
21173
+ right: 0;
21174
+ bottom: 0;
21175
+ left: 0;
21176
+ z-index: var(--zi-hide);
21177
+ display: flex;
21178
+ flex-direction: column;
21179
+ align-items: center;
21180
+ justify-content: center;
21181
+ padding: var(--su32);
21182
+ background-color: var(--d-bgc-transparent);
21183
+ backface-visibility: hidden;
21184
+ visibility: hidden;
21185
+ opacity: 0;
21186
+ will-change: visibility, z-index, opacity;
21187
+ }
21113
21188
  .md\:d-modal__dialog {
21114
21189
  position: relative;
21115
21190
  z-index: var(--zi-hide);
@@ -21134,7 +21209,9 @@ body.theme-dark {
21134
21209
  margin-top: 1.6rem !important;
21135
21210
  }
21136
21211
  .md\:d-modal[aria-hidden='false'],
21137
- .d-modal[aria-hidden='false'] .d-modal__dialog {
21212
+ .d-modal[aria-hidden='false'] .d-modal__dialog,
21213
+ .d-modal--transparent[aria-hidden='false'],
21214
+ .d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
21138
21215
  z-index: var(--zi-modal);
21139
21216
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
21140
21217
  visibility: visible;
@@ -21245,9 +21322,6 @@ body.theme-dark {
21245
21322
  .md\:d-modal__dialog--animate-out {
21246
21323
  transition: none !important;
21247
21324
  }
21248
- .md\:d-modal[aria-hidden='false'] + .d-popover > * {
21249
- z-index: var(--zi-modal-element);
21250
- }
21251
21325
  .md\:d-m0 {
21252
21326
  margin: 0 !important;
21253
21327
  }
@@ -22225,6 +22299,28 @@ body.theme-dark {
22225
22299
  opacity: 0;
22226
22300
  will-change: visibility, z-index, opacity;
22227
22301
  }
22302
+ .lg\:d-modal--transparent {
22303
+ --modal--bgc: hsla(var(--black-900-hsl) / 85%);
22304
+ --modal-dialog--bgc: var(--white);
22305
+ --modal-dialog--fc: var(--black-700);
22306
+ --modal-header--fc: var(--black-800);
22307
+ position: fixed;
22308
+ top: 0;
22309
+ right: 0;
22310
+ bottom: 0;
22311
+ left: 0;
22312
+ z-index: var(--zi-hide);
22313
+ display: flex;
22314
+ flex-direction: column;
22315
+ align-items: center;
22316
+ justify-content: center;
22317
+ padding: var(--su32);
22318
+ background-color: var(--d-bgc-transparent);
22319
+ backface-visibility: hidden;
22320
+ visibility: hidden;
22321
+ opacity: 0;
22322
+ will-change: visibility, z-index, opacity;
22323
+ }
22228
22324
  .lg\:d-modal__dialog {
22229
22325
  position: relative;
22230
22326
  z-index: var(--zi-hide);
@@ -22249,7 +22345,9 @@ body.theme-dark {
22249
22345
  margin-top: 1.6rem !important;
22250
22346
  }
22251
22347
  .lg\:d-modal[aria-hidden='false'],
22252
- .d-modal[aria-hidden='false'] .d-modal__dialog {
22348
+ .d-modal[aria-hidden='false'] .d-modal__dialog,
22349
+ .d-modal--transparent[aria-hidden='false'],
22350
+ .d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
22253
22351
  z-index: var(--zi-modal);
22254
22352
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
22255
22353
  visibility: visible;
@@ -22360,9 +22458,6 @@ body.theme-dark {
22360
22458
  .lg\:d-modal__dialog--animate-out {
22361
22459
  transition: none !important;
22362
22460
  }
22363
- .lg\:d-modal[aria-hidden='false'] + .d-popover > * {
22364
- z-index: var(--zi-modal-element);
22365
- }
22366
22461
  .lg\:d-m0 {
22367
22462
  margin: 0 !important;
22368
22463
  }
@@ -23340,6 +23435,28 @@ body.theme-dark {
23340
23435
  opacity: 0;
23341
23436
  will-change: visibility, z-index, opacity;
23342
23437
  }
23438
+ .xl\:d-modal--transparent {
23439
+ --modal--bgc: hsla(var(--black-900-hsl) / 85%);
23440
+ --modal-dialog--bgc: var(--white);
23441
+ --modal-dialog--fc: var(--black-700);
23442
+ --modal-header--fc: var(--black-800);
23443
+ position: fixed;
23444
+ top: 0;
23445
+ right: 0;
23446
+ bottom: 0;
23447
+ left: 0;
23448
+ z-index: var(--zi-hide);
23449
+ display: flex;
23450
+ flex-direction: column;
23451
+ align-items: center;
23452
+ justify-content: center;
23453
+ padding: var(--su32);
23454
+ background-color: var(--d-bgc-transparent);
23455
+ backface-visibility: hidden;
23456
+ visibility: hidden;
23457
+ opacity: 0;
23458
+ will-change: visibility, z-index, opacity;
23459
+ }
23343
23460
  .xl\:d-modal__dialog {
23344
23461
  position: relative;
23345
23462
  z-index: var(--zi-hide);
@@ -23364,7 +23481,9 @@ body.theme-dark {
23364
23481
  margin-top: 1.6rem !important;
23365
23482
  }
23366
23483
  .xl\:d-modal[aria-hidden='false'],
23367
- .d-modal[aria-hidden='false'] .d-modal__dialog {
23484
+ .d-modal[aria-hidden='false'] .d-modal__dialog,
23485
+ .d-modal--transparent[aria-hidden='false'],
23486
+ .d-modal--transparent[aria-hidden='false'] .d-modal__dialog {
23368
23487
  z-index: var(--zi-modal);
23369
23488
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
23370
23489
  visibility: visible;
@@ -23475,9 +23594,6 @@ body.theme-dark {
23475
23594
  .xl\:d-modal__dialog--animate-out {
23476
23595
  transition: none !important;
23477
23596
  }
23478
- .xl\:d-modal[aria-hidden='false'] + .d-popover > * {
23479
- z-index: var(--zi-modal-element);
23480
- }
23481
23597
  .xl\:d-m0 {
23482
23598
  margin: 0 !important;
23483
23599
  }