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

Fixed #1752 - ProgressBar text color enhancements

pull/1280/head^2
Cagatay Civici 2021-11-15 17:53:25 +03:00
parent fa3aae4085
commit fb7b2b24cc
44 changed files with 64 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/themes/arya-blue/theme.css
View File

@ -5293,7 +5293,7 @@
background: #64B5F6; background: #64B5F6;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/arya-green/theme.css
View File

@ -5293,7 +5293,7 @@
background: #81C784; background: #81C784;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/arya-orange/theme.css
View File

@ -5293,7 +5293,7 @@
background: #FFD54F; background: #FFD54F;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/arya-purple/theme.css
View File

@ -5293,7 +5293,7 @@
background: #BA68C8; background: #BA68C8;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -5305,7 +5305,7 @@
background: #8dd0ff; background: #8dd0ff;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #151515;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -5305,7 +5305,7 @@
background: #c298d8; background: #c298d8;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #151515;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/bootstrap4-light-blue/theme.css
View File

@ -5305,7 +5305,7 @@
background: #007bff; background: #007bff;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #212529; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/bootstrap4-light-purple/theme.css
View File

@ -5305,7 +5305,7 @@
background: #883cae; background: #883cae;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #212529; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/fluent-light/theme.css
View File

@ -5244,7 +5244,7 @@
background: #0078d4; background: #0078d4;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #323130; color: #ffffff;
line-height: 2px; line-height: 2px;
} }

2
public/themes/lara-dark-blue/theme.css
View File

@ -5279,7 +5279,7 @@
background: #93C5FD; background: #93C5FD;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #1c2127;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-dark-indigo/theme.css
View File

@ -5279,7 +5279,7 @@
background: #A5B4FC; background: #A5B4FC;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #1c2127;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-dark-purple/theme.css
View File

@ -5279,7 +5279,7 @@
background: #C4B5FD; background: #C4B5FD;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #1c2127;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-dark-teal/theme.css
View File

@ -5279,7 +5279,7 @@
background: #5EEAD4; background: #5EEAD4;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #1c2127;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-light-blue/theme.css
View File

@ -5279,7 +5279,7 @@
background: #3B82F6; background: #3B82F6;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-light-indigo/theme.css
View File

@ -5279,7 +5279,7 @@
background: #6366F1; background: #6366F1;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-light-purple/theme.css
View File

@ -5279,7 +5279,7 @@
background: #8B5CF6; background: #8B5CF6;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/lara-light-teal/theme.css
View File

@ -5279,7 +5279,7 @@
background: #14B8A6; background: #14B8A6;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/luna-amber/theme.css
View File

@ -5256,7 +5256,7 @@
background: #FFE082; background: #FFE082;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #dedede; color: #212529;
line-height: 24px; line-height: 24px;
} }

2
public/themes/luna-blue/theme.css
View File

@ -5256,7 +5256,7 @@
background: #81D4FA; background: #81D4FA;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #dedede; color: #212529;
line-height: 24px; line-height: 24px;
} }

2
public/themes/luna-green/theme.css
View File

@ -5256,7 +5256,7 @@
background: #C5E1A5; background: #C5E1A5;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #dedede; color: #212529;
line-height: 24px; line-height: 24px;
} }

2
public/themes/luna-pink/theme.css
View File

@ -5256,7 +5256,7 @@
background: #F48FB1; background: #F48FB1;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #dedede; color: #212529;
line-height: 24px; line-height: 24px;
} }

4
public/themes/md-dark-deeppurple/theme.css
View File

@ -5317,7 +5317,7 @@
background: #CE93D8; background: #CE93D8;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #121212;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/md-dark-indigo/theme.css
View File

@ -5317,7 +5317,7 @@
background: #9FA8DA; background: #9FA8DA;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #121212;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/md-light-deeppurple/theme.css
View File

@ -5317,7 +5317,7 @@
background: #673AB7; background: #673AB7;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(0, 0, 0, 0.87); color: #ffffff;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/md-light-indigo/theme.css
View File

@ -5317,7 +5317,7 @@
background: #3F51B5; background: #3F51B5;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(0, 0, 0, 0.87); color: #ffffff;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -5317,7 +5317,7 @@
background: #CE93D8; background: #CE93D8;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #121212;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/mdc-dark-indigo/theme.css
View File

@ -5317,7 +5317,7 @@
background: #9FA8DA; background: #9FA8DA;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #121212;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/mdc-light-deeppurple/theme.css
View File

@ -5317,7 +5317,7 @@
background: #673AB7; background: #673AB7;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(0, 0, 0, 0.87); color: #ffffff;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

