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;
}

27
test.md
View File

@ -142,13 +142,13 @@ 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 |
| Read/Write | Pull, push | | Read/Write | Pull, push |
| Admin | All of the above, plus update description, create and delete | | Admin | All of the above, plus update description, create and delete |
The alignment of the cells in the source doesn't really matter. The ending pipe The alignment of the cells in the source doesn't really matter. The ending pipe
character is optional (unless the last cell is supposed to be empty). The header character is optional (unless the last cell is supposed to be empty). The header
@ -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.