mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-27 17:00:54 +01:00
Replaced SASS Lint with Stylelint
This commit is contained in:
squidfunk
parent
425daf1156
commit
232e997ddc
129
.sass-lint.yml
129
.sass-lint.yml
@ -1,129 +0,0 @@
|
||||
# Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||
|
||||
# Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
# of this software and associated documentation files (the "Software"), to
|
||||
# deal in the Software without restriction, including without limitation the
|
||||
# rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||
# sell copies of the Software, and to permit persons to whom the Software is
|
||||
# furnished to do so, subject to the following conditions:
|
||||
|
||||
# The above copyright notice and this permission notice shall be included in
|
||||
# all copies or substantial portions of the Software.
|
||||
|
||||
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
# FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||
# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
# IN THE SOFTWARE.
|
||||
|
||||
files:
|
||||
ignore:
|
||||
- node_modules/**
|
||||
- src/assets/stylesheets/extensions/pymdown/_arithmatex.scss
|
||||
- src/assets/stylesheets/extensions/pymdown/_critic.scss
|
||||
- src/assets/stylesheets/extensions/pymdown/_inlinehilite.scss
|
||||
- src/assets/stylesheets/_shame.scss
|
||||
|
||||
options:
|
||||
merge-default-rules: true
|
||||
formatter: stylish
|
||||
|
||||
rules:
|
||||
attribute-quotes: 2
|
||||
bem-depth: 2
|
||||
border-zero: 2
|
||||
brace-style: 2
|
||||
class-name-format:
|
||||
- 2
|
||||
- convention: hyphenatedbem
|
||||
clean-import-paths: 2
|
||||
empty-args: 2
|
||||
empty-line-between-blocks: 2
|
||||
extends-before-declarations: 2
|
||||
extends-before-mixins: 2
|
||||
final-newline: 2
|
||||
function-name-format:
|
||||
- 2
|
||||
- allow-leading-underscore: false
|
||||
force-attribute-nesting: 0
|
||||
force-element-nesting: 0
|
||||
force-pseudo-nesting: 0
|
||||
hex-length:
|
||||
- 2
|
||||
- style: long
|
||||
hex-notation:
|
||||
- 2
|
||||
- style: uppercase
|
||||
id-name-format:
|
||||
- 2
|
||||
indentation: 0
|
||||
leading-zero:
|
||||
- 2
|
||||
- include: true
|
||||
mixin-name-format:
|
||||
- 2
|
||||
- convention: hyphenatedbem
|
||||
- allow-leading-underscore: false
|
||||
mixins-before-declarations:
|
||||
- 2
|
||||
- exclude:
|
||||
- break-at
|
||||
- break-at-orientation
|
||||
- break-at-ratio
|
||||
- break-at-device
|
||||
- break-from-device
|
||||
- break-to-device
|
||||
nesting-depth:
|
||||
- 2
|
||||
- max-depth: 4
|
||||
no-color-keywords: 2
|
||||
no-color-literals: 2
|
||||
no-css-comments: 2
|
||||
no-debug: 2
|
||||
no-duplicate-properties: 0
|
||||
no-empty-rulesets: 2
|
||||
no-important: 2
|
||||
no-invalid-hex: 2
|
||||
no-mergeable-selectors: 0
|
||||
no-misspelled-properties: 0
|
||||
no-qualifying-elements:
|
||||
- 2
|
||||
- allow-element-with-attribute: true
|
||||
no-trailing-zero: 0
|
||||
no-transition-all: 2
|
||||
no-url-protocols: 2
|
||||
no-vendor-prefixes: 0
|
||||
one-declaration-per-line: 2
|
||||
placeholder-name-format:
|
||||
- 2
|
||||
- convention: hyphenatedbem
|
||||
property-sort-order:
|
||||
- 2
|
||||
- order: smacss
|
||||
property-units:
|
||||
- 2
|
||||
- global: [rem, em, s, vh, mm]
|
||||
pseudo-element: 2
|
||||
quotes:
|
||||
- 2
|
||||
- style: double
|
||||
shorthand-values: 2
|
||||
single-line-per-selector: 2
|
||||
space-after-bang: 2
|
||||
space-after-colon: 2
|
||||
space-after-comma: 2
|
||||
space-around-operator: 2
|
||||
space-before-bang: 2
|
||||
space-before-brace: 2
|
||||
space-before-colon: 2
|
||||
space-between-parens: 2
|
||||
trailing-semicolon: 2
|
||||
url-quotes: 2
|
||||
variable-for-property: 2
|
||||
variable-name-format:
|
||||
- 2
|
||||
- convention: hyphenatedbem
|
||||
- allow-leading-underscore: false
|
||||
zero-unit: 2
|
||||
191
.stylelintrc
Normal file
191
.stylelintrc
Normal file
@ -0,0 +1,191 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"plugins": [
|
||||
"stylelint-order",
|
||||
"stylelint-scss"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-empty-line-before": null,
|
||||
"at-rule-no-vendor-prefix": true,
|
||||
"block-opening-brace-space-before": null,
|
||||
"block-closing-brace-newline-after": ["always", {
|
||||
"ignoreAtRules": [
|
||||
"if",
|
||||
"else",
|
||||
"elseif"
|
||||
]
|
||||
}],
|
||||
"color-hex-case": "upper",
|
||||
"color-hex-length": "long",
|
||||
"color-named": "never",
|
||||
"comment-empty-line-before": ["always", {
|
||||
"ignore": ["stylelint-commands"]
|
||||
}],
|
||||
"font-family-name-quotes": "always-where-recommended",
|
||||
"font-weight-notation": "numeric",
|
||||
"function-url-quotes": "always",
|
||||
"no-unknown-animations": true,
|
||||
"order/declaration-block-order": [
|
||||
"custom-properties",
|
||||
"declarations"
|
||||
],
|
||||
"order/declaration-block-properties-specified-order": [
|
||||
"display",
|
||||
"position",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
|
||||
"flex",
|
||||
"flex-basis",
|
||||
"flex-direction",
|
||||
"flex-flow",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-wrap",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"justify-content",
|
||||
"order",
|
||||
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
|
||||
"float",
|
||||
"clear",
|
||||
"clip",
|
||||
|
||||
"columns",
|
||||
"column-gap",
|
||||
"column-fill",
|
||||
"column-rule",
|
||||
"column-span",
|
||||
"column-count",
|
||||
"column-width",
|
||||
|
||||
"transform",
|
||||
"transform-box",
|
||||
"transform-origin",
|
||||
"transform-style",
|
||||
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transition-timing-function",
|
||||
|
||||
"border",
|
||||
"border-top",
|
||||
"border-right",
|
||||
"border-bottom",
|
||||
"border-left",
|
||||
"border-width",
|
||||
"border-top-width",
|
||||
"border-right-width",
|
||||
"border-bottom-width",
|
||||
"border-left-width",
|
||||
|
||||
"border-style",
|
||||
"border-top-style",
|
||||
"border-right-style",
|
||||
"border-bottom-style",
|
||||
"border-left-style",
|
||||
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-bottom-right-radius",
|
||||
|
||||
"border-color",
|
||||
"border-top-color",
|
||||
"border-right-color",
|
||||
"border-bottom-color",
|
||||
"border-left-color",
|
||||
|
||||
"outline",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"outline-style",
|
||||
"outline-width",
|
||||
|
||||
"background",
|
||||
"background-attachment",
|
||||
"background-clip",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-repeat",
|
||||
"background-position",
|
||||
"background-size",
|
||||
|
||||
"color",
|
||||
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-smoothing",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-weight",
|
||||
|
||||
"letter-spacing",
|
||||
"line-height",
|
||||
"list-style",
|
||||
|
||||
"text-align",
|
||||
"text-decoration",
|
||||
"text-indent",
|
||||
"text-overflow",
|
||||
"text-rendering",
|
||||
"text-shadow",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
|
||||
"white-space",
|
||||
"word-spacing",
|
||||
|
||||
"border-collapse",
|
||||
"border-spacing",
|
||||
"box-shadow",
|
||||
"caption-side",
|
||||
"content",
|
||||
"cursor",
|
||||
"empty-cells",
|
||||
"opacity",
|
||||
"overflow",
|
||||
"quotes",
|
||||
"speak",
|
||||
"table-layout",
|
||||
"vertical-align",
|
||||
"visibility",
|
||||
"z-index"
|
||||
],
|
||||
"property-no-vendor-prefix": true,
|
||||
"root-no-standard-properties": true,
|
||||
"selector-class-pattern": "^[a-z0-9]+(-[a-z0-9]+)*(__[a-z]+)?(--[a-z]+)?$",
|
||||
"selector-descendant-combinator-no-non-space": null,
|
||||
"string-quotes": "double",
|
||||
"unit-whitelist": ["rem", "em", "deg", "s", "%", "mm", "vh"],
|
||||
"value-keyword-case": "lower",
|
||||
"value-no-vendor-prefix": true
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,9 @@
|
||||
mkdocs-material-1.0.0 (2016-12-18)
|
||||
mkdocs-material-1.0.0 (2017-01-12)
|
||||
|
||||
The theme has been entirely rewritten from scratch to better reflect the
|
||||
idea of what a documentation theme using the Material Design guidelines
|
||||
should look like. It is heavily inspired by Google's own documentation
|
||||
theme, but doesn't copy it blindly.
|
||||
The theme has been entirely rewritten from scratch.
|
||||
|
||||
* Introduced Webpack for more sophisticated JavaScript bundling
|
||||
* Introduced ESLint and SassLint for code style checks
|
||||
* Introduced ESLint and Stylelint for code style checks
|
||||
* Introduced more accurate Material Design colors and shadows
|
||||
* Introduced modular scales for harmonic font sizing
|
||||
* Introduced git-hooks for better development workflow
|
||||
|
||||
@ -33,7 +33,7 @@ const eslint = new CLIEngine
|
||||
const format = eslint.getFormatter()
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Task: lint SASS sources
|
||||
* Task: lint JavaScript
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
export default (gulp, config) => {
|
||||
|
||||
@ -20,10 +20,7 @@
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import path from "path"
|
||||
import sasslint from "sass-lint"
|
||||
import through from "through2"
|
||||
import util from "gulp-util"
|
||||
import stylelint from "gulp-stylelint"
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Task: lint SASS sources
|
||||
@ -32,65 +29,11 @@ import util from "gulp-util"
|
||||
export default (gulp, config) => {
|
||||
return () => {
|
||||
return gulp.src(`${config.assets.src}/stylesheets/**/*.scss`)
|
||||
|
||||
/* Linting */
|
||||
.pipe(
|
||||
through.obj(function(file, enc, done) {
|
||||
if (file.isNull() || file.isStream())
|
||||
return done()
|
||||
|
||||
/* Lint file using .sass-lint.yml */
|
||||
file.sasslint = sasslint.lintFileText({
|
||||
text: file.contents,
|
||||
format: path.extname(file.path).replace(".", ""),
|
||||
filename: path.relative(process.cwd(), file.path)
|
||||
})
|
||||
|
||||
/* Push file to next stage */
|
||||
this.push(file)
|
||||
done()
|
||||
stylelint({
|
||||
reporters: [
|
||||
{ formatter: "string", console: true }
|
||||
]
|
||||
}))
|
||||
|
||||
/* Print errors */
|
||||
.pipe(
|
||||
through.obj(function(file, enc, done) {
|
||||
sasslint.outputResults([file.sasslint])
|
||||
|
||||
/* Push file to next stage */
|
||||
this.push(file)
|
||||
done()
|
||||
}))
|
||||
|
||||
/* Terminate on error */
|
||||
.pipe(
|
||||
(() => {
|
||||
const errors = []
|
||||
|
||||
/* Gather errors */
|
||||
return through.obj(function(file, enc, done) {
|
||||
const results = file.sasslint
|
||||
|
||||
/* Consider warnings as errors during clean compilation */
|
||||
if (results.errorCount || results.warningCount)
|
||||
errors.push(file)
|
||||
|
||||
/* Push file to next stage */
|
||||
this.push(file)
|
||||
done()
|
||||
|
||||
/* Format errors and terminate */
|
||||
}, function(done) {
|
||||
if (errors.length > 0) {
|
||||
const message = errors.map(file => {
|
||||
return file.relative
|
||||
}).join(", ")
|
||||
|
||||
/* Emit error */
|
||||
this.emit("error", new util.PluginError("eslint",
|
||||
`Terminated with errors in files: ${message}`))
|
||||
}
|
||||
done()
|
||||
})
|
||||
})())
|
||||
}
|
||||
}
|
||||
|
||||
1
material/assets/stylesheets/application-a736c18f69.css
Normal file
1
material/assets/stylesheets/application-a736c18f69.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -36,7 +36,7 @@
|
||||
{% include "partials/fonts.html" %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f676ef69b7.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-a736c18f69.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0352baa348.palette.css">
|
||||
{% endif %}
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
"gulp-rev-replace": "^0.4.3",
|
||||
"gulp-sass": "^2.2.0",
|
||||
"gulp-sourcemaps": "^1.6.0",
|
||||
"gulp-stylelint": "^3.7.0",
|
||||
"gulp-svgmin": "^1.2.2",
|
||||
"gulp-uglify": "^1.5.2",
|
||||
"gulp-util": "^3.0.7",
|
||||
@ -83,8 +84,11 @@
|
||||
"mocha": "^3.1.0",
|
||||
"modularscale-sass": "^2.1.1",
|
||||
"node-notifier": "^4.5.0",
|
||||
"sass-lint": "^1.9.1",
|
||||
"selenium-standalone": "^5.7.2",
|
||||
"stylelint": "^7.7.1",
|
||||
"stylelint-config-standard": "^15.0.1",
|
||||
"stylelint-order": "^0.2.2",
|
||||
"stylelint-scss": "^1.4.1",
|
||||
"through2": "^2.0.1",
|
||||
"vinyl-paths": "^2.1.0",
|
||||
"webpack": "^1.13.1",
|
||||
|
||||
@ -31,12 +31,12 @@ fi
|
||||
`npm bin`/eslint .
|
||||
ESLINT=$?
|
||||
|
||||
# Run Sass-Lint
|
||||
`npm bin`/sass-lint -c .sass-lint.yml -vq
|
||||
SASSLINT=$?
|
||||
# Run Stylelint
|
||||
`npm bin`/stylelint `find src/assets -name *.scss`
|
||||
STYLELINT=$?
|
||||
|
||||
# If one command failed, exit with error
|
||||
if [ $ESLINT == 1 ] || [ $SASSLINT == 1 ]; then
|
||||
if [ $ESLINT -gt 0 ] || [ $STYLELINT -gt 0 ]; then
|
||||
exit 1
|
||||
fi;
|
||||
|
||||
|
||||
@ -32,6 +32,8 @@ $ms-ratio: $major-third;
|
||||
// Variables: breakpoints
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// stylelint-disable unit-whitelist
|
||||
|
||||
// Device-specific breakpoints
|
||||
$break-devices: (
|
||||
mobile: (
|
||||
@ -49,6 +51,8 @@ $break-devices: (
|
||||
)
|
||||
);
|
||||
|
||||
// stylelint-enable unit-whitelist
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables: base colors
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -65,9 +69,9 @@ $md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
|
||||
$md-color-black--transparent: hsla(0, 0%, 0%, 0);
|
||||
|
||||
// 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);
|
||||
$md-color-white: hsla(0, 0%, 100%, 1);
|
||||
$md-color-white--light: hsla(0, 0%, 100%, 0.7);
|
||||
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3);
|
||||
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
|
||||
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
|
||||
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
// Color tile
|
||||
button[data-md-color-primary],
|
||||
button[data-md-color-accent] {
|
||||
width: 13.0rem;
|
||||
width: 13rem;
|
||||
margin-bottom: 0.4rem;
|
||||
padding: 2.4rem 0.8rem 0.4rem;
|
||||
transition:
|
||||
|
||||
7
src/assets/stylesheets/base/.stylelintrc
Normal file
7
src/assets/stylesheets/base/.stylelintrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "../../../../.stylelintrc",
|
||||
"rules": {
|
||||
"font-weight-notation": null,
|
||||
"property-no-vendor-prefix": null
|
||||
}
|
||||
}
|
||||
@ -37,10 +37,6 @@
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
|
||||
// Enable font-smoothing in Webkit and FF
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
// Icon rendered as button
|
||||
&__button {
|
||||
display: inline-block;
|
||||
|
||||
@ -52,18 +52,6 @@ hr {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// Reset link styles
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
// Remove outline on focused or active links
|
||||
&:active,
|
||||
&:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
|
||||
a {
|
||||
-webkit-text-decoration-skip: objects;
|
||||
@ -77,6 +65,18 @@ input {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
// Reset link styles
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
// Remove outline on focused or active links
|
||||
&:active,
|
||||
&:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct font-size in all browsers
|
||||
small {
|
||||
font-size: 80%;
|
||||
|
||||
@ -24,17 +24,19 @@
|
||||
// Rules: font definitions
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Enable font-smoothing in Webkit and FF
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Default fonts
|
||||
body,
|
||||
input {
|
||||
color: $md-color-black;
|
||||
// font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-feature-settings: "kern", "onum", "liga";
|
||||
|
||||
// Enable font-smoothing in Webkit and FF
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 400;
|
||||
|
||||
// Use system fonts, if browser doesn't support webfonts
|
||||
.no-fontface & {
|
||||
@ -48,8 +50,8 @@ code,
|
||||
kbd {
|
||||
color: $md-color-black;
|
||||
// font-family: "Roboto Mono", "Courier New", Courier, monospace;
|
||||
font-weight: 400;
|
||||
font-feature-settings: "kern", "onum", "liga";
|
||||
font-weight: 400;
|
||||
|
||||
// Use system fonts, if browser doesn't support webfonts
|
||||
.no-fontface & {
|
||||
@ -74,12 +76,12 @@ kbd {
|
||||
ul,
|
||||
ol,
|
||||
blockquote {
|
||||
margin: 1.0em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// 1st level headline
|
||||
h1 {
|
||||
margin: 0 0 4.0rem;
|
||||
margin: 0 0 4rem;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(3);
|
||||
font-weight: 300;
|
||||
@ -89,7 +91,7 @@ kbd {
|
||||
|
||||
// 2nd level headline
|
||||
h2 {
|
||||
margin: 4.0rem 0 1.6rem;
|
||||
margin: 4rem 0 1.6rem;
|
||||
font-size: ms(2);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
@ -182,7 +184,7 @@ kbd {
|
||||
padding: 0.0625em * $correct 0;
|
||||
border-radius: 0.2rem;
|
||||
box-shadow:
|
||||
0.25em * $correct 0 0 $md-code-background,
|
||||
+0.25em * $correct 0 0 $md-code-background,
|
||||
-0.25em * $correct 0 0 $md-code-background;
|
||||
word-break: break-word;
|
||||
box-decoration-break: clone;
|
||||
@ -218,8 +220,8 @@ kbd {
|
||||
|
||||
// Unformatted code blocks
|
||||
pre {
|
||||
margin: 1.0em 0;
|
||||
padding: 1.0rem 1.2rem;
|
||||
margin: 1em 0;
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: 0.2rem;
|
||||
line-height: 1.4;
|
||||
overflow: auto;
|
||||
@ -227,8 +229,8 @@ kbd {
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1.0em -1.6rem;
|
||||
padding: 1.0rem 1.6rem;
|
||||
margin: 1em -1.6rem;
|
||||
padding: 1rem 1.6rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -280,7 +282,7 @@ kbd {
|
||||
border-radius: 0.2rem;
|
||||
background-color: transparentize($clr-yellow-500, 0.5);
|
||||
box-shadow:
|
||||
0.25em 0 0 transparentize($clr-yellow-500, 0.5),
|
||||
+0.25em 0 0 transparentize($clr-yellow-500, 0.5),
|
||||
-0.25em 0 0 transparentize($clr-yellow-500, 0.5);
|
||||
word-break: break-word;
|
||||
box-decoration-break: clone;
|
||||
@ -309,8 +311,14 @@ kbd {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
// Ordered lists
|
||||
ol ol {
|
||||
// Unordered and ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 0.625em;
|
||||
padding: 0;
|
||||
|
||||
// Nested ordered lists
|
||||
ol {
|
||||
list-style-type: lower-alpha;
|
||||
|
||||
// Triply nested ordered list
|
||||
@ -319,12 +327,6 @@ kbd {
|
||||
}
|
||||
}
|
||||
|
||||
// Unordered and ordered lists
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 0.625em;
|
||||
padding: 0;
|
||||
|
||||
// List elements
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
@ -358,7 +360,7 @@ kbd {
|
||||
table:not([class]) {
|
||||
@include z-depth(2);
|
||||
|
||||
margin: 2.0em 0;
|
||||
margin: 2em 0;
|
||||
border-radius: 0.2rem;
|
||||
font-size: ms(-1);
|
||||
overflow: hidden;
|
||||
@ -389,7 +391,7 @@ kbd {
|
||||
|
||||
// Table headings
|
||||
th {
|
||||
min-width: 10.0rem;
|
||||
min-width: 10rem;
|
||||
padding: 1.2rem 1.6rem;
|
||||
background-color: $md-color-black--light;
|
||||
color: $md-color-white;
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
position: absolute;
|
||||
left: -2.6rem;
|
||||
color: $md-color-white;
|
||||
font-size: 2.0rem;
|
||||
font-size: 2rem;
|
||||
content: "edit";
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
@ -216,8 +216,8 @@ $codehilite-whitespace: transparent;
|
||||
// If code blocks are wrapped with codehilite, the styles must be adjusted
|
||||
// so the marker stretches to the whole width and the padding is respected
|
||||
.codehilite {
|
||||
margin: 1.0em 0;
|
||||
padding: 1.0rem 1.2rem 0.8rem;
|
||||
margin: 1em 0;
|
||||
padding: 1rem 1.2rem 0.8rem;
|
||||
border-radius: 0.2rem;
|
||||
background-color: $md-code-background;
|
||||
color: $md-code-color;
|
||||
@ -257,7 +257,7 @@ $codehilite-whitespace: transparent;
|
||||
// Block with line numbers
|
||||
.codehilitetable {
|
||||
display: block;
|
||||
margin: 1.0em 0;
|
||||
margin: 1em 0;
|
||||
border-radius: 0.2em;
|
||||
font-size: ms(0);
|
||||
overflow: hidden;
|
||||
@ -286,7 +286,7 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// Add spacing to line number container
|
||||
.linenodiv {
|
||||
padding: 1.0rem 1.2rem 0.8rem;
|
||||
padding: 1rem 1.2rem 0.8rem;
|
||||
|
||||
// Stretch the line number container vertically, so it always aligns with
|
||||
// the code container, even when there's a scrollbar.
|
||||
@ -326,8 +326,8 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1.0em -1.6rem;
|
||||
padding: 1.0rem 1.6rem 0.8rem;
|
||||
margin: 1em -1.6rem;
|
||||
padding: 1rem 1.6rem 0.8rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
@ -338,13 +338,13 @@ $codehilite-whitespace: transparent;
|
||||
|
||||
// [mobile -]: Stretch to whole width
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1.0em -1.6rem;
|
||||
margin: 1em -1.6rem;
|
||||
border-radius: 0;
|
||||
|
||||
// Increase spacing
|
||||
.codehilite,
|
||||
.linenodiv {
|
||||
padding: 1.0rem 1.6rem;
|
||||
padding: 1rem 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
// Permalinks extension
|
||||
.headerlink {
|
||||
display: inline-block;
|
||||
margin-left: 1.0rem;
|
||||
margin-left: 1rem;
|
||||
transform: translate(0, 0.5rem);
|
||||
transition:
|
||||
transform 0.25s 0.25s,
|
||||
@ -84,8 +84,8 @@
|
||||
h2: 0.2rem,
|
||||
h3: 0.4rem,
|
||||
h4: 0.6rem,
|
||||
h5: 1.0rem,
|
||||
h6: 1.0rem
|
||||
h5: 1rem,
|
||||
h6: 1rem
|
||||
) {
|
||||
|
||||
// Un-targeted anchor
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// stylelint-disable selector-class-pattern
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
del.critic {
|
||||
background-color: $codehilite-diff-deleted; // TODO: dependent on order of inclusion
|
||||
box-shadow:
|
||||
0.25em 0 0 $codehilite-diff-deleted,
|
||||
+0.25em 0 0 $codehilite-diff-deleted,
|
||||
-0.25em 0 0 $codehilite-diff-deleted;
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
ins.critic {
|
||||
background-color: $codehilite-diff-inserted;
|
||||
box-shadow:
|
||||
0.25em 0 0 $codehilite-diff-inserted,
|
||||
+0.25em 0 0 $codehilite-diff-inserted,
|
||||
-0.25em 0 0 $codehilite-diff-inserted;
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
background-color: $md-code-background; // TODO: rename, centralize somehow
|
||||
color: $md-code-color;
|
||||
box-shadow:
|
||||
0.25em 0 0 $md-code-background,
|
||||
+0.25em 0 0 $md-code-background,
|
||||
-0.25em 0 0 $md-code-background;
|
||||
|
||||
// Icon
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: 0.45em;
|
||||
left: -2.0em;
|
||||
left: -2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -107,8 +107,7 @@ $break-devices: () !default;
|
||||
@error "Invalid device map: #{$devices}";
|
||||
}
|
||||
}
|
||||
@if type-of($current) == list or
|
||||
type-of($current) == number {
|
||||
@if type-of($current) == list or type-of($current) == number {
|
||||
$current: (default: $current);
|
||||
}
|
||||
@return break-select-min-max($current);
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
@function px2em($size, $base: 16px) {
|
||||
@if unit($size) == px {
|
||||
@if unit($base) == px {
|
||||
@return ($size / $base) * 1.0em;
|
||||
@return ($size / $base) * 1em;
|
||||
} @else {
|
||||
@error "Invalid base: #{$base} - unit must be 'px'";
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@ hr {
|
||||
|
||||
// Template-wide grid
|
||||
.md-grid {
|
||||
max-width: 120.0rem;
|
||||
max-width: 120rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -109,12 +109,14 @@ hr {
|
||||
|
||||
// If the browser supports calc(), no JavaScript is necessary
|
||||
.csscalc & {
|
||||
min-height: calc(100% - #{5.6rem - 3.0rem});
|
||||
min-height: calc(100% - #{5.6rem - 3rem});
|
||||
|
||||
// Hack: Firefox doesn't correctly calculate min-height, as it takes the
|
||||
// top margin into account which leads to the container overflowing its
|
||||
// parent. For this reason we use this hack here to target only Firefox
|
||||
// and see if we can find a better solution later.
|
||||
|
||||
// stylelint-disable-next-line function-url-quotes
|
||||
@-moz-document url-prefix() {
|
||||
& {
|
||||
min-height: calc(100% - 5.6rem);
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
// Link title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
position: relative;
|
||||
padding: 0 2.0rem;
|
||||
padding: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
@ -103,8 +103,8 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-top: -2.0rem;
|
||||
padding: 0 2.0rem;
|
||||
margin-top: -2rem;
|
||||
padding: 0 2rem;
|
||||
color: $md-color-white--light;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -169,7 +169,7 @@
|
||||
|
||||
// Adjust line-height to match height for correct alignment
|
||||
&::before {
|
||||
line-height: 2.0;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
|
||||
// Header title - set line height to match icon for correct alignment
|
||||
&__title {
|
||||
padding: 0 2.0rem;
|
||||
padding: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
@ -125,8 +125,8 @@
|
||||
// [tablet landscape +]: Show the reposistory from tablet
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
width: 23.0rem;
|
||||
max-width: 23.0rem;
|
||||
width: 23rem;
|
||||
max-width: 23rem;
|
||||
padding-right: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// postcss-bem-linter: define nav
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -183,7 +185,7 @@
|
||||
html & .md-nav__title {
|
||||
position: relative;
|
||||
height: 11.2rem;
|
||||
padding: 6.0rem 1.6rem 0.4rem;
|
||||
padding: 6rem 1.6rem 0.4rem;
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
font-weight: 400;
|
||||
@ -197,8 +199,8 @@
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 4.0rem;
|
||||
height: 4.0rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
@ -211,17 +213,20 @@
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
$md-color-white 10%,
|
||||
$md-color-white--transparent),
|
||||
$md-color-white--transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
$md-color-black--lighter,
|
||||
$md-color-black--lightest 35%,
|
||||
$md-color-black--transparent 60%);
|
||||
$md-color-black--transparent 60%
|
||||
);
|
||||
background-attachment: local, scroll;
|
||||
background-color: $md-color-white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2.0rem, 100% 1.0rem;
|
||||
background-size: 100% 2rem, 100% 1rem;
|
||||
|
||||
// End of scrolling shadow definition
|
||||
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
|
||||
|
||||
// Remove border for first list item
|
||||
@ -306,7 +311,7 @@
|
||||
|
||||
// 4th level link
|
||||
.md-nav .md-nav__link {
|
||||
padding-left: 4.0rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
// 5th level link
|
||||
@ -330,7 +335,7 @@
|
||||
display: flex;
|
||||
transform: translateX(100%);
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
|
||||
transform 0.25s cubic-bezier(0.8, 0, 0.6, 1),
|
||||
opacity 0.125s 0.05s;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -344,7 +349,7 @@
|
||||
.csstransforms3d & {
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
|
||||
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.125s 0.125s;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -403,7 +408,7 @@
|
||||
// Animation is only possible if JavaScript is available, as the max-height
|
||||
// property must be calculated before transitioning
|
||||
&[data-md-state="animate"] {
|
||||
transition: max-height 0.25s cubic-bezier(0.86, 0.0, 0.07, 1.0);
|
||||
transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1);
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
|
||||
@ -49,13 +49,13 @@
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 4.0rem;
|
||||
height: 4.0rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 0.3s 0.1s,
|
||||
opacity 0.2s 0.2s;
|
||||
border-radius: 2.0rem;
|
||||
border-radius: 2rem;
|
||||
background-color: $md-color-white;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
@ -103,7 +103,7 @@
|
||||
transform: translateX(5%);
|
||||
transition:
|
||||
left 0s 0.3s,
|
||||
transform 0.15s 0.15s cubic-bezier(0.4, 0.0, 0.2, 1.0),
|
||||
transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.15s 0.15s;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
@ -114,7 +114,7 @@
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
left 0s 0s,
|
||||
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1.0),
|
||||
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 0.15s 0.15s;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -134,12 +134,10 @@
|
||||
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
width: 23.0rem;
|
||||
|
||||
width: 23rem;
|
||||
// Hack: omit jitter when form is resized
|
||||
float: right;
|
||||
|
||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
|
||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
@ -186,7 +184,7 @@
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
width: 100%;
|
||||
height: 4.0rem;
|
||||
height: 4rem;
|
||||
padding-left: 4.8rem;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
@ -269,7 +267,7 @@
|
||||
@include break-from-device(tablet landscape) {
|
||||
@include z-depth(6);
|
||||
|
||||
top: 4.0rem;
|
||||
top: 4rem;
|
||||
transition: opacity 0.4s;
|
||||
opacity: 0;
|
||||
|
||||
@ -290,17 +288,20 @@
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
$md-color-white 10%,
|
||||
$md-color-white--transparent),
|
||||
$md-color-white--transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
$md-color-black--lighter,
|
||||
$md-color-black--lightest 35%,
|
||||
$md-color-black--transparent 60%);
|
||||
$md-color-black--transparent 60%
|
||||
);
|
||||
background-attachment: local, scroll;
|
||||
background-color: $md-color-white;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2.0rem, 100% 1.0rem;
|
||||
background-size: 100% 2rem, 100% 1rem;
|
||||
|
||||
// End of scrolling shadow definition
|
||||
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@ -352,7 +353,7 @@
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(-1);
|
||||
line-height: 4.0rem;
|
||||
line-height: 4rem;
|
||||
|
||||
// [tablet landscape +]: Increase left indent
|
||||
@include break-from-device(tablet landscape) {
|
||||
@ -393,7 +394,7 @@
|
||||
|
||||
// Search result content
|
||||
&__article {
|
||||
margin: 1.0em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// Search result title
|
||||
@ -408,7 +409,7 @@
|
||||
|
||||
// Search result teaser
|
||||
&__teaser {
|
||||
margin: 0.5em 0;;
|
||||
margin: 0.5em 0;
|
||||
color: $md-color-black--light;
|
||||
font-size: ms(-1);
|
||||
line-height: 1.4;
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
height: 100%;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
|
||||
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.25s;
|
||||
background-color: $md-color-white;
|
||||
z-index: 2;
|
||||
@ -99,7 +99,7 @@
|
||||
|
||||
// [screen +]: Limit to grid
|
||||
@include break-from-device(screen) {
|
||||
margin-left: 120.0rem;
|
||||
margin-left: 120rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -109,7 +109,6 @@
|
||||
&__scrollwrap {
|
||||
margin: 2.4rem 0.4rem;
|
||||
overflow-y: scroll;
|
||||
// -webkit-overflow-scrolling: touch; // TODO: problems with iOS
|
||||
|
||||
// [tablet -]: Adjust margins
|
||||
@include break-to-device(tablet) {
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
|
||||
// Show source facts
|
||||
@keyframes md-source__facts--done {
|
||||
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
@ -38,7 +37,6 @@
|
||||
|
||||
// Show source fact
|
||||
@keyframes md-source__fact--done {
|
||||
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
@ -98,7 +96,7 @@
|
||||
// Correct alignment, if icon is present
|
||||
+ .md-source__repository {
|
||||
margin-left: -4.4rem;
|
||||
padding-left: 4.0rem;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,9 +117,9 @@
|
||||
padding: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
list-style-type: none;
|
||||
opacity: 0.75;
|
||||
overflow: auto;
|
||||
list-style-type: none;
|
||||
|
||||
// Show after the data was loaded
|
||||
[data-md-state="done"] & {
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
<!-- Main navigation item with nested items -->
|
||||
<!-- Currently active page -->
|
||||
{% elif nav_item == page %}
|
||||
<li class="md-nav__item">
|
||||
{% set toc = page.toc %}
|
||||
@ -68,7 +68,7 @@
|
||||
{% set toc = (toc | first).children %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Expand active pages -->
|
||||
<!-- Render table of contents, if not empty -->
|
||||
{% if toc and (toc | first) %}
|
||||
<label class="md-nav__link md-nav__link--active" for="toc">
|
||||
{{ nav_item.title }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user