@progressio_resources/gravity-design-system 1.0.8 → 1.0.10

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 (24) hide show
  1. package/esm2020/lib/components/gravity-button/gravity-button.component.mjs +3 -3
  2. package/esm2020/lib/components/gravity-calendar/gravity-calendar.component.mjs +4 -3
  3. package/esm2020/lib/components/gravity-dialog/gravity-dialog.component.mjs +22 -0
  4. package/esm2020/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +4 -3
  5. package/esm2020/lib/components/gravity-icon/gravity-icon.component.mjs +2 -2
  6. package/esm2020/lib/components/gravity-text-field/gravity-text-field.component.mjs +9 -3
  7. package/esm2020/lib/gravity-design-system.module.mjs +6 -1
  8. package/esm2020/lib/services/gravity-dialog-manager.service.mjs +20 -0
  9. package/esm2020/public-api.mjs +4 -1
  10. package/fesm2015/progressio_resources-gravity-design-system.mjs +61 -17
  11. package/fesm2015/progressio_resources-gravity-design-system.mjs.map +1 -1
  12. package/fesm2020/progressio_resources-gravity-design-system.mjs +61 -17
  13. package/fesm2020/progressio_resources-gravity-design-system.mjs.map +1 -1
  14. package/lib/components/gravity-dialog/gravity-dialog.component.d.ts +17 -0
  15. package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +2 -0
  16. package/lib/gravity-design-system.module.d.ts +15 -14
  17. package/lib/services/gravity-dialog-manager.service.d.ts +10 -0
  18. package/package.json +2 -1
  19. package/public-api.d.ts +2 -0
  20. package/src/lib/styles/_datepicker.scss +2 -2
  21. package/src/lib/styles/gravity-design-system.scss +1 -0
  22. package/src/lib/styles/overwrite/bootstrap/_bootstrap-export.scss +2 -0
  23. package/src/lib/styles/overwrite/bootstrap/_bootstrap.scss +7 -0
  24. package/src/lib/styles/overwrite/bootstrap/_modal.scss +115 -0
package/src/lib/styles/_datepicker.scss CHANGED
@@ -12,8 +12,8 @@ ngb-datepicker.gravity-datepicker-dialog {
12
12
  border-top-left-radius: $border-radius-system;
13
13
  border-top-right-radius: $border-radius-system;
14
14
  color: var(--on-bg-calendar-nav-primary);
15
- height: 30px;
16
- min-width: 264px;
15
+ height: 50px;
16
+ min-width: 284px;
17
17
  padding: 10px;
18
18
 
19
19
  ngb-datepicker-navigation {
package/src/lib/styles/gravity-design-system.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @import "./fundamentals/colors/tokens/hero.tokens";
2
2
  @import "./fundamentals/typography/hero.typography";
3
+ @import "./overwrite/bootstrap/bootstrap-export";
3
4
  @import "./overwrite/pretty-checkbox/pretty-checkbox.scss";
4
5
  @import "./card_highlight";
5
6
  @import "./datepicker";
package/src/lib/styles/overwrite/bootstrap/_bootstrap-export.scss ADDED
@@ -0,0 +1,2 @@
1
+ @import "bootstrap";
2
+ @import "modal";
package/src/lib/styles/overwrite/bootstrap/_bootstrap.scss ADDED
@@ -0,0 +1,7 @@
1
+ *, *::before, *::after {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ body {
6
+ -webkit-text-size-adjust: 100%;
7
+ }
package/src/lib/styles/overwrite/bootstrap/_modal.scss ADDED
@@ -0,0 +1,115 @@
1
+ @import "../../shared";
2
+
3
+ $modal-margin: 3.5rem;
4
+
5
+ .modal {
6
+ display: block;
7
+ height: 100%;
8
+ left: 0;
9
+ outline: 0;
10
+ overflow-x: hidden;
11
+ overflow-y: auto;
12
+ position: fixed;
13
+ top: 0;
14
+ width: 100%;
15
+ z-index: 1055;
16
+ }
17
+
18
+ .modal-dialog {
19
+ margin: $modal-margin auto;
20
+ position: relative;
21
+ max-width: 40rem;
22
+ pointer-events: none;
23
+ width: auto;
24
+
25
+ .modal.fade & {
26
+ transform: translate(0, -2rem);
27
+ transition: transform .3s ease-out;
28
+ }
29
+
30
+ .modal.show & {
31
+ transform: none;
32
+ }
33
+ }
34
+
35
+ .modal-dialog-scrollable {
36
+ height: calc(100% - $modal-margin * 2);
37
+
38
+ .modal-content {
39
+ max-height: 100%;
40
+ overflow: hidden;
41
+ }
42
+
43
+ .modal-body {
44
+ overflow-y: auto;
45
+ }
46
+ }
47
+
48
+ .modal-dialog-centered {
49
+ align-items: center;
50
+ display: flex;
51
+ min-height: calc(100% - $modal-margin * 2);
52
+ }
53
+
54
+ .modal-fullscreen {
55
+ height: 100%;
56
+ margin: 0;
57
+ max-width: 100vw;
58
+ width: 100vw;
59
+
60
+ .modal-content {
61
+ border-radius: 0;
62
+ height: 100%;
63
+ }
64
+
65
+ .modal-header,
66
+ .modal-footer {
67
+ border-radius: 0;
68
+ }
69
+
70
+ .modal-body {
71
+ overflow-y: auto;
72
+ }
73
+ }
74
+
75
+ .modal-content {
76
+ background-clip: padding-box;
77
+ background-color: var(--bg-dialog-primary);
78
+ border-radius: $border-radius-system;
79
+ color: var(--text-primary);
80
+ display: flex;
81
+ flex-direction: column;
82
+ outline: 0;
83
+ pointer-events: auto;
84
+ position: relative;
85
+ width: 100%;
86
+ }
87
+
88
+ .modal-backdrop {
89
+ background-color: var(--surface-secondary);
90
+ height: 100vh;
91
+ left: 0;
92
+ position: fixed;
93
+ top: 0;
94
+ width: 100vw;
95
+
96
+ &.fade {
97
+ opacity: 0;
98
+ }
99
+
100
+ &.show {
101
+ opacity: .6;
102
+ }
103
+ }
104
+
105
+ .fade {
106
+ transition: opacity 0.15s linear;
107
+
108
+ @media (prefers-reduced-motion: reduce) {
109
+ transition: none;
110
+ }
111
+
112
+ &:not(.show) {
113
+ opacity: 0;
114
+ }
115
+ }