Merge branch 'v4' of https://github.com/primefaces/primevue into v4
commit
694521dbd7
|
@ -15,7 +15,6 @@
|
|||
@import './_responsive';
|
||||
@import './_animation';
|
||||
@import './landing/_landing';
|
||||
@import './templates/_templates';
|
||||
@import './templates/_apollo';
|
||||
@import './templates/_atlantis';
|
||||
@import './templates/_avalon';
|
||||
|
@ -25,3 +24,4 @@
|
|||
@import './templates/_sakai';
|
||||
@import './templates/_ultima';
|
||||
@import './templates/_verona';
|
||||
@import './templates/_templates';
|
||||
|
|
|
@ -1155,6 +1155,7 @@
|
|||
margin-top: 2rem;
|
||||
|
||||
a {
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
height: 2.5rem;
|
||||
flex: 1;
|
||||
|
@ -1635,3 +1636,36 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.templates-page {
|
||||
&-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-inverse-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
font-feature-settings: inherit;
|
||||
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
|
||||
border-radius: var(--p-rounded-base);
|
||||
outline-color: transparent;
|
||||
flex: 1 1 0%;
|
||||
|
||||
&-outlined {
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
border-color: var(--p-primary-200);
|
||||
}
|
||||
|
||||
&-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
<p>{{ templateHeroData.description }}</p>
|
||||
<div class="template-hero-card-buttons">
|
||||
<a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1 p-button"> Live Demo </a>
|
||||
<a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2 p-button">
|
||||
<a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1"> Live Demo </a>
|
||||
<a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2">
|
||||
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -5,18 +5,18 @@
|
|||
<p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="templates-page grid">
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="card mb-0">
|
||||
<a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
|
||||
<img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://apollo.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/apollo" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -27,11 +27,11 @@
|
|||
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://sakai.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/sakai" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -42,11 +42,11 @@
|
|||
<img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://atlantis.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/atlantis" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -57,11 +57,11 @@
|
|||
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://ultima.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/ultima" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -72,11 +72,11 @@
|
|||
<img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://freya.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/freya" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -87,11 +87,11 @@
|
|||
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://diamond.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/diamond" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -102,11 +102,11 @@
|
|||
<img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://verona.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/verona" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -117,11 +117,11 @@
|
|||
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://poseidon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/poseidon" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -132,11 +132,11 @@
|
|||
<img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
|
||||
</a>
|
||||
<div class="flex gap-3 mt-3">
|
||||
<a href="https://avalon.primevue.org" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
|
||||
<span class="p-button-label white-space-nowrap">Preview</span>
|
||||
<a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
|
||||
<span class="templates-page-button-label white-space-nowrap">Preview</span>
|
||||
</a>
|
||||
<PrimeVueNuxtLink to="/templates/avalon" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
<PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
|
||||
<span class="templates-page-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue