lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: layout-blur class name

This commit is contained in:
FairyEver 2021-12-16 21:26:52 +08:00
parent 5473d98568
commit 49b73744bb
3 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
d2/components/d2/admin/layout/dashboard/container/index.vue
View File

@ -58,11 +58,11 @@ export default {
'body__main--with-footer-ghost': unref(footerActive) && !props.footerBorder
}))
const headerClass = computed(() => makeClassnames('body__header', 'body__blur', {
const headerClass = computed(() => makeClassnames('body__header', 'layout-blur--body', {
'body__header--border': props.headerBorder
}))
const footerClass = computed(() => makeClassnames('body__footer', 'body__blur', {
const footerClass = computed(() => makeClassnames('body__footer', 'layout-blur--body', {
'body__footer--border': props.footerBorder
}))

4
d2/components/d2/admin/layout/dashboard/index.vue
View File

@ -19,7 +19,7 @@
<router-view v-else/>
</div>
<!-- header -->
<div class="layout__header-background app__blur"/>
<div class="layout__header-background layout-blur--app"/>
<d2-flex class="layout__header" dir="left" box="justify">
<d2-flex class="header__button-group">
<d2-flex class="header__button header__button--icon" tag="button" @click="collapsedToggle" center>
@ -41,7 +41,7 @@
</d2-flex>
</div>
<!-- footer -->
<div class="layout__footer app__blur">
<div class="layout__footer layout-blur--app">
<slot name="footer"/>
</div>
</template>

9
d2/style/themes/default/src/layout/dashboard/src/style.scss
View File

@ -140,22 +140,21 @@ html, body, #app {
border-top-width: --var('footer-border-width');
}
.body__blur {
.layout-blur--body {
background-color: --var('body-main-bg-color-rgba-blur');
backdrop-filter: blur(4px);
}
@-moz-document url-prefix() {
.body__blur {
.layout-blur--body {
background-color: --var('body-main-bg-color-rgba-blur-moz');
}
}
.app__blur {
.layout-blur--app {
background-color: --var('color-bg-app-rgba-blur');
backdrop-filter: blur(4px);
}
@-moz-document url-prefix() {
.app__blur {
.layout-blur--app {
background-color: --var('color-bg-app-rgba-blur-moz');
}
}