xref: /external/chromium_org/chrome/common/extensions/docs/static/sass/_typography.scss

/* =============================================================================
   Typography

   To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
   so that the line height of our base font becomes the basic unit of vertical
   measurement. We use multiples of that unit to set the top and bottom margins
   for our block level elements and to set the line heights of any fonts.
   For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
   ========================================================================== */


html {
  font-family: $base-font;
  color: $text;
}
body {
  font-size: $body-font-size;
  color: $text;
}

h1, h2, h3, h4 ,h5 ,h6 {
  font-family: $headline-font;
  font-weight: 600;
  color: $headline-color;
}
h1, h2 {
  font-weight: 300;
}
h1 {
  @include adjust-font-size-to( $h1-font-size );
}
h1 + h1 {
  @include leader (0);
}
h2 {
  @include adjust-font-size-to( $h2-font-size );
  @include leader(2, $h2-font-size);
  @include trailer(0, $h2-font-size);
  @include adjust-leading-to(1.4, $h2-font-size);
}
h3 {
  @include adjust-font-size-to( $h3-font-size );
  @include leader(1, $h3-font-size);
  @include trailer(0.4, $h3-font-size);
  @include adjust-leading-to(1.4, $h2-font-size);
}
h4 {
  @include adjust-font-size-to( $h4-font-size );
  @include leader(0, $h4-font-size);
  @include trailer(0, $h4-font-size);
}
h5 {
  @include adjust-font-size-to( $h5-font-size );
  @include leader(0, $h5-font-size);
  @include trailer(0, $h5-font-size);
}
h6 {
  @include adjust-font-size-to( $h6-font-size );
  @include leader(0, $h6-font-size);
  @include trailer(0, $h6-font-size);
}

// @media only screen and (max-width: $break-small) {
//   h1 {
//     font-size: $h1-font-size - 0.6 !important;
//   }
// }

p {
  margin: rhythm(1) 0;
  &.noindent, &.caption & {
    text-indent: 0;
  }
  &.caption {
    text-align: left;
    .lightbox & {
      color: $white;
    }
  }
}

a,
a:link,
a:visited {
  color: $link-color;
  font-weight: bold;
  text-decoration: none;
  word-wrap: break-word;
  transition: opacity 0.3s ease 0s;
  &:hover,
  &:focus {
    color: $link-hover-color;
  }
}
a.section-anchor {
  display: block;
  padding-top: 3.33em;
}

footer[role="contentinfo"] {
  font-size: 0.84615385em;
  a,
  a:link,
  a:visited {
    color: $footer-link-color;
    font-weight: normal;
    font-weight: 600;
    text-decoration: none;
    word-wrap: break-word;
    &:hover,
    &:focus {
      color: $link-hover-color;
    }
  }
}

table {
  font-size: $body-font-size;
}

td dl {
  margin: 0.4em 0;
}

td dt {
  margin: 0 0 0.4em 0;
}

em {
  padding-right: 2px; /* "kerning" adjustment */
}

img {
  vertical-align: middle;
}

figcaption {
  font-family: $alt-font;
//  @include adjust-font-size-to(12px);
  color: lighten($text, 20%);
}

blockquote {
  margin: rhythm(0.5) $indent-amount;
}

cite {
  margin: rhythm(0.5) $indent-amount;
//  @include adjust-font-size-to(12px);
  color: lighten($text, 30%);
  font-style: normal;
}

canvas {
  background: $white;
  margin: rhythm(1) 0;
}

.code,
code,
pre {
  color: $monospace-font-color;
  font-family: $sourcecode;
  //font-size: $monospace-font-size;
}

a > code {
  color: $link-color;
}

pre {
  margin: 2em 0;
  word-wrap: break-word;
  position: relative;

  &[data-filename] {


    &::after {
      content: attr(data-filename);
      background-color: $gray-medium;
      color: #fff;
      padding: 2px 12px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  a {
    text-decoration: underline;
  }
}
.static-code-container {
//  @include adjust-font-size-to(13px);
  line-height: 1em;
  clear: both;
}

code,
kbd,
samp {
  margin: rhythm(1) 0;
//  @include adjust-font-size-to(13px);
  line-height: 1em;
}

dl,
menu,
ol,
ul,
.item-list ul {
  margin: 0.8em 0;
}
ul {
  padding-left: $indent-amount*1.6;
}
ol {
  padding-left: $indent-amount*1.9;
}

hr {
  height: 1px;
  border: 0;
  border-bottom: $default-border;
  padding-bottom: -1px;
  margin: rhythm(1) 0;
}

.capitalize {
  text-transform: uppercase;
}

/* Support a hack for the ::first-element rules below, which only apply if
* the element has a subset of displays, which include inline-block.
*
* Use the data-inline-block attribute rather than a class on the element
* because the templates may end up overriding the class attribute.
*/
[data-list-item] {
  display: list-item;
}

.uncapitalize::first-letter {
  text-transform: lowercase;
}

.capitalize::first-letter {
  text-transform: uppercase;
}

.kbd {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #333;
  font-size: 11px;
  line-height: 1.4;
  text-shadow: 0 1px 0 #fff;
  font-family: Arial,Helvetica,sans-serif;
  display: inline-block;
  padding: 0.1em 0.6em;
  margin: 0 0.1em;
  white-space: nowrap;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
  border-radius: 3px;
}