@progressio_resources/gravity-design-system 3.7.11 → 3.8.1

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 (28) hide show
  1. package/esm2022/lib/components/gravity-avatar-stack/gravity-avatar-stack.component.mjs +3 -3
  2. package/esm2022/lib/components/gravity-backdrop/gravity-backdrop.component.mjs +2 -2
  3. package/esm2022/lib/components/gravity-calendar-v2/gravity-calendar-v2.component.mjs +2 -2
  4. package/esm2022/lib/components/gravity-currency/gravity-currency.component.mjs +2 -2
  5. package/esm2022/lib/components/gravity-currency-dropdown-short/gravity-currency-dropdown-short.component.mjs +3 -3
  6. package/esm2022/lib/components/gravity-date-picker/gravity-date-picker.component.mjs +2 -2
  7. package/esm2022/lib/components/gravity-detail-container/gravity-detail-container.component.mjs +2 -2
  8. package/esm2022/lib/components/gravity-dropdown-list/gravity-dropdown-list.component.mjs +2 -2
  9. package/esm2022/lib/components/gravity-dropdown-list-display/gravity-dropdown-list-display.component.mjs +3 -3
  10. package/esm2022/lib/components/gravity-icon-button/gravity-icon-button.component.mjs +3 -3
  11. package/esm2022/lib/components/gravity-modal/gravity-modal.component.mjs +2 -2
  12. package/esm2022/lib/components/gravity-notification-instant/gravity-notification-instant-container.component.mjs +2 -2
  13. package/esm2022/lib/components/gravity-push-notifications/gravity-push-notifications.component.mjs +2 -2
  14. package/esm2022/lib/components/gravity-stepper/gravity-stepper.component.mjs +2 -2
  15. package/esm2022/lib/components/gravity-text-field-amount-only/gravity-text-field-amount-only.component.mjs +2 -2
  16. package/esm2022/lib/layout/gravity-menu/gravity-menu.component.mjs +4 -3
  17. package/esm2022/lib/vendor/gravity-tooltip/gravity-tooltip.component.mjs +2 -2
  18. package/fesm2022/progressio_resources-gravity-design-system.mjs +35 -34
  19. package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
  20. package/package.json +1 -1
  21. package/src/lib/styles/components/_datepicker-v2.scss +3 -1
  22. package/src/lib/styles/components/_datepicker.scss +4 -3
  23. package/src/lib/styles/components/_offcanvas.scss +3 -5
  24. package/src/lib/styles/components/_tables.scss +3 -2
  25. package/src/lib/styles/foundations/z-index/_z-index.scss +10 -0
  26. package/src/lib/styles/gravity-design-system.scss +6 -5
  27. package/src/lib/styles/overwrite/bootstrap/_modal.scss +3 -1
  28. package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass +3 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progressio_resources/gravity-design-system",
3
3
  "description": "Gravity Design System",
4
- "version": "3.7.11",
4
+ "version": "3.8.1",
5
5
  "license": "SEE LICENSE IN LIBRARY-LICENSE",
