Elevation for configurator
parent
c7a1e0680e
commit
77fe95225a
|
@ -9,8 +9,8 @@
|
|||
<ul ref="topbarMenu" class="topbar-menu">
|
||||
<li><router-link to="/setup">Get Started</router-link></li>
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleMenu($event, 0)" class="themes-menu-link">Themes</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave">
|
||||
<a tabindex="0" @click="toggleMenu($event, 0)">Themes</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter">
|
||||
<ul v-show="activeMenuIndex === 0">
|
||||
<li class="topbar-submenu-header">THEMING</li>
|
||||
<li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
|
||||
|
@ -42,8 +42,8 @@
|
|||
</transition>
|
||||
</li>
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleMenu($event, 1)" class="templates-menu-link">Templates</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave">
|
||||
<a tabindex="0" @click="toggleMenu($event, 1)">Templates</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter">
|
||||
<ul v-show="activeMenuIndex === 1">
|
||||
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
|
||||
<li><a href="https://www.primefaces.org/sigma-vue"><img src="./assets/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span></a></li>
|
||||
|
@ -60,8 +60,8 @@
|
|||
</transition>
|
||||
</li>
|
||||
<li class="topbar-submenu topbar-resources-submenu">
|
||||
<a tabindex="0" @click="toggleMenu($event, 2)" class="resources-menu-link">Resources</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave">
|
||||
<a tabindex="0" @click="toggleMenu($event, 2)">Resources</a>
|
||||
<transition name="p-input-overlay" @enter="onMenuEnter">
|
||||
<ul v-show="activeMenuIndex === 2">
|
||||
<li><router-link to="/support"><span>Support</span></router-link></li>
|
||||
<li><a href="https://forum.primefaces.org/viewforum.php?f=110"><span>Forum</span></a></li>
|
||||
|
@ -106,14 +106,12 @@ export default {
|
|||
onMenuEnter() {
|
||||
this.bindOutsideClickListener();
|
||||
},
|
||||
onMenuLeave() {
|
||||
this.unbindOutsideClickListener();
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener) {
|
||||
this.outsideClickListener = (event) => {
|
||||
if ((this.activeMenuIndex != null && this.isOutsideTopbarMenuClicked(event))) {
|
||||
this.activeMenuIndex = null;
|
||||
this.unbindOutsideClickListener();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
transition: transform .3s;
|
||||
transform: translate3d(550px,0,0);
|
||||
backface-visibility: hidden;
|
||||
border-left: 1px solid var(--surface-d);
|
||||
|
||||
&.layout-config-active {
|
||||
transform: translate3d(0,0,0);
|
||||
|
@ -30,7 +29,7 @@
|
|||
padding: 0;
|
||||
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
|
||||
color: var(--text-color);
|
||||
background-color: var(--surface-a);
|
||||
background-color: var(--surface-e);
|
||||
|
||||
.layout-config-button {
|
||||
display: block;
|
||||
|
@ -65,7 +64,11 @@
|
|||
|
||||
a {
|
||||
color: $linkColor;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-config-content {
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
color: $linkColor;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
Loading…
Reference in New Issue