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

Badge fixes

pull/345/head
cagataycivici 2020-05-09 19:43:46 +03:00
parent 4a861c2577
commit e49f9f1026
27 changed files with 454 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #212121;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #FFB300;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #1ea04c;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #cc285c;

21
public/themes/nova-colored/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #007ad9;

21
public/themes/nova-dark/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #007ad9;

21
public/themes/nova-light/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #007ad9;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
@ -3359,6 +3362,18 @@
background-color: #e91224;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #41b883;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3335,9 +3338,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #f3f3f3;
@ -3359,6 +3362,18 @@
background-color: #F4B6B6;
color: #262222;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #7B95A3;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #2196F3;

21
public/themes/saga-cyan/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #00ACC1;

21
public/themes/saga-deeppurple/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #673AB7;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #4CAF50;

21
public/themes/saga-indigo/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #3F51B5;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #FFC107;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #9C27B0;

21
public/themes/saga-teal/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
@ -3393,6 +3396,18 @@
background-color: #D32F2F;
color: #ffffff;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #009688;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #64B5F6;

21
public/themes/vela-cyan/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #4DD0E1;

21
public/themes/vela-deeppurple/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #9575CD;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #81C784;

21
public/themes/vela-indigo/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #7986CB;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #FFD54F;

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

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #BA68C8;

21
public/themes/vela-teal/theme.css
View File

@ -1064,6 +1064,9 @@
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
}
.p-button.p-button-raised {
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@ -3369,9 +3372,9 @@
color: #212529;
font-size: 0.75rem;
font-weight: 700;
min-width: 2rem;
height: 2rem;
line-height: 2rem;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-badge.p-badge-secondary {
background-color: transparent;
@ -3393,6 +3396,18 @@
background-color: #E57373;
color: #212529;
}
.p-badge.p-badge-l {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
.p-tag {
background: #4DB6AC;

1
src/components/badge/Badge.css
View File

@ -7,6 +7,7 @@
.p-tag {
display: inline-block;
text-align: center;
line-height: 1;
}
.p-tag.p-tag-rounded {

17
src/views/badge/BadgeDemo.vue
View File

@ -52,14 +52,9 @@
<h3>Sizes</h3>
<div class="badges">
<span class="p-badge" style="font-size: 1em">2</span>
<span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
<span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
<span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
<span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
<span class="p-badge">2</span>
<span class="p-badge p-badge-l p-badge-sucess">4</span>
<span class="p-badge p-badge-xl p-badge-warning">6</span>
</div>
</div>
@ -85,16 +80,16 @@ export default {
<style lang="scss" scoped>
.badges {
.p-badge, .p-tag {
margin-right: .5em;
margin-right: .5rem;
}
}
.p-button {
margin-right: .5em;
margin-right: .5rem;
}
.p-overlay-badge {
margin-right: 2em;
margin-right: 2rem;
}
/deep/ h1, h2 {

29
src/views/badge/BadgeDoc.vue
View File

@ -52,13 +52,11 @@
</CodeHighlight>
<h3>Sizes</h3>
<p>Badge sizes are adjusted according to their font size.</p>
<p>Badge sizes are adjusted with additional classes.</p>
<CodeHighlight>
&lt;span class="p-badge" style="font-size: 1em"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-success" style="font-size: 1.25em"&gt;8&lt;/span&gt;
&lt;span class="p-badge p-badge-info" style="font-size: 1.5em"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-warning" style="font-size: 1.75em"&gt;12&lt;/span&gt;
&lt;span class="p-badge p-badge-danger" style="font-size: 2em"&gt;3&lt;/span&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
</CodeHighlight>
<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
@ -93,6 +91,14 @@
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-l</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-l</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
@ -152,14 +158,9 @@
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;div class="badges"&gt;
&lt;span class="p-badge" style="font-size: 1em"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-success" style="font-size: 1.25em"&gt;8&lt;/span&gt;
&lt;span class="p-badge p-badge-info" style="font-size: 1.5em"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-warning" style="font-size: 1.75em"&gt;12&lt;/span&gt;
&lt;span class="p-badge p-badge-danger" style="font-size: 2em"&gt;3&lt;/span&gt;
&lt;h1&gt;Heading 1 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
&lt;/div&gt;
</template>
</CodeHighlight>