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

Button style updates

pull/5677/head
tugcekucukoglu 2024-04-08 13:41:26 +03:00
parent f86f108126
commit 96a04df81d
3 changed files with 73 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
assets/styles/layout/templates/_templates.scss
View File

@ -1155,6 +1155,7 @@
margin-top: 2rem; margin-top: 2rem;
a { a {
display: inline-flex;
text-decoration: none; text-decoration: none;
height: 2.5rem; height: 2.5rem;
flex: 1; 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;
}
}
}

4
components/template/Hero/index.vue
View File

@ -9,8 +9,8 @@
</div> </div>
<p>{{ templateHeroData.description }}</p> <p>{{ templateHeroData.description }}</p>
<div class="template-hero-card-buttons"> <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.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 p-button"> <a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2">
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }} {{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
</a> </a>
</div> </div>

74
pages/templates/index.vue
View File

@ -5,18 +5,18 @@
<p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p> <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
</div> </div>
<div class="grid"> <div class="templates-page grid">
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank"> <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" /> <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/apollo" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -27,11 +27,11 @@
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" /> <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/sakai" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -42,11 +42,11 @@
<img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" /> <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/atlantis" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -57,11 +57,11 @@
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" /> <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/ultima" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -72,11 +72,11 @@
<img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" /> <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/freya" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -87,11 +87,11 @@
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" /> <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/diamond" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -102,11 +102,11 @@
<img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" /> <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/verona" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -117,11 +117,11 @@
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" /> <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/poseidon" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
@ -132,11 +132,11 @@
<img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" /> <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <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"> <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label white-space-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/avalon" class="flex-1 p-button p-component p-button-outlined"> <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
<span class="p-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label white-space-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>