@neovici/cosmoz-bottom-bar 4.3.0 → 4.4.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-bottom-bar.html.js +76 -87
- package/package.json +1 -1
|
@@ -1,91 +1,80 @@
|
|
|
1
1
|
import '@neovici/cosmoz-dropdown';
|
|
2
|
-
|
|
3
2
|
import { html } from '@polymer/polymer/lib/utils/html-tag';
|
|
4
|
-
export default html`
|
|
5
|
-
<style>
|
|
6
|
-
:host {
|
|
7
|
-
display: block;
|
|
8
|
-
position: absolute;
|
|
9
|
-
bottom: 0;
|
|
10
|
-
left: 0;
|
|
11
|
-
width: 100%;
|
|
12
|
-
max-width: 100%; /* Firefox fix */
|
|
13
|
-
background-color: inherit;
|
|
14
|
-
transition: max-height 0.3s ease;
|
|
15
|
-
z-index: 10;
|
|
16
|
-
--cosmoz-dropdown-spacing: 0 0 5px 0;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[hidden] {
|
|
20
|
-
display: none !important;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
#bar {
|
|
25
|
-
padding: 0 3%;
|
|
26
|
-
display: flex;
|
|
27
|
-
align-items: center;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#info {
|
|
31
|
-
min-width: 5px;
|
|
32
|
-
padding-right: 3%;
|
|
33
|
-
margin-right: auto;
|
|
34
|
-
white-space: nowrap;
|
|
35
|
-
}
|
|
36
3
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
4
|
+
export default html`
|
|
5
|
+
<style>
|
|
6
|
+
:host {
|
|
7
|
+
display: block;
|
|
8
|
+
position: absolute;
|
|
9
|
+
bottom: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
width: 100%;
|
|
12
|
+
max-width: 100%; /* Firefox fix */
|
|
13
|
+
background-color: inherit;
|
|
14
|
+
transition: max-height 0.3s ease;
|
|
15
|
+
z-index: 10;
|
|
16
|
+
--cosmoz-dropdown-anchor-spacing: 12px 6px;
|
|
17
|
+
--paper-button: {
|
|
18
|
+
background-color: inherit;
|
|
19
|
+
text-transform: none;
|
|
20
|
+
border: 0;
|
|
21
|
+
border-radius: 0;
|
|
22
|
+
font-size: inherit;
|
|
23
|
+
color: inherit;
|
|
24
|
+
font-weight: inherit;
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
[hidden], ::slotted([hidden]) {
|
|
30
|
+
display: none !important;
|
|
31
|
+
}
|
|
32
|
+
#bar {
|
|
33
|
+
padding: 0 3%;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
}
|
|
37
|
+
#info {
|
|
38
|
+
min-width: 5px;
|
|
39
|
+
padding-right: 3%;
|
|
40
|
+
margin-right: auto;
|
|
41
|
+
white-space: nowrap;
|
|
42
|
+
}
|
|
43
|
+
#bottomBarToolbar::slotted(:not(slot)) {
|
|
44
|
+
margin: 0 0.29em;
|
|
45
|
+
min-width: 40px;
|
|
46
|
+
min-height: 40px;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
background: var(--cosmoz-bottom-bar-button-bg-color, var(--cosmoz-button-bg-color, #101010));
|
|
50
|
+
color: var(--cosmoz-bottom-bar-button-color, var(--cosmoz-button-color, #fff));
|
|
51
|
+
border-radius: 6px;
|
|
52
|
+
padding: 0 18px;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
font-weight: 500;
|
|
55
|
+
line-height: 40px;
|
|
56
|
+
}
|
|
57
|
+
#bottomBarToolbar::slotted(:not(slot):hover) {
|
|
58
|
+
background: var(--cosmoz-bottom-bar-button-hover-bg-color, var(--cosmoz-button-hover-bg-color, #3A3F44));
|
|
59
|
+
}
|
|
60
|
+
#dropdown::part(dropdown) {
|
|
61
|
+
max-width: 300px;
|
|
62
|
+
}
|
|
63
|
+
</style>
|
|
64
|
+
<div id="bar" style$="[[ _getHeightStyle(computedBarHeight) ]]" part="bar">
|
|
65
|
+
<div id="info"><slot name="info"></slot></div>
|
|
66
|
+
<slot id="bottomBarToolbar" name="bottom-bar-toolbar"></slot>
|
|
67
|
+
<cosmoz-dropdown-menu id="dropdown" hidden="[[ !hasMenuItems ]]" placement="[[ topPlacement ]]">
|
|
68
|
+
<svg slot="button" width="4" height="16" viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
69
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 2C1.02714e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 1.99278e-07 0.89543 1.50996e-07 2Z" fill="white"/>
|
|
70
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 8C1.02714e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8C4 6.89543 3.10457 6 2 6C0.895431 6 1.99278e-07 6.89543 1.50996e-07 8Z" fill="white"/>
|
|
71
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50996e-07 14C1.02714e-07 15.1046 0.89543 16 2 16C3.10457 16 4 15.1046 4 14C4 12.8954 3.10457 12 2 12C0.895431 12 1.99278e-07 12.8954 1.50996e-07 14Z" fill="white"/>
|
|
72
|
+
</svg>
|
|
73
|
+
<slot id="bottomBarMenu" name="bottom-bar-menu"></slot>
|
|
74
|
+
</cosmoz-dropdown-menu>
|
|
75
|
+
<slot name="extra" id="extraSlot"></slot>
|
|
76
|
+
</div>
|
|
77
|
+
<div hidden style="display:none">
|
|
78
|
+
<slot id="content"></slot>
|
|
79
|
+
</div>
|
|
91
80
|
`;
|
package/package.json
CHANGED