cargdev/angular
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): implement figure styles (#33259)

Browse Source 
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").

This PR implements those styles defined in PR#28396.

PR Close #33259
This commit is contained in:
Stefanie Fluin
2019-10-18 16:22:06 -07:00
committed by Andrew Kushnir
parent 355e54a410
commit ba29e4d953
46 changed files with 666 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
aio/content/guide/pipes.md
View File

@ -107,8 +107,10 @@ As you click the button, the displayed date alternates between
"**<samp>Friday, April 15, 1988</samp>**".
<figure>
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle">
</div>
</figure>
@ -186,8 +188,10 @@ Now you need a component to demonstrate the pipe.
<code-example path="pipes/src/app/power-booster.component.ts" header="src/app/power-booster.component.ts"></code-example>
<figure>
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/pipes/power-booster.png' alt="Power Booster">
</div>
</figure>
@ -230,8 +234,10 @@ your pipe and two-way data binding with `ngModel`.
<figure>
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator">
</div>
</figure>
@ -307,8 +313,10 @@ The Flying Heroes application extends the
code with checkbox switches and additional displays to help you experience these effects.
<figure>
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/pipes/flying-heroes-anim.gif' alt="Flying Heroes">
</div>
</figure>
@ -486,8 +494,10 @@ both requesting the heroes from the `heroes.json` file.
The component renders as the following:
<figure>
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/pipes/hero-list.png' alt="Hero List">
</div>
</figure>