andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Travis build: 10 [cron]

Browse Source
This commit is contained in:
30secondsofcode
2018-10-09 20:36:52 +00:00
parent 8100a89ff8
commit d6ae3c5f4b
3 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/index.html
View File

File diff suppressed because one or more lines are too long

8
index.html
View File

@ -2008,7 +2008,8 @@ li:not(:last-child) {
padding: 15px; padding: 15px;
} }
.reference:hover > .popout-menu, .reference:hover > .popout-menu,
.reference:focus > .popout-menu { .reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
visibility: visible; visibility: visible;
} }
</code></pre> </code></pre>
@ -2036,7 +2037,8 @@ li:not(:last-child) {
padding: 15px; padding: 15px;
} }
[data-scope="popout-menu.md"] .reference:hover>.popout-menu, [data-scope="popout-menu.md"] .reference:hover>.popout-menu,
[data-scope="popout-menu.md"] .reference:focus>.popout-menu { [data-scope="popout-menu.md"] .reference:focus>.popout-menu,
[data-scope="popout-menu.md"] .reference:focus-within>.popout-menu {
visibility: visible; visibility: visible;
} }
</style> </style>
@ -2048,6 +2050,8 @@ li:not(:last-child) {
<li><code>visibility: hidden</code> hides the popout menu initially and allows for transitions (unlike <code>display: none</code>).</li> <li><code>visibility: hidden</code> hides the popout menu initially and allows for transitions (unlike <code>display: none</code>).</li>
<li><code>.reference:hover &gt; .popout-menu</code> means that when <code>.reference</code> is hovered over, select immediate children with a class of <code>.popout-menu</code> and change their <code>visibility</code> to <code>visible</code>, <li><code>.reference:hover &gt; .popout-menu</code> means that when <code>.reference</code> is hovered over, select immediate children with a class of <code>.popout-menu</code> and change their <code>visibility</code> to <code>visible</code>,
which shows the popout.</li> which shows the popout.</li>
<li><code>.reference:focus &gt; .popout-menu</code> means that when <code>.reference</code> is focused, the popout would be shown.</li>
<li><code>.reference:focus-within &gt; .popout-menu</code> ensures that the popout is shown when the focus is <em>within</em> the reference.</li>
</ol> </ol>
<h4>Browser support</h4> <h4>Browser support</h4>
<div> <div>

2
snippets/popout-menu.md
View File

@ -46,7 +46,7 @@ Reveals an interactive popout menu on hover and focus.
4. `visibility: hidden` hides the popout menu initially and allows for transitions (unlike `display: none`). 4. `visibility: hidden` hides the popout menu initially and allows for transitions (unlike `display: none`).
5. `.reference:hover > .popout-menu` means that when `.reference` is hovered over, select immediate children with a class of `.popout-menu` and change their `visibility` to `visible`, which shows the popout. 5. `.reference:hover > .popout-menu` means that when `.reference` is hovered over, select immediate children with a class of `.popout-menu` and change their `visibility` to `visible`, which shows the popout.
6. `.reference:focus > .popout-menu` means that when `.reference` is focused, the popout would be shown. 6. `.reference:focus > .popout-menu` means that when `.reference` is focused, the popout would be shown.
7. `.reference:focus-within > .popout-menu` ensures that the popout is shown when the focus is *within* the reference. 7. `.reference:focus-within > .popout-menu` ensures that the popout is shown when the focus is _within_ the reference.
#### Browser support #### Browser support