html5 confirm dialog
diff --git a/web/ons-demo/css/layout.default.css b/web/ons-demo/css/layout.default.css
index 297e31b..f3daf04 100644
--- a/web/ons-demo/css/layout.default.css
+++ b/web/ons-demo/css/layout.default.css
@@ -27,6 +27,38 @@
-webkit-box-flex: 1.0;
}
+#confirm {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ -webkit-box-align: center;
+ -webkit-box-pack: center;
+}
+
+#confirm-background {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+}
+
+#confirm-panel {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-pack: justify;
+}
+
+#confirm-buttons {
+ display: -webkit-box;
+ -webkit-box-pack: center;
+ -webkit-box-flex: 1.0;
+ -webkit-box-align: center;
+}
+
.header {
width: 100%;
display: -webkit-box;
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index f9aa830..9f1ecf1 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -473,3 +473,58 @@
fill: rgba(255, 255, 255, .75);
}
+#confirm {
+ display: none;
+ -webkit-transition: opacity .25s;
+ font-size: 20px;
+}
+
+#confirm-background {
+ background-color: black;
+ opacity: .5;
+}
+
+#confirm-prompt {
+ display: -webkit-box;
+ -webkit-box-pack: center;
+ -webkit-box-align: center;
+ -webkit-box-flex: 1.0;
+ text-align: center;
+}
+
+#confirm-buttons {
+ padding: 1em;
+}
+
+#confirm-prompt {
+ margin-top:1em;
+ line-height: 1.5em;
+}
+
+#confirm-panel {
+ position: relative;
+ background-color: #222;
+ border: 2px solid #aaa;
+ border-radius: 12px;
+ width: 20em;
+ padding: 1em;
+}
+
+.confirm-button {
+ padding: .5em;
+ border: 2px solid #aaa;
+ color: #aaa;
+ border-radius: 6px;
+ margin-left: .5em;
+ margin-right: .5em;
+}
+
+.confirm-button:hover{
+ border: 2px solid white;
+ color: white;
+}
+
+.confirm-button:active{
+ background-color: black;
+}
+