summaryrefslogtreecommitdiffstats
path: root/CAN-binder/low-can-demo/app/Frontend/styles
diff options
context:
space:
mode:
Diffstat (limited to 'CAN-binder/low-can-demo/app/Frontend/styles')
-rw-r--r--CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss56
-rw-r--r--CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss187
2 files changed, 243 insertions, 0 deletions
diff --git a/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss b/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss
new file mode 100644
index 00000000..e72d1def
--- /dev/null
+++ b/CAN-binder/low-can-demo/app/Frontend/styles/bootstrap.scss
@@ -0,0 +1,56 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
diff --git a/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss b/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss
new file mode 100644
index 00000000..d7e52130
--- /dev/null
+++ b/CAN-binder/low-can-demo/app/Frontend/styles/low-can-demo.scss
@@ -0,0 +1,187 @@
+html,body {
+ padding:0;
+ margin: 0 auto;
+ width:100%;
+ height:100%;
+ min-height:100%;
+ color: black;
+ background: #FFF;
+}
+
+/* http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo */
+.navbar-brand {
+ padding: 0px;
+}
+.navbar-brand>img {
+ height: 100%;
+ padding: 5px;
+ width: auto;
+}
+.navbar-right {
+ margin-right: 0;
+}
+
+/* used in navbar to show/hide items depending on connection status */
+.not-connected .if-connecting { display: none; }
+.not-connected .if-connected { display: none; }
+.not-connected .if-started { display: none; }
+.connecting .if-not-connected { display: none; }
+.connecting .if-connected { display: none; }
+.connecting .if-started { display: none; }
+.connected .if-not-connected { display: none; }
+.connected .if-connecting { display: none; }
+.connected .if-started { display: none; }
+.started .if-not-connected { display: none; }
+.started .if-connecting { display: none; }
+.started .if-connected { display: none; }
+
+.content{
+ position: absolute;
+ left:0;
+ right:0;
+ bottom:0;
+ top: 50px;
+ padding:0;
+ overflow: hidden;
+}
+
+.quad {
+ position: relative;
+ overflow: hidden;
+ width:100%;
+ height:50%;
+ padding:0;
+ margin: 0;
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ border: 4px ridge silver;
+ border-radius: 15px;
+ text-align: left;
+}
+
+.center {
+ display: table-cell;
+ width:100%;
+ height:100%;
+ vertical-align: middle;
+}
+
+#quad1 { border-bottom-right-radius: 0;}
+#quad2 { border-bottom-left-radius: 0; }
+#quad3 { border-top-right-radius: 0; overflow: auto; }
+#quad4 { border-top-left-radius: 0; }
+
+/* in quad 1 */
+#view1,#view2 {
+ position: relative;
+ width: auto !important;
+ height: auto !important;
+ min-width: 100%;
+ min-height: 100%;
+ display: block;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ -webkit-transform: translate(-50%,-50%);
+}
+
+.number { text-align: center; vertical-align: middle; font: italic bold 12px monospace; }
+
+/*
+#espan { position: absolute; left: 1em; bottom: 1em; }
+#espeed { position: absolute; top: 30px; width: 100px; color: green; font-size: 28px; }
+
+#vspan { position: absolute; right: 1em; bottom: 1em; }
+#vspeed { position: absolute; top: 16px; width: 100px; color: cyan; font-size: 42px; }
+*/
+
+#cluster {
+ position: absolute;
+ bottom:0;
+ left:0;
+ right:0;
+ background: rgba(50,50,50,.4);
+ height: 43%;
+ border-top: 2px outset silver;
+ border-top-left-radius: 50%;
+ border-top-right-radius: 50%;
+}
+
+#torqueGauge { position: absolute; bottom: -2%; left: 1%; width: 14%; }
+#rpmGauge { position: absolute; bottom: -4%; left: 16%; width: 21%; }
+#speedGauge { position: absolute; bottom: -3%; left: 38%; width: 24%; }
+#MAFGauge { position: absolute; bottom: -4%; right: 16%; width: 21%; }
+#IATempGauge { position: absolute; bottom: -2%; right: 1%; width: 14%; }
+
+/* in quad 2 */
+#mapstreet {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+#car {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ z-index: 2000;
+
+}
+
+#gaspan { position: absolute; bottom:0; left:0; right:0; background: rgba(200,200,200,.3); padding: 1em; z-index: 2000;}
+
+#gas { position: relative; float: right; width: 69px; height: 92px; }
+#gas div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; }
+
+#copan { overflow: hidden; min-height: 50px; position: relative; height: 92px;}
+#copan div {
+ display:inline;
+ position: absolute;
+ bottom: 0;
+ width: 10%;
+ height: 0%;
+ font-size: 10px;
+ color: black;
+ background: yellow;
+ border: 1px solid grey;
+ padding: 0;
+}
+#copan div p {
+ text-align: center;
+ position: absolute;
+ bottom: 2px;
+ margin: 0;
+ width: 100%;
+}
+
+#con1 { left: 0%; }
+#con2 { left: 11%; }
+#con3 { left: 22%; }
+#con4 { left: 33%; }
+#con5 { left: 44%; }
+#con6 { left: 55%; }
+#con7 { left: 66%; }
+#con8 { left: 77%; }
+#con9 { left: 88%; }
+
+#gpblack { background: url(/images/gas-pump-black.png); }
+#gpgreen { background: url(/images/gas-pump-green.png); }
+#gpred { background: url(/images/gas-pump-red.png); visibility: hidden; }
+
+/* quad 3 */
+#xcdata {
+ text-align: left;
+}
+
+.leaflet-control-layers-toggle {
+ background-image: url(/images/layers.png);
+}
+
+/* quad 4 */
+#mapsat {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+