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

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
snippets/sibling-fade.md
View File

@ -30,34 +30,6 @@ span {
#### 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.