@semcore/tab-panel 3.4.18 → 3.5.0
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/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.5.0] - 2023-06-06
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Removed white bottom border under selected tab panels.
|
|
10
|
+
|
|
11
|
+
## [3.4.19] - 2023-05-31
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.52.0 ~> 3.53.0], `@semcore/flex-box` [4.7.26 ~> 4.7.27]).
|
|
16
|
+
|
|
5
17
|
## [3.4.18] - 2023-05-25
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -20,14 +20,14 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
|
|
|
20
20
|
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
21
21
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
22
22
|
/*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
24
|
-
"__STabPanel": "
|
|
25
|
-
"__STabPanelItem": "
|
|
26
|
-
"__SText": "
|
|
27
|
-
"_disabled": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabPanel_o0vpd_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_o0vpd_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_o0vpd_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_o0vpd_gg_ .___SText_o0vpd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_o0vpd_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_o0vpd_gg_:active,.___STabPanelItem_o0vpd_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabPanelItem_o0vpd_gg_:hover{outline:0;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_o0vpd_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_{cursor:default;pointer-events:none}.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_ .___SAddon_o0vpd_gg_,.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_ .___SText_o0vpd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_o0vpd_gg_.__keyboardFocused_o0vpd_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_::after{border-bottom:none}.___SText_o0vpd_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_o0vpd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_o0vpd_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_o0vpd_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_o0vpd_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "o0vpd_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__STabPanel": "___STabPanel_o0vpd_gg_",
|
|
25
|
+
"__STabPanelItem": "___STabPanelItem_o0vpd_gg_",
|
|
26
|
+
"__SText": "___SText_o0vpd_gg_",
|
|
27
|
+
"_disabled": "__disabled_o0vpd_gg_",
|
|
28
|
+
"__SAddon": "___SAddon_o0vpd_gg_",
|
|
29
|
+
"_keyboardFocused": "__keyboardFocused_o0vpd_gg_",
|
|
30
|
+
"_selected": "__selected_o0vpd_gg_"
|
|
31
31
|
});
|
|
32
32
|
var optionsA11yEnhance = {
|
|
33
33
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -2,7 +2,15 @@ STabPanel {
|
|
|
2
2
|
display: flex;
|
|
3
3
|
width: 100%;
|
|
4
4
|
max-width: 100%;
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
&::after {
|
|
7
|
+
content: '';
|
|
8
|
+
position: relative;
|
|
9
|
+
bottom: -1px;
|
|
10
|
+
flex: 1;
|
|
11
|
+
border-top: 1px solid transparent;
|
|
12
|
+
border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
13
|
+
}
|
|
6
14
|
}
|
|
7
15
|
|
|
8
16
|
STabPanelItem {
|
|
@@ -13,6 +21,7 @@ STabPanelItem {
|
|
|
13
21
|
height: 32px;
|
|
14
22
|
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
15
23
|
border: 1px solid transparent;
|
|
24
|
+
border-bottom: none;
|
|
16
25
|
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
|
|
17
26
|
0 0;
|
|
18
27
|
background: transparent;
|
|
@@ -22,6 +31,7 @@ STabPanelItem {
|
|
|
22
31
|
user-select: none;
|
|
23
32
|
box-sizing: border-box;
|
|
24
33
|
padding: 0;
|
|
34
|
+
padding-bottom: 1px;
|
|
25
35
|
margin: 0;
|
|
26
36
|
box-shadow: none;
|
|
27
37
|
outline: none;
|
|
@@ -54,12 +64,24 @@ STabPanelItem {
|
|
|
54
64
|
&:hover {
|
|
55
65
|
color: var(--intergalactic-text-primary, #191b23);
|
|
56
66
|
}
|
|
67
|
+
|
|
68
|
+
&::after {
|
|
69
|
+
content: '';
|
|
70
|
+
position: absolute;
|
|
71
|
+
left: -1px;
|
|
72
|
+
bottom: 0px;
|
|
73
|
+
width: calc(100% + 2px);
|
|
74
|
+
border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
75
|
+
}
|
|
57
76
|
}
|
|
58
77
|
|
|
59
78
|
STabPanelItem[disabled] {
|
|
60
|
-
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
61
79
|
cursor: default;
|
|
62
80
|
pointer-events: none; /* Disable link interactions */
|
|
81
|
+
& SText,
|
|
82
|
+
& SAddon {
|
|
83
|
+
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
84
|
+
}
|
|
63
85
|
}
|
|
64
86
|
|
|
65
87
|
STabPanelItem[keyboardFocused] {
|
|
@@ -69,12 +91,14 @@ STabPanelItem[keyboardFocused] {
|
|
|
69
91
|
STabPanelItem[selected] {
|
|
70
92
|
color: var(--intergalactic-text-link, #006dca);
|
|
71
93
|
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
72
|
-
border-bottom-color: var(--intergalactic-border-primary-invert, #ffffff);
|
|
73
94
|
flex-shrink: 0;
|
|
74
95
|
|
|
75
96
|
&:hover {
|
|
76
97
|
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
77
98
|
}
|
|
99
|
+
&::after {
|
|
100
|
+
border-bottom: none;
|
|
101
|
+
}
|
|
78
102
|
}
|
|
79
103
|
|
|
80
104
|
SText {
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -17,14 +17,14 @@ import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
|
17
17
|
import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
|
|
18
18
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
19
19
|
/*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
|
|
20
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
21
|
-
"__STabPanel": "
|
|
22
|
-
"__STabPanelItem": "
|
|
23
|
-
"__SText": "
|
|
24
|
-
"_disabled": "
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
20
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_o0vpd_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_o0vpd_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_o0vpd_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0 0 1px;margin:0;box-shadow:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_o0vpd_gg_ .___SText_o0vpd_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_o0vpd_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_o0vpd_gg_:active,.___STabPanelItem_o0vpd_gg_:focus{outline:0;text-decoration:none}@media (hover:hover){.___STabPanelItem_o0vpd_gg_:hover{outline:0;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_o0vpd_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_{cursor:default;pointer-events:none}.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_ .___SAddon_o0vpd_gg_,.___STabPanelItem_o0vpd_gg_.__disabled_o0vpd_gg_ .___SText_o0vpd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_o0vpd_gg_.__keyboardFocused_o0vpd_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_o0vpd_gg_.__selected_o0vpd_gg_::after{border-bottom:none}.___SText_o0vpd_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_o0vpd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_o0vpd_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_o0vpd_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_o0vpd_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "o0vpd_gg_") /*__reshadow_css_end__*/, {
|
|
21
|
+
"__STabPanel": "___STabPanel_o0vpd_gg_",
|
|
22
|
+
"__STabPanelItem": "___STabPanelItem_o0vpd_gg_",
|
|
23
|
+
"__SText": "___SText_o0vpd_gg_",
|
|
24
|
+
"_disabled": "__disabled_o0vpd_gg_",
|
|
25
|
+
"__SAddon": "___SAddon_o0vpd_gg_",
|
|
26
|
+
"_keyboardFocused": "__keyboardFocused_o0vpd_gg_",
|
|
27
|
+
"_selected": "__selected_o0vpd_gg_"
|
|
28
28
|
});
|
|
29
29
|
var optionsA11yEnhance = {
|
|
30
30
|
onNeighborChange: function onNeighborChange(neighborElement) {
|
|
@@ -2,7 +2,15 @@ STabPanel {
|
|
|
2
2
|
display: flex;
|
|
3
3
|
width: 100%;
|
|
4
4
|
max-width: 100%;
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
&::after {
|
|
7
|
+
content: '';
|
|
8
|
+
position: relative;
|
|
9
|
+
bottom: -1px;
|
|
10
|
+
flex: 1;
|
|
11
|
+
border-top: 1px solid transparent;
|
|
12
|
+
border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
13
|
+
}
|
|
6
14
|
}
|
|
7
15
|
|
|
8
16
|
STabPanelItem {
|
|
@@ -13,6 +21,7 @@ STabPanelItem {
|
|
|
13
21
|
height: 32px;
|
|
14
22
|
color: var(--intergalactic-text-secondary, #6c6e79);
|
|
15
23
|
border: 1px solid transparent;
|
|
24
|
+
border-bottom: none;
|
|
16
25
|
border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)
|
|
17
26
|
0 0;
|
|
18
27
|
background: transparent;
|
|
@@ -22,6 +31,7 @@ STabPanelItem {
|
|
|
22
31
|
user-select: none;
|
|
23
32
|
box-sizing: border-box;
|
|
24
33
|
padding: 0;
|
|
34
|
+
padding-bottom: 1px;
|
|
25
35
|
margin: 0;
|
|
26
36
|
box-shadow: none;
|
|
27
37
|
outline: none;
|
|
@@ -54,12 +64,24 @@ STabPanelItem {
|
|
|
54
64
|
&:hover {
|
|
55
65
|
color: var(--intergalactic-text-primary, #191b23);
|
|
56
66
|
}
|
|
67
|
+
|
|
68
|
+
&::after {
|
|
69
|
+
content: '';
|
|
70
|
+
position: absolute;
|
|
71
|
+
left: -1px;
|
|
72
|
+
bottom: 0px;
|
|
73
|
+
width: calc(100% + 2px);
|
|
74
|
+
border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
75
|
+
}
|
|
57
76
|
}
|
|
58
77
|
|
|
59
78
|
STabPanelItem[disabled] {
|
|
60
|
-
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
61
79
|
cursor: default;
|
|
62
80
|
pointer-events: none; /* Disable link interactions */
|
|
81
|
+
& SText,
|
|
82
|
+
& SAddon {
|
|
83
|
+
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
84
|
+
}
|
|
63
85
|
}
|
|
64
86
|
|
|
65
87
|
STabPanelItem[keyboardFocused] {
|
|
@@ -69,12 +91,14 @@ STabPanelItem[keyboardFocused] {
|
|
|
69
91
|
STabPanelItem[selected] {
|
|
70
92
|
color: var(--intergalactic-text-link, #006dca);
|
|
71
93
|
border-color: var(--intergalactic-border-primary, #c4c7cf);
|
|
72
|
-
border-bottom-color: var(--intergalactic-border-primary-invert, #ffffff);
|
|
73
94
|
flex-shrink: 0;
|
|
74
95
|
|
|
75
96
|
&:hover {
|
|
76
97
|
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
77
98
|
}
|
|
99
|
+
&::after {
|
|
100
|
+
border-bottom: none;
|
|
101
|
+
}
|
|
78
102
|
}
|
|
79
103
|
|
|
80
104
|
SText {
|