responsiveness
Tuğçe Küçükoğlu
Tuğçe Küçükoğlu
parent
69ab7c1576
commit
57ad1be0a5
|
|
@ -4,13 +4,12 @@
|
|||
<i class="pi pi-bars"></i>
|
||||
</a>
|
||||
<router-link to="/" class="logo">
|
||||
<img alt="logo" src="./assets/images/primevue-logo.png">
|
||||
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
|
||||
</router-link>
|
||||
<div class="app-theme" v-tooltip.bottom="$appState.theme">
|
||||
<img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
|
||||
</div>
|
||||
<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)">
|
||||
<span v-badge.danger>Themes</span>
|
||||
|
|
@ -122,6 +121,15 @@
|
|||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
<li class="topbar-submenu">
|
||||
<a tabindex="0" @click="toggleMenu($event, 3)">v3.12.0</a>
|
||||
<transition name="p-connected-overlay" @enter="onMenuEnter">
|
||||
<ul v-show="activeMenuIndex === 3" style="width: 100%">
|
||||
<li><router-link to="/"><span class="m-0">v3.12.0</span></router-link></li>
|
||||
<li><a href="https://www.primefaces.org/primevue/showcase-v2/#/"><span class="m-0">v2.9.0</span></a></li>
|
||||
</ul>
|
||||
</transition>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -24,11 +24,12 @@
|
|||
}
|
||||
|
||||
.layout-topbar {
|
||||
margin-left: 0;
|
||||
height: 110px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.menu-button {
|
||||
display: block;
|
||||
|
|
@ -51,20 +52,18 @@
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--surface-border);
|
||||
|
||||
> li {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 25%;
|
||||
margin-right: 0;
|
||||
|
||||
> a {
|
||||
padding-bottom: 0;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
min-width: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.topbar-submenu > ul {
|
||||
|
|
@ -75,8 +74,10 @@
|
|||
}
|
||||
|
||||
.layout-sidebar {
|
||||
top: 0;
|
||||
z-index: 1102;
|
||||
height: 100%;
|
||||
transform: translateX(-100%);
|
||||
z-index: 999;
|
||||
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
|
|
@ -85,6 +86,7 @@
|
|||
|
||||
.layout-content {
|
||||
margin-left: 0;
|
||||
padding-top: 110px;
|
||||
|
||||
.content-section {
|
||||
&.introduction {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.layout-topbar {
|
||||
padding: 0 4rem;
|
||||
padding: 0;
|
||||
height: 70px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 4rem;
|
||||
|
||||
&.layout-topbar-sticky {
|
||||
backdrop-filter: blur(12px);
|
||||
|
|
@ -37,6 +38,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
&:focus {
|
||||
outline: 0 none;
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
.app-theme {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
|
|
@ -55,36 +64,33 @@
|
|||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
|
||||
> li {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
margin-right: .5rem;
|
||||
|
||||
> a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
min-width: 120px;
|
||||
font-size: 16px;
|
||||
padding: .5rem 1.5rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
line-height: 68px;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-bottom-color .2s;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-bottom-color: var(--primary-color);
|
||||
}
|
||||
transition: background-color .3s;
|
||||
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
outline: 0 none;
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: inset 0 0 0 0.2em $focusBorderColor;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,9 +100,8 @@
|
|||
> ul {
|
||||
position: absolute;
|
||||
transform-origin: top;
|
||||
top: 70px;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 275px;
|
||||
max-height: 400px;
|
||||
background-color: var(--surface-overlay);
|
||||
|
|
@ -105,7 +110,7 @@
|
|||
list-style-type: none;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
border-radius: 10px;
|
||||
|
||||
> li {
|
||||
line-height: 1;
|
||||
|
|
@ -132,8 +137,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
border-radius: 3px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
|
|
|
|||
Loading…
Reference in New Issue