docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility of notes (#2795)

This commit is contained in:
Joao Fernandes 2017-04-25 20:06:30 -07:00 committed by Misty Stanley-Jones
parent fda9515c57
commit 85bf026404
2 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
_scss/_notes.scss
View File

@ -12,24 +12,45 @@ blockquote {
blockquote > p:first-child { blockquote > p:first-child {
margin-top: 0; margin-top: 0;
font-weight: 700;
color: $info-color;
} }
blockquote > p > strong { blockquote > p:first-child::before {
color: $info-color; content: 'Note: ';
} }
blockquote.warning { blockquote.warning {
border-left-color: $warning-color; border-left-color: $warning-color;
} }
blockquote.warning > p > strong { blockquote.warning > p:first-child {
color: $warning-color; color: $warning-color;
} }
blockquote.warning > p:first-child::before {
content: 'Important: ';
}
blockquote.danger { blockquote.danger {
border-left-color: $danger-color; border-left-color: $danger-color;
} }
blockquote.danger > p > strong { blockquote.danger > p:first-child {
color: $danger-color; color: $danger-color;
} }
blockquote.danger > p:first-child::before {
content: 'Warning: '
}
/* Maintain backwards compatibility with old
* note style
*/
blockquote > p:only-child {
font-weight: inherit;
color: inherit;
}
blockquote > p:only-child::before {
content: none;
}

15
test.md
View File

@ -143,7 +143,7 @@ might be interesting. You can use them with Markdown or HTML images.
Some tables in markdown and html. Some tables in markdown and html.
| Permission level | Access | | Permission level | Access |
| ---------------- | ------------- | |:-------------------------------------------------------------------------|:-------------------------------------------------------------|
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | | | **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
| | Previous cell is empty. A `--flag` in mono text. | | | Previous cell is empty. A `--flag` in mono text. |
| Read | Pull | | Read | Pull |
@ -362,17 +362,20 @@ Bootstrap JS are loaded.
> **Note**: This is a note using the old note style > **Note**: This is a note using the old note style
> **This is a note using the new style** > **Note**: This is a note using
> > the old style and has multiple lines, but a single paragraph
> And you include a small description here telling users to be on the lookout
> **Be careful out there** > Pssst, wanna know something?
>
> You include a small description here telling users to be on the lookout
> It's not safe out there, take this Moby with you
> >
> Add the `warning` class to your blockquotes if you want to tell users > Add the `warning` class to your blockquotes if you want to tell users
> to be careful about something. > to be careful about something.
{: .warning} {: .warning}
> **Ouch, don't do that!** > Ouch, don't do that!
> >
> Use the `danger` class to let people know this is dangerous or they > Use the `danger` class to let people know this is dangerous or they
> should pay close attention to this part of the road. > should pay close attention to this part of the road.