pulseauthenticate
Version:
Common Authentication library for pulse angular apps
732 lines (449 loc) • 16.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>icons</title>
<style>
body {
margin:0;
padding:10px 20px;
background:#fff;
color:#222;
}
h1, div, footer {
font-family:"Helvetica Neue", Arial, sans-serif;
}
h1 {
margin:0 0 20px;
font-size:32px;
font-weight:normal;
}
h1 small {
font-size: 0.8em;
padding-left: 2em;
}
.icons {
margin-bottom:40px;
-webkit-column-count:5;
-moz-column-count:5;
column-count:5;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.icons__item,
.icons__item i {
line-height:2em;
cursor:pointer;
overflow:hidden;
}
.icons__item:hover {
color:#3c90be;
}
.icons__item i {
display:inline-block;
width:32px;
text-align:center;
}
footer {
margin-top:40px;
font-size:14px;
color:#999;
}
/* Generated by grunt-webfont */
@font-face {
font-family:"icons";
src:url("../icons/icons.eot");
src:url("../icons/icons.eot?#iefix") format("embedded-opentype"),
url("../icons/icons.woff") format("woff"),
url("../icons/icons.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
.icon {
font-family:"icons";
display:inline-block;
vertical-align:middle;
line-height:1;
font-weight:normal;
font-style:normal;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Icons */
.action-arrow:before {
content:"\f101";
}
.action-planned-fill:before {
content:"\f102";
}
.add-user-01:before {
content:"\f103";
}
.advanced:before {
content:"\f104";
}
.arrow-down-01:before {
content:"\f105";
}
.arrow-up-01:before {
content:"\f106";
}
.back-arrow-fill:before {
content:"\f107";
}
.back-arrow-outline:before {
content:"\f108";
}
.beginner:before {
content:"\f109";
}
.bin:before {
content:"\f10a";
}
.bonus-01:before {
content:"\f10b";
}
.browse-01:before {
content:"\f10c";
}
.calculator-fill:before {
content:"\f10d";
}
.calculator-outline:before {
content:"\f10e";
}
.calendar-01:before {
content:"\f10f";
}
.calendar-outline:before {
content:"\f110";
}
.cancel-01:before {
content:"\f111";
}
.case-example-outline:before {
content:"\f112";
}
.checkbox-01a:before {
content:"\f113";
}
.checkbox-01b:before {
content:"\f114";
}
.checkmark:before {
content:"\f115";
}
.close-01:before {
content:"\f116";
}
.document-01:before {
content:"\f117";
}
.download-01:before {
content:"\f118";
}
.duration-clock:before {
content:"\f119";
}
.edit-01:before {
content:"\f11a";
}
.edit-outline:before {
content:"\f11b";
}
.email-01:before {
content:"\f11c";
}
.exercise-outline:before {
content:"\f11d";
}
.expand-arrow:before {
content:"\f11e";
}
.expanded-arrow:before {
content:"\f11f";
}
.export-01:before {
content:"\f120";
}
.favorite-fill:before {
content:"\f121";
}
.favorite-outline:before {
content:"\f122";
}
.filter-fill:before {
content:"\f123";
}
.filter-outline:before {
content:"\f124";
}
.glossary-fill:before {
content:"\f125";
}
.glossary-outline:before {
content:"\f126";
}
.go-do-outline:before {
content:"\f127";
}
.heirarchy-01:before {
content:"\f128";
}
.help-01:before {
content:"\f129";
}
.info-01:before {
content:"\f12a";
}
.instructions:before {
content:"\f12b";
}
.intermediate:before {
content:"\f12c";
}
.learning-burst-outline:before {
content:"\f12d";
}
.lock-01:before {
content:"\f12e";
}
.lock-02:before {
content:"\f12f";
}
.lockUn-02:before {
content:"\f130";
}
.login_02:before {
content:"\f131";
}
.login-01:before {
content:"\f132";
}
.logout-fill:before {
content:"\f133";
}
.me-fill:before {
content:"\f134";
}
.me-outline:before {
content:"\f135";
}
.minus-01:before {
content:"\f136";
}
.more-menu-01:before {
content:"\f137";
}
.more-menu-02:before {
content:"\f138";
}
.more-menu-03:before {
content:"\f139";
}
.more-menu-04:before {
content:"\f13a";
}
.move-down-01:before {
content:"\f13b";
}
.move-up-01:before {
content:"\f13c";
}
.new:before {
content:"\f13d";
}
.pencil:before {
content:"\f13e";
}
.plus-01:before {
content:"\f13f";
}
.plus-02:before {
content:"\f140";
}
.print-01:before {
content:"\f141";
}
.programs-fill:before {
content:"\f142";
}
.programs:before {
content:"\f143";
}
.quick-resources-fill:before {
content:"\f144";
}
.quick-resources-outline:before {
content:"\f145";
}
.quiz-outline:before {
content:"\f146";
}
.recent-activity-complete:before {
content:"\f147";
}
.recent-activity-current:before {
content:"\f148";
}
.recommended-fill:before {
content:"\f149";
}
.recommended-outline:before {
content:"\f14a";
}
.reset-01:before {
content:"\f14b";
}
.resources-fill:before {
content:"\f14c";
}
.resources-outline:before {
content:"\f14d";
}
.save-01:before {
content:"\f14e";
}
.settings-01:before {
content:"\f14f";
}
.simulation-fill:before {
content:"\f150";
}
.sort_asending:before {
content:"\f151";
}
.sort_decending:before {
content:"\f152";
}
.sort:before {
content:"\f153";
}
.team-01:before {
content:"\f154";
}
.team-off:before {
content:"\f155";
}
.tick-01:before {
content:"\f156";
}
.user-01:before {
content:"\f157";
}
.warning:before {
content:"\f158";
}
</style>
</head>
<body>
<h1>icons</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="action-arrow"><i class="icon action-arrow"></i> action-arrow</div>
<div class="icons__item" data-name="action-planned-fill"><i class="icon action-planned-fill"></i> action-planned-fill</div>
<div class="icons__item" data-name="add-user-01"><i class="icon add-user-01"></i> add-user-01</div>
<div class="icons__item" data-name="advanced"><i class="icon advanced"></i> advanced</div>
<div class="icons__item" data-name="arrow-down-01"><i class="icon arrow-down-01"></i> arrow-down-01</div>
<div class="icons__item" data-name="arrow-up-01"><i class="icon arrow-up-01"></i> arrow-up-01</div>
<div class="icons__item" data-name="back-arrow-fill"><i class="icon back-arrow-fill"></i> back-arrow-fill</div>
<div class="icons__item" data-name="back-arrow-outline"><i class="icon back-arrow-outline"></i> back-arrow-outline</div>
<div class="icons__item" data-name="beginner"><i class="icon beginner"></i> beginner</div>
<div class="icons__item" data-name="bin"><i class="icon bin"></i> bin</div>
<div class="icons__item" data-name="bonus-01"><i class="icon bonus-01"></i> bonus-01</div>
<div class="icons__item" data-name="browse-01"><i class="icon browse-01"></i> browse-01</div>
<div class="icons__item" data-name="calculator-fill"><i class="icon calculator-fill"></i> calculator-fill</div>
<div class="icons__item" data-name="calculator-outline"><i class="icon calculator-outline"></i> calculator-outline</div>
<div class="icons__item" data-name="calendar-01"><i class="icon calendar-01"></i> calendar-01</div>
<div class="icons__item" data-name="calendar-outline"><i class="icon calendar-outline"></i> calendar-outline</div>
<div class="icons__item" data-name="cancel-01"><i class="icon cancel-01"></i> cancel-01</div>
<div class="icons__item" data-name="case-example-outline"><i class="icon case-example-outline"></i> case-example-outline</div>
<div class="icons__item" data-name="checkbox-01a"><i class="icon checkbox-01a"></i> checkbox-01a</div>
<div class="icons__item" data-name="checkbox-01b"><i class="icon checkbox-01b"></i> checkbox-01b</div>
<div class="icons__item" data-name="checkmark"><i class="icon checkmark"></i> checkmark</div>
<div class="icons__item" data-name="close-01"><i class="icon close-01"></i> close-01</div>
<div class="icons__item" data-name="document-01"><i class="icon document-01"></i> document-01</div>
<div class="icons__item" data-name="download-01"><i class="icon download-01"></i> download-01</div>
<div class="icons__item" data-name="duration-clock"><i class="icon duration-clock"></i> duration-clock</div>
<div class="icons__item" data-name="edit-01"><i class="icon edit-01"></i> edit-01</div>
<div class="icons__item" data-name="edit-outline"><i class="icon edit-outline"></i> edit-outline</div>
<div class="icons__item" data-name="email-01"><i class="icon email-01"></i> email-01</div>
<div class="icons__item" data-name="exercise-outline"><i class="icon exercise-outline"></i> exercise-outline</div>
<div class="icons__item" data-name="expand-arrow"><i class="icon expand-arrow"></i> expand-arrow</div>
<div class="icons__item" data-name="expanded-arrow"><i class="icon expanded-arrow"></i> expanded-arrow</div>
<div class="icons__item" data-name="export-01"><i class="icon export-01"></i> export-01</div>
<div class="icons__item" data-name="favorite-fill"><i class="icon favorite-fill"></i> favorite-fill</div>
<div class="icons__item" data-name="favorite-outline"><i class="icon favorite-outline"></i> favorite-outline</div>
<div class="icons__item" data-name="filter-fill"><i class="icon filter-fill"></i> filter-fill</div>
<div class="icons__item" data-name="filter-outline"><i class="icon filter-outline"></i> filter-outline</div>
<div class="icons__item" data-name="glossary-fill"><i class="icon glossary-fill"></i> glossary-fill</div>
<div class="icons__item" data-name="glossary-outline"><i class="icon glossary-outline"></i> glossary-outline</div>
<div class="icons__item" data-name="go-do-outline"><i class="icon go-do-outline"></i> go-do-outline</div>
<div class="icons__item" data-name="heirarchy-01"><i class="icon heirarchy-01"></i> heirarchy-01</div>
<div class="icons__item" data-name="help-01"><i class="icon help-01"></i> help-01</div>
<div class="icons__item" data-name="info-01"><i class="icon info-01"></i> info-01</div>
<div class="icons__item" data-name="instructions"><i class="icon instructions"></i> instructions</div>
<div class="icons__item" data-name="intermediate"><i class="icon intermediate"></i> intermediate</div>
<div class="icons__item" data-name="learning-burst-outline"><i class="icon learning-burst-outline"></i> learning-burst-outline</div>
<div class="icons__item" data-name="lock-01"><i class="icon lock-01"></i> lock-01</div>
<div class="icons__item" data-name="lock-02"><i class="icon lock-02"></i> lock-02</div>
<div class="icons__item" data-name="lockUn-02"><i class="icon lockUn-02"></i> lockUn-02</div>
<div class="icons__item" data-name="login_02"><i class="icon login_02"></i> login_02</div>
<div class="icons__item" data-name="login-01"><i class="icon login-01"></i> login-01</div>
<div class="icons__item" data-name="logout-fill"><i class="icon logout-fill"></i> logout-fill</div>
<div class="icons__item" data-name="me-fill"><i class="icon me-fill"></i> me-fill</div>
<div class="icons__item" data-name="me-outline"><i class="icon me-outline"></i> me-outline</div>
<div class="icons__item" data-name="minus-01"><i class="icon minus-01"></i> minus-01</div>
<div class="icons__item" data-name="more-menu-01"><i class="icon more-menu-01"></i> more-menu-01</div>
<div class="icons__item" data-name="more-menu-02"><i class="icon more-menu-02"></i> more-menu-02</div>
<div class="icons__item" data-name="more-menu-03"><i class="icon more-menu-03"></i> more-menu-03</div>
<div class="icons__item" data-name="more-menu-04"><i class="icon more-menu-04"></i> more-menu-04</div>
<div class="icons__item" data-name="move-down-01"><i class="icon move-down-01"></i> move-down-01</div>
<div class="icons__item" data-name="move-up-01"><i class="icon move-up-01"></i> move-up-01</div>
<div class="icons__item" data-name="new"><i class="icon new"></i> new</div>
<div class="icons__item" data-name="pencil"><i class="icon pencil"></i> pencil</div>
<div class="icons__item" data-name="plus-01"><i class="icon plus-01"></i> plus-01</div>
<div class="icons__item" data-name="plus-02"><i class="icon plus-02"></i> plus-02</div>
<div class="icons__item" data-name="print-01"><i class="icon print-01"></i> print-01</div>
<div class="icons__item" data-name="programs-fill"><i class="icon programs-fill"></i> programs-fill</div>
<div class="icons__item" data-name="programs"><i class="icon programs"></i> programs</div>
<div class="icons__item" data-name="quick-resources-fill"><i class="icon quick-resources-fill"></i> quick-resources-fill</div>
<div class="icons__item" data-name="quick-resources-outline"><i class="icon quick-resources-outline"></i> quick-resources-outline</div>
<div class="icons__item" data-name="quiz-outline"><i class="icon quiz-outline"></i> quiz-outline</div>
<div class="icons__item" data-name="recent-activity-complete"><i class="icon recent-activity-complete"></i> recent-activity-complete</div>
<div class="icons__item" data-name="recent-activity-current"><i class="icon recent-activity-current"></i> recent-activity-current</div>
<div class="icons__item" data-name="recommended-fill"><i class="icon recommended-fill"></i> recommended-fill</div>
<div class="icons__item" data-name="recommended-outline"><i class="icon recommended-outline"></i> recommended-outline</div>
<div class="icons__item" data-name="reset-01"><i class="icon reset-01"></i> reset-01</div>
<div class="icons__item" data-name="resources-fill"><i class="icon resources-fill"></i> resources-fill</div>
<div class="icons__item" data-name="resources-outline"><i class="icon resources-outline"></i> resources-outline</div>
<div class="icons__item" data-name="save-01"><i class="icon save-01"></i> save-01</div>
<div class="icons__item" data-name="settings-01"><i class="icon settings-01"></i> settings-01</div>
<div class="icons__item" data-name="simulation-fill"><i class="icon simulation-fill"></i> simulation-fill</div>
<div class="icons__item" data-name="sort_asending"><i class="icon sort_asending"></i> sort_asending</div>
<div class="icons__item" data-name="sort_decending"><i class="icon sort_decending"></i> sort_decending</div>
<div class="icons__item" data-name="sort"><i class="icon sort"></i> sort</div>
<div class="icons__item" data-name="team-01"><i class="icon team-01"></i> team-01</div>
<div class="icons__item" data-name="team-off"><i class="icon team-off"></i> team-off</div>
<div class="icons__item" data-name="tick-01"><i class="icon tick-01"></i> tick-01</div>
<div class="icons__item" data-name="user-01"><i class="icon user-01"></i> user-01</div>
<div class="icons__item" data-name="warning"><i class="icon warning"></i> warning</div>
</div>
<h1>Usage</h1>
<pre><code><i class="icon <span id="name">name</span>"></i></code></pre>
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
<script>
(function() {
document.getElementById('icons').onclick = function(e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
}
})();
</script>
</body>
</html>