tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity
316d5ef967
silverstripe-framework/admin/font/icon-reference.html
Sam Minnee 3ee8f505b7 MINORE: Remove training whitespace. 
The main benefit of this is so that authors who make use of
.editorconfig don't end up with whitespace changes in their PRs.

Spaces vs. tabs has been left alone, although that could do with a
tidy-up in SS4 after the switch to PSR-1/2.

The command used was this:

for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do
	find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+
	find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//'
done
2016-01-07 10:15:54 +13:00

616 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<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 - SilverStripe</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@charset "UTF-8";
@font-face {
font-family: "silverstripe";
src:url("silverstripe.eot");
src:url("silverstripe.eot?#iefix") format("embedded-opentype"),
url("silverstripe.woff") format("woff"),
url("silverstripe.ttf") format("truetype"),
url("silverstripe.svg#silverstripe") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "silverstripe" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="font-icon-"]:before,
[class*="font-icon-"]:before {
font-family: "silverstripe" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.font-icon-search:before {
content: "s";
}
.font-icon-upload:before {
content: "b";
}
.font-icon-sync:before {
content: "c";
}
.font-icon-print:before {
content: "d";
}
.font-icon-list:before {
content: "e";
}
.font-icon-plus-circled:before {
content: "f";
}
.font-icon-check-mark-2:before {
content: "k";
}
.font-icon-pencil:before {
content: "m";
}
.font-icon-book:before {
content: "n";
}
.font-icon-book-open:before {
content: "o";
}
.font-icon-plus:before {
content: "j";
}
.font-icon-icon-tree:before {
content: "p";
}
.font-icon-flow-tree:before {
content: "q";
}
.font-icon-info-circled:before {
content: "y";
}
.font-icon-chart-line:before {
content: "B";
}
.font-icon-graph-bar:before {
content: "E";
}
.font-icon-torsos-all:before {
content: "F";
}
.font-icon-torso:before {
content: "H";
}
.font-icon-picture:before {
content: "v";
}
.font-icon-chart-pie:before {
content: "A";
}
.font-icon-sitemap:before {
content: "C";
}
.font-icon-globe:before {
content: "P";
}
.font-icon-globe-1:before {
content: "R";
}
.font-icon-chat:before {
content: "t";
}
.font-icon-comment:before {
content: "w";
}
.font-icon-logout:before {
content: "z";
}
.font-icon-cancel:before {
content: "D";
}
.font-icon-cancel-circled:before {
content: "Q";
}
.font-icon-trash-bin:before {
content: "S";
}
.font-icon-left-open:before {
content: "T";
}
.font-icon-right-open:before {
content: "U";
}
.font-icon-check-mark:before {
content: "G";
}
.font-icon-check-mark-circle:before {
content: "I";
}
.font-icon-level-up:before {
content: "V";
}
.font-icon-back-in-time:before {
content: "X";
}
.font-icon-cog:before {
content: "Y";
}
.font-icon-rocket:before {
content: "Z";
}
.font-icon-install:before {
content: "a";
}
.font-icon-down-circled:before {
content: "i";
}
.font-icon-eye:before {
content: "l";
}
.font-icon-columns:before {
content: "r";
}
.font-icon-edit-write:before {
content: "u";
}
.font-icon-monitor:before {
content: "x";
}
.font-icon-mobile:before {
content: "J";
}
.font-icon-tablet:before {
content: "K";
}
.font-icon-resize:before {
content: "L";
}
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>SilverStripe</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 font-icon-search"></div>
<input type="text" readonly="readonly" value="search">
</li>
<li>
<div class="icon font-icon-upload"></div>
<input type="text" readonly="readonly" value="upload">
</li>
<li>
<div class="icon font-icon-sync"></div>
<input type="text" readonly="readonly" value="sync">
</li>
<li>
<div class="icon font-icon-print"></div>
<input type="text" readonly="readonly" value="print">
</li>
<li>
<div class="icon font-icon-list"></div>
<input type="text" readonly="readonly" value="list">
</li>
<li>
<div class="icon font-icon-plus-circled"></div>
<input type="text" readonly="readonly" value="plus-circled">
</li>
<li>
<div class="icon font-icon-check-mark-2"></div>
<input type="text" readonly="readonly" value="check-mark-2">
</li>
<li>
<div class="icon font-icon-pencil"></div>
<input type="text" readonly="readonly" value="pencil">
</li>
<li>
<div class="icon font-icon-book"></div>
<input type="text" readonly="readonly" value="book">
</li>
<li>
<div class="icon font-icon-book-open"></div>
<input type="text" readonly="readonly" value="book-open">
</li>
<li>
<div class="icon font-icon-plus"></div>
<input type="text" readonly="readonly" value="plus">
</li>
<li>
<div class="icon font-icon-icon-tree"></div>
<input type="text" readonly="readonly" value="icon-tree">
</li>
<li>
<div class="icon font-icon-flow-tree"></div>
<input type="text" readonly="readonly" value="flow-tree">
</li>
<li>
<div class="icon font-icon-info-circled"></div>
<input type="text" readonly="readonly" value="info-circled">
</li>
<li>
<div class="icon font-icon-chart-line"></div>
<input type="text" readonly="readonly" value="chart-line">
</li>
<li>
<div class="icon font-icon-graph-bar"></div>
<input type="text" readonly="readonly" value="graph-bar">
</li>
<li>
<div class="icon font-icon-torsos-all"></div>
<input type="text" readonly="readonly" value="torsos-all">
</li>
<li>
<div class="icon font-icon-torso"></div>
<input type="text" readonly="readonly" value="torso">
</li>
<li>
<div class="icon font-icon-picture"></div>
<input type="text" readonly="readonly" value="picture">
</li>
<li>
<div class="icon font-icon-chart-pie"></div>
<input type="text" readonly="readonly" value="chart-pie">
</li>
<li>
<div class="icon font-icon-sitemap"></div>
<input type="text" readonly="readonly" value="sitemap">
</li>
<li>
<div class="icon font-icon-globe"></div>
<input type="text" readonly="readonly" value="globe">
</li>
<li>
<div class="icon font-icon-globe-1"></div>
<input type="text" readonly="readonly" value="globe-1">
</li>
<li>
<div class="icon font-icon-chat"></div>
<input type="text" readonly="readonly" value="chat">
</li>
<li>
<div class="icon font-icon-comment"></div>
<input type="text" readonly="readonly" value="comment">
</li>
<li>
<div class="icon font-icon-logout"></div>
<input type="text" readonly="readonly" value="logout">
</li>
<li>
<div class="icon font-icon-cancel"></div>
<input type="text" readonly="readonly" value="cancel">
</li>
<li>
<div class="icon font-icon-cancel-circled"></div>
<input type="text" readonly="readonly" value="cancel-circled">
</li>
<li>
<div class="icon font-icon-trash-bin"></div>
<input type="text" readonly="readonly" value="trash-bin">
</li>
<li>
<div class="icon font-icon-left-open"></div>
<input type="text" readonly="readonly" value="left-open">
</li>
<li>
<div class="icon font-icon-right-open"></div>
<input type="text" readonly="readonly" value="right-open">
</li>
<li>
<div class="icon font-icon-check-mark"></div>
<input type="text" readonly="readonly" value="check-mark">
</li>
<li>
<div class="icon font-icon-check-mark-circle"></div>
<input type="text" readonly="readonly" value="check-mark-circle">
</li>
<li>
<div class="icon font-icon-level-up"></div>
<input type="text" readonly="readonly" value="level-up">
</li>
<li>
<div class="icon font-icon-back-in-time"></div>
<input type="text" readonly="readonly" value="back-in-time">
</li>
<li>
<div class="icon font-icon-cog"></div>
<input type="text" readonly="readonly" value="cog">
</li>
<li>
<div class="icon font-icon-rocket"></div>
<input type="text" readonly="readonly" value="rocket">
</li>
<li>
<div class="icon font-icon-install"></div>
<input type="text" readonly="readonly" value="install">
</li>
<li>
<div class="icon font-icon-down-circled"></div>
<input type="text" readonly="readonly" value="down-circled">
</li>
<li>
<div class="icon font-icon-eye"></div>
<input type="text" readonly="readonly" value="eye">
</li>
<li>
<div class="icon font-icon-columns"></div>
<input type="text" readonly="readonly" value="columns">
</li>
<li>
<div class="icon font-icon-edit-write"></div>
<input type="text" readonly="readonly" value="edit-write">
</li>
<li>
<div class="icon font-icon-monitor"></div>
<input type="text" readonly="readonly" value="monitor">
</li>
<li>
<div class="icon font-icon-mobile"></div>
<input type="text" readonly="readonly" value="mobile">
</li>
<li>
<div class="icon font-icon-tablet"></div>
<input type="text" readonly="readonly" value="tablet">
</li>
<li>
<div class="icon font-icon-resize"></div>
<input type="text" readonly="readonly" value="resize">
</li>
</ul>
<h2>Character mapping</h2>
<ul class="glyphs character-mapping">
<li>
<div data-icon="s" class="icon"></div>
<input type="text" readonly="readonly" value="s">
</li>
<li>
<div data-icon="b" class="icon"></div>
<input type="text" readonly="readonly" value="b">
</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="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="n" class="icon"></div>
<input type="text" readonly="readonly" value="n">
</li>
<li>
<div data-icon="o" class="icon"></div>
<input type="text" readonly="readonly" value="o">
</li>
<li>
<div data-icon="j" class="icon"></div>
<input type="text" readonly="readonly" value="j">
</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="y" class="icon"></div>
<input type="text" readonly="readonly" value="y">
</li>
<li>
<div data-icon="B" class="icon"></div>
<input type="text" readonly="readonly" value="B">
</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="H" class="icon"></div>
<input type="text" readonly="readonly" value="H">
</li>
<li>
<div data-icon="v" class="icon"></div>
<input type="text" readonly="readonly" value="v">
</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="P" class="icon"></div>
<input type="text" readonly="readonly" value="P">
</li>
<li>
<div data-icon="R" class="icon"></div>
<input type="text" readonly="readonly" value="R">
</li>
<li>
<div data-icon="t" class="icon"></div>
<input type="text" readonly="readonly" value="t">
</li>
<li>
<div data-icon="w" class="icon"></div>
<input type="text" readonly="readonly" value="w">
</li>
<li>
<div data-icon="z" class="icon"></div>
<input type="text" readonly="readonly" value="z">
</li>
<li>
<div data-icon="D" class="icon"></div>
<input type="text" readonly="readonly" value="D">
</li>
<li>
<div data-icon="Q" class="icon"></div>
<input type="text" readonly="readonly" value="Q">
</li>
<li>
<div data-icon="S" class="icon"></div>
<input type="text" readonly="readonly" value="S">
</li>
<li>
<div data-icon="T" class="icon"></div>
<input type="text" readonly="readonly" value="T">
</li>
<li>
<div data-icon="U" class="icon"></div>
<input type="text" readonly="readonly" value="U">
</li>
<li>
<div data-icon="G" class="icon"></div>
<input type="text" readonly="readonly" value="G">
</li>
<li>
<div data-icon="I" class="icon"></div>
<input type="text" readonly="readonly" value="I">
</li>
<li>
<div data-icon="V" class="icon"></div>
<input type="text" readonly="readonly" value="V">
</li>
<li>
<div data-icon="X" class="icon"></div>
<input type="text" readonly="readonly" value="X">
</li>
<li>
<div data-icon="Y" class="icon"></div>
<input type="text" readonly="readonly" value="Y">
</li>
<li>
<div data-icon="Z" class="icon"></div>
<input type="text" readonly="readonly" value="Z">
</li>
<li>
<div data-icon="a" class="icon"></div>
<input type="text" readonly="readonly" value="a">
</li>
<li>
<div data-icon="i" class="icon"></div>
<input type="text" readonly="readonly" value="i">
</li>
<li>
<div data-icon="l" class="icon"></div>
<input type="text" readonly="readonly" value="l">
</li>
<li>
<div data-icon="r" class="icon"></div>
<input type="text" readonly="readonly" value="r">
</li>
<li>
<div data-icon="u" class="icon"></div>
<input type="text" readonly="readonly" value="u">
</li>
<li>
<div data-icon="x" class="icon"></div>
<input type="text" readonly="readonly" value="x">
</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="L" class="icon"></div>
<input type="text" readonly="readonly" value="L">
</li>
</ul>
</div><script type="text/javascript">
(function() {
var glyphs, _i, _len, _ref;
_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>
</html>
Reference in New Issue View Git Blame Copy Permalink