mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-31 13:09:21 +03:00
313 lines
13 KiB
HTML
313 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>RainLoop Svg SVG Sprite</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<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; color: #fb565e;}
|
|
p {margin: 10px 0 ; line-height:1.3em; color: #454545;}
|
|
.small{font-size:14px;color:#a5adb4;}
|
|
.small a{color:#a5adb4;}
|
|
.small a:hover{color:#fb565e}
|
|
.glyphs{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.8);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
|
|
.glyphs li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
|
|
.glyphs 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 input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
|
|
.glyphs input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
|
|
|
|
/*
|
|
|
|
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|
|
|
*/
|
|
|
|
.hljs {
|
|
display: block; padding: 0.5em;
|
|
color: #333;
|
|
background: #f8f8f8
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-template_comment,
|
|
.diff .hljs-header,
|
|
.hljs-javadoc {
|
|
color: #998;
|
|
font-style: italic
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.css .rule .hljs-keyword,
|
|
.hljs-winutils,
|
|
.javascript .hljs-title,
|
|
.nginx .hljs-title,
|
|
.hljs-subst,
|
|
.hljs-request,
|
|
.hljs-status {
|
|
color: #333;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-hexcolor,
|
|
.ruby .hljs-constant {
|
|
color: #099;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-tag .hljs-value,
|
|
.hljs-phpdoc,
|
|
.tex .hljs-formula {
|
|
color: #d14
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-id,
|
|
.coffeescript .hljs-params,
|
|
.scss .hljs-preprocessor {
|
|
color: #900;
|
|
font-weight: bold
|
|
}
|
|
|
|
.javascript .hljs-title,
|
|
.lisp .hljs-title,
|
|
.clojure .hljs-title,
|
|
.hljs-subst {
|
|
font-weight: normal
|
|
}
|
|
|
|
.hljs-class .hljs-title,
|
|
.haskell .hljs-type,
|
|
.vhdl .hljs-literal,
|
|
.tex .hljs-command {
|
|
color: #458;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-tag,
|
|
.hljs-tag .hljs-title,
|
|
.hljs-rules .hljs-property,
|
|
.django .hljs-tag .hljs-keyword {
|
|
color: #000080;
|
|
font-weight: normal
|
|
}
|
|
|
|
.hljs-attribute,
|
|
.hljs-variable,
|
|
.lisp .hljs-body {
|
|
color: #008080
|
|
}
|
|
|
|
.hljs-regexp {
|
|
color: #009926
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.ruby .hljs-symbol .hljs-string,
|
|
.lisp .hljs-keyword,
|
|
.tex .hljs-special,
|
|
.hljs-prompt {
|
|
color: #990073
|
|
}
|
|
|
|
.hljs-built_in,
|
|
.lisp .hljs-title,
|
|
.clojure .hljs-built_in {
|
|
color: #0086b3
|
|
}
|
|
|
|
.hljs-preprocessor,
|
|
.hljs-pragma,
|
|
.hljs-pi,
|
|
.hljs-doctype,
|
|
.hljs-shebang,
|
|
.hljs-cdata {
|
|
color: #999;
|
|
font-weight: bold
|
|
}
|
|
|
|
.hljs-deletion {
|
|
background: #fdd
|
|
}
|
|
|
|
.hljs-addition {
|
|
background: #dfd
|
|
}
|
|
|
|
.diff .hljs-change {
|
|
background: #0086b3
|
|
}
|
|
|
|
.hljs-chunk {
|
|
color: #aaa
|
|
}
|
|
|
|
|
|
.tip {
|
|
font-size: 16px;
|
|
line-height: 25px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.tip > .number {
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
margin-right: 12px;
|
|
padding: 3px 7px;
|
|
-webkit-border-radius: 50px;
|
|
border-radius: 50px;
|
|
background-color: #fb565e;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
code {
|
|
background: #faf9ff;
|
|
border: 1px solid #bab9c0;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
padding: 0 4px;
|
|
font-size: 14px;
|
|
}
|
|
pre code {
|
|
display: block;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
[class^="svg-icon-"],
|
|
[class*=" svg-icon-"] {
|
|
margin: 10px;
|
|
height: 32px;
|
|
width: 32px;
|
|
float: left;
|
|
fill: currentColor;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
|
|
<symbol id="svg-icon-plus" viewBox="0 0 512 512">
|
|
<path d="m457 210l0 55c0 8-3 14-8 20c-5 5-12 8-19 8l-119 0l0 118c0 8-3 15-8 20c-5 5-12 8-20 8l-54 0c-8 0-15-3-20-8c-5-5-8-12-8-20l0-118l-119 0c-7 0-14-3-19-8c-5-6-8-12-8-20l0-55c0-7 3-14 8-19c5-5 12-8 19-8l119 0l0-119c0-8 3-14 8-19c5-6 12-8 20-8l54 0c8 0 15 2 20 8c5 5 8 11 8 19l0 119l119 0c7 0 14 3 19 8c5 5 8 12 8 19z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-trash" viewBox="0 0 512 512">
|
|
<path d="m480 109c-2-25-23-45-48-45l-48 0l0-16c0-26-22-48-48-48l-160 0c-27 0-48 22-48 48l0 16l-48 0c-26 0-46 20-48 45l0 0l0 35c0 18 14 32 32 32l0 272c0 35 29 64 64 64l256 0c35 0 64-29 64-64l0-272c18 0 32-14 32-32l0-35z m-320-61c0-9 7-16 16-16l160 0c9 0 16 7 16 16l0 16l-192 0z m256 400c0 18-14 32-32 32l-256 0c-18 0-32-14-32-32l0-272l320 0z m32-320l0 16l-384 0l0-32c0-9 7-16 16-16l352 0c9 0 16 7 16 16z m-304 320l32 0c9 0 16-7 16-16l0-208c0-9-7-16-16-16l-32 0c-9 0-16 7-16 16l0 208c0 9 7 16 16 16z m0-224l32 0l0 208l-32 0z m96 224l32 0c9 0 16-7 16-16l0-208c0-9-7-16-16-16l-32 0c-9 0-16 7-16 16l0 208c0 9 7 16 16 16z m0-224l32 0l0 208l-32 0z m96 224l32 0c9 0 16-7 16-16l0-208c0-9-7-16-16-16l-32 0c-9 0-16 7-16 16l0 208c0 9 7 16 16 16z m0-224l32 0l0 208l-32 0z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-key" viewBox="0 0 512 512">
|
|
<path d="m352 64c53 0 96 43 96 96c0 53-43 96-96 96c-5 0-10-1-17-2l-33-6l-24 24l-3 3l-19 19l0 26l-64 0l0 64l-64 0l0 64l-64 0l0-38l200-200l-6-33c-1-7-2-12-2-17c0-53 43-96 96-96m0-64c-88 0-160 72-160 160c0 10 1 20 3 29l-195 195l0 128l192 0l0-64l64 0l0-64l64 0l0-64l3-3c9 2 19 3 29 3c88 0 160-72 160-160c0-88-72-160-160-160z m32 160c0 18-14 32-32 32c-18 0-32-14-32-32c0-18 14-32 32-32c18 0 32 14 32 32z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-lock" viewBox="0 0 512 512">
|
|
<path d="m183 219l146 0l0-54c0-21-7-38-21-52c-15-14-32-22-52-22c-20 0-37 8-52 22c-14 14-21 31-21 52z m238 28l0 164c0 8-3 15-8 20c-6 5-12 8-20 8l-274 0c-8 0-14-3-20-8c-5-5-8-12-8-20l0-164c0-8 3-14 8-20c6-5 12-8 20-8l9 0l0-54c0-35 13-66 38-91c25-25 55-37 90-37c35 0 65 12 90 37c25 25 38 56 38 91l0 54l9 0c8 0 14 3 20 8c5 6 8 12 8 20z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-eye" viewBox="0 0 512 512">
|
|
<path d="m475 274c-29-45-65-78-108-101c11 20 17 42 17 65c0 35-13 65-38 90c-25 25-55 38-90 38c-35 0-65-13-90-38c-25-25-38-55-38-90c0-23 6-45 17-65c-43 23-79 56-108 101c25 39 57 70 95 94c38 23 79 34 124 34c45 0 86-11 124-34c38-24 70-55 95-94z m-205-109c0-4-2-7-4-10c-3-3-6-4-10-4c-24 0-44 8-61 25c-17 17-26 38-26 62c0 4 1 7 4 9c3 3 6 4 10 4c4 0 7-1 10-4c2-2 4-5 4-9c0-17 5-31 17-42c12-12 26-18 42-18c4 0 7-1 10-4c2-2 4-6 4-9z m242 109c0 7-2 13-6 20c-26 44-62 79-107 105c-45 27-93 40-143 40c-50 0-98-13-143-40c-45-26-81-61-107-105c-4-7-6-13-6-20c0-6 2-13 6-19c26-44 62-79 107-106c45-26 93-39 143-39c50 0 98 13 143 39c45 27 81 62 107 106c4 6 6 13 6 19z"/>
|
|
</symbol>
|
|
|
|
<symbol id="svg-icon-archive" viewBox="0 0 512 512">
|
|
<path d="m0 192l512 0l0 320l-512 0z m288-64l224 0l-64-128l-160 0z m-64-128l-160 0l-64 128l224 0z"/>
|
|
</symbol>
|
|
|
|
</svg>
|
|
|
|
|
|
<div class="container">
|
|
<p class="small">This SVG sprite was created with <a href="http://fontastic.me/">Fontastic</a></p>
|
|
|
|
<h2>icons reference</h2>
|
|
<ul class="glyphs">
|
|
|
|
<li>
|
|
<svg class="svg-icon-plus">
|
|
<use xlink:href="#svg-icon-plus"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-plus"><use xlink:href="#svg-icon-plus"></use></svg>'>
|
|
</li>
|
|
|
|
<li>
|
|
<svg class="svg-icon-trash">
|
|
<use xlink:href="#svg-icon-trash"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-trash"><use xlink:href="#svg-icon-trash"></use></svg>'>
|
|
</li>
|
|
|
|
<li>
|
|
<svg class="svg-icon-key">
|
|
<use xlink:href="#svg-icon-key"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-key"><use xlink:href="#svg-icon-key"></use></svg>'>
|
|
</li>
|
|
|
|
<li>
|
|
<svg class="svg-icon-lock">
|
|
<use xlink:href="#svg-icon-lock"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-lock"><use xlink:href="#svg-icon-lock"></use></svg>'>
|
|
</li>
|
|
|
|
<li>
|
|
<svg class="svg-icon-eye">
|
|
<use xlink:href="#svg-icon-eye"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-eye"><use xlink:href="#svg-icon-eye"></use></svg>'>
|
|
</li>
|
|
|
|
<li>
|
|
<svg class="svg-icon-archive">
|
|
<use xlink:href="#svg-icon-archive"></use>
|
|
</svg>
|
|
|
|
<input type="text" readonly="readonly" value='<svg class="svg-icon-archive"><use xlink:href="#svg-icon-archive"></use></svg>'>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<h2>How to add SVG sprite icons to your project?</h2>
|
|
|
|
<div class="tip"><p></p><div class="number">1</div>Upload the icons.svg file to your server. In our examples below we assume that the sprite file will be available at: <code>http://yoursite.com/images/icons.svg</code><p></p></div><div class="tip"><p></p><div class="number">2</div>Go to "Icons Reference" and choose an icon that you want to have on your HTML page. Then click and copy its markup to your HTML page. For instance, the markup for a twitter icon could look like this:<p></p><pre><code><span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>></span><span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#icon-twitter"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span><span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
|
|
</code></pre></div><div class="tip"><p></p><div class="number">3</div>Now it's time to add the sprite file URL to the icon markup. In the example below, the URL is <code>/images/icons.svg</code>. So now the twitter icon markup could look like this:<p></p><pre><code><span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>></span><span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"/images/icons.svg#icon-twitter"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span><span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
|
|
</code></pre></div><div class="tip"><p></p><div class="number">4</div>Add the code below to the CSS file that you use for your html page:<p></p><pre><code><span class="hljs-attr_selector">[class^="icon-"]</span>, <span class="hljs-attr_selector">[class*=" icon-"]</span> <span class="hljs-rules">{
|
|
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
|
|
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
|
|
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
|
|
<span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> currentColor</span></span>;
|
|
<span class="hljs-rule">}</span></span>
|
|
</code></pre><p>You can use <code>height</code> and <code>width</code> properties to control icon size. To define icon color use <code>fill</code> property. Note: <code>currentColor</code> keyword inherits the color value of a parent element.</p></div><div class="tip"><p></p><div class="number">5</div>For IE capability you can use a great polyfill: <a href="https://github.com/jonathantneal/svg4everybody" target="blank">svg4everybody</a><p></p></div><div class="tip"><p> <b>Remember: </b>with Icon Cloud you don't have to worry about IE capability, the sprite file and other stuff. We'll take care of all of that for you, just click the "Publish" button and give it a try.</p></div>
|
|
|
|
</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>
|