From 539a954b9f596799d9203e557ede9eaa994f1db6 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Thu, 9 Mar 2023 16:46:31 +0800
Subject: [PATCH] fix: fix inset not support in old browser

---
 packages/platform/src/index.html              | 15 ++++++++++---
 packages/platform/src/styles/_app.scss        |  5 ++++-
 .../platform/src/styles/components/chart.scss |  5 ++++-
 .../platform/src/styles/components/map.scss   | 15 ++++++++++---
 .../src/styles/components/status-dot.scss     |  5 ++++-
 packages/site/src/styles/routes/layout.scss   | 10 +++++++--
 packages/ui/src/styles/_common.scss           | 15 ++++++++++---
 .../src/styles/components/auto-complete.scss  |  5 ++++-
 .../ui/src/styles/components/cascader.scss    |  5 ++++-
 .../ui/src/styles/components/checkbox.scss    | 22 ++++++++++++++-----
 .../ui/src/styles/components/date-picker.scss | 10 +++++++--
 packages/ui/src/styles/components/drawer.scss |  5 ++++-
 packages/ui/src/styles/components/image.scss  | 10 +++++++--
 .../styles/components/mixins/_selectbox.scss  | 10 +++++++--
 packages/ui/src/styles/components/modal.scss  |  5 ++++-
 .../ui/src/styles/components/pagination.scss  |  5 ++++-
 .../ui/src/styles/components/popover.scss     | 10 +++++++--
 packages/ui/src/styles/components/radio.scss  | 17 +++++++++-----
 packages/ui/src/styles/components/rating.scss |  7 +++---
 packages/ui/src/styles/components/select.scss |  5 ++++-
 .../ui/src/styles/components/skeleton.scss    |  5 ++++-
 packages/ui/src/styles/components/slider.scss |  7 +++---
 .../ui/src/styles/components/spinner.scss     | 10 +++++++--
 .../ui/src/styles/components/stepper.scss     | 10 +++++++--
 packages/ui/src/styles/components/switch.scss |  7 +++---
 packages/ui/src/styles/components/table.scss  |  5 ++++-
 packages/ui/src/styles/components/tabs.scss   |  5 ++++-
 .../ui/src/styles/components/transfer.scss    |  5 ++++-
 .../ui/src/styles/components/tree-select.scss |  5 ++++-
 packages/ui/src/styles/components/tree.scss   |  5 ++++-
 packages/ui/src/styles/components/upload.scss |  5 ++++-
 31 files changed, 196 insertions(+), 59 deletions(-)

diff --git a/packages/platform/src/index.html b/packages/platform/src/index.html
index 3decd5fa..3c371910 100644
--- a/packages/platform/src/index.html
+++ b/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;
       }
diff --git a/packages/platform/src/styles/_app.scss b/packages/platform/src/styles/_app.scss
index 42da2a24..000c5df7 100644
--- a/packages/platform/src/styles/_app.scss
+++ b/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: '';
   }
 }
diff --git a/packages/platform/src/styles/components/chart.scss b/packages/platform/src/styles/components/chart.scss
index 05dfa29c..750c7b5f 100644
--- a/packages/platform/src/styles/components/chart.scss
+++ b/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;
   }
 }
diff --git a/packages/platform/src/styles/components/map.scss b/packages/platform/src/styles/components/map.scss
index b412b83a..8013db49 100644
--- a/packages/platform/src/styles/components/map.scss
+++ b/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;
diff --git a/packages/platform/src/styles/components/status-dot.scss b/packages/platform/src/styles/components/status-dot.scss
index 6accf24b..528ec81e 100644
--- a/packages/platform/src/styles/components/status-dot.scss
+++ b/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%;
diff --git a/packages/site/src/styles/routes/layout.scss b/packages/site/src/styles/routes/layout.scss
index fea99674..7c799aa9 100644
--- a/packages/site/src/styles/routes/layout.scss
+++ b/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: '';
       }
     }
