From 013c9a1872b19a48e2884f953ec330154b932c99 Mon Sep 17 00:00:00 2001
From: carljbowman <bowman@media.mit.edu>
Date: Mon, 9 Apr 2018 13:19:05 -0400
Subject: [PATCH] Modified some UI details with new color system
Updates include modifications to interaction states for the following: tabs, add menus, forms, and stage selector.
---
src/components/action-menu/action-menu.css | 7 +++++++
src/components/forms/input.css | 4 ++++
src/components/gui/gui.css | 6 ++++++
src/components/meter/meter.jsx | 2 +-
src/components/sprite-selector/sprite-selector.css | 3 +--
src/components/stage-selector/stage-selector.css | 1 +
6 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index c222216b1..27c2ac7f8 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -35,7 +35,14 @@ $more-button-size: 2.25rem;
border-radius: 100%;
width: $main-button-size;
height: $main-button-size;
+ box-shadow: 0 0 0 4px $motion-transparent;
z-index: 20; /* TODO reorder layout to prevent z-index need */
+ transition: transform, box-shadow 0.5s;
+}
+
+.main-button:hover {
+ transform: scale(1.1);
+ box-shadow: 0 0 0 6px $motion-transparent;
}
.main-icon {
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 8bcff393d..ee1010dbc 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -31,6 +31,10 @@
min-width: 0;
}
+.input-form:hover {
+ border-color: $motion-primary;
+}
+
.input-form:focus {
border-color: $motion-primary;
box-shadow: 0 0 0 0.25rem $motion-transparent;
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 80e736039..508b83b17 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -87,7 +87,12 @@
z-index: 1;
}
+.tab:hover {
+ background-color: $ui-primary;
+}
+
.tab.is-selected {
+ height: 90%;
color: $motion-primary;
background-color: $ui-white;
z-index: 4; /* Make sure selected is always above */
@@ -95,6 +100,7 @@
.tab img {
margin-right: 0.125rem;
+ width: 1.375rem;
filter: grayscale(100%);
}
diff --git a/src/components/meter/meter.jsx b/src/components/meter/meter.jsx
index 8c378037c..2d16ce681 100644
--- a/src/components/meter/meter.jsx
+++ b/src/components/meter/meter.jsx
@@ -42,7 +42,7 @@ const Meter = props => {
/>
))}
<rect
- fill="white"
+ fill="hsla(215, 100%, 95%, 1)"
height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)}
opacity="0.75"
width={width}
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 97cc42c38..14a966180 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -69,8 +69,7 @@
}
.raised {
- background-color: #cce1ff;
- border-color: #8cbcff;
+ background-color: #8cbcff;
transition: all 0.25s ease;
}
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 3fd0342fa..c3d512087 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -73,6 +73,7 @@ $header-height: calc($stage-menu-height - 2px);
width: 100%;
user-select: none;
border-bottom: 1px solid $ui-black-transparent;
+ box-shadow: inset 0 0 4px $ui-black-transparent;
}
.add-button {
--
GitLab