confirmation when trying to delete record

[confetti] / static / cards.css

diff --git a/static/cards.css b/static/cards.css
index d85123f44fef0e35d4340ece16f3ae1f5f4edd96..0b50b5ec46795559279235c9492f2b811ec6491b 100644 (file)
--- a/static/cards.css
+++ b/static/cards.css
@@ -1,5 +1,5 @@
 /*
-# Copyright 2014, 2015 Paul Hänsch
+# Copyright 2014 - 2016 Paul Hänsch
 #
 # This file is part of Confetti.
 # 
@@ -81,6 +81,7 @@
   padding: 0 20ex 0 0;
   overflow: auto;
   background: #FFF;
+  min-height: 8em;
 }
 .card .control {
   display: inline-block;
@@ -97,18 +98,46 @@
 .card .control .item {
   display: inline-block;
   width: 100%;
+  min-height: 2em;
   color: #008;
-  margin: .25em 0 0 0;
+  margin: .25em 0;
   border: 1px solid black;
   background: #FFF;
+  padding: .25em .75ex 0 .75ex;
+  text-decoration: none;
+  font-size: .75em;
 }
-.card .control a.item { padding: .25em .75ex 0 .75ex;}
-.card .control a.item:hover{ border-color: #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 #delete + label + button,
+.card .control #delete { display: none; }
+.card .control #delete + label { background-color: #FEE; }
+.card .control #delete:checked + label + button {
+  position: fixed; display: block;
+  left: 40%; top: 30%; width: 20%;
+  font-size: 1.5em;
+  text-align: center;
+  background-color: #FAA;
+  color: #333;
+  border-radius: .25em 0 0 .25em;
+}
+.card .control #delete:checked + label:after {
+  position: fixed; display: block;
+  left: 60%; top: 30%; width: 5%;
+  margin: .25em 0; padding: .5em .75ex 0 .75ex;
+  height: 1.5em;
+  font-size: 2em;
+  content: 'X';
+  text-align: center;
+  color: #AAA; background-color: #000;
+  border-radius: 0 .25em .25em 0;
+}
+
 .card .section {
   display: inline-block;
   vertical-align: top;