4
public/themes/mdc-light-indigo/theme.css
View File

@ -5317,7 +5317,7 @@
background: #3F51B5; background: #3F51B5;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(0, 0, 0, 0.87); color: #ffffff;
line-height: 4px; line-height: 4px;
} }
@ -6507,7 +6507,7 @@
.p-progressbar { .p-progressbar {
border-radius: 0; border-radius: 0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar.p-progressbar-determinate .p-progressbar-label {
display: none; display: none;
} }

2
public/themes/nova-accent/theme.css
View File

@ -5244,7 +5244,7 @@
background: #007ad9; background: #007ad9;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #333333; color: #ffffff;
line-height: 24px; line-height: 24px;
} }

2
public/themes/nova-alt/theme.css
View File

@ -5256,7 +5256,7 @@
background: #007ad9; background: #007ad9;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #333333; color: #ffffff;
line-height: 24px; line-height: 24px;
} }

2
public/themes/nova-vue/theme.css
View File

@ -5256,7 +5256,7 @@
background: #41b883; background: #41b883;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #333333; color: #ffffff;
line-height: 24px; line-height: 24px;
} }

2
public/themes/nova/theme.css
View File

@ -5256,7 +5256,7 @@
background: #007ad9; background: #007ad9;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #333333; color: #ffffff;
line-height: 24px; line-height: 24px;
} }

2
public/themes/rhea/theme.css
View File

@ -5244,7 +5244,7 @@
background: #7B95A3; background: #7B95A3;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #666666; color: #ffffff;
line-height: 24px; line-height: 24px;
} }

2
public/themes/saga-blue/theme.css
View File

@ -5293,7 +5293,7 @@
background: #2196F3; background: #2196F3;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/saga-green/theme.css
View File

@ -5293,7 +5293,7 @@
background: #4CAF50; background: #4CAF50;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/saga-orange/theme.css
View File

@ -5293,7 +5293,7 @@
background: #FFC107; background: #FFC107;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/saga-purple/theme.css
View File

@ -5293,7 +5293,7 @@
background: #9C27B0; background: #9C27B0;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #495057; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/tailwind-light/theme.css
View File

@ -5328,7 +5328,7 @@
background: #4F46E5; background: #4F46E5;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: #3f3f46; color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/vela-blue/theme.css
View File

@ -5293,7 +5293,7 @@
background: #64B5F6; background: #64B5F6;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/vela-green/theme.css
View File

@ -5293,7 +5293,7 @@
background: #81C784; background: #81C784;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/vela-orange/theme.css
View File

@ -5293,7 +5293,7 @@
background: #FFD54F; background: #FFD54F;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #212529;
line-height: 1.5rem; line-height: 1.5rem;
} }

2
public/themes/vela-purple/theme.css
View File

@ -5293,7 +5293,7 @@
background: #BA68C8; background: #BA68C8;
} }
.p-progressbar .p-progressbar-label { .p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87); color: #ffffff;
line-height: 1.5rem; line-height: 1.5rem;
} }

25
src/components/progressbar/ProgressBar.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100"> <div role="progressbar" :class="containerClass" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100">
<div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle"></div> <div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
<div v-if="determinate && (value !== null) && showValue" class="p-progressbar-label"> <div v-if="(value != null && value !== 0) && showValue" class="p-progressbar-label">
<slot>{{value + '%'}}</slot> <slot>{{value + '%'}}</slot>
</div>
</div> </div>
<div v-if="indeterminate" class="p-progressbar-indeterminate-container"> <div v-if="indeterminate" class="p-progressbar-indeterminate-container">
<div class="p-progressbar-value p-progressbar-value-animate"></div> <div class="p-progressbar-value p-progressbar-value-animate"></div>
@ -40,7 +41,7 @@ export default {
progressStyle() { progressStyle() {
return { return {
width: this.value + '%', width: this.value + '%',
display: 'block' display: 'flex'
}; };
}, },
indeterminate() { indeterminate() {
@ -65,20 +66,20 @@ export default {
position: absolute; position: absolute;
display: none; display: none;
border: 0 none; border: 0 none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
} }
.p-progressbar-determinate .p-progressbar-value-animate { .p-progressbar-determinate .p-progressbar-value-animate {
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
} }
.p-progressbar-determinate .p-progressbar-label {
text-align: center;
height: 100%;
width: 100%;
position: absolute;
font-weight: bold;
}
.p-progressbar-indeterminate .p-progressbar-value::before { .p-progressbar-indeterminate .p-progressbar-value::before {
content: ''; content: '';
position: absolute; position: absolute;