diff --git a/src/app/components/tabmenu/tabmenu.css b/src/app/components/tabmenu/tabmenu.css index 67758af675f..92e11c65c9c 100755 --- a/src/app/components/tabmenu/tabmenu.css +++ b/src/app/components/tabmenu/tabmenu.css @@ -1,5 +1,39 @@ -.p-tabmenu { +.p-tabmenu-nav-container { + position: relative; +} + +.p-tabmenu-scrollable .p-tabmenu-nav-container { + overflow: hidden; +} + +.p-tabmenu-nav-content { overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; +} + +.p-tabmenu-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.p-tabmenu-nav-prev { + left: 0; +} + +.p-tabmenu-nav-next { + right: 0; +} + +.p-tabview-nav-content::-webkit-scrollbar { + display: none; } .p-tabmenu-nav { @@ -27,6 +61,7 @@ .p-tabmenu-nav .p-menuitem-text { line-height: 1; + white-space: nowrap; } .p-tabmenu-ink-bar { @@ -34,6 +69,6 @@ z-index: 1; } -.p-tabmenu::-webkit-scrollbar { +.p-tabmenu-nav-content::-webkit-scrollbar { display: none; } diff --git a/src/app/components/tabmenu/tabmenu.ts b/src/app/components/tabmenu/tabmenu.ts index 0e7f0817d76..40159f96090 100755 --- a/src/app/components/tabmenu/tabmenu.ts +++ b/src/app/components/tabmenu/tabmenu.ts @@ -10,33 +10,43 @@ import {TooltipModule} from 'primeng/tooltip'; @Component({ selector: 'p-tabMenu', template: ` -
- +
+
`, changeDetection: ChangeDetectionStrategy.OnPush, @@ -52,22 +62,34 @@ export class TabMenu implements AfterContentInit,AfterViewInit,AfterViewChecked @Input() activeItem: MenuItem; + @Input() scrollable: boolean; + @Input() popup: boolean; @Input() style: any; @Input() styleClass: string; + @ViewChild('content') content: ElementRef; + @ViewChild('navbar') navbar: ElementRef; @ViewChild('inkbar') inkbar: ElementRef; + @ViewChild('prevBtn') prevBtn: ElementRef; + + @ViewChild('nextBtn') nextBtn: ElementRef; + @ContentChildren(PrimeTemplate) templates: QueryList; itemTemplate: TemplateRef; tabChanged: boolean; + backwardIsDisabled: boolean = true; + + forwardIsDisabled: boolean = false; + constructor(private router: Router, private route:ActivatedRoute, private cd: ChangeDetectorRef) { } ngAfterContentInit() { @@ -133,6 +155,47 @@ export class TabMenu implements AfterContentInit,AfterViewInit,AfterViewChecked this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px'; } } + + getVisibleButtonWidths() { + return [this.prevBtn?.nativeElement, this.nextBtn?.nativeElement].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0); + } + + updateButtonState() { + const content = this.content.nativeElement; + const { scrollLeft, scrollWidth } = content; + const width = DomHandler.getWidth(content); + + this.backwardIsDisabled = scrollLeft === 0; + this.forwardIsDisabled = scrollLeft === scrollWidth - width; + } + + + updateScrollBar(index) { + let tabHeader = this.navbar.nativeElement.children[index]; + tabHeader.scrollIntoView({ block: 'nearest' }) + } + + onScroll(event) { + this.scrollable && this.updateButtonState(); + + event.preventDefault(); + } + + navBackward() { + const content = this.content.nativeElement; + const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const pos = content.scrollLeft - width; + content.scrollLeft = pos <= 0 ? 0 : pos; + } + + navForward() { + const content = this.content.nativeElement; + const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths(); + const pos = content.scrollLeft + width; + const lastPos = content.scrollWidth - width; + + content.scrollLeft = pos >= lastPos ? lastPos : pos; + } } @NgModule({ diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.html b/src/app/showcase/components/tabmenu/tabmenudemo.html index 06a625c0bf1..36a7841fe14 100755 --- a/src/app/showcase/components/tabmenu/tabmenudemo.html +++ b/src/app/showcase/components/tabmenu/tabmenudemo.html @@ -8,8 +8,14 @@

TabMenu

+
Default
+ +
+
Scrollable
+ +
@@ -50,8 +56,8 @@
Getting Started
ActiveItem

By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.

-<p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu> - +<p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu> + export class TabMenuDemo { @@ -81,6 +87,25 @@
Templating
//item content </ng-template> </p-tabMenu> +
+ +
Scrollable
+ +<p-tabMenu [model]="scrollableItems" [activeItem]="activeItem2"></p-tabMenu> + + + +export class TabMenuDemo { + + scrollableItems: MenuItem[]; + + activeItem2: MenuItem; + + ngOnInit() { + this.scrollableItems = Array.from({ length: 50 }, (_, i) => ({ label: `Tab ${i + 1}`, icon: `pi pi-fw pi-display` })); + this.activeItem2 = this.scrollableItems[0]; + } +}
Properties
@@ -119,6 +144,12 @@
Properties
null Style class of the component. + + scrollable + boolean + false + When enabled displays buttons at each side of the tab headers to scroll the tab list. +
@@ -195,6 +226,8 @@
Dependencies
<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu> + +<p-tabMenu [model]="scrollableItems" [activeItem]="activeItem2"></p-tabMenu> @@ -202,8 +235,12 @@
Dependencies
items: MenuItem[]; + scrollableItems: MenuItem[]; + activeItem: MenuItem; + activeItem2: MenuItem; + ngOnInit() { this.items = [ {label: 'Home', icon: 'pi pi-fw pi-home'}, @@ -213,7 +250,11 @@
Dependencies
{label: 'Settings', icon: 'pi pi-fw pi-cog'} ]; + this.scrollableItems = Array.from({ length: 50 }, (_, i) => ({ label: `Tab ${i + 1}`, icon: `pi pi-fw pi-display` })); + this.activeItem = this.items[0]; + + this.activeItem2 = this.scrollableItems[0]; } } diff --git a/src/app/showcase/components/tabmenu/tabmenudemo.ts b/src/app/showcase/components/tabmenu/tabmenudemo.ts index 5dd50d2f5ef..d501ae6af2e 100755 --- a/src/app/showcase/components/tabmenu/tabmenudemo.ts +++ b/src/app/showcase/components/tabmenu/tabmenudemo.ts @@ -8,8 +8,12 @@ export class TabMenuDemo { items: MenuItem[]; + scrollableItems: MenuItem[]; + activeItem: MenuItem; + activeItem2: MenuItem; + ngOnInit() { this.items = [ {label: 'Home', icon: 'pi pi-fw pi-home'}, @@ -19,6 +23,10 @@ export class TabMenuDemo { {label: 'Settings', icon: 'pi pi-fw pi-cog'} ]; + this.scrollableItems = Array.from({ length: 50 }, (_, i) => ({ label: `Tab ${i + 1}`, icon: `pi pi-fw pi-display` })); + this.activeItem = this.items[0]; + + this.activeItem2 = this.scrollableItems[0]; } } \ No newline at end of file diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index da51c5fabec..a7b47fb7b60 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #64B5F6; color: #64B5F6; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1e1e1e; + color: #64B5F6; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #93cbf9; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 946734e5d47..0499024ab94 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #81C784; color: #81C784; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1e1e1e; + color: #81C784; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #a7d8a9; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index bf7827f3895..aaae363259b 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #FFD54F; color: #FFD54F; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1e1e1e; + color: #FFD54F; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #ffe284; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 8082e270d37..cbf6ad4d882 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #BA68C8; color: #BA68C8; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1e1e1e; + color: #BA68C8; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #cf95d9; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index cc44d721566..5c8e965e91b 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b; color: rgba(255, 255, 255, 0.6); } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #2a323d; + color: rgba(255, 255, 255, 0.6); + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #e3f3fe; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index bbd407e6993..d117a05071d 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b; color: rgba(255, 255, 255, 0.6); } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #2a323d; + color: rgba(255, 255, 255, 0.6); + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #f0e6f5; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 550fc1c781f..10580030389 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dee2e6 #dee2e6 #ffffff #dee2e6; color: #495057; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #495057; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5); +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 883a09d9ce2..56a4abf2c2b 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -5059,6 +5059,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dee2e6 #dee2e6 #ffffff #dee2e6; color: #495057; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #495057; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5); +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index c1d8d735df4..be4ed1ac1a9 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #0078d4; color: #323130; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #323130; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset inset 0 0 0 1px #605e5c; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 64a95b90059..835bc1b9d74 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #93C5FD; color: #93C5FD; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #071426; + color: #93C5FD; + width: 3rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5); +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 680f35fcf73..80343432a76 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #A5B4FC; color: #A5B4FC; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #071426; + color: #A5B4FC; + width: 3rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(165, 180, 252, 0.5); +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 0f86beb108e..2cc7c18d976 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #C4B5FD; color: #C4B5FD; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #071426; + color: #C4B5FD; + width: 3rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5); +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 61dfaa53e94..3a8497e7170 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #5EEAD4; color: #5EEAD4; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #071426; + color: #5EEAD4; + width: 3rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem rgba(94, 234, 212, 0.5); +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 10dc1e2b3d2..aa86fdac172 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #3B82F6; color: #3B82F6; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #3B82F6; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #BFDBFE; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index e14879d590d..eb22b1ba825 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #6366F1; color: #6366F1; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #6366F1; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #C7D2FE; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 19fbdc0595c..42aebe2d01f 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #8B5CF6; color: #8B5CF6; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #8B5CF6; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #DDD6FE; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index e598ec1a2bc..dc3dfb10447 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -5034,6 +5034,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #14B8A6; color: #14B8A6; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #14B8A6; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #99F6E4; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 807b7261faa..2f51d791281 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #FFE082; color: #212529; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #FFE082; + color: #212529; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem white; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 8da8462a5a3..ea03afc551f 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #81D4FA; color: #212529; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #81D4FA; + color: #212529; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem white; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index bd110d05b42..8224b5febbb 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #C5E1A5; color: #212529; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #C5E1A5; + color: #212529; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem white; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 83ccb117b52..241f736f73f 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #F48FB1; color: #212529; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #F48FB1; + color: #212529; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.1rem white; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index c429afab4cf..98dda456d44 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(255, 255, 255, 0.12); color: #CE93D8; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: transparent; + color: #CE93D8; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 8958646ad51..fe4d9d3f047 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(255, 255, 255, 0.12); color: #9FA8DA; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: transparent; + color: #9FA8DA; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index e8dcd0c6bea..4fc2e691e0f 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(0, 0, 0, 0.12); color: #673AB7; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #673AB7; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 2a5ffa044a8..53379c65c00 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(0, 0, 0, 0.12); color: #3F51B5; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #3F51B5; + width: 3rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 72afd8628de..e49d64b289b 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(255, 255, 255, 0.12); color: #CE93D8; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: transparent; + color: #CE93D8; + width: 2.75rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index a06d7ef6a57..6bdabe60bca 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(255, 255, 255, 0.12); color: #9FA8DA; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: transparent; + color: #9FA8DA; + width: 2.75rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index 918a48813f6..e46315a5026 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(0, 0, 0, 0.12); color: #673AB7; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #673AB7; + width: 2.75rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index 46063058786..20262877203 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -5071,6 +5071,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: rgba(0, 0, 0, 0.12); color: #3F51B5; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #3F51B5; + width: 2.75rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset none; +} .p-tieredmenu { padding: 0.5rem 0; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 10a38a90377..d2dd7cf3b62 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #007ad9; color: #ffffff; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #007ad9; + color: #ffffff; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #8dcdff; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 36a57c4a97d..8f2393876ea 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #007ad9; color: #ffffff; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #007ad9; + color: #ffffff; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #8dcdff; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index f460744f6c1..151e2b5f4cf 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -5011,6 +5011,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #007ad9; color: #ffffff; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #007ad9; + color: #ffffff; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #8dcdff; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 9d4f0094179..32815cf26ad 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -4999,6 +4999,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dadada; color: #385048; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #AFD3C8; + color: #385048; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #e4e9ec; +} .p-tieredmenu { padding: 0; diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index d3b35c72f51..68476a1f247 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #2196F3; color: #2196F3; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #2196F3; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #a6d5fa; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index c69b820e191..95426c1fb7b 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #4CAF50; color: #4CAF50; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #4CAF50; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #b7e0b8; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index b2c2c2624b3..b61886badba 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #FFC107; color: #FFC107; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #FFC107; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #ffe69c; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 821130a96ec..30644b0d561 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #9C27B0; color: #9C27B0; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #9C27B0; + width: 2.357rem; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 0.2rem #df9eea; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index d398eafb2dd..babc054ad08 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -5082,6 +5082,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #4F46E5; color: #4F46E5; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #ffffff; + color: #4F46E5; + width: 3rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #6366F1; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 2edbd8e1dba..bb2bc6127d8 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #64B5F6; color: #64B5F6; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1f2d40; + color: #64B5F6; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #93cbf9; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index b6062c63ced..8fb0634216d 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #81C784; color: #81C784; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1f2d40; + color: #81C784; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #a7d8a9; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 7d4028778eb..1e9f6e6c52b 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #FFD54F; color: #FFD54F; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1f2d40; + color: #FFD54F; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #ffe284; +} .p-tieredmenu { padding: 0.25rem 0; diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 0a797050512..5a0fcc38cc0 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -5047,6 +5047,24 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #BA68C8; color: #BA68C8; } +.p-tabmenu .p-tabmenu-left-icon { + margin-right: 0.5rem; +} +.p-tabmenu .p-tabmenu-right-icon { + margin-left: 0.5rem; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link { + background: #1f2d40; + color: #BA68C8; + width: 2.357rem; + box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + border-radius: 0; +} +.p-tabmenu .p-tabmenu-nav-btn.p-link:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: inset 0 0 0 1px #cf95d9; +} .p-tieredmenu { padding: 0.25rem 0;