reverse-dependance added
parent
eddb770275
commit
ba9168bfd1
|
@ -0,0 +1,97 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<style>
|
||||||
|
/* +-----------------------------------------------------------------------+ *\
|
||||||
|
|* | reversed dependance | *|
|
||||||
|
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
||||||
|
\* +-----------------------------------------------------------------------+ */
|
||||||
|
/*
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
*/
|
||||||
|
.parent {
|
||||||
|
font-family:sans-serif;
|
||||||
|
position:relative;
|
||||||
|
background:#ddd;
|
||||||
|
}
|
||||||
|
.parent > p:first-child,
|
||||||
|
.parent > p:first-child + p,
|
||||||
|
.parent > p:first-child + p + p {
|
||||||
|
text-indent:1.5em;
|
||||||
|
margin:0px;
|
||||||
|
}
|
||||||
|
.parent .indicator {
|
||||||
|
display:block;
|
||||||
|
width:1px;
|
||||||
|
height:1px;
|
||||||
|
position:absolute;
|
||||||
|
top:0.1em;
|
||||||
|
left:0.2em;
|
||||||
|
}
|
||||||
|
.parent .indicator::before {
|
||||||
|
content:" ";
|
||||||
|
display:inline-block;
|
||||||
|
font-size:100%;
|
||||||
|
border:solid 0.15em black;
|
||||||
|
color:black;
|
||||||
|
width:0.6em;
|
||||||
|
height:0.6em;
|
||||||
|
line-height:0.6em;
|
||||||
|
border-radius:0.1em;
|
||||||
|
}
|
||||||
|
/* any checkboxes checked? */
|
||||||
|
.parent > :checked ~ .indicator.any::before {
|
||||||
|
content:"✔";
|
||||||
|
}
|
||||||
|
/* some two checkboxes right nedt to each other checked? */
|
||||||
|
.parent .indicator.side-by-side {
|
||||||
|
top:1.2em;
|
||||||
|
}
|
||||||
|
.parent > input:checked + input:checked ~ .indicator.side-by-side::before {
|
||||||
|
content:"✔";
|
||||||
|
}
|
||||||
|
/* all checkboxes checked? */
|
||||||
|
.parent .indicator.all {
|
||||||
|
top:2.4em;
|
||||||
|
}
|
||||||
|
.parent .indicator.all::before {
|
||||||
|
content:"✔";
|
||||||
|
}
|
||||||
|
.parent > input:not(:checked) ~ .indicator.all::before {
|
||||||
|
content:" ";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="parent">
|
||||||
|
<p>Any of the checkboxes checked?</p>
|
||||||
|
<p>All of the checkboxes checked?</p>
|
||||||
|
<p>At least 2 checkboxes side by side checked?</p>
|
||||||
|
<input type="checkbox" name="dependable1" title="Checkbox 1"/>
|
||||||
|
<input type="checkbox" name="dependable2" title="Checkbox 2"/>
|
||||||
|
<input type="checkbox" name="dependable3" title="Checkbox 3"/>
|
||||||
|
<input type="checkbox" name="dependable3" title="Checkbox 3"/>
|
||||||
|
<input type="checkbox" name="dependable4" title="Checkbox 4"/>
|
||||||
|
<span class="indicator any"></span>
|
||||||
|
<span class="indicator side-by-side"></span>
|
||||||
|
<span class="indicator all"></span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<style>
|
<style>
|
||||||
/* +-----------------------------------------------------------------------+ *\
|
/* +-----------------------------------------------------------------------+ *\
|
||||||
|* | tooltips styling | *|
|
|* | reversed-noscript | *|
|
||||||
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
||||||
\* +-----------------------------------------------------------------------+ */
|
\* +-----------------------------------------------------------------------+ */
|
||||||
/*
|
/*
|
||||||
|
|
Loading…
Reference in New Issue