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

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-03-05 18:17:23 +10:00
parent ce531b0030
commit 3972cebd3c
4 changed files with 163 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

21
docs/index.html
View File

File diff suppressed because one or more lines are too long

61
index.html
View File

@ -54,6 +54,7 @@
<a class="sidebar__link" href="#disable-selection"><span>Disable selection</span></a>
<a class="sidebar__link" href="#mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span></a>
<a class="sidebar__link" href="#popout-menu"><span>Popout menu</span></a>
<a class="sidebar__link" href="#sibling-fade"><span>Sibling fade</span></a>
</section>
</div>
</nav>
@ -1520,6 +1521,66 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="sibling-fade"><span>Sibling fade</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
<p>Fades out the siblings of a hovered item.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="sibling-fade"&gt;
&lt;span&gt;Item 1&lt;/span&gt;
&lt;span&gt;Item 2&lt;/span&gt;
&lt;span&gt;Item 3&lt;/span&gt;
&lt;span&gt;Item 4&lt;/span&gt;
&lt;span&gt;Item 5&lt;/span&gt;
&lt;span&gt;Item 6&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">span {
padding: 0 1rem;
transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<nav class="snippet-demo__sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</nav>
</div>
<style>
.snippet-demo__sibling-fade {
cursor: default;
line-height: 2;
vertical-align: middle;
}
.snippet-demo__sibling-fade span {
padding: 1rem;
transition: opacity 0.2s;
}
.snippet-demo__sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
</style>
<h4>Explanation</h4>
<ol>
<li><code>transition: opacity 0.2s</code> specifies that changes to opacity will be transitioned over 0.2 seconds.</li>
<li><code>.sibling-fade:hover span:not(:hover)</code> specifies that when the parent is hovered, select any <code>span</code> children that are not currently being hovered and change their opacity to <code>0.5</code>.</li>
</ol>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
99+%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<!-- tags: interactivity -->
</div>
<div class="snippet">
<h3 id="system-font-stack"><span>System font stack</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
<p>Uses the native font of the operating system to get close to a native app feel.</p>

71
snippets/sibling-fade.md Normal file
View File

@ -0,0 +1,71 @@
### Sibling fade
Fades out the siblings of a hovered item.
#### HTML
```html
<div class="sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</div>
```
#### CSS
```css
span {
padding: 0 1rem;
transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
```
#### Demo
<div class="snippet-demo">
<nav class="snippet-demo__sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</nav>
</div>
<style>
.snippet-demo__sibling-fade {
cursor: default;
line-height: 2;
vertical-align: middle;
}
.snippet-demo__sibling-fade span {
padding: 1rem;
transition: opacity 0.2s;
}
.snippet-demo__sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
</style>
#### Explanation
1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
2. `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children
that are not currently being hovered and change their opacity to `0.5`.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: interactivity -->