@odx/icons 1.2.0 → 1.3.1
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 +3 -4
- package/core/demo-poster.html +65 -15
- package/core/font.css +4 -1
- package/core/font.scss +4 -1
- package/medical/demo-poster.html +65 -15
- package/medical/font.css +4 -1
- package/medical/font.eot +0 -0
- package/medical/font.scss +4 -1
- package/package.json +1 -1
- package/safety/demo-poster.html +933 -2563
- package/safety/font.css +6 -1163
- package/safety/font.scss +6 -1163
- package/safety/iconmap.scss +1 -280
- package/safety/metadata.json +93 -1053
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
## [1.3.1](https://dev.azure.com/draeger/ODXP/_git/odx-icons/compare/v1.3.0...v1.3.1) (2023-04-14)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* **icons:** removed core icons from safety set ([3391834](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/3391834e586c6a116bad17ff772f39f38b1965d1))
|
|
6
|
+
* use icon set selector to set the font-family ([f4b745e](https://dev.azure.com/draeger/ODXP/_git/odx-icons/commit/f4b745e335849d645b7f5a6c034bd91862021fb9))
|
|
8
7
|
|
|
9
8
|
# 1.0.0 (2023-04-13)
|
|
10
9
|
|
package/core/demo-poster.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>@odx/icons 1.
|
|
5
|
+
<title>@odx/icons 1.3.1</title>
|
|
6
6
|
<link rel="stylesheet" type="text/css" href="font.css" media="screen" />
|
|
7
7
|
<style>
|
|
8
8
|
* {
|
|
@@ -19,18 +19,30 @@
|
|
|
19
19
|
.page-header {
|
|
20
20
|
display: flex;
|
|
21
21
|
background-color: #ffffff;
|
|
22
|
-
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
23
22
|
font-size: 24px;
|
|
24
23
|
line-height: 48px;
|
|
25
24
|
position: sticky;
|
|
26
25
|
top: 0;
|
|
27
26
|
z-index: 1;
|
|
28
|
-
margin-bottom: 32px;
|
|
29
27
|
padding: 0 32px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.page-logo {
|
|
32
|
+
height: 24px;
|
|
33
|
+
margin-right: 12px;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.page-title {
|
|
33
|
-
font-size:
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.page-search {
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
margin: 0 24px;
|
|
44
|
+
padding: 0 8px;
|
|
45
|
+
line-height: 24px;
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
.icon-count {
|
|
@@ -42,6 +54,7 @@
|
|
|
42
54
|
display: flex;
|
|
43
55
|
flex-wrap: wrap;
|
|
44
56
|
margin: 0 auto;
|
|
57
|
+
padding: 24px;
|
|
45
58
|
justify-content: center;
|
|
46
59
|
}
|
|
47
60
|
|
|
@@ -50,14 +63,18 @@
|
|
|
50
63
|
flex-direction: column;
|
|
51
64
|
justify-content: center;
|
|
52
65
|
align-items: center;
|
|
53
|
-
width:
|
|
66
|
+
min-width: 160px;
|
|
54
67
|
margin: 8px;
|
|
55
68
|
padding: 8px;
|
|
56
69
|
line-height: 18px;
|
|
57
|
-
transition:
|
|
70
|
+
transition: 250ms ease;
|
|
58
71
|
cursor: pointer;
|
|
59
72
|
}
|
|
60
73
|
|
|
74
|
+
.icons__item.is-hidden {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
61
78
|
.odx-icon {
|
|
62
79
|
width: 48px;
|
|
63
80
|
height: 48px;
|
|
@@ -66,7 +83,19 @@
|
|
|
66
83
|
|
|
67
84
|
.icons__item:hover {
|
|
68
85
|
background-color: #ffffff;
|
|
69
|
-
transform: scale(1.
|
|
86
|
+
transform: scale(1.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.icon-name,
|
|
90
|
+
.icon-alias {
|
|
91
|
+
max-width: 160px;
|
|
92
|
+
text-overflow: ellipsis;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon-name {
|
|
98
|
+
font-size: 14px;
|
|
70
99
|
}
|
|
71
100
|
|
|
72
101
|
.icon-alias {
|
|
@@ -82,7 +111,7 @@
|
|
|
82
111
|
width: 100%;
|
|
83
112
|
line-height: 32px;
|
|
84
113
|
text-align:center;
|
|
85
|
-
background-color: #
|
|
114
|
+
background-color: #93ffaa;
|
|
86
115
|
color: #002766;
|
|
87
116
|
z-index: 2;
|
|
88
117
|
}
|
|
@@ -90,11 +119,18 @@
|
|
|
90
119
|
</head>
|
|
91
120
|
<body>
|
|
92
121
|
<header class="page-header">
|
|
122
|
+
<svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
|
|
123
|
+
<path
|
|
124
|
+
fill="#002766"
|
|
125
|
+
d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
|
|
126
|
+
/>
|
|
127
|
+
</svg>
|
|
93
128
|
<h1 class="page-title">
|
|
94
|
-
@odx/icons 1.
|
|
129
|
+
@odx/icons 1.3.1
|
|
95
130
|
</h1>
|
|
131
|
+
<input class="page-search" placeholder="Search icons ..." />
|
|
96
132
|
<div class="icon-count">
|
|
97
|
-
Iconset: core
|
|
133
|
+
Iconset: <strong>core</strong> (294 icons)
|
|
98
134
|
</div>
|
|
99
135
|
</header>
|
|
100
136
|
<main class="icons" id="icons">
|
|
@@ -1788,17 +1824,18 @@
|
|
|
1788
1824
|
</main>
|
|
1789
1825
|
<script>
|
|
1790
1826
|
let currentMessage, timeout;
|
|
1791
|
-
|
|
1827
|
+
|
|
1828
|
+
document.body.addEventListener('click', event => {
|
|
1792
1829
|
const target = event.target.closest('.icons__item');
|
|
1793
1830
|
if(target) {
|
|
1794
|
-
const iconName =
|
|
1795
|
-
navigator.clipboard.writeText(iconName).then(
|
|
1796
|
-
const message = `Copied
|
|
1831
|
+
const iconName = target.querySelector('.icon-name').textContent;
|
|
1832
|
+
navigator.clipboard.writeText(iconName).then(() => {
|
|
1833
|
+
const message = `Copied <strong>${iconName}</strong> to clipboard`;
|
|
1797
1834
|
if(currentMessage) currentMessage.remove();
|
|
1798
1835
|
|
|
1799
1836
|
currentMessage = document.createElement('div');
|
|
1800
1837
|
currentMessage.classList.add('copied-message');
|
|
1801
|
-
currentMessage.
|
|
1838
|
+
currentMessage.innerHTML = message
|
|
1802
1839
|
document.body.appendChild(currentMessage);
|
|
1803
1840
|
clearTimeout(timeout);
|
|
1804
1841
|
timeout = setTimeout(() => {
|
|
@@ -1808,6 +1845,19 @@
|
|
|
1808
1845
|
});
|
|
1809
1846
|
}
|
|
1810
1847
|
});
|
|
1848
|
+
|
|
1849
|
+
const searchInput = document.querySelector('.page-search');
|
|
1850
|
+
const iconElements = document.querySelectorAll('.icons__item');
|
|
1851
|
+
const iconNames = new WeakMap();
|
|
1852
|
+
for(const iconElement of iconElements) {
|
|
1853
|
+
iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
|
|
1854
|
+
}
|
|
1855
|
+
searchInput.addEventListener('keyup', event => {
|
|
1856
|
+
for(const iconElement of iconElements) {
|
|
1857
|
+
const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
|
|
1858
|
+
iconElement.classList.toggle('is-hidden', !isVisible);
|
|
1859
|
+
}
|
|
1860
|
+
})
|
|
1811
1861
|
</script>
|
|
1812
1862
|
</body>
|
|
1813
1863
|
</html>
|
package/core/font.css
CHANGED
|
@@ -13,12 +13,15 @@
|
|
|
13
13
|
transform: translate(0, 0);
|
|
14
14
|
text-rendering: auto;
|
|
15
15
|
vertical-align: middle;
|
|
16
|
-
font: normal normal 400 14px/1 "odx-icon-core";
|
|
17
16
|
font-size: inherit;
|
|
18
17
|
-moz-osx-font-smoothing: grayscale;
|
|
19
18
|
-webkit-font-smoothing: antialiased;
|
|
20
19
|
}
|
|
21
20
|
|
|
21
|
+
.odx-icon[data-icon-set=core] {
|
|
22
|
+
font: normal normal 400 14px/1 "odx-icon-core";
|
|
23
|
+
}
|
|
24
|
+
|
|
22
25
|
.odx-icon span::before {
|
|
23
26
|
z-index: 1;
|
|
24
27
|
}
|
package/core/font.scss
CHANGED
|
@@ -19,12 +19,15 @@
|
|
|
19
19
|
transform: translate(0, 0);
|
|
20
20
|
text-rendering: auto;
|
|
21
21
|
vertical-align: middle;
|
|
22
|
-
font: normal normal 400 14px/1 'odx-icon-core';
|
|
23
22
|
font-size: inherit;
|
|
24
23
|
-moz-osx-font-smoothing: grayscale;
|
|
25
24
|
-webkit-font-smoothing: antialiased;
|
|
26
25
|
}
|
|
27
26
|
|
|
27
|
+
.odx-icon[data-icon-set="core"] {
|
|
28
|
+
font: normal normal 400 14px/1 'odx-icon-core';
|
|
29
|
+
}
|
|
30
|
+
|
|
28
31
|
.odx-icon span::before {
|
|
29
32
|
z-index: 1;
|
|
30
33
|
}
|
package/medical/demo-poster.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
|
-
<title>@odx/icons 1.
|
|
5
|
+
<title>@odx/icons 1.3.1</title>
|
|
6
6
|
<link rel="stylesheet" type="text/css" href="font.css" media="screen" />
|
|
7
7
|
<style>
|
|
8
8
|
* {
|
|
@@ -19,18 +19,30 @@
|
|
|
19
19
|
.page-header {
|
|
20
20
|
display: flex;
|
|
21
21
|
background-color: #ffffff;
|
|
22
|
-
border-bottom: 1px solid rgba(0,0,0,.1);
|
|
23
22
|
font-size: 24px;
|
|
24
23
|
line-height: 48px;
|
|
25
24
|
position: sticky;
|
|
26
25
|
top: 0;
|
|
27
26
|
z-index: 1;
|
|
28
|
-
margin-bottom: 32px;
|
|
29
27
|
padding: 0 32px;
|
|
28
|
+
align-items: center;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.page-logo {
|
|
32
|
+
height: 24px;
|
|
33
|
+
margin-right: 12px;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
.page-title {
|
|
33
|
-
font-size:
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.page-search {
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
margin: 0 24px;
|
|
44
|
+
padding: 0 8px;
|
|
45
|
+
line-height: 24px;
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
.icon-count {
|
|
@@ -42,6 +54,7 @@
|
|
|
42
54
|
display: flex;
|
|
43
55
|
flex-wrap: wrap;
|
|
44
56
|
margin: 0 auto;
|
|
57
|
+
padding: 24px;
|
|
45
58
|
justify-content: center;
|
|
46
59
|
}
|
|
47
60
|
|
|
@@ -50,14 +63,18 @@
|
|
|
50
63
|
flex-direction: column;
|
|
51
64
|
justify-content: center;
|
|
52
65
|
align-items: center;
|
|
53
|
-
width:
|
|
66
|
+
min-width: 160px;
|
|
54
67
|
margin: 8px;
|
|
55
68
|
padding: 8px;
|
|
56
69
|
line-height: 18px;
|
|
57
|
-
transition:
|
|
70
|
+
transition: 250ms ease;
|
|
58
71
|
cursor: pointer;
|
|
59
72
|
}
|
|
60
73
|
|
|
74
|
+
.icons__item.is-hidden {
|
|
75
|
+
display: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
61
78
|
.odx-icon {
|
|
62
79
|
width: 48px;
|
|
63
80
|
height: 48px;
|
|
@@ -66,7 +83,19 @@
|
|
|
66
83
|
|
|
67
84
|
.icons__item:hover {
|
|
68
85
|
background-color: #ffffff;
|
|
69
|
-
transform: scale(1.
|
|
86
|
+
transform: scale(1.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.icon-name,
|
|
90
|
+
.icon-alias {
|
|
91
|
+
max-width: 160px;
|
|
92
|
+
text-overflow: ellipsis;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.icon-name {
|
|
98
|
+
font-size: 14px;
|
|
70
99
|
}
|
|
71
100
|
|
|
72
101
|
.icon-alias {
|
|
@@ -82,7 +111,7 @@
|
|
|
82
111
|
width: 100%;
|
|
83
112
|
line-height: 32px;
|
|
84
113
|
text-align:center;
|
|
85
|
-
background-color: #
|
|
114
|
+
background-color: #93ffaa;
|
|
86
115
|
color: #002766;
|
|
87
116
|
z-index: 2;
|
|
88
117
|
}
|
|
@@ -90,11 +119,18 @@
|
|
|
90
119
|
</head>
|
|
91
120
|
<body>
|
|
92
121
|
<header class="page-header">
|
|
122
|
+
<svg class="page-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
|
|
123
|
+
<path
|
|
124
|
+
fill="#002766"
|
|
125
|
+
d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
|
|
126
|
+
/>
|
|
127
|
+
</svg>
|
|
93
128
|
<h1 class="page-title">
|
|
94
|
-
@odx/icons 1.
|
|
129
|
+
@odx/icons 1.3.1
|
|
95
130
|
</h1>
|
|
131
|
+
<input class="page-search" placeholder="Search icons ..." />
|
|
96
132
|
<div class="icon-count">
|
|
97
|
-
Iconset: medical
|
|
133
|
+
Iconset: <strong>medical</strong> (1 icons)
|
|
98
134
|
</div>
|
|
99
135
|
</header>
|
|
100
136
|
<main class="icons" id="icons">
|
|
@@ -108,17 +144,18 @@
|
|
|
108
144
|
</main>
|
|
109
145
|
<script>
|
|
110
146
|
let currentMessage, timeout;
|
|
111
|
-
|
|
147
|
+
|
|
148
|
+
document.body.addEventListener('click', event => {
|
|
112
149
|
const target = event.target.closest('.icons__item');
|
|
113
150
|
if(target) {
|
|
114
|
-
const iconName =
|
|
115
|
-
navigator.clipboard.writeText(iconName).then(
|
|
116
|
-
const message = `Copied
|
|
151
|
+
const iconName = target.querySelector('.icon-name').textContent;
|
|
152
|
+
navigator.clipboard.writeText(iconName).then(() => {
|
|
153
|
+
const message = `Copied <strong>${iconName}</strong> to clipboard`;
|
|
117
154
|
if(currentMessage) currentMessage.remove();
|
|
118
155
|
|
|
119
156
|
currentMessage = document.createElement('div');
|
|
120
157
|
currentMessage.classList.add('copied-message');
|
|
121
|
-
currentMessage.
|
|
158
|
+
currentMessage.innerHTML = message
|
|
122
159
|
document.body.appendChild(currentMessage);
|
|
123
160
|
clearTimeout(timeout);
|
|
124
161
|
timeout = setTimeout(() => {
|
|
@@ -128,6 +165,19 @@
|
|
|
128
165
|
});
|
|
129
166
|
}
|
|
130
167
|
});
|
|
168
|
+
|
|
169
|
+
const searchInput = document.querySelector('.page-search');
|
|
170
|
+
const iconElements = document.querySelectorAll('.icons__item');
|
|
171
|
+
const iconNames = new WeakMap();
|
|
172
|
+
for(const iconElement of iconElements) {
|
|
173
|
+
iconNames.set(iconElement, iconElement.querySelector('.icon-name').textContent.toLowerCase())
|
|
174
|
+
}
|
|
175
|
+
searchInput.addEventListener('keyup', event => {
|
|
176
|
+
for(const iconElement of iconElements) {
|
|
177
|
+
const isVisible = iconNames.get(iconElement).includes(searchInput.value.toLowerCase());
|
|
178
|
+
iconElement.classList.toggle('is-hidden', !isVisible);
|
|
179
|
+
}
|
|
180
|
+
})
|
|
131
181
|
</script>
|
|
132
182
|
</body>
|
|
133
183
|
</html>
|
package/medical/font.css
CHANGED
|
@@ -13,12 +13,15 @@
|
|
|
13
13
|
transform: translate(0, 0);
|
|
14
14
|
text-rendering: auto;
|
|
15
15
|
vertical-align: middle;
|
|
16
|
-
font: normal normal 400 14px/1 "odx-icon-medical";
|
|
17
16
|
font-size: inherit;
|
|
18
17
|
-moz-osx-font-smoothing: grayscale;
|
|
19
18
|
-webkit-font-smoothing: antialiased;
|
|
20
19
|
}
|
|
21
20
|
|
|
21
|
+
.odx-icon[data-icon-set=medical] {
|
|
22
|
+
font: normal normal 400 14px/1 "odx-icon-medical";
|
|
23
|
+
}
|
|
24
|
+
|
|
22
25
|
.odx-icon span::before {
|
|
23
26
|
z-index: 1;
|
|
24
27
|
}
|
package/medical/font.eot
CHANGED
|
Binary file
|
package/medical/font.scss
CHANGED
|
@@ -19,12 +19,15 @@
|
|
|
19
19
|
transform: translate(0, 0);
|
|
20
20
|
text-rendering: auto;
|
|
21
21
|
vertical-align: middle;
|
|
22
|
-
font: normal normal 400 14px/1 'odx-icon-medical';
|
|
23
22
|
font-size: inherit;
|
|
24
23
|
-moz-osx-font-smoothing: grayscale;
|
|
25
24
|
-webkit-font-smoothing: antialiased;
|
|
26
25
|
}
|
|
27
26
|
|
|
27
|
+
.odx-icon[data-icon-set="medical"] {
|
|
28
|
+
font: normal normal 400 14px/1 'odx-icon-medical';
|
|
29
|
+
}
|
|
30
|
+
|
|
28
31
|
.odx-icon span::before {
|
|
29
32
|
z-index: 1;
|
|
30
33
|
}
|