diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index 4224bad5250..1ffe0f842ba 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -49,15 +49,22 @@ export const CALENDAR_VALUE_ACCESSOR: any = { @Component({ selector: 'p-calendar', template: ` - + @@ -81,7 +87,20 @@ export const CALENDAR_VALUE_ACCESSOR: any = { -
- - @@ -143,6 +181,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (click)="onNextButtonClick($event)" [style.display]="numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'" type="button" + [attr.aria-label]="nextIconAriaLabel" pRipple > @@ -152,7 +191,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
- +
@@ -205,6 +247,9 @@ export const CALENDAR_VALUE_ACCESSOR: any = { pRipple > {{ m }} +
+ {{ m }} +
@@ -217,6 +262,9 @@ export const CALENDAR_VALUE_ACCESSOR: any = { pRipple > {{ y }} +
+ {{ y }} +
@@ -233,6 +281,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('nextHour')" pRipple > @@ -250,6 +299,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('prevHour')" pRipple > @@ -271,6 +321,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('nextMinute')" pRipple > @@ -288,6 +339,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('prevMinute')" pRipple > @@ -309,6 +361,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('nextSecond')" pRipple > @@ -326,6 +379,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" + [attr.aria-label]="getTranslation('prevSecond')" pRipple > @@ -333,12 +387,12 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
- {{ pm ? 'PM' : 'AM' }} - @@ -428,6 +482,12 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { * @group Props */ @Input() ariaLabelledBy: string | undefined; + /** + * Defines a string that labels the input for accessibility. + * @group Props + */ + @Input() ariaLabel: string | undefined; + /** * Defines a string that labels the icon button for accessibility. * @group Props @@ -1018,6 +1078,8 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { attributeSelector: Nullable; + panelId: Nullable; + _numberOfMonths: number = 1; _firstDayOfWeek!: number; @@ -1034,12 +1096,25 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { return this._locale; } + get iconButtonAriaLabel() { + return this.iconAriaLabel ? this.iconAriaLabel : this.getTranslation('chooseDate'); + } + + get prevIconAriaLabel() { + return this.currentView === 'year' ? this.getTranslation('prevDecade') : this.currentView === 'month' ? this.getTranslation('prevYear') : this.getTranslation('prevMonth'); + } + + get nextIconAriaLabel() { + return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth'); + } + constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService) { this.window = this.document.defaultView as Window; } ngOnInit() { this.attributeSelector = UniqueComponentId(); + this.panelId = this.attributeSelector + '_panel'; const date = this.defaultDate || new Date(); this.createResponsiveStyle(); this.currentMonth = date.getMonth(); @@ -1863,6 +1938,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { //escape case 27: + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; event.preventDefault(); break; @@ -1879,6 +1955,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { this.trapFocus(event); } else if (event.keyCode === 27) { if (this.overlayVisible) { + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; event.preventDefault(); } @@ -1993,6 +2070,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { //escape case 27: { + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; event.preventDefault(); break; @@ -2073,6 +2151,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { //escape case 27: { + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; event.preventDefault(); break; @@ -2154,6 +2233,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { //escape case 27: { + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; event.preventDefault(); break; @@ -2311,9 +2391,22 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { focusableElements[focusedIndex - 1].focus(); } } else { - if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) { + if (focusedIndex == -1) { + if (this.timeOnly) { + focusableElements[0].focus(); + } else { + let spanIndex = 0; + + for (let i = 0; i < focusableElements.length; i++) { + if (focusableElements[i].tagName === 'SPAN') spanIndex = i; + } + + focusableElements[spanIndex].focus(); + } + } else if (focusedIndex === focusableElements.length - 1) { if (!this.focusTrap && focusedIndex != -1) return this.hideOverlay(); - else focusableElements[0].focus(); + + focusableElements[0].focus(); } else { focusableElements[focusedIndex + 1].focus(); } @@ -2710,6 +2803,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { } hideOverlay() { + this.inputfieldViewChild?.nativeElement.focus(); this.overlayVisible = false; this.clearTimePickerTimer(); @@ -2817,6 +2911,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { this.maskClickListener = this.renderer.listen(this.mask, 'click', (event: any) => { this.disableModality(); + this.overlayVisible = false; }); this.renderer.appendChild(this.document.body, this.mask); DomHandler.blockBodyScroll(); @@ -2848,7 +2943,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { } if (!hasBlockerMasks) { - DomHandler.blockBodyScroll(); + DomHandler.unblockBodyScroll(); } this.unbindAnimationEndListener(); diff --git a/src/app/components/chart/chart.ts b/src/app/components/chart/chart.ts index 80ef6d465a5..2a364f11f9d 100755 --- a/src/app/components/chart/chart.ts +++ b/src/app/components/chart/chart.ts @@ -9,7 +9,7 @@ import Chart from 'chart.js/auto'; selector: 'p-chart', template: `
- +
`, changeDetection: ChangeDetectionStrategy.OnPush, @@ -44,6 +44,16 @@ export class UIChart implements AfterViewInit, OnDestroy { * @group Props */ @Input() responsive: boolean = true; + /** + * Used to define a string that autocomplete attribute the current element. + * @group Props + */ + @Input() ariaLabel: string | undefined; + /** + * Establishes relationships between the component and label(s) where its value should be one or more element IDs. + * @group Props + */ + @Input() ariaLabelledBy: string | undefined; /** * Data to display. * @group Props diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index b3da382f5b2..35c85c61fe3 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -133,7 +133,7 @@ export class DropdownItem { [attr.aria-disabled]="disabled" [attr.id]="inputId" role="combobox" - [attr.aria-label]="ariaLabel" + [attr.aria-label]="ariaLabel || (label() === 'p-emptylabel' ? undefined : label())" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-haspopup]="'listbox'" [attr.aria-expanded]="overlayVisible" @@ -200,14 +200,16 @@ export class DropdownItem {
+ > +
@@ -303,6 +305,16 @@ export class DropdownItem {
+
@@ -749,7 +761,9 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV @ViewChild('overlay') overlayViewChild: Nullable; - @ViewChild('firstHiddenFocusableElementOnOverlay') firstHiddenFocusableElementOnOverlay: Nullable; + @ViewChild('firstHiddenFocusableEl') firstHiddenFocusableElementOnOverlay: Nullable; + + @ViewChild('lastHiddenFocusableEl') lastHiddenFocusableElementOnOverlay: Nullable; @ContentChildren(PrimeTemplate) templates: Nullable>; @@ -1592,7 +1606,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV onTabKey(event, pressedInInputText = false) { if (!pressedInInputText) { if (this.overlayVisible && this.hasFocusableElements()) { - DomHandler.focus(this.firstHiddenFocusableElementOnOverlay.nativeElement); + DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); event.preventDefault(); } else { if (this.focusedOptionIndex() !== -1) { @@ -1609,8 +1623,17 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV DomHandler.focus(focusableEl); } + onLastHiddenFocus(event) { + const focusableEl = + event.relatedTarget === this.focusInputViewChild?.nativeElement + ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') + : this.focusInputViewChild?.nativeElement; + + DomHandler.focus(focusableEl); + } + hasFocusableElements() { - return DomHandler.getFocusableElements(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not(.p-hidden-focusable)').length > 0; + return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; } onBackspaceKey(event: KeyboardEvent, pressedInInputText = false) { diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index e2d074d091a..e2c5a5d068f 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -1,36 +1,36 @@ +import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop'; +import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; import { - NgModule, + AfterContentInit, + AfterViewChecked, + ChangeDetectionStrategy, + ChangeDetectorRef, Component, + ContentChildren, ElementRef, - AfterViewChecked, - AfterContentInit, + EventEmitter, + Inject, Input, + NgModule, Output, - ContentChildren, + PLATFORM_ID, QueryList, + Renderer2, TemplateRef, - EventEmitter, ViewChild, - ChangeDetectionStrategy, - ViewEncapsulation, - ChangeDetectorRef, - Inject, - Renderer2, - PLATFORM_ID + ViewEncapsulation } from '@angular/core'; -import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { ButtonModule } from 'primeng/button'; -import { SharedModule, PrimeTemplate, FilterService } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; -import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; -import { RippleModule } from 'primeng/ripple'; -import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop'; import { AngleDoubleDownIcon } from 'primeng/icons/angledoubledown'; import { AngleDoubleUpIcon } from 'primeng/icons/angledoubleup'; -import { AngleUpIcon } from 'primeng/icons/angleup'; import { AngleDownIcon } from 'primeng/icons/angledown'; +import { AngleUpIcon } from 'primeng/icons/angleup'; import { SearchIcon } from 'primeng/icons/search'; +import { RippleModule } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; +import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; import { OrderListFilterEvent, OrderListFilterOptions, OrderListSelectionChangeEvent } from './orderlist.interface'; /** * OrderList is used to managed the order of a collection. @@ -43,36 +43,37 @@ import { OrderListFilterEvent, OrderListFilterOptions, OrderListSelectionChangeE [ngClass]="{ 'p-orderlist p-component': true, 'p-orderlist-striped': stripedRows, 'p-orderlist-controls-left': controlsPosition === 'left', 'p-orderlist-controls-right': controlsPosition === 'right' }" [ngStyle]="style" [class]="styleClass" + [attr.data-pc-section]="'root'" > -
- - - -
-
-
+
+
{{ header }}
-
+
-
+
- - + +
-
    +
      • -
    • +
      • -
    • +
      • @@ -145,6 +166,21 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * @group Props */ @Input() styleClass: string | undefined; + /** + * Index of the element in tabbing order. + * @group Props + */ + @Input() tabindex: number | undefined; + /** + * Defines a string that labels the input for accessibility. + * @group Props + */ + @Input() ariaLabel: string | undefined; + /** + * Specifies one or more IDs in the DOM that labels the input field. + * @group Props + */ + @Input() ariaLabelledBy: string | undefined; /** * Inline style of the list element. * @group Props @@ -220,10 +256,10 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * @group Props */ @Input() set selection(val: any[]) { - this._selection = val; + this.d_selection = val; } get selection(): any[] { - return this._selection; + return this.d_selection; } /** * Array of values to be displayed in the component. @@ -280,6 +316,22 @@ export class OrderList implements AfterViewChecked, AfterContentInit { public filterTemplate: Nullable>; + get moveUpAriaLabel() { + return this.config.translation.aria ? this.config.translation.aria.moveUp : undefined; + } + + get moveTopAriaLabel() { + return this.config.translation.aria ? this.config.translation.aria.moveTop : undefined; + } + + get moveDownAriaLabel() { + return this.config.translation.aria ? this.config.translation.aria.moveDown : undefined; + } + + get moveBottomAriaLabel() { + return this.config.translation.aria ? this.config.translation.aria.moveBottom : undefined; + } + moveUpIconTemplate: Nullable>; moveTopIconTemplate: Nullable>; @@ -292,7 +344,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { filterOptions: Nullable; - _selection: any[] = []; + d_selection: any[] = []; movedUp: Nullable; @@ -304,13 +356,25 @@ export class OrderList implements AfterViewChecked, AfterContentInit { id: string = UniqueComponentId(); + focused: boolean = false; + + focusedOptionIndex: number = -1; + public filterValue: Nullable; public visibleOptions: Nullable; public _value: any[] | undefined; - constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService) {} + constructor( + @Inject(DOCUMENT) private document: Document, + @Inject(PLATFORM_ID) private platformId: any, + private renderer: Renderer2, + public el: ElementRef, + public cd: ChangeDetectorRef, + public filterService: FilterService, + public config: PrimeNGConfig + ) {} ngOnInit() { if (this.responsive) { @@ -391,29 +455,39 @@ export class OrderList implements AfterViewChecked, AfterContentInit { } } - onItemClick(event: Event, item: any, index: number) { + onItemClick(event, item: any, index: number) { this.itemTouched = false; - let selectedIndex = ObjectUtils.findIndexInList(item, this.selection); + let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection); let selected = selectedIndex !== -1; let metaSelection = this.itemTouched ? false : this.metaKeySelection; - if (metaSelection && event instanceof MouseEvent) { - let metaKey = event.metaKey || event.ctrlKey || event.shiftKey; + const selectedId = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]')[index].getAttribute('id'); + + this.focusedOptionIndex = selectedId; + + if (metaSelection) { + let metaKey = event.metaKey || event.ctrlKey; if (selected && metaKey) { - this._selection = this._selection.filter((val) => val !== item); + this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex); } else { - this._selection = metaKey ? [...this._selection, item] : [item]; + this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : []; + ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value); } } else { - this._selection = [item]; + if (selected) { + this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex); + } else { + this.d_selection = this.d_selection ? [...this.d_selection] : []; + ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value); + } } //binding - this.selectionChange.emit(this._selection); + this.selectionChange.emit(this.d_selection); //event - this.onSelectionChange.emit({ originalEvent: event, value: this._selection }); + this.onSelectionChange.emit({ originalEvent: event, value: this.d_selection }); } onFilterKeyup(event: KeyboardEvent) { @@ -457,7 +531,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { } isSelected(item: any) { - return ObjectUtils.findIndexInList(item, this.selection) !== -1; + return ObjectUtils.findIndexInList(item, this.d_selection) !== -1; } isEmpty() { @@ -567,42 +641,178 @@ export class OrderList implements AfterViewChecked, AfterContentInit { } moveItemInArray(this.value as any[], previousIndex, currentIndex); + this.changeFocusedOptionIndex(currentIndex); this.onReorder.emit([event.item.data]); } } - onItemKeydown(event: KeyboardEvent, item: any, index: number) { - let listItem = event.currentTarget; + onListFocus(event) { + const focusableEl = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="item"]') + if (focusableEl) { + const findIndex = ObjectUtils.findIndexInList(focusableEl, this.listViewChild.nativeElement.children); + this.focused = true; + const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : focusableEl ? findIndex : -1; - switch (event.which) { - //down - case 40: - var nextItem = this.findNextItem(listItem); - if (nextItem) { - nextItem.focus(); - } + this.changeFocusedOptionIndex(index); + } + } - event.preventDefault(); + onListBlur(event) { + this.focused = false; + this.focusedOptionIndex = -1; + } + + onItemKeydown(event: KeyboardEvent) { + switch (event.code) { + case 'ArrowDown': + this.onArrowDownKey(event); break; - //up - case 38: - var prevItem = this.findPrevItem(listItem); - if (prevItem) { - prevItem.focus(); - } + case 'ArrowUp': + this.onArrowUpKey(event); + break; + + case 'Home': + this.onHomeKey(event); + break; + + case 'End': + this.onEndKey(event); + break; + + case 'Enter': + this.onEnterKey(event); + break; - event.preventDefault(); + case 'Space': + this.onSpaceKey(event); break; - //enter - case 13: - this.onItemClick(event, item, index); - event.preventDefault(); + case 'KeyA': + if (event.ctrlKey) { + this.d_selection = [...this.value]; + this.selectionChange.emit(this.d_selection); + } + + default: break; } } + onOptionMouseDown(index) { + this.focused = true; + this.focusedOptionIndex = index; + } + + onArrowDownKey(event) { + const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex); + + this.changeFocusedOptionIndex(optionIndex); + + if (event.shiftKey) { + this.onEnterKey(event); + } + + event.preventDefault(); + } + onArrowUpKey(event) { + const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex); + + this.changeFocusedOptionIndex(optionIndex); + + if (event.shiftKey) { + this.onEnterKey(event); + } + + event.preventDefault(); + } + + onHomeKey(event) { + if (event.ctrlKey && event.shiftKey) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + + this.d_selection = [...this.value].slice(0, matchedOptionIndex + 1); + this.selectionChange.emit(this.d_selection); + } else { + this.changeFocusedOptionIndex(0); + } + + event.preventDefault(); + } + + onEndKey(event) { + if (event.ctrlKey && event.shiftKey) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + + this.d_selection = [...this.value].slice(matchedOptionIndex, items.length); + this.selectionChange.emit(this.d_selection); + } else { + this.changeFocusedOptionIndex(DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]').length - 1); + } + + event.preventDefault(); + } + + onEnterKey(event) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + + this.onItemClick(event, this.value[matchedOptionIndex], matchedOptionIndex); + + event.preventDefault(); + } + + onSpaceKey(event) { + if (event.shiftKey) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.value]); + const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`); + const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem); + + this.d_selection = [...this.value].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1); + this.selectionChange.emit(this.d_selection); + } else { + this.onEnterKey(event); + } + } + + findNextOptionIndex(index) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + + return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; + } + + findPrevOptionIndex(index) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + const matchedOptionIndex = [...items].findIndex((link) => link.id === index); + + return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; + } + + changeFocusedOptionIndex(index) { + const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]'); + + let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index; + + this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1; + + this.scrollInView(this.focusedOptionIndex); + } + + scrollInView(id) { + const element = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id="${id}"]`); + + if (element) { + element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); + } + } + findNextItem(item: any): HTMLElement | null { let nextItem = item.nextElementSibling; @@ -623,6 +833,10 @@ export class OrderList implements AfterViewChecked, AfterContentInit { } } + focusedOptionId() { + return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; + } + createStyle() { if (isPlatformBrowser(this.platformId)) { if (!this.styleElement) { @@ -636,17 +850,17 @@ export class OrderList implements AfterViewChecked, AfterContentInit { .p-orderlist[${this.id}] { flex-direction: column; } - + .p-orderlist[${this.id}] .p-orderlist-controls { padding: var(--content-padding); flex-direction: row; } - + .p-orderlist[${this.id}] .p-orderlist-controls .p-button { margin-right: var(--inline-spacing); margin-bottom: 0; } - + .p-orderlist[${this.id}] .p-orderlist-controls .p-button:last-child { margin-right: 0; } diff --git a/src/app/components/organizationchart/organizationchart.ts b/src/app/components/organizationchart/organizationchart.ts index 042b9af3307..4709714e1e7 100755 --- a/src/app/components/organizationchart/organizationchart.ts +++ b/src/app/components/organizationchart/organizationchart.ts @@ -1,62 +1,61 @@ -import { NgModule, Component, ElementRef, Input, Output, AfterContentInit, EventEmitter, TemplateRef, Inject, forwardRef, ContentChildren, QueryList, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, OnDestroy } from '@angular/core'; -import { trigger, state, style, transition, animate } from '@angular/animations'; +import { animate, state, style, transition, trigger } from '@angular/animations'; import { CommonModule } from '@angular/common'; -import { SharedModule } from 'primeng/api'; -import { TreeNode } from 'primeng/api'; -import { PrimeTemplate } from 'primeng/api'; -import { Subject, Subscription } from 'rxjs'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation, forwardRef } from '@angular/core'; +import { PrimeTemplate, SharedModule, TreeNode } from 'primeng/api'; +import { DomHandler } from 'primeng/dom'; import { ChevronDownIcon } from 'primeng/icons/chevrondown'; import { ChevronUpIcon } from 'primeng/icons/chevronup'; -import { DomHandler } from 'primeng/dom'; -import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, OrganizationChartNodeSelectEvent, OrganizationChartNodeUnSelectEvent } from './organizationchart.interface'; import { Nullable } from 'primeng/ts-helpers'; +import { Subject, Subscription } from 'rxjs'; +import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, OrganizationChartNodeSelectEvent, OrganizationChartNodeUnSelectEvent } from './organizationchart.interface'; @Component({ selector: '[pOrganizationChartNode]', template: ` -
