amis2/scss/components/_page.scss
2019-09-10 19:47:48 +08:00

101 lines
2.0 KiB
SCSS

.#{$ns}Page {
&-header {
padding: $Page-header-paddingY $Page-header-paddingX;
}
&-main {
background: $Page-main-bg;
}
&-content {
padding: $Page-content-paddingY $Page-content-paddingX;
}
&-main > &-header {
border-bottom: $borderWidth solid $borderColor;
}
&-headerRow {
border-bottom: $borderWidth solid $borderColor;
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0;
.#{$ns}Page-header,
.#{$ns}Page-toolbar {
display: table-cell;
vertical-align: middle;
}
.#{$ns}Page-toolbar {
text-align: right;
padding-right: $gap-base;
}
}
&-title {
margin: 0;
padding: 0;
color: $Page-title-color;
line-height: $Page-title-lineHeight;
font-size: $Page-title-fontSize;
font-weight: $Page-title-fontWeight;
}
&-body {
padding: $Page-body-padding;
}
&-asideTplWrapper {
padding: $gap-xs;
}
}
.#{$ns}Page-toolbar {
.#{$ns}Button + .#{$ns}Button {
margin-left: $gap-xs;
}
}
.#{$ns}Page-aside {
background-color: $Page-aside-bg;
}
@include media-breakpoint-up(md) {
.#{$ns}Page-aside {
&::before {
content: "";
position: absolute;
width: inherit;
top: 0;
bottom: 0;
z-index: -1;
background-color: inherit;
border: inherit;
}
width: $Page-aside-width;
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;
}
.#{$ns}Page-content {
width: 100%;
}
}
}