docs/docs.styles.scss
/**
 * These are style overrides for Vue Styleguidist
 * (the odd formatting hence most of the classes are dynamic)
 */

@import "../src/assets/tokens/tokens.scss";
@import "./docs.tokens.scss";
@import "../src/styles/styles.scss";

/* LOCAL DESIGN TOKENS
--------------------------------------------- */

$docs-grey: #c4cdd5;
$docs-grey-dark: #4d5865;
$docs-status-ready: #7cb518;
$docs-breakpoint: 800px;
$docs-breakpoint-small: 600px;
$docs-color-heading: rgb(30, 30, 30);
$docs-color-text: shade($color-silver, 70%);

/* BASE
--------------------------------------------- */

// Background of page
div.rsg--root-1 {
  background: $color-white;
}

// Main content
main[class^="rsg--content"] {
  display: block; /* IE11 fix */
  padding: $space-s $space-xl;
  @media (max-width: #{$docs-breakpoint}) {
    padding: $space-s $space-m;
  }
}

// Resetting margins for Styleguidist
header[class^="rsg--header"] > div[class^="rsg--wrapper"],
section > div[class^="rsg--wrapper"] + article[class^="rsg--root"] {
  margin: 0 !important;
}

// Display rsg--roots as flex
main section section > div > div[class^="rsg--root"] {
  display: flex;
  flex-direction: column;
}

/* TYPOGRAPHY
--------------------------------------------- */

// Main headings
// (includes h2 as well since in component views that’s the first heading)
div[class^="rsg--wrapper"] > h1[class^="rsg--heading"],
div[class^="rsg--wrapper"] > h2[class^="rsg--heading"] {
  display: block;
  border: 0;
  line-height: $line-height-s;
  padding: $space-xl $space-xl;
  width: calc(100% + #{$space-xl * 2});
  margin: -#{$space-s} -#{$space-xl} $space-l -#{$space-xl};
  background: $color-cloud;
  font-size: $size-xxl;
  a:hover {
    text-decoration: none;
    cursor: default;
  }
  @media (max-width: 1300px) {
    padding: $space-l $space-xl;
  }
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-xl / 1.2;
    width: calc(100% + #{$space-xl});
    padding: $space-l $space-m;
    margin: -#{$space-s} -#{$space-m} $space-m;
  }
}

// Remove extra margins from all headers
header[class^="rsg--header"] {
  margin: 0;
}

// Links inside h1
div[class^="rsg--wrapper"] > h1[class^="rsg--heading"] a {
  font-weight: $weight-normal;
  color: $color-oxford-blue;
  letter-spacing: -1px;
  &:hover {
    text-decoration: none;
    cursor: default;
  }
}

// Heading, level 2
h2[class^="rsg--heading"] {
  border-bottom: 1px solid $docs-grey;
  padding-bottom: $space-s;
  margin: $space-l 0 $space-m;
  font-size: $size-xl;
  line-height: $line-height-s;
  font-weight: $weight-normal;
  letter-spacing: -0.5px;
  width: 100%;
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-xl / 1.3;
  }
  @media (max-width: #{$docs-breakpoint-small}) {
    font-size: $size-xl / 1.6;
  }
  a {
    color: $docs-color-heading;
  }
}

// Heading, level 3
h3[class^="rsg--heading"],
h3[class^="rsg--heading"] a {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-weight: $weight-light;
  line-height: $line-height-m;
  margin: 0 0 $space-l;
  font-size: $size-l;
  color: $docs-color-text;
  @media (max-width: #{$docs-breakpoint}) {
    font-size: $size-l / 1.2;
    margin: 0 0 $space-m;
  }
}

// Heading, level 4
h4[class^="rsg--heading"],
h4[class^="rsg--heading"] a {
  font-weight: $weight-semi-bold;
  letter-spacing: 0;
  margin: $space-l 0 $space-m;
  font-size: $size-l;
  line-height: $line-height-s;
  color: $docs-color-heading;
}

// Paragraphs
p[class^="rsg--para"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $docs-color-text;
  margin-bottom: $space-s;
  line-height: $line-height-m;
  strong a[class^="rsg--link"] {
    font-weight: $weight-semi-bold;
  }
  code {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    background: tint($docs-grey, 75%);
    color: shade($color-silver, 20%);
    padding: $space-xx-small;
    border-radius: $radius-default;
    font-size: 87.5%;
  }
  a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  pre + & {
    margin-top: $space-s;
  }
}

// Type layout adjustments
div[class^="rsg--docs"],
p[class^="rsg--para"],
h3[class^="rsg--heading"],
h4[class^="rsg--heading"] {
  max-width: 800px;
  width: 75%;
  p[class^="rsg--para"] {
    width: 100%;
  }
  @media (max-width: 1300px) {
    width: 100%;
  }
}

// Paragraphs inside table cells
td[class^="rsg--cell"] p {
  width: 100%;
}

/* SIDEBAR
--------------------------------------------- */

// Sidebar version
p[class^="rsg--version"] {
  @include inset-squish-space($space-xs);
  margin: $space-xs 0 0;
  color: $color-bleu-de-france;
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: $weight-normal;
  display: inline-block;
  line-height: $line-height-xs;
  border: 1px solid $color-bleu-de-france;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: $size-xs;
  border-radius: $radius-default;
}

