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;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #191919;
padding: 0.857rem 1rem;
background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #1ea04c;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #191919;
padding: 0.857rem 1rem;
background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #cc285c;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #191919;
padding: 0.857rem 1rem;
background: #191919;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #888888;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #007ad9;
padding: 0.857rem 1rem;
background: #007ad9;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #333333;
padding: 0.857rem 1rem;
background: #333333;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #c8c8c8;
padding: 0.857rem 1rem;
background: #f4f4f4;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #848484;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #333333;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #c8c8c8;
padding: 0.857rem 1rem;
background: #f4f4f4;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #848484;
@ -2187,16 +2187,16 @@
border-radius: 3px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2168,7 +2168,7 @@
color: #ffffff;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #7B95A3;
padding: 0.857rem 1rem;
background: #7B95A3;
@ -2176,10 +2176,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: auto;
height: auto;
color: #ffffff;
@ -2187,16 +2187,16 @@
border-radius: 2px;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #495057;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #dee2e6;
padding: 1rem;
background: #f8f9fa;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #9ba2aa;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -2185,7 +2185,7 @@
color: #ebedef;
}
.p-panel .p-panel-titlebar {
.p-panel .p-panel-header {
border: 1px solid #2C3E50;
padding: 1rem;
background: #1C2833;
@ -2193,10 +2193,10 @@
border-top-right-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;
}
.p-panel .p-panel-titlebar .p-panel-titlebar-icon {
.p-panel .p-panel-header .p-panel-header-icon {
width: 2rem;
height: 2rem;
color: #aeb6bf;
@ -2204,16 +2204,16 @@
border-radius: 50%;
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;
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-offset: 0;
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;
}
.p-panel .p-panel-content {

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

@ -1,12 +1,12 @@
<template>
<div :class="containerClass">
<div class="p-panel-titlebar">
<div class="p-panel-header">
<slot name="header">
<span class="p-panel-title" v-if="header" :id="ariaId + '_header'">{{header}}</span>
</slot>
<div class="p-panel-icons">
<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">
<span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
</a>
@ -63,7 +63,7 @@ export default {
</script>
<style>
.p-panel-titlebar {
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
@ -73,7 +73,7 @@ export default {
line-height: 1;
}
.p-panel-titlebar-icon {
.p-panel-header-icon {
display: inline-flex;
justify-content: center;
align-items: center;

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

@ -19,7 +19,7 @@
<h3>Advanced</h3>
<Panel header="Godfather I" :toggleable="true">
<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>
</a>
<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>
<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>
<CodeHighlight>
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;Panel header="Godfather I"&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;/a&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>
</tr>
<tr>
<td>p-panel-titlebar</td>
<td>p-panel-header</td>
<td>Header section.</td>
</tr>
<tr>
@ -152,7 +152,11 @@ import Panel from 'primevue/panel';
<td>Title text of panel.</td>
</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>
</tr>
<tr>
@ -185,7 +189,7 @@ import Panel from 'primevue/panel';
&lt;h3&gt;Advanced&lt;/h3&gt;
&lt;Panel header="Godfather I" :toggleable="true"&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;/a&gt;
&lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt;