Mercurial > hgrepos > hgweb.cgi > s4
diff examples/common/default/default.css @ 502:46a8da2740d9
Add CheckBox WikiStyle notation "- [ ]"
author | HIROSE Yuuji <yuuji@gentei.org> |
---|---|
date | Sat, 12 Jan 2019 14:26:46 +0900 |
parents | c9a7fb74e96a |
children | 3ee6cc78d5bb |
line wrap: on
line diff
--- a/examples/common/default/default.css Fri Nov 16 07:50:16 2018 +0900 +++ b/examples/common/default/default.css Sat Jan 12 14:26:46 2019 +0900 @@ -202,6 +202,33 @@ display: inline;} div.foldtabs p {margin: 0;} +/* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */ +input.s4-checkbox {display: none;} /* Do not show real checkbox */ +input.s4-checkbox + label { + position: relative; padding-left: 0.8em; margin-right: 1em; +} +input.s4-checkbox + label:before, +input.s4-checkbox + label:after { + content: ""; display: block; /* Mimic Checkbox by absolute box */ + position: absolute; top: 0; left: 0; margin: 0; +} +input.s4-checkbox + label:before { /* checkbox frame */ + width: 0.8em; height: 0.8em; border: 1px solid #aaa; border-radius: 20%; +} +input.s4-checkbox:checked + label:before { /* checked frame bg */ + background: pink; +} +input.s4-checkbox:checked + label { /* checked text */ + /* text-shadow: red 1px 1px; */ +} +input.s4-checkbox:checked + label:after { /* checked mark */ + width: 0.6em; height: 0.4em; top: 0.05em; left: 0.1em; + border-bottom: 3px solid navy; + border-left: 3px solid navy; + transform: rotate(-40deg); +} +/* ---------------------------------------------------- */ + div.dumptable {max-height: 15em; overflow: auto;} div.dumptable tr:hover {background-color: #fee;} table.dumpblogs td,