@neovici/cosmoz-tabs 5.1.2 → 5.2.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/cosmoz-tabs.js +3 -2
- package/lib/render.js +17 -12
- package/package.json +1 -1
package/cosmoz-tabs.js
CHANGED
|
@@ -17,8 +17,8 @@ using tabs.
|
|
|
17
17
|
|
|
18
18
|
The following custom properties and mixins are available for styling:
|
|
19
19
|
|
|
20
|
-
Custom property
|
|
21
|
-
|
|
20
|
+
Custom property | Description | Default
|
|
21
|
+
------------------------------------|-----------------------------|----------
|
|
22
22
|
`--cosmoz-tabs-selection-bar-color` | Color for the selection bar | `#00b4db`
|
|
23
23
|
|
|
24
24
|
*/
|
|
@@ -28,6 +28,7 @@ const Tabs = host => {
|
|
|
28
28
|
return html`
|
|
29
29
|
<style>${ style }</style>
|
|
30
30
|
<div class="tabs" part="tabs" role="tablist">
|
|
31
|
+
<slot name="tabs"></slot>
|
|
31
32
|
${ tabs.map(renderTab(opts)) }
|
|
32
33
|
</div>
|
|
33
34
|
|
package/lib/render.js
CHANGED
|
@@ -12,17 +12,20 @@ const style = `
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.tabs {
|
|
15
|
-
background-color: #fff;
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
background-color: var(--cosmoz-tabs-bg-color, #fff);
|
|
16
|
+
color: var(--cosmoz-tabs-text-color, #606c7e);
|
|
17
|
+
font-family: var(--cosmoz-tabs-font-family, inherit);
|
|
18
|
+
font-size: var(--cosmoz-tabs-font-size, 13px);
|
|
19
|
+
line-height: var(--cosmoz-tabs-line-height, 19px);
|
|
20
|
+
box-shadow: var(--cosmoz-tabs-shadow, inset 0 -1px 0 0 #e5e6eb);
|
|
18
21
|
flex: none;
|
|
19
22
|
display: flex;
|
|
20
23
|
align-items: center;
|
|
21
24
|
overflow-x: auto;
|
|
22
25
|
-webkit-overflow-scrolling: auto;
|
|
23
26
|
scrollbar-width: none;
|
|
27
|
+
padding-bottom: 1px;
|
|
24
28
|
}
|
|
25
|
-
|
|
26
29
|
.tabs::-webkit-scrollbar {
|
|
27
30
|
display: none;
|
|
28
31
|
}
|
|
@@ -30,16 +33,15 @@ const style = `
|
|
|
30
33
|
.tab {
|
|
31
34
|
position: relative;
|
|
32
35
|
display: flex;
|
|
36
|
+
box-sizing: border-box;
|
|
33
37
|
align-items: center;
|
|
34
38
|
justify-content: center;
|
|
35
39
|
flex: 1;
|
|
36
|
-
padding:
|
|
40
|
+
padding: 11px 24px;
|
|
37
41
|
color: inherit;
|
|
38
42
|
text-decoration: none;
|
|
39
43
|
text-align: center;
|
|
40
|
-
|
|
41
|
-
line-height: 1.27;
|
|
42
|
-
font-weight: 300;
|
|
44
|
+
letter-spacing: 0.3px;
|
|
43
45
|
text-overflow: ellipsis;
|
|
44
46
|
white-space: nowrap;
|
|
45
47
|
cursor: pointer;
|
|
@@ -48,12 +50,14 @@ const style = `
|
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
.tab[aria-selected] {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
color: var(--cosmoz-tabs-accent-color, #508aef);
|
|
54
|
+
box-shadow: inset 0 -3px 0px 0px var(--cosmoz-tabs-accent-color, #508aef);
|
|
55
|
+
font-weight: 700;
|
|
56
|
+
letter-spacing: 0;
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
.tab[disabled] {
|
|
56
|
-
opacity: 0.
|
|
60
|
+
opacity: 0.4;
|
|
57
61
|
pointer-events: none;
|
|
58
62
|
}
|
|
59
63
|
|
|
@@ -101,10 +105,11 @@ const style = `
|
|
|
101
105
|
selectedTab,
|
|
102
106
|
onSelect,
|
|
103
107
|
href
|
|
104
|
-
}) => tab => {
|
|
108
|
+
}) => (tab, i, tabs) => {
|
|
105
109
|
const isSelected = selectedTab === tab,
|
|
106
110
|
icon = getIcon(tab, isSelected);
|
|
107
111
|
return html`<a class="tab" tabindex="-1" role="tab"
|
|
112
|
+
part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
|
|
108
113
|
?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
|
|
109
114
|
?aria-selected=${ isSelected }
|
|
110
115
|
@click=${ onSelect }
|