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

Remove v-deep use pt

Browse source
This commit is contained in:
tugcekucukoglu 2023-10-26 10:41:27 +03:00
parent 095a203cd8
commit 3598aaef52
6 changed files with 182 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

169
doc/ripple/CustomDoc.vue
View file

@ -3,9 +3,36 @@
<p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
</DocSectionText>
<div class="card flex justify-content-center align-items-center gap-2">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
<DocSectionCode :code="code" />
</template>
@ -16,31 +43,74 @@ export default {
return {
code: {
basic: `
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
`,
options: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
</template>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
@ -52,25 +122,41 @@ export default {
`,
composition: `
<template>
<div class="flex justify-content-center align-items-center">
<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
<div class="flex justify-content-center align-items-center gap-2">
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(75, 175, 80, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Green
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(255, 193, 6, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Orange
</div>
<div
v-ripple="{
pt: {
root: { style: 'background: rgba(156, 39, 176, 0.3)' }
}
}"
class="p-ripple box shadow-2"
>
Purple
</div>
</div>
</template>
<style scoped>
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
.box {
background: var(--surface-card);
padding: 2rem;
@ -93,15 +179,4 @@ export default {
width: 110px;
text-align: center;
}
::v-deep(.styled-box-green .p-ink) {
background: rgba(75, 175, 80, 0.3);
}
::v-deep(.styled-box-orange .p-ink) {
background: rgba(255, 193, 6, 0.3);
}
::v-deep(.styled-box-purple .p-ink) {
background: rgba(156, 39, 176, 0.3);
}
</style>