Skip to content

Commit

Permalink
Fixed #972 - Listbox Enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Feb 15, 2021
1 parent 3bec317 commit 5205954
Show file tree
Hide file tree
Showing 41 changed files with 1,310 additions and 27 deletions.
12 changes: 8 additions & 4 deletions public/demo/menu/menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,8 @@
"children": [
{
"name": "AutoComplete",
"to": "/autocomplete"
"to": "/autocomplete",
"badge": "New"
},
{
"name": "Calendar",
Expand All @@ -154,7 +155,8 @@
},
{
"name": "Dropdown",
"to": "/dropdown"
"to": "/dropdown",
"badge": "New"
},
{
"name": "Editor",
Expand Down Expand Up @@ -194,11 +196,13 @@
},
{
"name": "Listbox",
"to": "/listbox"
"to": "/listbox",
"badge": "New"
},
{
"name": "MultiSelect",
"to": "/multiselect"
"to": "/multiselect",
"badge": "New"
},
{
"name": "Password",
Expand Down
28 changes: 28 additions & 0 deletions public/themes/arya-blue/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
Expand Down Expand Up @@ -604,6 +611,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -973,6 +987,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1107,6 +1128,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
28 changes: 28 additions & 0 deletions public/themes/arya-green/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
Expand Down Expand Up @@ -604,6 +611,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -973,6 +987,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1107,6 +1128,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
28 changes: 28 additions & 0 deletions public/themes/arya-orange/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 213, 79, 0.16);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
Expand Down Expand Up @@ -604,6 +611,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -973,6 +987,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1107,6 +1128,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
28 changes: 28 additions & 0 deletions public/themes/arya-purple/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(186, 104, 200, 0.16);
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #ef9a9a;
Expand Down Expand Up @@ -604,6 +611,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -973,6 +987,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1107,6 +1128,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #1e1e1e;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
28 changes: 28 additions & 0 deletions public/themes/bootstrap4-dark-blue/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: #151515;
background: #8dd0ff;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #f19ea6;
Expand Down Expand Up @@ -608,6 +615,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -977,6 +991,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #e3f3fe;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1111,6 +1132,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
28 changes: 28 additions & 0 deletions public/themes/bootstrap4-dark-purple/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,13 @@
color: #151515;
background: #c298d8;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}

.p-calendar.p-invalid.p-component > .p-inputtext {
border-color: #f19ea6;
Expand Down Expand Up @@ -608,6 +615,13 @@
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -977,6 +991,13 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #f0e6f5;
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down Expand Up @@ -1111,6 +1132,13 @@
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
margin: 0;
padding: 0.75rem 1rem;
color: rgba(255, 255, 255, 0.87);
background: #2a323d;
font-weight: 600;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
padding: 0.5rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
Expand Down
Loading

0 comments on commit 5205954

Please sign in to comment.