Skip to content
Permalink
Browse files

Made behaviour of details/summary more obvious (fixes #4740)

  • Loading branch information...
Paul Jackson Paul Jackson
Paul Jackson authored and Paul Jackson committed Mar 6, 2014
1 parent d034fbf commit 3c77a16e2a9f607ae9e6efc517b5c981e1608b60

This file was deleted.

Oops, something went wrong.
@@ -2,7 +2,25 @@
* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
*/
%details-bg-d4d4d4-font-weight-700 {
background: #D4D4D4;
font-weight: 700;
}
summary {
color: #284162;
background: #EBEBEB;
cursor: pointer; /* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
&:hover, &:focus { /* Add focus styles (for keyboard accessibility) */
@extend %details-bg-d4d4d4-font-weight-700;
}
}

details {
&[open] {
summary {
@extend %details-bg-d4d4d4-font-weight-700;
}
}
&:not([open]) {
> {
* {
@@ -12,100 +12,96 @@
---
<p>The HTML5 <code>details</code> and <code>summary</code> elements are used to provide expandable/collapsible content. This component adds support for these elements in browsers that do not already have native support.</p>

<section class="container">
<section>
<h2>Examples</h2>

<div class="row">
<details class="col-sm-12">
<summary>Example 1 (default)</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<th scope="col">Type of Coffee</th>
<th scope="col">Sugar?</th>
</tr>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</details>
</div>

<div class="row">
<details class="col-sm-6 example2">
<summary>Example 2</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<details>
<summary>Example 1</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<th scope="col">Type of Coffee</th>
<th scope="col">Sugar?</th>
</tr>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</details>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</details>

<details class="col-sm-6 example3">
<summary class="text-right">Example 3</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<details>
<summary>Example 2</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<th scope="col">Type of Coffee</th>
<th scope="col">Sugar?</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<th scope="col">Type of Coffee</th>
<th scope="col">Sugar?</th>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</details>

<details>
<summary>Example 3</summary>
<p>Example content that provides more details.</p>
<table>
<caption>Cups of coffee consumed by each delegate</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Cups</th>
<th scope="col">Type of Coffee</th>
<th scope="col">Sugar?</th>
</tr>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Espresso</td>
<td>No</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Decaf</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</details>
</div>
</tbody>
</table>
</details>
</section>
Oops, something went wrong.

0 comments on commit 3c77a16

Please sign in to comment.
You can’t perform that action at this time.