From 0ce958ddf3a29836531e9e73c4c85302f370e0e2 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 31 Aug 2021 15:53:48 +0300 Subject: [PATCH] Theming for scrollable tabs --- api-generator/components/tabview.js | 2 +- public/themes/arya-blue/theme.css | 16 ++++++++++++++-- public/themes/arya-green/theme.css | 16 ++++++++++++++-- public/themes/arya-orange/theme.css | 16 ++++++++++++++-- public/themes/arya-purple/theme.css | 16 ++++++++++++++-- public/themes/bootstrap4-dark-blue/theme.css | 16 ++++++++++++++-- .../themes/bootstrap4-dark-purple/theme.css | 16 ++++++++++++++-- public/themes/bootstrap4-light-blue/theme.css | 16 ++++++++++++++-- .../themes/bootstrap4-light-purple/theme.css | 16 ++++++++++++++-- public/themes/fluent-light/theme.css | 16 ++++++++++++++-- public/themes/luna-amber/theme.css | 16 ++++++++++++++-- public/themes/luna-blue/theme.css | 16 ++++++++++++++-- public/themes/luna-green/theme.css | 16 ++++++++++++++-- public/themes/luna-pink/theme.css | 16 ++++++++++++++-- public/themes/md-dark-deeppurple/theme.css | 16 ++++++++++++++-- public/themes/md-dark-indigo/theme.css | 16 ++++++++++++++-- public/themes/md-light-deeppurple/theme.css | 16 ++++++++++++++-- public/themes/md-light-indigo/theme.css | 16 ++++++++++++++-- public/themes/mdc-dark-deeppurple/theme.css | 16 ++++++++++++++-- public/themes/mdc-dark-indigo/theme.css | 16 ++++++++++++++-- public/themes/mdc-light-deeppurple/theme.css | 16 ++++++++++++++-- public/themes/mdc-light-indigo/theme.css | 16 ++++++++++++++-- public/themes/nova-accent/theme.css | 16 ++++++++++++++-- public/themes/nova-alt/theme.css | 16 ++++++++++++++-- public/themes/nova-vue/theme.css | 16 ++++++++++++++-- public/themes/nova/theme.css | 16 ++++++++++++++-- public/themes/rhea/theme.css | 16 ++++++++++++++-- public/themes/saga-blue/theme.css | 16 ++++++++++++++-- public/themes/saga-green/theme.css | 16 ++++++++++++++-- public/themes/saga-orange/theme.css | 16 ++++++++++++++-- public/themes/saga-purple/theme.css | 16 ++++++++++++++-- public/themes/vela-blue/theme.css | 16 ++++++++++++++-- public/themes/vela-green/theme.css | 16 ++++++++++++++-- public/themes/vela-orange/theme.css | 16 ++++++++++++++-- public/themes/vela-purple/theme.css | 16 ++++++++++++++-- src/components/tabview/TabView.vue | 15 +++++++++++---- src/views/tabview/TabViewDoc.vue | 19 ++++++++++++++++++- 37 files changed, 506 insertions(+), 74 deletions(-) diff --git a/api-generator/components/tabview.js b/api-generator/components/tabview.js index 996ca9cb2..1eb0cce72 100644 --- a/api-generator/components/tabview.js +++ b/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." } ]; diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index c120bb87a..6c0c5fdb1 100644 --- a/public/themes/arya-blue/theme.css +++ b/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; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 6122394d3..f3b156421 100644 --- a/public/themes/arya-green/theme.css +++ b/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; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 6bd021dd6..97a316d2f 100644 --- a/public/themes/arya-orange/theme.css +++ b/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; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index e5f9443c1..a7ed76515 100644 --- a/public/themes/arya-purple/theme.css +++ b/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; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 27dd80032..100515495 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/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; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index bda96eca2..6e6433aaf 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/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; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 578677869..6049b3d4c 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/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; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index d3bc40f93..007a53e15 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/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; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index c9400db8e..3a99daf8f 100644 --- a/public/themes/fluent-light/theme.css +++ b/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; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index c3620c32f..63fac0163 100644 --- a/public/themes/luna-amber/theme.css +++ b/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; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index eadac9f44..8b62c891a 100644 --- a/public/themes/luna-blue/theme.css +++ b/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; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 95a5cc534..4576bcad7 100644 --- a/public/themes/luna-green/theme.css +++ b/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; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 03168b697..8e5190a9f 100644 --- a/public/themes/luna-pink/theme.css +++ b/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; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 2340fe687..e517b87a9 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/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); diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 5b23219d2..5f1cf5639 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/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); diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 4340c5128..6ee299329 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/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); diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index edc3e4f67..62eb21aa7 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/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); diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 81841c158..2be7e5b63 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/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); diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index b4e2f63f5..6a39ccd27 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/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); diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 42a985d8e..97213f8c0 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/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); diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 8856ed4a7..cdb2dfd66 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/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); diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 7b616ddb1..6a9af251e 100644 --- a/public/themes/nova-accent/theme.css +++ b/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; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index 9d2b5cb40..e950cbd5f 100644 --- a/public/themes/nova-alt/theme.css +++ b/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; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 607017902..5ace4e440 100644 --- a/public/themes/nova-vue/theme.css +++ b/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; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index e1d5824bb..89b4dac28 100644 --- a/public/themes/nova/theme.css +++ b/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; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 8a5d72b21..0a6bb93d5 100644 --- a/public/themes/rhea/theme.css +++ b/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; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 46e33f4bf..b9ee30129 100644 --- a/public/themes/saga-blue/theme.css +++ b/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; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 3ff1c96bb..44de6bf71 100644 --- a/public/themes/saga-green/theme.css +++ b/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; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index df8fab9cc..461ddf8f8 100644 --- a/public/themes/saga-orange/theme.css +++ b/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; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 215f98101..9a477aa58 100644 --- a/public/themes/saga-purple/theme.css +++ b/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; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 5dd276de9..ad723ea01 100644 --- a/public/themes/vela-blue/theme.css +++ b/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; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index a42ba6ed0..f54446cdd 100644 --- a/public/themes/vela-green/theme.css +++ b/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; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 13d55d5a6..920e7172b 100644 --- a/public/themes/vela-orange/theme.css +++ b/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; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index abfc7aefa..005d12f09 100644 --- a/public/themes/vela-purple/theme.css +++ b/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; diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue index c49091920..7c0c70d06 100755 --- a/src/components/tabview/TabView.vue +++ b/src/components/tabview/TabView.vue @@ -1,7 +1,7 @@