换种布局方式
This commit is contained in:
parent
2db0f4a6f0
commit
ecf960576f
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue