restructured article css files, fixed cloud-msg styles, resolves #224
Scott Anderson
parent
7505550ad3
commit
776dd8c251
|
|
@ -93,623 +93,25 @@
|
|||
margin: 1.85rem 0 1.75rem;
|
||||
}
|
||||
|
||||
//////////////////////////////////// Lists ////////////////////////////////////
|
||||
|
||||
ol, ul {
|
||||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
li:before{
|
||||
content: "" !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
counter-reset: item;
|
||||
li {
|
||||
position: relative;
|
||||
counter-increment: item;
|
||||
&:before {
|
||||
content: counter(item) ". ";
|
||||
position: absolute;
|
||||
left: -1.6em;
|
||||
color: $article-bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul {
|
||||
counter-reset: item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ol,
|
||||
& > ul {
|
||||
margin: 1rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .25rem 0;
|
||||
&:not(:last-child) {
|
||||
> p:only-child { margin-bottom: 0; }
|
||||
}
|
||||
p + ul,
|
||||
p + ol {
|
||||
margin: -.9rem 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////// Code ////////////////////////////////////
|
||||
|
||||
code,pre {
|
||||
background: $article-code-bg;
|
||||
font-family: $roboto-mono;
|
||||
color: $article-code;
|
||||
}
|
||||
|
||||
p,li,table,h2,h3,h4,h5,h6 {
|
||||
code {
|
||||
padding: .15rem .45rem .25rem;
|
||||
border-radius: $radius;
|
||||
color: $article-code;
|
||||
white-space: nowrap;
|
||||
font-size: .95rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
code {
|
||||
font-weight: normal;
|
||||
transition: color .2s;
|
||||
position: relative;
|
||||
color: $article-code-link;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 .4rem .4rem 0;
|
||||
border-color: transparent rgba($article-code-link, .35) transparent transparent;
|
||||
transition: border .2s;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
code {
|
||||
color: $article-code-link-hover;
|
||||
&:after {
|
||||
border-color: transparent $article-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "article/blocks",
|
||||
"article/buttons",
|
||||
"article/children",
|
||||
"article/code",
|
||||
"article/cloud",
|
||||
"article/enterprise",
|
||||
"article/feedback",
|
||||
"article/lists",
|
||||
"article/note",
|
||||
"article/pagination-btns",
|
||||
"article/scrollbars",
|
||||
"article/tabbed-content",
|
||||
"article/tables",
|
||||
"article/tags",
|
||||
"article/truncate",
|
||||
"article/warn";
|
||||
|
||||
|
||||
pre {
|
||||
margin: 2rem 0 2.25rem;
|
||||
padding: 1.75rem 1.75rem 1.25rem;
|
||||
border-radius: $radius;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
code {
|
||||
padding: 0;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////// Tables ////////////////////////////////////
|
||||
|
||||
table {
|
||||
display: inline-block;
|
||||
margin: 1rem 0 3rem;
|
||||
border-spacing: 0;
|
||||
color: $article-text;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
box-shadow: 1px 3px 10px $article-shadow;
|
||||
border-radius: ($radius * 1.5);
|
||||
|
||||
th, td {
|
||||
padding: .85rem 1.25rem;
|
||||
}
|
||||
thead {
|
||||
background: linear-gradient(to right, $article-table-header-left, $article-table-header-right);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $g20-white;
|
||||
&:first-child {
|
||||
border-radius: ($radius * 1.5) 0 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 ($radius * 1.5) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: .95rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
tr{
|
||||
&:nth-child(even) {
|
||||
background: $article-table-row-alt;
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
&:first-child { border-radius: 0 0 0 ($radius * 1.5); }
|
||||
&:last-child { border-radius: 0 0 ($radius * 1.5) 0; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////// Landing Page Article Links /////////////////////////
|
||||
|
||||
.children-links, .list-links {
|
||||
h2,h3,h4 {
|
||||
margin-top: -.5rem;
|
||||
|
||||
a a:after {
|
||||
content: "\e919";
|
||||
font-family: "icomoon";
|
||||
color: rgba($article-heading, .35);
|
||||
vertical-align: bottom;
|
||||
transition: color .2s;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
a:hover {
|
||||
&:after { color: $article-link; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
////////////////// Blockquotes, Notes, Warnings, & Messages //////////////////
|
||||
|
||||
blockquote,
|
||||
.feedback,
|
||||
.note,
|
||||
.warn,
|
||||
.enterprise-msg,
|
||||
.cloud-msg {
|
||||
padding: 1.65rem 2rem .1rem 2rem;
|
||||
margin: 1rem 0 2rem;
|
||||
border-width: 0 0 0 4px;
|
||||
border-style: solid;
|
||||
border-radius: 0 $radius $radius 0;
|
||||
font-size: .95rem;
|
||||
|
||||
ul,ol {
|
||||
&:last-child { margin-bottom: 1.85rem; }
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: rgba($article-text, .25);
|
||||
p, li {
|
||||
font-size: 1.15rem;
|
||||
font-style: italic;
|
||||
color: rgba($article-text, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
border-color: $article-note-base;
|
||||
background: rgba($article-note-base, .08);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-note-heading;
|
||||
}
|
||||
p, li {
|
||||
color: $article-note-text;
|
||||
}
|
||||
a {
|
||||
color: $article-note-link;
|
||||
code:after {
|
||||
border-color: transparent rgba($article-note-code, .35) transparent transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $article-note-link-hover;
|
||||
code:after {
|
||||
border-color: transparent $article-note-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
color: $article-note-text;
|
||||
}
|
||||
code, pre{
|
||||
color: $article-note-code;
|
||||
background: $article-note-code-bg;
|
||||
}
|
||||
img {
|
||||
box-shadow: 1px 3px 10px $article-note-shadow;
|
||||
}
|
||||
table{
|
||||
color: $article-note-text;
|
||||
box-shadow: 1px 3px 10px $article-note-shadow;
|
||||
thead{
|
||||
background: $article-note-table-header;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: $article-note-table-row-alt;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-color: rgba($article-note-text, .25);
|
||||
p { color: rgba($article-note-text, .6); }
|
||||
}
|
||||
}
|
||||
|
||||
.warn {
|
||||
border-color: $article-warn-base;
|
||||
background: rgba($article-warn-base, .08);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-warn-heading;
|
||||
}
|
||||
p, li {
|
||||
color: $article-warn-text;
|
||||
}
|
||||
a {
|
||||
color: $article-warn-link;
|
||||
code:after {
|
||||
border-color: transparent rgba($article-warn-code, .35) transparent transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $article-warn-link-hover;
|
||||
code:after {
|
||||
border-color: transparent $article-warn-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
color: $article-warn-text;
|
||||
}
|
||||
code, pre{
|
||||
color: $article-warn-code;
|
||||
background: $article-warn-code-bg;
|
||||
}
|
||||
img {
|
||||
box-shadow: 1px 3px 10px $article-warn-shadow;
|
||||
}
|
||||
table{
|
||||
color: $article-warn-text;
|
||||
box-shadow: 1px 3px 10px $article-warn-shadow;
|
||||
thead{
|
||||
background: $article-warn-table-header;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: $article-warn-table-row-alt;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-color: rgba($article-warn-text, .25);
|
||||
p { color: rgba($article-warn-text, .6); }
|
||||
}
|
||||
}
|
||||
|
||||
.feedback {
|
||||
border-color: rgba($article-note-base, .75);
|
||||
background: rgba($article-text, .05);
|
||||
}
|
||||
|
||||
///////////////////////////////// Enterprise /////////////////////////////////
|
||||
|
||||
.enterprise, .cloud {
|
||||
position: relative;
|
||||
padding: 0 0 .01rem 2rem;
|
||||
margin-left: -2rem;
|
||||
|
||||
&-msg {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
div:first-child { margin-right: 1.25rem; }
|
||||
}
|
||||
&-flag {
|
||||
padding: .2rem .4rem;
|
||||
font-size: .75rem;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: $g20-white;
|
||||
border-radius: $radius;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise {
|
||||
border-left: 2px solid $article-enterprise-base;
|
||||
&-msg {
|
||||
border-color: $article-enterprise-base;
|
||||
background: rgba($article-enterprise-base, .15);
|
||||
p { color: $article-enterprise-text; }
|
||||
a {
|
||||
color: $article-enterprise-link;
|
||||
&:hover { color: $article-enterprise-link-hover; }
|
||||
}
|
||||
}
|
||||
&-flag {
|
||||
background: $article-enterprise-base;
|
||||
&:before {
|
||||
content: "E";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cloud {
|
||||
border-left: 2px solid $article-cloud-base;
|
||||
&-msg {
|
||||
border-color: $article-cloud-base;
|
||||
background: rgba($article-cloud-base, .15);
|
||||
p { color: $article-cloud-text; }
|
||||
a {
|
||||
color: $article-cloud-link;
|
||||
&:hover { color: $article-cloud-link-hover; }
|
||||
}
|
||||
code, pre {
|
||||
color: $article-cloud-code;
|
||||
background: $article-cloud-code-bg;
|
||||
}
|
||||
}
|
||||
&-flag {
|
||||
background: $article-cloud-base;
|
||||
&:before {
|
||||
content: "C";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise, .cloud {
|
||||
.enterprise-flag, .cloud-flag {
|
||||
position: absolute;
|
||||
top: -.15rem;
|
||||
left: -.68rem;
|
||||
transform: scale(.8);
|
||||
transition: all .2s;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////// Tabbed Content ///////////////////////////////
|
||||
|
||||
.tabs-wrapper {
|
||||
margin: 2.5rem 0 .5rem;
|
||||
}
|
||||
|
||||
.code-tabs-wrapper {
|
||||
margin: 1.5rem 0 .5rem;
|
||||
}
|
||||
|
||||
.tabs, .code-tabs {
|
||||
p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
a {
|
||||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $medium;
|
||||
color: $article-tab-text;
|
||||
padding: .35rem .75rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: $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, .code-tabs-content {
|
||||
margin: .75rem 0 3rem;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content:not(:first-of-type),
|
||||
.code-tab-content:not(:first-of-type) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-tabs-wrapper {
|
||||
.code-tabs {
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
padding: .1rem .75rem;
|
||||
margin: 0;
|
||||
border-radius: $radius $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-tab-content {
|
||||
padding: 0;
|
||||
pre {
|
||||
margin: 0 0 3rem;
|
||||
border-radius: $radius 0 $radius $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////// Truncated Content Blocks ///////////////////////////
|
||||
|
||||
.truncate {
|
||||
position: relative;
|
||||
margin-bottom: 3.5rem;
|
||||
|
||||
.truncate-bottom {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
z-index: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a.truncate-toggle {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
color: $article-text;
|
||||
background: $article-bg;
|
||||
padding: .45rem;
|
||||
text-align: center;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
border-radius: $radius;
|
||||
transition: color .2s;
|
||||
&:before{
|
||||
content: "Show Less";
|
||||
}
|
||||
&:hover {
|
||||
color: $article-link;
|
||||
}
|
||||
}
|
||||
&.closed {
|
||||
min-height: 200px;
|
||||
max-height: 25vh;
|
||||
overflow: hidden;
|
||||
|
||||
.truncate-bottom {
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1));
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a.truncate-toggle {
|
||||
margin-top: 75px;
|
||||
&:before {
|
||||
content: "Show More";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////// Buttons //////////////////////////////////
|
||||
|
||||
a.btn {
|
||||
display: inline-block;
|
||||
margin: .5rem 0 1rem;
|
||||
padding: .5rem 1rem;
|
||||
background: $article-btn;
|
||||
color: $article-btn-text;
|
||||
border-radius: $radius;
|
||||
font-size: .95rem;
|
||||
|
||||
&:hover {
|
||||
background: $article-btn-hover;
|
||||
color: $article-btn-text-hover;
|
||||
}
|
||||
|
||||
&.download:before {
|
||||
content: "\e91c";
|
||||
font-family: "icomoon";
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//////////////////////////////// Scroll Bars /////////////////////////////////
|
||||
|
||||
pre { @include scrollbar($article-code-bg, $article-code-scrollbar); }
|
||||
table { @include scrollbar($article-table-row-alt, $article-code-scrollbar);}
|
||||
|
||||
.note {
|
||||
pre { @include scrollbar($article-note-code-bg, $article-note-code-scrollbar); }
|
||||
table { @include scrollbar($article-note-table-row-alt, $article-note-code-scrollbar); }
|
||||
}
|
||||
.warn {
|
||||
pre { @include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar); }
|
||||
table { @include scrollbar($article-warn-table-row-alt, $article-warn-code-scrollbar); }
|
||||
}
|
||||
|
||||
////////////////////////// Guides Pagination Buttons /////////////////////////
|
||||
|
||||
.page-nav-btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 3rem 0 1rem;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
max-width: 49%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
&.prev{
|
||||
margin: 0 auto 0 0;
|
||||
padding: .75rem 1.25rem .75rem .75rem;
|
||||
&:before {
|
||||
content: "\e90a";
|
||||
font-family: "icomoon";
|
||||
margin-right: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
margin: 0 0 0 auto;
|
||||
padding: .75rem .75rem .75rem 1.25rem;
|
||||
&:after {
|
||||
content: "\e90c";
|
||||
font-family: "icomoon";
|
||||
margin-left: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////////// Tags ////////////////////////////////////
|
||||
|
||||
.tags {
|
||||
border-top: 1px solid $article-hr;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
.tag {
|
||||
background: $body-bg;
|
||||
margin: .12rem 0;
|
||||
padding: .35rem .6rem;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
color: rgba($article-text, .65);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////// Miscellaneous ///////////////////////////////
|
||||
|
||||
|
|
@ -720,8 +122,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
background: $nav-border;
|
||||
}
|
||||
ul {
|
||||
margin-left: -.95em;
|
||||
margin-left: -.96em;
|
||||
li:before {
|
||||
top: .4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
width: 375px;
|
||||
margin: 1rem 0 2rem;
|
||||
padding: .85rem 0;
|
||||
font-family: $roboto;
|
||||
font-size: .9rem;
|
||||
border-radius: 5px;
|
||||
color: $g20-white;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
////////////////// Blockquotes, Notes, Warnings, & Messages //////////////////
|
||||
|
||||
blockquote,
|
||||
.block, {
|
||||
padding: 1.65rem 2rem .1rem 2rem;
|
||||
margin: 1rem 0 2rem;
|
||||
border-width: 0 0 0 4px;
|
||||
border-style: solid;
|
||||
border-radius: 0 $radius $radius 0;
|
||||
font-size: .95rem;
|
||||
|
||||
ul,ol {
|
||||
&:last-child { margin-bottom: 1.85rem; }
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: rgba($article-text, .25);
|
||||
p, li {
|
||||
font-size: 1.15rem;
|
||||
font-style: italic;
|
||||
color: rgba($article-text, .5);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/////////////////////////////////// Buttons //////////////////////////////////
|
||||
|
||||
a.btn {
|
||||
display: inline-block;
|
||||
margin: .5rem 0 1rem;
|
||||
padding: .5rem 1rem;
|
||||
background: $article-btn;
|
||||
color: $article-btn-text;
|
||||
border-radius: $radius;
|
||||
font-size: .95rem;
|
||||
|
||||
&:hover {
|
||||
background: $article-btn-hover;
|
||||
color: $article-btn-text-hover;
|
||||
}
|
||||
|
||||
&.download:before {
|
||||
content: "\e91c";
|
||||
font-family: "icomoon";
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/////////////////////////// Children Article Links ///////////////////////////
|
||||
|
||||
.children-links, .list-links {
|
||||
h2,h3,h4 {
|
||||
margin-top: -.5rem;
|
||||
|
||||
a a:after {
|
||||
content: "\e919";
|
||||
font-family: "icomoon";
|
||||
color: rgba($article-heading, .35);
|
||||
vertical-align: bottom;
|
||||
transition: color .2s;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
a:hover {
|
||||
&:after { color: $article-link; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
.cloud {
|
||||
position: relative;
|
||||
padding: 0 0 .01rem 2rem;
|
||||
margin-left: -2rem;
|
||||
border-left: 2px solid $article-cloud-base;
|
||||
|
||||
&-flag {
|
||||
padding: .2rem .4rem;
|
||||
font-size: .75rem;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: $g20-white;
|
||||
border-radius: $radius;
|
||||
vertical-align: text-bottom;
|
||||
background: $article-cloud-base;
|
||||
position: absolute;
|
||||
top: -.15rem;
|
||||
left: -.68rem;
|
||||
transform: scale(.8);
|
||||
transition: all .2s;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
color: $g20-white;
|
||||
}
|
||||
&:before {
|
||||
content: "C";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cloud-msg {
|
||||
border-color: $article-cloud-base;
|
||||
background: rgba($article-cloud-base, .12);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-cloud-heading;
|
||||
}
|
||||
p,li {
|
||||
color: $article-cloud-text;
|
||||
}
|
||||
a {
|
||||
color: $article-cloud-link;
|
||||
code:after {
|
||||
border-color: transparent rgba($article-cloud-code, .35) transparent transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $article-cloud-link-hover;
|
||||
code:after {
|
||||
border-color: transparent $article-cloud-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
color: $article-cloud-text;
|
||||
}
|
||||
code, pre{
|
||||
color: $article-cloud-code;
|
||||
background: $article-cloud-code-bg;
|
||||
}
|
||||
img {
|
||||
box-shadow: 1px 3px 10px $article-cloud-shadow;
|
||||
}
|
||||
table{
|
||||
color: $article-cloud-text;
|
||||
box-shadow: 1px 3px 10px $article-cloud-shadow;
|
||||
thead{
|
||||
background: $article-cloud-table-header;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: $article-cloud-table-row-alt;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-color: rgba($article-cloud-text, .25);
|
||||
p { color: rgba($article-cloud-text, .6); }
|
||||
}
|
||||
|
||||
&.flex {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
div:first-child {
|
||||
position: relative;
|
||||
margin: .25rem 2rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
//////////////////////////////////// Code ////////////////////////////////////
|
||||
|
||||
code,pre {
|
||||
background: $article-code-bg;
|
||||
font-family: $roboto-mono;
|
||||
color: $article-code;
|
||||
}
|
||||
|
||||
p,li,table,h2,h3,h4,h5,h6 {
|
||||
code {
|
||||
padding: .15rem .45rem .25rem;
|
||||
border-radius: $radius;
|
||||
color: $article-code;
|
||||
white-space: nowrap;
|
||||
font-size: .95rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
code {
|
||||
font-weight: normal;
|
||||
transition: color .2s;
|
||||
position: relative;
|
||||
color: $article-code-link;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 .4rem .4rem 0;
|
||||
border-color: transparent rgba($article-code-link, .35) transparent transparent;
|
||||
transition: border .2s;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
code {
|
||||
color: $article-code-link-hover;
|
||||
&:after {
|
||||
border-color: transparent $article-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
margin: 2rem 0 2.25rem;
|
||||
padding: 1.75rem 1.75rem 1.25rem;
|
||||
border-radius: $radius;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
code {
|
||||
padding: 0;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.enterprise {
|
||||
position: relative;
|
||||
padding: 0 0 .01rem 2rem;
|
||||
margin-left: -2rem;
|
||||
border-left: 2px solid $article-enterprise-base;
|
||||
&-flag {
|
||||
padding: .2rem .4rem;
|
||||
font-size: .75rem;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: $g20-white;
|
||||
border-radius: $radius;
|
||||
vertical-align: text-bottom;
|
||||
background: $article-enterprise-base;
|
||||
position: absolute;
|
||||
top: -.15rem;
|
||||
left: -.68rem;
|
||||
transform: scale(.8);
|
||||
transition: all .2s;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
color: $g20-white;
|
||||
}
|
||||
&:before {
|
||||
content: "E";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise-msg {
|
||||
border-color: $article-enterprise-base;
|
||||
background: rgba($article-enterprise-base, .15);
|
||||
p,li {
|
||||
color: $article-enterprise-text;
|
||||
}
|
||||
a {
|
||||
color: $article-enterprise-link;
|
||||
&:hover { color: $article-enterprise-link-hover; }
|
||||
}
|
||||
&.flex {
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
div:first-child {
|
||||
position: relative;
|
||||
margin: .25rem 2rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.feedback {
|
||||
border-color: rgba($article-note-base, .75);
|
||||
background: rgba($article-text, .05);
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
//////////////////////////////////// Lists ////////////////////////////////////
|
||||
|
||||
ol, ul {
|
||||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
li:before{
|
||||
content: "" !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
counter-reset: item;
|
||||
li {
|
||||
position: relative;
|
||||
counter-increment: item;
|
||||
&:before {
|
||||
content: counter(item) ". ";
|
||||
position: absolute;
|
||||
left: -1.6em;
|
||||
color: $article-bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
ul {
|
||||
counter-reset: item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ol,
|
||||
& > ul {
|
||||
margin: 1rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: .25rem 0;
|
||||
&:not(:last-child) {
|
||||
> p:only-child { margin-bottom: 0; }
|
||||
}
|
||||
p + ul,
|
||||
p + ol {
|
||||
margin: -.9rem 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.note {
|
||||
border-color: $article-note-base;
|
||||
background: rgba($article-note-base, .12);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-note-heading;
|
||||
}
|
||||
p, li {
|
||||
color: $article-note-text;
|
||||
}
|
||||
a {
|
||||
color: $article-note-link;
|
||||
code:after {
|
||||
border-color: transparent rgba($article-note-code, .35) transparent transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $article-note-link-hover;
|
||||
code:after {
|
||||
border-color: transparent $article-note-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
color: $article-note-text;
|
||||
}
|
||||
code, pre{
|
||||
color: $article-note-code;
|
||||
background: $article-note-code-bg;
|
||||
}
|
||||
img {
|
||||
box-shadow: 1px 3px 10px $article-note-shadow;
|
||||
}
|
||||
table{
|
||||
color: $article-note-text;
|
||||
box-shadow: 1px 3px 10px $article-note-shadow;
|
||||
thead{
|
||||
background: $article-note-table-header;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: $article-note-table-row-alt;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-color: rgba($article-note-text, .25);
|
||||
p { color: rgba($article-note-text, .6); }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
////////////////////////// Guides Pagination Buttons /////////////////////////
|
||||
|
||||
.page-nav-btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 3rem 0 1rem;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
max-width: 49%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
&.prev{
|
||||
margin: 0 auto 0 0;
|
||||
padding: .75rem 1.25rem .75rem .75rem;
|
||||
&:before {
|
||||
content: "\e90a";
|
||||
font-family: "icomoon";
|
||||
margin-right: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
margin: 0 0 0 auto;
|
||||
padding: .75rem .75rem .75rem 1.25rem;
|
||||
&:after {
|
||||
content: "\e90c";
|
||||
font-family: "icomoon";
|
||||
margin-left: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//////////////////////////////// Scroll Bars /////////////////////////////////
|
||||
|
||||
pre { @include scrollbar($article-code-bg, $article-code-scrollbar); }
|
||||
table { @include scrollbar($article-table-row-alt, $article-code-scrollbar);}
|
||||
|
||||
.note {
|
||||
pre { @include scrollbar($article-note-code-bg, $article-note-code-scrollbar); }
|
||||
table { @include scrollbar($article-note-table-row-alt, $article-note-code-scrollbar); }
|
||||
}
|
||||
.warn {
|
||||
pre { @include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar); }
|
||||
table { @include scrollbar($article-warn-table-row-alt, $article-warn-code-scrollbar); }
|
||||
}
|
||||
.cloud-msg {
|
||||
pre { @include scrollbar($article-cloud-code-bg, $article-cloud-code-scrollbar); }
|
||||
table { @include scrollbar($article-cloud-table-row-alt, $article-cloud-code-scrollbar); }
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/////////////////////////////// Tabbed Content ///////////////////////////////
|
||||
|
||||
.tabs-wrapper {
|
||||
margin: 2.5rem 0 .5rem;
|
||||
}
|
||||
|
||||
.code-tabs-wrapper {
|
||||
margin: 1.5rem 0 .5rem;
|
||||
}
|
||||
|
||||
.tabs, .code-tabs {
|
||||
p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
a {
|
||||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $medium;
|
||||
color: $article-tab-text;
|
||||
padding: .35rem .75rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: $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, .code-tabs-content {
|
||||
margin: .75rem 0 3rem;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content:not(:first-of-type),
|
||||
.code-tab-content:not(:first-of-type) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-tabs-wrapper {
|
||||
.code-tabs {
|
||||
p {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
padding: .1rem .75rem;
|
||||
margin: 0;
|
||||
border-radius: $radius $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-tab-content {
|
||||
padding: 0;
|
||||
pre {
|
||||
margin: 0 0 3rem;
|
||||
border-radius: $radius 0 $radius $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
//////////////////////////////////// Tables ////////////////////////////////////
|
||||
|
||||
table {
|
||||
display: inline-block;
|
||||
margin: 1rem 0 3rem;
|
||||
border-spacing: 0;
|
||||
color: $article-text;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
box-shadow: 1px 3px 10px $article-shadow;
|
||||
border-radius: ($radius * 1.5);
|
||||
|
||||
th, td {
|
||||
padding: .85rem 1.25rem;
|
||||
}
|
||||
thead {
|
||||
background: linear-gradient(to right, $article-table-header-left, $article-table-header-right);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $g20-white;
|
||||
&:first-child {
|
||||
border-radius: ($radius * 1.5) 0 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 ($radius * 1.5) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: .95rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
tr{
|
||||
&:nth-child(even) {
|
||||
background: $article-table-row-alt;
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
&:first-child { border-radius: 0 0 0 ($radius * 1.5); }
|
||||
&:last-child { border-radius: 0 0 ($radius * 1.5) 0; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//////////////////////////////////// Tags ////////////////////////////////////
|
||||
|
||||
.tags {
|
||||
border-top: 1px solid $article-hr;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
.tag {
|
||||
background: $body-bg;
|
||||
margin: .12rem 0;
|
||||
padding: .35rem .6rem;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
color: rgba($article-text, .75);
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/////////////////////////// Truncated Content Blocks ///////////////////////////
|
||||
|
||||
.truncate {
|
||||
position: relative;
|
||||
margin-bottom: 3.5rem;
|
||||
|
||||
.truncate-bottom {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
z-index: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a.truncate-toggle {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
color: $article-text;
|
||||
background: $article-bg;
|
||||
padding: .45rem;
|
||||
text-align: center;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
border-radius: $radius;
|
||||
transition: color .2s;
|
||||
&:before{
|
||||
content: "Show Less";
|
||||
}
|
||||
&:hover {
|
||||
color: $article-link;
|
||||
}
|
||||
}
|
||||
&.closed {
|
||||
min-height: 200px;
|
||||
max-height: 25vh;
|
||||
overflow: hidden;
|
||||
|
||||
.truncate-bottom {
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1));
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a.truncate-toggle {
|
||||
margin-top: 75px;
|
||||
&:before {
|
||||
content: "Show More";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.warn {
|
||||
border-color: $article-warn-base;
|
||||
background: rgba($article-warn-base, .08);
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-warn-heading;
|
||||
}
|
||||
p, li {
|
||||
color: $article-warn-text;
|
||||
}
|
||||
a {
|
||||
color: $article-warn-link;
|
||||
code:after {
|
||||
border-color: transparent rgba($article-warn-code, .35) transparent transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $article-warn-link-hover;
|
||||
code:after {
|
||||
border-color: transparent $article-warn-link-hover transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
color: $article-warn-text;
|
||||
}
|
||||
code, pre{
|
||||
color: $article-warn-code;
|
||||
background: $article-warn-code-bg;
|
||||
}
|
||||
img {
|
||||
box-shadow: 1px 3px 10px $article-warn-shadow;
|
||||
}
|
||||
table{
|
||||
color: $article-warn-text;
|
||||
box-shadow: 1px 3px 10px $article-warn-shadow;
|
||||
thead{
|
||||
background: $article-warn-table-header;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: $article-warn-table-row-alt;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
border-color: rgba($article-warn-text, .25);
|
||||
p { color: rgba($article-warn-text, .6); }
|
||||
}
|
||||
}
|
||||
|
|
@ -38,12 +38,10 @@ $article-heading: $g20-white;
|
|||
$article-heading-alt: $g19-ghost;
|
||||
$article-text: $np-mischka;
|
||||
$article-bold: $g18-cloud;
|
||||
$article-link: #2aa3ff;
|
||||
$article-link: $b-dodger;
|
||||
$article-link-hover: $g20-white;
|
||||
$article-hr: $wp-seance;
|
||||
$article-shadow: $np-deepnight;
|
||||
$article-note-shadow: #191a1b;
|
||||
$article-warn-shadow: #191a1b;
|
||||
|
||||
// Article Code
|
||||
$article-code: $cp-munchkin;
|
||||
|
|
@ -56,13 +54,13 @@ $article-code-accent5: #ff6db0;
|
|||
$article-code-accent6: $b-pool;
|
||||
$article-code-accent7: #e90;
|
||||
$article-code-select: $b-pool;
|
||||
$article-code-link: #2aa3ff;
|
||||
$article-code-link: $b-dodger;
|
||||
$article-code-link-hover: $g20-white;
|
||||
$article-code-scrollbar: $np-martinique;
|
||||
|
||||
// Article Tables
|
||||
$article-table-header-left: $p-planet;
|
||||
$article-table-header-right: $b-sapphire;
|
||||
$article-table-header-left: $wp-violet;
|
||||
$article-table-header-right: $b-curious;
|
||||
$article-table-row-alt: rgba($wp-jagger, .75);
|
||||
|
||||
// Article Notes, Warnings, & Messages
|
||||
|
|
@ -72,9 +70,10 @@ $article-note-text: $gr-viridian;
|
|||
$article-note-link: $gr-rainforest;
|
||||
$article-note-link-hover: $g20-white;
|
||||
$article-note-table-header: $gr-viridian;
|
||||
$article-note-table-row-alt: #21272d;
|
||||
$article-note-code: #75d2f1;
|
||||
$article-note-code-bg: #20272b;
|
||||
$article-note-table-row-alt: rgba($gr-viridian, .15);
|
||||
$article-note-shadow: $np-deepnight;
|
||||
$article-note-code: $cp-comet;
|
||||
$article-note-code-bg: $wp-telopea;
|
||||
$article-note-code-accent1: #567375;
|
||||
$article-note-code-accent2: $b-pool;
|
||||
$article-note-code-accent3: $gr-viridian;
|
||||
|
|
@ -82,17 +81,18 @@ $article-note-code-accent4: $o-ruby;
|
|||
$article-note-code-accent5: #ff6db0;
|
||||
$article-note-code-accent6: $b-pool;
|
||||
$article-note-code-accent7: #e90;
|
||||
$article-note-code-scrollbar: $gr-grass;
|
||||
$article-note-code-scrollbar: $cp-jakarta;
|
||||
|
||||
$article-warn-base: $o-dreamsicle;
|
||||
$article-warn-heading: $g20-white;
|
||||
$article-warn-text: $o-dreamsicle;
|
||||
$article-warn-link: $o-tungsten;
|
||||
$article-warn-link-hover: $g20-white;
|
||||
$article-warn-table-header: $o-dreamsicle;
|
||||
$article-warn-table-row-alt: #2b252b;
|
||||
$article-warn-table-header: rgba($o-dreamsicle, .9);
|
||||
$article-warn-table-row-alt: rgba($o-dreamsicle, .1);
|
||||
$article-warn-shadow: $np-deepnight;
|
||||
$article-warn-code: #ec6e6e;
|
||||
$article-warn-code-bg: #292024;
|
||||
$article-warn-code-bg: $wp-telopea;
|
||||
$article-warn-code-accent1: #844c4c;
|
||||
$article-warn-code-accent2: $b-pool;
|
||||
$article-warn-code-accent3: $gr-viridian;
|
||||
|
|
@ -100,34 +100,46 @@ $article-warn-code-accent4: $o-ruby;
|
|||
$article-warn-code-accent5: #ffb4fb;
|
||||
$article-warn-code-accent6: $b-pool;
|
||||
$article-warn-code-accent7: #e90;
|
||||
$article-warn-code-scrollbar: #5f3535;
|
||||
$article-warn-code-scrollbar: #561e4d;
|
||||
|
||||
$article-cloud-base: $b-pool;
|
||||
$article-cloud-heading: $g20-white;
|
||||
$article-cloud-text: $b-hawkeye;
|
||||
$article-cloud-link: $b-hawkeye;
|
||||
$article-cloud-link-hover: $g20-white;
|
||||
$article-cloud-table-header: $b-pool;
|
||||
$article-cloud-table-row-alt: rgba($b-pool, .15);
|
||||
$article-cloud-shadow: $np-deepnight;
|
||||
$article-cloud-code: $b-laser;
|
||||
$article-cloud-code-bg: $wp-telopea;
|
||||
$article-cloud-code-accent1: #567375;
|
||||
$article-cloud-code-accent2: $b-pool;
|
||||
$article-cloud-code-accent3: $gr-viridian;
|
||||
$article-cloud-code-accent4: $o-ruby;
|
||||
$article-cloud-code-accent5: #ff6db0;
|
||||
$article-cloud-code-accent6: $b-pool;
|
||||
$article-cloud-code-accent7: #e90;
|
||||
$article-cloud-code-scrollbar: $cp-jakarta;
|
||||
|
||||
$article-enterprise-base: $p-star;
|
||||
$article-enterprise-text: $p-potassium;
|
||||
$article-enterprise-link: $p-moonstone;
|
||||
$article-enterprise-link-hover: $g20-white;
|
||||
|
||||
$article-cloud-base: $b-pool;
|
||||
$article-cloud-text: $b-neutrino;
|
||||
$article-cloud-link: $b-snow;
|
||||
$article-cloud-link-hover: $g20-white;
|
||||
$article-cloud-code: $b-laser;
|
||||
$article-cloud-code-bg: $b-abyss;
|
||||
|
||||
// Article Tabs for tabbed content
|
||||
$article-tab-text: $g12-forge;
|
||||
$article-tab-bg: rgba($np-deepnight, .6);
|
||||
$article-tab-active-text: $g20-white;
|
||||
$article-tab-active-bg: $b-ocean;
|
||||
$article-tab-active-bg: $b-pool;
|
||||
|
||||
$article-tab-code-text: $g9-mountain;
|
||||
$article-tab-code-bg: rgba($np-deepnight, .4);
|
||||
$article-tab-code-bg: rgba($np-deepnight, .45);
|
||||
$article-tab-code-text-hover: $g20-white;
|
||||
$article-tab-code-bg-hover: $b-ocean;
|
||||
$article-tab-code-bg-hover: $b-pool;
|
||||
$article-tab-code-active-text: $g20-white;
|
||||
|
||||
// Article page buttons
|
||||
$article-btn: $b-ocean;
|
||||
$article-btn: $b-pool;
|
||||
$article-btn-text: $g20-white;
|
||||
$article-btn-hover: $b-pool;
|
||||
$article-btn-text-hover: $g20-white;
|
||||
|
|
|
|||
|
|
@ -43,8 +43,6 @@ $article-link: $b-ocean !default;
|
|||
$article-link-hover: $gr-viridian !default;
|
||||
$article-shadow: #c8cdd0 !default;
|
||||
$article-hr: $g15-platinum !default;
|
||||
$article-note-shadow: #8cb7ab !default;
|
||||
$article-warn-shadow: #b98a7d !default;
|
||||
|
||||
// Article Code
|
||||
$article-code: $p-star !default;
|
||||
|
|
@ -74,6 +72,7 @@ $article-note-link: rgba($gr-emerald, .75) !default;
|
|||
$article-note-link-hover: $b-pool !default;
|
||||
$article-note-table-header: $gr-viridian !default;
|
||||
$article-note-table-row-alt: #d6f5e9 !default;
|
||||
$article-note-shadow: #8cb7ab !default;
|
||||
$article-note-code: #0A6f75 !default;
|
||||
$article-note-code-bg: #d6f7ec !default;
|
||||
$article-note-code-accent1: #6abba0 !default;
|
||||
|
|
@ -92,6 +91,7 @@ $article-warn-link: rgba($o-curacao, .75) !default;
|
|||
$article-warn-link-hover: $b-sapphire !default;
|
||||
$article-warn-table-header: $o-dreamsicle !default;
|
||||
$article-warn-table-row-alt: #ffe6df !default;
|
||||
$article-warn-shadow: #b98a7d !default;
|
||||
$article-warn-code: #d0154e !default;
|
||||
$article-warn-code-bg: #ffebeb !default;
|
||||
$article-warn-code-accent1: #fd99b8 !default;
|
||||
|
|
@ -103,18 +103,30 @@ $article-warn-code-accent6: #357ae8 !default;
|
|||
$article-warn-code-accent7: #e90 !default;
|
||||
$article-warn-code-scrollbar: #FFB1B1 !default;
|
||||
|
||||
$article-cloud-base: $b-laser !default;
|
||||
$article-cloud-heading: $gr-emerald !default;
|
||||
$article-cloud-text: $b-ocean !default;
|
||||
$article-cloud-link: $b-ocean !default;
|
||||
$article-cloud-link-hover: $gr-canopy !default;
|
||||
$article-cloud-table-header: $gr-viridian !default;
|
||||
$article-cloud-table-row-alt: #d6f5e9 !default;
|
||||
$article-cloud-shadow: #b98a7d !default;
|
||||
$article-cloud-code: $b-sapphire !default;
|
||||
$article-cloud-code-bg: rgba($b-pool, .25) !default;
|
||||
$article-cloud-code-accent1: #6abba0 !default;
|
||||
$article-cloud-code-accent2: #0084d6 !default;
|
||||
$article-cloud-code-accent3: #5d52d6 !default;
|
||||
$article-cloud-code-accent4: $o-ruby !default;
|
||||
$article-cloud-code-accent5: #e24bbb !default;
|
||||
$article-cloud-code-accent6: #0084d6 !default;
|
||||
$article-cloud-code-accent7: #e90 !default;
|
||||
$article-cloud-code-scrollbar: #87DABE !default;
|
||||
|
||||
$article-enterprise-base: $cp-comet !default;
|
||||
$article-enterprise-text: $p-star !default;
|
||||
$article-enterprise-link: $p-star !default;
|
||||
$article-enterprise-link-hover: $b-ocean !default;
|
||||
|
||||
$article-cloud-base: $b-laser !default;
|
||||
$article-cloud-text: $b-ocean !default;
|
||||
$article-cloud-link: $b-ocean !default;
|
||||
$article-cloud-link-hover: $gr-canopy !default;
|
||||
$article-cloud-code: $b-sapphire !default;
|
||||
$article-cloud-code-bg: rgba($b-pool, .25) !default;
|
||||
|
||||
// Article Tabs for tabbed content
|
||||
$article-tab-text: $g8-storm !default;
|
||||
$article-tab-bg: $g18-cloud !default;
|
||||
|
|
|
|||
|
|
@ -36,18 +36,7 @@ $p-moonstone: #C9D0FF;
|
|||
$p-quartz: #D6D5ED;
|
||||
$p-violettecreme: #EDF0FF;
|
||||
|
||||
// Greens (Dark to Light)
|
||||
$gr-gypsy: #152B2D;
|
||||
$gr-grass: #2B6058;
|
||||
$gr-emerald: #108174;
|
||||
$gr-viridian: #32B08C;
|
||||
$gr-canopy: #20B76F;
|
||||
$gr-rainforest: #4ED8A0;
|
||||
$gr-honeydew: #7CE490;
|
||||
$gr-krypton: #A5F3B4;
|
||||
$gr-wasabi: #C6FFD0;
|
||||
$gr-forestfog: #CFE6E1;
|
||||
$gr-mint: #F2FFF4;
|
||||
|
||||
|
||||
// --------------------------------------------------
|
||||
|
||||
|
|
@ -136,9 +125,23 @@ $b-chathams: #125A7F;
|
|||
$b-matisse: #166F9D;
|
||||
$b-eastern: #1A83BB;
|
||||
$b-curious: #1E98D8;
|
||||
$b-dodger: #2AA3FF;
|
||||
$b-pool: #22ADF6; // Brand color
|
||||
$b-laser: #47BBF8;
|
||||
$b-malibu: #6CC8F9;
|
||||
$b-horizon: #91D6FB;
|
||||
$b-fleur: #B5E4FC;
|
||||
$b-hawkeye: #DAF1FD;
|
||||
|
||||
// Greens
|
||||
$gr-gypsy: #152B2D;
|
||||
$gr-grass: #2B6058;
|
||||
$gr-emerald: #108174;
|
||||
$gr-viridian: #32B08C;
|
||||
$gr-canopy: #20B76F;
|
||||
$gr-rainforest: #4ED8A0;
|
||||
$gr-honeydew: #7CE490;
|
||||
$gr-krypton: #A5F3B4;
|
||||
$gr-wasabi: #C6FFD0;
|
||||
$gr-forestfog: #CFE6E1;
|
||||
$gr-mint: #F2FFF4;
|
||||
|
|
|
|||
|
|
@ -303,16 +303,16 @@ This is **bold**. This is _italic_.
|
|||
// This is a code block inside of a blockquote
|
||||
cpu = from(bucket:"telegraf/autogen")
|
||||
|> range(start:-30m)
|
||||
|> filter(fn:(r) => r._measurement == "cpu")
|
||||
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
|
||||
```
|
||||
|
||||
###### This is a table in a blockquote
|
||||
| Column 1 | Column 2 | Column 3 | Column 4 |
|
||||
| -------- | -------- | -------- | -------- |
|
||||
| Row 1.1 | Row 1.2 | Row 1.3 | Row 1.4 |
|
||||
| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 |
|
||||
| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 |
|
||||
| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 |
|
||||
| Column 1 | Column 2 | Column 3 | Column 4 |
|
||||
| -------- | -------- | -------- | -------- |
|
||||
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
|
||||
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
|
||||
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
|
||||
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
|
||||
|
||||
{{% /note %}}
|
||||
|
||||
|
|
@ -416,19 +416,127 @@ This is **bold**. This is _italic_.
|
|||
// This is a code block inside of a blockquote
|
||||
cpu = from(bucket:"telegraf/autogen")
|
||||
|> range(start:-30m)
|
||||
|> filter(fn:(r) => r._measurement == "cpu")
|
||||
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
|
||||
```
|
||||
|
||||
###### This is a table in a blockquote
|
||||
| Column 1 | Column 2 | Column 3 | Column 4 |
|
||||
| -------- | -------- | -------- | -------- |
|
||||
| Row 1.1 | Row 1.2 | Row 1.3 | Row 1.4 |
|
||||
| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 |
|
||||
| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 |
|
||||
| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 |
|
||||
| Column 1 | Column 2 | Column 3 | Column 4 |
|
||||
| -------- | -------- | -------- | -------- |
|
||||
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
|
||||
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
|
||||
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
|
||||
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
|
||||
|
||||
{{% /warn %}}
|
||||
|
||||
{{% cloud-msg %}}
|
||||
This is a multiple paragraph blockquote with internal elements.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
## h2 This is a header2
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
{{< img-hd src="/img/test-image-2.png" alt="Test Image" />}}
|
||||
|
||||
### h3 This is a header3
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
#### h4 This is a header4
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
##### h5 This is a header5
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
###### h6 This is a header6
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
> Etiam tristique nisi et tristique auctor.
|
||||
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
> Etiam tristique nisi et tristique auctor.
|
||||
|
||||
#### Inline Styles
|
||||
This is an [inline link](#). This is `inline code`.
|
||||
This is an [`inline code link`](#) .
|
||||
This is **bold**. This is _italic_.
|
||||
|
||||
- Unordered list line-item 1
|
||||
- Unordered list line-item 2
|
||||
- Unordered list line-item 2.1
|
||||
- Unordered list line-item 2.2
|
||||
- Unordered list line-item 2.3
|
||||
- Unordered list line-item 3
|
||||
- Unordered list line-item with multiple paragraphs.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
- Unordered list line-item with multiple paragraphs.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
1. Unordered list line-item 1
|
||||
2. Unordered list line-item 2
|
||||
1. Unordered list line-item 2.1
|
||||
2. Unordered list line-item 2.2
|
||||
3. Unordered list line-item 2.3
|
||||
3. Unordered list line-item 3
|
||||
4. Unordered list line-item with multiple paragraphs.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
5. Unordered list line-item with multiple paragraphs.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
|
||||
Etiam tristique nisi et tristique auctor.
|
||||
|
||||
```js
|
||||
// This is a code block inside of a blockquote
|
||||
cpu = from(bucket:"telegraf/autogen")
|
||||
|> range(start:-30m)
|
||||
|> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName")
|
||||
```
|
||||
|
||||
###### This is a table in a blockquote
|
||||
| Column 1 | Column 2 | Column 3 | Column 4 |
|
||||
| -------- | -------- | -------- | -------- |
|
||||
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
|
||||
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
|
||||
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
|
||||
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
|
||||
|
||||
{{% /cloud-msg %}}
|
||||
|
||||
{{< tabs-wrapper >}}
|
||||
{{% tabs %}}
|
||||
[tab 1.1](#)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<hr/>
|
||||
<div class="feedback">
|
||||
<div class="feedback block">
|
||||
<h4>Bug Reports and Feedback</h4>
|
||||
<p>
|
||||
Thank you for being willing to help test InfluxDB v2.0 alpha!
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ $cloudName := .Site.Data.products.cloud.name }}
|
||||
<hr/>
|
||||
<div class="feedback">
|
||||
<div class="feedback block">
|
||||
<h4>{{ $cloudName }} Bug Reports and Feedback</h4>
|
||||
<p>
|
||||
To provide feedback or report a bug, send an email to <a href="mailto:cloudbeta@influxdata.com?subject={{ $cloudName }} Feedback">cloudbeta@influxdata.com</a>.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{ $cloudName := .Site.Data.products.cloud.name }}
|
||||
{{ $cloudLink := .Site.Data.products.cloud.link }}
|
||||
{{ if ( $.Params.cloud_all ) }}
|
||||
<div class="cloud-msg" id="cloud-msg">
|
||||
<div class="cloud-msg block" id="cloud-msg">
|
||||
<p>
|
||||
The features and functionality discussed on this page are unique to <a href="{{ $cloudLink }}" target="_blank">{{ $cloudName }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{ else if ( $.Params.cloud_some ) }}
|
||||
<div class="cloud-msg" id="cloud-msg">
|
||||
<div class="cloud-msg flex" id="cloud-msg">
|
||||
<div>
|
||||
<span class="cloud-flag"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
{{ $enterpriseName := .Site.Data.products.enterprise.name }}
|
||||
{{ $enterpriseLink := .Site.Data.products.enterprise.link }}
|
||||
{{ if ( $.Params.enterprise_all ) }}
|
||||
<div class="enterprise-msg" id="enterprise-msg">
|
||||
<div class="enterprise-msg block" id="enterprise-msg">
|
||||
<p>
|
||||
The features and functionality discussed on this page are unique to <a href="{{ $enterpriseLink }}" target="_blank">{{ $enterpriseName }}</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{ else if ( $.Params.enterprise_some ) }}
|
||||
<div class="enterprise-msg" id="enterprise-msg">
|
||||
<div class="enterprise-msg block flex" id="enterprise-msg">
|
||||
<div>
|
||||
<span class="enterprise-flag"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||
<div class="cloud-msg">
|
||||
<div class="cloud-msg block">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||
<div class="note">
|
||||
<div class="note block">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||
<div class="warn">
|
||||
<div class="warn block">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue