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

Theming for scrollable tabs

pull/1533/head
Cagatay Civici 2021-08-31 15:53:48 +03:00
parent b21c23a263
commit 0ce958ddf3
37 changed files with 506 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api-generator/components/tabview.js
View File

@ -15,7 +15,7 @@ const TabViewProps = [
name: "scrollable",
type: "boolean",
default: "false",
description: "When specified, enables horizontal scrolling."
description: "When enabled displays buttons at each side of the tab headers to scroll the tab list."
}
];

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1e1e1e;
@ -3631,6 +3631,18 @@
border-color: #64B5F6;
color: #64B5F6;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabview .p-tabview-panels {
background: #1e1e1e;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1e1e1e;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1e1e1e;
@ -3631,6 +3631,18 @@
border-color: #81C784;
color: #81C784;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabview .p-tabview-panels {
background: #1e1e1e;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1e1e1e;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1e1e1e;
@ -3631,6 +3631,18 @@
border-color: #FFD54F;
color: #FFD54F;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabview .p-tabview-panels {
background: #1e1e1e;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1e1e1e;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1e1e1e;
@ -3631,6 +3631,18 @@
border-color: #BA68C8;
color: #BA68C8;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabview .p-tabview-panels {
background: #1e1e1e;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1e1e1e;

16
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -3631,7 +3631,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #e3f3fe;
box-shadow: inset 0 0 0 1px #e3f3fe;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #2a323d;
@ -3643,6 +3643,18 @@
border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
color: rgba(255, 255, 255, 0.6);
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #e3f3fe;
}
.p-tabview .p-tabview-panels {
background: #2a323d;
padding: 1.25rem;
@ -4694,7 +4706,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #e3f3fe;
box-shadow: inset 0 0 0 1px #e3f3fe;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #2a323d;

16
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -3631,7 +3631,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #f0e6f5;
box-shadow: inset 0 0 0 1px #f0e6f5;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #2a323d;
@ -3643,6 +3643,18 @@
border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
color: rgba(255, 255, 255, 0.6);
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #f0e6f5;
}
.p-tabview .p-tabview-panels {
background: #2a323d;
padding: 1.25rem;
@ -4694,7 +4706,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #f0e6f5;
box-shadow: inset 0 0 0 1px #f0e6f5;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #2a323d;

16
public/themes/bootstrap4-light-blue/theme.css
View File

@ -3631,7 +3631,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3643,6 +3643,18 @@
border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
color: #495057;
}
.p-tabview .p-tabview-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-tabview .p-tabview-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-tabview .p-tabview-panels {
background: #ffffff;
padding: 1.25rem;
@ -4694,7 +4706,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

16
public/themes/bootstrap4-light-purple/theme.css
View File

@ -3631,7 +3631,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3643,6 +3643,18 @@
border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
color: #495057;
}
.p-tabview .p-tabview-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-tabview .p-tabview-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-tabview .p-tabview-panels {
background: #ffffff;
padding: 1.25rem;
@ -4694,7 +4706,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

16
public/themes/fluent-light/theme.css
View File

@ -3594,7 +3594,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #605e5c;
box-shadow: inset inset 0 0 0 1px #605e5c;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #f3f2f1;
@ -3606,6 +3606,18 @@
border-color: #0078d4;
color: #323130;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset inset 0 0 0 1px #605e5c;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4633,7 +4645,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #605e5c;
box-shadow: inset inset 0 0 0 1px #605e5c;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #f3f2f1;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #191919;
@ -3618,6 +3618,18 @@
border-color: #FFE082;
color: #212529;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-panels {
background: #323232;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #191919;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #191919;
@ -3618,6 +3618,18 @@
border-color: #81D4FA;
color: #212529;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-panels {
background: #323232;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #191919;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #191919;
@ -3618,6 +3618,18 @@
border-color: #C5E1A5;
color: #212529;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-panels {
background: #323232;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #191919;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #191919;
@ -3618,6 +3618,18 @@
border-color: #F48FB1;
color: #212529;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabview .p-tabview-panels {
background: #323232;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
box-shadow: inset 0 0 0 0.1rem white;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #191919;

16
public/themes/md-dark-deeppurple/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(206, 147, 216, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #CE93D8;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: transparent;
padding: 1rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(206, 147, 216, 0.04);

16
public/themes/md-dark-indigo/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(159, 168, 218, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #9FA8DA;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: transparent;
padding: 1rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(159, 168, 218, 0.04);

16
public/themes/md-light-deeppurple/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(103, 58, 183, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #673AB7;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(103, 58, 183, 0.04);

16
public/themes/md-light-indigo/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(63, 81, 181, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #3F51B5;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(63, 81, 181, 0.04);

16
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(206, 147, 216, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #CE93D8;
}
.p-tabview .p-tabview-nav-btn.p-link {
background: transparent;
color: #CE93D8;
width: 2.25rem;
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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: transparent;
padding: 0.75rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(206, 147, 216, 0.04);

16
public/themes/mdc-dark-indigo/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(159, 168, 218, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #9FA8DA;
}
.p-tabview .p-tabview-nav-btn.p-link {
background: transparent;
color: #9FA8DA;
width: 2.25rem;
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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: transparent;
padding: 0.75rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(159, 168, 218, 0.04);

16
public/themes/mdc-light-deeppurple/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(103, 58, 183, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #673AB7;
}
.p-tabview .p-tabview-nav-btn.p-link {
background: #ffffff;
color: #673AB7;
width: 2.25rem;
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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.75rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(103, 58, 183, 0.04);

16
public/themes/mdc-light-indigo/theme.css
View File

@ -3643,7 +3643,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: rgba(63, 81, 181, 0.04);
@ -3655,6 +3655,18 @@
border-color: transparent;
color: #3F51B5;
}
.p-tabview .p-tabview-nav-btn.p-link {
background: #ffffff;
color: #3F51B5;
width: 2.25rem;
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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset none;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.75rem;
@ -4706,7 +4718,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
box-shadow: inset none;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: rgba(63, 81, 181, 0.04);

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

@ -3594,7 +3594,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #dbdbdb;
@ -3606,6 +3606,18 @@
border-color: #007ad9;
color: #ffffff;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.571rem 1rem;
@ -4633,7 +4645,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #dbdbdb;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #dbdbdb;
@ -3618,6 +3618,18 @@
border-color: #007ad9;
color: #ffffff;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #dbdbdb;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #c2e9d8;
box-shadow: inset 0 0 0 0.2rem #c2e9d8;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #dbdbdb;
@ -3618,6 +3618,18 @@
border-color: #41b883;
color: #ffffff;
}
.p-tabview .p-tabview-nav-btn.p-link {
background: #41b883;
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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #c2e9d8;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #c2e9d8;
box-shadow: inset 0 0 0 0.2rem #c2e9d8;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #dbdbdb;

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

@ -3606,7 +3606,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #dbdbdb;
@ -3618,6 +3618,18 @@
border-color: #007ad9;
color: #ffffff;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.571rem 1rem;
@ -4645,7 +4657,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #dbdbdb;

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

@ -3594,7 +3594,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #e4e9ec;
box-shadow: inset 0 0 0 0.2rem #e4e9ec;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #617c8a;
@ -3606,6 +3606,18 @@
border-color: #dadada;
color: #385048;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #e4e9ec;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 0.571rem 1rem;
@ -4633,7 +4645,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #e4e9ec;
box-shadow: inset 0 0 0 0.2rem #e4e9ec;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #617c8a;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #a6d5fa;
box-shadow: inset 0 0 0 0.2rem #a6d5fa;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3631,6 +3631,18 @@
border-color: #2196F3;
color: #2196F3;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #a6d5fa;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #a6d5fa;
box-shadow: inset 0 0 0 0.2rem #a6d5fa;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #b7e0b8;
box-shadow: inset 0 0 0 0.2rem #b7e0b8;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3631,6 +3631,18 @@
border-color: #4CAF50;
color: #4CAF50;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #b7e0b8;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #b7e0b8;
box-shadow: inset 0 0 0 0.2rem #b7e0b8;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ffe69c;
box-shadow: inset 0 0 0 0.2rem #ffe69c;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3631,6 +3631,18 @@
border-color: #FFC107;
color: #FFC107;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ffe69c;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ffe69c;
box-shadow: inset 0 0 0 0.2rem #ffe69c;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

16
public/themes/saga-purple/theme.css
View File

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #df9eea;
box-shadow: inset 0 0 0 0.2rem #df9eea;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff;
@ -3631,6 +3631,18 @@
border-color: #9C27B0;
color: #9C27B0;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #df9eea;
}
.p-tabview .p-tabview-panels {
background: #ffffff;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #df9eea;
box-shadow: inset 0 0 0 0.2rem #df9eea;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1f2d40;
@ -3631,6 +3631,18 @@
border-color: #64B5F6;
color: #64B5F6;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabview .p-tabview-panels {
background: #1f2d40;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1f2d40;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1f2d40;
@ -3631,6 +3631,18 @@
border-color: #81C784;
color: #81C784;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabview .p-tabview-panels {
background: #1f2d40;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1f2d40;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1f2d40;
@ -3631,6 +3631,18 @@
border-color: #FFD54F;
color: #FFD54F;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabview .p-tabview-panels {
background: #1f2d40;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1f2d40;

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

@ -3619,7 +3619,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #1f2d40;
@ -3631,6 +3631,18 @@
border-color: #BA68C8;
color: #BA68C8;
}
.p-tabview .p-tabview-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-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabview .p-tabview-panels {
background: #1f2d40;
padding: 1rem;
@ -4682,7 +4694,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #1f2d40;

15
src/components/tabview/TabView.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="contentClasses">
<div class="p-tabview-nav-container">
<button v-if="scrollable" :class="prevButtonClasses" :disabled="backwardIsDisabled" @click="navBackward" type="button" v-ripple>
<button v-if="scrollable && !backwardIsDisabled" :class="prevButtonClasses" @click="navBackward" type="button" v-ripple>
<span class="pi pi-chevron-left"></span>
</button>
<div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
@ -15,7 +15,7 @@
<li ref="inkbar" class="p-tabview-ink-bar"></li>
</ul>
</div>
<button v-if="scrollable" :class="nextButtonClasses" :disabled="forwardIsDisabled" @click="navForward" type="button" v-ripple>
<button v-if="scrollable && !forwardIsDisabled" :class="nextButtonClasses" @click="navForward" type="button" v-ripple>
<span class="pi pi-chevron-right"></span>
</button>
</div>
@ -145,10 +145,10 @@ export default {
return ['p-tabview p-component', {'p-tabview-scrollable': this.scrollable}];
},
prevButtonClasses() {
return ['p-tabview-nav-prev p-tabview-nav-btn p-link', {'p-disabled': this.backwardIsDisabled}]
return ['p-tabview-nav-prev p-tabview-nav-btn p-link']
},
nextButtonClasses() {
return ['p-tabview-nav-next p-tabview-nav-btn p-link', {'p-disabled': this.forwardIsDisabled}]
return ['p-tabview-nav-next p-tabview-nav-btn p-link']
},
tabs() {
const tabs = []
@ -179,6 +179,10 @@ export default {
position: relative;
}
.p-tabview-scrollable .p-tabview-nav-container {
overflow: hidden;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
@ -224,6 +228,9 @@ export default {
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-tabview-nav-prev {

19
src/views/tabview/TabViewDoc.vue
View File

@ -171,6 +171,23 @@ export default {
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</code></pre>
<h5>Scrollable</h5>
<p>Enable <i>scrollable</i> property to display buttons at each side of the tab headers that scrolls the tab list.</p>
<pre v-code><code>
&lt;TabView scrollable&gt;
&lt;TabPanel header="Header I"&gt;
Content I
&lt;/TabPanel&gt;
&lt;TabPanel header="Header II"&gt;
Content II
&lt;/TabPanel&gt;
&lt;TabPanel header="Header III"&gt;
Content III
&lt;/TabPanel&gt;
&lt;/TabView&gt;
</code></pre>
<h5>Properties of TabPanel</h5>
@ -230,7 +247,7 @@ export default {
<td>scrollable</td>
<td>boolean</td>
<td>false</td>
<td>When specified, enables horizontal scrolling.</td>
<td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
</tr>
</tbody>
</table>