UNPKG

@swimlane/ngx-datatable/assets/icons-reference.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Font Reference - Data Table</title>
  <link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="icons.css" />
  <style type="text/css">
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-weight: inherit;
      font-style: inherit;
      font-family: inherit;
      font-size: 100%;
      vertical-align: baseline;
    }
    body {
      line-height: 1;
      color: #000;
      background: #fff;
    }
    ol,
    ul {
      list-style: none;
    }
    table {
      border-collapse: separate;
      border-spacing: 0;
      vertical-align: middle;
    }
    caption,
    th,
    td {
      text-align: left;
      font-weight: normal;
      vertical-align: middle;
    }
    a img {
      border: none;
    }
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    body {
      font-family: 'Dosis', 'Tahoma', sans-serif;
    }
    .container {
      margin: 15px auto;
      width: 80%;
    }
    h1 {
      margin: 40px 0 20px;
      font-weight: 700;
      font-size: 38px;
      line-height: 32px;
      color: #fb565e;
    }
    h2 {
      font-size: 18px;
      padding: 0 0 21px 5px;
      margin: 45px 0 0 0;
      text-transform: uppercase;
      font-weight: 500;
    }
    .small {
      font-size: 14px;
      color: #a5adb4;
    }
    .small a {
      color: #a5adb4;
    }
    .small a:hover {
      color: #fb565e;
    }
    .glyphs.character-mapping {
      margin: 0 0 20px 0;
      padding: 20px 0 20px 30px;
      color: rgba(0, 0, 0, 0.5);
      border: 1px solid #d8e0e5;
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .glyphs.character-mapping li {
      margin: 0 30px 20px 0;
      display: inline-block;
      width: 90px;
    }
    .glyphs.character-mapping .icon {
      margin: 10px 0 10px 15px;
      padding: 15px;
      position: relative;
      width: 55px;
      height: 55px;
      color: #162a36 !important;
      overflow: hidden;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      font-size: 32px;
    }
    .glyphs.character-mapping .icon svg {
      fill: #000;
    }
    .glyphs.character-mapping input {
      margin: 0;
      padding: 5px 0;
      line-height: 12px;
      font-size: 12px;
      display: block;
      width: 100%;
      border: 1px solid #d8e0e5;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      text-align: center;
      outline: 0;
    }
    .glyphs.character-mapping input:focus {
      border: 1px solid #fbde4a;
      -webkit-box-shadow: inset 0 0 3px #fbde4a;
      box-shadow: inset 0 0 3px #fbde4a;
    }
    .glyphs.character-mapping input:hover {
      -webkit-box-shadow: inset 0 0 3px #fbde4a;
      box-shadow: inset 0 0 3px #fbde4a;
    }
    .glyphs.css-mapping {
      margin: 0 0 60px 0;
      padding: 30px 0 20px 30px;
      color: rgba(0, 0, 0, 0.5);
      border: 1px solid #d8e0e5;
      -webkit-border-radius: 3px;
      border-radius: 3px;
    }
    .glyphs.css-mapping li {
      margin: 0 30px 20px 0;
      padding: 0;
      display: inline-block;
      overflow: hidden;
    }
    .glyphs.css-mapping .icon {
      margin: 0;
      margin-right: 10px;
      padding: 13px;
      height: 50px;
      width: 50px;
      color: #162a36 !important;
      overflow: hidden;
      float: left;
      font-size: 24px;
    }
    .glyphs.css-mapping input {
      margin: 0;
      margin-top: 5px;
      padding: 8px;
      line-height: 16px;
      font-size: 16px;
      display: block;
      width: 150px;
      height: 40px;
      border: 1px solid #d8e0e5;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      background: #fff;
      outline: 0;
      float: right;
    }
    .glyphs.css-mapping input:focus {
      border: 1px solid #fbde4a;
      -webkit-box-shadow: inset 0 0 3px #fbde4a;
      box-shadow: inset 0 0 3px #fbde4a;
    }
    .glyphs.css-mapping input:hover {
      -webkit-box-shadow: inset 0 0 3px #fbde4a;
      box-shadow: inset 0 0 3px #fbde4a;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Data Table</h1>
    <p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>
    <h2>CSS mapping</h2>
    <ul class="glyphs css-mapping">
      <li>
        <div class="icon datatable-icon-filter"></div>
        <input type="text" readonly="readonly" value="filter" />
      </li>
      <li>
        <div class="icon datatable-icon-collapse"></div>
        <input type="text" readonly="readonly" value="collapse" />
      </li>
      <li>
        <div class="icon datatable-icon-expand"></div>
        <input type="text" readonly="readonly" value="expand" />
      </li>
      <li>
        <div class="icon datatable-icon-close"></div>
        <input type="text" readonly="readonly" value="close" />
      </li>
      <li>
        <div class="icon datatable-icon-up"></div>
        <input type="text" readonly="readonly" value="up" />
      </li>
      <li>
        <div class="icon datatable-icon-down"></div>
        <input type="text" readonly="readonly" value="down" />
      </li>
      <li>
        <div class="icon datatable-icon-sort"></div>
        <input type="text" readonly="readonly" value="sort" />
      </li>
      <li>
        <div class="icon datatable-icon-done"></div>
        <input type="text" readonly="readonly" value="done" />
      </li>
      <li>
        <div class="icon datatable-icon-done-all"></div>
        <input type="text" readonly="readonly" value="done-all" />
      </li>
      <li>
        <div class="icon datatable-icon-search"></div>
        <input type="text" readonly="readonly" value="search" />
      </li>
      <li>
        <div class="icon datatable-icon-pin"></div>
        <input type="text" readonly="readonly" value="pin" />
      </li>
      <li>
        <div class="icon datatable-icon-add"></div>
        <input type="text" readonly="readonly" value="add" />
      </li>
      <li>
        <div class="icon datatable-icon-left"></div>
        <input type="text" readonly="readonly" value="left" />
      </li>
      <li>
        <div class="icon datatable-icon-right"></div>
        <input type="text" readonly="readonly" value="right" />
      </li>
      <li>
        <div class="icon datatable-icon-skip"></div>
        <input type="text" readonly="readonly" value="skip" />
      </li>
      <li>
        <div class="icon datatable-icon-prev"></div>
        <input type="text" readonly="readonly" value="prev" />
      </li>
    </ul>
    <h2>Character mapping</h2>
    <ul class="glyphs character-mapping">
      <li>
        <div data-icon="b" class="icon"></div>
        <input type="text" readonly="readonly" value="b" />
      </li>
      <li>
        <div data-icon="a" class="icon"></div>
        <input type="text" readonly="readonly" value="a" />
      </li>
      <li>
        <div data-icon="c" class="icon"></div>
        <input type="text" readonly="readonly" value="c" />
      </li>
      <li>
        <div data-icon="d" class="icon"></div>
        <input type="text" readonly="readonly" value="d" />
      </li>
      <li>
        <div data-icon="e" class="icon"></div>
        <input type="text" readonly="readonly" value="e" />
      </li>
      <li>
        <div data-icon="f" class="icon"></div>
        <input type="text" readonly="readonly" value="f" />
      </li>
      <li>
        <div data-icon="g" class="icon"></div>
        <input type="text" readonly="readonly" value="g" />
      </li>
      <li>
        <div data-icon="h" class="icon"></div>
        <input type="text" readonly="readonly" value="h" />
      </li>
      <li>
        <div data-icon="i" class="icon"></div>
        <input type="text" readonly="readonly" value="i" />
      </li>
      <li>
        <div data-icon="j" class="icon"></div>
        <input type="text" readonly="readonly" value="j" />
      </li>
      <li>
        <div data-icon="k" class="icon"></div>
        <input type="text" readonly="readonly" value="k" />
      </li>
      <li>
        <div data-icon="m" class="icon"></div>
        <input type="text" readonly="readonly" value="m" />
      </li>
      <li>
        <div data-icon="o" class="icon"></div>
        <input type="text" readonly="readonly" value="o" />
      </li>
      <li>
        <div data-icon="p" class="icon"></div>
        <input type="text" readonly="readonly" value="p" />
      </li>
      <li>
        <div data-icon="q" class="icon"></div>
        <input type="text" readonly="readonly" value="q" />
      </li>
      <li>
        <div data-icon="r" class="icon"></div>
        <input type="text" readonly="readonly" value="r" />
      </li>
    </ul>
  </div>
  <script>
    (function () {
      var glyphs, i, len, ref;
382
      ref = document.getElementsByClassName('glyphs');
      for (i = 0, len = ref.length; i < len; i++) {
        glyphs = ref[i];
        glyphs.addEventListener('click', function (event) {
          if (event.target.tagName === 'INPUT') {
            return event.target.select();
          }
        });
      }
    }.call(this));
  </script>
</body>
395</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8" />`
5	`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />`
6	`<meta name="viewport" content="width=device-width,initial-scale=1" />`
7	`<title>Font Reference - Data Table</title>`
8	`<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css" />`
9	`<link rel="stylesheet" href="icons.css" />`
10	`<style type="text/css">`
11	`html,`
12	`body,`
13	`div,`
14	`span,`
15	`applet,`
16	`object,`
17	`iframe,`
18	`h1,`
19	`h2,`
20	`h3,`
21	`h4,`
22	`h5,`
23	`h6,`
24	`p,`
25	`blockquote,`
26	`pre,`
27	`a,`
28	`abbr,`
29	`acronym,`
30	`address,`
31	`big,`
32	`cite,`
33	`code,`
34	`del,`
35	`dfn,`
36	`em,`
37	`img,`
38	`ins,`
39	`kbd,`
40	`q,`
41	`s,`
42	`samp,`
43	`small,`
44	`strike,`
45	`strong,`
46	`sub,`
47	`sup,`
48	`tt,`
49	`var,`
50	`dl,`
51	`dt,`
52	`dd,`
53	`ol,`
54	`ul,`
55	`li,`
56	`fieldset,`
57	`form,`
58	`label,`
59	`legend,`
60	`table,`
61	`caption,`
62	`tbody,`
63	`tfoot,`
64	`thead,`
65	`tr,`
66	`th,`
67	`td {`
68	`margin: 0;`
69	`padding: 0;`
70	`border: 0;`
71	`outline: 0;`
72	`font-weight: inherit;`
73	`font-style: inherit;`
74	`font-family: inherit;`
75	`font-size: 100%;`
76	`vertical-align: baseline;`
77	`}`
78	`body {`
79	`line-height: 1;`
80	`color: #000;`
81	`background: #fff;`
82	`}`
83	`ol,`
84	`ul {`
85	`list-style: none;`
86	`}`
87	`table {`
88	`border-collapse: separate;`
89	`border-spacing: 0;`
90	`vertical-align: middle;`
91	`}`
92	`caption,`
93	`th,`
94	`td {`
95	`text-align: left;`
96	`font-weight: normal;`
97	`vertical-align: middle;`
98	`}`
99	`a img {`
100	`border: none;`
101	`}`
102	`* {`
103	`-webkit-box-sizing: border-box;`
104	`-moz-box-sizing: border-box;`
105	`box-sizing: border-box;`
106	`}`
107	`body {`
108	`font-family: 'Dosis', 'Tahoma', sans-serif;`
109	`}`
110	`.container {`
111	`margin: 15px auto;`
112	`width: 80%;`
113	`}`
114	`h1 {`
115	`margin: 40px 0 20px;`
116	`font-weight: 700;`
117	`font-size: 38px;`
118	`line-height: 32px;`
119	`color: #fb565e;`
120	`}`
121	`h2 {`
122	`font-size: 18px;`
123	`padding: 0 0 21px 5px;`
124	`margin: 45px 0 0 0;`
125	`text-transform: uppercase;`
126	`font-weight: 500;`
127	`}`
128	`.small {`
129	`font-size: 14px;`
130	`color: #a5adb4;`
131	`}`
132	`.small a {`
133	`color: #a5adb4;`
134	`}`
135	`.small a:hover {`
136	`color: #fb565e;`
137	`}`
138	`.glyphs.character-mapping {`
139	`margin: 0 0 20px 0;`
140	`padding: 20px 0 20px 30px;`
141	`color: rgba(0, 0, 0, 0.5);`
142	`border: 1px solid #d8e0e5;`
143	`-webkit-border-radius: 3px;`
144	`border-radius: 3px;`
145	`}`
146	`.glyphs.character-mapping li {`
147	`margin: 0 30px 20px 0;`
148	`display: inline-block;`
149	`width: 90px;`
150	`}`
151	`.glyphs.character-mapping .icon {`
152	`margin: 10px 0 10px 15px;`
153	`padding: 15px;`
154	`position: relative;`
155	`width: 55px;`
156	`height: 55px;`
157	`color: #162a36 !important;`
158	`overflow: hidden;`
159	`-webkit-border-radius: 3px;`
160	`border-radius: 3px;`
161	`font-size: 32px;`
162	`}`
163	`.glyphs.character-mapping .icon svg {`
164	`fill: #000;`
165	`}`
166	`.glyphs.character-mapping input {`
167	`margin: 0;`
168	`padding: 5px 0;`
169	`line-height: 12px;`
170	`font-size: 12px;`
171	`display: block;`
172	`width: 100%;`
173	`border: 1px solid #d8e0e5;`
174	`-webkit-border-radius: 5px;`
175	`border-radius: 5px;`
176	`text-align: center;`
177	`outline: 0;`
178	`}`
179	`.glyphs.character-mapping input:focus {`
180	`border: 1px solid #fbde4a;`
181	`-webkit-box-shadow: inset 0 0 3px #fbde4a;`
182	`box-shadow: inset 0 0 3px #fbde4a;`
183	`}`
184	`.glyphs.character-mapping input:hover {`
185	`-webkit-box-shadow: inset 0 0 3px #fbde4a;`
186	`box-shadow: inset 0 0 3px #fbde4a;`
187	`}`
188	`.glyphs.css-mapping {`
189	`margin: 0 0 60px 0;`
190	`padding: 30px 0 20px 30px;`
191	`color: rgba(0, 0, 0, 0.5);`
192	`border: 1px solid #d8e0e5;`
193	`-webkit-border-radius: 3px;`
194	`border-radius: 3px;`
195	`}`
196	`.glyphs.css-mapping li {`
197	`margin: 0 30px 20px 0;`
198	`padding: 0;`
199	`display: inline-block;`
200	`overflow: hidden;`
201	`}`
202	`.glyphs.css-mapping .icon {`
203	`margin: 0;`
204	`margin-right: 10px;`
205	`padding: 13px;`
206	`height: 50px;`
207	`width: 50px;`
208	`color: #162a36 !important;`
209	`overflow: hidden;`
210	`float: left;`
211	`font-size: 24px;`
212	`}`
213	`.glyphs.css-mapping input {`
214	`margin: 0;`
215	`margin-top: 5px;`
216	`padding: 8px;`
217	`line-height: 16px;`
218	`font-size: 16px;`
219	`display: block;`
220	`width: 150px;`
221	`height: 40px;`
222	`border: 1px solid #d8e0e5;`
223	`-webkit-border-radius: 5px;`
224	`border-radius: 5px;`
225	`background: #fff;`
226	`outline: 0;`
227	`float: right;`
228	`}`
229	`.glyphs.css-mapping input:focus {`
230	`border: 1px solid #fbde4a;`
231	`-webkit-box-shadow: inset 0 0 3px #fbde4a;`
232	`box-shadow: inset 0 0 3px #fbde4a;`
233	`}`
234	`.glyphs.css-mapping input:hover {`
235	`-webkit-box-shadow: inset 0 0 3px #fbde4a;`
236	`box-shadow: inset 0 0 3px #fbde4a;`
237	`}`
238	`</style>`
239	`</head>`
240	`<body>`
241	`<div class="container">`
242	`<h1>Data Table</h1>`
243	`<p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p>`
244	`<h2>CSS mapping</h2>`
245	`<ul class="glyphs css-mapping">`
246	`<li>`
247	`<div class="icon datatable-icon-filter"></div>`
248	`<input type="text" readonly="readonly" value="filter" />`
249	`</li>`
250	`<li>`
251	`<div class="icon datatable-icon-collapse"></div>`
252	`<input type="text" readonly="readonly" value="collapse" />`
253	`</li>`
254	`<li>`
255	`<div class="icon datatable-icon-expand"></div>`
256	`<input type="text" readonly="readonly" value="expand" />`
257	`</li>`
258	`<li>`
259	`<div class="icon datatable-icon-close"></div>`
260	`<input type="text" readonly="readonly" value="close" />`
261	`</li>`
262	`<li>`
263	`<div class="icon datatable-icon-up"></div>`
264	`<input type="text" readonly="readonly" value="up" />`
265	`</li>`
266	`<li>`
267	`<div class="icon datatable-icon-down"></div>`
268	`<input type="text" readonly="readonly" value="down" />`
269	`</li>`
270	`<li>`
271	`<div class="icon datatable-icon-sort"></div>`
272	`<input type="text" readonly="readonly" value="sort" />`
273	`</li>`
274	`<li>`
275	`<div class="icon datatable-icon-done"></div>`
276	`<input type="text" readonly="readonly" value="done" />`
277	`</li>`
278	`<li>`
279	`<div class="icon datatable-icon-done-all"></div>`
280	`<input type="text" readonly="readonly" value="done-all" />`
281	`</li>`
282	`<li>`
283	`<div class="icon datatable-icon-search"></div>`
284	`<input type="text" readonly="readonly" value="search" />`
285	`</li>`
286	`<li>`
287	`<div class="icon datatable-icon-pin"></div>`
288	`<input type="text" readonly="readonly" value="pin" />`
289	`</li>`
290	`<li>`
291	`<div class="icon datatable-icon-add"></div>`
292	`<input type="text" readonly="readonly" value="add" />`
293	`</li>`
294	`<li>`
295	`<div class="icon datatable-icon-left"></div>`
296	`<input type="text" readonly="readonly" value="left" />`
297	`</li>`
298	`<li>`
299	`<div class="icon datatable-icon-right"></div>`
300	`<input type="text" readonly="readonly" value="right" />`
301	`</li>`
302	`<li>`
303	`<div class="icon datatable-icon-skip"></div>`
304	`<input type="text" readonly="readonly" value="skip" />`
305	`</li>`
306	`<li>`
307	`<div class="icon datatable-icon-prev"></div>`
308	`<input type="text" readonly="readonly" value="prev" />`
309	`</li>`
310	`</ul>`
311	`<h2>Character mapping</h2>`
312	`<ul class="glyphs character-mapping">`
313	`<li>`
314	`<div data-icon="b" class="icon"></div>`
315	`<input type="text" readonly="readonly" value="b" />`
316	`</li>`
317	`<li>`
318	`<div data-icon="a" class="icon"></div>`
319	`<input type="text" readonly="readonly" value="a" />`
320	`</li>`
321	`<li>`
322	`<div data-icon="c" class="icon"></div>`
323	`<input type="text" readonly="readonly" value="c" />`
324	`</li>`
325	`<li>`
326	`<div data-icon="d" class="icon"></div>`
327	`<input type="text" readonly="readonly" value="d" />`
328	`</li>`
329	`<li>`
330	`<div data-icon="e" class="icon"></div>`
331	`<input type="text" readonly="readonly" value="e" />`
332	`</li>`
333	`<li>`
334	`<div data-icon="f" class="icon"></div>`
335	`<input type="text" readonly="readonly" value="f" />`
336	`</li>`
337	`<li>`
338	`<div data-icon="g" class="icon"></div>`
339	`<input type="text" readonly="readonly" value="g" />`
340	`</li>`
341	`<li>`
342	`<div data-icon="h" class="icon"></div>`
343	`<input type="text" readonly="readonly" value="h" />`
344	`</li>`
345	`<li>`
346	`<div data-icon="i" class="icon"></div>`
347	`<input type="text" readonly="readonly" value="i" />`
348	`</li>`
349	`<li>`
350	`<div data-icon="j" class="icon"></div>`
351	`<input type="text" readonly="readonly" value="j" />`
352	`</li>`
353	`<li>`
354	`<div data-icon="k" class="icon"></div>`
355	`<input type="text" readonly="readonly" value="k" />`
356	`</li>`
357	`<li>`
358	`<div data-icon="m" class="icon"></div>`
359	`<input type="text" readonly="readonly" value="m" />`
360	`</li>`
361	`<li>`
362	`<div data-icon="o" class="icon"></div>`
363	`<input type="text" readonly="readonly" value="o" />`
364	`</li>`
365	`<li>`
366	`<div data-icon="p" class="icon"></div>`
367	`<input type="text" readonly="readonly" value="p" />`
368	`</li>`
369	`<li>`
370	`<div data-icon="q" class="icon"></div>`
371	`<input type="text" readonly="readonly" value="q" />`
372	`</li>`
373	`<li>`
374	`<div data-icon="r" class="icon"></div>`
375	`<input type="text" readonly="readonly" value="r" />`
376	`</li>`
377	`</ul>`
378	`</div>`
379	`<script>`
380	`(function () {`
381	`var glyphs, i, len, ref;`
382
383	`ref = document.getElementsByClassName('glyphs');`
384	`for (i = 0, len = ref.length; i < len; i++) {`
385	`glyphs = ref[i];`
386	`glyphs.addEventListener('click', function (event) {`
387	`if (event.target.tagName === 'INPUT') {`
388	`return event.target.select();`
389	`}`
390	`});`
391	`}`
392	`}.call(this));`
393	`</script>`
394	`</body>`
395	`</html>`