From 582c39e4bffa7fd99ca77dc74507e7cdb8b2302b Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 16 Aug 2017 11:10:55 -0400
Subject: [PATCH] Differentiate hover state from active state for sprite
selector
---
.../sprite-selector-item/sprite-selector-item.css | 9 ++++++---
src/components/stage-selector/stage-selector.css | 6 +++++-
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index 5aae297c9..60f839356 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -21,12 +21,15 @@
transition: 0.25s ease-out;
}
-.sprite-selector-item:hover, .sprite-selector-item.is-selected {
- border-width: 2px;
- border-color: $motion-primary;
+.sprite-selector-item.is-selected {
+ border: 2px solid $motion-primary;
box-shadow: 0px 0px 0px 3px $motion-transparent;
}
+.sprite-selector-item:hover {
+ border: 2px solid $motion-primary;
+}
+
.sprite-image {
margin: auto;
user-select: none;
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 450580930..b8af4e72e 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -22,11 +22,15 @@ $header-height: calc($stage-menu-height - 2px);
transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}
-.stage-selector:hover, .stage-selector.is-selected {
+.stage-selector.is-selected {
border-color: $motion-primary;
box-shadow: 0px 0px 0px 3px $motion-transparent;
}
+.stage-selector:hover {
+ border-color: $motion-primary;
+}
+
.header {
display: flex;
flex-direction: column;
--
GitLab