6
6
  "peerDependencies": {
7
7
  "@angular/common": "^16.2.12",
@@ -1,6 +1,8 @@
1
+ @import "../foundations/z-index/z-index";
2
+
1
3
  gt-daterangepicker-container, gt-datepicker-container {
2
4
  cursor: default;
3
- z-index: 1;
5
+ z-index: $z-index-content;
4
6
  }
5
7
 
6
8
  gt-daterangepicker-inline-container, gt-datepicker-inline-container {
@@ -1,12 +1,13 @@
1
- @import "../foundations/typography/hero.typography";
1
+ @import "../shared";
2
+ @import "../foundations/z-index/z-index";
2
3
  @import "../foundations/spacing/spacing";
4
+ @import "../foundations/typography/hero.typography";
3
5
  @import "../foundations/border-radius/hero.border-radius";
4
- @import "../shared";
5
6
 
6
7
  $datepicker-min-width: 15rem;
7
8
 
8
9
  bs-datepicker-container {
9
- z-index: 1;
10
+ z-index: $z-index-content;
10
11
 
11
12
  .bs-datepicker-container {
12
13
  padding: 0;
@@ -1,8 +1,7 @@
1
1
  @use "../foundations/breakpoints/_breakpoints.scss" as br;
2
- @import "../foundations/elevation/hero.elevation";
3
2
  @import "../foundations/spacing/spacing";
4
-
5
- $z-index: 1040;
3
+ @import "../foundations/z-index/z-index";
4
+ @import "../foundations/elevation/hero.elevation";
6
5
 
7
6
  .fade {
8
7
  transition: opacity .15s linear;
@@ -14,7 +13,6 @@ $z-index: 1040;
14
13
  left: 0;
15
14
  position: fixed;
16
15
  top: 0;
17
- z-index: $z-index;
18
16
  width: 100vw;
19
17
 
20
18
  &.fade {
@@ -39,9 +37,9 @@ $z-index: 1040;
39
37
  position: fixed;
40
38
  right: 0;
41
39
  top: 0;
40
+ z-index: $z-index-overlay;
42
41
  transform: translateX(100%);
43
42
  transition: transform .3s ease-in-out;
44
- z-index: $z-index;
45
43
  background-color: var(--surface-secondary);
46
44
  width: 480px !important;
47
45
 
@@ -1,6 +1,7 @@
1
1
  @import "./link";
2
- @import "../foundations/border-radius/hero.border-radius";
2
+ @import "../foundations/z-index/z-index";
3
3
  @import "../foundations/typography/hero.typography";
4
+ @import "../foundations/border-radius/hero.border-radius";
4
5
 
5
6
  .table-container.xl, .table-container.lg {
6
7
  table {
@@ -229,7 +230,7 @@
229
230
  right: 0;
230
231
  top: 3rem;
231
232
  width: 12rem;
232
- z-index: 1;
233
+ z-index: $z-index-content;
233
234
 
234
235
  &:not(.open) {
235
236
  display: none;
@@ -0,0 +1,10 @@
1
+ // -----------------------------------------------------------------------------
2
+ // Z-INDEX DESIGN TOKENS
3
+ // -----------------------------------------------------------------------------
4
+
5
+ $z-index-base: 0; // Fallback
6
+ $z-index-content: 1; // Standard
7
+ $z-index-elevated: 5; // Elevated
8
+ $z-index-overlay: 10; // Overlays
9
+ $z-index-highest: 100; // Highest
10
+ $z-index-topmost: 1000; // Emergency
@@ -2,18 +2,19 @@
2
2
  @import "./shared";
3
3
 
4
4
  //Components
5
- @import "./components/card_highlight";
6
- @import "./components/datepicker";
7
- @import "./components/datepicker-v2";
8
5
  @import "./components/link";
6
+ @import "./components/tables";
9
7
  @import "./components/offcanvas";
8
+ @import "./components/datepicker";
10
9
  @import "./components/scroll_bar";
11
- @import "./components/tables";
10
+ @import "./components/datepicker-v2";
11
+ @import "./components/card_highlight";
12
12
 
13
13
  //Foundations
14
- @import "./foundations/breakpoints/breakpoints";
15
14
  @import "./foundations/grids/grids";
15
+ @import "./foundations/z-index/z-index";
16
16
  @import "./foundations/spacing/spacing";
17
+ @import "./foundations/breakpoints/breakpoints";
17
18
 
18
19
  //Overwrite
19
20
  @import "./overwrite/bootstrap/bootstrap-export";
@@ -1,3 +1,4 @@
1
+ @import "../../foundations/z-index/z-index";
1
2
  @import "../../foundations/border-radius/hero.border-radius";
2
3
 
3
4
  $modal-margin: 3.5rem;
@@ -12,7 +13,7 @@ $modal-margin: 3.5rem;
12
13
  position: fixed;
13
14
  top: 0;
14
15
  width: 100%;
15
- z-index: 1055;
16
+ z-index: $z-index-overlay;
16
17
  }
17
18
 
18
19
  .modal-dialog {
@@ -121,6 +122,7 @@ $modal-margin: 3.5rem;
121
122
  }
122
123
 
123
124
  .modal-backdrop {
125
+ z-index: $z-index-overlay !important;
124
126
  background-color: var(--backdrop-primary);
125
127
  height: 100vh;
126
128
  left: 0;
@@ -1,6 +1,8 @@
1
+ @import "../../styles/foundations/z-index/z-index"
2
+
1
3
  \:host
2
4
  position: absolute
3
- z-index: 1000
5
+ z-index: $z-index-elevated
4
6
  display: block
5
7
  opacity: 0
6
8
  -webkit-transition: opacity 300ms