mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Added new admonition classes and finished details
This commit is contained in:
squidfunk
parent
c8d11a83bb
commit
cf78aa3a9a
@ -95,7 +95,7 @@ standard Markdown library does not account for those.
|
||||
|
||||
However, the [PyMdown Extensions][4] package adds an extension called
|
||||
[SuperFences][5], which makes it possible to nest code blocks within other
|
||||
blocks.
|
||||
blocks, respectively Admonition blocks.
|
||||
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions
|
||||
[5]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
@ -128,14 +128,40 @@ Example:
|
||||
sem ut cursus. Nullam sit amet tincidunt ipsum, sit amet elementum turpis.
|
||||
Etiam ipsum quam, mattis in purus vitae, lacinia fermentum enim.
|
||||
|
||||
### Collapsible blocks
|
||||
|
||||
The [Details][6] extension which is also part of the [PyMdown Extensions][4]
|
||||
package adds support for rendering collapsible Admonition blocks. This is
|
||||
useful for FAQs or content that is of secondary nature.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
??? note "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:
|
||||
|
||||
??? note "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.
|
||||
|
||||
By adding a `+` sign directly after the start marker, blocks can be rendered
|
||||
open by default.
|
||||
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||
|
||||
## Types
|
||||
|
||||
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
|
||||
of the inserted block. Following is a list of type qualifiers provided by the
|
||||
Material theme, whereas the default type, and thus fallback for unknown type
|
||||
qualifiers, is [note][6].
|
||||
|
||||
[6]: #note
|
||||
qualifiers, is `note`.
|
||||
|
||||
### Note
|
||||
|
||||
@ -185,6 +211,30 @@ Qualifiers:
|
||||
* `summary`
|
||||
* `tldr`
|
||||
|
||||
### Info
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! info
|
||||
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:
|
||||
|
||||
!!! info
|
||||
|
||||
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:
|
||||
|
||||
* `info`
|
||||
* `todo`
|
||||
|
||||
### Tip
|
||||
|
||||
Example:
|
||||
@ -235,6 +285,31 @@ Qualifiers:
|
||||
* `check`
|
||||
* `done`
|
||||
|
||||
### Question
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
!!! question
|
||||
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:
|
||||
|
||||
!!! question
|
||||
|
||||
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:
|
||||
|
||||
* `question`
|
||||
* `help`
|
||||
* `faq`
|
||||
|
||||
### Warning
|
||||
|
||||
Example:
|
||||
|
||||
@ -38,182 +38,18 @@ markdown_extensions:
|
||||
|
||||
## Usage
|
||||
|
||||
### GitHub Flavored Markdown
|
||||
|
||||
Most of the extensions included in the PyMdown Extensions package try to bring
|
||||
the Markdown experience closer to GitHub Flavored Markdown (GFM).
|
||||
|
||||
The PyMdown Extensions package adds a shorthand to enable all of the included
|
||||
extensions that provide the GFM experience. However, usage of the shorthand is
|
||||
discouraged, because some extensions are not supported, as the Material theme
|
||||
uses some incompatible extensions included in the standard Markdown library.
|
||||
|
||||
#### BetterEm
|
||||
|
||||
[BetterEm][2] improves the handling of emphasis markup (**bold** and *italic*)
|
||||
within Markdown by providing a more sophisticated parser for better detecting
|
||||
start and end tokens. Read the documentation for [usage notes][3].
|
||||
|
||||
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
|
||||
[3]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
|
||||
|
||||
#### Emoji
|
||||
|
||||
[Emoji][4] adds the ability to insert a :shit:-load of emojis that we use in
|
||||
our daily lives. See the [EmojiOne demo][5] for a list of all available
|
||||
emojis. Happy scrolling :tada:
|
||||
|
||||
!!! warning "Legal disclaimer"
|
||||
|
||||
Material has no affiliation with [EmojiOne][6] which is released under
|
||||
[CC BY 4.0][7]. When including EmojiOne images or CSS, please read the
|
||||
[EmojiOne license][8] to ensure proper usage and attribution.
|
||||
|
||||
[4]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||
[5]: https://emoji.codes/
|
||||
[6]: http://emojione.com
|
||||
[7]: https://creativecommons.org/licenses/by/4.0/legalcode
|
||||
[8]: http://emojione.com/licensing/
|
||||
|
||||
#### MagicLink
|
||||
|
||||
[MagicLink][9] detects links in Markdown and auto-generates the necessary
|
||||
markup, so no special syntax is required. It auto-links `http[s]://` and
|
||||
`ftp://` links, as well as references to email addresses.
|
||||
|
||||
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
|
||||
|
||||
#### SuperFences
|
||||
|
||||
[SuperFences][10] provides the ability to nest code blocks under blockquotes,
|
||||
lists and other block elements, which the [Fenced Code Blocks][11] extension
|
||||
from the standard Markdown library doesn't parse correctly.
|
||||
|
||||
[10]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[11]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
|
||||
|
||||
#### Tasklist
|
||||
|
||||
[Tasklist][12] adds support for styled checkbox lists. This is useful for
|
||||
keeping track of tasks and showing what has been done and has yet to be done.
|
||||
Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
|
||||
`[x]` for filled checkboxes.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
* [x] Nulla lobortis egestas semper
|
||||
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
|
||||
* [ ] Vestibulum convallis sit amet nisi a tincidunt
|
||||
* [x] In hac habitasse platea dictumst
|
||||
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
||||
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
|
||||
* [ ] Praesent sed risus massa
|
||||
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
* [x] Nulla lobortis egestas semper
|
||||
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
|
||||
* [ ] Vestibulum convallis sit amet nisi a tincidunt
|
||||
* [x] In hac habitasse platea dictumst
|
||||
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
||||
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
|
||||
* [ ] Praesent sed risus massa
|
||||
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
|
||||
|
||||
[12]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
|
||||
#### Tilde
|
||||
|
||||
[Tilde][13] provides an easy way to ~~strike through~~ cross out text.
|
||||
The portion of text that should be erased must be enclosed in two tildes
|
||||
`~~...~~` and the extension will take care of the rest.
|
||||
|
||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
|
||||
### More syntactic sugar
|
||||
|
||||
#### Caret
|
||||
|
||||
[Caret][14] is the sister extension of [Tilde][15] and makes it possible to
|
||||
highlight ^^inserted text^^. The portion of text that should be marked as added
|
||||
must be enclosed in two carets `^^...^^`.
|
||||
|
||||
[14]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
||||
[15]: #tilde
|
||||
|
||||
#### Mark
|
||||
|
||||
[Mark][16] adds the ability to ==highlight text== like it was marked with a
|
||||
==text marker==. The portion of text that should be highlighted must be
|
||||
enclosed in two equal signs `==...==`.
|
||||
|
||||
[16]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
||||
|
||||
#### SmartSymbols
|
||||
|
||||
[SmartSymbols][17] converts markup for special characters into their
|
||||
corresponding symbols, e.g. arrows (<--, -->, <-->), trademark and copyright
|
||||
symbols ((c), (tm), (r)) and fractions (1/2, 1/4, ...).
|
||||
|
||||
[17]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
||||
|
||||
### Critic
|
||||
|
||||
[Critic][18] implements [Critic Markup][19], a Markdown extension that enables
|
||||
the tracking of changes (additions, deletions and comments) on documents.
|
||||
During compilation of the Markdown document, changes can be rendered (default),
|
||||
accepted or rejected.
|
||||
|
||||
Text can be {--deleted--} and replacement text {++added++}. This can also be
|
||||
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
|
||||
possible {>>and comments can be added inline<<}.
|
||||
|
||||
{==
|
||||
|
||||
Formatting can also be applied to blocks, by putting the opening and closing
|
||||
tags on separate lines and adding new lines between the tags and the content.
|
||||
|
||||
==}
|
||||
|
||||
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
||||
[19]: http://criticmarkup.com/
|
||||
|
||||
### Details
|
||||
|
||||
[Details][20] adds collapsible elements that can contain arbitrary content.
|
||||
It's implemented using the HTML5 `details` and `summary` tags and adds the
|
||||
|
||||
???+ note "Open styled details"
|
||||
|
||||
??? danger "Nested details!"
|
||||
And more content again.
|
||||
|
||||
!!! quote "Admonition!"
|
||||
And more content again.
|
||||
|
||||
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||
|
||||
TODO: adjust links!
|
||||
|
||||
### Arithmatex <small>MathJax</small>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
|
||||
|
||||
[Arithmatex][20] integrates Material with [MathJax][21] which parses
|
||||
[Arithmatex][2] integrates Material with [MathJax][3] which parses
|
||||
block-style and inline equations written in TeX markup and outputs them in
|
||||
mathematical notation. See [this thread][22] for a short introduction and quick
|
||||
mathematical notation. See [this thread][4] for a short introduction and quick
|
||||
reference on how to write equations in TeX syntax.
|
||||
|
||||
Besides activating the extension in the `mkdocs.yml`, the MathJax JavaScript
|
||||
runtime needs to be included. This must be done with
|
||||
[additional JavaScript][23]:
|
||||
[additional JavaScript][5]:
|
||||
|
||||
``` yaml
|
||||
extra_javascript:
|
||||
@ -255,10 +91,10 @@ extra_javascript:
|
||||
- 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'
|
||||
```
|
||||
|
||||
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
|
||||
[21]: https://www.mathjax.org/
|
||||
[22]: http://meta.math.stackexchange.com/questions/5020/
|
||||
[23]: ../customization.md#additional-javascript
|
||||
[2]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
|
||||
[3]: https://www.mathjax.org/
|
||||
[4]: http://meta.math.stackexchange.com/questions/5020/
|
||||
[5]: ../customization.md#additional-javascript
|
||||
|
||||
#### Blocks
|
||||
|
||||
@ -292,11 +128,157 @@ Result:
|
||||
|
||||
Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$
|
||||
|
||||
### BetterEm
|
||||
|
||||
[BetterEm][6] improves the handling of emphasis markup (**bold** and *italic*)
|
||||
within Markdown by providing a more sophisticated parser for better detecting
|
||||
start and end tokens. Read the documentation for [usage notes][7].
|
||||
|
||||
[6]: https://facelessuser.github.io/pymdown-extensions/extensions/betterem/
|
||||
[7]: https://facelessuser.github.io/pymdown-extensions/usage_notes/
|
||||
|
||||
### Caret
|
||||
|
||||
[Caret][8] makes it possible to highlight ^^inserted text^^. The portion of
|
||||
text that should be marked as added must be enclosed in two carets `^^...^^`.
|
||||
|
||||
[8]: https://facelessuser.github.io/pymdown-extensions/extensions/caret/
|
||||
|
||||
### Critic
|
||||
|
||||
[Critic][9] implements [Critic Markup][10], a Markdown extension that enables
|
||||
the tracking of changes (additions, deletions and comments) on documents.
|
||||
During compilation of the Markdown document, changes can be rendered (default),
|
||||
accepted or rejected.
|
||||
|
||||
Text can be {--deleted--} and replacement text {++added++}. This can also be
|
||||
combined into {~~one~>a single~~} operation. {==Highlighting==} is also
|
||||
possible {>>and comments can be added inline<<}.
|
||||
|
||||
{==
|
||||
|
||||
Formatting can also be applied to blocks, by putting the opening and closing
|
||||
tags on separate lines and adding new lines between the tags and the content.
|
||||
|
||||
==}
|
||||
|
||||
[9]: https://facelessuser.github.io/pymdown-extensions/extensions/critic/
|
||||
[10]: http://criticmarkup.com/
|
||||
|
||||
### Details
|
||||
|
||||
[Details][11] adds collapsible [Admonition-style blocks][12] which can contain
|
||||
arbitrary content using the HTML5 `details` and `summary` tags. Additionally,
|
||||
all Admonition qualifiers can be used, e.g. `note`, `question`, `warning` etc.
|
||||
|
||||
??? question "How many Prolog programmers does it take to change a lightbulb?"
|
||||
|
||||
Yes.
|
||||
|
||||
[11]: https://facelessuser.github.io/pymdown-extensions/extensions/details/
|
||||
[12]: admonition.md
|
||||
|
||||
### Emoji
|
||||
|
||||
[Emoji][13] adds the ability to insert a :shit:-load of emojis that we use in
|
||||
our daily lives. See the [EmojiOne demo][14] for a list of all available
|
||||
emojis. Happy scrolling :tada:
|
||||
|
||||
!!! warning "Legal disclaimer"
|
||||
|
||||
Material has no affiliation with [EmojiOne][15] which is released under
|
||||
[CC BY 4.0][16]. When including EmojiOne images or CSS, please read the
|
||||
[EmojiOne license][17] to ensure proper usage and attribution.
|
||||
|
||||
[13]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
|
||||
[14]: https://emoji.codes/
|
||||
[15]: http://emojione.com
|
||||
[16]: https://creativecommons.org/licenses/by/4.0/legalcode
|
||||
[17]: http://emojione.com/licensing/
|
||||
|
||||
### InlineHilite
|
||||
|
||||
[InlineHilite][24] adds support for inline code highlighting. It's useful for
|
||||
[InlineHilite][18] adds support for inline code highlighting. It's useful for
|
||||
short snippets included within body copy, e.g. `#!js var test = 0;` and can be
|
||||
achived by prefixing inline code with a shebang and language identifier,
|
||||
e.g. `#!js`.
|
||||
|
||||
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||
[18]: https://facelessuser.github.io/pymdown-extensions/extensions/inlinehilite/
|
||||
|
||||
### MagicLink
|
||||
|
||||
[MagicLink][19] detects links in Markdown and auto-generates the necessary
|
||||
markup, so no special syntax is required. It auto-links `http[s]://` and
|
||||
`ftp://` links, as well as references to email addresses.
|
||||
|
||||
[19]: https://facelessuser.github.io/pymdown-extensions/extensions/magiclink/
|
||||
|
||||
### Mark
|
||||
|
||||
[Mark][20] adds the ability to ==highlight text== like it was marked with a
|
||||
==text marker==. The portion of text that should be highlighted must be
|
||||
enclosed in two equal signs `==...==`.
|
||||
|
||||
[20]: https://facelessuser.github.io/pymdown-extensions/extensions/mark/
|
||||
|
||||
### SmartSymbols
|
||||
|
||||
[SmartSymbols][21] converts markup for special characters into their
|
||||
corresponding symbols, e.g. arrows (<--, -->, <-->), trademark and copyright
|
||||
symbols ((c), (tm), (r)) and fractions (1/2, 1/4, ...).
|
||||
|
||||
[21]: https://facelessuser.github.io/pymdown-extensions/extensions/smartsymbols/
|
||||
|
||||
### SuperFences
|
||||
|
||||
[SuperFences][22] provides the ability to nest code blocks under blockquotes,
|
||||
lists and other block elements, which the [Fenced Code Blocks][23] extension
|
||||
from the standard Markdown library doesn't parse correctly.
|
||||
|
||||
[22]: https://facelessuser.github.io/pymdown-extensions/extensions/superfences/
|
||||
[23]: https://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
|
||||
|
||||
### Tasklist
|
||||
|
||||
[Tasklist][24] adds support for styled checkbox lists. This is useful for
|
||||
keeping track of tasks and showing what has been done and has yet to be done.
|
||||
Checkbox lists are like regular lists, but prefixed with `[ ]` for empty or
|
||||
`[x]` for filled checkboxes.
|
||||
|
||||
Example:
|
||||
|
||||
``` markdown
|
||||
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
* [x] Nulla lobortis egestas semper
|
||||
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
|
||||
* [ ] Vestibulum convallis sit amet nisi a tincidunt
|
||||
* [x] In hac habitasse platea dictumst
|
||||
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
||||
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
|
||||
* [ ] Praesent sed risus massa
|
||||
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
* [x] Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
* [x] Nulla lobortis egestas semper
|
||||
* [x] Curabitur elit nibh, euismod et ullamcorper at, iaculis feugiat est
|
||||
* [ ] Vestibulum convallis sit amet nisi a tincidunt
|
||||
* [x] In hac habitasse platea dictumst
|
||||
* [x] In scelerisque nibh non dolor mollis congue sed et metus
|
||||
* [x] Sed egestas felis quis elit dapibus, ac aliquet turpis mattis
|
||||
* [ ] Praesent sed risus massa
|
||||
* [ ] Aenean pretium efficitur erat, donec pharetra, ligula non scelerisque
|
||||
* [ ] Nulla vel eros venenatis, imperdiet enim id, faucibus nisi
|
||||
|
||||
[24]: https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/
|
||||
|
||||
### Tilde
|
||||
|
||||
[Tilde][25] provides an easy way to ~~strike through~~ cross out text.
|
||||
The portion of text that should be erased must be enclosed in two tildes
|
||||
`~~...~~` and the extension will take care of the rest.
|
||||
|
||||
[25]: https://facelessuser.github.io/pymdown-extensions/extensions/tilde/
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-b57c021441.css
Normal file
1
material/assets/stylesheets/application-b57c021441.css
Normal file
File diff suppressed because one or more lines are too long
@ -39,7 +39,7 @@
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-1df76c4e58.js"></script>
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3fec322ccb.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b57c021441.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02c2a4388f.palette.css">
|
||||
{% endif %}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
// Title
|
||||
.admonition-title {
|
||||
margin: -1.2rem -1.2rem 0;
|
||||
padding: 0.8rem 1.2rem;
|
||||
padding: 0.8rem 1.2rem 0.8rem 4rem;
|
||||
border-bottom: 0.1rem solid transparentize($clr-blue-a200, 0.9);
|
||||
background-color: transparentize($clr-blue-a200, 0.9);
|
||||
font-weight: 700;
|
||||
@ -65,19 +65,21 @@
|
||||
&::before {
|
||||
@extend %md-icon;
|
||||
|
||||
margin-right: 0.8rem;
|
||||
position: absolute;
|
||||
left: 1.2rem;
|
||||
color: $clr-blue-a200;
|
||||
font-size: 2rem;
|
||||
content: "edit";
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
// Build representational classes
|
||||
@each $names, $appearance in (
|
||||
summary tldr: $clr-light-blue-a400 "subject",
|
||||
info todo: $clr-cyan-a700 "info",
|
||||
tip hint important : $clr-teal-a700 "whatshot",
|
||||
success check done: $clr-green-a700 "done",
|
||||
question help faq: $clr-light-green-a700 "help",
|
||||
warning caution attention: $clr-orange-a400 "warning",
|
||||
failure fail missing: $clr-red-a200 "clear",
|
||||
danger error: $clr-red-a400 "flash_on",
|
||||
|
||||
@ -37,12 +37,21 @@
|
||||
// Re-add bottom spacing if block is open
|
||||
&[open] {
|
||||
padding-bottom: 1.2rem;
|
||||
|
||||
> summary::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove bottom border if block is closed
|
||||
&:not([open]) summary {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// TODO specificity problem
|
||||
summary {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
@ -56,5 +65,17 @@
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Icon
|
||||
&::after {
|
||||
@extend %md-icon;
|
||||
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
right: 1.2rem;
|
||||
color: $md-color-black--lighter;
|
||||
font-size: 2rem;
|
||||
content: "keyboard_arrow_down";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user