@fluid-topics/ft-tabs 1.2.6 → 1.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-base-tabs.d.ts +1 -0
- package/build/ft-base-tabs.js +17 -5
- package/build/ft-tab.properties.d.ts +1 -0
- package/build/ft-tabs.d.ts +0 -2
- package/build/ft-tabs.js +0 -4
- package/build/ft-tabs.light.js +96 -76
- package/build/ft-tabs.min.js +129 -109
- package/build/ftds-tabs.js +1 -0
- package/build/ftds-tabs.styles.js +22 -2
- package/package.json +7 -7
package/build/ftds-tabs.js
CHANGED
|
@@ -24,6 +24,7 @@ class FtdsTabs extends FtBaseTabs {
|
|
|
24
24
|
return {
|
|
25
25
|
"ft-tabs": true,
|
|
26
26
|
["ft-tabs--align-" + this.alignTabs]: true,
|
|
27
|
+
"ft-tabs--horizontal": this.horizontal,
|
|
27
28
|
"ft-tabs--side-icon": this.structure == FtDsTabsStructure.sideIcon,
|
|
28
29
|
"ft-tabs--icon-only": this.structure == FtDsTabsStructure.iconOnly,
|
|
29
30
|
"ft-tabs--label-only": this.structure == FtDsTabsStructure.labelOnly,
|
|
@@ -11,15 +11,26 @@ export const designSystemStyles = css `
|
|
|
11
11
|
height: 100%;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
+
.ft-tabs.ft-tabs--horizontal {
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
[role="tablist"] {
|
|
15
19
|
flex-shrink: 0;
|
|
16
20
|
flex-grow: 0;
|
|
17
21
|
display: flex;
|
|
22
|
+
flex-direction: row;
|
|
18
23
|
position: relative;
|
|
19
24
|
flex-wrap: wrap;
|
|
20
25
|
border-bottom: ${tabs.offBorderBottomWidth} solid ${tabs.offBorderBottomColor};
|
|
21
26
|
}
|
|
22
27
|
|
|
28
|
+
.ft-tabs--horizontal [role="tablist"] {
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
border-bottom: unset;
|
|
31
|
+
border-right: ${tabs.offBorderBottomWidth} solid ${tabs.offBorderBottomColor};
|
|
32
|
+
}
|
|
33
|
+
|
|
23
34
|
.ft-tabs--align-end [role="tablist"],
|
|
24
35
|
.ft-tabs--align-right [role="tablist"] {
|
|
25
36
|
justify-content: flex-end;
|
|
@@ -48,6 +59,13 @@ export const designSystemStyles = css `
|
|
|
48
59
|
border-radius: ${tabs.topLeftBorderRadius} ${tabs.topRightBorderRadius} 0 0;
|
|
49
60
|
border: 0;
|
|
50
61
|
gap: ${tabs.verticalGap} ${tabs.horizontalGap};
|
|
62
|
+
z-index: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ft-tabs--horizontal.ft-tabs--side-icon [role="tab"],
|
|
66
|
+
.ft-tabs--horizontal.ft-tabs--label-only [role="tab"] {
|
|
67
|
+
align-items: flex-end;
|
|
68
|
+
justify-content: end;
|
|
51
69
|
}
|
|
52
70
|
|
|
53
71
|
.ft-tabs--icon-only [role='tab'] {
|
|
@@ -126,7 +144,6 @@ export const designSystemStyles = css `
|
|
|
126
144
|
}
|
|
127
145
|
|
|
128
146
|
[role='tab'] .ft-tabs--tab-label {
|
|
129
|
-
width: 100%;
|
|
130
147
|
white-space: nowrap;
|
|
131
148
|
overflow: hidden;
|
|
132
149
|
text-overflow: ellipsis;
|
|
@@ -144,7 +161,6 @@ export const designSystemStyles = css `
|
|
|
144
161
|
|
|
145
162
|
.ft-tabs--active-tab-indicator {
|
|
146
163
|
position: absolute;
|
|
147
|
-
height: ${tabs.activeTabIndicatorHeight} !important;
|
|
148
164
|
border-radius: 0;
|
|
149
165
|
background-color: ${tabs.onActiveTabIndicatorColor};
|
|
150
166
|
transition: width 200ms ease, left 200ms ease, top 200ms ease;
|
|
@@ -155,4 +171,8 @@ export const designSystemStyles = css `
|
|
|
155
171
|
flex-grow: 1;
|
|
156
172
|
overflow: auto;
|
|
157
173
|
}
|
|
174
|
+
|
|
175
|
+
.ft-tabs--horizontal .ft-tabs--content {
|
|
176
|
+
overflow: unset;
|
|
177
|
+
}
|
|
158
178
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-tabs",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.8",
|
|
4
4
|
"description": "Generic tabs component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "1.2.
|
|
23
|
-
"@fluid-topics/ft-ripple": "1.2.
|
|
24
|
-
"@fluid-topics/ft-tooltip": "1.2.
|
|
25
|
-
"@fluid-topics/ft-typography": "1.2.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "1.2.
|
|
22
|
+
"@fluid-topics/ft-icon": "1.2.8",
|
|
23
|
+
"@fluid-topics/ft-ripple": "1.2.8",
|
|
24
|
+
"@fluid-topics/ft-tooltip": "1.2.8",
|
|
25
|
+
"@fluid-topics/ft-typography": "1.2.8",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "1.2.8",
|
|
27
27
|
"lit": "3.1.0"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "26d2cbd5aba536de63759b72e1c171449519d74e"
|
|
30
30
|
}
|