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;
}
.p-progressbar .p-progressbar-label {
color: rgba(255, 255, 255, 0.87);
color: #212529;
line-height: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,9 +1,10 @@
<template>
<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 && (value !== null) && showValue" class="p-progressbar-label">
<div v-if="determinate" class="p-progressbar-value p-progressbar-value-animate" :style="progressStyle">
<div v-if="(value != null && value !== 0) && showValue" class="p-progressbar-label">
<slot>{{value + '%'}}</slot>
</div>
</div>
<div v-if="indeterminate" class="p-progressbar-indeterminate-container">
<div class="p-progressbar-value p-progressbar-value-animate"></div>
</div>
@ -40,7 +41,7 @@ export default {
progressStyle() {
return {
width: this.value + '%',
display: 'block'
display: 'flex'
};
},
indeterminate() {
@ -65,20 +66,20 @@ export default {
position: absolute;
display: 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 {
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 {
content: '';
position: absolute;