Reduce input variants.

Resolves #177.
dev-onenetworkecommerce · Nov 18, 2015 · ae9460c · ae9460c
1 parent a135639
commit ae9460c
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 81 deletions.
diff --git a/docs/dist/script.js b/docs/dist/script.js
@@ -27324,40 +27324,6 @@
 	          ),
 	          _react2["default"].createElement("input", { className: "form-control", type: "text", placeholder: "Enter something", disabled: true })
 	        ),
-	        _react2["default"].createElement(
-	          "section",
-	          { className: "doc-bottom-space-large" },
-	          _react2["default"].createElement(
-	            "h3",
-	            { className: "doc-heading" },
-	            "Variants"
-	          ),
-	          _react2["default"].createElement(
-	            "p",
-	            null,
-	            "To apply, simply add one of the *modifier* classes to .form-control: .-sky, .-emerald, .-sun, .-crimson."
-	          ),
-	          _react2["default"].createElement(
-	            "section",
-	            { className: "doc-bottom-space" },
-	            _react2["default"].createElement("input", { className: "form-control -sky", type: "text", placeholder: "Enter something.." })
-	          ),
-	          _react2["default"].createElement(
-	            "section",
-	            { className: "doc-bottom-space" },
-	            _react2["default"].createElement("input", { className: "form-control -emerald", type: "text", placeholder: "Enter something.." })
-	          ),
-	          _react2["default"].createElement(
-	            "section",
-	            { className: "doc-bottom-space" },
-	            _react2["default"].createElement("input", { className: "form-control -sun", type: "text", placeholder: "Enter something.." })
-	          ),
-	          _react2["default"].createElement(
-	            "section",
-	            null,
-	            _react2["default"].createElement("input", { className: "form-control -crimson", type: "text", placeholder: "Enter something.." })
-	          )
-	        ),
 	        _react2["default"].createElement(
 	          "section",
 	          { className: "doc-bottom-space-large" },

diff --git a/docs/dist/style.css b/docs/dist/style.css
diff --git a/docs/sections/Docs-Forms/index.jsx b/docs/sections/Docs-Forms/index.jsx
@@ -34,26 +34,6 @@ export default class Forms extends React.Component {
           <input className="form-control" type="text" placeholder="Enter something" disabled />
         </section>
 
-        <section className="doc-bottom-space-large">
-          <h3 className="doc-heading">Variants</h3>
-          <p>To apply, simply add one of the *modifier* classes to .form-control: .-sky, .-emerald, .-sun, .-crimson.</p>
-          <section className="doc-bottom-space">
-            <input className="form-control -sky" type="text" placeholder="Enter something.." />
-          </section>
-
-          <section className="doc-bottom-space">
-            <input className="form-control -emerald" type="text" placeholder="Enter something.." />
-          </section>
-
-          <section className="doc-bottom-space">
-            <input className="form-control -sun" type="text" placeholder="Enter something.." />
-          </section>
-
-          <section>
-            <input className="form-control -crimson" type="text" placeholder="Enter something.." />
-          </section>
-        </section>
-
         <section className="doc-bottom-space-large">
           <h3 className="doc-heading">Form Error</h3>
           <p className="lead">You may present form errors with a tooltip-like presentation.</p>

diff --git a/styles/base/_form.scss b/styles/base/_form.scss
@@ -1,10 +1,3 @@
-@mixin form-variant($color) {
-  &,
-  &:focus {
-    border-color: $color;
-  }
-}
-
 .form-control {
   display: block;
   width: 100%;
@@ -28,20 +21,9 @@
     cursor: not-allowed;
   }
 
-  &.-sky {
-    @include form-variant($brand-sky);
-  }
-
-  &.-emerald {
-    @include form-variant($brand-emerald);
-  }
-
-  &.-crimson {
-    @include form-variant($brand-crimson);
-  }
-
-  &.-sun {
-    @include form-variant($brand-sun);
+  &.-crimson,
+  &.-crimson:focus {
+    border-color: $brand-crimson;
   }
 }