From cf59188dff4526a358d0386f8113f542e24fffc2 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 09:44:00 -0800
Subject: add more css mixins

---
 frontend/src/components/Form/Input.js  |  2 +-
 frontend/src/components/Form/mixins.js | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'frontend/src/components/Form')

diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js
index e000cfb..7c9e413 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Form/Input.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {Border, DropShadow, InputLike, Rounded} from "./mixins";
+import {Border, DropShadow, InputLike, Rounded, Transition} from "./mixins";
 
 export const Input = styled.input`
   ${Border}
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index 38ea394..64b7cc0 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -4,6 +4,15 @@ export const DropShadow = css`
   box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02);
 `
 
+export const Hover = css`
+  opacity: 0.5;
+  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+  
+  &:focus, &:hover, &:focus span {
+    opacity: 1;
+  }
+`
+
 export const Rounded = css`
   border-radius: 3px;
 `
@@ -13,6 +22,7 @@ export const Border = css`
 `
 
 export const InputLike = css`
+  ${Hover}
   font-family: 'JetBrains Mono', monospace;
   width: 100%;
   font-size: 0.8em;
-- 
cgit v1.2.3