beenull/simple-icons
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update hover animation for sort buttons

Browse source 
The sort button for colors now shows a range of reds when hovered,
whereas the sort button for alphabetic sorting just highlights the
letters when hovered.
This commit is contained in:
Eric Cornelissen 2017-12-22 23:20:01 +01:00
parent 5cb1ffdef0
commit 31dbee22bf
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
index.html
View file

@ -330,13 +330,35 @@
.sort-btn.active {
opacity: 1;
}
.sort-btn:hover {
opacity: .8;
}
.sort-btn:first-of-type {
margin-left: 1rem;
}
.sort-btn:hover {
opacity: 1;
}
.sort-btn:hover path:first-of-type {
opacity: 0.8;
}
#sort-color:hover path:nth-of-type(2) {
fill: #E57373;
}
#sort-color:hover path:nth-of-type(3) {
fill: #F44336;
}
#sort-color:hover path:nth-of-type(4) {
fill: #D32F2F;
}
#sort-color:hover path:nth-of-type(5) {
fill: #B71C1C;
}
#sort-alphabetically:hover path:nth-of-type(2),
#sort-alphabetically:hover path:nth-of-type(3) {
opacity: 1;
}
.grid {
display: flex;
flex-wrap: wrap;
@ -510,8 +532,8 @@
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
</div>
<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort on colors</title><path d="M12.22 10.286h6c.125 0 .228-.04.308-.12a.416.416 0 0 0 .121-.308V7.286a.416.416 0 0 0-.121-.308.417.417 0 0 0-.308-.12h-6a.417.417 0 0 0-.308.12.42.42 0 0 0-.12.308v2.572c0 .125.04.228.12.308.08.08.183.12.308.12zM12.22 3.428h3.429c.125 0 .229-.04.308-.12a.414.414 0 0 0 .12-.308V.429A.414.414 0 0 0 15.648 0H12.22a.418.418 0 0 0-.308.121.42.42 0 0 0-.121.308V3c0 .125.04.228.121.308.08.08.183.12.308.12zM9.22 18.856H6.648V.429a.417.417 0 0 0-.12-.308A.418.418 0 0 0 6.22 0H3.648a.416.416 0 0 0-.428.428v18.428H.648a.398.398 0 0 0-.402.269c-.071.169-.04.326.094.469l4.285 4.285a.482.482 0 0 0 .309.121c.116 0 .219-.04.309-.121l4.271-4.271a.5.5 0 0 0 .134-.321.424.424 0 0 0-.12-.31.418.418 0 0 0-.308-.121zM23.671 20.692a.421.421 0 0 0-.308-.121H12.22c-.125 0-.228.041-.308.121s-.12.183-.12.308v2.571a.413.413 0 0 0 .428.429h11.144a.412.412 0 0 0 .428-.429V21a.414.414 0 0 0-.121-.308zM12.22 17.144h8.571a.422.422 0 0 0 .309-.121.422.422 0 0 0 .121-.309v-2.571a.418.418 0 0 0-.121-.308.421.421 0 0 0-.309-.12H12.22a.417.417 0 0 0-.308.12.417.417 0 0 0-.12.308v2.571c0 .125.04.229.12.309.08.08.183.121.308.121z"/></g></svg>
<svg id="sort-alphabetically" class="sort-btn" aria-labelledby="sort-alphabetically" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-alphabetically">Sort alphabetically</title><path d="M10.097 18.857H7.525V.429A.414.414 0 0 0 7.097 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286a.486.486 0 0 0 .308.119c.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.417.417 0 0 0-.428-.43zM20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.147-.147c.134-.16.228-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.401-.04a.841.841 0 0 0 .101-.007c.04-.004.069-.007.087-.007v.04l-.147.121c-.08.08-.175.2-.281.361l-4.94 7.086V24h7.821v-3.12h-1.62v1.594h.001zM21.977 8.866L18.896 0h-2.169l-3.081 8.866h-.937v1.419h3.843V8.866h-1.004l.63-1.929h3.254l.63 1.929h-1.004v1.419h3.856V8.866h-.937zm-5.358-3.402l.978-2.92c.036-.107.069-.236.101-.388s.047-.232.047-.241l.04-.268h.054c0 .036.009.125.026.268l.161.629.964 2.92h-2.371z"/></g></svg>
<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort on colors</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>
<svg id="sort-alphabetically" class="sort-btn" aria-labelledby="sort-alphabetically" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-alphabetically">Sort alphabetically</title><path d="M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z"/><path d="M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z"/><path d="M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z"/></svg>
</div>
<ul class="grid">
<li class="grid-item grid-item--ad">