From 8a8eb06f655070c8c632d30bf3ef04f30a30b536 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Wed, 14 Dec 2016 11:13:22 -0800
Subject: [PATCH] Update .input style
---
.../src/metabase/admin/datamodel/components/FormInput.jsx | 2 +-
.../metabase/admin/datamodel/components/FormTextArea.jsx | 2 +-
.../admin/datamodel/components/ObjectRetireModal.jsx | 2 +-
frontend/src/metabase/css/core/inputs.css | 6 ++++--
frontend/src/metabase/pulse/components/CardPicker.jsx | 2 +-
frontend/src/metabase/pulse/components/PulseEditName.jsx | 2 +-
.../components/expressions/ExpressionEditorTextfield.jsx | 2 +-
.../components/expressions/ExpressionWidget.jsx | 2 +-
8 files changed, 11 insertions(+), 9 deletions(-)
diff --git a/frontend/src/metabase/admin/datamodel/components/FormInput.jsx b/frontend/src/metabase/admin/datamodel/components/FormInput.jsx
index 9058e9dbc66..0cb68127141 100644
--- a/frontend/src/metabase/admin/datamodel/components/FormInput.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/FormInput.jsx
@@ -12,7 +12,7 @@ export default class FormInput extends Component {
<input
type="text"
placeholder={placeholder}
- className={cx("input full text-default h4", { "border-error": !field.active && field.visited && field.invalid }, className)}
+ className={cx("input full", { "border-error": !field.active && field.visited && field.invalid }, className)}
{...formDomOnlyProps(field)}
/>
);
diff --git a/frontend/src/metabase/admin/datamodel/components/FormTextArea.jsx b/frontend/src/metabase/admin/datamodel/components/FormTextArea.jsx
index c692ee94889..e440768bc3e 100644
--- a/frontend/src/metabase/admin/datamodel/components/FormTextArea.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/FormTextArea.jsx
@@ -12,7 +12,7 @@ export default class FormTextArea extends Component {
return (
<textarea
placeholder={placeholder}
- className={cx("input full text-default h4", { "border-error": !field.active && field.visited && field.invalid }, className)}
+ className={cx("input full", { "border-error": !field.active && field.visited && field.invalid }, className)}
{...formDomOnlyProps(field)}
/>
);
diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx b/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
index 06ac5d4348f..14d02f5fff6 100644
--- a/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/ObjectRetireModal.jsx
@@ -40,7 +40,7 @@ export default class ObjectRetireModal extends Component {
<p>If you're sure you want to retire this {objectType}, please write a quick explanation of why it's being retired:</p>
<textarea
ref="revision_message"
- className="input full text-default h4"
+ className="input full"
placeholder={"This will show up in the activity feed and in an email that will be sent to anyone on your team who created something that uses this " + objectType + "."}
onChange={(e) => this.setState({ valid: !!e.target.value })}
/>
diff --git a/frontend/src/metabase/css/core/inputs.css b/frontend/src/metabase/css/core/inputs.css
index 0dd52730685..25b8f141ecc 100644
--- a/frontend/src/metabase/css/core/inputs.css
+++ b/frontend/src/metabase/css/core/inputs.css
@@ -5,10 +5,12 @@
}
.input, :local(.input) {
+ color: var(--dark-color);
+ font-size: 1.12em;
+ padding: 0.75rem 0.75rem;
border: 1px solid var(--input-border-color);
- padding: 0.8rem 1rem;
- transition: border .3s linear;
border-radius: var(--input-border-radius);
+ transition: border .3s linear;
}
.input--small {
diff --git a/frontend/src/metabase/pulse/components/CardPicker.jsx b/frontend/src/metabase/pulse/components/CardPicker.jsx
index 98af5782b24..1891c520ec5 100644
--- a/frontend/src/metabase/pulse/components/CardPicker.jsx
+++ b/frontend/src/metabase/pulse/components/CardPicker.jsx
@@ -101,7 +101,7 @@ export default class CardPicker extends Component {
<div className="CardPicker flex-full">
<input
ref="input"
- className="input no-focus full h4 text-bold"
+ className="input no-focus full text-bold"
placeholder="Type a question name to filter"
value={this.inputValue}
onFocus={this.onInputFocus}
diff --git a/frontend/src/metabase/pulse/components/PulseEditName.jsx b/frontend/src/metabase/pulse/components/PulseEditName.jsx
index dcb9e3a4cc0..c3c0cbacecf 100644
--- a/frontend/src/metabase/pulse/components/PulseEditName.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditName.jsx
@@ -36,7 +36,7 @@ export default class PulseEditName extends Component {
<div className="my3">
<input
ref="name"
- className={cx("input h4 text-bold text-default", { "border-error": !this.state.valid })}
+ className={cx("input text-bold", { "border-error": !this.state.valid })}
style={{"width":"400px"}}
value={pulse.name || ""}
onChange={this.setName}
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
index f839d50d360..9f3f8dfab36 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
@@ -235,7 +235,7 @@ export default class ExpressionEditorTextfield extends Component {
<div className={cx(S.editor, "relative")}>
<TokenizedInput
ref="input"
- className={cx(S.input, "my1 p1 input block full h4 text-dark", { "border-error": errorMessage })}
+ className={cx(S.input, "my1 input block full", { "border-error": errorMessage })}
type="text"
placeholder={placeholder}
value={this.state.expressionString}
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
index 6db2d44e51c..8cc4de9121d 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
@@ -62,7 +62,7 @@ export default class ExpressionWidget extends Component {
<div className="mt3 h5 text-uppercase text-grey-3 text-bold">Give it a name</div>
<div>
<input
- className="my1 p1 input block full h4 text-dark"
+ className="my1 input block full"
type="text"
value={this.state.name}
placeholder="Something nice and descriptive"
--
GitLab