diff --git a/packages/ui/src/styles/_common.scss b/packages/ui/src/styles/_common.scss
index 7879a557..471f5ba0 100644
--- a/packages/ui/src/styles/_common.scss
+++ b/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);
 }
diff --git a/packages/ui/src/styles/components/auto-complete.scss b/packages/ui/src/styles/components/auto-complete.scss
index 5138b798..8039c6f3 100644
--- a/packages/ui/src/styles/components/auto-complete.scss
+++ b/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;
diff --git a/packages/ui/src/styles/components/cascader.scss b/packages/ui/src/styles/components/cascader.scss
index 644e33bc..fb77f627 100644
--- a/packages/ui/src/styles/components/cascader.scss
+++ b/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;
diff --git a/packages/ui/src/styles/components/checkbox.scss b/packages/ui/src/styles/components/checkbox.scss
index cb88ec35..b0e54c3e 100644
--- a/packages/ui/src/styles/components/checkbox.scss
+++ b/packages/ui/src/styles/components/checkbox.scss
@@ -109,7 +109,10 @@
 
     &::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);
@@ -117,7 +120,10 @@
 
     &::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);
diff --git a/packages/ui/src/styles/components/date-picker.scss b/packages/ui/src/styles/components/date-picker.scss
index 7bed53f9..e1ccd0f0 100644
--- a/packages/ui/src/styles/components/date-picker.scss
+++ b/packages/ui/src/styles/components/date-picker.scss
@@ -99,7 +99,10 @@
     @include m(today) {
       &::after {
         position: absolute;
-        inset: 2px;
+        top: 2px;
+        right: 2px;
+        bottom: 2px;
+        left: 2px;
         content: '';
         border: 1px solid var(--#{$rd-prefix}color-primary);
       }
@@ -127,7 +130,10 @@
     @include when(between-hover) {
       &::before {
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         content: '';
         background-color: var(--#{$rd-prefix}background-color-primary);
       }
diff --git a/packages/ui/src/styles/components/drawer.scss b/packages/ui/src/styles/components/drawer.scss
index 44ddea89..0ef82d73 100644
--- a/packages/ui/src/styles/components/drawer.scss
+++ b/packages/ui/src/styles/components/drawer.scss
@@ -6,7 +6,10 @@
   @include component-footer;
 
   position: fixed;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   overflow: hidden;
   outline: none;
 
diff --git a/packages/ui/src/styles/components/image.scss b/packages/ui/src/styles/components/image.scss
index 04d15c75..bc265804 100644
--- a/packages/ui/src/styles/components/image.scss
+++ b/packages/ui/src/styles/components/image.scss
@@ -14,7 +14,10 @@
 
   @include e(actions) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,7 +58,10 @@
 
 @include b(image-preview) {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
   padding: 68px 68px 98px;
   overflow: hidden;
diff --git a/packages/ui/src/styles/components/mixins/_selectbox.scss b/packages/ui/src/styles/components/mixins/_selectbox.scss
index cb7991dc..8d3aa52c 100644
--- a/packages/ui/src/styles/components/mixins/_selectbox.scss
+++ b/packages/ui/src/styles/components/mixins/_selectbox.scss
@@ -80,7 +80,10 @@
     @include utils-input;
 
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
     min-width: 0;
     padding: 0;
@@ -97,7 +100,10 @@
 
   @include e(placeholder-wrapper) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     align-items: center;
     color: $rd-placeholder-color;
diff --git a/packages/ui/src/styles/components/modal.scss b/packages/ui/src/styles/components/modal.scss
index 2f56e128..a76a0f7f 100644
--- a/packages/ui/src/styles/components/modal.scss
+++ b/packages/ui/src/styles/components/modal.scss
@@ -6,7 +6,10 @@
   @include component-footer;
 
   position: fixed;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   overflow: hidden;
   outline: none;
 
diff --git a/packages/ui/src/styles/components/pagination.scss b/packages/ui/src/styles/components/pagination.scss
index f110cd0c..7a10f5f8 100644
--- a/packages/ui/src/styles/components/pagination.scss
+++ b/packages/ui/src/styles/components/pagination.scss
@@ -130,7 +130,10 @@
 
   @include e(ellipsis) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
diff --git a/packages/ui/src/styles/components/popover.scss b/packages/ui/src/styles/components/popover.scss
index 61fec1a7..388dae1b 100644
--- a/packages/ui/src/styles/components/popover.scss
+++ b/packages/ui/src/styles/components/popover.scss
@@ -12,7 +12,10 @@
   @include component-footer;
 
   position: fixed;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   pointer-events: none;
   outline: none;
 
@@ -166,7 +169,10 @@
 
   @include e(mask) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     pointer-events: all;
   }
 }
diff --git a/packages/ui/src/styles/components/radio.scss b/packages/ui/src/styles/components/radio.scss
index b13851e7..b9e42388 100644
--- a/packages/ui/src/styles/components/radio.scss
+++ b/packages/ui/src/styles/components/radio.scss
@@ -129,7 +129,10 @@
 
     &::before {
       position: absolute;
-      inset: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
       content: '';
       border: 1px solid var(--#{$rd-prefix}color-primary);
       border-radius: 50%;
@@ -138,7 +141,10 @@
 
     &::after {
       position: absolute;
-      inset: 4px;
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      left: 4px;
       content: '';
       background-color: var(--#{$rd-prefix}color-primary);
       border-radius: 50%;
@@ -150,10 +156,11 @@
 
   @include e(input) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1;
-    width: 100%;
-    height: 100%;
     margin: 0;
     cursor: inherit;
     border: 1px solid var(--#{$rd-prefix}color-border);
diff --git a/packages/ui/src/styles/components/rating.scss b/packages/ui/src/styles/components/rating.scss
index bf69408a..52ee4657 100644
--- a/packages/ui/src/styles/components/rating.scss
+++ b/packages/ui/src/styles/components/rating.scss
@@ -48,10 +48,11 @@
 
   @include e(input) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1;
-    width: 100%;
-    height: 100%;
     margin: 0;
     cursor: pointer;
     appearance: none;
diff --git a/packages/ui/src/styles/components/select.scss b/packages/ui/src/styles/components/select.scss
index fa4ef8bb..03966af8 100644
--- a/packages/ui/src/styles/components/select.scss
+++ b/packages/ui/src/styles/components/select.scss
@@ -112,7 +112,10 @@ $select-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;
diff --git a/packages/ui/src/styles/components/skeleton.scss b/packages/ui/src/styles/components/skeleton.scss
index 33cef415..80966067 100644
--- a/packages/ui/src/styles/components/skeleton.scss
+++ b/packages/ui/src/styles/components/skeleton.scss
@@ -11,7 +11,10 @@
 
   &::after {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1;
     content: '';
     background: linear-gradient(100deg, transparent 20%, var(--#{$rd-prefix}skeleton-background-color-wave) 50%, transparent 70%);
diff --git a/packages/ui/src/styles/components/slider.scss b/packages/ui/src/styles/components/slider.scss
index 807abaab..e1b6fda8 100644
--- a/packages/ui/src/styles/components/slider.scss
+++ b/packages/ui/src/styles/components/slider.scss
@@ -158,9 +158,10 @@
 
   @include e(input) {
     position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     padding: 0;
     margin: 0;
     overflow: hidden;
diff --git a/packages/ui/src/styles/components/spinner.scss b/packages/ui/src/styles/components/spinner.scss
index d9a9779c..c63366e4 100644
--- a/packages/ui/src/styles/components/spinner.scss
+++ b/packages/ui/src/styles/components/spinner.scss
@@ -19,7 +19,10 @@
 
 @include b(spinner) {
   position: absolute;
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: var(--#{$rd-prefix}zindex-absolute);
   display: flex;
   justify-content: center;
@@ -29,7 +32,10 @@
 
   @include m(alone) {
     position: relative;
-    inset: unset;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
     display: inline-flex;
     background-color: transparent;
   }
diff --git a/packages/ui/src/styles/components/stepper.scss b/packages/ui/src/styles/components/stepper.scss
index c1b989ac..3dd2035e 100644
--- a/packages/ui/src/styles/components/stepper.scss
+++ b/packages/ui/src/styles/components/stepper.scss
@@ -50,7 +50,10 @@
       width: 2px;
 
       &::after {
-        inset: 10px 0;
+        top: 10px;
+        right: 0;
+        bottom: 10px;
+        left: 0;
       }
     }
   }
@@ -176,7 +179,10 @@
 
     &::after {
       position: absolute;
-      inset: 0 10px;
+      top: 0;
+      right: 10px;
+      bottom: 0;
+      left: 10px;
       content: '';
       background-color: var(--#{$rd-prefix}background-color-indicator);
     }
diff --git a/packages/ui/src/styles/components/switch.scss b/packages/ui/src/styles/components/switch.scss
index 853d9006..1a5ed568 100644
--- a/packages/ui/src/styles/components/switch.scss
+++ b/packages/ui/src/styles/components/switch.scss
@@ -57,10 +57,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: pointer;
     opacity: 0;
diff --git a/packages/ui/src/styles/components/table.scss b/packages/ui/src/styles/components/table.scss
index a5cf2d2b..8ea8a2fd 100644
--- a/packages/ui/src/styles/components/table.scss
+++ b/packages/ui/src/styles/components/table.scss
@@ -370,7 +370,10 @@ $table-filter-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;
diff --git a/packages/ui/src/styles/components/tabs.scss b/packages/ui/src/styles/components/tabs.scss
index eac1bfab..eb0fe8b6 100644
--- a/packages/ui/src/styles/components/tabs.scss
+++ b/packages/ui/src/styles/components/tabs.scss
@@ -410,7 +410,10 @@
 
     &::after {
       position: absolute;
-      inset: 3px;
+      top: 3px;
+      right: 3px;
+      bottom: 3px;
+      left: 3px;
       content: '';
       background-color: var(--#{$rd-prefix}background-color);
       border-radius: var(--#{$rd-prefix}border-radius);
diff --git a/packages/ui/src/styles/components/transfer.scss b/packages/ui/src/styles/components/transfer.scss
index 6efc3873..4e7d3fdd 100644
--- a/packages/ui/src/styles/components/transfer.scss
+++ b/packages/ui/src/styles/components/transfer.scss
@@ -72,7 +72,10 @@ $transfer-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;
diff --git a/packages/ui/src/styles/components/tree-select.scss b/packages/ui/src/styles/components/tree-select.scss
index 86c09ddd..a3b8a302 100644
--- a/packages/ui/src/styles/components/tree-select.scss
+++ b/packages/ui/src/styles/components/tree-select.scss
@@ -54,7 +54,10 @@
 
   @include e(loading) {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 5;
     display: flex;
     align-items: center;
diff --git a/packages/ui/src/styles/components/tree.scss b/packages/ui/src/styles/components/tree.scss
index d10f92e9..6ca43fcb 100644
--- a/packages/ui/src/styles/components/tree.scss
+++ b/packages/ui/src/styles/components/tree.scss
@@ -128,7 +128,10 @@ $tree-option-height: 32px;
 
     &::after {
       position: absolute;
-      inset: 0 -8px;
+      top: 0;
+      right: -8px;
+      bottom: 0;
+      left: -8px;
       content: '';
     }
   }
diff --git a/packages/ui/src/styles/components/upload.scss b/packages/ui/src/styles/components/upload.scss
index da0e1ac6..2553c821 100644
--- a/packages/ui/src/styles/components/upload.scss
+++ b/packages/ui/src/styles/components/upload.scss
@@ -230,7 +230,10 @@
 
   @include e(picture-actions) {
     position: absolute;
-    inset: 8px;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    left: 8px;
     display: flex;
     align-items: center;
     justify-content: center;