@odx/icons 0.1.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.
@@ -0,0 +1,8 @@
1
+ @use 'sass:map';
2
+ @use 'iconmap';
3
+
4
+ @mixin odx-icon-core($iconName) {
5
+ content: map.'get($map: iconmap.$glyphs, $key: $iconName);
6
+ font-family: 'odx-icon-core';
7
+ vertical-align: middle;
8
+ }
@@ -0,0 +1,133 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>@odx/icons 0.1.0</title>
6
+ <link rel="stylesheet" type="text/css" href="font.css" media="screen" />
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ body {
14
+ background: #f5f7fa;
15
+ color: #002766;
16
+ font-family: "Helvetica Neue", Arial, sans-serif;
17
+ }
18
+
19
+ .page-header {
20
+ display: flex;
21
+ background-color: #ffffff;
22
+ border-bottom: 1px solid rgba(0,0,0,.1);
23
+ font-size: 24px;
24
+ line-height: 48px;
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: 1;
28
+ margin-bottom: 32px;
29
+ padding: 0 32px;
30
+ }
31
+
32
+ .page-title {
33
+ font-size: 24px;
34
+ }
35
+
36
+ .icon-count {
37
+ font-size: 18px;
38
+ margin-left: auto;
39
+ }
40
+
41
+ .icons {
42
+ display: flex;
43
+ flex-wrap: wrap;
44
+ margin: 0 auto;
45
+ justify-content: center;
46
+ }
47
+
48
+ .icons__item {
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ align-items: center;
53
+ width: 250px;
54
+ margin: 8px;
55
+ padding: 8px;
56
+ line-height: 18px;
57
+ transition: 300ms ease;
58
+ cursor: pointer;
59
+ }
60
+
61
+ .odx-icon {
62
+ width: 48px;
63
+ height: 48px;
64
+ font-size: 48px;
65
+ }
66
+
67
+ .icons__item:hover {
68
+ background-color: #ffffff;
69
+ transform: scale(1.25);
70
+ }
71
+
72
+ .icon-alias {
73
+ font-size: 12px;
74
+ height: 18px;
75
+ color: #7f8386;
76
+ }
77
+
78
+ .copied-message {
79
+ position: fixed;
80
+ top: 48px;
81
+ left: 0;
82
+ width: 100%;
83
+ line-height: 32px;
84
+ text-align:center;
85
+ background-color: #00dd31;
86
+ color: #002766;
87
+ z-index: 2;
88
+ }
89
+ </style>
90
+ </head>
91
+ <body>
92
+ <header class="page-header">
93
+ <h1 class="page-title">
94
+ @odx/icons 0.1.0
95
+ </h1>
96
+ <div class="icon-count">
97
+ Iconset: medical - 1 icons
98
+ </div>
99
+ </header>
100
+ <main class="icons" id="icons">
101
+ <div class="icons__item">
102
+ <i class="odx-icon" data-icon-set="medical" data-icon-name="placeholder">
103
+ <span></span>
104
+ </i>
105
+ <span class="icon-name">placeholder</span>
106
+ <span class="icon-alias">
107
+ </div>
108
+ </main>
109
+ <script>
110
+ let currentMessage, timeout;
111
+ document.body.addEventListener('click', function(event) {
112
+ const target = event.target.closest('.icons__item');
113
+ if(target) {
114
+ const iconName = `odx-icon--${target.querySelector('.icon-name').textContent}`;
115
+ navigator.clipboard.writeText(iconName).then(function() {
116
+ const message = `Copied icon "${iconName}" to clipboard`;
117
+ if(currentMessage) currentMessage.remove();
118
+
119
+ currentMessage = document.createElement('div');
120
+ currentMessage.classList.add('copied-message');
121
+ currentMessage.textContent = message
122
+ document.body.appendChild(currentMessage);
123
+ clearTimeout(timeout);
124
+ timeout = setTimeout(() => {
125
+ currentMessage.remove();
126
+ currentMessage = null;
127
+ }, 3000);
128
+ });
129
+ }
130
+ });
131
+ </script>
132
+ </body>
133
+ </html>
@@ -0,0 +1,44 @@
1
+ @font-face {
2
+ font-family: odx-icon-medical;
3
+ src: url("font.eot");
4
+ src: url("font.eot?#iefix") format("embedded-opentype"), url("font.woff") format("woff"), url("font.ttf") format("truetype"), url("font.svg#uib-iconfont") format("svg");
5
+ font-style: normal;
6
+ font-weight: 400;
7
+ }
8
+ .odx-icon {
9
+ display: inline-block;
10
+ position: relative;
11
+ height: 1em;
12
+ width: 1em;
13
+ transform: translate(0, 0);
14
+ text-rendering: auto;
15
+ vertical-align: middle;
16
+ font: normal normal 400 14px/1 "odx-icon-medical";
17
+ font-size: inherit;
18
+ -moz-osx-font-smoothing: grayscale;
19
+ -webkit-font-smoothing: antialiased;
20
+ }
21
+
22
+ .odx-icon span::before {
23
+ z-index: 1;
24
+ }
25
+
26
+ .odx-icon span::after {
27
+ z-index: 2;
28
+ }
29
+
30
+ .odx-icon::before,
31
+ .odx-icon::after,
32
+ .odx-icon span::before,
33
+ .odx-icon span::after {
34
+ display: block;
35
+ position: absolute;
36
+ white-space: normal;
37
+ /* undo text hidden */
38
+ text-indent: 0;
39
+ speak: none;
40
+ }
41
+
42
+ [data-icon-name=placeholder]::before {
43
+ content: "\f101";
44
+ }
Binary file
@@ -0,0 +1,51 @@
1
+ @import "iconmap";
2
+
3
+ @font-face {
4
+ font-family: odx-icon-medical;
5
+ src: url('font.eot');
6
+ src: url('font.eot?#iefix') format('embedded-opentype'),
7
+ url('font.woff') format('woff'),
8
+ url('font.ttf') format('truetype'),
9
+ url('font.svg#uib-iconfont') format('svg');
10
+ font-style: normal;
11
+ font-weight: 400;
12
+ }
13
+
14
+ .odx-icon {
15
+ display: inline-block;
16
+ position: relative;
17
+ height: 1em;
18
+ width: 1em;
19
+ transform: translate(0, 0);
20
+ text-rendering: auto;
21
+ vertical-align: middle;
22
+ font: normal normal 400 14px/1 'odx-icon-medical';
23
+ font-size: inherit;
24
+ -moz-osx-font-smoothing: grayscale;
25
+ -webkit-font-smoothing: antialiased;
26
+ }
27
+
28
+ .odx-icon span::before {
29
+ z-index: 1;
30
+ }
31
+
32
+ .odx-icon span::after {
33
+ z-index: 2;
34
+ }
35
+
36
+ .odx-icon::before,
37
+ .odx-icon::after,
38
+ .odx-icon span::before,
39
+ .odx-icon span::after {
40
+ display: block;
41
+ position: absolute;
42
+ white-space: normal;
43
+ /* undo text hidden */
44
+ text-indent: 0;
45
+ speak: none;
46
+ }
47
+
48
+ [data-icon-name="placeholder"]::before {
49
+ content: map-get($glyphs, "placeholder");
50
+ }
51
+
@@ -0,0 +1,15 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <defs>
5
+ <font id="font" horiz-adv-x="300">
6
+ <font-face font-family="font"
7
+ units-per-em="300" ascent="300"
8
+ descent="0" />
9
+ <missing-glyph horiz-adv-x="0" />
10
+ <glyph glyph-name="placeholder"
11
+ unicode="&#xF101;"
12
+ horiz-adv-x="300" d="M237.5 262.5H62.5C48.75 262.5 37.5 251.25 37.5 237.5V62.5C37.5 48.75 48.75 37.5 62.5 37.5H237.5C251.2500000000001 37.5 262.5 48.75 262.5 62.5V237.5C262.5 251.25 251.2500000000001 262.5 237.5 262.5zM133.25 149L62.5 78.25V219.875L133.25 149.125zM80.125 237.5H221.625L150.875 166.75L80.125 237.5zM150.875 131.375L219.75 62.5H82.125L151 131.375zM168.5 149L237.3750000000001 217.875V80.125S168.5 149 168.5 149z" />
13
+ </font>
14
+ </defs>
15
+ </svg>
Binary file
Binary file
Binary file
@@ -0,0 +1,3 @@
1
+ $glyphs: (
2
+ placeholder: "\f101"
3
+ );
@@ -0,0 +1,6 @@
1
+ [
2
+ {
3
+ "name": "placeholder",
4
+ "set": "medical"
5
+ }
6
+ ]
@@ -0,0 +1,8 @@
1
+ @use 'sass:map';
2
+ @use 'iconmap';
3
+
4
+ @mixin odx-icon-medical($iconName) {
5
+ content: map.'get($map: iconmap.$glyphs, $key: $iconName);
6
+ font-family: 'odx-icon-medical';
7
+ vertical-align: middle;
8
+ }
package/package.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "@odx/icons",
3
+ "version": "0.1.0",
4
+ "author": "Drägerwerk AG & Co. KGaA",
5
+ "license": "SEE LICENSE IN LICENSE",
6
+ "publishConfig": {
7
+ "access": "public"
8
+ },
9
+ "files": [
10
+ "core",
11
+ "safety",
12
+ "medical"
13
+ ]
14
+ }
@@ -0,0 +1,133 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>@odx/icons 0.1.0</title>
6
+ <link rel="stylesheet" type="text/css" href="font.css" media="screen" />
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+
13
+ body {
14
+ background: #f5f7fa;
15
+ color: #002766;
16
+ font-family: "Helvetica Neue", Arial, sans-serif;
17
+ }
18
+
19
+ .page-header {
20
+ display: flex;
21
+ background-color: #ffffff;
22
+ border-bottom: 1px solid rgba(0,0,0,.1);
23
+ font-size: 24px;
24
+ line-height: 48px;
25
+ position: sticky;
26
+ top: 0;
27
+ z-index: 1;
28
+ margin-bottom: 32px;
29
+ padding: 0 32px;
30
+ }
31
+
32
+ .page-title {
33
+ font-size: 24px;
34
+ }
35
+
36
+ .icon-count {
37
+ font-size: 18px;
38
+ margin-left: auto;
39
+ }
40
+
41
+ .icons {
42
+ display: flex;
43
+ flex-wrap: wrap;
44
+ margin: 0 auto;
45
+ justify-content: center;
46
+ }
47
+
48
+ .icons__item {
49
+ display: flex;
50
+ flex-direction: column;
51
+ justify-content: center;
52
+ align-items: center;
53
+ width: 250px;
54
+ margin: 8px;
55
+ padding: 8px;
56
+ line-height: 18px;
57
+ transition: 300ms ease;
58
+ cursor: pointer;
59
+ }
60
+
61
+ .odx-icon {
62
+ width: 48px;
63
+ height: 48px;
64
+ font-size: 48px;
65
+ }
66
+
67
+ .icons__item:hover {
68
+ background-color: #ffffff;
69
+ transform: scale(1.25);
70
+ }
71
+
72
+ .icon-alias {
73
+ font-size: 12px;
74
+ height: 18px;
75
+ color: #7f8386;
76
+ }
77
+
78
+ .copied-message {
79
+ position: fixed;
80
+ top: 48px;
81
+ left: 0;
82
+ width: 100%;
83
+ line-height: 32px;
84
+ text-align:center;
85
+ background-color: #00dd31;
86
+ color: #002766;
87
+ z-index: 2;
88
+ }
89
+ </style>
90
+ </head>
91
+ <body>
92
+ <header class="page-header">
93
+ <h1 class="page-title">
94
+ @odx/icons 0.1.0
95
+ </h1>
96
+ <div class="icon-count">
97
+ Iconset: safety - 1 icons
98
+ </div>
99
+ </header>
100
+ <main class="icons" id="icons">
101
+ <div class="icons__item">
102
+ <i class="odx-icon" data-icon-set="safety" data-icon-name="placeholder">
103
+ <span></span>
104
+ </i>
105
+ <span class="icon-name">placeholder</span>
106
+ <span class="icon-alias">
107
+ </div>
108
+ </main>
109
+ <script>
110
+ let currentMessage, timeout;
111
+ document.body.addEventListener('click', function(event) {
112
+ const target = event.target.closest('.icons__item');
113
+ if(target) {
114
+ const iconName = `odx-icon--${target.querySelector('.icon-name').textContent}`;
115
+ navigator.clipboard.writeText(iconName).then(function() {
116
+ const message = `Copied icon "${iconName}" to clipboard`;
117
+ if(currentMessage) currentMessage.remove();
118
+
119
+ currentMessage = document.createElement('div');
120
+ currentMessage.classList.add('copied-message');
121
+ currentMessage.textContent = message
122
+ document.body.appendChild(currentMessage);
123
+ clearTimeout(timeout);
124
+ timeout = setTimeout(() => {
125
+ currentMessage.remove();
126
+ currentMessage = null;
127
+ }, 3000);
128
+ });
129
+ }
130
+ });
131
+ </script>
132
+ </body>
133
+ </html>
@@ -0,0 +1,44 @@
1
+ @font-face {
2
+ font-family: odx-icon-safety;
3
+ src: url("font.eot");
4
+ src: url("font.eot?#iefix") format("embedded-opentype"), url("font.woff") format("woff"), url("font.ttf") format("truetype"), url("font.svg#uib-iconfont") format("svg");
5
+ font-style: normal;
6
+ font-weight: 400;
7
+ }
8
+ .odx-icon {
9
+ display: inline-block;
10
+ position: relative;
11
+ height: 1em;
12
+ width: 1em;
13
+ transform: translate(0, 0);
14
+ text-rendering: auto;
15
+ vertical-align: middle;
16
+ font: normal normal 400 14px/1 "odx-icon-safety";
17
+ font-size: inherit;
18
+ -moz-osx-font-smoothing: grayscale;
19
+ -webkit-font-smoothing: antialiased;
20
+ }
21
+
22
+ .odx-icon span::before {
23
+ z-index: 1;
24
+ }
25
+
26
+ .odx-icon span::after {
27
+ z-index: 2;
28
+ }
29
+
30
+ .odx-icon::before,
31
+ .odx-icon::after,
32
+ .odx-icon span::before,
33
+ .odx-icon span::after {
34
+ display: block;
35
+ position: absolute;
36
+ white-space: normal;
37
+ /* undo text hidden */
38
+ text-indent: 0;
39
+ speak: none;
40
+ }
41
+
42
+ [data-icon-name=placeholder]::before {
43
+ content: "\f101";
44
+ }
Binary file
@@ -0,0 +1,51 @@
1
+ @import "iconmap";
2
+
3
+ @font-face {
4
+ font-family: odx-icon-safety;
5
+ src: url('font.eot');
6
+ src: url('font.eot?#iefix') format('embedded-opentype'),
7
+ url('font.woff') format('woff'),
8
+ url('font.ttf') format('truetype'),
9
+ url('font.svg#uib-iconfont') format('svg');
10
+ font-style: normal;
11
+ font-weight: 400;
12
+ }
13
+
14
+ .odx-icon {
15
+ display: inline-block;
16
+ position: relative;
17
+ height: 1em;
18
+ width: 1em;
19
+ transform: translate(0, 0);
20
+ text-rendering: auto;
21
+ vertical-align: middle;
22
+ font: normal normal 400 14px/1 'odx-icon-safety';
23
+ font-size: inherit;
24
+ -moz-osx-font-smoothing: grayscale;
25
+ -webkit-font-smoothing: antialiased;
26
+ }
27
+
28
+ .odx-icon span::before {
29
+ z-index: 1;
30
+ }
31
+
32
+ .odx-icon span::after {
33
+ z-index: 2;
34
+ }
35
+
36
+ .odx-icon::before,
37
+ .odx-icon::after,
38
+ .odx-icon span::before,
39
+ .odx-icon span::after {
40
+ display: block;
41
+ position: absolute;
42
+ white-space: normal;
43
+ /* undo text hidden */
44
+ text-indent: 0;
45
+ speak: none;
46
+ }
47
+
48
+ [data-icon-name="placeholder"]::before {
49
+ content: map-get($glyphs, "placeholder");
50
+ }
51
+
@@ -0,0 +1,15 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <defs>
5
+ <font id="font" horiz-adv-x="300">
6
+ <font-face font-family="font"
7
+ units-per-em="300" ascent="300"
8
+ descent="0" />
9
+ <missing-glyph horiz-adv-x="0" />
10
+ <glyph glyph-name="placeholder"
11
+ unicode="&#xF101;"
12
+ horiz-adv-x="300" d="M237.5 262.5H62.5C48.75 262.5 37.5 251.25 37.5 237.5V62.5C37.5 48.75 48.75 37.5 62.5 37.5H237.5C251.2500000000001 37.5 262.5 48.75 262.5 62.5V237.5C262.5 251.25 251.2500000000001 262.5 237.5 262.5zM133.25 149L62.5 78.25V219.875L133.25 149.125zM80.125 237.5H221.625L150.875 166.75L80.125 237.5zM150.875 131.375L219.75 62.5H82.125L151 131.375zM168.5 149L237.3750000000001 217.875V80.125S168.5 149 168.5 149z" />
13
+ </font>
14
+ </defs>
15
+ </svg>
Binary file
Binary file
Binary file
@@ -0,0 +1,3 @@
1
+ $glyphs: (
2
+ placeholder: "\f101"
3
+ );
@@ -0,0 +1,6 @@
1
+ [
2
+ {
3
+ "name": "placeholder",
4
+ "set": "safety"
5
+ }
6
+ ]
@@ -0,0 +1,8 @@
1
+ @use 'sass:map';
2
+ @use 'iconmap';
3
+
4
+ @mixin odx-icon-safety($iconName) {
5
+ content: map.'get($map: iconmap.$glyphs, $key: $iconName);
6
+ font-family: 'odx-icon-safety';
7
+ vertical-align: middle;
8
+ }