feat: simple implementation
This commit is contained in:
parent
4ee88aed75
commit
613fd5fc4b
|
|
@ -30,9 +30,11 @@ html, body, #app {
|
||||||
>.body__header {
|
>.body__header {
|
||||||
@apply absolute inset-x-0 overflow-hidden break-words border-b;
|
@apply absolute inset-x-0 overflow-hidden break-words border-b;
|
||||||
top: calc(#{--var('header-height')} + #{--var('header-border-width')});
|
top: calc(#{--var('header-height')} + #{--var('header-border-width')});
|
||||||
|
padding: --var('body-padding');
|
||||||
}
|
}
|
||||||
>.body__footer {
|
>.body__footer {
|
||||||
@apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
|
@apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
|
||||||
|
padding: --var('body-padding');
|
||||||
}
|
}
|
||||||
>.body__scroll {
|
>.body__scroll {
|
||||||
@apply absolute inset-0;
|
@apply absolute inset-0;
|
||||||
|
|
|
||||||
|
|
@ -20,11 +20,11 @@ $color-bg-container: #FFFFFF;
|
||||||
:root {
|
:root {
|
||||||
// color
|
// color
|
||||||
#{--key('color-bg-app')}: $color-bg-app;
|
#{--key('color-bg-app')}: $color-bg-app;
|
||||||
#{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.6);
|
#{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.5);
|
||||||
#{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98);
|
#{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98);
|
||||||
|
|
||||||
#{--key('color-bg-container')}: $color-bg-container;
|
#{--key('color-bg-container')}: $color-bg-container;
|
||||||
#{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.6);
|
#{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.5);
|
||||||
#{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
|
#{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
|
||||||
|
|
||||||
#{--key('color-bg-popup')}: #FFFFFF;
|
#{--key('color-bg-popup')}: #FFFFFF;
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,10 @@
|
||||||
<template>
|
<template>
|
||||||
<d2-admin-layout-dashboard-container>
|
<d2-admin-layout-dashboard-container>
|
||||||
<template #header>
|
<template #header>
|
||||||
<template v-for="n in 30" :key="n">----------</template>
|
<a-button>Button</a-button>
|
||||||
</template>
|
</template>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<template v-for="n in 30" :key="n">----------</template>
|
<a-button>Button</a-button>
|
||||||
</template>
|
</template>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="n in 100" :key="n">{{ n }}</li>
|
<li v-for="n in 100" :key="n">{{ n }}</li>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue