cronus-theme 2.0.89 → 2.0.90

package/child/styleguide/kss-assets/kss.scss

@@ -1,746 +0,0 @@
-// ------------------------------------------------------------------------------
-//   Variables - Colors, Fonts, etc.
-// ------------------------------------------------------------------------------
-$kss-colors-background    : #fff;
-
-$kss-colors-foreground    : #444;
-$kss-colors-heading       : #111;
-$kss-colors-quotes        : #666;
-
-$kss-colors-link          : #0645ad;
-$kss-colors-link-visited  : #0645ad;
-$kss-colors-link-hover    : lighten($kss-colors-link, 20%);
-$kss-colors-link-active   : #faa700;
-
-$kss-font-body            : Helvetica, 'Helvetica Neue', Arial, sans-serif;
-$kss-font-code            : Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
-
-$kss-font-size            : 16px;
-$kss-vertical-rhythm      : $kss-font-size * 1.5;
-
-// ------------------------------------------------------------------------------
-// Wrap all of this builder's base HTML styling inside a .kss-style selector.
-// ------------------------------------------------------------------------------
-
-.kss-style {
-  color: $kss-colors-foreground;
-  font-family: $kss-font-body;
-  font-size: $kss-font-size;
-  line-height: $kss-vertical-rhythm;
-
-  a {
-    color: $kss-colors-link;
-    text-decoration: none;
-    transition-property: color;
-    transition-duration: 0.5s;
-
-    &:visited { color: $kss-colors-link-visited; }
-    &:hover,
-    &:focus   { color: $kss-colors-link-hover;   }
-    &:active  { color: $kss-colors-link-active;  }
-
-    &:hover,
-    &:active {
-      outline: 0;
-    }
-  }
-
-  p {
-    margin: ($kss-vertical-rhythm/2) 0 $kss-vertical-rhythm 0;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    margin: $kss-vertical-rhythm 0 0 0;
-    font-family: $kss-font-body;
-    color: $kss-colors-heading;
-    line-height: 1.15em;
-  }
-
-  h4, h5, h6 {
-    font-weight: bold;
-  }
-
-  h1 { font-size: $kss-font-size * 2.5;   }
-  h2 { font-size: $kss-font-size * 2.25;  }
-  h3 { font-size: $kss-font-size * 2.125; }
-  h4 { font-size: $kss-font-size * 2;     }
-  h5 { font-size: $kss-font-size * 1.875; }
-  h6 { font-size: $kss-font-size * 1.75;  }
-
-  blockquote {
-    color: $kss-colors-quotes;
-    margin: 0;
-    padding-left: $kss-vertical-rhythm;
-    border-left: 0.5em mix($kss-colors-quotes, $kss-colors-background, 25%) solid;
-  }
-
-  hr {
-    display: block;
-    height: 2px;
-    border: 0;
-    border-top: 1px solid lighten($kss-colors-foreground, 60%);
-    border-bottom: 1px solid darken($kss-colors-background, 10%);
-    margin: $kss-vertical-rhythm 0;
-    padding: 0;
-  }
-
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: $kss-font-code;
-    color: mix($kss-colors-foreground, $kss-colors-heading, 50%);
-    font-size: 1em;
-  }
-
-  pre {
-    white-space: pre;
-    overflow: scroll;
-  }
-
-  ins {
-    color: $kss-colors-heading;
-    background: #ff9;
-    text-decoration: none;
-  }
-
-  mark {
-    color: $kss-colors-heading;
-    background: #ff0;
-    font-weight: bold;
-  }
-
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sup { top: -0.5em;     }
-  sub { bottom: -0.25em; }
-
-  ul, ol {
-    margin: $kss-vertical-rhythm 0;
-    padding: 0 0 0 $kss-vertical-rhythm;
-  }
-  li p:last-child {
-    margin: 0;
-  }
-  dd {
-    margin: 0 0 0 $kss-vertical-rhythm;
-  }
-
-  img {
-    max-width:100%;
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-    vertical-align: middle;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  td {
-    vertical-align: top;
-  }
-
-  @media print {
-    a, a:visited { text-decoration: underline; }
-    hr { height: 1px; border:0; border-bottom:1px solid black; }
-    a[href]:after { content: " (" attr(href) ")"; }
-    a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
-    abbr[title]:after { content: " (" attr(title) ")"; }
-    pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
-    tr, img { page-break-inside: avoid; }
-    img { max-width: 100% !important; }
-    p, h2, h3 { orphans: 3; widows: 3; }
-    h2, h3 { page-break-after: avoid; }
-  }
-}
-
-// ------------------------------------------------------------------------------
-// Layout and page background
-// ------------------------------------------------------------------------------
-
-#kss-node {
-  margin: 0;
-  padding: 20px;
-  background: #fff;
-
-  &.kss-fullscreen-mode {
-    .kss-sidebar,
-    .kss-section:not(.is-fullscreen),
-    .kss-github {
-      display: none;
-    }
-  }
-
-  @media screen and (min-width: 769px) {
-    padding: 0;
-
-    .kss-main,
-    .kss-sidebar {
-      float: left;
-      margin-right: -100%;
-      box-sizing: border-box;
-    }
-  }
-
-  .kss-main {
-    width: 100%;
-    margin: 0 auto;
-
-    @media screen and (min-width: 769px) {
-      width: 80%;
-      margin-left: 20%;
-      padding: 0 20px 0 30px;
-    }
-  }
-
-  .kss-sidebar {
-    border-bottom:1px solid #ddd;
-
-    @media screen and (min-width: 769px) {
-      position: fixed;
-      width: 20%;
-      height: 100%;
-      overflow: auto;
-      padding: 0 10px 0 20px;
-      border-bottom: 0;
-      background-image: url(noise-low.png), -ms-radial-gradient(#fff, #eee);
-      background-image: url(noise-low.png), -o-radial-gradient(#fff, #eee);
-      background-image: url(noise-low.png), -webkit-radial-gradient(#fff, #eee);
-      background-image: url(noise-low.png), radial-gradient(#fff, #eee);
-      box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.7);
-    }
-  }
-}
-
-// ------------------------------------------------------------------------------
-// Sidebar-area components
-// ------------------------------------------------------------------------------
-
-#kss-node {
-
-  .kss-doc-title {
-    margin: 0;
-
-    @media screen and (min-width: 769px) {
-      font-size: 1.5em;
-    }
-  }
-
-  .kss-header,
-  .kss-nav {
-    @media screen and (min-width: 769px) {
-      margin-top: 2em;
-    }
-  }
-
-  .kss-nav__menu {
-    margin-top: ($kss-vertical-rhythm/2);
-    margin-bottom: ($kss-vertical-rhythm/2);
-    padding: 0;
-    list-style-type: none;
-  }
-
-  .kss-nav__menu-item {
-    display: inline-block;
-    padding-right: $kss-vertical-rhythm;
-
-    @media screen and (min-width: 769px) {
-      display: list-item;
-      padding-right: 0;
-    }
-  }
-
-  .kss-nav__menu-link {
-    position: relative;
-    display: inline-block;
-
-    &:before {
-      @media screen and (min-width: 769px) {
-        content: ' ';
-        position: absolute;
-        left: -20px;
-        width: 0;
-        height: 100%;
-        background-color: rgba(#000, 0);
-      }
-    }
-
-    &.is-in-viewport:before {
-      background-color: #000;
-      width: 5px;
-      transition: background-color .4s, width .6s;
-    }
-  }
-
-  .kss-nav__menu-child {
-    display: none;
-
-    @media screen and (min-width: 769px) {
-      display: block;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-
-      // @TODO: The ul is output even when there are no children. Fix this, so
-      // we can put these :first-child and :last child styles back on the ul.
-      li:first-child {
-        margin-top: 10px;
-        border-top: 1px solid #ccc;
-        padding: 10px 0 0;
-      }
-
-      li:last-child {
-        margin-bottom: 10px;
-        border-bottom: 1px solid #ccc;
-        padding: 0 0 10px;
-      }
-    }
-  }
-
-  .kss-nav__ref {
-    color: #333;
-    font-weight: bold;
-
-    &:after {
-      content: ' ';
-    }
-  }
-  .kss-nav__ref-child {
-    font-weight: normal;
-  }
-}
-
-// ------------------------------------------------------------------------------
-// Content-area components
-// ------------------------------------------------------------------------------
-
-#kss-node {
-
-  .kss-section {
-    margin-bottom: ($kss-vertical-rhythm * 2);
-
-    // "fullscreen" styles copied from Mozilla's default stylesheet.
-    &.is-fullscreen {
-      position: fixed !important;
-      top: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
-      bottom: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      margin: 0 !important;
-      min-width: 0 !important;
-      max-width: none !important;
-      min-height: 0 !important;
-      max-height: none !important;
-      box-sizing: border-box !important;
-      object-fit: contain !important;
-      transform: none !important;
-      // Turn on scrolling if needed.
-      overflow: auto !important;
-      padding: 20px;
-    }
-  }
-
-  .kss-title {
-    margin-bottom: 0;
-  }
-  .is-fullscreen .kss-title {
-    margin-top: 0;
-  }
-  .kss-title__ref {
-    display: block;
-    font-size: $kss-font-size;
-    line-height: $kss-font-size;
-    color: #666;
-
-    &:before {
-      content: 'Section ';
-    }
-  }
-  .kss-title__permalink {
-    display: block;
-    color: #000;
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: $kss-colors-link;
-
-      @media screen and (min-width: 607px) {
-        .kss-title__permalink-hash {
-          display: inline;
-        }
-      }
-    }
-  }
-  .kss-title__permalink-hash {
-    display: none;
-    color: #ccc;
-  }
-
-  .kss-toolbar {
-    margin: 6px 0 24px;
-    display: inline-block;
-    border: 1px solid #eee;
-    background-color: #f9f9f9;
-    border-right-color: #e0e0e0;
-    border-bottom-color: #e0e0e0;
-    line-height: 1;
-    padding: 3px;
-
-    a {
-      box-sizing: content-box;
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      padding: 3px;
-      vertical-align: top;
-      // Tooltip wrapper styles:
-      position: relative;
-      overflow: visible;
-
-      + a {
-        margin-left: 6px;
-      }
-
-      .kss-toolbar__icon-fill {
-        fill: #ccc;
-      }
-
-      svg.on {
-        display: none;
-      }
-
-      &:focus,
-      &:hover {
-        border-color: #000;
-
-        .kss-toolbar__icon-fill {
-          fill: #000;
-        }
-      }
-    }
-  }
-  .kss-toolbar__tooltip {
-    position: absolute;
-    z-index: 1;
-    display: inline-block;
-    bottom: 100%;
-    left: -10px;
-    margin-bottom: 5px;
-    border: solid 1px #666;
-    padding: 8px 10px 6px;
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
-    white-space: nowrap;
-    color: #000;
-    background: #fff;
-    cursor: help;
-    opacity: 0;
-    transition: opacity 0.25s;
-    // Visually hidden
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    word-wrap: normal;
-
-    // Solid grey triangle.
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: -8px;
-      left: 15px;
-      width: 0;
-      height: 0;
-      border-width: 7px 5px 0;
-      border-color: #666 transparent;
-      border-style: solid;
-    }
-
-    // White triangle knock-out.
-    &:after {
-      bottom: -6px;
-      border-top-color: #fff;
-    }
-  }
-  a:focus,
-  a:hover {
-    > .kss-toolbar__tooltip {
-      opacity: 1;
-      // Visually hidden off
-      clip: auto;
-      height: auto;
-      width: auto;
-      overflow: visible;
-    }
-  }
-  .is-fullscreen .kss-toolbar a[data-kss-fullscreen],
-  &.kss-guides-mode .kss-toolbar a[data-kss-guides],
-  &.kss-markup-mode .kss-toolbar a[data-kss-markup] {
-    border-color: #666;
-    background-color: #666;
-
-    .kss-toolbar__icon-fill {
-      fill: #fff;
-    }
-
-    svg.on {
-      display: block;
-    }
-
-    svg.off {
-      display: none;
-    }
-  }
-
-  .kss-parameters {
-    display: table;
-    list-style-type: none;
-    margin-top: 0;
-    margin-left: 0;
-    padding-left: 0;
-  }
-  .kss-parameters__title {
-    font-weight: bold;
-  }
-  .kss-parameters__item {
-    display: table-row;
-  }
-  .kss-parameters__name {
-    display: table-cell;
-    padding-right: 20px;
-    white-space: nowrap;
-  }
-  .kss-parameters__description {
-    display: table-cell;
-  }
-  .kss-parameters__default-value code {
-    white-space: nowrap;
-  }
-
-  .kss-modifier__wrapper {
-    border: 1px solid #ccc;
-    padding: 0 10px 10px;
-  }
-  .is-fullscreen .kss-modifier__wrapper {
-    // Un-do padding on .kss-section.
-    margin-left: -20px;
-    margin-right: -20px;
-    // Remove all padding on the wrapper
-    padding-left: 0;
-    padding-right: 0;
-    border: none;
-  }
-  .kss-modifier__heading {
-    margin: 0 -10px 10px -10px;
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-    background-color: #eee;
-    font-weight: bold;
-  }
-  .is-fullscreen .kss-modifier__heading {
-    margin: 0 20px 10px;
-    border: 1px solid #ccc;
-  }
-  .kss-modifier__default-name {
-    font-weight: bold;
-    margin-bottom: ($kss-vertical-rhythm / 2);
-  }
-  .is-fullscreen .kss-modifier__default-name {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-  .kss-modifier__name {
-    float: left;
-    padding-right: 10px;
-    font-weight: bold;
-  }
-  .is-fullscreen .kss-modifier__name {
-    margin-left: 20px;
-  }
-  .kss-modifier__description {
-    margin-bottom: ($kss-vertical-rhythm / 2);
-  }
-  .is-fullscreen .kss-modifier__description {
-    margin-right: 20px;
-  }
-  .kss-modifier__example {
-    clear: left;
-    border: 2px dashed transparent;
-    position: relative; // Contain the example's absolute positioning.
-    z-index: 0; // Establishes a local stacking context.
-    margin: -2px -2px ($kss-vertical-rhythm - 2px);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  &.kss-guides-mode .kss-modifier__example,
-  &.kss-guides-mode .kss-modifier__example-footer {
-    &:before,
-    &:after {
-      z-index: -1;
-      box-sizing: border-box;
-      content: '';
-      position: absolute;
-      width: 5px;
-      height: 5px;
-      border: 2px solid #000;
-    }
-  }
-  &.kss-guides-mode .kss-modifier__example {
-    border-color: #000;
-
-    &:before {
-      top: -5px;
-      left: -5px;
-      border-top: 0;
-      border-left: 0;
-    }
-    &:after {
-      top: -5px;
-      right: -5px;
-      border-top: 0;
-      border-right: 0;
-    }
-  }
-  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example {
-    &:before {
-      left: auto;
-      right: 0;
-    }
-    &:after {
-      right: auto;
-      left: 0;
-    }
-  }
-  .kss-modifier__example-footer {
-    clear: both;
-  }
-  &.kss-guides-mode .kss-modifier__example-footer {
-    &:before {
-      bottom: -5px;
-      left: -5px;
-      border-bottom: 0;
-      border-left: 0;
-    }
-    &:after {
-      bottom: -5px;
-      right: -5px;
-      border-right: 0;
-      border-bottom: 0;
-    }
-  }
-  &.kss-guides-mode.kss-fullscreen-mode .kss-modifier__example-footer {
-    &:before {
-      left: auto;
-      right: 0;
-    }
-    &:after {
-      right: auto;
-      left: 0;
-    }
-  }
-
-  .kss-markup {
-    margin: $kss-vertical-rhythm 0;
-    border: 1px solid #ccc;
-
-    &[open] summary {
-      border-bottom: 1px solid #ccc;
-    }
-
-    summary {
-      padding-left: 10px;
-    }
-
-    pre {
-      margin: 0;
-    }
-  }
-
-  .kss-colors {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    justify-content: flex-start;
-    align-items: stretch;
-    flex-wrap: wrap;
-    margin: 0 -.5em;
-
-    > * {
-      flex: 0 0 auto;
-      padding: 0 .5em;
-      margin-bottom: 1em;
-      width: 16em;
-    }
-
-    .kss-color {
-      height: 100%
-    }
-  }
-
-  .kss-color {
-    background: $kss-colors-background;
-    border: 1px solid #ccc;
-    margin: 0;
-    padding: 0;
-
-    &-figure {
-      height: 3em;
-    }
-
-    &-caption {
-      padding: .5em;
-    }
-
-    &-name {
-      display: block;
-      font-weight: bold;
-      color: $kss-colors-foreground;
-    }
-
-    &-code {
-      display: block;
-      color: $kss-colors-quotes;
-    }
-
-    &-desc {
-      font-size: .875em;
-    }
-  }
-
-  .kss-source {
-    font-size: 80%;
-  }
-
-  .kss-github {
-    display:none;
-
-    @media screen and (min-width: 501px) {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-
-    img {
-      border: 0;
-    }
-  }
-
-  pre.hljs code {
-    color: inherit;
-  }
-
-  @import '../node_modules/highlight.js/styles/vs2015';
-}