display delete buttons for fields (not functional yet)
[confetti] / cards / cards.css
index 7d4593c..9adbeca 100644 (file)
@@ -17,6 +17,8 @@
 # along with Confetti.  If not, see <http://www.gnu.org/licenses/>. 
 */
 
+.filter, .newcard, .card { box-shadow: 0 0 1ex; }
+
 .filter {
   display: block;
   border: solid 1px;
 .card .control .item {
   display: inline-block;
   width: 100%;
-  min-height: 2.5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  margin: .25em 0;
+  padding: 0 .5em;
+  font-size: .75em;
   color: #008;
-  margin: .25em 0 .5em 0;
-  border: 1px solid black;
   background: #FFF;
-  padding: .25em .75ex 0 .75ex;
   text-decoration: none;
-  font-size: .75em;
+  border: 1px solid #888;
+  box-shadow: 0 0 .5ex #888;
 }
-.card .control .item:hover{ border-color: #888; }
-.card .control input.item { font-size: normal; }
 .card .control button.item { text-align: right;}
-.card .control button.item:hover{ border-color: #888;}
+.card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
 
 .card .control .item[name=newfield] {
   width: calc(100% - 2.5em);
 
 .card .section.prescriptions { width: 40ex;}
 
+form.card input.delete { display: none; }
+form.card input.delete + label {
+  display: inline-block;
+  position: relative;
+  font-size: .875em;
+  left: calc(100% - 1.5em);
+  width: 1.5em;
+  margin-bottom: -1.5em;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+form.card input.delete + label:before {
+  display: inline-block;
+  content: 'x';
+  width: calc(1.5em - 2px); height: calc(1.5em - 2px);
+  vertical-align: bottom;
+  text-align: center;
+  color: #444;
+  background-color: #FBB;
+  border: 1px solid #BBB;
+}
+form.card input.delete + label + input[type=text],
+form.card input.delete + label + input:not([type]),
+form.card input.delete + label + select + input.TEL {
+  width: calc(100% - 1.5em);
+}
+form.card input.delete[name^=TEL_] + label { top: 1.5em; }
+form.card input.delete[name^=TEL_] + label:before { border-top: none; }
+form.card input.delete[name^=NOTE_] + label,
+form.card input.delete[name^=ADR_] + label { margin-bottom: 0; }
+form.card input.delete[name^=NOTE_] + label:before,
+form.card input.delete[name^=ADR_] + label:before { border-bottom: none; }
+
+form.card input.delete:checked + label,
+form.card input.delete:checked + label + input,
+form.card input.delete:checked + label + select,
+form.card input.delete:checked + label + select + input,
+form.card input.delete:checked + label + textarea {
+  display: none
+}
+
 form.card .section input[type=text],
 form.card .section input:not([type]),
 form.card .section textarea,