376 lines
11 KiB
SCSS
376 lines
11 KiB
SCSS
|
// # Markup
|
||
|
|
// Styling for markup
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Variables
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
|
||
|
|
// Stylings for H1-H6
|
||
|
|
$heading-map : (
|
||
|
|
color: $color-headings,
|
||
|
|
font-family: $font-family-headings
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
$heading-1-map : map-merge( $heading-map, (font-size: $font-size-h1) ) !default;
|
||
|
|
$heading-2-map : map-merge( $heading-map, (font-size: $font-size-h2) ) !default;
|
||
|
|
$heading-3-map : map-merge( $heading-map, (font-size: $font-size-h3) ) !default;
|
||
|
|
$heading-4-map : map-merge( $heading-map, (font-size: $font-size-h4) ) !default;
|
||
|
|
$heading-5-map : map-merge( $heading-map, (font-size: $font-size-h5) ) !default;
|
||
|
|
$heading-6-map : map-merge( $heading-map, (font-size: $font-size-h6) ) !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for links
|
||
|
|
$link-map : (
|
||
|
|
color: $color-primary,
|
||
|
|
text-decoration: none
|
||
|
|
) !default;
|
||
|
|
// Styling for links on hover
|
||
|
|
$link-hover-map : ( text-decoration: underline ) !default;
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for P elements
|
||
|
|
$p-map : ( line-height: $line-height-base ) !default;
|
||
|
|
|
||
|
|
// Styling for HR elements
|
||
|
|
$hr-map : (
|
||
|
|
height: 4px,
|
||
|
|
margin: $spacing-unit*3 0,
|
||
|
|
background-color: $color-border
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
// Styling for BLOCKQUOTE elements
|
||
|
|
$blockquote-map : (
|
||
|
|
margin: 0 0 0 $spacing-unit,
|
||
|
|
padding: 0 $spacing-unit * 2,
|
||
|
|
color: $color-text-muted,
|
||
|
|
border-left: 4px solid $color-border
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for image elemnets
|
||
|
|
$image-map : ( max-width: 100% ) !default;
|
||
|
|
|
||
|
|
// Styling for TABLE elements
|
||
|
|
$table-map : () !default;
|
||
|
|
|
||
|
|
// Styling for TR elements
|
||
|
|
$table-tr-map : (
|
||
|
|
background-color: white,
|
||
|
|
border-top: 1px solid $color-gray-lighter
|
||
|
|
) !default;
|
||
|
|
// Styling for even-numbered rows
|
||
|
|
$table-tr-2-map : ( background-color: $color-gray-lightest ) !default;
|
||
|
|
|
||
|
|
// Styling for TD elements
|
||
|
|
$table-td-map : (
|
||
|
|
|
||
|
|
padding: $spacing-unit/2 $spacing-unit,
|
||
|
|
border: 1px solid $color-gray-lighter
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
// Styling for TH elements
|
||
|
|
$table-th-map : map-merge( $table-td-map, ( font-weight: bold ) ) !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for UL elements
|
||
|
|
$ul-map : (
|
||
|
|
margin-bottom: $spacing-unit,
|
||
|
|
padding-left: 2em
|
||
|
|
) !default;
|
||
|
|
// Styling for OL elements
|
||
|
|
$ol-map : (
|
||
|
|
margin-bottom: $spacing-unit,
|
||
|
|
padding-left: 2em
|
||
|
|
) !default;
|
||
|
|
// Styling for nested OL elements
|
||
|
|
$ol-ol-map : ( list-style-type: lower-roman ) !default;
|
||
|
|
|
||
|
|
// Styling for LI elements
|
||
|
|
$li-map : () !default;
|
||
|
|
|
||
|
|
// Styling for dl
|
||
|
|
$dl-map : () !default;
|
||
|
|
|
||
|
|
// Styling for dt
|
||
|
|
$dt-map : (
|
||
|
|
padding: 0,
|
||
|
|
margin-top: $spacing-unit,
|
||
|
|
font-style: italic,
|
||
|
|
font-weight: bold
|
||
|
|
) !default;
|
||
|
|
// Styling for
|
||
|
|
$dd-map : (
|
||
|
|
padding: 0 $spacing-unit,
|
||
|
|
margin-bottom: $spacing-unit
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for PRE elements
|
||
|
|
$pre-map : (
|
||
|
|
margin: 0px,
|
||
|
|
padding: 0.85em 1em,
|
||
|
|
margin-bottom: $spacing-unit,
|
||
|
|
background: $color-gray-lightest,
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
// Styling for code block divs
|
||
|
|
$code-block-map : (
|
||
|
|
font-family: $font-family-mono,
|
||
|
|
margin: 0px,
|
||
|
|
padding: 0px,
|
||
|
|
border: none
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for text inside code blocks
|
||
|
|
$code-block-text-map : (
|
||
|
|
font-size: 0.85em,
|
||
|
|
background: transparent
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
// Styling for inline code snippets
|
||
|
|
$code-inline-map : (
|
||
|
|
padding: 0.2em,
|
||
|
|
margin: 0,
|
||
|
|
font-size: 0.85em,
|
||
|
|
background-color: $color-gray-lightest
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Text
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
a { @include print( $link-map ); }
|
||
|
|
a:hover { @include print( $link-hover-map ); }
|
||
|
|
|
||
|
|
// ### Defintions for font sizes controlled by "Font Settings" dropdown in header
|
||
|
|
|
||
|
|
.book.font-size-0 .book-body .page-inner section { font-size: $font-size-0; }
|
||
|
|
.book.font-size-1 .book-body .page-inner section { font-size: $font-size-1; }
|
||
|
|
.book.font-size-2 .book-body .page-inner section { font-size: $font-size-2; }
|
||
|
|
.book.font-size-3 .book-body .page-inner section { font-size: $font-size-3; }
|
||
|
|
.book.font-size-4 .book-body .page-inner section { font-size: $font-size-4; }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Markdown wrapper div
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
|
||
|
|
.markdown-section
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
word-wrap: break-word;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
line-height: $line-height-base;
|
||
|
|
|
||
|
|
text-size-adjust: 100%;
|
||
|
|
-ms-text-size-adjust: 100%;
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
-moz-text-size-adjust: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-section *
|
||
|
|
{
|
||
|
|
box-sizing: border-box;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.markdown-section > *:first-child { margin-top: 0 !important; }
|
||
|
|
.markdown-section > *:last-child { margin-bottom: 0 !important; }
|
||
|
|
|
||
|
|
.markdown-section .glossary-term
|
||
|
|
{
|
||
|
|
cursor: help;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Printing
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
pre, code, blockquote, tr, img, table, figure
|
||
|
|
{
|
||
|
|
page-break-inside: avoid;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, h2, h3, h4, h5
|
||
|
|
{
|
||
|
|
orphans: 3;
|
||
|
|
widows: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3, h4, h5
|
||
|
|
{
|
||
|
|
page-break-after: avoid;
|
||
|
|
}
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Paragraphs
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
p { @include print( $p-map ); }
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Images
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
img
|
||
|
|
{
|
||
|
|
border: 0;
|
||
|
|
@include print( $image-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Horizontal lines
|
||
|
|
// *******************************************************
|
||
|
|
hr
|
||
|
|
{
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
|
||
|
|
@include print( $hr-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Headings
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
h1 { @include print( $heading-1-map ); }
|
||
|
|
h2 { @include print( $heading-2-map ); }
|
||
|
|
h3 { @include print( $heading-3-map ); }
|
||
|
|
h4 { @include print( $heading-4-map ); }
|
||
|
|
h5 { @include print( $heading-5-map ); }
|
||
|
|
h6 { @include print( $heading-6-map ); }
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Code Blocks
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
code, pre
|
||
|
|
{
|
||
|
|
direction: ltr;
|
||
|
|
@include print( $code-block-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
pre
|
||
|
|
{
|
||
|
|
overflow: auto;
|
||
|
|
word-wrap: normal;
|
||
|
|
@include print( $pre-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
pre > code
|
||
|
|
{
|
||
|
|
display: inline;
|
||
|
|
max-width: initial;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
overflow: initial;
|
||
|
|
line-height: inherit;
|
||
|
|
white-space: pre;
|
||
|
|
|
||
|
|
@include print( $code-block-text-map );
|
||
|
|
|
||
|
|
&:before, &:after { content: normal; }
|
||
|
|
}
|
||
|
|
|
||
|
|
code
|
||
|
|
{
|
||
|
|
@include print( $code-inline-map );
|
||
|
|
|
||
|
|
&:before, &:after
|
||
|
|
{
|
||
|
|
letter-spacing: -0.2em;
|
||
|
|
content: "\00a0";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Table
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
table
|
||
|
|
{
|
||
|
|
display: table;
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
border-spacing: 0;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
@include print( $table-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
tr
|
||
|
|
{
|
||
|
|
@include print( $table-tr-map );
|
||
|
|
|
||
|
|
&:nth-child(2n) { @include print( $table-tr-2-map ); }
|
||
|
|
}
|
||
|
|
|
||
|
|
th { @include print( $table-th-map ); }
|
||
|
|
td { @include print( $table-td-map ); }
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Lists
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
.markdown-section
|
||
|
|
{
|
||
|
|
ul { @include print( $ul-map ); }
|
||
|
|
ol { @include print( $ol-map ); }
|
||
|
|
ol ol { @include print( $ol-ol-map ); }
|
||
|
|
li { @include print( $li-map ); }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Blockquote
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
blockquote
|
||
|
|
{
|
||
|
|
@include print( $blockquote-map );
|
||
|
|
|
||
|
|
&:first-child { margin-top: 0; }
|
||
|
|
&:last-child { margin-bottom: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// *******************************************************
|
||
|
|
// ## Description Lists
|
||
|
|
// *******************************************************
|
||
|
|
|
||
|
|
dl
|
||
|
|
{
|
||
|
|
padding: 0;
|
||
|
|
@include print( $dl-map );
|
||
|
|
}
|
||
|
|
|
||
|
|
dl dt { @include print( $dt-map ); }
|
||
|
|
dl dd { @include print( $dd-map ); }
|
||
|
|
|
||
|
|
dd { margin-left: 0; }
|
||
|
|
|
||
|
|
|