feat: add css vars customization for content box-shadow

Author: MichaelGitArt

src/components/GDialogContent.vue

@@ -94,8 +94,6 @@ export default defineComponent({
       return '0'
     })
 
-    // const computedBorderRadius = computed(() => convertToUnit(props.borderRadius))
-
     return {
       styles,
       classes,
@@ -112,20 +110,23 @@ export default defineComponent({
 
   --content-bg: var(--g-dialog-content-bg, #fff);
   --content-border-radius: var(--g-dialog-content-border-radius, 4px);
+  --content-shadow:
+    var(
+      --g-dialog-content-shadow,
+      0 11px 15px -7px rgb(0 0 0 / 20%),
+      0 24px 38px 3px rgb(0 0 0 / 14%),
+      0 9px 46px 8px rgb(0 0 0 / 12%)
+    );
 
   pointer-events: auto;
   overflow-y: auto;
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   width: 100%;
-  z-index: inherit;
   background: v-bind('computedBackground');
   border-radius: v-bind('computedBorderRadius');
 
   &:not(#{$dialog}--depressed) {
-    box-shadow:
-      0 11px 15px -7px rgb(0 0 0 / 20%),
-      0 24px 38px 3px rgb(0 0 0 / 14%),
-      0 9px 46px 8px rgb(0 0 0 / 12%);
+    box-shadow: var(--content-shadow)
   }
 
   &:not(#{$dialog}--fullscreen) {