diff options
Diffstat (limited to 'public-src/jarmon-style')
| -rw-r--r-- | public-src/jarmon-style/jquerytools.tabs.tabs-no-images.scss | 69 | ||||
| l--------- | public-src/jarmon-style/loading.gif | 1 | ||||
| l--------- | public-src/jarmon-style/next.gif | 1 | ||||
| l--------- | public-src/jarmon-style/prev.gif | 1 | ||||
| -rw-r--r-- | public-src/jarmon-style/style.scss | 119 |
5 files changed, 191 insertions, 0 deletions
diff --git a/public-src/jarmon-style/jquerytools.tabs.tabs-no-images.scss b/public-src/jarmon-style/jquerytools.tabs.tabs-no-images.scss new file mode 100644 index 0000000..d97f579 --- /dev/null +++ b/public-src/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/public-src/jarmon-style/loading.gif b/public-src/jarmon-style/loading.gif new file mode 120000 index 0000000..03b9781 --- /dev/null +++ b/public-src/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/public-src/jarmon-style/next.gif b/public-src/jarmon-style/next.gif new file mode 120000 index 0000000..16a6d9d --- /dev/null +++ b/public-src/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/public-src/jarmon-style/prev.gif b/public-src/jarmon-style/prev.gif new file mode 120000 index 0000000..72199f2 --- /dev/null +++ b/public-src/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/public-src/jarmon-style/style.scss b/public-src/jarmon-style/style.scss new file mode 100644 index 0000000..5641550 --- /dev/null +++ b/public-src/jarmon-style/style.scss @@ -0,0 +1,119 @@ +.jarmon { + border: solid 1px black; + 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 { + height: 42px; + 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, /* flot 0.7 */ + .tick-label /* flot 0.8 */ + { + 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; + } + } + } + } + } +} |
