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

Demo upodate

pull/358/head
cagataycivici 2020-06-21 00:29:10 +03:00
parent de731d66f5
commit ef6f86abf9
27 changed files with 636 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/themes/arya-blue/theme.css
View File

@ -9,6 +9,7 @@
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #64B5F6;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #383838;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #81C784;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #383838;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #FFD54F;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #383838;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #BA68C8;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #383838;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #383838;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

10
public/themes/bootstrap4-dark/theme.css
View File

@ -9,6 +9,7 @@
--text-color-secondary: rgba(255, 255, 255, 0.6);
--primary-color: #8dd0ff;
--primary-color-text: #151515;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f19ea6;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #3f4b5b;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #151515;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.9375rem;
}
.p-inputtext.p-input-filled {
background: #3f4b5b;
}
.p-float-label label {
left: 0.75rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #f19ea6;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #3f4b5b;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #151515;

10
public/themes/bootstrap4-light/theme.css
View File

@ -9,6 +9,7 @@
--text-color-secondary: $shade600;
--primary-color: #007bff;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #dc3545;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: rgba(0, 0, 0, 0.03);
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.9375rem;
}
.p-inputtext.p-input-filled {
background: rgba(0, 0, 0, 0.03);
}
.p-float-label label {
left: 0.75rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #dc3545;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: rgba(0, 0, 0, 0.03);
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: #888888;
--primary-color: #FFE082;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #4b4b4b;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: #888888;
--primary-color: #81D4FA;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #4b4b4b;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: #888888;
--primary-color: #C5E1A5;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #4b4b4b;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -9,6 +9,7 @@
--text-color-secondary: #888888;
--primary-color: #F48FB1;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #4b4b4b;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #e57373;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #4b4b4b;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

1058
public/themes/material-light/theme.css
View File

File diff suppressed because it is too large Load Diff

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

@ -9,6 +9,7 @@
--text-color-secondary: #848484;
--primary-color: #007ad9;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: #848484;
--primary-color: #007ad9;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: #848484;
--primary-color: #41b883;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: #848484;
--primary-color: #007ad9;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #a80000;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: #6c757d;
--primary-color: #7B95A3;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: e7a3a3;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.53625rem 0.53625rem;
}
.p-inputtext.p-input-filled {
background: #f4f4f4;
}
.p-float-label label {
left: 0.429rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: e7a3a3;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f4f4f4;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: $shade600;
--primary-color: #2196F3;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: $shade600;
--primary-color: #4CAF50;
--primary-color-text: #ffffff;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -9,6 +9,7 @@
--text-color-secondary: $shade600;
--primary-color: #FFC107;
--primary-color-text: #212529;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
* {
@ -343,9 +344,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +685,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #f8f9fa;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +941,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #f44336;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #f8f9fa;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -343,9 +343,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +684,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #304562;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +940,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -343,9 +343,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +684,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #304562;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +940,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -343,9 +343,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #212529;
@ -687,9 +684,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #304562;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +940,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #212529;

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

@ -343,9 +343,6 @@
.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-checkbox.p-input-filled .p-checkbox-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-checkbox .p-checkbox-box {
border-color: #ffffff;
@ -687,9 +684,6 @@
font-size: 1.25rem;
padding: 0.625rem 0.625rem;
}
.p-inputtext.p-input-filled {
background: #304562;
}
.p-float-label label {
left: 0.5rem;
@ -946,9 +940,6 @@
.p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
border-color: #ef9a9a;
}
.p-radiobutton.p-input-filled .p-radiobutton-box:not(.p-highlight) {
background-color: #304562;
}
.p-highlight .p-radiobutton .p-radiobutton-box {
border-color: #ffffff;

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

@ -23,7 +23,7 @@ body {
overflow-x: hidden;
overflow-y: auto;
background-color: var(--surface-a);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: var(--font-family);
font-weight: normal;
color: var(--text-color);
-webkit-font-smoothing: antialiased;

113
src/assets/styles/app/app.css
View File

@ -94,6 +94,9 @@ a {
transform: none;
}
}
pre[class*=language-]:before, pre[class*=language-]:after {
display: none !important;
}
pre[class*=language-] code {
border-left: 10px solid var(--surface-d) !important;
box-shadow: none !important;
@ -414,6 +417,9 @@ p {
background-color: var(--surface-b);
color: var(--text-color);
padding-bottom: 0;
display: flex;
align-items: top;
justify-content: space-between;
}
.layout-content .content-section.introduction .feature-intro h1 span {
font-weight: 400;
@ -666,7 +672,6 @@ p {
.layout-config .layout-config-content-wrapper {
position: relative;
height: 100%;
padding: 0;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
color: var(--text-color);
background-color: var(--surface-e);
@ -707,6 +712,25 @@ p {
.layout-config .layout-config-content {
overflow: auto;
height: 100%;
padding: 2rem;
}
.layout-config .config-scale {
display: flex;
align-items: center;
margin: 1rem 0 2rem 0;
}
.layout-config .config-scale .p-button {
margin-right: 0.5rem;
border: 0 none !important;
}
.layout-config .config-scale i {
margin-right: 0.5rem;
font-size: 0.75rem;
color: var(--text-color-secondary);
}
.layout-config .config-scale i.scale-active {
font-size: 1.25rem;
color: #2196f3;
}
.layout-config .layout-config-close {
position: absolute;
@ -733,89 +757,33 @@ p {
outline: 0 none;
box-shadow: 0 0 0 0.2rem #BBDEFB;
}
.layout-config h3 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.5rem;
font-weight: 500;
color: var(--text-color);
}
.layout-config .p-grid > div {
padding: 1rem 0.5rem;
padding: 1rem;
text-align: center;
}
.layout-config .p-grid > div span {
display: block;
}
.layout-config p {
margin: 0 0 2rem 0;
}
.layout-config .config-scale {
display: flex;
align-items: center;
margin: 1rem 0 2rem 0;
}
.layout-config .config-scale .p-button {
margin-right: 0.5rem;
border: 0 none !important;
}
.layout-config .config-scale i {
margin-right: 0.5rem;
font-size: 0.75rem;
color: var(--text-color-secondary);
}
.layout-config .config-scale i.scale-active {
font-size: 1.25rem;
color: #2196f3;
}
.layout-config .free-themes {
padding: 2rem;
.layout-config .p-grid > div button {
position: relative;
display: inline-flex;
justify-content: center;
}
.layout-config .free-themes img {
width: 50px;
border-radius: 4px;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
transition: transform 0.2s;
}
.layout-config .free-themes span {
font-size: 12px;
}
.layout-config .current-theme {
box-shadow: 0 0 0 0.2rem #BBDEFB;
}
.layout-config .p-grid button {
position: relative;
display: inline-flex;
justify-content: center;
transition: box-shadow 0.2s, transform 0.2s;
}
.layout-config .p-grid button i {
line-height: inherit;
font-size: 28px;
color: #41b783;
position: absolute;
top: 0;
left: 50%;
margin-left: -18px;
margin-top: -18px;
padding: 0.18rem;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
background-color: #ffffff;
border-radius: 50%;
width: 36px;
height: 36px;
}
.layout-config .p-grid button:focus {
box-shadow: 0 0 0 0.2rem #BBDEFB;
}
.layout-config .p-grid button:hover {
.layout-config .free-themes img:hover {
transform: scale(1.1);
}
.layout-config .premium-themes {
padding: 2rem;
.layout-config .free-themes span {
font-size: 0.875rem;
margin-top: 0.25rem;
}
.layout-config .premium-themes img {
width: 100%;
transition: box-shadow 0.2s, transform 0.2s;
transition: transform 0.2s;
}
.layout-config .premium-themes img:hover {
transform: scale(1.1);
@ -1076,6 +1044,12 @@ p {
.layout-content .content-section.submenu ul li {
width: 50%;
}
.layout-content .content-section.introduction {
flex-direction: column;
}
.layout-content .content-section.introduction .app-inputstyleswitch {
margin-top: 1.5rem;
}
.home .introduction > div {
width: 100%;
@ -1220,6 +1194,9 @@ a {
transform: none;
}
}
pre[class*=language-]:before, pre[class*=language-]:after {
display: none !important;
}
pre[class*=language-] code {
border-left: 10px solid var(--surface-d) !important;
box-shadow: none !important;

1
src/views/formlayout/FormLayoutDemo.vue
View File

@ -6,6 +6,7 @@
<p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">

10
src/views/inputtext/InputTextDoc.vue
View File

@ -48,16 +48,14 @@ import InputText from 'primevue/inputtext';
<h5>Outlined vs Filled</h5>
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
to the field. Appling <i>p-input-filled</i> to an element or wrapping the container with <i>p-input-filled</i> enables the filled style. If you prefer
to use filled inputs in the entire application, use a global container such as document body or the application container to apply the style class.</p>
<CodeHighlight>
&lt;InputText type="text" class="p-input-filled" /&gt;
</CodeHighlight>
to the field. Appling <i>p-input-filled</i> to an ancestor of an input <i>p-input-filled</i> enables the filled style. If you prefer
to use filled inputs in the entire application, use a global container such as document body or the application element to apply the style class.</p>
<CodeHighlight>
&lt;div class="p-input-filled"&gt;
&lt;InputText type="text" /&gt;
&lt;InputText type="text" /&gt;
&lt;InputText type="text" /&gt;
&lt;/div&gt;
</CodeHighlight>