mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 01:50:52 +01:00
Refactored admonition styles to be slightly lighter
This commit is contained in:
squidfunk
parent
130bd9fe0b
commit
46b7e0f5fe
@ -1,57 +1,312 @@
|
||||
# Admonition
|
||||
|
||||
## Variations
|
||||
[Admonition][] is an extension included in the standard Markdown library that
|
||||
makes it possible to add block-styled side content to your documentation, for
|
||||
example summaries, hints, notes or warnings.
|
||||
|
||||
## Installation
|
||||
|
||||
Add the following lines to your `mkdocs.yml`:
|
||||
|
||||
``` yaml
|
||||
markdown_extensions:
|
||||
- admonition
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Admonition blocks follow a simple syntax: every block is started with `!!!`,
|
||||
followed by a single keyword which is used as the [type qualifier](#types) of
|
||||
the block. The content of the block then follows on the next line, indented by
|
||||
four spaces.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
!!! hint "Failure with custom name"
|
||||
### Change the title
|
||||
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
By default, the block title will equal the type qualifier. However, it can
|
||||
easily be changed by adding a quoted string after the type qualifier.
|
||||
|
||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint "Phasellus posuere in sem ut cursus"
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! hint "Phasellus posuere in sem ut cursus"
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
### Remove the title
|
||||
|
||||
Similar to setting a [custom title](#change-the-title), the icon and title can
|
||||
be omitted by providing an empty string after the type qualifier:
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! hint ""
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! hint ""
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
### Embedded code blocks
|
||||
|
||||
Blocks can contain all kinds of text content, including headlines, lists,
|
||||
paragraphs and other blocks – except code blocks, because the parser from the
|
||||
standard Markdown library does not account for those.
|
||||
|
||||
However, the [PyMdown Extensions][] package adds an extension called
|
||||
`superfences`, which makes it possible to nest code blocks within other blocks.
|
||||
|
||||
Example:
|
||||
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
||||
sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
> Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere
|
||||
> sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
``` mysql
|
||||
SELECT
|
||||
Employees.EmployeeID,
|
||||
Employees.Name,
|
||||
Employees.Salary,
|
||||
Manager.Name AS Manager
|
||||
FROM
|
||||
Employees
|
||||
LEFT JOIN
|
||||
Employees AS Manager
|
||||
ON
|
||||
Employees.ManagerID = Manager.EmployeeID
|
||||
WHERE
|
||||
Employees.EmployeeID = '087652';
|
||||
```
|
||||
|
||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
|
||||
TODO: NESTED...
|
||||
## Types
|
||||
|
||||
## Specimen
|
||||
Admonition supports user-defined type qualifiers which may influence the style
|
||||
of the inserted block. Following is a list of type qualifiers supported by the
|
||||
Material theme, whereas the default type, and thus fallback for unknown type
|
||||
qualifiers, is [hint](#hint).
|
||||
|
||||
!!! hint "hint, note <small>default</small>"
|
||||
### Hint
|
||||
|
||||
!!! summary "summary, tldr"
|
||||
This is a very long text, yes. I'm so sorry.
|
||||
Example:
|
||||
|
||||
!!! tip "tip, idea"
|
||||
``` markdown
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
!!! success "success, check, done"
|
||||
Result:
|
||||
|
||||
!!! warning "warning, warn"
|
||||
!!! hint
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
!!! failure "failure, fail, missing"
|
||||
Qualifiers:
|
||||
|
||||
!!! fatal "danger, fatal"
|
||||
* `hint`
|
||||
* `note`
|
||||
|
||||
!!! bug "error, bug"
|
||||
### Summary
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! summary
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! summary
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `summary`
|
||||
* `tldr`
|
||||
|
||||
### Tip
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! tip
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! tip
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `tip`
|
||||
* `idea`
|
||||
|
||||
### Success
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! success
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! success
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `success`
|
||||
* `check`
|
||||
* `done`
|
||||
|
||||
### Warning
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! warning
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! warning
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `warning`
|
||||
* `attention`
|
||||
* `important`
|
||||
|
||||
### Failure
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! failure
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! failure
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `failure`
|
||||
* `fail`
|
||||
* `missing`
|
||||
|
||||
### Danger
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! danger
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! danger
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `danger`
|
||||
* `caution`
|
||||
|
||||
### Error
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! error
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
!!! error
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||
massa, nec semper lorem quam in massa.
|
||||
|
||||
Qualifiers:
|
||||
|
||||
* `error`
|
||||
* `bug`
|
||||
|
||||
[Admonition]: https://pythonhosted.org/Markdown/extensions/admonition.html
|
||||
[PyMdown Extensions]: https://facelessuser.github.io/pymdown-extensions
|
||||
|
||||
@ -79,7 +79,7 @@ $md-icon-padding: $ms-base * 0.5;
|
||||
$md-icon-margin: $ms-base * 0.25;
|
||||
|
||||
// Code blocks
|
||||
$md-code-background: #F7F7F7;
|
||||
$md-code-background: hsla(0, 0%, 0%, 0.035);
|
||||
$md-code-color: #37474F;
|
||||
|
||||
// Keystrokes
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
max-height: 0vh; // TODO: can this be done in percent!?!?!?
|
||||
opacity: 0;
|
||||
transition: opacity .4s, max-height .4s;
|
||||
.md-js__search--locked & {
|
||||
[data-md-locked] & {
|
||||
max-height: 75vh;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -56,9 +56,9 @@
|
||||
position: absolute; // must be absolute, or header nav will stretch
|
||||
background: $md-color-white;
|
||||
// color: red;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest; // TODO: box-shadow inset!
|
||||
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
|
||||
text-align: left; // TODO: wrap with another div for this effect
|
||||
border-radius: 0 0 px2rem(3px) px2rem(3px);
|
||||
border-radius: 0 0 0.3rem 0.3rem;
|
||||
z-index: -1;
|
||||
|
||||
// Override native scrollbar styles
|
||||
@ -108,13 +108,13 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
border-top: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
|
||||
&__item {
|
||||
// background: yellow;
|
||||
|
||||
// border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
// border-top: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
|
||||
|
||||
@ -161,10 +161,10 @@
|
||||
//
|
||||
//
|
||||
// background: $md-color-white;
|
||||
// border-radius: 0 0 px2rem(3px) px2rem(3px);
|
||||
// border-radius: 0 0 0.3rem 0.3rem;
|
||||
// color: #000000;
|
||||
// text-align: left;
|
||||
// border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
// border-top: 0.1rem solid $md-color-black--lightest;
|
||||
// display: none; // TODO: doesnt work due to display: none;
|
||||
// opacity: 0;
|
||||
//
|
||||
@ -181,7 +181,7 @@
|
||||
// }
|
||||
|
||||
.md-search__input:focus {
|
||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
}
|
||||
|
||||
@include break-to-device(mobile landscape) {
|
||||
@ -398,4 +398,6 @@ mark {
|
||||
|
||||
.md-search__output {
|
||||
overflow-y: auto; // necessary for rounded borders
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: integrate stylelint and property order!
|
||||
|
||||
@ -132,7 +132,7 @@ kbd {
|
||||
// Horizontal separators
|
||||
hr {
|
||||
margin: 2.4rem 0;
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
||||
border-bottom: 0.1rem dotted $md-color-black--lighter;
|
||||
}
|
||||
|
||||
// Links
|
||||
@ -223,14 +223,14 @@ kbd {
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.5rem 0.5rem;
|
||||
border: px2rem(1px) solid darken($md-keyboard-background, 20%);
|
||||
border-radius: px2rem(3px);
|
||||
border: 0.1rem solid darken($md-keyboard-background, 20%);
|
||||
border-radius: 0.2rem;
|
||||
border-bottom-color: darken($md-keyboard-background, 25%);
|
||||
background-color: $md-keyboard-background;
|
||||
color: $md-keyboard-color;
|
||||
font-size: 85%;
|
||||
line-height: 1.0rem;
|
||||
box-shadow: 0 #{-(px2rem(1px))} 0
|
||||
box-shadow: 0 -0.1rem 0
|
||||
darken($md-keyboard-background, 30%) inset;
|
||||
vertical-align: 0.1rem;
|
||||
word-break: break-word;
|
||||
@ -250,7 +250,7 @@ kbd {
|
||||
// Blockquotes, possibly nested
|
||||
blockquote {
|
||||
padding-left: 1.2rem;
|
||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||
border-left: 0.4rem solid $md-color-black--lighter;
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
|
||||
@ -26,28 +26,12 @@
|
||||
|
||||
// Admonition extension
|
||||
.admonition {
|
||||
position: relative;
|
||||
margin: 2.0rem 0;
|
||||
padding: 0.8rem 1.6rem;
|
||||
border-left: px2rem(32px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(2px);
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-left: 0.4rem solid $clr-blue-a200;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
background: transparentize($clr-blue-a200, 0.95);
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute; // TODO: inherit icon!
|
||||
top: 0.2rem;
|
||||
left: -2.6rem;
|
||||
float: left;
|
||||
color: $md-color-white;
|
||||
font-family: "Material Icons";
|
||||
font-size: 2.0rem;
|
||||
font-weight: normal;
|
||||
content: "edit";
|
||||
vertical-align: -0.1em;
|
||||
}
|
||||
|
||||
// Title
|
||||
&-title {
|
||||
color: $clr-blue-a400;
|
||||
@ -56,14 +40,24 @@
|
||||
line-height: 2;
|
||||
text-transform: uppercase;
|
||||
|
||||
// Ensure smaller spacing to next element
|
||||
// Remove bottom spacing for title
|
||||
html & {
|
||||
margin-bottom: 1.6rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Ensure smaller spacing to next element
|
||||
// Remove top spacing for first element following title
|
||||
html & + * {
|
||||
margin-top: 1.6rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
|
||||
margin-right: 0.45em;
|
||||
font-size: 2.0rem;
|
||||
content: "edit";
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,9 +76,9 @@
|
||||
summary tldr: $clr-light-blue-a400 "subject",
|
||||
tip idea: $clr-teal-a700 "whatshot",
|
||||
success check done: $clr-green-a400 "done",
|
||||
warning warn: $clr-orange-a400 "warning",
|
||||
warning attention important: $clr-orange-a400 "warning",
|
||||
failure fail missing: $clr-red-a200 "clear",
|
||||
danger fatal: $clr-red-a400 "flash_on",
|
||||
danger caution: $clr-red-a400 "flash_on",
|
||||
error bug: $clr-pink-a400 "bug_report"
|
||||
) {
|
||||
$tint: nth($appearance, 1);
|
||||
@ -96,14 +90,14 @@
|
||||
border-color: $tint;
|
||||
background: transparentize($tint, 0.95);
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
content: $icon;
|
||||
}
|
||||
|
||||
// Set color for title
|
||||
.admonition-title {
|
||||
color: $tint;
|
||||
|
||||
// Icon
|
||||
&::before {
|
||||
content: $icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +20,60 @@
|
||||
/// DEALINGS
|
||||
////
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Keywords
|
||||
$codehilite-keyword: #3B78E7;
|
||||
$codehilite-keyword-declaration: #3B78E7;
|
||||
$codehilite-keyword-namespace: #3B78E7;
|
||||
$codehilite-keyword-reserved: #3E61A2;
|
||||
$codehilite-keyword-type: #3E61A2;
|
||||
|
||||
// Comments
|
||||
$codehilite-comment: #999999;
|
||||
$codehilite-comment-multiline: #999999;
|
||||
$codehilite-comment-preproc: #666666;
|
||||
$codehilite-comment-single: #999999;
|
||||
$codehilite-comment-special: #999999;
|
||||
|
||||
// Names
|
||||
$codehilite-name-attribute: #C2185B;
|
||||
$codehilite-name-builtin: #C2185B;
|
||||
$codehilite-name-builtin-pseudo: #3E61A2;
|
||||
$codehilite-name-class: #C2185B;
|
||||
$codehilite-name-constant: #3E61A2;
|
||||
$codehilite-name-decorator: #666666;
|
||||
$codehilite-name-entity: #666666;
|
||||
$codehilite-name-exception: #C2185B;
|
||||
$codehilite-name-function: #C2185B;
|
||||
$codehilite-name-label: #3B5179;
|
||||
$codehilite-name-namespace: #EC407A;
|
||||
$codehilite-name-tag: #3B78E7;
|
||||
$codehilite-name-variable: #3E61A2;
|
||||
$codehilite-name-variable-class: #3E61A2;
|
||||
$codehilite-name-variable-instance: #3E61A2;
|
||||
$codehilite-name-variable-global: #3E61A2;
|
||||
$codehilite-name-extension: #EC407A;
|
||||
|
||||
// Literals
|
||||
$codehilite-literal-string: #0D904F; // #1eec86 for dark background
|
||||
$codehilite-literal-string-backticks: #0D904F;
|
||||
$codehilite-literal-string-char: #0D904F;
|
||||
$codehilite-literal-string-doc: #999999;
|
||||
$codehilite-literal-string-double: #0D904F;
|
||||
$codehilite-literal-string-single: #0D904F;
|
||||
$codehilite-literal-string-symbol: #0D904F;
|
||||
|
||||
// Numbers
|
||||
$codehilite-literal-number: #E74C3C;
|
||||
$codehilite-literal-number-float: #E74C3C;
|
||||
$codehilite-literal-number-hex: #E74C3C;
|
||||
$codehilite-literal-number-integer: #E74C3C;
|
||||
$codehilite-literal-number-integer-long: #E74C3C;
|
||||
$codehilite-literal-number-oct: #E74C3C;
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// Rules
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -45,62 +99,62 @@
|
||||
.gt { color: #AA0000; } // Generic.Traceback
|
||||
|
||||
// Keywords
|
||||
.k { color: #A71D5D; } // Keyword
|
||||
.k { color: $codehilite-keyword; }
|
||||
.kc { color: #A71D5D; } // Keyword.Constant
|
||||
.kd { color: #A71D5D; } // Keyword.Declaration
|
||||
.kn { color: #A71D5D; } // Keyword.Namespace
|
||||
.kd { color: $codehilite-keyword-declaration; }
|
||||
.kn { color: $codehilite-keyword-namespace; }
|
||||
.kp { color: #A71D5D; } // Keyword.Pseudo
|
||||
.kr { color: #0086B3; } // Keyword.Reserved
|
||||
.kt { color: #0086B3; } // Keyword.Type
|
||||
.kr { color: $codehilite-keyword-reserved; }
|
||||
.kt { color: $codehilite-keyword-type; }
|
||||
|
||||
// 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: $codehilite-comment; }
|
||||
.cm { color: $codehilite-comment-multiline; }
|
||||
.cp { color: $codehilite-comment-preproc; }
|
||||
.c1 { color: $codehilite-comment-single; }
|
||||
.cs { color: $codehilite-comment-special; }
|
||||
|
||||
// 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: $codehilite-name-attribute; }
|
||||
.nb { color: $codehilite-name-builtin; }
|
||||
.bp { color: $codehilite-name-builtin-pseudo; }
|
||||
.nc { color: $codehilite-name-class; }
|
||||
.no { color: $codehilite-name-constant; }
|
||||
.nd { color: $codehilite-name-entity; }
|
||||
.ni { color: $codehilite-name-entity; }
|
||||
.ne { color: $codehilite-name-exception; }
|
||||
.nf { color: $codehilite-name-function; }
|
||||
.nl { color: $codehilite-name-label; }
|
||||
.nn { color: $codehilite-name-namespace; }
|
||||
.nt { color: $codehilite-name-tag; }
|
||||
.nv { color: $codehilite-name-variable; }
|
||||
.vc { color: $codehilite-name-variable-class; }
|
||||
.vg { color: $codehilite-name-variable-global; }
|
||||
.vi { color: $codehilite-name-variable-instance; }
|
||||
.nx { color: $codehilite-name-extension; }
|
||||
.ow { color: inherit; }
|
||||
|
||||
// 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: $codehilite-literal-number; }
|
||||
.mf { color: $codehilite-literal-number-float; }
|
||||
.mh { color: $codehilite-literal-number-hex; }
|
||||
.mi { color: $codehilite-literal-number-integer; }
|
||||
.il { color: $codehilite-literal-number-integer-long; }
|
||||
.mo { color: $codehilite-literal-number-oct; }
|
||||
|
||||
// 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
|
||||
.s { color: $codehilite-literal-string; }
|
||||
.sb { color: $codehilite-literal-string-backticks; }
|
||||
.sc { color: $codehilite-literal-string-char; }
|
||||
.sd { color: $codehilite-literal-string-doc; }
|
||||
.s2 { color: $codehilite-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
|
||||
.s1 { color: $codehilite-literal-string-single; }
|
||||
.ss { color: $codehilite-literal-string-symbol; }
|
||||
|
||||
// Diffs
|
||||
.gd { background-color: #FFDDDD; } // Generic.Deleted
|
||||
|
||||
@ -44,24 +44,3 @@
|
||||
@error "Invalid size: #{$size} - unit must be 'px'";
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
/// Convert font size in px to rem.
|
||||
///
|
||||
/// @group helpers
|
||||
/// @access public
|
||||
/// @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 {
|
||||
@if unit($base) == px {
|
||||
@return ($size / $base) * 1.0rem;
|
||||
} @else {
|
||||
@error "Invalid base: #{$base} - unit must be 'px'";
|
||||
}
|
||||
} @else {
|
||||
@error "Invalid size: #{$size} - unit must be 'px'";
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ body {
|
||||
min-height: 100%;
|
||||
|
||||
// Lock body to viewport height (e.g. in search mode)
|
||||
&.md-js__body--locked {
|
||||
&[data-md-locked] {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -56,7 +56,7 @@ body {
|
||||
// Horizontal separators
|
||||
hr {
|
||||
display: block;
|
||||
height: px2rem(1px);
|
||||
height: 0.1rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
// Table of contents
|
||||
&--secondary {
|
||||
border-left: px2rem(4px) solid $md-color-primary;
|
||||
border-left: 0.4rem solid $md-color-primary;
|
||||
}
|
||||
|
||||
// List title
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
// Search form
|
||||
&__form {
|
||||
position: relative;
|
||||
border-radius: px2rem(2px);
|
||||
border-radius: 0.2rem;
|
||||
text-align: right;
|
||||
|
||||
// [mobile -]: Add drop-shadow on mobile
|
||||
@ -88,7 +88,7 @@
|
||||
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
|
||||
|
||||
// Active search field
|
||||
.md-js__search--locked & {
|
||||
[data-md-locked] & {
|
||||
width: 66.8rem;
|
||||
}
|
||||
}
|
||||
@ -117,7 +117,7 @@
|
||||
// Search field
|
||||
&__input {
|
||||
padding: 0 1.6rem 0 6.4rem;
|
||||
border-radius: px2rem(2px);
|
||||
border-radius: 0.2rem;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// Placeholder and icon color in active state
|
||||
@ -157,8 +157,8 @@
|
||||
}
|
||||
|
||||
// Active search field
|
||||
.md-js__search--locked & {
|
||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||
[data-md-locked] & {
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
background: $md-color-white;
|
||||
color: $md-color-black;
|
||||
text-overflow: none;
|
||||
|
||||
@ -37,8 +37,8 @@
|
||||
top: 5.6rem;
|
||||
}
|
||||
|
||||
// Omit repaint of whole page by promoting primary sidebar - not the
|
||||
// secondary sidebar, because then the thick line becomes jittery
|
||||
// Omit repaint of whole page by promoting primary sidebar to a separate
|
||||
// layer, but not the secondary sidebar to omit jittering
|
||||
&--primary {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
@ -151,7 +151,7 @@
|
||||
|
||||
// [screen +]: Add line for reference
|
||||
@include break-from-device(screen) {
|
||||
border-right: px2rem(1px) solid $md-color-black--lightest;
|
||||
border-right: 0.1rem solid $md-color-black--lightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user