582 lines
12 KiB
SCSS
582 lines
12 KiB
SCSS
.article {
|
|
flex-grow: 1;
|
|
background: $article-bg;
|
|
border-radius: $border-radius 0 0 0;
|
|
padding: 2rem 4rem 3rem;
|
|
width: 75%;
|
|
}
|
|
|
|
.article--content{
|
|
max-width: 760px;
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: $article-heading;
|
|
a {
|
|
color: inherit !important;
|
|
text-decoration: none;
|
|
code:after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
h1 {
|
|
font-family: $klavika;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
font-size: 2.65rem;
|
|
margin-bottom: 1em;
|
|
}
|
|
h2 {
|
|
font-size: 2rem;
|
|
margin: -1.5rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.65rem;
|
|
margin: -1.5rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
margin: -1.25rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h5 {
|
|
font-size: 1rem;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h6 {
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
p,li {
|
|
color: $article-text;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1.5em;
|
|
}
|
|
|
|
a {
|
|
color: $article-link;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $article-link-hover;
|
|
}
|
|
code {
|
|
font-weight: normal;
|
|
transition: color .2s;
|
|
position: relative;
|
|
&: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, .35) transparent transparent;
|
|
transition: border .2s;
|
|
}
|
|
&:hover {
|
|
color: $article-code-hover;
|
|
&:after {
|
|
border-color: transparent $article-code-hover transparent transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
border-radius: ($border-radius * 1.5);
|
|
box-shadow: 1px 3px 10px $article-shadow;
|
|
}
|
|
|
|
//////////////////////////////////// Lists ////////////////////////////////////
|
|
|
|
ol, ul {
|
|
padding-left: 1.6rem;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
li:before{
|
|
content: "" !important;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
//////////////////////////////////// Code ////////////////////////////////////
|
|
|
|
code,pre {
|
|
background: $article-code-bg;
|
|
font-family: 'Inconsolata', monospace;
|
|
}
|
|
|
|
code {
|
|
padding: .15rem .45rem .25rem;
|
|
border-radius: $border-radius;
|
|
color: $article-code;
|
|
}
|
|
|
|
pre {
|
|
margin: 2rem 0 3rem;
|
|
padding: 1.5rem 1.5rem 1.25rem;
|
|
border-radius: $border-radius;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
code { padding: 0; }
|
|
}
|
|
|
|
//////////////////////////////////// Tables ////////////////////////////////////
|
|
|
|
table {
|
|
display: inline-block;
|
|
margin: 1rem 0 3rem;
|
|
border-spacing: 0;
|
|
color: $article-text;
|
|
max-width: 100%;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
box-shadow: 1px 3px 10px $article-shadow;
|
|
border-radius: ($border-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: ($border-radius * 1.5) 0 0 0;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 ($border-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 ($border-radius * 1.5); }
|
|
&:last-child { border-radius: 0 0 ($border-radius * 1.5) 0; }
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////// Blockquotes, Notes, Warnings, & Messages //////////////////
|
|
|
|
blockquote,
|
|
.note,
|
|
.warn,
|
|
#enterprise-msg {
|
|
padding: 1.65rem 2rem .1rem 2rem;
|
|
margin: 1rem 0 2rem;
|
|
border-width: 0 0 0 4px;
|
|
border-style: solid;
|
|
border-radius: 0 $border-radius $border-radius 0;
|
|
}
|
|
|
|
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); }
|
|
}
|
|
}
|
|
|
|
///////////////////////////////// Enterprise /////////////////////////////////
|
|
|
|
#enterprise-msg {
|
|
border-color: $article-enterprise-base;
|
|
background: rgba($article-enterprise-base, .15);
|
|
font-style: italic;
|
|
display: flex;
|
|
p {
|
|
color: $article-enterprise-text;
|
|
}
|
|
a {
|
|
color: $article-enterprise-link;
|
|
&:hover {
|
|
color: $article-enterprise-link-hover;
|
|
}
|
|
}
|
|
div:first-child { margin-right: 1.25rem; }
|
|
}
|
|
|
|
.enterprise-flag {
|
|
padding: .2rem .4rem;
|
|
background: $article-enterprise-base;
|
|
font-size: .75rem;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
color: $g20-white;
|
|
border-radius: $border-radius;
|
|
vertical-align: text-bottom;
|
|
&:before {
|
|
content: "E";
|
|
}
|
|
}
|
|
|
|
.enterprise {
|
|
position: relative;
|
|
padding: 0 0 .01rem 2rem;
|
|
margin-left: -2rem;
|
|
border-left: 2px solid $article-enterprise-base;
|
|
|
|
.enterprise-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;
|
|
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, .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: $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-tab-content {
|
|
padding: 0;
|
|
pre {
|
|
margin: 0 0 3rem;
|
|
border-radius: $border-radius 0 $border-radius $border-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: $border-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";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////// Scroll Bars //////////////////////////////////
|
|
pre {
|
|
@include scrollbar($article-code-bg, $article-code-scrollbar);
|
|
}
|
|
.note pre {
|
|
@include scrollbar($article-note-code-bg, $article-note-code-scrollbar);
|
|
}
|
|
.warn pre {
|
|
@include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
.article {
|
|
padding: 1.5rem 1.5rem 3rem;
|
|
|
|
h1 { margin: .35rem 0 2rem; font-size: 2.4rem; }
|
|
h2 { font-size: 1.9rem; }
|
|
h3 { font-size: 1.55rem; }
|
|
h4 { font-size: 1.3rem; }
|
|
|
|
pre {
|
|
padding: 1.2em;
|
|
}
|
|
|
|
blockquote,
|
|
.note,
|
|
.warn,
|
|
#enterprise-msg {
|
|
padding: 1.35rem 1.25rem .1rem 1.25rem;
|
|
margin: .5rem 0 1rem;
|
|
}
|
|
|
|
.enterprise {
|
|
padding: 0 0 .01rem .85rem;
|
|
margin-left: -.85rem;
|
|
|
|
.enterprise-flag {
|
|
left: -.25rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@include media(medium) {
|
|
.article { width: 100%; }
|
|
}
|
|
|
|
@media (min-width: 801px) and (max-width: 1200px) {
|
|
.article {
|
|
width: 70%;
|
|
}
|
|
}
|