Fix errors in generated SassDoc

This commit is contained in:
squidfunk 2016-09-04 17:32:12 +02:00
parent 5e838ecf4f
commit ba788dcaba
19 changed files with 347 additions and 346 deletions

View File

@ -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);

View File

@ -20,9 +20,10 @@
/// DEALINGS
////
/// ---------------------------------------------------------------------------
/// Nothing to see here, move along
/// ---------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// Nothing to see here, move along
// ----------------------------------------------------------------------------
.md-search__suggest {
background: $md-color-white;

View File

@ -20,17 +20,17 @@
/// DEALINGS
////
/// ---------------------------------------------------------------------------
/// Dependencies
/// ---------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// Dependencies
// ----------------------------------------------------------------------------
@import "modular-scale";
@import "material-color";
@import "material-shadows";
/// ---------------------------------------------------------------------------
/// Application
/// ---------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// Application
// ----------------------------------------------------------------------------
@import "helpers/break";
@import "helpers/px2em";

View File

@ -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",

View File

@ -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;
}

View File

@ -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;

View File

@ -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)} {

View File

@ -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
}

View File

@ -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";
}

View File

@ -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,

View File

@ -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,;

View File

@ -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;

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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;

View File

@ -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;
}