@fluid-topics/ft-tabs 1.1.83 → 1.1.85
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-tabs.light.js +76 -81
- package/build/ft-tabs.min.js +55 -60
- package/build/ftds-tabs.styles.js +16 -19
- package/package.json +7 -7
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
import { tabs } from "@fluid-topics/design-system-variables";
|
|
3
|
+
import { setVariable } from "@fluid-topics/ft-wc-utils";
|
|
4
|
+
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
|
|
3
5
|
export { tabs as FtdsTabsCssVariables } from "@fluid-topics/design-system-variables";
|
|
4
6
|
// language=CSS
|
|
5
7
|
export const designSystemStyles = css `
|
|
@@ -15,6 +17,7 @@ export const designSystemStyles = css `
|
|
|
15
17
|
display: flex;
|
|
16
18
|
position: relative;
|
|
17
19
|
flex-wrap: wrap;
|
|
20
|
+
border-bottom: ${tabs.offBorderBottomWidth} solid ${tabs.offBorderBottomColor};
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
.ft-tabs--align-end [role="tablist"],
|
|
@@ -36,7 +39,6 @@ export const designSystemStyles = css `
|
|
|
36
39
|
padding: ${tabs.withLabelVerticalPadding} ${tabs.withLabelHorizontalPadding};
|
|
37
40
|
background: none;
|
|
38
41
|
box-shadow: 0px 0px 0px transparent;
|
|
39
|
-
border: ${tabs.focusOutlineWidth} solid transparent;
|
|
40
42
|
text-shadow: 0px 0px 0px transparent;
|
|
41
43
|
cursor: pointer;
|
|
42
44
|
outline: none;
|
|
@@ -44,6 +46,8 @@ export const designSystemStyles = css `
|
|
|
44
46
|
line-height: 1;
|
|
45
47
|
color: ${tabs.offColor};
|
|
46
48
|
border-radius: ${tabs.topLeftBorderRadius} ${tabs.topRightBorderRadius} 0 0;
|
|
49
|
+
border: 0;
|
|
50
|
+
gap: ${tabs.verticalGap} ${tabs.horizontalGap};
|
|
47
51
|
}
|
|
48
52
|
|
|
49
53
|
.ft-tabs--icon-only [role='tab'] {
|
|
@@ -51,7 +55,13 @@ export const designSystemStyles = css `
|
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
[role='tab'] ft-ripple {
|
|
54
|
-
|
|
58
|
+
${setVariable(FtRippleCssVariables.color, tabs.onStateLayerColor)};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[role='tab']:focus-visible {
|
|
62
|
+
outline: ${tabs.focusOutlineWidth} solid ${tabs.focusFocusRingColor};
|
|
63
|
+
outline-offset: calc(${tabs.focusOutlineWidth} * -1);
|
|
64
|
+
border-radius: ${tabs.focusOutlineWidth};
|
|
55
65
|
}
|
|
56
66
|
|
|
57
67
|
[role='tab']::before {
|
|
@@ -66,11 +76,6 @@ export const designSystemStyles = css `
|
|
|
66
76
|
opacity: ${tabs.offDefaultStateLayerOpacity};
|
|
67
77
|
}
|
|
68
78
|
|
|
69
|
-
[role='tab']:focus-visible {
|
|
70
|
-
border-color: ${tabs.focusFocusRingColor};
|
|
71
|
-
border-radius: ${tabs.focusOutlineWidth};
|
|
72
|
-
}
|
|
73
|
-
|
|
74
79
|
[role='tab']:focus-visible::before {
|
|
75
80
|
background-color: ${tabs.offStateLayerColor};
|
|
76
81
|
opacity: ${tabs.offFocusStateLayerOpacity};
|
|
@@ -108,7 +113,7 @@ export const designSystemStyles = css `
|
|
|
108
113
|
opacity: ${tabs.onHoverStateLayerOpacity};
|
|
109
114
|
}
|
|
110
115
|
|
|
111
|
-
[role='tab'][aria-selected='true']:focus::before {
|
|
116
|
+
[role='tab'][aria-selected='true']:focus-visible::before {
|
|
112
117
|
background-color: ${tabs.onStateLayerColor};
|
|
113
118
|
opacity: ${tabs.onFocusStateLayerOpacity};
|
|
114
119
|
}
|
|
@@ -137,19 +142,11 @@ export const designSystemStyles = css `
|
|
|
137
142
|
display: none;
|
|
138
143
|
}
|
|
139
144
|
|
|
140
|
-
.ft-tabs--tab-icon {
|
|
141
|
-
padding: ${tabs.verticalGap} 0;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.ft-tabs--side-icon .ft-tabs--tab-icon {
|
|
145
|
-
padding: 0 ${tabs.horizontalGap};
|
|
146
|
-
}
|
|
147
|
-
|
|
148
145
|
.ft-tabs--active-tab-indicator {
|
|
149
146
|
position: absolute;
|
|
150
|
-
height:
|
|
151
|
-
border-radius:
|
|
152
|
-
background-color: ${tabs.
|
|
147
|
+
height: ${tabs.activeTabIndicatorHeight} !important;
|
|
148
|
+
border-radius: 0;
|
|
149
|
+
background-color: ${tabs.onActiveTabIndicatorColor};
|
|
153
150
|
transition: width 200ms ease, left 200ms ease, top 200ms ease;
|
|
154
151
|
}
|
|
155
152
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-tabs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.85",
|
|
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.1.
|
|
23
|
-
"@fluid-topics/ft-ripple": "1.1.
|
|
24
|
-
"@fluid-topics/ft-tooltip": "1.1.
|
|
25
|
-
"@fluid-topics/ft-typography": "1.1.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "1.1.
|
|
22
|
+
"@fluid-topics/ft-icon": "1.1.85",
|
|
23
|
+
"@fluid-topics/ft-ripple": "1.1.85",
|
|
24
|
+
"@fluid-topics/ft-tooltip": "1.1.85",
|
|
25
|
+
"@fluid-topics/ft-typography": "1.1.85",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "1.1.85",
|
|
27
27
|
"lit": "3.1.0"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "7f23fb0e267fb0bcdd20de5b2fb39ab5940983d5"
|
|
30
30
|
}
|