From b5e6eb22a6da98c489c00e6266daa4599e3ce097 Mon Sep 17 00:00:00 2001 From: m5o Date: Tue, 16 Jan 2018 00:49:36 +0200 Subject: Use callout without custom Jekyll plugin. --- _includes/callout-danger-async-methods.md | 5 +++-- _includes/callout-info-mediaqueries-breakpoints.md | 5 +++-- _includes/callout-warning-color-assistive-technologies.md | 5 +++-- _includes/callout.html | 5 +++++ 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 _includes/callout.html (limited to '_includes') diff --git a/_includes/callout-danger-async-methods.md b/_includes/callout-danger-async-methods.md index 89d2e2cab..ca35e0b77 100644 --- a/_includes/callout-danger-async-methods.md +++ b/_includes/callout-danger-async-methods.md @@ -1,7 +1,8 @@ -{% callout danger %} +{% capture callout %} #### Asynchronous methods and transitions All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. [See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="danger" %} diff --git a/_includes/callout-info-mediaqueries-breakpoints.md b/_includes/callout-info-mediaqueries-breakpoints.md index ddf2b3745..d3988ce1a 100644 --- a/_includes/callout-info-mediaqueries-breakpoints.md +++ b/_includes/callout-info-mediaqueries-breakpoints.md @@ -1,3 +1,4 @@ -{% callout info %} +{% capture callout %} Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons. -{% endcallout %} \ No newline at end of file +{% endcapture %} +{% include callout.html content=callout type="info" %} diff --git a/_includes/callout-warning-color-assistive-technologies.md b/_includes/callout-warning-color-assistive-technologies.md index adbc708f6..98214eb58 100644 --- a/_includes/callout-warning-color-assistive-technologies.md +++ b/_includes/callout-warning-color-assistive-technologies.md @@ -1,5 +1,6 @@ -{% callout warning %} +{% capture callout %} ##### Conveying meaning to assistive technologies Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. -{% endcallout %} +{% endcapture %} +{% include callout.html content=callout type="warning" %} diff --git a/_includes/callout.html b/_includes/callout.html new file mode 100644 index 000000000..8ee72de99 --- /dev/null +++ b/_includes/callout.html @@ -0,0 +1,5 @@ +{% comment %} allowed: info danger warning {% endcomment %} +{% assign css_class = include.type | default: "info" %} +
+ {{ include.content | markdownify }} +
-- cgit v1.2.3