- - + + - - + - + - - - + + - - + @@ -129,7 +128,7 @@ export class OrganizationChartNode implements OnDestroy { @Component({ selector: 'p-organizationChart', template: ` -
+
@@ -170,7 +209,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = { {{ month.weekNumbers[j] }} - + +
+ {{ date.day }} +
+
{{ node.label }}
- + - - + + - +
-
+
+
-
+ 		+
    
+
`, diff --git a/src/app/components/overlay/overlay.ts b/src/app/components/overlay/overlay.ts index d94f3996e4d..32eee0082b2 100644 --- a/src/app/components/overlay/overlay.ts +++ b/src/app/components/overlay/overlay.ts @@ -616,7 +616,7 @@ export class Overlay implements AfterContentInit, OnDestroy { this.zone.runOutsideAngular(() => { this.documentKeyboardListener = this.renderer.listen(this.window, 'keydown', (event) => { - if (!this.overlayOptions.hideOnEscape || event.keyCode !== 27) { + if (this.overlayOptions.hideOnEscape === false || event.code !== 'Escape') { return; } diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index d6c07db80a7..809b61c5794 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -1,18 +1,16 @@ -import { NgModule, Component, OnInit, Input, Output, ChangeDetectorRef, EventEmitter, TemplateRef, OnChanges, SimpleChanges, ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, ContentChildren, QueryList, ElementRef } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, OnChanges, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { DropdownModule } from 'primeng/dropdown'; -import { PrimeTemplate, SelectItem } from 'primeng/api'; -import { RippleModule } from 'primeng/ripple'; -import { SharedModule } from 'primeng/api'; -import { InputNumberModule } from 'primeng/inputnumber'; +import { PrimeTemplate, SelectItem, SharedModule } from 'primeng/api'; +import { DropdownChangeEvent, DropdownModule } from 'primeng/dropdown'; import { AngleDoubleLeftIcon } from 'primeng/icons/angledoubleleft'; import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright'; import { AngleLeftIcon } from 'primeng/icons/angleleft'; import { AngleRightIcon } from 'primeng/icons/angleright'; -import { PaginatorState } from './paginator.interface'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { RippleModule } from 'primeng/ripple'; import { Nullable } from 'primeng/ts-helpers'; -import { DropdownChangeEvent } from 'primeng/dropdown'; +import { PaginatorState } from './paginator.interface'; /** * Paginator is a generic component to display content in paged format. * @group Components @@ -20,18 +18,35 @@ import { DropdownChangeEvent } from 'primeng/dropdown'; @Component({ selector: 'p-paginator', template: ` -
-
+
+
{{ currentPageReport }} - - - - -
-
-
+
+
{{ sourceHeader }}
-
+
-
+
- - + +
-
    +
      • -
    • +
      • -
    • +
-
- - - -
-
-
+
+
{{ targetHeader }}
-
+
-
+
- - + +
-
    +
      • -
    • +
      • -
    • +
-
- - - -
@@ -265,6 +363,11 @@ export class PickList implements AfterViewChecked, AfterContentInit { * @group Props */ @Input() sourceHeader: string | undefined; + /** + * Index of the element in tabbing order. + * @group Props + */ + @Input() tabindex: number | undefined; /** * Defines a string that labels the move to right button for accessibility. * @group Props diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts index 4bf66b44772..8501e1f9b1a 100644 --- a/src/app/components/scroller/scroller.ts +++ b/src/app/components/scroller/scroller.ts @@ -23,12 +23,11 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { PrimeTemplate, SharedModule } from 'primeng/api'; +import { PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { SpinnerIcon } from 'primeng/icons/spinner'; -import { ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEvent, ScrollerToType } from './scroller.interface'; -import { ScrollerOptions } from 'primeng/api'; import { Nullable, VoidListener } from 'primeng/ts-helpers'; +import { ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEvent, ScrollerToType } from './scroller.interface'; /** * Scroller is a performance-approach to handle huge data efficiently. * @group Components @@ -45,19 +44,21 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers'; [class]="_styleClass" [ngClass]="{ 'p-scroller': true, 'p-scroller-inline': inline, 'p-both-scroll': both, 'p-horizontal-scroll': horizontal }" (scroll)="onContainerScroll($event)" + [attr.data-pc-name]="'scroller'" + [attr.data-pc-section]="'root'" > -
+
-
-
+
+
@@ -68,7 +69,7 @@ import { Nullable, VoidListener } from 'primeng/ts-helpers'; - +
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 537597a1014..f65337efa1b 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -1,13 +1,16 @@ import { animate, AnimationEvent, style, transition, trigger } from '@angular/animations'; import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; import { + AfterContentChecked, AfterContentInit, + AfterViewChecked, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, + DoCheck, ElementRef, EventEmitter, HostListener, @@ -218,10 +221,11 @@ export class TableService { [attr.id]="id + '-table'" > - + - - + + @@ -1133,7 +1138,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable public tableService: TableService, public cd: ChangeDetectorRef, public filterService: FilterService, - public overlayService: OverlayService + public overlayService: OverlayService, + public config: PrimeNGConfig ) { this.window = this.document.defaultView as Window; } @@ -1402,7 +1408,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable dataToRender(data: any) { const _data = data || this.processedData; - + + if (_data && this.paginator) { const first = this.lazy ? 0 : this.first; return _data.slice(first, first + this.rows); @@ -1660,6 +1667,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.preventSelectionSetterPropagation = true; if (this.isMultipleSelectionMode() && event.originalEvent.shiftKey && this.anchorRowIndex != null) { + DomHandler.clearSelection(); if (this.rangeRowIndex != null) { this.clearSelectionRange(event.originalEvent); @@ -1819,7 +1827,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } } - selectRange(event: MouseEvent, rowIndex: number) { + selectRange(event: MouseEvent | KeyboardEvent, rowIndex: number) { let rangeStart, rangeEnd; if (this.anchorRowIndex > rowIndex) { @@ -1857,11 +1865,11 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.onRowSelect.emit({ originalEvent: event, data: rangeRowsData, type: 'row' }); } - clearSelectionRange(event: MouseEvent) { + clearSelectionRange(event: MouseEvent | KeyboardEvent) { let rangeStart, rangeEnd; let rangeRowIndex = this.rangeRowIndex; let anchorRowIndex = this.anchorRowIndex; - + if (rangeRowIndex > anchorRowIndex) { rangeStart = this.anchorRowIndex; rangeEnd = this.rangeRowIndex; @@ -3358,9 +3366,12 @@ export class SortableColumn implements OnInit, OnDestroy { } } + @HostListener('keydown.space', ['$event']) @HostListener('keydown.enter', ['$event']) onEnterKey(event: MouseEvent) { this.onClick(event); + + event.preventDefault(); } isEnabled() { @@ -3472,7 +3483,9 @@ export class SortIcon implements OnInit, OnDestroy { class: 'p-element', '[class.p-selectable-row]': 'isEnabled()', '[class.p-highlight]': 'selected', - '[attr.tabindex]': 'isEnabled() ? 0 : undefined' + '[attr.tabindex]': 'setRowTabIndex()', + '[attr.data-p-highlight]': 'selected', + '[attr.data-p-selectable-row]' : 'true' } }) export class SelectableRow implements OnInit, OnDestroy { @@ -3486,7 +3499,7 @@ export class SelectableRow implements OnInit, OnDestroy { subscription: Subscription | undefined; - constructor(public dt: Table, public tableService: TableService) { + constructor(public dt: Table, public tableService: TableService, private el: ElementRef) { if (this.isEnabled()) { this.subscription = this.dt.tableService.selectionSource$.subscribe(() => { this.selected = this.dt.isSelected(this.data); @@ -3494,6 +3507,12 @@ export class SelectableRow implements OnInit, OnDestroy { } } + setRowTabIndex() { + if(this.dt.selectionMode === 'single' || this.dt.selectionMode === 'multiple') { + return !this.dt.selection ? 0 : this.dt.anchorRowIndex === this.index ? 0 : -1; + } + } + ngOnInit() { if (this.isEnabled()) { this.selected = this.dt.isSelected(this.data); @@ -3518,8 +3537,47 @@ export class SelectableRow implements OnInit, OnDestroy { } } - @HostListener('keydown.arrowdown', ['$event']) - onArrowDownKeyDown(event: KeyboardEvent) { + @HostListener('keydown', ['$event']) + onKeyDown(event:KeyboardEvent){ + switch(event.code) { + case 'ArrowDown': + this.onArrowDownKey(event); + break; + + case 'ArrowUp': + this.onArrowUpKey(event); + break; + + case 'Home': + this.onHomeKey(event); + break; + + case 'End': + this.onEndKey(event); + break; + + case 'Space': + this.onSpaceKey(event); + break; + + case 'Enter': + this.onEnterKey(event); + break; + + default: + if(event.code === 'KeyA' && (event.metaKey || event.ctrlKey)){ + const data = this.dt.dataToRender(this.dt.rows); + this.dt.selection = [...data]; + this.dt.selectRange(event, data.length -1); + + event.preventDefault(); + } + break; + + } + } + + onArrowDownKey(event: KeyboardEvent) { if (!this.isEnabled()) { return; } @@ -3534,8 +3592,7 @@ export class SelectableRow implements OnInit, OnDestroy { event.preventDefault(); } - @HostListener('keydown.arrowup', ['$event']) - onArrowUpKeyDown(event: KeyboardEvent) { + onArrowUpKey(event: KeyboardEvent) { if (!this.isEnabled()) { return; } @@ -3550,10 +3607,7 @@ export class SelectableRow implements OnInit, OnDestroy { event.preventDefault(); } - @HostListener('keydown.enter', ['$event']) - @HostListener('keydown.shift.enter', ['$event']) - @HostListener('keydown.meta.enter', ['$event']) - onEnterKeyDown(event: KeyboardEvent) { + onEnterKey(event: KeyboardEvent) { if (!this.isEnabled()) { return; } @@ -3564,22 +3618,82 @@ export class SelectableRow implements OnInit, OnDestroy { rowIndex: this.index }); } + + onEndKey(event: KeyboardEvent) { + const lastRow = this.findLastSelectableRow(); + lastRow && this.focusRowChange(this.el.nativeElement, lastRow) - @HostListener('keydown.pagedown') - @HostListener('keydown.pageup') - @HostListener('keydown.home') - @HostListener('keydown.end') - onPageDownKeyDown() { - if (this.dt.virtualScroll) { - (this.dt.scroller).elementViewChild.nativeElement.focus(); + if(event.ctrlKey && event.shiftKey) { + const data = this.dt.dataToRender(this.dt.rows); + const lastSelectableRowIndex = DomHandler.getAttribute(lastRow, 'index'); + + this.dt.anchorRowIndex = lastSelectableRowIndex; + this.dt.selection = data.slice(this.index, data.length); + this.dt.selectRange(event, this.index); } + event.preventDefault(); } - @HostListener('keydown.space') - onSpaceKeydown() { - if (this.dt.virtualScroll && !this.dt.editingCell) { - (this.dt.scroller).elementViewChild.nativeElement.focus(); + onHomeKey(event: KeyboardEvent) { + const firstRow = this.findFirstSelectableRow(); + + firstRow && this.focusRowChange(this.el.nativeElement, firstRow); + + if(event.ctrlKey && event.shiftKey) { + const data = this.dt.dataToRender(this.dt.rows); + const firstSelectableRowIndex = DomHandler.getAttribute(firstRow, 'index'); + + this.dt.anchorRowIndex = this.dt.anchorRowIndex || firstSelectableRowIndex; + this.dt.selection = data.slice(0, this.index + 1); + this.dt.selectRange(event, this.index) + + } + event.preventDefault(); + } + + onSpaceKey(event) { + this.onEnterKey(event); + + if(event.shiftKey && this.dt.selection !== null) { + const data = this.dt.dataToRender(this.dt.rows); + let index; + + if(ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) { + let firstSelectedRowIndex, lastSelectedRowIndex; + firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data); + lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data); + + index = this.index <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex; + } else { + index = ObjectUtils.findIndexInList(this.dt.selection, data); + } + + this.dt.anchorRowIndex = index; + this.dt.selection = index !== this.index ? data.slice(Math.min(index, this.index), Math.max(index, this.index) + 1) : [this.data]; + this.dt.selectRange(event, this.index) + + } + + event.preventDefault(); + } + + focusRowChange(firstFocusableRow, currentFocusedRow) { + firstFocusableRow.tabIndex = '-1'; + currentFocusedRow.tabIndex = '0'; + DomHandler.focus(currentFocusedRow); + } + + findLastSelectableRow() { + const rows = DomHandler.find(this.dt.el.nativeElement, '.p-selectable-row'); + + return rows ? rows[rows.length -1] : null; + } + + findFirstSelectableRow() { + const firstRow = DomHandler.findSingle(this.dt.el.nativeElement, '.p-selectable-row'); + + return firstRow; } findNextSelectableRow(row: HTMLTableRowElement): HTMLTableRowElement | null { @@ -4381,9 +4495,9 @@ export class CellEditor implements AfterContentInit { template: `
- +
-
+
@@ -4418,6 +4532,7 @@ export class TableRadioButton { constructor(public dt: Table, public cd: ChangeDetectorRef) { this.subscription = this.dt.tableService.selectionSource$.subscribe(() => { this.checked = this.dt.isSelected(this.value); + this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined; this.cd.markForCheck(); }); } @@ -4461,9 +4576,9 @@ export class TableRadioButton { template: `
- +
-
+
@@ -4503,6 +4618,7 @@ export class TableCheckbox { constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) { this.subscription = this.dt.tableService.selectionSource$.subscribe(() => { this.checked = this.dt.isSelected(this.value); + this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectRow : this.dt.config.translation.aria.unselectRow) : undefined; this.cd.markForCheck(); }); } @@ -4544,9 +4660,9 @@ export class TableCheckbox { template: `
- +
-
+
@@ -4582,6 +4698,7 @@ export class TableHeaderCheckbox { constructor(public dt: Table, public tableService: TableService, public cd: ChangeDetectorRef) { this.valueChangeSubscription = this.dt.tableService.valueSource$.subscribe(() => { this.checked = this.updateCheckedState(); + this.ariaLabel = this.ariaLabel || this.dt.config.translation.aria ? (this.checked ? this.dt.config.translation.aria.selectAll : this.dt.config.translation.aria.unselectAll) : undefined; }); this.selectionChangeSubscription = this.dt.tableService.selectionSource$.subscribe(() => { @@ -4797,6 +4914,7 @@ export class ReorderableRow implements AfterViewInit { type="button" class="p-column-filter-menu-button p-link" aria-haspopup="true" + [attr.aria-controls]="overlayId" [attr.aria-expanded]="overlayVisible" [ngClass]="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }" (click)="toggleMenu()" @@ -4814,6 +4932,9 @@ export class ReorderableRow implements AfterViewInit {
- +
@@ -4947,6 +5068,8 @@ export class ColumnFilter implements AfterContentInit { @ViewChild('icon') icon: Nullable; + @ViewChild('clearBtn') clearButtonViewChild: Nullable; + @ContentChildren(PrimeTemplate) templates: Nullable>; overlaySubscription: Subscription | undefined; @@ -4987,11 +5110,14 @@ export class ColumnFilter implements AfterContentInit { private window: Window; + overlayId: any; + constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public dt: Table, public renderer: Renderer2, public config: PrimeNGConfig, public overlayService: OverlayService, private cd: ChangeDetectorRef) { this.window = this.document.defaultView as Window; } ngOnInit() { + this.overlayId = UniqueComponentId(); if (!this.dt.filters[this.field]) { this.initFieldFilterConstraint(); } @@ -5112,11 +5238,13 @@ export class ColumnFilter implements AfterContentInit { addConstraint() { (this.dt.filters[this.field]).push({ value: null, matchMode: this.getDefaultMatchMode(), operator: this.getDefaultOperator() }); + DomHandler.focus(this.clearButtonViewChild.nativeElement); } removeConstraint(filterMeta: FilterMetadata) { this.dt.filters[this.field] = (this.dt.filters[this.field]).filter((meta) => meta !== filterMeta); this.dt._filter(); + DomHandler.focus(this.clearButtonViewChild.nativeElement); } onOperatorChange(value: any) { @@ -5132,6 +5260,7 @@ export class ColumnFilter implements AfterContentInit { toggleMenu() { this.overlayVisible = !this.overlayVisible; + } onToggleButtonKeyDown(event: KeyboardEvent) { @@ -5211,12 +5340,21 @@ export class ColumnFilter implements AfterContentInit { onOverlayAnimationEnd(event: AnimationEvent) { switch (event.toState) { + case 'visible': + this.focusOnFirstElement(); + break; case 'void': ZIndexUtils.clear(event.element); break; } } + focusOnFirstElement() { + if(this.overlay) { + DomHandler.focus(DomHandler.getFirstFocusableElement(this.overlay, '')) + } + } + getDefaultMatchMode(): string { if (this.matchMode) { return this.matchMode; diff --git a/src/app/components/timeline/timeline.ts b/src/app/components/timeline/timeline.ts index 57b8adc6efd..de09a41e42d 100755 --- a/src/app/components/timeline/timeline.ts +++ b/src/app/components/timeline/timeline.ts @@ -1,5 +1,5 @@ -import { NgModule, Component, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, ContentChildren, QueryList, TemplateRef } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core'; import { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api'; import { Nullable } from 'primeng/ts-helpers'; /** @@ -22,21 +22,23 @@ import { Nullable } from 'primeng/ts-helpers'; 'p-timeline-vertical': layout === 'vertical', 'p-timeline-horizontal': layout === 'horizontal' }" + [attr.data-pc-name]="'timeline'" + [attr.data-pc-section]="'root'" > -
-
+
+
-
+
-
+
-
+
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index b580b05510c..e9ea686a28d 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -63,7 +63,22 @@ import { (dragenter)="onDropPointDragEnter($event, -1)" (dragleave)="onDropPointDragLeave($event)" > -
  • +
  • - -
    -
    +
    @@ -68,7 +70,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
    -
    +
    @@ -88,8 +90,19 @@ export const TREESELECT_VALUE_ACCESSOR: any = { >
    + + -
    +
    +
    @@ -161,7 +184,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = { host: { class: 'p-element p-inputwrapper', '[class.p-inputwrapper-filled]': '!emptyValue', - '[class.p-inputwrapper-focus]': 'focused || overlayVisible', + '[class.p-inputwrapper-focus]': 'focused', '[class.p-treeselect-clearable]': 'showClear && !disabled' }, changeDetection: ChangeDetectionStrategy.OnPush, @@ -203,7 +226,12 @@ export class TreeSelect implements AfterContentInit { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: string | undefined; + @Input() tabindex: string | undefined = '0'; + /** + * Defines a string that labels the input for accessibility. + * @group Props + */ + @Input() ariaLabel: string | undefined; /** * Establishes relationships between the component and label(s) where its value should be one or more element IDs. * @group Props @@ -415,6 +443,10 @@ export class TreeSelect implements AfterContentInit { @ViewChild('overlay') overlayViewChild: Nullable; + @ViewChild('firstHiddenFocusableEl') firstHiddenFocusableElementOnOverlay: Nullable; + + @ViewChild('lastHiddenFocusableEl') lastHiddenFocusableElementOnOverlay: Nullable; + public filteredNodes: TreeNode[] | undefined | null; filterValue: Nullable = null; @@ -461,9 +493,12 @@ export class TreeSelect implements AfterContentInit { onModelTouched: Function = () => {}; + listId: string = ''; + constructor(public config: PrimeNGConfig, public cd: ChangeDetectorRef, public el: ElementRef, public overlayService: OverlayService) {} ngOnInit() { + this.listId = UniqueComponentId() + '_list'; this.updateTreeState(); } @@ -532,8 +567,13 @@ export class TreeSelect implements AfterContentInit { if (this.filter) { ObjectUtils.isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue); this.filterInputAutoFocus && this.filterViewChild?.nativeElement.focus(); - } + } else { + let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement); + if (focusableElements && focusableElements.length > 0) { + focusableElements[0].focus(); + } + } break; } } @@ -561,43 +601,38 @@ export class TreeSelect implements AfterContentInit { } onKeyDown(event: KeyboardEvent) { - switch (event.which) { + switch (event.code) { //down - case 40: - if (!this.overlayVisible && event.altKey) { + case 'ArrowDown': + if (!this.overlayVisible) { this.show(); - event.preventDefault(); - } else if (this.overlayVisible && this.panelEl?.nativeElement) { - let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement); - - if (focusableElements && focusableElements.length > 0) { - focusableElements[0].focus(); - } - event.preventDefault(); } + this.onArrowDown(event); + event.preventDefault(); break; //space - case 32: + case 'Space': + case 'Enter': if (!this.overlayVisible) { this.show(); event.preventDefault(); } break; - //enter and escape - case 13: - case 27: + //escape + case 'Escape': if (this.overlayVisible) { this.hide(); + this.focusInput?.nativeElement.focus(); event.preventDefault(); } break; //tab - case 9: - this.hide(); + case 'Tab': + this.onTabKey(event); break; default: @@ -614,6 +649,32 @@ export class TreeSelect implements AfterContentInit { }); } + onArrowDown(event: KeyboardEvent) { + if (this.overlayVisible && this.panelEl?.nativeElement) { + let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement, '.p-treenode'); + + if (focusableElements && focusableElements.length > 0) { + focusableElements[0].focus(); + } + + event.preventDefault(); + } + } + + onFirstHiddenFocus(event) { + const focusableEl = + event.relatedTarget === this.focusInput?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; + + DomHandler.focus(focusableEl); + } + + onLastHiddenFocus(event) { + const focusableEl = + event.relatedTarget === this.focusInput?.nativeElement ? DomHandler.getLastFocusableElement(this.overlayViewChild?.overlayViewChild?.nativeElement, ':not([data-p-hidden-focusable="true"])') : this.focusInput?.nativeElement; + + DomHandler.focus(focusableEl); + } + show() { this.overlayVisible = true; } @@ -640,6 +701,22 @@ export class TreeSelect implements AfterContentInit { return this.value !== null && ObjectUtils.isNotEmpty(this.value); } + onTabKey(event, pressedInInputText = false) { + if (!pressedInInputText) { + if (this.overlayVisible && this.hasFocusableElements()) { + DomHandler.focus(event.shiftKey ? this.lastHiddenFocusableElementOnOverlay.nativeElement : this.firstHiddenFocusableElementOnOverlay.nativeElement); + + event.preventDefault(); + } else { + this.overlayVisible && this.hide(this.filter); + } + } + } + + hasFocusableElements() { + return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not([data-p-hidden-focusable="true"])').length > 0; + } + resetFilter() { if (this.filter && !this.resetFilterOnHide) { this.filteredNodes = this.treeViewChild?.filteredNodes; @@ -769,6 +846,7 @@ export class TreeSelect implements AfterContentInit { if (this.selectionMode === 'single') { this.hide(); + this.focusInput?.nativeElement.focus(); } } diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index c96b5ebae3a..51a3e8d5edc 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -170,13 +170,13 @@ export class TreeTableService {
    - +
    - + - - + +
    @@ -2169,7 +2169,7 @@ export class TTBody {
    - +
    @@ -2204,9 +2204,9 @@ export class TTBody { - +
    - +
    @@ -2215,7 +2215,7 @@ export class TTBody {
    - +
    @@ -2432,7 +2432,8 @@ export class TTScrollableView implements AfterViewInit, OnDestroy { '[class.p-sortable-column]': 'isEnabled()', '[class.p-highlight]': 'sorted', '[attr.tabindex]': 'isEnabled() ? "0" : null', - '[attr.role]': '"columnheader"' + '[attr.role]': '"columnheader"', + '[attr.aria-sort]': 'ariaSorted' } }) export class TTSortableColumn implements OnInit, OnDestroy { @@ -2444,6 +2445,12 @@ export class TTSortableColumn implements OnInit, OnDestroy { subscription: Subscription | undefined; + get ariaSorted() { + if(this.sorted && this.tt.sortOrder < 0) return 'descending'; + else if (this.sorted && this.tt.sortOrder > 0) return 'ascending'; + else return 'none'; + } + constructor(public tt: TreeTable) { if (this.isEnabled()) { this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => { @@ -2734,7 +2741,9 @@ export class TTReorderableColumn implements AfterViewInit, OnDestroy { selector: '[ttSelectableRow]', host: { class: 'p-element', - '[class.p-highlight]': 'selected' + '[class.p-highlight]': 'selected', + '[attr.data-p-highlight]': 'selected', + '[attr.aria-checked]': 'selected' } }) export class TTSelectableRow implements OnInit, OnDestroy { @@ -2771,11 +2780,17 @@ export class TTSelectableRow implements OnInit, OnDestroy { } @HostListener('keydown', ['$event']) - onEnterKey(event: KeyboardEvent) { - if (event.which === 13) { - this.onClick(event); + onKeyDown(event: KeyboardEvent) { + switch(event.code){ + case 'Enter': + case 'Space': + this.onEnterKey(event); + break; + + default: + break; } - } + } @HostListener('touchend', ['$event']) onTouchEnd(event: Event) { @@ -2784,6 +2799,18 @@ export class TTSelectableRow implements OnInit, OnDestroy { } } + onEnterKey(event) { + if(this.tt.selectionMode === 'checkbox') { + this.tt.toggleNodeWithCheckbox({ + originalEvent: event, + rowNode: this.rowNode + }); + } else { + this.onClick(event); + } + event.preventDefault(); + } + isEnabled() { return this.ttSelectableRowDisabled !== true; } @@ -2901,7 +2928,7 @@ export class TTContextMenuRow { template: `
    - +
    @@ -3068,7 +3095,7 @@ export class TTHeaderCheckbox { @Directive({ selector: '[ttEditableColumn]', host: { - class: 'p-element' + class: 'p-element', } }) export class TTEditableColumn implements AfterViewInit { @@ -3281,78 +3308,187 @@ export class TreeTableCellEditor implements AfterContentInit { selector: '[ttRow]', host: { class: 'p-element', - '[attr.tabindex]': '"0"' + '[attr.tabindex]': "'0'", + '[attr.aria-expanded]': 'expanded', + '[attr.aria-level]': 'level', + '[attr.data-pc-section]': 'row', + '[attr.role]': 'row' } }) export class TTRow { + + get level() { + return this.rowNode?.['level'] + 1; + } + + get expanded() { + return this.rowNode?.node['expanded']; + } + @Input('ttRow') rowNode: any; constructor(public tt: TreeTable, public el: ElementRef, public zone: NgZone) {} @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { - switch (event.which) { - //down arrow - case 40: - let nextRow = this.el.nativeElement.nextElementSibling; - if (nextRow) { - nextRow.focus(); - } + switch (event.code) { + case 'ArrowDown': + this.onArrowDownKey(event); + break; - event.preventDefault(); + case 'ArrowUp': + this.onArrowUpKey(event); break; - //down arrow - case 38: - let prevRow = this.el.nativeElement.previousElementSibling; - if (prevRow) { - prevRow.focus(); - } + case 'ArrowRight': + this.onArrowRightKey(event); + break; - event.preventDefault(); + case 'ArrowLeft': + this.onArrowLeftKey(event); break; - //left arrow - case 37: - if (this.rowNode.node.expanded) { - this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); - this.rowNode.node.expanded = false; + case 'Tab': + this.onTabKey(event); + break; - this.tt.onNodeCollapse.emit({ - originalEvent: event, - node: this.rowNode.node - }); + case 'Home': + this.onHomeKey(event); + break; - this.tt.updateSerializedValue(); - this.tt.tableService.onUIUpdate(this.tt.value); - this.restoreFocus(); - } + case 'End': + this.onEndKey(event); break; - //right arrow - case 39: - if (!this.rowNode.node.expanded) { - this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); - this.rowNode.node.expanded = true; + default: + break; + } + } - this.tt.onNodeExpand.emit({ - originalEvent: event, - node: this.rowNode.node - }); + onArrowDownKey(event: KeyboardEvent) { + let nextRow = this.el?.nativeElement?.nextElementSibling; + if (nextRow) { + this.focusRowChange(event.currentTarget, nextRow); + } - this.tt.updateSerializedValue(); - this.tt.tableService.onUIUpdate(this.tt.value); - this.restoreFocus(); - } - break; + event.preventDefault(); + } + + onArrowUpKey(event: KeyboardEvent) { + let prevRow = this.el?.nativeElement?.previousElementSibling; + if (prevRow) { + this.focusRowChange(event.currentTarget, prevRow); } + + event.preventDefault(); + } + + onArrowRightKey(event: KeyboardEvent) { + const currentTarget = event.currentTarget; + const isHiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden'; + + if (!isHiddenIcon && !this.expanded && this.rowNode.node['children']) { + this.expand(event); + + currentTarget.tabIndex = -1; + } + event.preventDefault(); } - restoreFocus() { + onArrowLeftKey(event: KeyboardEvent) { + const container = this.tt.containerViewChild?.nativeElement; + const expandedRows = DomHandler.find(container, '[aria-expanded="true"]'); + const lastExpandedRow = expandedRows[expandedRows.length - 1]; + + if (this.expanded) { + this.collapse(event); + } + if (lastExpandedRow) { + this.tt.toggleRowIndex = DomHandler.index(lastExpandedRow); + } + this.restoreFocus(); + event.preventDefault(); + } + + onHomeKey(event: KeyboardEvent) { + const firstElement = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + firstElement && DomHandler.focus(firstElement); + event.preventDefault(); + } + + onEndKey(event: KeyboardEvent) { + const nodes = DomHandler.find(this.tt.containerViewChild?.nativeElement, `tr[aria-level="${this.level}"]`); + const lastElement = nodes[nodes.length - 1]; + DomHandler.focus(lastElement); + event.preventDefault(); + } + + onTabKey(event: KeyboardEvent) { + const rows = this.el.nativeElement ? [...DomHandler.find(this.el.nativeElement.parentNode, 'tr')] : undefined; + + if (rows && ObjectUtils.isNotEmpty(rows)) { + const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true'); + rows.forEach((row) => { + row.tabIndex = -1; + }); + + if (hasSelectedRow) { + const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true'); + selectedNodes[0].tabIndex = 0; + + return; + } + + rows[0].tabIndex = 0; + } + } + + expand(event: Event) { + this.tt.toggleRowIndex = DomHandler.index(this.el.nativeElement); + this.rowNode.node['expanded'] = true; + + this.tt.updateSerializedValue(); + this.tt.tableService.onUIUpdate(this.tt.value); + this.rowNode.node['children'] ? this.restoreFocus(this.tt.toggleRowIndex + 1) : this.restoreFocus(); + + this.tt.onNodeExpand.emit({ + originalEvent: event, + node: this.rowNode.node + }); + } + + collapse(event: Event) { + this.rowNode.node['expanded'] = false; + + this.tt.updateSerializedValue(); + this.tt.tableService.onUIUpdate(this.tt.value); + + this.tt.onNodeCollapse.emit({ originalEvent: event, node: this.rowNode.node }); + } + + focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant?) { + firstFocusableRow.tabIndex = '-1'; + currentFocusedRow.tabIndex = '0'; + + DomHandler.focus(currentFocusedRow); + } + + restoreFocus(index?) { this.zone.runOutsideAngular(() => { setTimeout(() => { - let row = DomHandler.findSingle(this.tt.containerViewChild?.nativeElement, '.p-treetable-tbody').children[this.tt.toggleRowIndex]; + const container = this.tt.containerViewChild?.nativeElement; + const row = DomHandler.findSingle(container, '.p-treetable-tbody').children[index || this.tt.toggleRowIndex]; + const rows = [...DomHandler.find(container, 'tr')]; + + rows && + rows.forEach((r) => { + if (!row.isSameNode(r)) { + r.tabIndex = -1; + } + }); + if (row) { + row.tabIndex = 0; row.focus(); } }, 25); @@ -3371,10 +3507,12 @@ export class TTRow { pRipple [style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'" [style.marginLeft]="rowNode.level * 16 + 'px'" + [attr.data-pc-section]="'rowtoggler'" + [attr.data-pc-group-section]="'rowactionbutton'" > - - + + diff --git a/src/app/components/virtualscroller/virtualscroller.ts b/src/app/components/virtualscroller/virtualscroller.ts index deeff546fc2..3980427daa3 100755 --- a/src/app/components/virtualscroller/virtualscroller.ts +++ b/src/app/components/virtualscroller/virtualscroller.ts @@ -1,8 +1,7 @@ import { CommonModule } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -import { BlockableUI, Footer, Header, PrimeTemplate, SharedModule } from 'primeng/api'; +import { BlockableUI, Footer, Header, PrimeTemplate, ScrollerOptions, SharedModule } from 'primeng/api'; import { Scroller, ScrollerModule } from 'primeng/scroller'; -import { ScrollerOptions } from 'primeng/api'; import { Nullable } from 'primeng/ts-helpers'; import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface'; /** @@ -12,12 +11,12 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface'; @Component({ selector: 'p-virtualScroller', template: ` -
    +
    -
    +
    @@ -26,7 +25,7 @@ import { VirtualScrollerLazyLoadEvent } from './virtualscroller.interface';
    -
    +
    diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index eca57eb0284..2e3d2179b1c 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -4995,6 +4995,13 @@ "type": "string", "description": "Placeholder text for the input." }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Establishes a string value that labels the component." + }, { "name": "ariaLabelledBy", "optional": false, @@ -26931,4 +26938,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/showcase/doc/chart/accessibilitydoc.ts b/src/app/showcase/doc/chart/accessibilitydoc.ts index 5e835d65c8d..b2010f1d35f 100644 --- a/src/app/showcase/doc/chart/accessibilitydoc.ts +++ b/src/app/showcase/doc/chart/accessibilitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `
    @@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
    -
    -     ` +
    ` }) export class AccessibilityDoc { @Input() id: string; @@ -25,10 +24,6 @@ export class AccessibilityDoc { @Input() title: string; code: Code = { - html: `` + html: `` }; } diff --git a/src/app/showcase/doc/dataview/accessibilitydoc.ts b/src/app/showcase/doc/dataview/accessibilitydoc.ts index 9604d8a7e68..8387bb2a5ba 100644 --- a/src/app/showcase/doc/dataview/accessibilitydoc.ts +++ b/src/app/showcase/doc/dataview/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -33,8 +33,7 @@ import { Component, Input } from '@angular/core';
    -
    - ` +
    ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/dialog/accessibilitydoc.ts b/src/app/showcase/doc/dialog/accessibilitydoc.ts index 9762175db2d..a881add0f38 100644 --- a/src/app/showcase/doc/dialog/accessibilitydoc.ts +++ b/src/app/showcase/doc/dialog/accessibilitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -67,8 +67,7 @@ import { Code } from '../../domain/code';
    -
    - ` +
    ` }) export class AccessibilityDoc { @Input() id: string; @@ -76,12 +75,12 @@ export class AccessibilityDoc { @Input() title: string; code: Code = { - html: ` +>

    Content

    ` diff --git a/src/app/showcase/doc/dock/accessibilitydoc.ts b/src/app/showcase/doc/dock/accessibilitydoc.ts index 7edea1c9d72..8daca1186d6 100644 --- a/src/app/showcase/doc/dock/accessibilitydoc.ts +++ b/src/app/showcase/doc/dock/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -56,8 +56,7 @@ import { Component, Input } from '@angular/core';
    -
    - ` +
    ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/src/app/showcase/doc/orderlist/accessibilitydoc.ts index 00d265d5562..3a39411e848 100644 --- a/src/app/showcase/doc/orderlist/accessibilitydoc.ts +++ b/src/app/showcase/doc/orderlist/accessibilitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -104,8 +104,7 @@ import { Code } from '../../domain/code';

    - - ` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -114,8 +113,8 @@ export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts index 75e1285d3f0..1a2d053a25e 100644 --- a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts +++ b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -34,8 +34,7 @@ import { Component, Input } from '@angular/core';

    - - ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/overlay/accessibilitydoc.ts b/src/app/showcase/doc/overlay/accessibilitydoc.ts index 8131dec68a5..a4acce5eef2 100644 --- a/src/app/showcase/doc/overlay/accessibilitydoc.ts +++ b/src/app/showcase/doc/overlay/accessibilitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -63,8 +63,7 @@ import { Code } from '../../domain/code';
    -
    - ` +
    ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/paginator/accessibilitydoc.ts b/src/app/showcase/doc/paginator/accessibilitydoc.ts index 727fbd25fe9..9c9a8b8813b 100644 --- a/src/app/showcase/doc/paginator/accessibilitydoc.ts +++ b/src/app/showcase/doc/paginator/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -49,8 +49,7 @@ import { Component, Input } from '@angular/core';

    Rows Per Page Dropdown Keyboard Support

    Refer to the dropdown documentation for more details about keyboard support.

     -
    -     ` +
    ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/picklist/accessibilitydoc.ts b/src/app/showcase/doc/picklist/accessibilitydoc.ts index 63b73aacdf0..b7a93eaf9e8 100644 --- a/src/app/showcase/doc/picklist/accessibilitydoc.ts +++ b/src/app/showcase/doc/picklist/accessibilitydoc.ts @@ -3,11 +3,11 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    - Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role + Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.

    @@ -104,8 +104,7 @@ import { Code } from '../../domain/code';

    - - ` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -114,8 +113,8 @@ export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/scroller/accessibilitydoc.ts b/src/app/showcase/doc/scroller/accessibilitydoc.ts index 592e5ab7a79..a7550d52f6c 100644 --- a/src/app/showcase/doc/scroller/accessibilitydoc.ts +++ b/src/app/showcase/doc/scroller/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';

    Keyboard Support

    Component does not include any built-in interactive elements.

    -     -     ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/table/accessibilitydoc.ts b/src/app/showcase/doc/table/accessibilitydoc.ts index 5e6577cf684..0dd79a59070 100644 --- a/src/app/showcase/doc/table/accessibilitydoc.ts +++ b/src/app/showcase/doc/table/accessibilitydoc.ts @@ -2,15 +2,15 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    - Table uses a table element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table - for readers. Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers + Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".

    +

    Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

    Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. @@ -145,8 +145,7 @@ import { Component, Input } from '@angular/core';

    -
    - ` +
    ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/timeline/accessibilitydoc.ts b/src/app/showcase/doc/timeline/accessibilitydoc.ts index 960a52a0f9b..a5a9ded0440 100644 --- a/src/app/showcase/doc/timeline/accessibilitydoc.ts +++ b/src/app/showcase/doc/timeline/accessibilitydoc.ts @@ -2,14 +2,13 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

    Keyboard Support

    Component does not include any interactive elements.

    -     -     ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/tree/accessibilitydoc.ts b/src/app/showcase/doc/tree/accessibilitydoc.ts index 3c43719967d..917dd438a40 100644 --- a/src/app/showcase/doc/tree/accessibilitydoc.ts +++ b/src/app/showcase/doc/tree/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -62,8 +62,7 @@ import { Component, Input } from '@angular/core';

    - - ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/treeselect/accessibilitydoc.ts b/src/app/showcase/doc/treeselect/accessibilitydoc.ts index 51976e41941..a077bf93faf 100644 --- a/src/app/showcase/doc/treeselect/accessibilitydoc.ts +++ b/src/app/showcase/doc/treeselect/accessibilitydoc.ts @@ -3,12 +3,12 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    - Value to describe the component can either be provided with aria-labelledby or aria-label props. The treeselect element has a combobox role in addition to aria-haspopup and + Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.

    @@ -178,8 +178,7 @@ import { Code } from '../../domain/code';

    -
    - ` +
    • ` }) export class AccessibilityDoc { @Input() id: string; @@ -188,8 +187,8 @@ export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/treetable/accessibilitydoc.ts b/src/app/showcase/doc/treetable/accessibilitydoc.ts index 16b6d35a897..8126cb9f043 100644 --- a/src/app/showcase/doc/treetable/accessibilitydoc.ts +++ b/src/app/showcase/doc/treetable/accessibilitydoc.ts @@ -2,16 +2,14 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    -

    - TreeTable uses a treegrid element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table - for readers. Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers +

    Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to "ascending" or "descending".

    -

    Row elements manage aria-expanded for state along with aria-posinset, aria-setsize and aria-level attribute to define the hierachy.

    -

    When selection is enabled, aria-selected is set to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.

    +

    Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

    +

    When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.

    Editable cells use custom templating so you need to manage aria roles and attributes manually if required.

    Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.

    Sortable Headers Keyboard Support

    @@ -90,8 +88,7 @@ import { Component, Input } from '@angular/core';
    - - ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts index 6c5ecf94ac3..1b024d18612 100644 --- a/src/app/showcase/doc/treetable/basicdoc.ts +++ b/src/app/showcase/doc/treetable/basicdoc.ts @@ -1,8 +1,8 @@ -import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core'; import { TreeNode } from 'primeng/api'; import { Code } from '../../domain/code'; -import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component'; import { NodeService } from '../../service/nodeservice'; +import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component'; @Component({ selector: 'basic-doc', @@ -32,7 +32,8 @@ import { NodeService } from '../../service/nodeservice';
    - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class BasicDoc implements OnInit { @Input() id: string; @@ -43,10 +44,13 @@ export class BasicDoc implements OnInit { files!: TreeNode[]; - constructor(private nodeService: NodeService) {} + constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {} ngOnInit() { - this.nodeService.getFilesystem().then((files) => (this.files = files)); + this.nodeService.getFilesystem().then((files) => { + this.files = files.slice(0,5) + this.cd.markForCheck(); + }); } code: Code = { diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts index aa0c36119b9..d7c0f429112 100644 --- a/src/app/showcase/doc/treetable/columngroupdoc.ts +++ b/src/app/showcase/doc/treetable/columngroupdoc.ts @@ -25,7 +25,7 @@ import { Code } from '../../domain/code'; - + {{ rowData.brand }} @@ -237,7 +237,7 @@ export class ColumnGroupDoc implements OnInit { - + {{ rowData.brand }} diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts index 6cebd3af3af..1c419791074 100644 --- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts +++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts @@ -25,7 +25,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -70,7 +70,7 @@ export class ResizeExpandDoc implements OnInit { - + {{ rowData[col.field] }} @@ -90,7 +90,7 @@ export class ResizeExpandDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts index e7e2a24df1a..5c15c584bc8 100644 --- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts +++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts @@ -25,7 +25,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -70,7 +70,7 @@ export class ResizeFitDoc implements OnInit { - + {{ rowData[col.field] }} @@ -90,7 +90,7 @@ export class ResizeFitDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts index d2794dc3af8..2b1a32b56c8 100644 --- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts +++ b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts @@ -29,7 +29,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -77,7 +77,7 @@ export class ResizeScrollableDoc implements OnInit { - + {{ rowData[col.field] }} @@ -102,7 +102,7 @@ export class ResizeScrollableDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts index c1a293ceef4..f9a46987b3d 100644 --- a/src/app/showcase/doc/treetable/columntoggledoc.ts +++ b/src/app/showcase/doc/treetable/columntoggledoc.ts @@ -29,7 +29,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -82,7 +82,7 @@ export class ColumnToggleDoc implements OnInit { - + {{ rowData[col.field] }} @@ -107,7 +107,7 @@ export class ColumnToggleDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts index b5b045fc1b2..750c2912bcf 100644 --- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts +++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts @@ -24,7 +24,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -67,7 +67,7 @@ export class ConditionalStyleDoc implements OnInit { - + {{ rowData[col.field] }} @@ -87,7 +87,7 @@ export class ConditionalStyleDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts index fd8fcc6978e..2cbd67cb305 100644 --- a/src/app/showcase/doc/treetable/contextmenudoc.ts +++ b/src/app/showcase/doc/treetable/contextmenudoc.ts @@ -26,7 +26,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -93,7 +93,7 @@ export class ContextMenuDoc implements OnInit { - + {{ rowData[col.field] }} @@ -117,7 +117,7 @@ export class ContextMenuDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts index e0931b4d8b5..97d12864442 100644 --- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts @@ -17,14 +17,14 @@ interface Column {
    - + {{ col.header }} - + {{ rowData[col.field] }} @@ -60,14 +60,14 @@ export class DynamicColumnsDoc implements OnInit { basic: ` - + {{ col.header }} - + {{ rowData[col.field] }} @@ -79,14 +79,14 @@ export class DynamicColumnsDoc implements OnInit {
    - + {{ col.header }} - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts index 6291821360b..921c060e490 100644 --- a/src/app/showcase/doc/treetable/editdoc.ts +++ b/src/app/showcase/doc/treetable/editdoc.ts @@ -24,7 +24,7 @@ interface Column { - + @@ -72,7 +72,7 @@ export class EditDoc implements OnInit { - + @@ -97,7 +97,7 @@ export class EditDoc implements OnInit { - + diff --git a/src/app/showcase/doc/treetable/filterdoc.ts b/src/app/showcase/doc/treetable/filterdoc.ts index bcfa32c6835..fddc2da6270 100644 --- a/src/app/showcase/doc/treetable/filterdoc.ts +++ b/src/app/showcase/doc/treetable/filterdoc.ts @@ -43,7 +43,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -113,7 +113,7 @@ export class FilterDoc implements OnInit { - + {{ rowData[col.field] }} @@ -154,7 +154,7 @@ export class FilterDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts index 3b307e2205b..00b7667fa1b 100644 --- a/src/app/showcase/doc/treetable/lazyloaddoc.ts +++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts @@ -44,7 +44,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -145,7 +145,7 @@ export class LazyLoadDoc implements OnInit { - + {{ rowData[col.field] }} @@ -165,7 +165,7 @@ export class LazyLoadDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts index 8357cc26e80..b1f185f6bea 100644 --- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts @@ -24,7 +24,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -88,7 +88,7 @@ export class PaginatorBasicDoc implements OnInit { - + {{ rowData[col.field] }} @@ -108,7 +108,7 @@ export class PaginatorBasicDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts index 84e49760e19..f3f7cff9eda 100644 --- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts @@ -24,7 +24,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -88,7 +88,7 @@ export class PaginatorLocaleDoc implements OnInit { - + {{ rowData[col.field] }} @@ -108,7 +108,7 @@ export class PaginatorLocaleDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts index 9c3e4726a6d..b77fa32b614 100644 --- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts +++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -98,7 +98,7 @@ export class PaginatorTemplateDoc implements OnInit { - + {{ rowData[col.field] }} @@ -124,7 +124,7 @@ export class PaginatorTemplateDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts index 323df0f84f1..93fe863820f 100644 --- a/src/app/showcase/doc/treetable/reorderdoc.ts +++ b/src/app/showcase/doc/treetable/reorderdoc.ts @@ -24,7 +24,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -67,7 +67,7 @@ export class ReorderDoc implements OnInit { - + {{ rowData[col.field] }} @@ -87,7 +87,7 @@ export class ReorderDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts index d96cbcc746e..6bc9449642b 100644 --- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts @@ -30,14 +30,14 @@ interface Column { - + {{ rowData[col.field] }} - + {{ rowData.name }} @@ -102,14 +102,14 @@ export class FrozenColumnsDoc implements OnInit { - + {{ rowData[col.field] }} - + {{ rowData.name }} @@ -134,14 +134,14 @@ export class FrozenColumnsDoc implements OnInit { - + {{ rowData[col.field] }} - + {{ rowData.name }} diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts index fa8f12bd977..e2b1de71703 100644 --- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts @@ -30,7 +30,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -80,7 +80,7 @@ export class ScrollHorizontalDoc implements OnInit { - + {{ rowData[col.field] }} @@ -105,7 +105,7 @@ export class ScrollHorizontalDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts index 89cb1992384..e97aceb679c 100644 --- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts @@ -25,7 +25,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -70,7 +70,7 @@ export class ScrollVerticalDoc implements OnInit { - + {{ rowData[col.field] }} @@ -90,7 +90,7 @@ export class ScrollVerticalDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts index 5f2f703678f..c845f37b6a1 100644 --- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts +++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts @@ -32,7 +32,7 @@ interface Column { - + @@ -87,7 +87,7 @@ export class SelectionCheckboxDoc implements OnInit { - + @@ -114,7 +114,7 @@ export class SelectionCheckboxDoc implements OnInit { - + diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts index a243b00c3d4..7f0ea639d6f 100644 --- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts +++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts @@ -40,7 +40,7 @@ interface NodeEvent { - + {{ rowData[col.field] }} @@ -95,7 +95,7 @@ export class SelectionEventsDoc implements OnInit { - + {{ rowData[col.field] }} @@ -116,7 +116,7 @@ export class SelectionEventsDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts index 8ac7bb7286d..d78c7859f55 100644 --- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts +++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts @@ -33,7 +33,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -84,7 +84,7 @@ export class SelectionMultipleDoc implements OnInit { - + {{ rowData[col.field] }} @@ -108,7 +108,7 @@ export class SelectionMultipleDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts index f643c279aeb..2c7b6ca24ec 100644 --- a/src/app/showcase/doc/treetable/selectionsingledoc.ts +++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts @@ -33,7 +33,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -74,9 +74,7 @@ export class SelectionSingleDoc implements OnInit { code: Code = { basic: ` - - - + @@ -85,7 +83,7 @@ export class SelectionSingleDoc implements OnInit { - + {{ rowData[col.field] }} @@ -96,11 +94,7 @@ export class SelectionSingleDoc implements OnInit { html: `
    -
    - - Metakey -
    - + @@ -109,7 +103,7 @@ export class SelectionSingleDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts index 73fdbfd73c0..d9da3b92091 100644 --- a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts @@ -26,7 +26,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -73,7 +73,7 @@ export class SortMultipleColumnDoc implements OnInit { - + {{ rowData[col.field] }} @@ -94,7 +94,7 @@ export class SortMultipleColumnDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts index 9eba25d4e50..b0175ceba31 100644 --- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts @@ -26,7 +26,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -73,7 +73,7 @@ export class SortSingleColumnDoc implements OnInit { - + {{ rowData[col.field] }} @@ -94,7 +94,7 @@ export class SortSingleColumnDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts index 67571496800..5ac8ed8c10b 100644 --- a/src/app/showcase/doc/treetable/templatedoc.ts +++ b/src/app/showcase/doc/treetable/templatedoc.ts @@ -29,7 +29,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -87,7 +87,7 @@ export class TemplateDoc implements OnInit { - + {{ rowData[col.field] }} @@ -120,7 +120,7 @@ export class TemplateDoc implements OnInit { - + {{ rowData[col.field] }} diff --git a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts index 07bee64670c..89627afc480 100644 --- a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts +++ b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` + template: `

    Screen Reader

    @@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';

    Keyboard Support

    Component does not include any built-in interactive elements.

    -     -     ` + ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 185555cb72f..632ab49a734 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #93cbf9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 2112355f278..a7855e1675a 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a7d8a9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 0ea42fe7318..1453c5e7579 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe284; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index c5b09d6d4cf..a02c8365bd4 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #cf95d9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index f9ec10bd981..78ad51e2f61 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -455,6 +455,13 @@ border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; + border-color: #8dd0ff; + } + .p-datepicker { padding: 0; background: #2a323d; @@ -3231,6 +3238,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; background: #8dd0ff; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #64bfff; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1.5rem; color: rgba(255, 255, 255, 0.87); @@ -3432,6 +3446,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; background: #8dd0ff; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #64bfff; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1.5rem; color: rgba(255, 255, 255, 0.87); @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e3f3fe; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e3f3fe; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #8dd0ff; color: #151515; diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 4ab92ef0f8f..da55cf3171c 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -455,6 +455,13 @@ border-color: #f19ea6; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #f0e6f5; + border-color: #c298d8; + } + .p-datepicker { padding: 0; background: #2a323d; @@ -3231,6 +3238,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #151515; background: #c298d8; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #b07acd; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1.5rem; color: rgba(255, 255, 255, 0.87); @@ -3432,6 +3446,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #151515; background: #c298d8; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #b07acd; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1.5rem; color: rgba(255, 255, 255, 0.87); @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #f0e6f5; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #f0e6f5; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #c298d8; color: #151515; diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 1588f4d1258..a4ad1badda8 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -455,6 +455,13 @@ border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); + border-color: #007bff; + } + .p-datepicker { padding: 0; background: #ffffff; @@ -3231,6 +3238,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #212529; background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #212529; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007bff; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #0067d6; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1.5rem; color: #212529; @@ -3432,6 +3446,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #212529; background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #212529; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007bff; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #0067d6; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1.5rem; color: #212529; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007bff; color: #ffffff; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 1a5fee2e678..3c86a06a777 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -455,6 +455,13 @@ border-color: #dc3545; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); + border-color: #883cae; + } + .p-datepicker { padding: 0; background: #ffffff; @@ -3231,6 +3238,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1.5rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #212529; background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #212529; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #883cae; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #703290; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1.5rem; color: #212529; @@ -3432,6 +3446,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1.5rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #212529; background: transparent; - transition: box-shadow 0.15s; + transition: transform 0.15s, box-shadow 0.15s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #212529; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #212529; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #883cae; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #703290; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1.5rem; color: #212529; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #883cae; color: #ffffff; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index c9691cc2b8f..b8d0ce6f98c 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -455,6 +455,13 @@ border-color: #a4252c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #605e5c; + border-color: #0078d4; + } + .p-datepicker { padding: 0.75rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.5rem; @@ -3226,17 +3234,23 @@ border: 1px solid transparent; color: #323130; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f3f2f1; + color: #323130; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #323130; + background: #e1dfdd; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #323130; background: #edebe9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #e1dfdd; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 0.5rem; color: #323130; @@ -3420,6 +3434,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.5rem; @@ -3427,17 +3442,23 @@ border: 1px solid transparent; color: #323130; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f3f2f1; + color: #323130; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #323130; + background: #e1dfdd; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #323130; background: #edebe9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #e1dfdd; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 0.5rem; color: #323130; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #605e5c; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 2px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #323130; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #605e5c; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #edebe9; color: #323130; diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index a29294a6c5d..1b3861bf3b6 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -474,6 +474,13 @@ border-color: #FCA5A5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5); + border-color: #93C5FD; + } + .p-datepicker { padding: 0.5rem; background: #071426; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(147, 197, 253, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(147, 197, 253, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(147, 197, 253, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(147, 197, 253, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(147, 197, 253, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index e72ee8164b7..5dd14b42586 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -474,6 +474,13 @@ border-color: #FCA5A5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5); + border-color: #A5B4FC; + } + .p-datepicker { padding: 0.5rem; background: #071426; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(165, 180, 252, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(165, 180, 252, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(165, 180, 252, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(165, 180, 252, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(165, 180, 252, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index d0468b7ad82..983034a9a13 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -474,6 +474,13 @@ border-color: #FCA5A5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5); + border-color: #C4B5FD; + } + .p-datepicker { padding: 0.5rem; background: #071426; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(196, 181, 253, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(196, 181, 253, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(196, 181, 253, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(196, 181, 253, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(196, 181, 253, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 937fabfef82..27d803f209c 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -474,6 +474,13 @@ border-color: #FCA5A5; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5); + border-color: #5EEAD4; + } + .p-datepicker { padding: 0.5rem; background: #071426; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(94, 234, 212, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(94, 234, 212, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: #0b213f; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(94, 234, 212, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(94, 234, 212, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem rgba(94, 234, 212, 0.5); - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(94, 234, 212, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 1bcd94a78e3..e55a34cef84 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -474,6 +474,13 @@ border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #BFDBFE; + border-color: #3B82F6; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #1D4ED8; background: #EFF6FF; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #1D4ED8; background: #EFF6FF; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(59, 130, 246, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #BFDBFE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #BFDBFE; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EFF6FF; color: #1D4ED8; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index ff3a29b28e4..f8c773bf04b 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -474,6 +474,13 @@ border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C7D2FE; + border-color: #6366F1; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #4338CA; background: #EEF2FF; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #E0E7FF; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #4338CA; background: #EEF2FF; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #E0E7FF; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C7D2FE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C7D2FE; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #4338CA; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 20209c9b19d..737323094a9 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -474,6 +474,13 @@ border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #DDD6FE; + border-color: #8B5CF6; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #6D28D9; background: #F5F3FF; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #6D28D9; background: #F5F3FF; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(139, 92, 246, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #DDD6FE; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #DDD6FE; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F5F3FF; color: #6D28D9; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 454059ce4fd..dad9158908d 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -474,6 +474,13 @@ border-color: #e24c4c; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #99F6E4; + border-color: #14B8A6; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3238,6 +3245,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3245,17 +3253,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #0F766E; background: #F0FDFA; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3439,6 +3453,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3446,17 +3461,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #0F766E; background: #F0FDFA; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(20, 184, 166, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: #495057; @@ -3515,6 +3536,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #99F6E4; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3551,11 +3578,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #99F6E4; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F0FDFA; color: #0F766E; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 34e5cd3314c..3186ae5a41c 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -455,6 +455,13 @@ border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #FFE082; + } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #FFE082; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #ffe081; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #FFE082; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #ffe081; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFE082; color: #212529; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index bab90b098d1..73237e36653 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -455,6 +455,13 @@ border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #81D4FA; + } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #81D4FA; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #81d4fa; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #81D4FA; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #81d4fa; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #81D4FA; color: #212529; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 6d51108c89f..6fc51852e9b 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -455,6 +455,13 @@ border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #C5E1A5; + } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #C5E1A5; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #c5e1a5; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #C5E1A5; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #c5e1a5; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #C5E1A5; color: #212529; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 897a52065de..ea7c2f106bf 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -455,6 +455,13 @@ border-color: #e57373; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem white; + border-color: #F48FB1; + } + .p-datepicker { padding: 0.857rem; background: #323232; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #212529; background: #F48FB1; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #f48fb1; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #dedede; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #4c4c4c; + color: #dedede; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #dedede; + background: #3c3c3c; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #212529; background: #F48FB1; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #f48fb1; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #dedede; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem white; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem white; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F48FB1; color: #212529; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index cf52caff46e..0a2e70b440a 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -479,6 +479,13 @@ border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 54560909de1..6c2027dd33f 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -479,6 +479,13 @@ border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 1rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index ea585f6d553..960cdad56f4 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -479,6 +479,13 @@ border-color: #B00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 125db71565a..401b116fef9 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -479,6 +479,13 @@ border-color: #B00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 1rem 1rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 1rem 1rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 1rem 1rem; color: rgba(0, 0, 0, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index f63fd419e72..93cffbd44d4 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -479,6 +479,13 @@ border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #CE93D8; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #CE93D8; background: rgba(206, 147, 216, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(206, 147, 216, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 77b7a000819..3c32f903194 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -479,6 +479,13 @@ border-color: #f44435; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #9FA8DA; + } + .p-datepicker { padding: 0.5rem; background: #1e1e1e; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9FA8DA; background: rgba(159, 168, 218, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(159, 168, 218, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 0.75rem; color: rgba(255, 255, 255, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index fbe12a268eb..82b3cc92195 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -479,6 +479,13 @@ border-color: #B00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #673AB7; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #673AB7; background: rgba(103, 58, 183, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(103, 58, 183, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index 930c3e8e511..745cab67da6 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -479,6 +479,13 @@ border-color: #B00020; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + border-color: #3F51B5; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3243,6 +3250,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 0.75rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -3444,6 +3458,7 @@ padding: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 0.75rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(0, 0, 0, 0.87); background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(0, 0, 0, 0.87); + background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #3F51B5; background: rgba(63, 81, 181, 0.12); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(63, 81, 181, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 0.75rem; color: rgba(0, 0, 0, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.25rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: none; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 13927eba964..2733e54b703 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -483,6 +483,13 @@ border-color: #BF616A; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #C0D0E0; + border-color: #81A1C1; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3247,6 +3254,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3254,17 +3262,23 @@ border: 0 none; color: #4C566A; background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C0D0E0; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: transparent; + color: #4C566A; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #4C566A; + background: #E5E9F0; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #2E3440; background: #D8DEE9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #bec8da; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #4C566A; @@ -3448,6 +3462,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3455,17 +3470,23 @@ border: 0 none; color: #4C566A; background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C0D0E0; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: transparent; + color: #4C566A; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #4C566A; + background: #E5E9F0; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #2E3440; background: #D8DEE9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #bec8da; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #4C566A; @@ -3524,6 +3545,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #C0D0E0; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 4px; @@ -3560,11 +3587,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4C566A; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #C0D0E0; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #D8DEE9; color: #2E3440; diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index d341df71e5b..a6eab1771af 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -455,6 +455,13 @@ border-color: #d8222f; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #90c9f5; + border-color: #1174c0; + } + .p-datepicker { padding: 0.25rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.25rem 0.5rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #343a3f; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #343a3f; + background: #d2d6db; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #44A1D9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #1174c0; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.25rem 0.5rem; color: #343a3f; @@ -3420,6 +3434,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.25rem 0.5rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #343a3f; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #dde1e6; + color: #343a3f; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #343a3f; + background: #d2d6db; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #44A1D9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #1174c0; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.25rem 0.5rem; color: #343a3f; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #90c9f5; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 1px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #343a3f; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #90c9f5; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #44A1D9; color: #ffffff; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index cfb76307f5a..0bac662bbcf 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -455,6 +455,13 @@ border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #e02365; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #e02365; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3420,6 +3434,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #e02365; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #e02365; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #e02365; color: #ffffff; diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 171ceb65649..9511169bfad 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -455,6 +455,13 @@ border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007ad9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #007ad9; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007ad9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #007ad9; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index 8db7b43bc22..efa0fc6e8f1 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -455,6 +455,13 @@ border-color: #a80000; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #8dcdff; + border-color: #007ad9; + } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -3231,6 +3238,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3238,17 +3246,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #ffffff; background: #007ad9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #007ad9; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3432,6 +3446,7 @@ padding: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3439,17 +3454,23 @@ border: 0 none; color: #333333; background: transparent; - transition: background-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #eaeaea; + color: #333333; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #333333; + background: #d6d6d6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #ffffff; background: #007ad9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #007ad9; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #333333; @@ -3508,6 +3529,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #8dcdff; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3544,11 +3571,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #8dcdff; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 8e90f7c22db..1c9182da257 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -455,6 +455,13 @@ border-color: #e7a3a3; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #e4e9ec; + border-color: #7B95A3; + } + .p-datepicker { padding: 0.857rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.429rem 0.857rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #666666; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f4f4f4; + color: #666666; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #666666; + background: #e0e0e0; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #385048; background: #AFD3C8; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #aed3c7; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.429rem 0.857rem; color: #666666; @@ -3420,6 +3434,7 @@ padding: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.429rem 0.857rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #666666; background: transparent; - transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; + transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f4f4f4; + color: #666666; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #666666; + background: #e0e0e0; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #385048; background: #AFD3C8; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #aed3c7; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.429rem 0.857rem; color: #666666; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e4e9ec; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 2px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #666666; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e4e9ec; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #AFD3C8; color: #385048; diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 8dcbe2ffdc3..8265d37efd5 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -455,6 +455,13 @@ border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a6d5fa; + border-color: #2196F3; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #E3F2FD; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #E3F2FD; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(33, 150, 243, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a6d5fa; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a6d5fa; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E3F2FD; color: #495057; diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index c650bb89c21..320fed29459 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -455,6 +455,13 @@ border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #b7e0b8; + border-color: #4CAF50; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #E8F5E9; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #E8F5E9; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(76, 175, 80, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #b7e0b8; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #b7e0b8; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E8F5E9; color: #495057; diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index c60e81cf5ec..4d15d7d0f15 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -455,6 +455,13 @@ border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #ffe69c; + border-color: #FFC107; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #FFF3E0; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #ebe0ce; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #FFF3E0; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #ebe0ce; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe69c; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe69c; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFF3E0; color: #495057; diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 81c56d56934..9740877953c 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -455,6 +455,13 @@ border-color: #f44336; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9C27B0; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #495057; background: #F3E5F5; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: #495057; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #e9ecef; + color: #495057; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #495057; + background: #dee2e6; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #495057; background: #F3E5F5; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #495057; @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #df9eea; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F3E5F5; color: #495057; diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index bd29b992edd..2c28f5928e6 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -479,6 +479,13 @@ border-color: #ff9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e0d8fc; + border-color: #b19df7; + } + .p-datepicker { padding: 0.5rem; background: #282936; @@ -3243,6 +3250,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e0d8fc; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #b19df7; background: rgba(177, 157, 247, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3444,6 +3458,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e0d8fc; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #b19df7; background: rgba(177, 157, 247, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(177, 157, 247, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: rgba(255, 255, 255, 0.87); @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #e0d8fc; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #e0d8fc; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(177, 157, 247, 0.16); color: #b19df7; diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 02b1f24b910..ee95c5171b8 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -479,6 +479,13 @@ border-color: #ff6767; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #c7bbfa; + border-color: #7254f3; + } + .p-datepicker { padding: 0.5rem; background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%); @@ -3243,6 +3250,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1.25rem; @@ -3250,17 +3258,23 @@ border: 0 none; color: #043d75; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #043d75; + background: #dfe7ef; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #7254f3; background: #e2dcfc; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #cbc0fa; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1.25rem; color: #043d75; @@ -3444,6 +3458,7 @@ padding: 0.75rem 0; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1.25rem; @@ -3451,17 +3466,23 @@ border: 0 none; color: #043d75; background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f6f9fc; + color: #043d75; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #043d75; + background: #dfe7ef; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #7254f3; background: #e2dcfc; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #cbc0fa; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1.25rem; color: #043d75; @@ -3520,6 +3541,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #c7bbfa; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3556,11 +3583,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #043d75; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #c7bbfa; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #e2dcfc; color: #7254f3; diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index df33406a9ab..dc11bdd685c 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -490,6 +490,13 @@ border-color: #f0a9a7; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #6366F1; + border-color: #4F46E5; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3254,6 +3261,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.75rem 1rem; @@ -3261,17 +3269,23 @@ border: 0 none; color: #3f3f46; background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #f4f4f5; + color: #18181B; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #18181B; + background: #e5e7eb; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #312E81; background: #EEF2FF; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #E0E7FF; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.75rem 1rem; color: #3f3f46; @@ -3455,6 +3469,7 @@ padding: 0.25rem 0; border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.75rem 1rem; @@ -3462,17 +3477,23 @@ border: 0 none; color: #3f3f46; background: transparent; - transition: none; + transition: transform 0.2s, none; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #f4f4f5; + color: #18181B; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #18181B; + background: #e5e7eb; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #312E81; background: #EEF2FF; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #E0E7FF; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.75rem 1rem; color: #3f3f46; @@ -3531,6 +3552,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #6366F1; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 0.375rem; @@ -3567,11 +3594,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #3f3f46; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #6366F1; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #312E81; diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 01ec126a4b1..456b1625aa1 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #93cbf9; + border-color: #64B5F6; + } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(100, 181, 246, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(100, 181, 246, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #93cbf9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #93cbf9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 658caa4b63d..3bd31d72954 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #a7d8a9; + border-color: #81C784; + } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(129, 199, 132, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(129, 199, 132, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #a7d8a9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #a7d8a9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 426455b909e..655e64cf92e 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #ffe284; + border-color: #FFD54F; + } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(255, 213, 79, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(255, 213, 79, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #ffe284; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #ffe284; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 150b721be2a..bba406277e2 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -455,6 +455,13 @@ border-color: #ef9a9a; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #BA68C8; + } + .p-datepicker { padding: 0.5rem; background: #1f2d40; @@ -3219,6 +3226,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3226,17 +3234,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3420,6 +3434,7 @@ padding: 0.5rem 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3427,17 +3442,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.2s; + transition: transform 0.2s, box-shadow 0.2s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(255, 255, 255, 0.03); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.09); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3496,6 +3517,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #cf95d9; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 3px; @@ -3532,11 +3559,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index d198bf572c0..e10f862a774 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -487,6 +487,13 @@ border-color: #f78c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #9eade6; + border-color: #9eade6; + } + .p-datepicker { padding: 0.5rem; background: #161d21; @@ -3251,6 +3258,7 @@ padding: 0.5rem 0.5rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3258,17 +3266,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.3s; + transition: transform 0.3s, box-shadow 0.3s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.1); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #9eade6; background: rgba(158, 173, 230, 0.16); } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3452,6 +3466,7 @@ padding: 0.5rem 0.5rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3459,17 +3474,23 @@ border: 0 none; color: rgba(255, 255, 255, 0.87); background: transparent; - transition: box-shadow 0.3s; + transition: transform 0.3s, box-shadow 0.3s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: rgba(158, 173, 230, 0.08); + color: rgba(255, 255, 255, 0.87); + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(158, 173, 230, 0.1); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #9eade6; background: rgba(158, 173, 230, 0.16); } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: rgba(158, 173, 230, 0.24); + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: rgba(255, 255, 255, 0.87); @@ -3528,6 +3549,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #9eade6; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3564,11 +3591,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #9eade6; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(158, 173, 230, 0.16); color: #9eade6; diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index c7c23b635f2..92e1ad9c07d 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -488,6 +488,13 @@ border-color: #f88c79; } + .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.1rem #bbc7ee; + border-color: #91a4e3; + } + .p-datepicker { padding: 0.5rem; background: #ffffff; @@ -3252,6 +3259,7 @@ padding: 0.5rem 0.5rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-orderlist .p-orderlist-list .p-orderlist-item { padding: 0.5rem 1rem; @@ -3259,17 +3267,23 @@ border: 0 none; color: #6c6c6c; background: transparent; - transition: box-shadow 0.3s; + transition: transform 0.3s, box-shadow 0.3s; } - .p-orderlist .p-orderlist-list .p-orderlist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; + .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; + } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus { + color: #6c6c6c; + background: #e6e9f3; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #585858; background: #ced6f1; } + .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { + background: #aebbe8; + } .p-orderlist .p-orderlist-list .p-orderlist-empty-message { padding: 0.5rem 1rem; color: #6c6c6c; @@ -3453,6 +3467,7 @@ padding: 0.5rem 0.5rem; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; + outline: 0 none; } .p-picklist .p-picklist-list .p-picklist-item { padding: 0.5rem 1rem; @@ -3460,17 +3475,23 @@ border: 0 none; color: #6c6c6c; background: transparent; - transition: box-shadow 0.3s; + transition: transform 0.3s, box-shadow 0.3s; } - .p-picklist .p-picklist-list .p-picklist-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; + .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover { + background: #edf0fA; + color: #6c6c6c; + } + .p-picklist .p-picklist-list .p-picklist-item.p-focus { + color: #6c6c6c; + background: #e6e9f3; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #585858; background: #ced6f1; } + .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { + background: #aebbe8; + } .p-picklist .p-picklist-list .p-picklist-empty-message { padding: 0.5rem 1rem; color: #6c6c6c; @@ -3529,6 +3550,12 @@ } .p-tree .p-tree-container .p-treenode { padding: 0.143rem; + outline: 0 none; + } + .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.15rem #bbc7ee; } .p-tree .p-tree-container .p-treenode .p-treenode-content { border-radius: 6px; @@ -3565,11 +3592,6 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #6c6c6c; } - .p-tree .p-tree-container .p-treenode .p-treenode-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #bbc7ee; - } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #ced6f1; color: #585858;