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

Demo update and theme fixes

pull/345/head
cagataycivici 2020-05-13 02:17:11 +03:00
parent a66e1b7bee
commit 25d33e8d0d
12 changed files with 820 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #64B5F6;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #64B5F6;
color: #212529;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #BBDEFB;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #4DD0E1;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #4DD0E1;
color: #212529;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #B2EBF2;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #9575CD;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #9575CD;
color: #ffffff;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #D1C4E9;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #81C784;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #81C784;
color: #212529;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #C8E6C9;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #7986CB;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #7986CB;
color: #ffffff;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #C5CAE9;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #FFD54F;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #FFD54F;
color: #212529;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #FFECB3;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #BA68C8;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #BA68C8;
color: #ffffff;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #E1BEE7;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

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

@ -911,6 +911,7 @@
color: #ebedef;
margin-left: 0.5rem;
transition: color 0.2s, box-shadow 0.2s;
font-size: 1.143rem;
}
.p-rating .p-rating-icon.p-rating-cancel {
color: #e74c3c;
@ -1860,6 +1861,9 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
margin-right: 0.5rem;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
outline: 0 none;
outline-offset: 0;
@ -1992,6 +1996,12 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:hover {
color: #4DB6AC;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
color: #ebedef;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
background: #4DB6AC;
color: #212529;
@ -2914,6 +2924,9 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #B2DFDB;
}
.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
padding: 0 0 0 1rem;
}

26
src/AppTopBar.vue
View File

@ -17,14 +17,14 @@
<li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li>
<li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li>
<li class="topbar-submenu-header">FREE COMPONENT THEMES</li>
<li><a @click="changeTheme($event, 'saga-blue', false)"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
<li><a @click="changeTheme($event, 'saga-cyan', false)"><img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" /><span>Saga Cyan</span></a></li>
<li><a @click="changeTheme($event, 'saga-deeppurple', false)"><img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" /><span>Saga Deep Purple</span></a></li>
<li><a @click="changeTheme($event, 'saga-green', false)"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
<li><a @click="changeTheme($event, 'saga-indigo', false)"><img src="./assets/images/themes/saga-indigo.png" alt="Saga Indigo" /><span>Saga Indigo</span></a></li>
<li><a @click="changeTheme($event, 'saga-orange', false)"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
<li><a @click="changeTheme($event, 'saga-purple', false)"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
<li><a @click="changeTheme($event, 'saga-teal', false)"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
<li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
<li><a @click="changeTheme($event, 'saga-cyan')"><img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" /><span>Saga Cyan</span></a></li>
<li><a @click="changeTheme($event, 'saga-deeppurple')"><img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" /><span>Saga Deep Purple</span></a></li>
<li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
<li><a @click="changeTheme($event, 'saga-indigo')"><img src="./assets/images/themes/saga-indigo.png" alt="Saga Indigo" /><span>Saga Indigo</span></a></li>
<li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
<li><a @click="changeTheme($event, 'saga-purple')"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
<li><a @click="changeTheme($event, 'saga-teal')"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
<li><a @click="changeTheme($event, 'vela-blue')"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
<li><a @click="changeTheme($event, 'vela-cyan')"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" /><span>Vela Cyan</span></a></li>
<li><a @click="changeTheme($event, 'vela-deeppurple')"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" /><span>Vela Deep Purple</span></a></li>
@ -33,15 +33,15 @@
<li><a @click="changeTheme($event, 'vela-orange')"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
<li><a @click="changeTheme($event, 'vela-purple')"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
<li><a @click="changeTheme($event, 'vela-teal')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
<li><a @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
<li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
<li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
<li><a @click="changeTheme($event, 'nova-vue', false)"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
<li><a @click="changeTheme($event, 'nova-light')"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
<li><a @click="changeTheme($event, 'nova-dark')"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
<li><a @click="changeTheme($event, 'nova-colored')"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
<li><a @click="changeTheme($event, 'nova-vue')"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
<li><a @click="changeTheme($event, 'luna-amber')"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
<li><a @click="changeTheme($event, 'luna-blue')"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
<li><a @click="changeTheme($event, 'luna-green')"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
<li><a @click="changeTheme($event, 'luna-pink')"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
<li><a @click="changeTheme($event, 'rhea', false)"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
<li><a @click="changeTheme($event, 'rhea')"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
</ul>
</transition>
</li>

5
src/assets/styles/app/_content.scss
View File

@ -135,11 +135,12 @@
}
i:not([class~="pi"]) {
background-color: #2196f3;
color: #ffffff;
background-color: var(--layer-0);
color: #2196f3;
font-family: Monaco, courier, monospace;
font-style: normal;
font-size: 12px;
font-weight: 500;
padding: 2px 4px;
letter-spacing: .5px;
border-radius: 3px;

8
src/assets/styles/app/_core.scss
View File

@ -120,15 +120,11 @@ pre[class*="language-"] code {
&.attr-name,
&.attr-string {
color: #4CAF50 !important;
color: #2196F3 !important;
}
&.attr-value {
color: #00ACC1 !important;
}
&.language-javascript {
color: pink !important;
color: #4CAF50 !important;
}
&.punctuation {