Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve accessibility of notes #2795

Merged
merged 1 commit into from
Apr 26, 2017
Merged

Improve accessibility of notes #2795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Improve accessibility of notes
  • Loading branch information
Joao Fernandes committed Apr 25, 2017
commit 6198dbb64b559655a833498a775c440ed7eb40ba
29 changes: 25 additions & 4 deletions _scss/_notes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,45 @@ blockquote {

blockquote > p:first-child {
margin-top: 0;
font-weight: 700;
color: $info-color;
}

blockquote > p > strong {
color: $info-color;
blockquote > p:first-child::before {
content: 'Note: ';
}

blockquote.warning {
border-left-color: $warning-color;
}

blockquote.warning > p > strong {
blockquote.warning > p:first-child {
color: $warning-color;
}

blockquote.warning > p:first-child::before {
content: 'Important: ';
}

blockquote.danger {
border-left-color: $danger-color;
}

blockquote.danger > p > strong {
blockquote.danger > p:first-child {
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;
}
25 changes: 14 additions & 11 deletions test.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,13 +142,13 @@ might be interesting. You can use them with Markdown or HTML images.

Some tables in markdown and html.

| Permission level | Access |
| ---------------- | ------------- |
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
| | Previous cell is empty. A `--flag` in mono text. |
| Read | Pull |
| Read/Write | Pull, push |
| Admin | All of the above, plus update description, create and delete |
| Permission level | Access |
|:-------------------------------------------------------------------------|:-------------------------------------------------------------|
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
| | Previous cell is empty. A `--flag` in mono text. |
| Read | Pull |
| Read/Write | Pull, push |
| 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
character is optional (unless the last cell is supposed to be empty). The header
Expand Down Expand Up @@ -353,17 +353,20 @@ Bootstrap JS are loaded.

> **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

> Pssst, wanna know something?
>
> And you include a small description here telling users to be on the lookout
> You include a small description here telling users to be on the lookout

> **Be careful out there**
> It's not safe out there, take this Moby with you
>
> Add the `warning` class to your blockquotes if you want to tell users
> to be careful about something.
{: .warning}

> **Ouch, don't do that!**
> Ouch, don't do that!
>
> Use the `danger` class to let people know this is dangerous or they
> should pay close attention to this part of the road.
Expand Down