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
aefc1a5c01
silverstripe-framework/admin/font/icon-reference.html

694 lines
22 KiB
HTML
Raw Normal View History

Update font icon library
2015-08-25 05:03:29 +02:00
<!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-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-install:before {
content: "a";
}
.font-icon-down-circled:before {
content: "i";
}
.font-icon-eye:before {
content: "l";
}
Update view mode section w/ font icons
2015-08-31 23:46:39 +02:00
.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";
}
Add new font icons to set Add .no-text class for icons which have no text
2016-02-03 22:34:30 +01:00
.font-icon-left-open-big:before {
content: "\35";
}
.font-icon-down-open-big:before {
content: "\36";
}
.font-icon-up-open-big:before {
content: "\37";
}
.font-icon-right-open-big:before {
content: "\38";
}
- Add GridfieldActionsComponent - Add ability to set desired relative width on gridfield cells
2016-03-24 00:32:38 +01:00
.font-icon-dot-3:before {
content: "\39";
}
.font-icon-save:before {
content: "\21";
}
.font-icon-rocket:before {
content: "\5a";
}
.font-icon-cancel:before {
content: "\44";
}
Update font icon library
2015-08-25 05:03:29 +02:00
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}
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-06 00:34:58 +01:00
Update font icon library
2015-08-25 05:03:29 +02:00
</style>
</head>
<body>
<div class="container">
<h1>SilverStripe</h1>
Update view mode section w/ font icons
2015-08-31 23:46:39 +02:00
<p class="small">This font was created with <a href="http://fontastic.me/">Fontastic</a></p>
Update font icon library
2015-08-25 05:03:29 +02:00
<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-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-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>
Update view mode section w/ font icons
2015-08-31 23:46:39 +02:00
<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>
Add new font icons to set Add .no-text class for icons which have no text
2016-02-03 22:34:30 +01:00
<li>
<div class="icon font-icon-left-open-big"></div>
<input type="text" readonly="readonly" value="left-open-big">
</li>
<li>
<div class="icon font-icon-down-open-big"></div>
<input type="text" readonly="readonly" value="down-open-big">
</li>
<li>
<div class="icon font-icon-up-open-big"></div>
<input type="text" readonly="readonly" value="up-open-big">
</li>
<li>
<div class="icon font-icon-right-open-big"></div>
<input type="text" readonly="readonly" value="right-open-big">
</li>
- Add GridfieldActionsComponent - Add ability to set desired relative width on gridfield cells
2016-03-24 00:32:38 +01:00
<li>
<div class="icon font-icon-dot-3"></div>
<input type="text" readonly="readonly" value="dot-3">
</li>
<li>
<div class="icon font-icon-save"></div>
<input type="text" readonly="readonly" value="save">
</li>
<li>
<div class="icon font-icon-rocket"></div>
<input type="text" readonly="readonly" value="rocket">
</li>
<li>
<div class="icon font-icon-cancel"></div>
<input type="text" readonly="readonly" value="cancel">
</li>
Update font icon library
2015-08-25 05:03:29 +02:00
</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>
Update view mode section w/ font icons
2015-08-31 23:46:39 +02:00
<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>
Add new font icons to set Add .no-text class for icons which have no text
2016-02-03 22:34:30 +01:00
<li>
<div data-icon="3" class="icon"></div>
<input type="text" readonly="readonly" value="3">
</li>
<li>
<div data-icon="5" class="icon"></div>
<input type="text" readonly="readonly" value="5">
</li>
<li>
<div data-icon="6" class="icon"></div>
<input type="text" readonly="readonly" value="6">
</li>
<li>
<div data-icon="7" class="icon"></div>
<input type="text" readonly="readonly" value="7">
</li>
<li>
<div data-icon="8" class="icon"></div>
<input type="text" readonly="readonly" value="8">
</li>
- Add GridfieldActionsComponent - Add ability to set desired relative width on gridfield cells
2016-03-24 00:32:38 +01:00
<li>
<div data-icon="9" class="icon"></div>
<input type="text" readonly="readonly" value="9">
</li>
<li>
<div data-icon="!" class="icon"></div>
<input type="text" readonly="readonly" value="!">
</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>
Update font icon library
2015-08-25 05:03:29 +02:00
</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>
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-06 00:34:58 +01:00
</html>
Reference in New Issue Copy Permalink