From c1f4f6c1592597db1facae04248446c7430b3f56 Mon Sep 17 00:00:00 2001
From: julientaq <julientaq@gmail.com>
Date: Wed, 17 Jan 2018 20:40:23 +0100
Subject: [PATCH] Updated textfield and remove author prop.
---
packages/ui/src/atoms/TextField.js | 3 +-
packages/ui/src/atoms/TextField.local.scss | 32 ++++++++++++----------
2 files changed, 20 insertions(+), 15 deletions(-)
diff --git a/packages/ui/src/atoms/TextField.js b/packages/ui/src/atoms/TextField.js
index 443c52b5c..6c0edb00d 100644
--- a/packages/ui/src/atoms/TextField.js
+++ b/packages/ui/src/atoms/TextField.js
@@ -10,15 +10,16 @@ const TextField = ({
value = '',
onBlur,
onChange,
+ readonly,
}) => (
<label className={classes.root}>
{label && <span className={classes.text}>{label}</span>}
<input
- className={classes.input}
name={name}
onBlur={onBlur}
onChange={onChange}
placeholder={placeholder}
+ readOnly={readonly}
required={required}
type={type}
value={value}
diff --git a/packages/ui/src/atoms/TextField.local.scss b/packages/ui/src/atoms/TextField.local.scss
index 93e5f8d5f..59eb279d1 100644
--- a/packages/ui/src/atoms/TextField.local.scss
+++ b/packages/ui/src/atoms/TextField.local.scss
@@ -11,36 +11,40 @@
margin-right: 10px;
}
-input {
- --color-back: var(--color-primary);
+.root input {
+ --color-back: darkgray;
+ background: linear-gradient(
+ to right,
+ transparent 0%,
+ transparent 2px,
+ white 2px,
+ white 4px
+ ),
+ linear-gradient(white 0%, white 90%, var(--color-back) 95%, white 100%);
+ background-position: 0 0, 0.2em 0;
+ background-repeat: repeat-X, repeat-Y;
+ background-size: 7px 100%, 100% 1.3em;
border: none;
border-left: 1px solid darkgrey;
caret-color: var(--color-primary);
flex: 1;
- font-family: var(--font-local);
+ font-family: var(--font-local), serif;
font-size: inherit;
max-width: 100%;
padding: 0 0.5em;
&:hover,
&:focus {
- background: linear-gradient(
- to right,
- transparent 0%,
- transparent 2px,
- white 2px,
- white 4px
- ),
- linear-gradient(white 0%, white 90%, var(--color-back) 95%, white 100%);
- background-position: 0 0, 0.2em 0;
- background-repeat: repeat-X, repeat-Y;
- background-size: 7px 100%, 100% 1.8em;
border-color: transparent;
box-shadow: none;
outline-style: none;
}
+ &:hover {
+ --color-back: var(--color-primary);
+ }
+
&:focus {
--color-back: #aaa;
}
--
GitLab