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

Fixed material light theme switch, cosmetics on docs

pull/3774/head
Cagatay Civici 2023-03-20 13:04:29 +03:00
parent 2ce5ef2771
commit 31a271b1a4
5 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -88,6 +88,11 @@
background-color: var(--highlight-bg);
color: var(--highlight-text-color);
&:hover {
background-color: var(--highlight-bg);
color: var(--highlight-text-color);
}
> .menu-icon {
i {
color: var(--highlight-text-color);

82
layouts/AppConfigurator.vue
View File

@ -1,5 +1,5 @@
<template>
<Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config-sidebar w-full sm:w-30rem" position="right">
<Sidebar v-model:visible="visible" @hide="onSidebarHide" class="layout-config w-full sm:w-30rem" position="right">
<div class="p-2">
<section class="mb-5">
<h3>Component Scale</h3>
@ -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" @click="changeTheme('bootstrap4-light-blue')">
<button class="p-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" @click="changeTheme('bootstrap4-light-purple')">
<button class="p-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" @click="changeTheme('bootstrap4-dark-blue', true)">
<button class="p-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" @click="changeTheme('bootstrap4-dark-purple', true)">
<button class="p-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" @click="changeTheme('md-light-indigo', true)">
<button class="p-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" @click="changeTheme('md-light-deeppurple', true)">
<button class="p-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" @click="changeTheme('md-dark-indigo', true)">
<button class="p-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" @click="changeTheme('md-dark-purple', true)">
<button class="p-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" @click="changeTheme('md-light-indigo')">
<button class="p-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" @click="changeTheme('mdc-light-deeppurple')">
<button class="p-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" @click="changeTheme('mdc-dark-indigo', true)">
<button class="p-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" @click="changeTheme('mdc-dark-deeppurple', true)">
<button class="p-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" @click="changeTheme('tailwind-light')">
<button class="p-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" @click="changeTheme('fluent-light')">
<button class="p-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" @click="changeTheme('lara-light-indigo')">
<button class="p-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" @click="changeTheme('lara-light-blue')">
<button class="p-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" @click="changeTheme('lara-light-purple')">
<button class="p-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" @click="changeTheme('lara-light-teal')">
<button class="p-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" @click="changeTheme('lara-dark-indigo', true)">
<button class="p-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" @click="changeTheme('lara-dark-blue', true)">
<button class="p-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" @click="changeTheme('lara-dark-purple', true)">
<button class="p-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" @click="changeTheme('lara-dark-teal', true)">
<button class="p-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" @click="changeTheme('soho-light')">
<button class="p-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" @click="changeTheme('soho-dark', true)">
<button class="p-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" @click="changeTheme('viva-light')">
<button class="p-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" @click="changeTheme('viva-dark', true)">
<button class="p-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" @click="changeTheme('mira')">
<button class="p-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" @click="changeTheme('nano')">
<button class="p-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" @click="changeTheme('saga-blue')">
<button class="p-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" @click="changeTheme('saga-green')">
<button class="p-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" @click="changeTheme('saga-orange')">
<button class="p-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" @click="changeTheme('saga-purple')">
<button class="p-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" @click="changeTheme('vela-blue', true)">
<button class="p-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" @click="changeTheme('vela-green', true)">
<button class="p-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" @click="changeTheme('vela-orange', true)">
<button class="p-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" @click="changeTheme('vela-purple', true)">
<button class="p-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" @click="changeTheme('arya-blue', true)">
<button class="p-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" @click="changeTheme('arya-green', true)">
<button class="p-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" @click="changeTheme('arya-orange', true)">
<button class="p-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" @click="changeTheme('arya-purple', true)">
<button class="p-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>

2
layouts/AppTopBar.vue
View File

@ -22,7 +22,7 @@
</a>
</li>
<li>
<button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300" @click="onConfigButtonClick">
<button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" @click="onConfigButtonClick">
<i class="pi pi-cog"></i>
</button>
</li>

4
pages/support/index.vue
View File

@ -5,7 +5,7 @@
<div class="flex flex-column xl:flex-row mb-5 gap-5">
<div class="card xl:w-3 m-0 relative overflow-hidden">
<i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
<div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div>
<div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
<p class="m-0 line-height-3 relative text-lg text-800">
<a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-semibold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-semibold hover:underline text-primary">Discord</a> are
where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although
@ -13,7 +13,7 @@
</p>
</div>
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
<div class="text-xl font-semibold mb-3">PRO Support</div>
<div class="text-2xl font-semibold mb-3">PRO Support</div>
<p class="m-0 line-height-3 text-lg">
With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to
post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization.

2
pages/uikit/index.vue
View File

@ -275,7 +275,7 @@
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
</div>
<div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
</p>