mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-28 01:10:58 +01:00
Refactored admonition styles to be slightly lighter
This commit is contained in:
parent
130bd9fe0b
commit
46b7e0f5fe
@ -1,57 +1,312 @@
|
|||||||
# Admonition
|
# 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
|
!!! 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
|
By default, the block title will equal the type qualifier. However, it can
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
easily be changed by adding a quoted string after the type qualifier.
|
||||||
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.
|
|
||||||
|
|
||||||
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
Example:
|
||||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
|
||||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
``` 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 ""
|
!!! hint ""
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
massa, nec semper lorem quam in massa.
|
||||||
sit amet, consectetur adipiscing elit.
|
|
||||||
|
### 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
|
!!! hint
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at nisl ac
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
|
||||||
urna lobortis consectetur ut vitae urna. Donec eu viverra sapien. Nam
|
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
|
||||||
tempor auctor lacus et congue. Quisque id congue velit. Lorem ipsum dolor
|
massa, nec semper lorem quam in massa.
|
||||||
sit amet, consectetur adipiscing elit.
|
|
||||||
|
|
||||||
> Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere
|
``` mysql
|
||||||
> sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
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
|
Nunc eu odio eleifend, blandit leo a, volutpat sapien. Phasellus posuere in
|
||||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
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"
|
Example:
|
||||||
This is a very long text, yes. I'm so sorry.
|
|
||||||
|
|
||||||
!!! 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;
|
$md-icon-margin: $ms-base * 0.25;
|
||||||
|
|
||||||
// Code blocks
|
// Code blocks
|
||||||
$md-code-background: #F7F7F7;
|
$md-code-background: hsla(0, 0%, 0%, 0.035);
|
||||||
$md-code-color: #37474F;
|
$md-code-color: #37474F;
|
||||||
|
|
||||||
// Keystrokes
|
// Keystrokes
|
||||||
|
@ -48,7 +48,7 @@
|
|||||||
max-height: 0vh; // TODO: can this be done in percent!?!?!?
|
max-height: 0vh; // TODO: can this be done in percent!?!?!?
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity .4s, max-height .4s;
|
transition: opacity .4s, max-height .4s;
|
||||||
.md-js__search--locked & {
|
[data-md-locked] & {
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -56,9 +56,9 @@
|
|||||||
position: absolute; // must be absolute, or header nav will stretch
|
position: absolute; // must be absolute, or header nav will stretch
|
||||||
background: $md-color-white;
|
background: $md-color-white;
|
||||||
// color: red;
|
// 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
|
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;
|
z-index: -1;
|
||||||
|
|
||||||
// Override native scrollbar styles
|
// Override native scrollbar styles
|
||||||
@ -108,13 +108,13 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: 0.1rem solid $md-color-black--lightest;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
// background: yellow;
|
// 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;
|
// background: $md-color-white;
|
||||||
// border-radius: 0 0 px2rem(3px) px2rem(3px);
|
// border-radius: 0 0 0.3rem 0.3rem;
|
||||||
// color: #000000;
|
// color: #000000;
|
||||||
// text-align: left;
|
// 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;
|
// display: none; // TODO: doesnt work due to display: none;
|
||||||
// opacity: 0;
|
// opacity: 0;
|
||||||
//
|
//
|
||||||
@ -181,7 +181,7 @@
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
.md-search__input:focus {
|
.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) {
|
@include break-to-device(mobile landscape) {
|
||||||
@ -398,4 +398,6 @@ mark {
|
|||||||
|
|
||||||
.md-search__output {
|
.md-search__output {
|
||||||
overflow-y: auto; // necessary for rounded borders
|
overflow-y: auto; // necessary for rounded borders
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: integrate stylelint and property order!
|
||||||
|
@ -132,7 +132,7 @@ kbd {
|
|||||||
// Horizontal separators
|
// Horizontal separators
|
||||||
hr {
|
hr {
|
||||||
margin: 2.4rem 0;
|
margin: 2.4rem 0;
|
||||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
border-bottom: 0.1rem dotted $md-color-black--lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
@ -223,14 +223,14 @@ kbd {
|
|||||||
kbd {
|
kbd {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.4rem 0.5rem 0.5rem;
|
padding: 0.4rem 0.5rem 0.5rem;
|
||||||
border: px2rem(1px) solid darken($md-keyboard-background, 20%);
|
border: 0.1rem solid darken($md-keyboard-background, 20%);
|
||||||
border-radius: px2rem(3px);
|
border-radius: 0.2rem;
|
||||||
border-bottom-color: darken($md-keyboard-background, 25%);
|
border-bottom-color: darken($md-keyboard-background, 25%);
|
||||||
background-color: $md-keyboard-background;
|
background-color: $md-keyboard-background;
|
||||||
color: $md-keyboard-color;
|
color: $md-keyboard-color;
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
line-height: 1.0rem;
|
line-height: 1.0rem;
|
||||||
box-shadow: 0 #{-(px2rem(1px))} 0
|
box-shadow: 0 -0.1rem 0
|
||||||
darken($md-keyboard-background, 30%) inset;
|
darken($md-keyboard-background, 30%) inset;
|
||||||
vertical-align: 0.1rem;
|
vertical-align: 0.1rem;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
@ -250,7 +250,7 @@ kbd {
|
|||||||
// Blockquotes, possibly nested
|
// Blockquotes, possibly nested
|
||||||
blockquote {
|
blockquote {
|
||||||
padding-left: 1.2rem;
|
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;
|
color: $md-color-black--light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,28 +26,12 @@
|
|||||||
|
|
||||||
// Admonition extension
|
// Admonition extension
|
||||||
.admonition {
|
.admonition {
|
||||||
position: relative;
|
|
||||||
margin: 2.0rem 0;
|
margin: 2.0rem 0;
|
||||||
padding: 0.8rem 1.6rem;
|
padding: 0.8rem 1.2rem;
|
||||||
border-left: px2rem(32px) solid $clr-blue-a200;
|
border-left: 0.4rem solid $clr-blue-a200;
|
||||||
border-radius: px2rem(2px);
|
border-radius: 0 0.2rem 0.2rem 0;
|
||||||
background: transparentize($clr-blue-a200, 0.95);
|
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
|
||||||
&-title {
|
&-title {
|
||||||
color: $clr-blue-a400;
|
color: $clr-blue-a400;
|
||||||
@ -56,14 +40,24 @@
|
|||||||
line-height: 2;
|
line-height: 2;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
// Ensure smaller spacing to next element
|
// Remove bottom spacing for title
|
||||||
html & {
|
html & {
|
||||||
margin-bottom: 1.6rem;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure smaller spacing to next element
|
// Remove top spacing for first element following title
|
||||||
html & + * {
|
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",
|
summary tldr: $clr-light-blue-a400 "subject",
|
||||||
tip idea: $clr-teal-a700 "whatshot",
|
tip idea: $clr-teal-a700 "whatshot",
|
||||||
success check done: $clr-green-a400 "done",
|
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",
|
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"
|
error bug: $clr-pink-a400 "bug_report"
|
||||||
) {
|
) {
|
||||||
$tint: nth($appearance, 1);
|
$tint: nth($appearance, 1);
|
||||||
@ -96,14 +90,14 @@
|
|||||||
border-color: $tint;
|
border-color: $tint;
|
||||||
background: transparentize($tint, 0.95);
|
background: transparentize($tint, 0.95);
|
||||||
|
|
||||||
// Icon
|
|
||||||
&::before {
|
|
||||||
content: $icon;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set color for title
|
// Set color for title
|
||||||
.admonition-title {
|
.admonition-title {
|
||||||
color: $tint;
|
color: $tint;
|
||||||
|
|
||||||
|
// Icon
|
||||||
|
&::before {
|
||||||
|
content: $icon;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,6 +20,60 @@
|
|||||||
/// DEALINGS
|
/// 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
|
// Rules
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
@ -45,62 +99,62 @@
|
|||||||
.gt { color: #AA0000; } // Generic.Traceback
|
.gt { color: #AA0000; } // Generic.Traceback
|
||||||
|
|
||||||
// Keywords
|
// Keywords
|
||||||
.k { color: #A71D5D; } // Keyword
|
.k { color: $codehilite-keyword; }
|
||||||
.kc { color: #A71D5D; } // Keyword.Constant
|
.kc { color: #A71D5D; } // Keyword.Constant
|
||||||
.kd { color: #A71D5D; } // Keyword.Declaration
|
.kd { color: $codehilite-keyword-declaration; }
|
||||||
.kn { color: #A71D5D; } // Keyword.Namespace
|
.kn { color: $codehilite-keyword-namespace; }
|
||||||
.kp { color: #A71D5D; } // Keyword.Pseudo
|
.kp { color: #A71D5D; } // Keyword.Pseudo
|
||||||
.kr { color: #0086B3; } // Keyword.Reserved
|
.kr { color: $codehilite-keyword-reserved; }
|
||||||
.kt { color: #0086B3; } // Keyword.Type
|
.kt { color: $codehilite-keyword-type; }
|
||||||
|
|
||||||
// Comments
|
// Comments
|
||||||
.c { color: #969896; } // Comment
|
.c { color: $codehilite-comment; }
|
||||||
.cm { color: #969896; } // Comment.Multiline
|
.cm { color: $codehilite-comment-multiline; }
|
||||||
.cp { color: #666666; } // Comment.Preproc
|
.cp { color: $codehilite-comment-preproc; }
|
||||||
.c1 { color: #969896; } // Comment.Single
|
.c1 { color: $codehilite-comment-single; }
|
||||||
.cs { color: #969896; } // Comment.Special
|
.cs { color: $codehilite-comment-special; }
|
||||||
|
|
||||||
// Names
|
// Names
|
||||||
.na { color: #795DA3; } // Name.Attribute
|
.na { color: $codehilite-name-attribute; }
|
||||||
.na { color: #795DA3; } // Name.Attribute
|
.nb { color: $codehilite-name-builtin; }
|
||||||
.nb { color: #795DA3; } // Name.Builtin
|
.bp { color: $codehilite-name-builtin-pseudo; }
|
||||||
.bp { color: #795DA3; } // Name.Builtin.Pseudo
|
.nc { color: $codehilite-name-class; }
|
||||||
.nc { color: #795DA3; } // Name.Class
|
.no { color: $codehilite-name-constant; }
|
||||||
.no { color: #795DA3; } // Name.Constant
|
.nd { color: $codehilite-name-entity; }
|
||||||
.nd { color: #795DA3; } // Name.Decorator
|
.ni { color: $codehilite-name-entity; }
|
||||||
.ni { color: #795DA3; } // Name.Entity
|
.ne { color: $codehilite-name-exception; }
|
||||||
.ne { color: #795DA3; } // Name.Exception
|
.nf { color: $codehilite-name-function; }
|
||||||
.nf { color: #795DA3; } // Name.Function
|
.nl { color: $codehilite-name-label; }
|
||||||
.nl { color: #795DA3; } // Name.Label
|
.nn { color: $codehilite-name-namespace; }
|
||||||
.nn { color: #795DA3; } // Name.Namespace
|
.nt { color: $codehilite-name-tag; }
|
||||||
.nt { color: #795DA3; } // Name.Tag
|
.nv { color: $codehilite-name-variable; }
|
||||||
.nv { color: #795DA3; } // Name.Variable
|
.vc { color: $codehilite-name-variable-class; }
|
||||||
.vc { color: #795DA3; } // Name.Variable.Class
|
.vg { color: $codehilite-name-variable-global; }
|
||||||
.vg { color: #795DA3; } // Name.Variable.Global
|
.vi { color: $codehilite-name-variable-instance; }
|
||||||
.vi { color: #795DA3; } // Name.Variable.Instance
|
.nx { color: $codehilite-name-extension; }
|
||||||
.ow { color: inherit; } // Operator.Word
|
.ow { color: inherit; }
|
||||||
|
|
||||||
// Numbers
|
// Numbers
|
||||||
.m { color: #0086B3; } // Literal.Number
|
.m { color: $codehilite-literal-number; }
|
||||||
.mf { color: #0086B3; } // Literal.Number.Float
|
.mf { color: $codehilite-literal-number-float; }
|
||||||
.mh { color: #0086B3; } // Literal.Number.Hex
|
.mh { color: $codehilite-literal-number-hex; }
|
||||||
.mi { color: #0086B3; } // Literal.Number.Integer
|
.mi { color: $codehilite-literal-number-integer; }
|
||||||
.mo { color: #0086B3; } // Literal.Number.Oct
|
.il { color: $codehilite-literal-number-integer-long; }
|
||||||
.il { color: #0086B3; } // Literal.Number.Integer.Long
|
.mo { color: $codehilite-literal-number-oct; }
|
||||||
|
|
||||||
// Strings
|
// Strings
|
||||||
.s { color: #183691; } // Literal.String
|
.s { color: $codehilite-literal-string; }
|
||||||
.sb { color: #183691; } // Literal.String.Backtick
|
.sb { color: $codehilite-literal-string-backticks; }
|
||||||
.sc { color: #183691; } // Literal.String.Char
|
.sc { color: $codehilite-literal-string-char; }
|
||||||
.sd { color: #183691; } // Literal.String.Doc
|
.sd { color: $codehilite-literal-string-doc; }
|
||||||
.s2 { color: #183691; } // Literal.String.Double
|
.s2 { color: $codehilite-literal-string-double; }
|
||||||
.se { color: #183691; } // Literal.String.Escape
|
.se { color: #183691; } // Literal.String.Escape
|
||||||
.sh { color: #183691; } // Literal.String.Heredoc
|
.sh { color: #183691; } // Literal.String.Heredoc
|
||||||
.si { color: #183691; } // Literal.String.Interpol
|
.si { color: #183691; } // Literal.String.Interpol
|
||||||
.sx { color: #183691; } // Literal.String.Other
|
.sx { color: #183691; } // Literal.String.Other
|
||||||
.sr { color: #009926; } // Literal.String.Regex
|
.sr { color: #009926; } // Literal.String.Regex
|
||||||
.s1 { color: #D01040; } // Literal.String.Single
|
.s1 { color: $codehilite-literal-string-single; }
|
||||||
.ss { color: #990073; } // Literal.String.Symbol
|
.ss { color: $codehilite-literal-string-symbol; }
|
||||||
|
|
||||||
// Diffs
|
// Diffs
|
||||||
.gd { background-color: #FFDDDD; } // Generic.Deleted
|
.gd { background-color: #FFDDDD; } // Generic.Deleted
|
||||||
|
@ -44,24 +44,3 @@
|
|||||||
@error "Invalid size: #{$size} - unit must be 'px'";
|
@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%;
|
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 {
|
&[data-md-locked] {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@ -56,7 +56,7 @@ body {
|
|||||||
// Horizontal separators
|
// Horizontal separators
|
||||||
hr {
|
hr {
|
||||||
display: block;
|
display: block;
|
||||||
height: px2rem(1px);
|
height: 0.1rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
// Table of contents
|
// Table of contents
|
||||||
&--secondary {
|
&--secondary {
|
||||||
border-left: px2rem(4px) solid $md-color-primary;
|
border-left: 0.4rem solid $md-color-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
// List title
|
// List title
|
||||||
|
@ -74,7 +74,7 @@
|
|||||||
// Search form
|
// Search form
|
||||||
&__form {
|
&__form {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: px2rem(2px);
|
border-radius: 0.2rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
// [mobile -]: Add drop-shadow on mobile
|
// [mobile -]: Add drop-shadow on mobile
|
||||||
@ -88,7 +88,7 @@
|
|||||||
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.0);
|
||||||
|
|
||||||
// Active search field
|
// Active search field
|
||||||
.md-js__search--locked & {
|
[data-md-locked] & {
|
||||||
width: 66.8rem;
|
width: 66.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -117,7 +117,7 @@
|
|||||||
// Search field
|
// Search field
|
||||||
&__input {
|
&__input {
|
||||||
padding: 0 1.6rem 0 6.4rem;
|
padding: 0 1.6rem 0 6.4rem;
|
||||||
border-radius: px2rem(2px);
|
border-radius: 0.2rem;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
// Placeholder and icon color in active state
|
// Placeholder and icon color in active state
|
||||||
@ -157,8 +157,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Active search field
|
// Active search field
|
||||||
.md-js__search--locked & {
|
[data-md-locked] & {
|
||||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
border-radius: 0.3rem 0.3rem 0 0;
|
||||||
background: $md-color-white;
|
background: $md-color-white;
|
||||||
color: $md-color-black;
|
color: $md-color-black;
|
||||||
text-overflow: none;
|
text-overflow: none;
|
||||||
|
@ -37,8 +37,8 @@
|
|||||||
top: 5.6rem;
|
top: 5.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Omit repaint of whole page by promoting primary sidebar - not the
|
// Omit repaint of whole page by promoting primary sidebar to a separate
|
||||||
// secondary sidebar, because then the thick line becomes jittery
|
// layer, but not the secondary sidebar to omit jittering
|
||||||
&--primary {
|
&--primary {
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
}
|
}
|
||||||
@ -151,7 +151,7 @@
|
|||||||
|
|
||||||
// [screen +]: Add line for reference
|
// [screen +]: Add line for reference
|
||||||
@include break-from-device(screen) {
|
@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