diff options
author | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-12-13 21:39:29 -0500 |
---|---|---|
committer | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-12-13 21:39:29 -0500 |
commit | 8b8b0d7d05aab3f5b7f9c221987991aac7aa45fa (patch) | |
tree | 09e38c8bdd30f4f9691ff9ddfa41dfd29a66508e /jarmon-style/style.scss | |
parent | 7f8d8d1a5d8a9b1365108bf72cb40286bd5cac4c (diff) |
Add jarmon graphing for Proton.
Diffstat (limited to 'jarmon-style/style.scss')
-rw-r--r-- | jarmon-style/style.scss | 120 |
1 files changed, 120 insertions, 0 deletions
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; + } + } + } + } + } +} |