From ecf960576ff39f539332546c54f8acc896292e50 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Tue, 28 Jul 2020 13:14:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8D=A2=E7=A7=8D=E5=B8=83=E5=B1=80=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/_utilities.scss       | 11 ++++-------
 scss/components/_card.scss |  5 +++--
 scss/components/_page.scss | 32 ++++++++++++++------------------
 scss/components/_tabs.scss |  5 +----
 scss/layout/_hbox.scss     | 11 ++++-------
 5 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 3e1d4666..2d059669 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1458,17 +1458,14 @@
 }
 
 .hbox {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
   width: 100%;
   height: 100%;
 
   & > .col {
-    display: table-cell;
-    vertical-align: top;
-    height: 100%;
-    float: none;
+    flex-grow: 1;
   }
 }
 
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 7b2968f4..f480d3fe 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -131,13 +131,14 @@
 
   &-actions {
     border-top: $Card-borderWidth solid $Card-actions-borderColor;
-    display: table;
+    display: flex;
+    flex-direction: row;
     width: 100%;
     table-layout: fixed;
 
     > a {
       background-color: transparent;
-      display: table-cell;
+      flex-grow: 1;
       border-color: $Card-actions-borderColor;
       border-style: solid;
       border-width: 0 $Card-borderWidth 0 0;
diff --git a/scss/components/_page.scss b/scss/components/_page.scss
index febdcd61..8d3ed87e 100644
--- a/scss/components/_page.scss
+++ b/scss/components/_page.scss
@@ -1,4 +1,7 @@
 .#{$ns}Page {
+  width: 100%;
+  height: 100%;
+
   &-header {
     padding: $Page-header-paddingY $Page-header-paddingX;
   }
@@ -21,15 +24,13 @@
   &-headerRow {
     border-bottom: $borderWidth solid $borderColor;
 
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-    border-spacing: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     .#{$ns}Page-header,
     .#{$ns}Page-toolbar {
-      display: table-cell;
-      vertical-align: middle;
+      flex-grow: 1;
     }
 
     .#{$ns}Page-toolbar {
@@ -81,24 +82,19 @@
     }
 
     width: $Page-aside-width;
+    height: 100%;
     border-right: $borderWidth solid $borderColor;
   }
 
   .#{$ns}Page--withSidebar {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-    height: 100%;
-    border-spacing: 0;
-
-    .#{$ns}Page-aside,
-    .#{$ns}Page-content {
-      display: table-cell;
-      vertical-align: top;
-    }
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
 
     .#{$ns}Page-content {
-      width: 100%;
+      width: 0;
+      height: 100%;
+      flex-grow: 1;
     }
   }
 }
diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index f4ccd35b..6f29e973 100644
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -6,10 +6,7 @@
     list-style: none;
     user-select: none;
 
-    &::before {
-      display: table;
-      content: ' ';
-    }
+    @include clearfix();
 
     > .#{$ns}Tabs-link {
       margin-bottom: -$Tabs-borderWidth;
diff --git a/scss/layout/_hbox.scss b/scss/layout/_hbox.scss
index a0bf6c9c..b42e759d 100644
--- a/scss/layout/_hbox.scss
+++ b/scss/layout/_hbox.scss
@@ -1,15 +1,12 @@
 .#{$ns}Hbox {
-  display: table;
-  table-layout: fixed;
-  border-spacing: 0;
+  display: flex;
+  flex-grow: row;
   width: 100%;
   height: 100%;
 
   & > .#{$ns}Hbox-col {
-    display: table-cell;
-    vertical-align: top;
-    height: 100%;
-    float: none;
+    flex-grow: 1;
+    width: 0;
   }
 }