docs-v2/assets/styles/layouts/_article.scss

.article {
  background: $article-bg;
  border-radius: $radius 0 0 $radius;
  padding: 2rem 4rem 3rem;
}

.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;
      }
    }
  }
  h2,h3,h4,h5,h6 {
    & + .highlight pre { margin-top: .5rem; }
    & + .code-tabs-wrapper { margin-top: 0; }
  }
  h1 {
    font-family: $klavika;
    font-weight: 300;
    font-style: italic;
    font-size: 2.65rem;
    margin: .4em 0 1em;
  }
  h2 {
    font-size: 2rem;
    margin: -1rem 0 .5rem;
    padding-top: 1.75rem;
  }
  h3 {
    font-size: 1.65rem;
    margin: -1rem 0 .5rem;
    padding-top: 1.75rem;
    color: $article-heading-alt;
  }
  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;
    }
  }

  strong {
    color: $article-bold;
  }

  img {
    max-width: 100%;
    margin-bottom: 2rem;
    border-radius: ($radius * 1.5);
    box-shadow: 1px 3px 10px $article-shadow;
  }

  hr {
    border-width: 1px 0 0;
    border-color: $article-hr;
    border-style: solid;
    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; }
    }
    ul,ol { margin: -.5rem 0 1rem;}
  }

  //////////////////////////////////// Code ////////////////////////////////////

  code,pre {
    background: $article-code-bg;
    font-family: 'Inconsolata', monospace;
    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-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;
    }
  }

  //////////////////////////////////// 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;
      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 ///////////////////////////////

  .required {
    color:#FF8564;
    font-weight:700;
    font-style: italic;
  }
}



////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// 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 1.2em .75rem;
    }

    blockquote,
    .note,
    .warn,
    .enterprise-msg,
    .cloud-msg {
      padding: 1.35rem 1.25rem .1rem 1.25rem;
      margin: .5rem 0 1rem;
    }

    .enterprise, .cloud {
      padding: 0 0 .01rem .85rem;
      margin-left: -.85rem;

      .enterprise-flag, .cloud-flag {
        left: -.25rem;
      }
    }

  }
}