Skip to content

Commit

Permalink
Fixed #2400 - Material Focus Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Nov 8, 2021
1 parent cb3719b commit 1f7199e
Show file tree
Hide file tree
Showing 34 changed files with 1,274 additions and 66 deletions.
2 changes: 1 addition & 1 deletion public/themes/arya-blue/theme.css
View file
Expand Up @@ -1467,7 +1467,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #64B5F6;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/arya-green/theme.css
View file
Expand Up @@ -1467,7 +1467,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #81C784;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/arya-orange/theme.css
View file
Expand Up @@ -1467,7 +1467,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #FFD54F;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/arya-purple/theme.css
View file
Expand Up @@ -1467,7 +1467,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #BA68C8;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/bootstrap4-dark-blue/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #8dd0ff;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/bootstrap4-dark-purple/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #c298d8;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/bootstrap4-light-blue/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #007bff;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/bootstrap4-light-purple/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #883cae;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/fluent-light/theme.css
View file
Expand Up @@ -1467,7 +1467,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #323130;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/luna-amber/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #FFE082;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/luna-blue/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #81D4FA;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/luna-green/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #C5E1A5;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
2 changes: 1 addition & 1 deletion public/themes/luna-pink/theme.css
View file
Expand Up @@ -1475,7 +1475,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #F48FB1;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down
161 changes: 156 additions & 5 deletions public/themes/md-dark-deeppurple/theme.css
View file
Expand Up @@ -1491,7 +1491,7 @@
.p-rating .p-rating-icon:first-child {
margin-left: 0;
}
.p-rating .p-rating-icon.pi-star {
.p-rating .p-rating-icon.pi-star-fill {
color: #CE93D8;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
Expand Down Expand Up @@ -5769,6 +5769,13 @@
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}

.p-breadcrumb .p-menuitem-link {
padding: 0.25rem 0.5rem;
}
.p-breadcrumb .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-button {
font-weight: 500;
min-width: 4rem;
Expand Down Expand Up @@ -6329,6 +6336,51 @@
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}

.fc {
/* FullCalendar 4 */
/* FullCalendar 5 */
}
.fc.fc-unthemed .fc-toolbar .fc-button:focus {
background: rgba(206, 147, 216, 0.76);
}
.fc.fc-unthemed .fc-toolbar .fc-button:active {
background: rgba(206, 147, 216, 0.68);
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:focus {
background: rgba(206, 147, 216, 0.76);
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:active {
background: rgba(206, 147, 216, 0.68);
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus {
background: #1c1c1c;
border-color: rgba(255, 255, 255, 0.12);
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight {
background: #262626;
border-color: rgba(255, 255, 255, 0.12);
}
.fc.fc-theme-standard .fc-toolbar .fc-button:focus {
background: rgba(206, 147, 216, 0.76);
}
.fc.fc-theme-standard .fc-toolbar .fc-button:active {
background: rgba(206, 147, 216, 0.68);
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:focus {
background: rgba(206, 147, 216, 0.76);
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:active {
background: rgba(206, 147, 216, 0.68);
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus {
background: #1c1c1c;
border-color: rgba(255, 255, 255, 0.12);
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-dayGridMonth-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridWeek-button:focus.p-highlight, .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button.fc-timeGridDay-button:focus.p-highlight {
background: #262626;
border-color: rgba(255, 255, 255, 0.12);
}

.p-galleria .p-galleria-indicators {
padding: 1rem;
}
Expand Down Expand Up @@ -6453,6 +6505,9 @@
.p-fieldset .p-fieldset-legend {
border: 0 none;
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
Expand Down Expand Up @@ -6491,9 +6546,27 @@
background: transparent;
}

.p-listbox-item .p-ink {
.p-listbox .p-listbox-list .p-listbox-item .p-ink {
background-color: rgba(206, 147, 216, 0.16);
}
.p-listbox .p-listbox-list .p-listbox-item:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}

.p-megamenu .p-menuitem .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-menu .p-menuitem .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-menubar .p-menuitem .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
background-image: none;
Expand All @@ -6506,9 +6579,18 @@
box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
}

.p-multiselect-item .p-ink {
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
background-color: rgba(206, 147, 216, 0.16);
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-input-filled .p-multiselect {
border-bottom-left-radius: 0;
Expand Down Expand Up @@ -6587,9 +6669,22 @@
padding: 1.5rem;
}

.p-orderlist .p-orderlist-list .p-orderlist-item:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}

.p-paginator {
justify-content: flex-end;
}
.p-paginator .p-paginator-element:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-paginator .p-paginator-element:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}

.p-input-filled .p-password.p-invalid > .p-inputtext {
border-color: transparent;
Expand Down Expand Up @@ -6623,6 +6718,9 @@
.p-panel .p-panel-title {
font-size: 1.25rem;
}
.p-panel .p-panel-header-icon:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-panelmenu .p-panelmenu-panel {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
Expand Down Expand Up @@ -6650,9 +6748,19 @@
.p-panelmenu .p-panelmenu-panel .p-panelmenu-header.p-disabled .p-panelmenu-header-link > * {
opacity: 0.38;
}
.p-panelmenu .p-panelmenu-panel .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-link:focus {
.p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-link:focus {
background: rgba(255, 255, 255, 0.04);
}
.p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-picklist .p-picklist-list .p-picklist-item:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}

.p-progressbar {
border-radius: 0;
Expand Down Expand Up @@ -6694,6 +6802,28 @@
background-color: #1e1e1e;
}

.p-rating .p-rating-icon {
border-radius: 50%;
width: 2rem;
height: 2rem;
display: inline-flex;
justify-content: center;
align-items: center;
margin-left: 0;
}
.p-rating .p-rating-icon:focus {
background: rgba(206, 147, 216, 0.12);
}
.p-rating .p-rating-icon.p-rating-cancel:focus {
background: rgba(244, 68, 53, 0.12);
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
background: rgba(244, 68, 53, 0.04);
}

.p-selectbutton .p-button:focus {
background: #1c1c1c;
border-color: rgba(255, 255, 255, 0.12);
Expand All @@ -6703,6 +6833,10 @@
border-color: rgba(255, 255, 255, 0.12);
}

.p-slidemenu .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-slider .p-slider-handle {
transition: transform 0.2s, box-shadow 0.2s;
transform: scale(0.7);
Expand Down Expand Up @@ -6738,7 +6872,7 @@
flex-direction: row;
flex: 1 1 auto;
overflow: visible;
padding: 0 0.5rem;
padding: 1rem 0.5rem;
}
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
background-color: #9e9d9e;
Expand All @@ -6752,6 +6886,9 @@
margin: 0;
padding-left: 0.5rem;
}
.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
background: rgba(255, 255, 255, 0.12);
}
.p-steps .p-steps-item.p-highlight .p-steps-number {
background-color: #CE93D8;
color: #121212;
Expand Down Expand Up @@ -6787,6 +6924,10 @@
transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
}

.p-tieredmenu .p-menuitem-link:focus {
background: rgba(255, 255, 255, 0.12);
}

.p-toolbar {
border: 0 none;
}
Expand All @@ -6799,6 +6940,13 @@
display: none;
}

.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
background: rgba(255, 255, 255, 0.12);
}
.p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
background: rgba(206, 147, 216, 0.24);
}

.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
Expand Down Expand Up @@ -6913,6 +7061,9 @@
.p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
background-color: rgba(206, 147, 216, 0.12);
}
.p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
background-color: rgba(206, 147, 216, 0.12);
}
.p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
display: block;
position: absolute;
Expand Down

0 comments on commit 1f7199e

Please sign in to comment.