vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Migrated css variables used in demos

Browse source
This commit is contained in:
Cagatay Civici 2024-03-27 11:30:38 +03:00
parent dfcc243fe1
commit 5486ec46fe
21 changed files with 200 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

84
doc/styleclass/AnimationDoc.vue
View file

@ -7,10 +7,10 @@
</DocSectionText>
<div class="card flex flex-column align-items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="hidden animation-duration-500 box">
<div class="my-hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div>
</div>
@ -23,9 +23,9 @@ export default {
return {
code: {
basic: `
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<div class="hidden animation-duration-500 box">
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
<div class="my-hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div>
`,
@ -33,10 +33,10 @@ export default {
<template>
<div class="card flex flex-column align-items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="hidden animation-duration-500 box">
<div class="my-hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div>
</div>
@ -46,22 +46,6 @@ export default {
<\/script>
<style scoped>
.box {
background-color: var(--green-500);
color: #ffffff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
margin-top: 1rem;
font-weight: bold;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
@keyframes my-fadein {
0% {
opacity: 0;
@ -80,6 +64,10 @@ export default {
}
}
.my-hidden {
display: none;
}
.my-fadein {
animation: my-fadein 150ms linear;
}
@ -93,10 +81,10 @@ export default {
<template>
<div class="card flex flex-column align-items-center">
<div>
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<Button v-styleclass="{ selector: '.box', enterClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
</div>
<div class="hidden animation-duration-500 box">
<div class="my-hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div>
</div>
@ -106,22 +94,6 @@ export default {
<\/script>
<style scoped>
.box {
background-color: var(--green-500);
color: #ffffff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
margin-top: 1rem;
font-weight: bold;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
@keyframes my-fadein {
0% {
opacity: 0;
@ -140,6 +112,10 @@ export default {
}
}
.my-hidden {
display: none;
}
.my-fadein {
animation: my-fadein 150ms linear;
}
@ -156,22 +132,6 @@ export default {
</script>
<style lang="scss" scoped>
.box {
background-color: var(--green-500);
color: #ffffff;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
margin-top: 1rem;
font-weight: bold;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
@keyframes my-fadein {
0% {
opacity: 0;
@ -190,6 +150,10 @@ export default {
}
}
.my-hidden {
display: none;
}
.my-fadein {
animation: my-fadein 150ms linear;
}