fix: fix inset not support in old browser

Author: xiejay97

packages/platform/src/index.html

@@ -11,7 +11,10 @@
     <style type="text/css">
       .fp-loader {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         z-index: 9999;
         overflow: hidden;
         background: #000;
@@ -39,13 +42,19 @@
       }
 
       .fp-loader-inner::before {
-        inset: 5px;
+        top: 5px;
+        right: 5px;
+        bottom: 5px;
+        left: 5px;
         box-shadow: 0 3px 3px 0 rgb(255 228 32);
         animation: fp-loader-spin 3s linear infinite;
       }
 
       .fp-loader-inner::after {
-        inset: 15px;
+        top: 15px;
+        right: 15px;
+        bottom: 15px;
+        left: 15px;
         box-shadow: 0 3px 3px 0 rgb(61 175 255);
         animation: fp-loader-spin 1.5s linear infinite;
       }

packages/platform/src/styles/_app.scss

@@ -35,7 +35,10 @@ body {
 
   &::after {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     content: '';
   }
 }

packages/platform/src/styles/components/chart.scss

@@ -4,7 +4,10 @@
 
   @include e(container) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     overflow: hidden;
   }
 }

packages/platform/src/styles/components/map.scss

@@ -18,7 +18,10 @@
 
   @include e(container) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     overflow: hidden;
   }
 
@@ -63,11 +66,17 @@
 
   @include e(marker-cluster-ripple) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 
     div {
       position: absolute;
-      inset: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       border: 1px solid currentcolor;
       border-radius: 50%;
       animation: map-marker-cluster-ripple 3s infinite linear;

packages/platform/src/styles/components/status-dot.scss

@@ -28,7 +28,10 @@
     @include e(dot) {
       &::after {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         content: '';
         border: 1px solid var(--app-status-dot-color);
         border-radius: 50%;

packages/site/src/styles/routes/layout.scss

@@ -144,7 +144,10 @@
 
       &::after {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         content: '';
       }
     }
@@ -179,7 +182,10 @@
 
       &::after {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         content: '';
       }
     }

packages/ui/src/styles/_common.scss

@@ -1,6 +1,9 @@
 @include b(mask) {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   background-color: var(--#{$rd-prefix}mask-background-color);
 }
 
@@ -25,7 +28,10 @@
   }
 
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   pointer-events: none;
   border-radius: inherit;
   animation: wave-wave 0.4s cubic-bezier(0.08, 0.82, 0.17, 1), wave-fade-out 2s cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -34,7 +40,10 @@
 
 @include b(focus-outline) {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   pointer-events: none;
   border: 1px dashed var(--#{$rd-prefix}color-primary-lighter);
 }

packages/ui/src/styles/components/auto-complete.scss

@@ -71,7 +71,10 @@ $auto-complete-option-height: 32px;
 
   @include e(loading) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
     display: flex;
     align-items: center;

packages/ui/src/styles/components/cascader.scss

@@ -117,7 +117,10 @@ $cascader-option-height: 32px;
 
   @include e(loading) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
     display: flex;
     align-items: center;

packages/ui/src/styles/components/checkbox.scss

@@ -109,15 +109,21 @@
 
     &::before {
       position: absolute;
-      inset: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       content: '';
       border: 1px solid transparent;
       border-radius: var(--#{$rd-prefix}border-radius);
     }
 
     &::after {
       position: absolute;
-      inset: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       content: '';
       background-color: transparent;
       border-radius: var(--#{$rd-prefix}border-radius);
@@ -128,7 +134,10 @@
 
   @include e(tick) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1;
     overflow: hidden;
     border-radius: var(--#{$rd-prefix}border-radius);
@@ -159,10 +168,11 @@
 
   @include e(input) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
-    width: 100%;
-    height: 100%;
     margin: 0;
     cursor: inherit;
     border: 1px solid var(--#{$rd-prefix}color-border);