/usr/share/doc/glue-sprite/html/pseudoclasses.html is in glue-sprite 0.11.1-2build1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudo Classes — glue 0.11.1 documentation</title>
<link rel="stylesheet" href="_static/nature.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '0.11.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="glue 0.11.1 documentation" href="index.html" />
<link rel="next" title="Retina Sprites: Ratios" href="ratios.html" />
<link rel="prev" title="Quickstart" href="quickstart.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="ratios.html" title="Retina Sprites: Ratios"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="quickstart.html" title="Quickstart"
accesskey="P">previous</a> |</li>
<li><a href="index.html">glue 0.11.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="pseudo-classes">
<h1>Pseudo Classes<a class="headerlink" href="#pseudo-classes" title="Permalink to this headline">¶</a></h1>
<div class="section" id="using-the-filename">
<h2>Using the filename<a class="headerlink" href="#using-the-filename" title="Permalink to this headline">¶</a></h2>
<p>Using the filename of the source images you can customize the pseudo class related to the images, so if you simply append <tt class="docutils literal"><span class="pre">__hover</span></tt> to the filename <tt class="docutils literal"><span class="pre">glue</span></tt> will add <tt class="docutils literal"><span class="pre">:hover</span></tt> to the CSS class name:</p>
<div class="highlight-python"><div class="highlight"><pre>buttons
├── pay.png
└── pay__hover.png
</pre></div>
</div>
<p>Using this simple convention you can create for example create button sprites like:</p>
<img alt="_images/buttons.png" src="_images/buttons.png" />
<p>And generate automatically the following css:</p>
<div class="highlight-css"><div class="highlight"><pre><span class="nc">.sprite-buttons-pay</span><span class="p">{</span><span class="k">background-image</span><span class="o">:</span><span class="sx">url(buttons.png)</span><span class="p">;</span><span class="k">background-repeat</span><span class="o">:</span><span class="k">no-repeat</span><span class="p">}</span>
<span class="nc">.sprite-buttons-pay</span><span class="nd">:hover</span><span class="p">{</span><span class="k">background-position</span><span class="o">:</span><span class="m">0px</span> <span class="m">0px</span><span class="p">;</span><span class="k">width</span><span class="o">:</span><span class="m">174px</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">62px</span><span class="p">;}</span>
<span class="nc">.sprite-buttons-pay</span><span class="p">{</span><span class="k">background-position</span><span class="o">:</span><span class="m">0px</span> <span class="m">-62px</span><span class="p">;</span><span class="k">width</span><span class="o">:</span><span class="m">174px</span><span class="p">;</span><span class="k">height</span><span class="o">:</span><span class="m">62px</span><span class="p">;}</span>
</pre></div>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">You can use multiple pseudo-classes at the same time <tt class="docutils literal"><span class="pre">__hover__before.png</span></tt></p>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">pseudo-class separator use to be <tt class="docutils literal"><span class="pre">_</span></tt>. Since <tt class="docutils literal"><span class="pre">glue</span> <span class="pre">0.9</span></tt> it is <tt class="docutils literal"><span class="pre">__</span></tt>. If you don’t want / you can’e rename all your files, you can use <tt class="docutils literal"><span class="pre">--pseudo-class-separator=_</span></tt> in order to make <tt class="docutils literal"><span class="pre">glue</span></tt> work in legacy mode.</p>
</div>
</div>
<div class="section" id="available-pseudo-classes">
<h2>Available pseudo classes<a class="headerlink" href="#available-pseudo-classes" title="Permalink to this headline">¶</a></h2>
<p>Glue will only detect the following pseudo-classes: <tt class="docutils literal"><span class="pre">link</span></tt>, <tt class="docutils literal"><span class="pre">visited</span></tt>, <tt class="docutils literal"><span class="pre">active</span></tt>, <tt class="docutils literal"><span class="pre">hover</span></tt>, <tt class="docutils literal"><span class="pre">focus</span></tt>, <tt class="docutils literal"><span class="pre">first-letter</span></tt>, <tt class="docutils literal"><span class="pre">first-line</span></tt>, <tt class="docutils literal"><span class="pre">first-child</span></tt>, <tt class="docutils literal"><span class="pre">before</span></tt> and <tt class="docutils literal"><span class="pre">after</span></tt>.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Pseudo Classes</a><ul>
<li><a class="reference internal" href="#using-the-filename">Using the filename</a></li>
<li><a class="reference internal" href="#available-pseudo-classes">Available pseudo classes</a></li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="quickstart.html"
title="previous chapter">Quickstart</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="ratios.html"
title="next chapter">Retina Sprites: Ratios</a></p>
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/pseudoclasses.txt"
rel="nofollow">Show Source</a></li>
</ul>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="ratios.html" title="Retina Sprites: Ratios"
>next</a> |</li>
<li class="right" >
<a href="quickstart.html" title="Quickstart"
>previous</a> |</li>
<li><a href="index.html">glue 0.11.1 documentation</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2013, Jorge Bastida.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.2.3.
</div>
</body>
</html>
|