fix(platform): fix gap not support in old browser

DevCloudFE · Mar 10, 2023 · a922ff7 · a922ff7
1 parent 0785852
commit a922ff7
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git a/packages/platform/src/app/routes/exception/Exception.module.scss b/packages/platform/src/app/routes/exception/Exception.module.scss
@@ -1,9 +1,10 @@
 @import '~styles/module';
 
 @include b(exception) {
+  @include polyfill-row-gap(20px);
+
   display: flex;
   flex-direction: column;
-  gap: 20px 100px;
   align-items: center;
   width: 100%;
   padding: 10% 20px 20px;
@@ -28,6 +29,7 @@
 
     @include media-breakpoint-up(md) {
       align-items: flex-start;
+      margin-left: 100px;
     }
   }
 

diff --git a/packages/platform/src/app/routes/login/Login.module.scss b/packages/platform/src/app/routes/login/Login.module.scss
@@ -77,7 +77,8 @@
   }
 
   @include e(link-container) {
+    @include polyfill-column-gap(12px);
+
     display: flex;
-    gap: 0 12px;
   }
 }
diff --git a/packages/platform/src/styles/components/detail-view.scss b/packages/platform/src/styles/components/detail-view.scss
@@ -5,6 +5,9 @@
     }
 
     @include e(item-label) {
+      margin-right: 0;
+      margin-bottom: 8px;
+
       &::after {
         content: none;
       }
@@ -13,7 +16,6 @@
 
   @include e(item) {
     display: inline-flex;
-    gap: 8px 12px;
 
     @include m(center) {
       align-items: center;
@@ -22,6 +24,7 @@
 
   @include e(item-label) {
     flex-shrink: 0;
+    margin-right: 12px;
     color: var(--#{$rd-prefix}text-color-sub);
 
     &::after {

diff --git a/packages/platform/src/styles/components/route-header.scss b/packages/platform/src/styles/components/route-header.scss
@@ -6,7 +6,7 @@
   background-color: var(--#{$rd-prefix}background-color);
 
   @include e(breadcrumb) {
-    height: 40px;
+    min-height: 40px;
   }
 
   @include e(breadcrumb-link) {
@@ -21,9 +21,10 @@
   }
 
   @include e(header) {
+    @include polyfill-gap(12px, 20px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 12px 20px;
     align-items: center;
     justify-content: space-between;
     padding-bottom: 16px;
@@ -60,9 +61,10 @@
   }
 
   @include e(header-actions) {
+    @include polyfill-gap(8px, 8px);
+
     display: inline-flex;
     flex-wrap: wrap;
-    gap: 8px;
     align-items: center;
   }
 }
diff --git a/packages/platform/src/styles/components/status-dot.scss b/packages/platform/src/styles/components/status-dot.scss
@@ -14,7 +14,6 @@
   --app-status-dot-color: var(--#{$rd-prefix}tag-background-color-fill);
 
   display: inline-flex;
-  gap: 0 8px;
   align-items: center;
   vertical-align: top;
 
@@ -44,6 +43,7 @@
     position: relative;
     width: 6px;
     height: 6px;
+    margin-right: 8px;
     background-color: var(--app-status-dot-color);
     border-radius: 50%;
   }

diff --git a/packages/platform/src/styles/components/table-filter.scss b/packages/platform/src/styles/components/table-filter.scss
@@ -20,9 +20,10 @@
   }
 
   @include e(button-container) {
+    @include polyfill-gap(12px, 8px);
+
     display: flex;
     flex-wrap: wrap;
-    gap: 12px 8px;
     align-items: center;
   }