mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-27 02:01:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: change bg color for layout container (#7077)

Browse Source
This commit is contained in:
云游君 2022-04-10 13:50:27 +08:00 committed by GitHub
parent b6208b423f
commit ae365d5bc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/examples/container/common-layout.scss
View File

@ -10,19 +10,19 @@
.el-header,
.el-footer {
background-color: #b3c0d1;
background-color: var(--el-color-primary-light-7);
color: var(--el-text-color-primary);
text-align: center;
}
.el-aside {
background-color: #d3dce6;
background-color: var(--el-color-primary-light-8);
color: var(--el-text-color-primary);
text-align: center;
}
.el-main {
background-color: #e9eef3;
background-color: var(--el-color-primary-light-9);
color: var(--el-text-color-primary);
text-align: center;

19
docs/examples/container/example.vue
View File

@ -1,9 +1,6 @@
<template>
<el-container
class="layout-container-demo"
style="height: 500px; border: 1px solid #eee"
>
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-container class="layout-container-demo" style="height: 500px">
<el-aside width="200px">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']">
<el-sub-menu index="1">
@ -108,15 +105,12 @@ const tableData = ref(Array.from({ length: 20 }).fill(item))
<style scoped>
.layout-container-demo .el-header {
position: relative;
background-color: #b3c0d1;
background-color: var(--el-color-primary-light-7);
color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
width: 240px;
color: var(--el-text-color-primary);
background: #fff !important;
border-right: solid 1px #e6e6e6;
box-sizing: border-box;
background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
border-right: none;
@ -125,11 +119,10 @@ const tableData = ref(Array.from({ length: 20 }).fill(item))
padding: 0;
}
.layout-container-demo .toolbar {
position: absolute;
display: inline-flex;
align-items: center;
top: 50%;
justify-content: center;
height: 100%;
right: 20px;
transform: translateY(-50%);
}
</style>