From 31dbee22bf6a85ff6122597673d8277888c070b6 Mon Sep 17 00:00:00 2001 From: Eric Cornelissen Date: Fri, 22 Dec 2017 23:20:01 +0100 Subject: [PATCH] Update hover animation for sort buttons 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. --- index.html | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index ed45712c..3777ab60 100644 --- a/index.html +++ b/index.html @@ -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 @@ - Sort on colors - Sort alphabetically + Sort on colors + Sort alphabetically