box-drawing example

2 files changed, 62 insertions, 0 deletions

diff --git a/assets/stylesheets/css.css b/assets/stylesheets/css.css
new file mode 100644
index 0000000..e536b4c
--- /dev/null
+++ b/assets/stylesheets/css.css
@@ -0,0 +1,32 @@
+* {
+  margin:0;
+  padding:0;
+  outline:0;
+  moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+}
+.mx-scene {
+  z-index: 1;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  -moz-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  cursor:pointer;
+}
+.mx-object3d.image, .mx-object3d canvas,
+.mx-object3d.backface-hidden {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility:    hidden;
+  -ms-backface-visibility:     hidden;
+}
+.mx-object3d.backface-visible, .mx-object3d.backface-visible canvas{
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility:    visible;
+  -ms-backface-visibility:     visible;
+}
+
diff --git a/assets/stylesheets/map.css b/assets/stylesheets/map.css
new file mode 100644
index 0000000..2968f34
--- /dev/null
+++ b/assets/stylesheets/map.css
@@ -0,0 +1,30 @@
+#map {
+  z-index: 2;
+  display: none;
+  position: fixed;
+  bottom: 100px;
+  left: 50px;
+  width: 20%;
+  height: 50%;
+  background: white;
+  box-shadow: 0 10px 15px rgba(0,0,0,0.5);
+}
+#map .el {
+}
+#map canvas {
+  display: block;
+}
+#map .hud {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  background: rgba(255,255,255,0.8);
+  color: #333;
+}
+#map textarea {
+  width: 100%;
+  height: 75px;
+  border: 0;
+  border-top: 1px dashed #bbf;
+  box-shadow: 0 0 15px rgba(80,80,80,0.8);
+}