// Sidebar search
div[class^="rsg--search"] input {
  @include inset-squish-space($space-s);
  color: $color-white;
  border: 1px solid transparent;
  background: mix($color-bleu-de-france, $color-rich-black, 20%);
  &:focus {
    border: 1px solid $color-bleu-de-france;
    &::-webkit-textfield-decoration-container {
      display: none !important;
    }
    &::-webkit-contacts-auto-fill-button {
      display: none !important;
    }
  }
  &::-webkit-input-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
  }
  &:-ms-input-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
  }
  &::-moz-placeholder {
    color: rgba(mix($color-white, $color-bleu-de-france, 50%), 0.35);
    opacity: 1;
  }
}

/* CODE & COMPONENT PREVIEWS
--------------------------------------------- */

// Previews of the components
div[class^="rsg--preview"] {
  padding: $space-l / 1.2;
  background-color: tint($docs-grey, 90%);
  border: 1px solid tint($docs-grey, 50%);
  box-shadow: inset 0 0 $space-xs rgba($color-rich-black, 0.05);
  margin: $space-s 0 0;
  border-radius: 0;
  display: block;
  width: 100%;
  border-top-left-radius: $radius-default;
  border-top-right-radius: $radius-default;
}

// If you edit the component categories, you have to edit
// these to match as well.
div[data-preview="Elements"],
div[data-preview="Patterns"],
div[data-preview="Templates"] {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: 0;

  // This hides code previews from the above examples
  & + div + div[class^="rsg--tab"] {
    display: none !important;
  }
}

// Clearfix to take care of floated content inside previews
div[data-preview]:after {
  content: "";
  display: table;
  clear: both;
}

// Code tabs and table
div[class^="rsg--tabs"],
table[class^="rsg--table"] {
  margin-bottom: $space-s;
  overflow-x: auto;
}
thead[class^="rsg--tableHead"] {
  border: 0;
}

// VUE & HTML Code tabs
div[class^="rsg--tab"] {
  position: relative;
  .vueds-tabs {
    z-index: 5;
    border-radius: $radius-default;
    box-shadow: 0 2px 8px rgba($color-rich-black, 0.8);
    overflow: hidden;
    position: absolute;
    top: $space-m;
    right: $space-m;
    .vueds-tab {
      border: 0;
      margin: 0;
      letter-spacing: $spacing-l;
      font-size: $size-s;
      font-weight: $weight-normal;
      font-family: $font-text;
      line-height: $line-height-s;
      @include inset-squish-space($space-s);
      cursor: pointer;
      background: mix($color-bleu-de-france, $color-rich-black, 50%);
      color: $color-white;
      &:active {
        background: mix($color-bleu-de-france, $color-rich-black, 45%);
      }
      &:focus {
        outline: none;
      }
      &--active {
        background: mix($color-bleu-de-france, $color-rich-black, 40%);
        box-shadow: inset 0 2px 8px rgba($color-rich-black, 0.2);
      }
    }
  }
}

// Hidden HTML/VUE code preview
.vueds-hidden {
  display: none;
}

/* COMPONENT STATUS LABELS
--------------------------------------------- */

// Here we’re setting a custom order for Styleguidist’s pieces
header[class^="rsg--header"] {
  order: 1;
}

div[class^="rsg--docs"],
article[class^="rsg--root"],
button[class^="rsg--button"] {
  order: 2;
}

div[class^="rsg--root"] div[class^="rsg--tabs"] {
  order: 3;
}

// Status label is shown in top right corner for each component
.status {
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  font-weight: $weight-normal;
  order: 1;
  align-self: flex-end;
  cursor: help;
  line-height: $line-height-xs;
  background: tint($docs-grey, 50%);
  padding: $space-xs $space-s $space-xs/1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: $size-xs;
  border-radius: $radius-default;
  color: $color-rich-black;
  position: absolute;
  right: $space-xl;
  top: $space-xl * 1.2;
  z-index: 2;
  @media (max-width: 1300px) {
    top: $space-xl;
  }
  @media (max-width: #{$docs-breakpoint}) {
    top: $space-l * 1.2;
    right: $space-m;
  }
  &-ready {
    background: $docs-status-ready;
    color: $color-white;
  }
  &-review,
  &-under-review {
    background: $color-ucla-gold;
    color: $color-rich-black;
  }
  &-prototype {
    background: $color-bleu-de-france;
    color: $color-white;
  }
  &-deprecated {
    background: $color-vermilion;
    color: $color-white;
  }
}

/* TABLES
--------------------------------------------- */

// Global tr setting so that vueds custom components use this as well
tr {
  transition: background-color 0.1s ease;
  &:hover,
  body &[class^="rsg--dataRow"]:hover {
    background: rgba($color-cloud, 0.3);
  }
}

/* HIDDEN STYLEGUIDIST FUNCTIONALITY
--------------------------------------------- */

div[class^="rsg--tabButtons"],
div[class^="rsg--toolbar"],
div[class^="rsg--controls"] {
  display: none !important;
}

/* PRISMJS
------------------------------------------- */
:not(pre)[class*="language-"] {
  background-color: mix($color-bleu-de-france, $color-rich-black, 10%);
  border-radius: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  // to display a white caret
  color: #ffffff;
  margin-bottom: $space-m;
}

pre[class*="language-"] {
  padding: $space-m;
  margin: 0;
  color: #ffffff;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: $size-s;
  overflow: auto;
  white-space: pre-wrap;
  min-height: 86px;
  box-sizing: border-box;
}

/*********************************************************
* Tokens
*/
.namespace {
  opacity: 0.7;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6d6d6d;
}

.token.punctuation {
  color: #54a3f2;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #54a3f2;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #eeeeee;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #dddddd;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #afe74c;
}

.token.function {
  color: #54a3f2;
}

.token.regex,
.token.important,
.token.variable {
  color: #aaaaaa;
}

.token.attr-name {
  color: #ffcc4d;
}
