vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update visuals

pull/4591/head
Cagatay Civici 2023-10-07 17:52:00 +03:00
parent a18c9b8be2
commit a744a759fe
5 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/styles/layout/_content.scss
View File

@ -1,9 +1,10 @@
.layout-content { .layout-content {
margin-left: 250px;
padding-top: 5rem; padding-top: 5rem;
.layout-content-inner { .layout-content-inner {
padding: 2rem 4rem; padding: 2rem 4rem;
display: flex;
gap: 4rem;
} }
.card { .card {

4
assets/styles/layout/_responsive.scss
View File

@ -8,6 +8,10 @@
max-width: 1478px; max-width: 1478px;
margin: 0 auto; margin: 0 auto;
} }
.layout-sidebar {
left: 200px;
}
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {

7
assets/styles/layout/_sidebar.scss
View File

@ -1,5 +1,5 @@
.layout-sidebar { .layout-sidebar {
position: fixed; position: sticky;
left: 0; left: 0;
top: 5rem; top: 5rem;
height: 100%; height: 100%;
@ -8,7 +8,8 @@
transition: transform .4s cubic-bezier(.05,.74,.2,.99); transition: transform .4s cubic-bezier(.05,.74,.2,.99);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem 0 1rem 0; padding: 0;
flex-shrink: 0;
.logo { .logo {
display: flex; display: flex;
@ -16,7 +17,7 @@
} }
nav { nav {
padding: 0 0 2rem 2rem; padding: 0;
margin: 0; margin: 0;
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;

1
assets/styles/layout/_topbar.scss
View File

@ -4,6 +4,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
padding: 0 4rem;
width: 100%; width: 100%;
z-index: 1100; z-index: 1100;
transition: background-color 1s; transition: background-color 1s;

6
layouts/default.vue
View File

@ -2,15 +2,15 @@
<div class="layout-wrapper" :class="containerClass"> <div class="layout-wrapper" :class="containerClass">
<app-news v-if="$appState.newsActive" /> <app-news v-if="$appState.newsActive" />
<app-topbar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" /> <app-topbar @menubutton-click="onMenuButtonClick" @configbutton-click="onConfigButtonClick" />
<app-menu :active="sidebarActive" />
<app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" /> <app-configurator :configActive="appConfigActive" @updateConfigActive="onUpdateConfigActive" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div> <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content"> <div class="layout-content">
<div class="layout-content-inner"> <div class="layout-content-inner">
<app-menu :active="sidebarActive" />
<slot></slot> <slot></slot>
</div>
</div>
<app-footer /> <app-footer />
</div>
</div>
<Toast /> <Toast />
<Toast position="top-left" group="tl" /> <Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" /> <Toast position="bottom-left" group="bl" />