Skip to content

Commit dfb35f8

Browse files
nitrogenousnitrogenous
authored
Merge pull request #6616 from primefaces/6615-tabview-|-inkbar-is-visible-for-lara
Tabview Core Styles Moved to SASS Theme and Removed Inkbar for Lara
2 parents fb18a93 + 6287b85 commit dfb35f8

File tree

52 files changed

+4431
-791
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+4431
-791
lines changed

‎components/lib/tabview/TabViewBase.js‎

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -23,85 +23,6 @@ const classes = {
2323
}
2424
};
2525

26-
const styles = `
27-
@layer primereact {
28-
.p-tabview-nav-container {
29-
position: relative;
30-
}
31-
32-
.p-tabview-scrollable .p-tabview-nav-container {
33-
overflow: hidden;
34-
}
35-
36-
.p-tabview-nav-content {
37-
overflow-x: auto;
38-
overflow-y: hidden;
39-
scroll-behavior: smooth;
40-
scrollbar-width: none;
41-
overscroll-behavior: contain auto;
42-
position: relative;
43-
}
44-
45-
.p-tabview-nav {
46-
display: flex;
47-
margin: 0;
48-
padding: 0;
49-
list-style-type: none;
50-
flex: 1 1 auto;
51-
}
52-
53-
.p-tabview-nav-link {
54-
cursor: pointer;
55-
user-select: none;
56-
display: flex;
57-
align-items: center;
58-
position: relative;
59-
text-decoration: none;
60-
overflow: hidden;
61-
}
62-
63-
.p-tabview-ink-bar {
64-
display: none;
65-
z-index: 1;
66-
}
67-
68-
.p-tabview-nav-link:focus {
69-
z-index: 1;
70-
}
71-
72-
.p-tabview-close {
73-
z-index: 1;
74-
}
75-
76-
.p-tabview-title {
77-
line-height: 1;
78-
white-space: nowrap;
79-
}
80-
81-
.p-tabview-nav-btn {
82-
position: absolute;
83-
top: 0;
84-
z-index: 2;
85-
height: 100%;
86-
display: flex;
87-
align-items: center;
88-
justify-content: center;
89-
}
90-
91-
.p-tabview-nav-prev {
92-
left: 0;
93-
}
94-
95-
.p-tabview-nav-next {
96-
right: 0;
97-
}
98-
99-
.p-tabview-nav-content::-webkit-scrollbar {
100-
display: none;
101-
}
102-
}
103-
`;
104-
10526
const inlineStyles = {
10627
tab: {
10728
header: ({ headerStyle, _style }) => ({ ...(headerStyle || {}), ...(_style || {}) }),
@@ -129,7 +50,6 @@ export const TabViewBase = ComponentBase.extend({
12950
},
13051
css: {
13152
classes,
132-
styles,
13353
inlineStyles
13454
}
13555
});

‎public/themes/arya-blue/theme.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4660,6 +4660,68 @@
46604660
outline-offset: 0;
46614661
box-shadow: 0 0 0 1px #93cbf9;
46624662
}
4663+
.p-tabview-nav-container {
4664+
position: relative;
4665+
}
4666+
.p-tabview-scrollable .p-tabview-nav-container {
4667+
overflow: hidden;
4668+
}
4669+
.p-tabview-nav-content {
4670+
overflow-x: auto;
4671+
overflow-y: hidden;
4672+
scroll-behavior: smooth;
4673+
scrollbar-width: none;
4674+
overscroll-behavior: contain auto;
4675+
position: relative;
4676+
}
4677+
.p-tabview-nav {
4678+
display: flex;
4679+
margin: 0;
4680+
padding: 0;
4681+
list-style-type: none;
4682+
flex: 1 1 auto;
4683+
}
4684+
.p-tabview-nav-link {
4685+
cursor: pointer;
4686+
user-select: none;
4687+
display: flex;
4688+
align-items: center;
4689+
position: relative;
4690+
text-decoration: none;
4691+
overflow: hidden;
4692+
}
4693+
.p-tabview-ink-bar {
4694+
display: none;
4695+
z-index: 1;
4696+
}
4697+
.p-tabview-nav-link:focus {
4698+
z-index: 1;
4699+
}
4700+
.p-tabview-close {
4701+
z-index: 1;
4702+
}
4703+
.p-tabview-title {
4704+
line-height: 1;
4705+
white-space: nowrap;
4706+
}
4707+
.p-tabview-nav-btn {
4708+
position: absolute;
4709+
top: 0;
4710+
z-index: 2;
4711+
height: 100%;
4712+
display: flex;
4713+
align-items: center;
4714+
justify-content: center;
4715+
}
4716+
.p-tabview-nav-prev {
4717+
left: 0;
4718+
}
4719+
.p-tabview-nav-next {
4720+
right: 0;
4721+
}
4722+
.p-tabview-nav-content::-webkit-scrollbar {
4723+
display: none;
4724+
}
46634725
.p-tabview .p-tabview-nav {
46644726
background: transparent;
46654727
border: 1px solid #383838;

‎public/themes/arya-green/theme.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4660,6 +4660,68 @@
46604660
outline-offset: 0;
46614661
box-shadow: 0 0 0 1px #a7d8a9;
46624662
}
4663+
.p-tabview-nav-container {
4664+
position: relative;
4665+
}
4666+
.p-tabview-scrollable .p-tabview-nav-container {
4667+
overflow: hidden;
4668+
}
4669+
.p-tabview-nav-content {
4670+
overflow-x: auto;
4671+
overflow-y: hidden;
4672+
scroll-behavior: smooth;
4673+
scrollbar-width: none;
4674+
overscroll-behavior: contain auto;
4675+
position: relative;
4676+
}
4677+
.p-tabview-nav {
4678+
display: flex;
4679+
margin: 0;
4680+
padding: 0;
4681+
list-style-type: none;
4682+
flex: 1 1 auto;
4683+
}
4684+
.p-tabview-nav-link {
4685+
cursor: pointer;
4686+
user-select: none;
4687+
display: flex;
4688+
align-items: center;
4689+
position: relative;
4690+
text-decoration: none;
4691+
overflow: hidden;
4692+
}
4693+
.p-tabview-ink-bar {
4694+
display: none;
4695+
z-index: 1;
4696+
}
4697+
.p-tabview-nav-link:focus {
4698+
z-index: 1;
4699+
}
4700+
.p-tabview-close {
4701+
z-index: 1;
4702+
}
4703+
.p-tabview-title {
4704+
line-height: 1;
4705+
white-space: nowrap;
4706+
}
4707+
.p-tabview-nav-btn {
4708+
position: absolute;
4709+
top: 0;
4710+
z-index: 2;
4711+
height: 100%;
4712+
display: flex;
4713+
align-items: center;
4714+
justify-content: center;
4715+
}
4716+
.p-tabview-nav-prev {
4717+
left: 0;
4718+
}
4719+
.p-tabview-nav-next {
4720+
right: 0;
4721+
}
4722+
.p-tabview-nav-content::-webkit-scrollbar {
4723+
display: none;
4724+
}
46634725
.p-tabview .p-tabview-nav {
46644726
background: transparent;
46654727
border: 1px solid #383838;

‎public/themes/arya-orange/theme.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4660,6 +4660,68 @@
46604660
outline-offset: 0;
46614661
box-shadow: 0 0 0 1px #ffe284;
46624662
}
4663+
.p-tabview-nav-container {
4664+
position: relative;
4665+
}
4666+
.p-tabview-scrollable .p-tabview-nav-container {
4667+
overflow: hidden;
4668+
}
4669+
.p-tabview-nav-content {
4670+
overflow-x: auto;
4671+
overflow-y: hidden;
4672+
scroll-behavior: smooth;
4673+
scrollbar-width: none;
4674+
overscroll-behavior: contain auto;
4675+
position: relative;
4676+
}
4677+
.p-tabview-nav {
4678+
display: flex;
4679+
margin: 0;
4680+
padding: 0;
4681+
list-style-type: none;
4682+
flex: 1 1 auto;
4683+
}
4684+
.p-tabview-nav-link {
4685+
cursor: pointer;
4686+
user-select: none;
4687+
display: flex;
4688+
align-items: center;
4689+
position: relative;
4690+
text-decoration: none;
4691+
overflow: hidden;
4692+
}
4693+
.p-tabview-ink-bar {
4694+
display: none;
4695+
z-index: 1;
4696+
}
4697+
.p-tabview-nav-link:focus {
4698+
z-index: 1;
4699+
}
4700+
.p-tabview-close {
4701+
z-index: 1;
4702+
}
4703+
.p-tabview-title {
4704+
line-height: 1;
4705+
white-space: nowrap;
4706+
}
4707+
.p-tabview-nav-btn {
4708+
position: absolute;
4709+
top: 0;
4710+
z-index: 2;
4711+
height: 100%;
4712+
display: flex;
4713+
align-items: center;
4714+
justify-content: center;
4715+
}
4716+
.p-tabview-nav-prev {
4717+
left: 0;
4718+
}
4719+
.p-tabview-nav-next {
4720+
right: 0;
4721+
}
4722+
.p-tabview-nav-content::-webkit-scrollbar {
4723+
display: none;
4724+
}
46634725
.p-tabview .p-tabview-nav {
46644726
background: transparent;
46654727
border: 1px solid #383838;

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4717,6 +4717,68 @@
47174717
outline-offset: 0;
47184718
box-shadow: 0 0 0 1px #e3f3fe;
47194719
}
4720+
.p-tabview-nav-container {
4721+
position: relative;
4722+
}
4723+
.p-tabview-scrollable .p-tabview-nav-container {
4724+
overflow: hidden;
4725+
}
4726+
.p-tabview-nav-content {
4727+
overflow-x: auto;
4728+
overflow-y: hidden;
4729+
scroll-behavior: smooth;
4730+
scrollbar-width: none;
4731+
overscroll-behavior: contain auto;
4732+
position: relative;
4733+
}
4734+
.p-tabview-nav {
4735+
display: flex;
4736+
margin: 0;
4737+
padding: 0;
4738+
list-style-type: none;
4739+
flex: 1 1 auto;
4740+
}
4741+
.p-tabview-nav-link {
4742+
cursor: pointer;
4743+
user-select: none;
4744+
display: flex;
4745+
align-items: center;
4746+
position: relative;
4747+
text-decoration: none;
4748+
overflow: hidden;
4749+
}
4750+
.p-tabview-ink-bar {
4751+
display: none;
4752+
z-index: 1;
4753+
}
4754+
.p-tabview-nav-link:focus {
4755+
z-index: 1;
4756+
}
4757+
.p-tabview-close {
4758+
z-index: 1;
4759+
}
4760+
.p-tabview-title {
4761+
line-height: 1;
4762+
white-space: nowrap;
4763+
}
4764+
.p-tabview-nav-btn {
4765+
position: absolute;
4766+
top: 0;
4767+
z-index: 2;
4768+
height: 100%;
4769+
display: flex;
4770+
align-items: center;
4771+
justify-content: center;
4772+
}
4773+
.p-tabview-nav-prev {
4774+
left: 0;
4775+
}
4776+
.p-tabview-nav-next {
4777+
right: 0;
4778+
}
4779+
.p-tabview-nav-content::-webkit-scrollbar {
4780+
display: none;
4781+
}
47204782
.p-tabview .p-tabview-nav {
47214783
background: transparent;
47224784
border: 1px solid #3f4b5b;

0 commit comments

Comments
 (0)