换种布局方式

This commit is contained in:
2betop 2020-07-28 13:14:33 +08:00
parent 2db0f4a6f0
commit ecf960576f
5 changed files with 26 additions and 38 deletions

View File

@ -1458,17 +1458,14 @@
} }
.hbox { .hbox {
display: table; display: flex;
table-layout: fixed; flex-direction: row;
border-spacing: 0; align-items: flex-start;
width: 100%; width: 100%;
height: 100%; height: 100%;
& > .col { & > .col {
display: table-cell; flex-grow: 1;
vertical-align: top;
height: 100%;
float: none;
} }
} }

View File

@ -131,13 +131,14 @@
&-actions { &-actions {
border-top: $Card-borderWidth solid $Card-actions-borderColor; border-top: $Card-borderWidth solid $Card-actions-borderColor;
display: table; display: flex;
flex-direction: row;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
> a { > a {
background-color: transparent; background-color: transparent;
display: table-cell; flex-grow: 1;
border-color: $Card-actions-borderColor; border-color: $Card-actions-borderColor;
border-style: solid; border-style: solid;
border-width: 0 $Card-borderWidth 0 0; border-width: 0 $Card-borderWidth 0 0;

View File

@ -1,4 +1,7 @@
.#{$ns}Page { .#{$ns}Page {
width: 100%;
height: 100%;
&-header { &-header {
padding: $Page-header-paddingY $Page-header-paddingX; padding: $Page-header-paddingY $Page-header-paddingX;
} }
@ -21,15 +24,13 @@
&-headerRow { &-headerRow {
border-bottom: $borderWidth solid $borderColor; border-bottom: $borderWidth solid $borderColor;
display: table; display: flex;
table-layout: fixed; flex-direction: row;
width: 100%; align-items: center;
border-spacing: 0;
.#{$ns}Page-header, .#{$ns}Page-header,
.#{$ns}Page-toolbar { .#{$ns}Page-toolbar {
display: table-cell; flex-grow: 1;
vertical-align: middle;
} }
.#{$ns}Page-toolbar { .#{$ns}Page-toolbar {
@ -81,24 +82,19 @@
} }
width: $Page-aside-width; width: $Page-aside-width;
height: 100%;
border-right: $borderWidth solid $borderColor; border-right: $borderWidth solid $borderColor;
} }
.#{$ns}Page--withSidebar { .#{$ns}Page--withSidebar {
display: table; display: flex;
table-layout: fixed; flex-direction: row;
width: 100%; align-items: flex-start;
height: 100%;
border-spacing: 0;
.#{$ns}Page-aside,
.#{$ns}Page-content {
display: table-cell;
vertical-align: top;
}
.#{$ns}Page-content { .#{$ns}Page-content {
width: 100%; width: 0;
height: 100%;
flex-grow: 1;
} }
} }
} }

View File

@ -6,10 +6,7 @@
list-style: none; list-style: none;
user-select: none; user-select: none;
&::before { @include clearfix();
display: table;
content: ' ';
}
> .#{$ns}Tabs-link { > .#{$ns}Tabs-link {
margin-bottom: -$Tabs-borderWidth; margin-bottom: -$Tabs-borderWidth;

View File

@ -1,15 +1,12 @@
.#{$ns}Hbox { .#{$ns}Hbox {
display: table; display: flex;
table-layout: fixed; flex-grow: row;
border-spacing: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
& > .#{$ns}Hbox-col { & > .#{$ns}Hbox-col {
display: table-cell; flex-grow: 1;
vertical-align: top; width: 0;
height: 100%;
float: none;
} }
} }