fixed code block colors for notes and warnings, fixed code tabs inside of tabbed content
Scott Anderson
parent
35e221c9f5
commit
abe73b6cf5
|
|
@ -7,7 +7,7 @@ $("h2,h3,h4,h5,h6").each(function() {
|
|||
|
||||
///////////////////////////////// Smooth Scroll /////////////////////////////////
|
||||
|
||||
$('.article a[href^="#"]:not(.tabs p a)').on('click',function (e) {
|
||||
$('.article a[href^="#"]:not(.tabs p a, .code-tabs p a)').on('click',function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var target = this.hash;
|
||||
|
|
@ -30,10 +30,7 @@ $(".children-toggle").click(function(e) {
|
|||
|
||||
//////////////////////////////// Tabbed Content ////////////////////////////////
|
||||
|
||||
$(function() {
|
||||
const container = '.tabs-wrapper'
|
||||
const tab = '.tabs p a';
|
||||
const content = '.tab-content';
|
||||
function tabbedContent(container, tab, content) {
|
||||
|
||||
// Add the active class to the first tab in each tab group,
|
||||
// in case it wasn't already set in the markup.
|
||||
|
|
@ -57,4 +54,7 @@ $(function() {
|
|||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
tabbedContent('.code-tabs-wrapper', '.code-tabs p a', '.code-tab-content');
|
||||
tabbedContent('.tabs-wrapper', '.tabs p a', '.tab-content');
|
||||
|
|
|
|||
|
|
@ -377,37 +377,39 @@
|
|||
|
||||
/////////////////////////////// Tabbed Content ///////////////////////////////
|
||||
|
||||
.tabs-wrapper{
|
||||
margin: 2rem 0 .5rem;
|
||||
.tabs-wrapper, .code-tabs-wrapper{
|
||||
margin: 2.5rem 0 .5rem;
|
||||
}
|
||||
.tabs p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tabs a {
|
||||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
font-size: 0.875rem;
|
||||
color: $article-tab-text;
|
||||
padding: .35rem .75rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
background-color: $article-tab-bg;
|
||||
transition: background-color .2s, color .2s;
|
||||
|
||||
&:hover {
|
||||
color: $article-tab-active-text;
|
||||
background: $article-tab-active-bg;
|
||||
.tabs, .code-tabs {
|
||||
p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&.is-active {
|
||||
color: $article-tab-active-text;
|
||||
background: $article-tab-active-bg;
|
||||
a {
|
||||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
font-size: 0.875rem;
|
||||
color: $article-tab-text;
|
||||
padding: .35rem .75rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
background-color: $article-tab-bg;
|
||||
transition: background-color .2s, color .2s;
|
||||
|
||||
&:hover {
|
||||
color: $article-tab-active-text;
|
||||
background: $article-tab-active-bg;
|
||||
}
|
||||
&.is-active {
|
||||
color: $article-tab-active-text;
|
||||
background: $article-tab-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 1.5rem 0;
|
||||
.tab-content, .code-tabs-content {
|
||||
margin: .75rem 0 3rem;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
|
|
@ -416,34 +418,35 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tab-content:not(:first-of-type) {
|
||||
.tab-content:not(:first-of-type),
|
||||
.code-tab-content:not(:first-of-type) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs-wrapper.code {
|
||||
.tabs {
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
display: inline-block;
|
||||
background: $article-tab-code-bg;
|
||||
color: $article-tab-code-text;
|
||||
&:hover {
|
||||
background: $article-tab-code-bg-hover;
|
||||
color: $article-tab-code-text-hover;
|
||||
}
|
||||
&.is-active {
|
||||
background-color: $article-code-bg;
|
||||
color: $article-tab-code-active-text;
|
||||
}
|
||||
}
|
||||
.code-tabs-wrapper {
|
||||
.code-tabs {
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
margin: 0;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
display: inline-block;
|
||||
background: $article-tab-code-bg;
|
||||
color: $article-tab-code-text;
|
||||
&:hover {
|
||||
background: $article-tab-code-bg-hover;
|
||||
color: $article-tab-code-text-hover;
|
||||
}
|
||||
&.is-active {
|
||||
background-color: $article-code-bg;
|
||||
color: $article-tab-code-active-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
.code-tab-content {
|
||||
padding: 0;
|
||||
pre {
|
||||
margin: 0 0 3rem;
|
||||
|
|
|
|||
|
|
@ -170,3 +170,53 @@ pre[class*="language-"] {
|
|||
.w /* Text.Whitespace */
|
||||
{ font-style: italic }
|
||||
}
|
||||
|
||||
.note {
|
||||
.highlight {
|
||||
color: $article-note-code;
|
||||
|
||||
.gh,.go,.na,.nt,.nv,.ow
|
||||
{ color: $article-note-code }
|
||||
.c,.ch,.cm,.cpf,.c1, .cs,.w
|
||||
{ color: $article-note-code-accent1; }
|
||||
.gi
|
||||
{ background-color: $article-note-code-accent1; }
|
||||
.k,.kc,.kd,.kn,.kp,.kr,.nn
|
||||
{ color: $article-note-code-accent2; }
|
||||
.bp,.cp,.dl,.gt,.gu,.kt,.nb,.nc,.no,.sa,.sb,.sc,.sd,.se,.sh,.sx,.sr,.s1,.s2
|
||||
{ color: $article-note-code-accent3 }
|
||||
.err,.fm,.gr,.gd,.nd,.ne,.nf,.nl,.si
|
||||
{ color: $article-note-code-accent4 }
|
||||
.m,.ni,.mb,.mf,.mh,.mi,.mo,.vc,.vg,.vi,.vm,.il
|
||||
{ color: $article-note-code-accent5 }
|
||||
.gp,.o
|
||||
{ color: $article-note-code-accent6 }
|
||||
.ss
|
||||
{ color: $article-note-code-accent7 }
|
||||
}
|
||||
}
|
||||
|
||||
.warn {
|
||||
.highlight {
|
||||
color: $article-warn-code;
|
||||
|
||||
.gh,.go,.na,.nt,.nv,.ow
|
||||
{ color: $article-warn-code }
|
||||
.c,.ch,.cm,.cpf,.c1, .cs,.w
|
||||
{ color: $article-warn-code-accent1; }
|
||||
.gi
|
||||
{ background-color: $article-warn-code-accent1; }
|
||||
.k,.kc,.kd,.kn,.kp,.kr,.nn
|
||||
{ color: $article-warn-code-accent2; }
|
||||
.bp,.cp,.dl,.gt,.gu,.kt,.nb,.nc,.no,.sa,.sb,.sc,.sd,.se,.sh,.sx,.sr,.s1,.s2
|
||||
{ color: $article-warn-code-accent3 }
|
||||
.err,.fm,.gr,.gd,.nd,.ne,.nf,.nl,.si
|
||||
{ color: $article-warn-code-accent4 }
|
||||
.m,.ni,.mb,.mf,.mh,.mi,.mo,.vc,.vg,.vi,.vm,.il
|
||||
{ color: $article-warn-code-accent5 }
|
||||
.gp,.o
|
||||
{ color: $article-warn-code-accent6 }
|
||||
.ss
|
||||
{ color: $article-warn-code-accent7 }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,20 +64,34 @@ $article-note-heading: $g20-white !default;
|
|||
$article-note-text: $gr-viridian !default;
|
||||
$article-note-link: $gr-rainforest !default;
|
||||
$article-note-link-hover: $g20-white !default;
|
||||
$article-note-code: #75d2f1 !default;
|
||||
$article-note-code-bg: #20272b !default;
|
||||
$article-note-table-header: $gr-viridian !default;
|
||||
$article-note-table-row-alt: #21272d !default;
|
||||
$article-note-code: #75d2f1 !default;
|
||||
$article-note-code-bg: #20272b !default;
|
||||
$article-note-code-accent1: #567375 !default;
|
||||
$article-note-code-accent2: $b-pool !default;
|
||||
$article-note-code-accent3: $gr-viridian !default;
|
||||
$article-note-code-accent4: $o-ruby !default;
|
||||
$article-note-code-accent5: #ff6db0 !default;
|
||||
$article-note-code-accent6: $b-pool !default;
|
||||
$article-note-code-accent7: #e90 !default;
|
||||
|
||||
$article-warn-base: $o-dreamsicle !default;
|
||||
$article-warn-heading: $g20-white !default;
|
||||
$article-warn-text: $o-dreamsicle !default;
|
||||
$article-warn-link: $o-tungsten !default;
|
||||
$article-warn-link-hover: $g20-white !default;
|
||||
$article-warn-code: #ec6e6e !default;
|
||||
$article-warn-code-bg: #292024 !default;
|
||||
$article-warn-table-header: $o-dreamsicle !default;
|
||||
$article-warn-table-row-alt: #2b252b !default;
|
||||
$article-warn-code: #ec6e6e !default;
|
||||
$article-warn-code-bg: #292024 !default;
|
||||
$article-warn-code-accent1: #844c4c !default;
|
||||
$article-warn-code-accent2: $b-pool !default;
|
||||
$article-warn-code-accent3: $gr-viridian !default;
|
||||
$article-warn-code-accent4: $o-ruby !default;
|
||||
$article-warn-code-accent5: #ffb4fb !default;
|
||||
$article-warn-code-accent6: $b-pool !default;
|
||||
$article-warn-code-accent7: #e90 !default;
|
||||
|
||||
$article-enterprise-base: $p-star !default;
|
||||
$article-enterprise-text: $p-potassium !default;
|
||||
|
|
|
|||
|
|
@ -63,20 +63,34 @@ $article-note-heading: $gr-emerald;
|
|||
$article-note-text: $gr-emerald;
|
||||
$article-note-link: rgba($gr-emerald, .75);
|
||||
$article-note-link-hover: $b-pool;
|
||||
$article-note-code: #147572;
|
||||
$article-note-code-bg: #d6f7ec;
|
||||
$article-note-table-header: $gr-viridian;
|
||||
$article-note-table-row-alt: #d6f5e9;
|
||||
$article-note-code: #0A6f75;
|
||||
$article-note-code-bg: #d6f7ec;
|
||||
$article-note-code-accent1: #6abba0;
|
||||
$article-note-code-accent2: #0084d6;
|
||||
$article-note-code-accent3: #5d52d6;
|
||||
$article-note-code-accent4: $o-ruby;
|
||||
$article-note-code-accent5: #e24bbb;
|
||||
$article-note-code-accent6: #0084d6;
|
||||
$article-note-code-accent7: #e90;
|
||||
|
||||
$article-warn-base: $o-dreamsicle;
|
||||
$article-warn-heading: $o-fire;
|
||||
$article-warn-text: $o-curacao;
|
||||
$article-warn-link: rgba($o-curacao, .75);
|
||||
$article-warn-link-hover: $b-sapphire;
|
||||
$article-warn-code: #f52f75;
|
||||
$article-warn-code-bg: #ffebeb;
|
||||
$article-warn-table-header: $o-dreamsicle;
|
||||
$article-warn-table-row-alt: #ffe6df;
|
||||
$article-warn-code: #d0154e;
|
||||
$article-warn-code-bg: #ffebeb;
|
||||
$article-warn-code-accent1: #fd99b8;
|
||||
$article-warn-code-accent2: #357ae8;
|
||||
$article-warn-code-accent3: #6c59cc;
|
||||
$article-warn-code-accent4: $o-ruby;
|
||||
$article-warn-code-accent5: #6a0a6f;
|
||||
$article-warn-code-accent6: #357ae8;
|
||||
$article-warn-code-accent7: #e90;
|
||||
|
||||
$article-enterprise-base: $p-comet;
|
||||
$article-enterprise-text: $p-star;
|
||||
|
|
|
|||
|
|
@ -393,7 +393,38 @@ cpu = from(bucket:"telegraf/autogen")
|
|||
{{% /tabs %}}
|
||||
|
||||
{{% tab-content %}}
|
||||
This is tab 1.1 content.
|
||||
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
|
||||
|
||||
## h2 This is a header2
|
||||
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
|
||||
|
||||
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
|
||||
|
||||
{{< code-tabs-wrapper >}}
|
||||
{{% code-tabs %}}
|
||||
[Flux](#)
|
||||
[InfluxQL](#)
|
||||
{{% /code-tabs %}}
|
||||
|
||||
{{% code-tab-content %}}
|
||||
```js
|
||||
data = from(bucket: "telegraf/autogen")
|
||||
|> range(start: -15m)
|
||||
|> filter(fn: (r) =>
|
||||
r._measurement == "mem" AND
|
||||
r._field == "used_percent"
|
||||
)
|
||||
```
|
||||
{{% /code-tab-content %}}
|
||||
{{% code-tab-content %}}
|
||||
```sql
|
||||
SELECT "used_percent"
|
||||
FROM "telegraf"."autogen"."mem"
|
||||
WHERE time > now() - 15m
|
||||
```
|
||||
{{% /code-tab-content %}}
|
||||
{{< /code-tabs-wrapper >}}
|
||||
|
||||
{{% /tab-content %}}
|
||||
|
||||
{{% tab-content %}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
{{ $enterpriseLink := "#"}}
|
||||
{{ if ( $.Params.enterprise_all ) }}
|
||||
<div id="enterprise-msg">
|
||||
<p>
|
||||
The features and functionality discussed on this page are unique to the Enterprise edition of InfluxDB.
|
||||
<a href="#">Learn more about InfluxDB Enterprise</a>.
|
||||
<a href="{{ $enterpriseLink }}" target="_blank">Learn more about InfluxDB Enterprise</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{ else if ( $.Params.enterprise_some ) }}
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
<div>
|
||||
<p>
|
||||
This page includes features and functionality unique to the Enterprise edition of InfluxDB.
|
||||
<a href="#">Learn more about InfluxDB Enterprise</a>.
|
||||
<a href="{{ $enterpriseLink }}" target="_blank">Learn more about InfluxDB Enterprise</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<section class="tab-content">
|
||||
<section class="code-tab-content">
|
||||
{{ .Inner }}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="tabs-wrapper code">
|
||||
<div class="code-tabs-wrapper">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="tabs">
|
||||
<div class="code-tabs">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue