]> git.wincent.com - hextrapolate.git/commitdiff
Clean up styles
authorGreg Hurrell <greg@hurrell.net>
Mon, 3 Aug 2015 22:33:43 +0000 (15:33 -0700)
committerGreg Hurrell <greg@hurrell.net>
Mon, 3 Aug 2015 22:33:43 +0000 (15:33 -0700)
src/App.css
src/App.js
src/DynamicField.react.js
src/Field.react.js
src/Label.react.js

index b2bc8a43d9ee95f49f9bb624bee94b721bcaf03c..ca6cea4fbb3304c24a9c4d5a1ec7ea7d1c500f9f 100644 (file)
@@ -1,24 +1,51 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
 body {
-  font-family: 'Courier New';
+  font-family: monospace;
 }
 
-.hextrapolate-input {
+.hextrapolate-footer {
+  text-align: center;
+}
+
+.hextrapolate-field {
+  display: flex;
   flex-grow: 5;
-  font-family: monaco;
+  font-family: monospace;
   font-size: 12px;
 }
 
-.hextrapolate-label {
+.hextrapolate-field input {
+  flex-grow: 80;
+}
+
+.hextrapolate-row {
   display: flex;
-  padding: 8px;
+  margin-bottom: 12px;
+}
+
+.hextrapolate {
+  padding: 0 64px;
 }
 
-.hextrapolate-label-text {
-  flex-basis: 0;
-  flex-grow: 1;
+.hextrapolate h1 {
+  text-align: center;
+}
+
+.hextrapolate-base {
+  display: inline-block;
   font-size: 12px;
   padding-right: 12px;
   text-align: right;
+  width: 128px;
 }
 
 .hextrapolate-copy {
index c86273d7f484ec755a770f72f542b9524999212a..088634a0ca47b90c714612e539786dde907ce462 100644 (file)
@@ -83,6 +83,11 @@ export default class App extends React.Component {
           value={value}
           onValueChange={this._onValueChange}
         />
+        <footer className="hextrapolate-footer">
+          <a href="mailto:greg@hurrell.net">Contact</a>
+          {' | '}
+          <a href="https://github.com/wincent/hextrapolate">Source</a>
+        </footer>
       </div>
     );
   }
index 673cc2d04c640bf9599de9a59acbca5b375a24f5..264571a3c9ffc58227ba97bb15f3e0636b340539 100644 (file)
@@ -42,13 +42,14 @@ export default class DynamicField extends React.Component {
 
   render() {
     return (
-      <label className="hextrapolate-label">
-        <select
-          className="hextrapolate-label-text"
-          onChange={this._onChange}
-          value={this.state.base}>
-          {this._renderOptions()}
-        </select>
+      <label className="hextrapolate-row">
+        <span className="hextrapolate-base">
+          <select
+            onChange={this._onChange}
+            value={this.state.base}>
+            {this._renderOptions()}
+          </select>
+        </span>
         <Field
           base={this.state.base}
           onValueChange={this.props.onValueChange}
index 6331cc4f794730bdfb125fd475ea38c36f5248fa..c5b79834678e7812603c881be63d7bc5ea266b68 100644 (file)
@@ -97,9 +97,8 @@ export default class Field extends React.Component {
 
   render() {
     return (
-      <span>
+      <span className="hextrapolate-field">
         <input
-          className="hextrapolate-input"
           onChange={this._onChange}
           ref={ref => this._input = ref}
           type="text"
index a2abcaaa10aab8e79f9525110264469aef059dff..5d39f02b93537d8678faa35971b287b09480276a 100644 (file)
@@ -16,8 +16,8 @@ export default class Label extends React.Component {
 
   render() {
     return (
-      <label className="hextrapolate-label">
-        <span className="hextrapolate-label-text">
+      <label className="hextrapolate-row">
+        <span className="hextrapolate-base">
           {this.props.text}
         </span>
         {this.props.children}