fix: fix inset not support in old browser

DevCloudFE · Mar 9, 2023 · 539a954 · 539a954
1 parent 4b188c4
commit 539a954
Show file tree

Hide file tree

Showing 31 changed files with 196 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
 }