Merge pull request #6616 from primefaces/6615-tabview-|-inkbar-is-vis…

…ible-for-lara Tabview Core Styles Moved to SASS Theme and Removed Inkbar for Lara
primefaces · May 13, 2024 · dfb35f8 · dfb35f8
2 parents fb18a93 + 6287b85
commit dfb35f8
Show file tree

Hide file tree

Showing 52 changed files with 4,431 additions and 791 deletions.
diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
@@ -23,85 +23,6 @@ const classes = {
     }
 };
 
-const styles = `
-@layer primereact {
-    .p-tabview-nav-container {
-        position: relative;
-    }
-    
-    .p-tabview-scrollable .p-tabview-nav-container {
-        overflow: hidden;
-    }
-    
-    .p-tabview-nav-content {
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-behavior: smooth;
-        scrollbar-width: none;
-        overscroll-behavior: contain auto;
-        position: relative;
-    }
-    
-    .p-tabview-nav {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        flex: 1 1 auto;
-    }
-    
-    .p-tabview-nav-link {
-        cursor: pointer;
-        user-select: none;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        overflow: hidden;
-    }
-    
-    .p-tabview-ink-bar {
-        display: none;
-        z-index: 1;
-    }
-    
-    .p-tabview-nav-link:focus {
-        z-index: 1;
-    }
-    
-    .p-tabview-close {
-        z-index: 1;
-    }
-    
-    .p-tabview-title {
-        line-height: 1;
-        white-space: nowrap;
-    }
-    
-    .p-tabview-nav-btn {
-        position: absolute;
-        top: 0;
-        z-index: 2;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .p-tabview-nav-prev {
-        left: 0;
-    }
-    
-    .p-tabview-nav-next {
-        right: 0;
-    }
-    
-    .p-tabview-nav-content::-webkit-scrollbar {
-        display: none;
-    }
-}
-`;
-
 const inlineStyles = {
     tab: {
         header: ({ headerStyle, _style }) => ({ ...(headerStyle || {}), ...(_style || {}) }),
@@ -129,7 +50,6 @@ export const TabViewBase = ComponentBase.extend({
     },
     css: {
         classes,
-        styles,
         inlineStyles
     }
 });

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #93cbf9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;

diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #a7d8a9;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;

diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
@@ -4660,6 +4660,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #ffe284;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #383838;

diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4717,6 +4717,68 @@
     outline-offset: 0;
     box-shadow: 0 0 0 1px #e3f3fe;
   }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
   .p-tabview .p-tabview-nav {
     background: transparent;
     border: 1px solid #3f4b5b;