Convert p-link to px-link
Tuğçe Küçükoğlu
parent
6793412a5c
commit
10fb57cc1a
|
|
@ -73,4 +73,27 @@ input[type="number"] {
|
|||
.p-toast.p-toast-top-right,
|
||||
.p-toast.p-toast-top-left {
|
||||
top: 7rem;
|
||||
}
|
||||
|
||||
.px-link {
|
||||
font-size: 1rem;
|
||||
font-family: var(--font-family);
|
||||
border-radius: var(--border-radius);
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.px-link:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.px-link:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
> .navbar-item-content {
|
||||
display: flex;
|
||||
|
||||
.p-link {
|
||||
.px-link {
|
||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
> .navbar-item-content {
|
||||
border-color: var(--primary-color);
|
||||
|
||||
.p-link {
|
||||
.px-link {
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
<ul ref="nav" class="doc-section-nav">
|
||||
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
|
||||
<div class="navbar-item-content">
|
||||
<button class="p-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
|
||||
<button class="px-link" @click="onButtonClick(doc)">{{ doc.label }}</button>
|
||||
</div>
|
||||
|
||||
<template v-if="doc.children">
|
||||
<ul>
|
||||
<li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
|
||||
<div class="navbar-item-content">
|
||||
<button class="p-link" @click="onButtonClick(child)">
|
||||
<button class="px-link" @click="onButtonClick(child)">
|
||||
{{ child.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,25 +35,25 @@
|
|||
<h4>Bootstrap</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-blue')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-light-purple')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-blue', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('bootstrap4-dark-purple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Purple</span>
|
||||
|
|
@ -63,25 +63,25 @@
|
|||
<h4>Material Design</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Light Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('md-light-deeppurple')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('md-light-deeppurple')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Deep Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('md-dark-indigo', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('md-dark-purple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('md-dark-purple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Deep Purple</span>
|
||||
|
|
@ -91,25 +91,25 @@
|
|||
<h4>Material Design Compact</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('md-light-indigo')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('md-light-indigo')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('mdc-light-deeppurple')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Deep Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('mdc-dark-indigo', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('mdc-dark-deeppurple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Deep Purple</span>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
<h4>Tailwind</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('tailwind-light')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('tailwind-light')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Tailwind Light</span>
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
<h4>Fluent UI</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('fluent-light')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('fluent-light')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/fluent-light.png" alt="Fluent Light" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Blue</span>
|
||||
|
|
@ -139,49 +139,49 @@
|
|||
<h4>PrimeOne Design</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-light-indigo')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-light-indigo')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-light-blue')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-light-blue')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-blue.png" alt="Lara Light Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-light-purple')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-light-purple')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-purple.png" alt="Lara Light Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-light-teal')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-light-teal')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Teal</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-dark-indigo', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Indigo</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-dark-blue', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-dark-purple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('lara-dark-teal', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Lara Teal</span>
|
||||
|
|
@ -191,37 +191,37 @@
|
|||
<h4>Misc</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('soho-light')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('soho-light')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-light.png" alt="Soho Light" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Soho Light</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('soho-dark', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('soho-dark', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/soho-dark.png" alt="Soho Dark" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Soho Dark</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('viva-light')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('viva-light')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-light.svg" alt="Viva Light" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Viva Light</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('viva-dark', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('viva-dark', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg" alt="Viva Dark" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Viva Dark</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('mira')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('mira')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/mira.jpg" alt="Mira" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Mira</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('nano')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('nano')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Nano" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Nano</span>
|
||||
|
|
@ -231,73 +231,73 @@
|
|||
<h4>PrimeOne Design - Legacy</h4>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('saga-blue')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('saga-blue')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-blue.png" alt="Saga Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Saga Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('saga-green')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('saga-green')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-green.png" alt="Saga Green" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Saga Green</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('saga-orange')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('saga-orange')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-orange.png" alt="Saga Orange" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Saga Orange</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('saga-purple')">
|
||||
<button class="px-link h-3rem" @click="changeTheme('saga-purple')">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/saga-purple.png" alt="Saga Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Saga Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('vela-blue', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('vela-blue', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-blue.png" alt="Vela Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Vela Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('vela-green', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('vela-green', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-green.png" alt="Vela Green" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Vela Green</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('vela-orange', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('vela-orange', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-orange.png" alt="Vela Orange" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Vela Orange</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('vela-purple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('vela-purple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/vela-purple.png" alt="Vela Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Vela Purple</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('arya-blue', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('arya-blue', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-blue.png" alt="Arya Blue" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Arya Blue</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('arya-green', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('arya-green', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-green.png" alt="Arya Green" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Arya Green</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('arya-orange', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('arya-orange', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-orange.png" alt="Arya Orange" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Arya Orange</span>
|
||||
</div>
|
||||
<div class="col-3 flex flex-column align-items-center gap-2">
|
||||
<button class="p-link h-3rem" @click="changeTheme('arya-purple', true)">
|
||||
<button class="px-link h-3rem" @click="changeTheme('arya-purple', true)">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" class="w-3rem border-round" />
|
||||
</button>
|
||||
<span class="white-space-nowrap">Arya Purple</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<li v-for="(menuitem, index) in menu" :key="`_root${index}`">
|
||||
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="p-link">
|
||||
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button" class="px-link">
|
||||
<div class="menu-icon">
|
||||
<i :class="menuitem.icon"></i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :ref="containerRef" class="layout-topbar">
|
||||
<div class="layout-topbar-inner">
|
||||
<button type="button" class="p-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
||||
<button type="button" class="px-link menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
|
||||
<i class="pi pi-bars"></i>
|
||||
</button>
|
||||
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
<li>
|
||||
<a
|
||||
href="https://github.com/primefaces/primevue"
|
||||
class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
||||
class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
|
||||
>
|
||||
<i class="pi pi-github text-700"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="flex px-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
|
||||
<i class="pi pi-discord text-700"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<button
|
||||
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
|
||||
type="button"
|
||||
class="p-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
|
||||
class="px-link flex align-items-center surface-card h-2rem px-3 hover:surface-hover border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
|
||||
>
|
||||
<span class="text-900"> {{ versions[0].version }}</span>
|
||||
<span class="ml-2 pi pi-angle-down text-600"></span>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
<div class="p-fluid">
|
||||
<span class="font-semibold block mb-3">Primary</span>
|
||||
<div>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem p-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #4f8ff7" @click="changeTheme('#4f8ff7', '#3575dd')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #03e8bf" @click="changeTheme('#03E8BF', '#02ba99')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem px-link mr-3" style="background-color: #916aff" @click="changeTheme('#916AFF', '#7455cc')"></button>
|
||||
<button type="button" class="border-circle w-2rem h-2rem px-link" style="background-color: #ffbd80" @click="changeTheme('#FFBD80', '#cc9766')"></button>
|
||||
</div>
|
||||
|
||||
<span class="font-semibold block mt-4 mb-3">Font</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'blue')">PrimeOne</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
||||
<a type="button" class="font-medium p-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
||||
<a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
||||
</div>
|
||||
<div
|
||||
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
||||
|
|
|
|||
Loading…
Reference in New Issue