疯狂的狮子Li
82 lines
1.7 KiB
SCSS
82 lines
1.7 KiB
SCSS
/* Shared vertical page shell spacing helpers. */
|
|
|
|
.p-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.app-main > .page-shell,
|
|
.app-main > .page-shell.p-2 {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.p-2 > .el-row,
|
|
.p-2 > .el-card,
|
|
.p-2 > .search-wrap,
|
|
.p-2 > div,
|
|
.p-2 > section {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.page-shell > .el-row,
|
|
.page-shell > .el-card,
|
|
.page-shell > .search-wrap,
|
|
.page-shell > div,
|
|
.page-shell > section {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */
|
|
|
|
@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
|
|
.data-table {
|
|
:deep(.el-button.is-link) {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
background: $background;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin toolbar-responsive($mobile-breakpoint: 900px) {
|
|
@media (max-width: $mobile-breakpoint) {
|
|
.toolbar-shell {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin content-stack($gap: 12px) {
|
|
.content-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap;
|
|
}
|
|
}
|
|
|
|
@mixin dept-tree-panel($padding-top: 6px) {
|
|
.dept-tree {
|
|
padding-top: $padding-top;
|
|
}
|
|
}
|
|
|
|
@mixin table-crud-page($mobile-breakpoint: 900px, $background: rgba(53, 109, 255, 0.08)) {
|
|
@include action-link-buttons($background);
|
|
@include toolbar-responsive($mobile-breakpoint);
|
|
}
|
|
|
|
@mixin tree-table-crud-page($mobile-breakpoint: 900px, $gap: 12px, $tree-padding-top: 6px, $background: rgba(53, 109, 255, 0.08)) {
|
|
@include content-stack($gap);
|
|
@include dept-tree-panel($tree-padding-top);
|
|
@include table-crud-page($mobile-breakpoint, $background);
|
|
}
|