From 7485aabb685d23f23ca49e2ffb0727111002917c Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 18 Jan 2019 12:58:11 -0500
Subject: [PATCH] Remove scale transition from green flag, stop and sound
editor buttons
See #4382 for more info about why, and what we need to follow up on it
---
src/components/green-flag/green-flag.css | 3 +--
src/components/icon-button/icon-button.css | 5 -----
src/components/stop-all/stop-all.css | 11 ++++++-----
src/css/colors.css | 2 +-
4 files changed, 8 insertions(+), 13 deletions(-)
diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index 62b5ffe5f..aa4eb536d 100644
--- a/src/components/green-flag/green-flag.css
+++ b/src/components/green-flag/green-flag.css
@@ -8,11 +8,10 @@
user-select: none;
user-drag: none;
cursor: pointer;
- transition: 0.2s ease-out;
}
.green-flag:hover {
- transform: scale(1.2);
+ background-color: $motion-light-transparent;
}
.green-flag.is-active {
diff --git a/src/components/icon-button/icon-button.css b/src/components/icon-button/icon-button.css
index ebd7fd656..f58ee6f8d 100644
--- a/src/components/icon-button/icon-button.css
+++ b/src/components/icon-button/icon-button.css
@@ -5,16 +5,11 @@
flex-direction: column;
align-items: center;
cursor: pointer;
- transition: 0.2s;
font-size: 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: $motion-primary;
}
-.container:hover {
- transform: scale(1.1);
-}
-
.container + .container {
margin-top: 1.25rem;
}
diff --git a/src/components/stop-all/stop-all.css b/src/components/stop-all/stop-all.css
index b2d878582..da0bcc7b3 100644
--- a/src/components/stop-all/stop-all.css
+++ b/src/components/stop-all/stop-all.css
@@ -1,3 +1,5 @@
+@import "../../css/colors.css";
+
.stop-all {
width: 2rem;
height: 2rem;
@@ -5,15 +7,14 @@
border-radius: 0.25rem;
user-select: none;
cursor: pointer;
- transition: 0.2s ease-out;
}
-.stop-all {
- opacity: 0.5;
+.stop-all:hover {
+ background-color: $motion-light-transparent;
}
-.stop-all:hover {
- transform: scale(1.2);
+.stop-all {
+ opacity: 0.5;
}
.stop-all.is-active {
diff --git a/src/css/colors.css b/src/css/colors.css
index 185091812..3f1701d5c 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -17,7 +17,7 @@ $text-primary-transparent: hsla(225, 15%, 40%, 0.75);
$motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
$motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
$motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
-$motion-light-transparent: hsla(215, 100%, 65%, 0.1); /* 10% transparent version of motion-primary */
+$motion-light-transparent: hsla(215, 100%, 65%, 0.15); /* 15% transparent version of motion-primary */
$red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */
$red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */
--
GitLab