Migrated css variables used in demos

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

View file

@ -3,7 +3,7 @@
<p>ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> <i>fill</i> and <i>animationDuration</i>.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent" animationDuration=".5s" aria-label="Custom ProgressSpinner" />
</div>
<DocSectionCode :code="code" />
</template>
@ -14,13 +14,13 @@ export default {
return {
code: {
basic: `
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
animationDuration=".5s" aria-label="Custom ProgressSpinner" />
`,
options: `
<template>
<div class="card flex justify-content-center">
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
animationDuration=".5s" aria-label="Custom ProgressSpinner" />
</div>
</template>
@ -31,7 +31,7 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="var(--surface-ground)"
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
animationDuration=".5s" aria-label="Custom ProgressSpinner" />
</div>
</template>