summaryrefslogtreecommitdiff
path: root/jarmon-style
diff options
context:
space:
mode:
authorLuke Shumaker <lukeshu@sbcglobal.net>2016-12-13 21:39:29 -0500
committerLuke Shumaker <lukeshu@sbcglobal.net>2016-12-13 21:39:29 -0500
commit8b8b0d7d05aab3f5b7f9c221987991aac7aa45fa (patch)
tree09e38c8bdd30f4f9691ff9ddfa41dfd29a66508e /jarmon-style
parent7f8d8d1a5d8a9b1365108bf72cb40286bd5cac4c (diff)
Add jarmon graphing for Proton.
Diffstat (limited to 'jarmon-style')
-rw-r--r--jarmon-style/jquerytools.tabs.tabs-no-images.scss69
l---------jarmon-style/loading.gif1
l---------jarmon-style/next.gif1
l---------jarmon-style/prev.gif1
-rw-r--r--jarmon-style/style.scss120
5 files changed, 192 insertions, 0 deletions
diff --git a/jarmon-style/jquerytools.tabs.tabs-no-images.scss b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
new file mode 100644
index 0000000..d97f579
--- /dev/null
+++ b/jarmon-style/jquerytools.tabs.tabs-no-images.scss
@@ -0,0 +1,69 @@
+/* Skin for jQuery Tools tabs.
+ *
+ * Based on <https://github.com/jquerytools/jquerytools.github.com/blob/master/media/css/tabs-no-images.css>.
+ *
+ * Documentation on tabs: <http://jquerytools.github.io/documentation/tabs/index.html>
+ */
+
+$tabs-tab-height: 15px;
+$tabs-tab-vpad: 2px;
+$tabs-tab-hpad: 10px;
+$tabs-border-width: 1px;
+$tabs-border-style: solid #666;
+$tabs-background-primary: #ddd;
+$tabs-background-secondary: #efefef;
+
+/* root element for tab bar */
+ul.css-tabs {
+ margin: 0;
+ padding: 0;
+ height: $tabs-tab-height;
+ border-bottom: $tabs-border-width $tabs-border-style;
+
+ /* single tab */
+ li {
+ float: left;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+
+ /* link inside the tab */
+ a {
+ display:block;
+ height: $tabs-tab-height; /* $tabs-tab-height - 2*($tabs-tab-vpad+$tabs-border-width) */
+ padding: $tabs-tab-vpad $tabs-tab-hpad;
+ border: $tabs-border-width $tabs-border-style;
+ border-bottom: 0;
+
+ margin-right: 2px;
+ border-radius: 4px 4px 0 0;
+ text-decoration: none;
+
+ background: $tabs-background-secondary;
+ color: #777;
+
+ &:hover {
+ background-color: #F7F7F7;
+ color: #333;
+ }
+
+ /* selected tab */
+ &.current {
+ background: $tabs-background-primary;
+ border-bottom: $tabs-border-width solid $tabs-background-primary;
+ color: #000;
+ cursor:default;
+ }
+ }
+ }
+}
+
+/* tab pane */
+.css-panes > div {
+ display: none;
+ border: $tabs-border-width $tabs-border-style;
+ border-top: 0;
+ background: $tabs-background-primary;
+
+ padding: 15px 20px;
+}
diff --git a/jarmon-style/loading.gif b/jarmon-style/loading.gif
new file mode 120000
index 0000000..03b9781
--- /dev/null
+++ b/jarmon-style/loading.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/loading.gif \ No newline at end of file
diff --git a/jarmon-style/next.gif b/jarmon-style/next.gif
new file mode 120000
index 0000000..16a6d9d
--- /dev/null
+++ b/jarmon-style/next.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/next.gif \ No newline at end of file
diff --git a/jarmon-style/prev.gif b/jarmon-style/prev.gif
new file mode 120000
index 0000000..72199f2
--- /dev/null
+++ b/jarmon-style/prev.gif
@@ -0,0 +1 @@
+../../graph/jarmon-git/docs/examples/assets/icons/prev.gif \ No newline at end of file
diff --git a/jarmon-style/style.scss b/jarmon-style/style.scss
new file mode 100644
index 0000000..6e12541
--- /dev/null
+++ b/jarmon-style/style.scss
@@ -0,0 +1,120 @@
+.jarmon-proton {
+ width: 50%;
+ border: solid 1px black;
+ padding: -1px;
+ border-radius: 4px;
+
+ .chartRangeControl {
+ .range-inputs {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ & > * {
+ width: 20%;
+ margin: 1px;
+ padding: 0;
+ border: solid 1px #666;
+ border-radius: 2px;
+ &[type="button"] {
+ width: auto;
+ }
+ &[type="datetime-local"] {
+ width: 25%;
+ }
+ }
+ }
+ .range-preview {
+ display: none;
+ height: 32px;
+ width: 100%;
+ }
+ }
+
+ .css-panes > div {
+ padding: 0;
+ padding-left: 15px;
+ }
+
+ h2 {
+ margin: 0;
+ font-size: 100%;
+ text-align: center;
+ }
+
+ .tabbed-chart-interface {
+ .css-panes {
+ height: 550px;
+ & > div {
+ height: 100%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ }
+ }
+ .chart-container {
+ &.loading .title {
+ background-repeat: no-repeat;
+ background-position: 0 50%;
+ background-image: url(loading.gif);
+ }
+
+ .chart {
+ height: 125px;
+ width: 100%;
+ margin: 0 auto 0 auto;
+ clear: both;
+
+ .tickLabel {
+ overflow:hidden;
+ }
+
+ .yaxisUnitLabel {
+ /* Y */
+ position: absolute;
+ top: 50%;
+ /* In this translateY, the 75% is: 50% for the `top:50%` overshooting
+ * by our `height/2`; the additional 25% accounts
+ * for 1 line-height being chopped off the bottom
+ * of the graph for the x-axis labels. */
+ transform: translateY(-75%);
+
+ /* X */
+ width: 100px;
+ margin-left: -100px;
+ text-align: right;
+
+ /* styling */
+ padding: 2px;
+
+ /* rotate */
+ transform: rotate(-90deg);
+ width: 0;
+ margin-left: -10px;
+ }
+ }
+
+ .graph-legend {
+ width: 100%;
+ padding: 2px 0;
+ margin: 2px auto 0;
+ background-color: #f7f7f7;
+
+ .legendItem {
+ float: left;
+ cursor: pointer;
+ margin-right: 20px;
+ margin-top: 5px;
+ margin-left: 5px;
+
+ .legendColorBox {
+ float: left;
+ margin-right: 5px;
+ }
+
+ &.disabled {
+ text-decoration: line-through;
+ }
+ }
+ }
+ }
+ }
+}