mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-28 01:10:58 +01:00
Fix errors in generated SassDoc
This commit is contained in:
squidfunk
parent
5e838ecf4f
commit
ba788dcaba
@ -20,19 +20,19 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Typography
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Typography
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Modular typographic scale
|
||||
// Modular typographic scale
|
||||
$ms-base: 1.6rem;
|
||||
$ms-ratio: $major-third;
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Breakpoints
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Breakpoints
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Device-specific breakpoints
|
||||
// Device-specific breakpoints
|
||||
$break-devices: (
|
||||
mobile: (
|
||||
portrait: px2em(220px) px2em(479px),
|
||||
@ -49,23 +49,23 @@ $break-devices: (
|
||||
)
|
||||
);
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Colors
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Colors
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Primary and accent colors
|
||||
// Primary and accent colors
|
||||
$md-color-primary: $clr-indigo-500;
|
||||
$md-color-primary--light: $clr-indigo-100;
|
||||
$md-color-primary--dark: $clr-indigo-700;
|
||||
$md-color-accent: $clr-indigo-a200;
|
||||
|
||||
/// Shades of black
|
||||
// Shades of black
|
||||
$md-color-black: hsla(0, 0%, 0%, 0.87);
|
||||
$md-color-black--light: hsla(0, 0%, 0%, 0.54);
|
||||
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
|
||||
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
|
||||
|
||||
/// Shades of white
|
||||
// Shades of white
|
||||
$md-color-white: hsla(0, 0%, 100%, 1.00);
|
||||
$md-color-white--light: hsla(0, 0%, 100%, 0.70);
|
||||
$md-color-white--lighter: hsla(0, 0%, 100%, 0.30);
|
||||
|
||||
@ -20,9 +20,10 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Nothing to see here, move along
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Nothing to see here, move along
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
|
||||
.md-search__suggest {
|
||||
background: $md-color-white;
|
||||
|
||||
@ -20,17 +20,17 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Dependencies
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Dependencies
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@import "modular-scale";
|
||||
@import "material-color";
|
||||
@import "material-shadows";
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Application
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Application
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@import "helpers/break";
|
||||
@import "helpers/px2em";
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Icon set
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Icon set
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Base icon class
|
||||
// Base icon class
|
||||
%md-icon,
|
||||
.md-icon {
|
||||
font-family: "Material Icons";
|
||||
@ -38,12 +38,12 @@
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
|
||||
/// Enable font-smoothing in Webkit and FF
|
||||
// Enable font-smoothing in Webkit and FF
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/// Build representational classes
|
||||
// Build representational classes
|
||||
@each $ligature, $name in (
|
||||
"arrow_back": "back",
|
||||
"arrow_forward": "forward",
|
||||
|
||||
@ -20,33 +20,33 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Resets
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Resets
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Enfore correct box model - the prefixed versions are necessary for older
|
||||
/// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
|
||||
// Enfore correct box model - the prefixed versions are necessary for older
|
||||
// browsers, i.e. Chrome < 10, Firefox < 29, Safari < 6 and Android < 4
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
/// All elements shall inherit the document default
|
||||
// All elements shall inherit the document default
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
-webkit-box-sizing: inherit;
|
||||
}
|
||||
|
||||
/// Prevent adjustments of font size after orientation changes in IE and iOS
|
||||
/// and set base font-size to 10px for simple rem calculations.
|
||||
// Prevent adjustments of font size after orientation changes in IE and iOS
|
||||
// and set base font-size to 10px for simple rem calculations.
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
|
||||
/// Reset spacing and borders for all tags
|
||||
// Reset spacing and borders for all tags
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
|
||||
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol,
|
||||
@ -59,20 +59,20 @@ audio, video {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/// Reset table styles
|
||||
// Reset table styles
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/// Reset table cell styles
|
||||
// Reset table cell styles
|
||||
td, th {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/// Reset (native) button styles
|
||||
// Reset (native) button styles
|
||||
button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@ -81,20 +81,20 @@ button {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/// Reset (native) input styles
|
||||
// Reset (native) input styles
|
||||
input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/// Reset link styles
|
||||
// Reset link styles
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/// Reset tap outlines on iOS and Android
|
||||
// Reset tap outlines on iOS and Android
|
||||
a, button, label, input {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@ -20,51 +20,51 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Font definitions
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Font definitions
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Default fonts
|
||||
// Default fonts
|
||||
body, kbd {
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-feature-settings: "kern", "onum", "liga";
|
||||
|
||||
/// Enable font-smoothing in Webkit and FF
|
||||
// Enable font-smoothing in Webkit and FF
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/// Use system fonts, if browser doesn't support webfonts
|
||||
// Use system fonts, if browser doesn't support webfonts
|
||||
.no-fontface & {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/// Proportionally spaced fonts
|
||||
// Proportionally spaced fonts
|
||||
pre, code {
|
||||
font-family: "Roboto Mono", "Courier New", Courier, monospace;
|
||||
|
||||
/// Use system fonts, if browser doesn't support webfonts
|
||||
// Use system fonts, if browser doesn't support webfonts
|
||||
.no-fontface & {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Typeset
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Typeset
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Content that is typeset
|
||||
// Content that is typeset
|
||||
.md-content--typeset {
|
||||
font-size: ms(0);
|
||||
line-height: 1.6;
|
||||
|
||||
/// Body copy
|
||||
// Body copy
|
||||
p {
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
/// 1st level headline
|
||||
// 1st level headline
|
||||
h1 {
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(3);
|
||||
@ -73,7 +73,7 @@ pre, code {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/// 2nd level headline
|
||||
// 2nd level headline
|
||||
h2 {
|
||||
margin-top: 4.0rem;
|
||||
font-size: ms(2);
|
||||
@ -82,7 +82,7 @@ pre, code {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/// 3rd level headline
|
||||
// 3rd level headline
|
||||
h3 {
|
||||
margin-top: 3.2rem;
|
||||
font-size: ms(1);
|
||||
@ -91,12 +91,12 @@ pre, code {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/// 3rd level headline following an 2nd level headline
|
||||
// 3rd level headline following an 2nd level headline
|
||||
h2 + h3 {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
|
||||
/// 4th level headline
|
||||
// 4th level headline
|
||||
h4 {
|
||||
margin-top: 1.6rem;
|
||||
font-size: ms(0);
|
||||
@ -104,7 +104,7 @@ pre, code {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/// 5th and 6th level headline
|
||||
// 5th and 6th level headline
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.6rem;
|
||||
@ -114,29 +114,29 @@ pre, code {
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/// Overrides for 5th level headline
|
||||
// Overrides for 5th level headline
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/// Links
|
||||
// Links
|
||||
a {
|
||||
color: $md-color-primary;
|
||||
|
||||
/// Also enable transition on pseudo elements
|
||||
// Also enable transition on pseudo elements
|
||||
&,
|
||||
&::before {
|
||||
transition: color 0.125s;
|
||||
}
|
||||
|
||||
/// Active links
|
||||
// Active links
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $md-color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
/// Inline code blocks
|
||||
// Inline code blocks
|
||||
code {
|
||||
padding: 0.1rem 0.4rem;
|
||||
background: #F7F7F7;
|
||||
@ -146,7 +146,7 @@ pre, code {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/// Formatted code blocks
|
||||
// Formatted code blocks
|
||||
pre {
|
||||
margin: 2.0rem 0;
|
||||
padding: 1.0rem 1.2rem;
|
||||
@ -156,13 +156,13 @@ pre, code {
|
||||
line-height: 1.4;
|
||||
overflow-x: scroll;
|
||||
|
||||
/// Reset, if pre is inside code
|
||||
// Reset, if pre is inside code
|
||||
> code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/// Keyboard tags
|
||||
// Keyboard tags
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.5rem 0.5rem;
|
||||
@ -178,62 +178,62 @@ pre, code {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/// Smaller text
|
||||
// Smaller text
|
||||
small {
|
||||
color: $md-color-black--light;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
/// Superscript and subscript
|
||||
// Superscript and subscript
|
||||
sup,
|
||||
sub {
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
/// Horizontal separators
|
||||
// Horizontal separators
|
||||
hr {
|
||||
margin: 2.4rem 0;
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
||||
}
|
||||
|
||||
/// Blockquotes, possibly nested
|
||||
// Blockquotes, possibly nested
|
||||
blockquote {
|
||||
padding-left: 1.2rem;
|
||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
/// Unordered lists
|
||||
// Unordered lists
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
/// Ordered lists
|
||||
// Ordered lists
|
||||
ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
|
||||
/// Triply nested ordered list
|
||||
// Triply nested ordered list
|
||||
ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
}
|
||||
|
||||
/// Unordered and ordered lists
|
||||
// Unordered and ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.0rem;
|
||||
|
||||
/// List elements
|
||||
// List elements
|
||||
li {
|
||||
margin-bottom: 1.0rem;
|
||||
margin-left: 2.0rem;
|
||||
|
||||
/// Remove margin on last element
|
||||
// Remove margin on last element
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/// Nested lists
|
||||
// Nested lists
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 1.0rem;
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Admonition extension
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Admonition extension
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Admonition
|
||||
// Admonition
|
||||
.admonition {
|
||||
position: relative;
|
||||
margin: 2.0rem 0;
|
||||
@ -33,7 +33,7 @@
|
||||
border-radius: px2rem(2px);
|
||||
background: transparentize($clr-blue-a200, 0.95);
|
||||
|
||||
/// Icon
|
||||
// Icon
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -48,7 +48,7 @@
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
/// Title
|
||||
// Title
|
||||
&-title {
|
||||
color: $clr-blue-a400;
|
||||
font-size: ms(-1);
|
||||
@ -56,28 +56,28 @@
|
||||
line-height: 2.0rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
/// Ensure smaller spacing to next element
|
||||
// Ensure smaller spacing to next element
|
||||
html & {
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
/// Ensure smaller spacing to next element
|
||||
// Ensure smaller spacing to next element
|
||||
html & + * {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/// Remove spacing on first element
|
||||
// Remove spacing on first element
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/// Remove spacing on last element
|
||||
// Remove spacing on last element
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/// Build representational classes
|
||||
// Build representational classes
|
||||
@each $names, $appearance in (
|
||||
tip idea: $clr-teal-a700 "whatshot",
|
||||
success check done: $clr-green-a400 "done",
|
||||
@ -89,24 +89,24 @@
|
||||
$tint: nth($appearance, 1);
|
||||
$icon: nth($appearance, 2);
|
||||
|
||||
/// Define base class
|
||||
// Define base class
|
||||
&%#{nth($names, 1)},
|
||||
&.#{nth($names, 1)} {
|
||||
border-color: $tint;
|
||||
background: transparentize($tint, 0.95);
|
||||
|
||||
/// Icon
|
||||
// Icon
|
||||
&::before {
|
||||
content: $icon;
|
||||
}
|
||||
|
||||
/// Set color for title
|
||||
// Set color for title
|
||||
.admonition-title {
|
||||
color: $tint;
|
||||
}
|
||||
}
|
||||
|
||||
/// Define synonyms for base class
|
||||
// Define synonyms for base class
|
||||
@if length($names) > 1 {
|
||||
@for $n from 2 through length($names) {
|
||||
&.#{nth($names, $n)} {
|
||||
|
||||
@ -20,98 +20,98 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Codehilite extension
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Codehilite extension
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Github-style syntax highlighting
|
||||
// Github-style syntax highlighting
|
||||
.codehilite,
|
||||
.code {
|
||||
|
||||
/// Errors
|
||||
// Errors
|
||||
.err { color: #A61717; }
|
||||
|
||||
/// Operators
|
||||
// Operators
|
||||
.o { color: inherit; }
|
||||
|
||||
/// Generics
|
||||
// Generics
|
||||
|
||||
.ge { color: #000000; } /// Generic.Emph
|
||||
.gr { color: #AA0000; } /// Generic.Error
|
||||
.gh { color: #999999; } /// Generic.Heading
|
||||
.go { color: #888888; } /// Generic.Output
|
||||
.gp { color: #555555; } /// Generic.Prompt
|
||||
.gs { color: inherit; } /// Generic.Strong
|
||||
.gu { color: #AAAAAA; } /// Generic.Subheading
|
||||
.gt { color: #AA0000; } /// Generic.Traceback
|
||||
.ge { color: #000000; } // Generic.Emph
|
||||
.gr { color: #AA0000; } // Generic.Error
|
||||
.gh { color: #999999; } // Generic.Heading
|
||||
.go { color: #888888; } // Generic.Output
|
||||
.gp { color: #555555; } // Generic.Prompt
|
||||
.gs { color: inherit; } // Generic.Strong
|
||||
.gu { color: #AAAAAA; } // Generic.Subheading
|
||||
.gt { color: #AA0000; } // Generic.Traceback
|
||||
|
||||
/// Keywords
|
||||
// Keywords
|
||||
|
||||
.k { color: #A71D5D; } /// Keyword
|
||||
.kc { color: #A71D5D; } /// Keyword.Constant
|
||||
.kd { color: #A71D5D; } /// Keyword.Declaration
|
||||
.kn { color: #A71D5D; } /// Keyword.Namespace
|
||||
.kp { color: #A71D5D; } /// Keyword.Pseudo
|
||||
.kr { color: #0086B3; } /// Keyword.Reserved
|
||||
.kt { color: #0086B3; } /// Keyword.Type
|
||||
.k { color: #A71D5D; } // Keyword
|
||||
.kc { color: #A71D5D; } // Keyword.Constant
|
||||
.kd { color: #A71D5D; } // Keyword.Declaration
|
||||
.kn { color: #A71D5D; } // Keyword.Namespace
|
||||
.kp { color: #A71D5D; } // Keyword.Pseudo
|
||||
.kr { color: #0086B3; } // Keyword.Reserved
|
||||
.kt { color: #0086B3; } // Keyword.Type
|
||||
|
||||
/// Comments
|
||||
// Comments
|
||||
|
||||
.c { color: #969896; } /// Comment
|
||||
.cm { color: #969896; } /// Comment.Multiline
|
||||
.cp { color: #666666; } /// Comment.Preproc
|
||||
.c1 { color: #969896; } /// Comment.Single
|
||||
.cs { color: #969896; } /// Comment.Special
|
||||
.c { color: #969896; } // Comment
|
||||
.cm { color: #969896; } // Comment.Multiline
|
||||
.cp { color: #666666; } // Comment.Preproc
|
||||
.c1 { color: #969896; } // Comment.Single
|
||||
.cs { color: #969896; } // Comment.Special
|
||||
|
||||
/// Names
|
||||
// Names
|
||||
|
||||
.na { color: #795DA3; } /// Name.Attribute
|
||||
.na { color: #795DA3; } /// Name.Attribute
|
||||
.nb { color: #795DA3; } /// Name.Builtin
|
||||
.bp { color: #795DA3; } /// Name.Builtin.Pseudo
|
||||
.nc { color: #795DA3; } /// Name.Class
|
||||
.no { color: #795DA3; } /// Name.Constant
|
||||
.nd { color: #795DA3; } /// Name.Decorator
|
||||
.ni { color: #795DA3; } /// Name.Entity
|
||||
.ne { color: #795DA3; } /// Name.Exception
|
||||
.nf { color: #795DA3; } /// Name.Function
|
||||
.nl { color: #795DA3; } /// Name.Label
|
||||
.nn { color: #795DA3; } /// Name.Namespace
|
||||
.nt { color: #795DA3; } /// Name.Tag
|
||||
.nv { color: #795DA3; } /// Name.Variable
|
||||
.vc { color: #795DA3; } /// Name.Variable.Class
|
||||
.vg { color: #795DA3; } /// Name.Variable.Global
|
||||
.vi { color: #795DA3; } /// Name.Variable.Instance
|
||||
.ow { color: inherit; } /// Operator.Word
|
||||
.na { color: #795DA3; } // Name.Attribute
|
||||
.na { color: #795DA3; } // Name.Attribute
|
||||
.nb { color: #795DA3; } // Name.Builtin
|
||||
.bp { color: #795DA3; } // Name.Builtin.Pseudo
|
||||
.nc { color: #795DA3; } // Name.Class
|
||||
.no { color: #795DA3; } // Name.Constant
|
||||
.nd { color: #795DA3; } // Name.Decorator
|
||||
.ni { color: #795DA3; } // Name.Entity
|
||||
.ne { color: #795DA3; } // Name.Exception
|
||||
.nf { color: #795DA3; } // Name.Function
|
||||
.nl { color: #795DA3; } // Name.Label
|
||||
.nn { color: #795DA3; } // Name.Namespace
|
||||
.nt { color: #795DA3; } // Name.Tag
|
||||
.nv { color: #795DA3; } // Name.Variable
|
||||
.vc { color: #795DA3; } // Name.Variable.Class
|
||||
.vg { color: #795DA3; } // Name.Variable.Global
|
||||
.vi { color: #795DA3; } // Name.Variable.Instance
|
||||
.ow { color: inherit; } // Operator.Word
|
||||
|
||||
/// Numbers
|
||||
// Numbers
|
||||
|
||||
.m { color: #0086B3; } /// Literal.Number
|
||||
.mf { color: #0086B3; } /// Literal.Number.Float
|
||||
.mh { color: #0086B3; } /// Literal.Number.Hex
|
||||
.mi { color: #0086B3; } /// Literal.Number.Integer
|
||||
.mo { color: #0086B3; } /// Literal.Number.Oct
|
||||
.il { color: #0086B3; } /// Literal.Number.Integer.Long
|
||||
.m { color: #0086B3; } // Literal.Number
|
||||
.mf { color: #0086B3; } // Literal.Number.Float
|
||||
.mh { color: #0086B3; } // Literal.Number.Hex
|
||||
.mi { color: #0086B3; } // Literal.Number.Integer
|
||||
.mo { color: #0086B3; } // Literal.Number.Oct
|
||||
.il { color: #0086B3; } // Literal.Number.Integer.Long
|
||||
|
||||
/// Strings
|
||||
// Strings
|
||||
|
||||
.s { color: #183691; } /// Literal.String
|
||||
.sb { color: #183691; } /// Literal.String.Backtick
|
||||
.sc { color: #183691; } /// Literal.String.Char
|
||||
.sd { color: #183691; } /// Literal.String.Doc
|
||||
.s2 { color: #183691; } /// Literal.String.Double
|
||||
.se { color: #183691; } /// Literal.String.Escape
|
||||
.sh { color: #183691; } /// Literal.String.Heredoc
|
||||
.si { color: #183691; } /// Literal.String.Interpol
|
||||
.sx { color: #183691; } /// Literal.String.Other
|
||||
.sr { color: #009926; } /// Literal.String.Regex
|
||||
.s1 { color: #D01040; } /// Literal.String.Single
|
||||
.ss { color: #990073; } /// Literal.String.Symbol
|
||||
.s { color: #183691; } // Literal.String
|
||||
.sb { color: #183691; } // Literal.String.Backtick
|
||||
.sc { color: #183691; } // Literal.String.Char
|
||||
.sd { color: #183691; } // Literal.String.Doc
|
||||
.s2 { color: #183691; } // Literal.String.Double
|
||||
.se { color: #183691; } // Literal.String.Escape
|
||||
.sh { color: #183691; } // Literal.String.Heredoc
|
||||
.si { color: #183691; } // Literal.String.Interpol
|
||||
.sx { color: #183691; } // Literal.String.Other
|
||||
.sr { color: #009926; } // Literal.String.Regex
|
||||
.s1 { color: #D01040; } // Literal.String.Single
|
||||
.ss { color: #990073; } // Literal.String.Symbol
|
||||
|
||||
/// Diffs
|
||||
.gd { background-color: #ffdddd; } /// Generic.Deleted
|
||||
.gi { background-color: #ddffdd; } /// Generic.Inserted
|
||||
// Diffs
|
||||
.gd { background-color: #ffdddd; } // Generic.Deleted
|
||||
.gi { background-color: #ddffdd; } // Generic.Inserted
|
||||
|
||||
/// Miscellaneous
|
||||
.w { color: transparent; } /// Text.Whitespace
|
||||
// Miscellaneous
|
||||
.w { color: transparent; } // Text.Whitespace
|
||||
}
|
||||
|
||||
@ -20,23 +20,23 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Footnotes extension
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Footnotes extension
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Scoped in typesetted content for greater specificity
|
||||
// Scoped in typesetted content for greater specificity
|
||||
.md-content--typeset {
|
||||
|
||||
/// Footnote
|
||||
// Footnote
|
||||
.footnote {
|
||||
color: $md-color-black--light;
|
||||
font-size: smaller;
|
||||
|
||||
/// Remove additional spacing on footnotes
|
||||
// Remove additional spacing on footnotes
|
||||
> ol {
|
||||
margin-left: 0;
|
||||
|
||||
/// Single footnote
|
||||
// Single footnote
|
||||
> li {
|
||||
|
||||
// TODO: this doesn't work entirely
|
||||
@ -47,14 +47,14 @@
|
||||
// margin-top: -(5.6rem + 2.4rem + 0.4rem);
|
||||
// }
|
||||
|
||||
/// Make back references visible on hover
|
||||
// Make back references visible on hover
|
||||
&:hover .footnote-backref,
|
||||
&:target .footnote-backref {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/// Active or targeted back reference
|
||||
// Active or targeted back reference
|
||||
&:hover .footnote-backref:hover,
|
||||
&:target .footnote-backref {
|
||||
color: $md-color-accent;
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Correct anchor offset
|
||||
// Correct anchor offset
|
||||
&-ref::before {
|
||||
position: absolute;
|
||||
margin-top: -(5.6rem + 2.4rem + 0.4rem);
|
||||
@ -71,7 +71,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/// Make back reference text transparent for icon
|
||||
// Make back reference text transparent for icon
|
||||
&-backref {
|
||||
@extend %md-icon;
|
||||
|
||||
@ -85,12 +85,12 @@
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
/// Hack: remove Unicode arrow for icon
|
||||
// Hack: remove Unicode arrow for icon
|
||||
&::first-letter {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/// Back reference icon
|
||||
// Back reference icon
|
||||
&::after {
|
||||
content: "keyboard_return";
|
||||
}
|
||||
|
||||
@ -20,14 +20,14 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Permalinks extension
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Permalinks extension
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Scoped in typesetted content for greater specificity
|
||||
// Scoped in typesetted content for greater specificity
|
||||
.md-content--typeset {
|
||||
|
||||
/// Permalink
|
||||
// Permalink
|
||||
.headerlink {
|
||||
display: inline-block;
|
||||
margin-left: 1.0rem;
|
||||
@ -39,24 +39,24 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/// All headers with permalinks have ids
|
||||
// All headers with permalinks have ids
|
||||
[id] {
|
||||
|
||||
/// Make permalink visible on hover
|
||||
// Make permalink visible on hover
|
||||
&:hover .headerlink,
|
||||
&:target .headerlink {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/// Active or targeted permalink
|
||||
// Active or targeted permalink
|
||||
&:hover .headerlink:hover,
|
||||
&:target .headerlink {
|
||||
color: $md-color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
/// Correct anchor offset of headlines
|
||||
// Correct anchor offset of headlines
|
||||
@each $level, $delta in (
|
||||
h1: 3.0rem,
|
||||
h2: 0.2rem,
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Variables
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
////
|
||||
///
|
||||
/// Device-specific breakpoints
|
||||
///
|
||||
/// @example
|
||||
@ -47,21 +47,21 @@
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @type Map
|
||||
////
|
||||
///
|
||||
$break-devices: () !default;
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Breakpoint helpers
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Breakpoint helpers
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
////
|
||||
///
|
||||
/// Choose minimum and maximum device widths
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @param {Map} $devices Map of devices
|
||||
/// @return {List} Minimum and maximum width
|
||||
////
|
||||
///
|
||||
@function break-select-min-max($devices) {
|
||||
$min: 1000000;
|
||||
$max: 0;
|
||||
@ -90,14 +90,14 @@ $break-devices: () !default;
|
||||
@return $min, $max;
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// Select minimum and maximum widths for a device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access private
|
||||
/// @param {String} $device Device
|
||||
/// @return {List} Minimum and maximum width
|
||||
////
|
||||
///
|
||||
@function break-select-device($device) {
|
||||
$current: $break-devices;
|
||||
@for $n from 1 through length($device) {
|
||||
@ -114,17 +114,17 @@ $break-devices: () !default;
|
||||
@return break-select-min-max($current);
|
||||
}
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Breakpoint mixins
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Breakpoint mixins
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
////
|
||||
///
|
||||
/// A minimum-maximum media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number|List} $breakpoint Number or number pair
|
||||
////
|
||||
///
|
||||
@mixin break-at($breakpoint) {
|
||||
@if type-of($breakpoint) == number {
|
||||
@media only screen and (min-width: $breakpoint) {
|
||||
@ -145,13 +145,13 @@ $break-devices: () !default;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// An orientation media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String} $breakpoint Orientation
|
||||
////
|
||||
///
|
||||
@mixin break-at-orientation($breakpoint) {
|
||||
@if type-of($breakpoint) == string {
|
||||
@media only screen and (orientation: $breakpoint) {
|
||||
@ -162,13 +162,13 @@ $break-devices: () !default;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// A maximum-aspect-ratio media query breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {Number} $breakpoint Ratio
|
||||
////
|
||||
///
|
||||
@mixin break-at-ratio($breakpoint) {
|
||||
@if type-of($breakpoint) == number {
|
||||
@media only screen and (max-aspect-ratio: $breakpoint) {
|
||||
@ -179,13 +179,13 @@ $break-devices: () !default;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// A minimum-maximum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
////
|
||||
///
|
||||
@mixin break-at-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
@ -206,13 +206,13 @@ $break-devices: () !default;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// A minimum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
////
|
||||
///
|
||||
@mixin break-from-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
@ -228,13 +228,13 @@ $break-devices: () !default;
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// A maximum media query device breakpoint
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @param {String|List} $breakpoint Device
|
||||
////
|
||||
///
|
||||
@mixin break-to-device($device) {
|
||||
@if type-of($device) == string {
|
||||
$device: $device,;
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Pixel conversion helpers
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Pixel conversion helpers
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
////
|
||||
///
|
||||
/// Convert font size in px to em.
|
||||
///
|
||||
/// @group helpers
|
||||
@ -32,7 +32,7 @@
|
||||
/// @param {Number} $size Font size in px
|
||||
/// @param {Number} $base Base font size
|
||||
/// @return {Number} Font size in em
|
||||
////
|
||||
///
|
||||
@function px2em($size, $base: 16px) {
|
||||
@if unit($size) == px {
|
||||
@return ($size / $base) * 1.0em;
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
////
|
||||
///
|
||||
/// Convert font size in px to rem.
|
||||
///
|
||||
/// @group helpers
|
||||
@ -49,7 +49,7 @@
|
||||
/// @param {Number} $size Font size in px
|
||||
/// @param {Number} $base Base font size
|
||||
/// @return {Number} Font size in rem
|
||||
////
|
||||
///
|
||||
@function px2rem($size, $base: 10px) {
|
||||
@if unit($size) == px {
|
||||
@return ($size / $base) * 1.0rem;
|
||||
|
||||
@ -20,38 +20,38 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Grid
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Grid
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Stretch container to viewport
|
||||
// Stretch container to viewport
|
||||
html {
|
||||
height: 100%;
|
||||
|
||||
/// [screen medium +] Set base font-size to 11px
|
||||
// [screen medium +] Set base font-size to 11px
|
||||
@include break-from-device(screen medium) {
|
||||
font-size: 68.75%;
|
||||
}
|
||||
|
||||
/// [screen large +] Set base font-size to 12px
|
||||
// [screen large +] Set base font-size to 12px
|
||||
@include break-from-device(screen large) {
|
||||
font-size: 75.00%;
|
||||
}
|
||||
}
|
||||
|
||||
/// Stretch body to container and leave room for footer.
|
||||
// Stretch body to container and leave room for footer.
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
|
||||
/// Lock body to viewport height (e.g. in search mode)
|
||||
// Lock body to viewport height (e.g. in search mode)
|
||||
&.md-js__body--locked {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/// Horizontal separators
|
||||
// Horizontal separators
|
||||
hr {
|
||||
display: block;
|
||||
height: px2rem(1px);
|
||||
@ -59,24 +59,24 @@ hr {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/// Template-wide grid
|
||||
// Template-wide grid
|
||||
.md-grid {
|
||||
max-width: 120.0rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/// Prevent collapse of margin when setting margin on child element
|
||||
// Prevent collapse of margin when setting margin on child element
|
||||
.md-container,
|
||||
.md-main {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/// Add top spacing to acount for header
|
||||
// Add top spacing to acount for header
|
||||
.md-main {
|
||||
margin-top: 5.6rem;
|
||||
|
||||
/// Bottom spacing to account for footer
|
||||
// Bottom spacing to account for footer
|
||||
&__inner {
|
||||
margin-top: 3.0rem;
|
||||
margin-bottom: 9.2rem;
|
||||
@ -84,16 +84,16 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Navigational elements
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Navigational elements
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Toggle checkbox
|
||||
// Toggle checkbox
|
||||
.md-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/// Overlay below expanded drawer
|
||||
// Overlay below expanded drawer
|
||||
.md-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -106,10 +106,10 @@ hr {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
|
||||
/// [tablet landscape -]: Trigger overlay
|
||||
// [tablet landscape -]: Trigger overlay
|
||||
@include break-to-device(tablet landscape) {
|
||||
|
||||
/// Expanded drawer
|
||||
// Expanded drawer
|
||||
.md-toggle--drawer:checked ~ & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -121,25 +121,25 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Flexible elements, implemented with table layout
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Flexible elements, implemented with table layout
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Flexible layout container
|
||||
// Flexible layout container
|
||||
.md-flex {
|
||||
display: table;
|
||||
|
||||
/// Flexible layout container cell/element
|
||||
// Flexible layout container cell/element
|
||||
&__cell {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
|
||||
/// Shrink to minimum width
|
||||
// Shrink to minimum width
|
||||
&--shrink {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/// Stretch to maximum width
|
||||
// Stretch to maximum width
|
||||
&--stretch {
|
||||
display: table;
|
||||
width: 100%;
|
||||
@ -147,7 +147,7 @@ hr {
|
||||
}
|
||||
}
|
||||
|
||||
/// Apply ellipsis in case of overflowing text
|
||||
// Apply ellipsis in case of overflowing text
|
||||
&__ellipsis {
|
||||
display: table-cell;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -20,34 +20,34 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Main content
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Main content
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Content container
|
||||
// Content container
|
||||
.md-content {
|
||||
|
||||
/// [tablet landscape +]: Add space for table of contents
|
||||
// [tablet landscape +]: Add space for table of contents
|
||||
@include break-from-device(tablet landscape) {
|
||||
margin-right: 24.2rem;
|
||||
}
|
||||
|
||||
/// [screen small +]: Add space for table of contents
|
||||
// [screen small +]: Add space for table of contents
|
||||
@include break-from-device(screen small) {
|
||||
margin-left: 24.2rem;
|
||||
}
|
||||
|
||||
/// Define padding
|
||||
// Define padding
|
||||
&__inner {
|
||||
margin: 2.4rem 1.6rem;
|
||||
|
||||
/// [screen small +]: Add space for table of contents
|
||||
// [screen small +]: Add space for table of contents
|
||||
@include break-from-device(screen small) {
|
||||
margin: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/// Copyright and theme information
|
||||
// Copyright and theme information
|
||||
&__copyright {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -20,53 +20,53 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Footer
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Footer
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Application footer
|
||||
// Application footer
|
||||
.md-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
/// Pagination container
|
||||
// Pagination container
|
||||
&-pagination {
|
||||
background: $md-color-black;
|
||||
color: $md-color-white;
|
||||
}
|
||||
|
||||
/// Footer navigation
|
||||
// Footer navigation
|
||||
&-nav {
|
||||
padding: 0.4rem;
|
||||
overflow: auto;
|
||||
|
||||
/// Links to previous and next page
|
||||
// Links to previous and next page
|
||||
&__link {
|
||||
padding-top: 2.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
|
||||
/// [mobile landscape +]: Set proportional width
|
||||
// [mobile landscape +]: Set proportional width
|
||||
@include break-from-device(mobile landscape) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/// Link to previous page
|
||||
// Link to previous page
|
||||
&--prev {
|
||||
width: 25%;
|
||||
float: left;
|
||||
|
||||
/// Title
|
||||
// Title
|
||||
.md-footer-nav__title {
|
||||
|
||||
/// [mobile portrait -]: Hide title for previous page
|
||||
// [mobile portrait -]: Hide title for previous page
|
||||
@include break-to-device(mobile portrait) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Link to next page
|
||||
// Link to next page
|
||||
&--next {
|
||||
width: 75%;
|
||||
float: right;
|
||||
@ -74,7 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Link icon
|
||||
// Link icon
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
margin: 0.4rem;
|
||||
@ -84,13 +84,13 @@
|
||||
font-size: 2.4rem;
|
||||
cursor: pointer;
|
||||
|
||||
/// Pushed/clicked icon
|
||||
// Pushed/clicked icon
|
||||
&:active {
|
||||
background: $md-color-white--lightest;
|
||||
}
|
||||
}
|
||||
|
||||
/// Link title
|
||||
// Link title
|
||||
&__title {
|
||||
position: relative;
|
||||
padding: 0 0.4rem;
|
||||
@ -98,7 +98,7 @@
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
|
||||
/// Link direction
|
||||
// Link direction
|
||||
&__direction {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Header
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Header
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Application header (stays always on top)
|
||||
// Application header (stays always on top)
|
||||
.md-header {
|
||||
@include z-depth(2);
|
||||
|
||||
@ -37,11 +37,11 @@
|
||||
color: $md-color-white;
|
||||
z-index: 1;
|
||||
|
||||
/// Navigation within header
|
||||
// Navigation within header
|
||||
&-nav {
|
||||
padding: 0.4rem;
|
||||
|
||||
/// Header icon
|
||||
// Header icon
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -53,22 +53,22 @@
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
/// Pushed/clicked icon
|
||||
// Pushed/clicked icon
|
||||
&:active {
|
||||
background: $md-color-white--lightest;
|
||||
}
|
||||
|
||||
/// [tablet +]: Hide the search icon from tablet
|
||||
// [tablet +]: Hide the search icon from tablet
|
||||
@include break-from-device(tablet) {
|
||||
|
||||
/// Search icon
|
||||
// Search icon
|
||||
&.md-icon--search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Header title
|
||||
// Header title
|
||||
&__title {
|
||||
padding: 0 2.0rem;
|
||||
font-size: 1.8rem;
|
||||
|
||||
@ -20,65 +20,65 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Navigation
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Navigation
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Nested navigation
|
||||
// Nested navigation
|
||||
.md-nav {
|
||||
|
||||
/// Set font sizes
|
||||
// Set font sizes
|
||||
&,
|
||||
h3 {
|
||||
font-size: ms(-1);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/// Table of contents
|
||||
// Table of contents
|
||||
&--toc {
|
||||
border-left: px2rem(4px) solid $md-color-primary;
|
||||
}
|
||||
|
||||
/// List of items
|
||||
// List of items
|
||||
&__list {
|
||||
list-style: none;
|
||||
|
||||
/// 2nd+ level list
|
||||
// 2nd+ level list
|
||||
& & {
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
/// Hide list by default
|
||||
// Hide list by default
|
||||
.md-nav__toggle ~ & {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/// Expand list, if toggle is checked
|
||||
// Expand list, if toggle is checked
|
||||
.md-nav__toggle:checked ~ & {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/// List item
|
||||
// List item
|
||||
&__item {
|
||||
margin: 0.8rem 0 0;
|
||||
line-height: 1.6rem;
|
||||
}
|
||||
|
||||
/// Link inside item
|
||||
// Link inside item
|
||||
&__link {
|
||||
display: block;
|
||||
transition: color 0.125s;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
/// Marked item
|
||||
// Marked item
|
||||
&--marked {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
/// Current or hovered item
|
||||
// Current or hovered item
|
||||
&:hover,
|
||||
&:active,
|
||||
&--active {
|
||||
|
||||
@ -20,19 +20,19 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Search
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Search
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Application search
|
||||
// Application search
|
||||
.md-search {
|
||||
position: relative;
|
||||
|
||||
/// Search overlay
|
||||
// Search overlay
|
||||
&__overlay {
|
||||
display: none;
|
||||
|
||||
/// [mobile -]: Only show overlay on mobile
|
||||
// [mobile -]: Only show overlay on mobile
|
||||
@include break-to-device(mobile) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -49,7 +49,7 @@
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
/// Expanded overlay
|
||||
// Expanded overlay
|
||||
.md-toggle--search:checked ~ .md-header & {
|
||||
transform: scale(40);
|
||||
transition: transform 0.4s,
|
||||
@ -60,29 +60,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Inner wrapper
|
||||
// Inner wrapper
|
||||
&__inner {
|
||||
padding: 0.8rem 0.8rem 0;
|
||||
|
||||
/// [tablet +]: Header-embedded search
|
||||
// [tablet +]: Header-embedded search
|
||||
@include break-from-device(tablet) {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/// Search form
|
||||
// Search form
|
||||
&__form {
|
||||
position: relative;
|
||||
border-radius: px2rem(2px);
|
||||
text-align: right;
|
||||
|
||||
/// [mobile -]: Add drop-shadow on mobile
|
||||
// [mobile -]: Add drop-shadow on mobile
|
||||
@include break-to-device(mobile) {
|
||||
@include z-depth(2);
|
||||
}
|
||||
}
|
||||
|
||||
/// Icon
|
||||
// Icon
|
||||
&__icon {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
@ -91,36 +91,36 @@
|
||||
font-size: 2.4rem;
|
||||
cursor: pointer;
|
||||
|
||||
/// [mobile -]: Use back arrow as search icon
|
||||
// [mobile -]: Use back arrow as search icon
|
||||
@include break-to-device(mobile) {
|
||||
top: 1.2rem;
|
||||
|
||||
/// Hack: @extend doesn't work in media queries, so override manually
|
||||
// Hack: @extend doesn't work in media queries, so override manually
|
||||
&::before {
|
||||
content: "arrow_back";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Search field
|
||||
// Search field
|
||||
&__input {
|
||||
padding: 0 0.8rem 0 6.4rem;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
/// Placeholder and icon color in active state
|
||||
// Placeholder and icon color in active state
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
/// [mobile -]: Full-screen search bar
|
||||
// [mobile -]: Full-screen search bar
|
||||
@include break-to-device(mobile) {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/// [tablet +]: Header-embedded search
|
||||
// [tablet +]: Header-embedded search
|
||||
@include break-from-device(tablet) {
|
||||
width: 23.0rem;
|
||||
height: 4.0rem;
|
||||
@ -132,20 +132,20 @@
|
||||
color: $md-color-white;
|
||||
font-size: ms(0);
|
||||
|
||||
/// Placeholder color
|
||||
// Placeholder color
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
transition: color 0.25s;
|
||||
color: $md-color-white;
|
||||
}
|
||||
|
||||
/// Active search field
|
||||
// Active search field
|
||||
&:focus {
|
||||
width: 40.0rem;
|
||||
background: $md-color-white;
|
||||
color: $md-color-black;
|
||||
|
||||
/// Placeholder and icon color in active state
|
||||
// Placeholder and icon color in active state
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
|
||||
@ -20,27 +20,27 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
/// ---------------------------------------------------------------------------
|
||||
/// Sidebar
|
||||
/// ---------------------------------------------------------------------------
|
||||
// ----------------------------------------------------------------------------
|
||||
// Sidebar
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
/// Sidebar content
|
||||
// Sidebar content
|
||||
.md-sidebar {
|
||||
position: relative;
|
||||
width: 24.2rem;
|
||||
float: left;
|
||||
overflow: visible;
|
||||
|
||||
/// Lock sidebar to container height (account for fixed header)
|
||||
// Lock sidebar to container height (account for fixed header)
|
||||
&.md-js__sidebar--locked {
|
||||
position: fixed;
|
||||
top: 5.6rem;
|
||||
}
|
||||
|
||||
/// [tablet landscape -]: Convert navigation to drawer
|
||||
// [tablet landscape -]: Convert navigation to drawer
|
||||
@include break-to-device(tablet landscape) {
|
||||
|
||||
/// Render primary sidebar as a slideout container
|
||||
// Render primary sidebar as a slideout container
|
||||
&--primary {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -51,16 +51,16 @@
|
||||
background: $md-color-white;
|
||||
z-index: 3;
|
||||
|
||||
/// Just hide drawer, if browser doesn't support 3D transforms
|
||||
// Just hide drawer, if browser doesn't support 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/// Expanded drawer
|
||||
// Expanded drawer
|
||||
.md-toggle--drawer:checked ~ .md-container & {
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
/// Just show drawer, if browser doesn't support 3D transforms
|
||||
// Just show drawer, if browser doesn't support 3D transforms
|
||||
.no-csstransforms3d & {
|
||||
display: block;
|
||||
}
|
||||
@ -68,21 +68,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Secondary sidebar with table of contents
|
||||
// Secondary sidebar with table of contents
|
||||
&--secondary {
|
||||
display: none;
|
||||
|
||||
/// [tablet landscape +]: Show table of contents next to body copy
|
||||
// [tablet landscape +]: Show table of contents next to body copy
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
float: right;
|
||||
|
||||
/// Hack to align right in case of locked sidebar
|
||||
// Hack to align right in case of locked sidebar
|
||||
&.md-js__sidebar--locked {
|
||||
margin-left: 100%;
|
||||
transform: translate(-100%, 0);
|
||||
|
||||
/// [screen small +]: Limit to grid
|
||||
// [screen small +]: Limit to grid
|
||||
@include break-from-device(screen small) {
|
||||
margin-left: 120.0rem;
|
||||
}
|
||||
@ -90,22 +90,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
/// Wrapper for scrolling on overflow
|
||||
// Wrapper for scrolling on overflow
|
||||
&__scrollwrap {
|
||||
margin: 2.4rem 0.4rem;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/// [tablet landscape -]: Adjust margins
|
||||
// [tablet landscape -]: Adjust margins
|
||||
@include break-to-device(tablet landscape) {
|
||||
|
||||
/// Adjust margins for primary scrollbar
|
||||
// Adjust margins for primary scrollbar
|
||||
.md-sidebar--primary & {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Limit height to window, if JavaScript is available
|
||||
// Limit height to window, if JavaScript is available
|
||||
.js & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -114,23 +114,23 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/// Override native scrollbar styles
|
||||
// Override native scrollbar styles
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
|
||||
/// Style scrollbar thumb
|
||||
// Style scrollbar thumb
|
||||
&-thumb {
|
||||
background: $md-color-black--lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Actual sidebar content
|
||||
// Actual sidebar content
|
||||
&__inner {
|
||||
padding: 1.2rem;
|
||||
|
||||
/// [screen small +]: Add line for reference
|
||||
// [screen small +]: Add line for reference
|
||||
@include break-from-device(screen small) {
|
||||
border-right: px2rem(1px) solid $md-color-black--lightest;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user