Theming for scrollable tabs

api-generator/components/tabview.js

@@ -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."
     }
 ];
 

public/themes/arya-blue/theme.css

@@ -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;

public/themes/arya-green/theme.css

@@ -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;

public/themes/arya-orange/theme.css

@@ -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;

public/themes/arya-purple/theme.css

@@ -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;

public/themes/bootstrap4-dark-blue/theme.css

@@ -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;

public/themes/bootstrap4-dark-purple/theme.css

@@ -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;

public/themes/bootstrap4-light-blue/theme.css

@@ -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;

public/themes/bootstrap4-light-purple/theme.css

@@ -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;

public/themes/fluent-light/theme.css

@@ -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;

public/themes/luna-amber/theme.css

@@ -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;

public/themes/luna-blue/theme.css

@@ -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;

public/themes/luna-green/theme.css

@@ -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;

public/themes/luna-pink/theme.css

@@ -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;

public/themes/md-dark-deeppurple/theme.css

@@ -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);

public/themes/md-dark-indigo/theme.css

@@ -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);

public/themes/md-light-deeppurple/theme.css

@@ -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);

public/themes/md-light-indigo/theme.css

@@ -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);

public/themes/mdc-dark-deeppurple/theme.css

@@ -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);

public/themes/mdc-dark-indigo/theme.css

@@ -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);

public/themes/mdc-light-deeppurple/theme.css

@@ -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);

public/themes/mdc-light-indigo/theme.css

@@ -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);

public/themes/nova-accent/theme.css

@@ -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;

public/themes/nova-alt/theme.css

@@ -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;

public/themes/nova-vue/theme.css

@@ -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;

public/themes/nova/theme.css

@@ -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;

public/themes/rhea/theme.css

@@ -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;

public/themes/saga-blue/theme.css

@@ -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;

public/themes/saga-green/theme.css

@@ -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;

public/themes/saga-orange/theme.css

@@ -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;

public/themes/saga-purple/theme.css

@@ -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;

public/themes/vela-blue/theme.css

@@ -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;

public/themes/vela-green/theme.css

@@ -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;

public/themes/vela-orange/theme.css

@@ -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;

public/themes/vela-purple/theme.css

@@ -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;

src/components/tabview/TabView.vue

@@ -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 {

src/views/tabview/TabViewDoc.vue

@@ -171,6 +171,23 @@ export default {
 	</TabPanel>
 </TabView>
 
+</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>