placeholder table action buttons

This commit is contained in:
2018-07-28 18:37:51 +02:00
parent b9fed14465
commit dc5ec5db95
14 changed files with 338 additions and 202 deletions
+72 -57
View File
@@ -170,7 +170,7 @@
.fa-clock-o:before,
.fa-cloud-upload:before,
.fa-code-fork:before,
.fa-comments:before,
.fa-comment:before,
.fa-download:before,
.fa-eye:before,
.fa-eye-slash:before,
@@ -183,6 +183,7 @@
.fa-globe:before,
.fa-google:before,
.fa-history:before,
.fa-inbox:before,
.fa-key-modern:before,
.fa-link:before,
.fa-pencil:before,
@@ -232,7 +233,7 @@
.fa-clock-o:before { content: "\f106"; }
.fa-cloud-upload:before { content: "\f107"; }
.fa-code-fork:before { content: "\f108"; }
.fa-comments:before { content: "\f109"; }
.fa-comment:before { content: "\f109"; }
.fa-download:before { content: "\f10a"; }
.fa-eye:before { content: "\f10b"; }
.fa-eye-slash:before { content: "\f10c"; }
@@ -245,32 +246,33 @@
.fa-globe:before { content: "\f113"; }
.fa-google:before { content: "\f114"; }
.fa-history:before { content: "\f115"; }
.fa-key-modern:before { content: "\f116"; }
.fa-link:before { content: "\f117"; }
.fa-pencil:before { content: "\f118"; }
.fa-pencil-square-o:before { content: "\f119"; }
.fa-question-circle:before { content: "\f11a"; }
.fa-quote-left:before { content: "\f11b"; }
.fa-reply:before { content: "\f11c"; }
.fa-rss:before { content: "\f11d"; }
.fa-search:before { content: "\f11e"; }
.fa-share-alt:before { content: "\f11f"; }
.fa-sign-in:before { content: "\f120"; }
.fa-sign-out:before { content: "\f121"; }
.fa-sliders:before { content: "\f122"; }
.fa-sort:before { content: "\f123"; }
.fa-sort-asc:before { content: "\f124"; }
.fa-sort-desc:before { content: "\f125"; }
.fa-star:before { content: "\f126"; }
.fa-star-o:before { content: "\f127"; }
.fa-table:before { content: "\f128"; }
.fa-th-list:before { content: "\f129"; }
.fa-times:before { content: "\f12a"; }
.fa-trash:before { content: "\f12b"; }
.fa-trash-o:before { content: "\f12c"; }
.fa-user-circle-o:before { content: "\f12d"; }
.fa-user-plus:before { content: "\f12e"; }
.fa-wrench:before { content: "\f12f"; }
.fa-inbox:before { content: "\f116"; }
.fa-key-modern:before { content: "\f117"; }
.fa-link:before { content: "\f118"; }
.fa-pencil:before { content: "\f119"; }
.fa-pencil-square-o:before { content: "\f11a"; }
.fa-question-circle:before { content: "\f11b"; }
.fa-quote-left:before { content: "\f11c"; }
.fa-reply:before { content: "\f11d"; }
.fa-rss:before { content: "\f11e"; }
.fa-search:before { content: "\f11f"; }
.fa-share-alt:before { content: "\f120"; }
.fa-sign-in:before { content: "\f121"; }
.fa-sign-out:before { content: "\f122"; }
.fa-sliders:before { content: "\f123"; }
.fa-sort:before { content: "\f124"; }
.fa-sort-asc:before { content: "\f125"; }
.fa-sort-desc:before { content: "\f126"; }
.fa-star:before { content: "\f127"; }
.fa-star-o:before { content: "\f128"; }
.fa-table:before { content: "\f129"; }
.fa-th-list:before { content: "\f12a"; }
.fa-times:before { content: "\f12b"; }
.fa-trash:before { content: "\f12c"; }
.fa-trash-o:before { content: "\f12d"; }
.fa-user-circle-o:before { content: "\f12e"; }
.fa-user-plus:before { content: "\f12f"; }
.fa-wrench:before { content: "\f130"; }
</style>
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
@@ -286,7 +288,7 @@
<body class="characters-off">
<div id="page" class="container">
<header>
<h1>fa-dtbl-1 contains 48 glyphs:</h1>
<h1>fa-dtbl-1 contains 49 glyphs:</h1>
<a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
</header>
@@ -411,13 +413,13 @@
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-comments" class="fa-comments"></i></span>
<span class="step size-12"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-comment" class="fa-comment"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-comments" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-comment" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
</div>
</div>
@@ -580,6 +582,19 @@
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-inbox" class="fa-inbox"></i></span>
</div>
<div class="preview-scale">
<span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-inbox" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
</div>
</div>
<div class="glyph">
<div class="preview-glyphs">
<span class="step size-12"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="fa-key-modern" class="fa-key-modern"></i></span>
@@ -589,7 +604,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-key-modern" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
</div>
</div>
@@ -602,7 +617,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-link" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
</div>
</div>
@@ -615,7 +630,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
</div>
</div>
@@ -629,7 +644,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-pencil-square-o" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-edit" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
</div>
</div>
@@ -642,7 +657,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-question-circle" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
</div>
</div>
@@ -655,7 +670,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-quote-left" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
</div>
</div>
@@ -668,7 +683,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-reply" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
</div>
</div>
@@ -681,7 +696,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-rss" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
</div>
</div>
@@ -694,7 +709,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-search" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
</div>
</div>
@@ -707,7 +722,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-share-alt" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
</div>
</div>
@@ -720,7 +735,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-in" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
</div>
</div>
@@ -733,7 +748,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sign-out" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
</div>
</div>
@@ -746,7 +761,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sliders" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
</div>
</div>
@@ -759,7 +774,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
</div>
</div>
@@ -772,7 +787,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-asc" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
</div>
</div>
@@ -785,7 +800,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-sort-desc" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
</div>
</div>
@@ -798,7 +813,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
</div>
</div>
@@ -811,7 +826,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-star-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
</div>
</div>
@@ -824,7 +839,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-table" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
</div>
</div>
@@ -837,7 +852,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-th-list" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
</div>
</div>
@@ -851,7 +866,7 @@
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-times" />
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-close" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
</div>
</div>
@@ -864,7 +879,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
</div>
</div>
@@ -877,7 +892,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-trash-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
</div>
</div>
@@ -890,7 +905,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-circle-o" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
</div>
</div>
@@ -903,7 +918,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-user-plus" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
</div>
</div>
@@ -916,7 +931,7 @@
</div>
<div class="usage">
<input class="class" type="text" readonly="readonly" onClick="this.select();" value=".fa-wrench" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
<input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
</div>
</div>