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,

yatex.org