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

Fixed #321 - Refactor p-panel-titlebar to p-panel-header

pull/345/head
cagataycivici 2020-05-17 14:10:34 +03:00
parent 4bbe650b34
commit 760d65c35d
27 changed files with 158 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2168,7 +2168,7 @@
color: #FFB300; color: #FFB300;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #191919; border: 1px solid #191919;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #191919; background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #888888; color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #dedede; color: #dedede;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ffe8b3; box-shadow: 0 0 0 0.2rem #ffe8b3;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #1ea04c; color: #1ea04c;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #191919; border: 1px solid #191919;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #191919; background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #888888; color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #dedede; color: #dedede;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #88e9aa; box-shadow: 0 0 0 0.2rem #88e9aa;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #cc285c; color: #cc285c;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #191919; border: 1px solid #191919;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #191919; background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #888888; color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #dedede; color: #dedede;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #f1b6c8; box-shadow: 0 0 0 0.2rem #f1b6c8;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333; color: #333333;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #007ad9; border: 1px solid #007ad9;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #007ad9; background: #007ad9;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #ffffff; color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #5ab7ff; color: #5ab7ff;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333; color: #333333;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #333333; border: 1px solid #333333;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #333333; background: #333333;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #ffffff; color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #b4b4b4; color: #b4b4b4;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333; color: #333333;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #f4f4f4; background: #f4f4f4;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #848484; color: #848484;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #333333; color: #333333;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #c2e9d8; box-shadow: 0 0 0 0.2rem #c2e9d8;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333; color: #333333;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #f4f4f4; background: #f4f4f4;
@ -2176,10 +2176,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #848484; color: #848484;
@ -2187,16 +2187,16 @@
border-radius: 3px; border-radius: 3px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #333333; color: #333333;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff; box-shadow: 0 0 0 0.2rem #8dcdff;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #ffffff; color: #ffffff;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #7B95A3; border: 1px solid #7B95A3;
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
background: #7B95A3; background: #7B95A3;
@ -2176,10 +2176,10 @@
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 700; font-weight: 700;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: auto; width: auto;
height: auto; height: auto;
color: #ffffff; color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 2px; border-radius: 2px;
transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ffffff; color: #ffffff;
background: transparent; background: transparent;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #e4e9ec; box-shadow: 0 0 0 0.2rem #e4e9ec;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.857rem 1rem; padding: 0.857rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #BBDEFB; box-shadow: 0 0 0 0.2rem #BBDEFB;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #B2EBF2; box-shadow: 0 0 0 0.2rem #B2EBF2;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #D1C4E9; box-shadow: 0 0 0 0.2rem #D1C4E9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #C8E6C9; box-shadow: 0 0 0 0.2rem #C8E6C9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #C5CAE9; box-shadow: 0 0 0 0.2rem #C5CAE9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #FFECB3; box-shadow: 0 0 0 0.2rem #FFECB3;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #E1BEE7; box-shadow: 0 0 0 0.2rem #E1BEE7;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057; color: #495057;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
padding: 1rem; padding: 1rem;
background: #f8f9fa; background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #9ba2aa; color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #9ba2aa; color: #9ba2aa;
background: #e9ecef; background: #e9ecef;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #B2DFDB; box-shadow: 0 0 0 0.2rem #B2DFDB;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #BBDEFB; box-shadow: 0 0 0 0.1rem #BBDEFB;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #B2EBF2; box-shadow: 0 0 0 0.1rem #B2EBF2;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #D1C4E9; box-shadow: 0 0 0 0.1rem #D1C4E9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #C8E6C9; box-shadow: 0 0 0 0.1rem #C8E6C9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #C5CAE9; box-shadow: 0 0 0 0.1rem #C5CAE9;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #FFECB3; box-shadow: 0 0 0 0.1rem #FFECB3;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #E1BEE7; box-shadow: 0 0 0 0.1rem #E1BEE7;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef; color: #ebedef;
} }
.p-panel .p-panel-titlebar { .p-panel .p-panel-header {
border: 1px solid #2C3E50; border: 1px solid #2C3E50;
padding: 1rem; padding: 1rem;
background: #1C2833; background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
.p-panel .p-panel-titlebar .p-panel-title { .p-panel .p-panel-header .p-panel-title {
font-weight: 600; font-weight: 600;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon { .p-panel .p-panel-header .p-panel-header-icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
color: #aeb6bf; color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s; transition: background-color 0.2s, background-color 0.2s, box-shadow 0.2s;
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover { .p-panel .p-panel-header .p-panel-header-icon:hover {
color: #ebedef; color: #ebedef;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
.p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus { .p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.1rem #B2DFDB; box-shadow: 0 0 0 0.1rem #B2DFDB;
} }
.p-panel.p-panel-toggleable .p-panel-titlebar { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.p-panel .p-panel-content { .p-panel .p-panel-content {

8
src/components/panel/Panel.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<div class="p-panel-titlebar"> <div class="p-panel-header">
<slot name="header"> <slot name="header">
<span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span> <span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
</slot> </slot>
<div class="p-panel-icons"> <div class="p-panel-icons">
<slot name="icons"></slot> <slot name="icons"></slot>
<a v-if="toggleable" tabindex="0" class="p-panel-titlebar-icon p-panel-titlebar-toggler" @click="toggle" @keydown.enter="toggle" <a v-if="toggleable" tabindex="0" class="p-panel-header-icon p-panel-toggler" @click="toggle" @keydown.enter="toggle"
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed"> :id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span> <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
</a> </a>
@ -63,7 +63,7 @@ export default {
</script> </script>
<style> <style>
.p-panel-titlebar { .p-panel-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -73,7 +73,7 @@ export default {
line-height: 1; line-height: 1;
} }
.p-panel-titlebar-icon { .p-panel-header-icon {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
src/views/panel/PanelDemo.vue
View File

@ -19,7 +19,7 @@
<h3>Advanced</h3> <h3>Advanced</h3>
<Panel header="Godfather I" :toggleable="true"> <Panel header="Godfather I" :toggleable="true">
<template #icons> <template #icons>
<a tabindex="0" class="p-panel-titlebar-icon" @click="toggle"> <a tabindex="0" class="p-panel-header-icon" @click="toggle">
<span class="pi pi-cog"></span> <span class="pi pi-cog"></span>
</a> </a>
<Menu id="config_menu" ref="menu" :model="items" :popup="true" /> <Menu id="config_menu" ref="menu" :model="items" :popup="true" />

14
src/views/panel/PanelDoc.vue
View File

@ -57,13 +57,13 @@ import Panel from 'primevue/panel';
</CodeHighlight> </CodeHighlight>
<h3>Custom Icons</h3> <h3>Custom Icons</h3>
<p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-titlebar-icon</i> <p>Additional icons can be placed at the header section of the panel using the special <i>icons</i> slot. For a unified look, it is suggest to add <i>.p-panel-header-icon</i>
class to your icons.</p> class to your icons.</p>
<CodeHighlight> <CodeHighlight>
&lt;h3&gt;Advanced&lt;/h3&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;Panel header="Godfather I"&gt; &lt;Panel header="Godfather I"&gt;
&lt;template #icons&gt; &lt;template #icons&gt;
&lt;a tabindex="0" class="p-panel-titlebar-icon" @click="toggle"&gt; &lt;a tabindex="0" class="p-panel-header-icon" @click="toggle"&gt;
&lt;span class="pi pi-cog"&gt;&lt;/span&gt; &lt;span class="pi pi-cog"&gt;&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt; &lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt;
@ -144,7 +144,7 @@ import Panel from 'primevue/panel';
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar</td> <td>p-panel-header</td>
<td>Header section.</td> <td>Header section.</td>
</tr> </tr>
<tr> <tr>
@ -152,7 +152,11 @@ import Panel from 'primevue/panel';
<td>Title text of panel.</td> <td>Title text of panel.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar-toggler</td> <td>p-panel-header-icon</td>
<td>Action icons inside header.</td>
</tr>
<tr>
<td>p-panel-toggler</td>
<td>Toggle icon.</td> <td>Toggle icon.</td>
</tr> </tr>
<tr> <tr>
@ -185,7 +189,7 @@ import Panel from 'primevue/panel';
&lt;h3&gt;Advanced&lt;/h3&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;Panel header="Godfather I" :toggleable="true"&gt; &lt;Panel header="Godfather I" :toggleable="true"&gt;
&lt;template #icons&gt; &lt;template #icons&gt;
&lt;a tabindex="0" class="p-panel-titlebar-icon" @click="toggle"&gt; &lt;a tabindex="0" class="p-panel-header-icon" @click="toggle"&gt;
&lt;span class="pi pi-cog"&gt;&lt;/span&gt; &lt;span class="pi pi-cog"&gt;&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt; &lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt;