From 7d64a9cc0cd92e1256a4f21e07021e46363dbcdd Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Wed, 30 Aug 2017 10:59:16 +0100
Subject: [PATCH] Transform the menu arrow with CSS
---
src/atoms/Menu.js | 6 ++++--
src/atoms/Menu.local.css | 4 ++++
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/atoms/Menu.js b/src/atoms/Menu.js
index ecc67bc8b..32f81ed11 100644
--- a/src/atoms/Menu.js
+++ b/src/atoms/Menu.js
@@ -40,7 +40,9 @@ class Menu extends React.Component {
const { open, selected } = this.state
return (
- <div className={classes.root}>
+ <div className={classnames(classes.root, {
+ [classes.open]: open
+ })}>
<div>
<button
type="button"
@@ -51,7 +53,7 @@ class Menu extends React.Component {
) : (
<span className={classes.placeholder}>{placeholder}</span>
)}
- <span className={classes.arrow}>{ open ? 'â–²' : 'â–¼' }</span>
+ <span className={classes.arrow}>â–¼</span>
</button>
</div>
diff --git a/src/atoms/Menu.local.css b/src/atoms/Menu.local.css
index ac7343c2f..03cdb9f31 100644
--- a/src/atoms/Menu.local.css
+++ b/src/atoms/Menu.local.css
@@ -27,6 +27,10 @@
font-size: 50%;
}
+.open .arrow {
+ transform: scaleY(-1)
+}
+
.menu {
position: absolute;
top: 0;
--
GitLab