@gcsa/console-styles 0.1.4 → 0.1.5

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 (3) hide show
  1. package/dist/console-ui.css +32 -4
  2. package/package.json +1 -1
  3. package/src/console-ui.css +32 -4
package/dist/console-ui.css CHANGED
@@ -1087,6 +1087,9 @@
1087
1087
  }
1088
1088
 
1089
1089
  .gcsa-table-wrap {
1090
+ position: relative;
1091
+ z-index: 0;
1092
+ isolation: isolate;
1090
1093
  overflow-x: auto;
1091
1094
  border: 1px solid var(--gcsa-color-border-subtle);
1092
1095
  border-radius: var(--gcsa-radius-md);
@@ -3363,6 +3366,8 @@
3363
3366
  .gcsa-modal-portal {
3364
3367
  position: fixed;
3365
3368
  inset: 0;
3369
+ z-index: var(--gcsa-z-modal);
3370
+ isolation: isolate;
3366
3371
  pointer-events: none;
3367
3372
  }
3368
3373
 
@@ -3370,7 +3375,7 @@
3370
3375
  position: fixed;
3371
3376
  inset: 0;
3372
3377
  background: var(--gcsa-color-scrim);
3373
- z-index: var(--gcsa-z-modal);
3378
+ z-index: 0;
3374
3379
  animation-duration: var(--gcsa-motion-modal);
3375
3380
  animation-timing-function: var(--gcsa-ease-modal);
3376
3381
  animation-fill-mode: both;
@@ -3393,7 +3398,7 @@
3393
3398
  .gcsa-modal__positioner {
3394
3399
  position: fixed;
3395
3400
  inset: 0;
3396
- z-index: calc(var(--gcsa-z-modal) + 1);
3401
+ z-index: 1;
3397
3402
  display: flex;
3398
3403
  align-items: center;
3399
3404
  justify-content: center;
@@ -3612,7 +3617,7 @@
3612
3617
  position: fixed;
3613
3618
  inset: 0;
3614
3619
  background: var(--gcsa-color-scrim);
3615
- z-index: var(--gcsa-z-modal);
3620
+ z-index: 0;
3616
3621
  animation-duration: var(--gcsa-motion-modal);
3617
3622
  animation-timing-function: var(--gcsa-ease-modal);
3618
3623
  animation-fill-mode: both;
@@ -3635,7 +3640,7 @@
3635
3640
  .gcsa-drawer__positioner {
3636
3641
  position: fixed;
3637
3642
  inset: 0;
3638
- z-index: calc(var(--gcsa-z-modal) + 1);
3643
+ z-index: 1;
3639
3644
  display: flex;
3640
3645
  pointer-events: none;
3641
3646
  }
@@ -3938,6 +3943,29 @@
3938
3943
  justify-content: flex-end;
3939
3944
  }
3940
3945
 
3946
+ /* Side nav drawer — panel flush to viewport; inner shell supplies content inset */
3947
+ .gcsa-drawer-nav.gcsa-drawer__panel {
3948
+ height: 100dvh;
3949
+ min-height: 100dvh;
3950
+ max-height: 100dvh;
3951
+ }
3952
+
3953
+ .gcsa-drawer-nav.gcsa-drawer__panel--left,
3954
+ .gcsa-drawer-nav.gcsa-drawer__panel--right {
3955
+ width: min(var(--gcsa-drawer-nav-width, var(--gcsa-drawer-width, 280px)), 100%);
3956
+ max-width: 100%;
3957
+ }
3958
+
3959
+ .gcsa-drawer-nav.gcsa-drawer__panel > .gcsa-drawer__body {
3960
+ display: flex;
3961
+ flex-direction: column;
3962
+ height: 100%;
3963
+ min-height: 0;
3964
+ padding: 0;
3965
+ overflow: hidden;
3966
+ background: transparent;
3967
+ }
3968
+
3941
3969
  .gcsa-tabs {
3942
3970
  color: var(--gcsa-color-text);
3943
3971
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gcsa/console-styles",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "GCSA console component styles",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
package/src/console-ui.css CHANGED
@@ -710,6 +710,9 @@
710
710
  }
711
711
 
712
712
  .gcsa-table-wrap {
713
+ position: relative;
714
+ z-index: 0;
715
+ isolation: isolate;
713
716
  overflow-x: auto;
714
717
  border: 1px solid var(--gcsa-color-border-subtle);
715
718
  border-radius: var(--gcsa-radius-md);
@@ -2986,6 +2989,8 @@
2986
2989
  .gcsa-modal-portal {
2987
2990
  position: fixed;
2988
2991
  inset: 0;
2992
+ z-index: var(--gcsa-z-modal);
2993
+ isolation: isolate;
2989
2994
  pointer-events: none;
2990
2995
  }
2991
2996
 
@@ -2993,7 +2998,7 @@
2993
2998
  position: fixed;
2994
2999
  inset: 0;
2995
3000
  background: var(--gcsa-color-scrim);
2996
- z-index: var(--gcsa-z-modal);
3001
+ z-index: 0;
2997
3002
  animation-duration: var(--gcsa-motion-modal);
2998
3003
  animation-timing-function: var(--gcsa-ease-modal);
2999
3004
  animation-fill-mode: both;
@@ -3016,7 +3021,7 @@
3016
3021
  .gcsa-modal__positioner {
3017
3022
  position: fixed;
3018
3023
  inset: 0;
3019
- z-index: calc(var(--gcsa-z-modal) + 1);
3024
+ z-index: 1;
3020
3025
  display: flex;
3021
3026
  align-items: center;
3022
3027
  justify-content: center;
@@ -3235,7 +3240,7 @@
3235
3240
  position: fixed;
3236
3241
  inset: 0;
3237
3242
  background: var(--gcsa-color-scrim);
3238
- z-index: var(--gcsa-z-modal);
3243
+ z-index: 0;
3239
3244
  animation-duration: var(--gcsa-motion-modal);
3240
3245
  animation-timing-function: var(--gcsa-ease-modal);
3241
3246
  animation-fill-mode: both;
@@ -3258,7 +3263,7 @@
3258
3263
  .gcsa-drawer__positioner {
3259
3264
  position: fixed;
3260
3265
  inset: 0;
3261
- z-index: calc(var(--gcsa-z-modal) + 1);
3266
+ z-index: 1;
3262
3267
  display: flex;
3263
3268
  pointer-events: none;
3264
3269
  }
@@ -3561,6 +3566,29 @@
3561
3566
  justify-content: flex-end;
3562
3567
  }
3563
3568
 
3569
+ /* Side nav drawer — panel flush to viewport; inner shell supplies content inset */
3570
+ .gcsa-drawer-nav.gcsa-drawer__panel {
3571
+ height: 100dvh;
3572
+ min-height: 100dvh;
3573
+ max-height: 100dvh;
3574
+ }
3575
+
3576
+ .gcsa-drawer-nav.gcsa-drawer__panel--left,
3577
+ .gcsa-drawer-nav.gcsa-drawer__panel--right {
3578
+ width: min(var(--gcsa-drawer-nav-width, var(--gcsa-drawer-width, 280px)), 100%);
3579
+ max-width: 100%;
3580
+ }
3581
+
3582
+ .gcsa-drawer-nav.gcsa-drawer__panel > .gcsa-drawer__body {
3583
+ display: flex;
3584
+ flex-direction: column;
3585
+ height: 100%;
3586
+ min-height: 0;
3587
+ padding: 0;
3588
+ overflow: hidden;
3589
+ background: transparent;
3590
+ }
3591
+
3564
3592
  .gcsa-tabs {
3565
3593
  color: var(--gcsa-color-text);
3566
3594
  }