display delete buttons for fields (not functional yet)

[confetti] / cards / cards.css

diff --git a/cards/cards.css b/cards/cards.css
index 9515e835233f20cb988d081e38de8148759cc0d9..9adbeca72013b952c48c381c96ed26bfe8c381f1 100644 (file)
--- a/cards/cards.css
+++ b/cards/cards.css
@@ -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;
@@ -132,21 +134,28 @@
 .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[name=newfield] { width: 85%;}
-.card .control .item[value=addfield] { width: 15%;}
+.card .control .item:hover{ border-color: #008; box-shadow: 0 0 .5ex #008; }
+
+.card .control .item[name=newfield] {
+  width: calc(100% - 2.5em);
+}
+.card .control .item[value=addfield] {
+  width: 2.5em;
+  border-style: solid solid solid none;
+  text-align: center;
+}
 
 .card .control #delete + label + button,
 .card .control #delete { display: none; }
@@ -218,8 +227,9 @@
   width: 100%;
   max-height: 10em;
 }
-.card .section .GENDER { display: inline-block; padding-right: .5ex;}
+.card .section .GENDER { display: inline-block; padding-right: .5ex; }
 .card .section .BDAY { display: inline-block;}
+.card .section .TEL .type { color: #444; }
 
 .card .section select {
   display: block;
@@ -242,10 +252,58 @@
 
 .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,
-form.card .section select {width: 100%;}
+form.card .section select {
+  width: 100%;
+  margin-bottom: .25em;
+}
+
+form.card .section select.teltype { margin-bottom: 0; }
+form.card .section input.TEL { margin-bottom: .5em; }
 
 form.card .attendance {
   min-width: 66%;