From ec67b2d4d6846d3aa04d713d5e6b1597da3d4312 Mon Sep 17 00:00:00 2001
From: Antoine Boulanger <antoineboulangerz@gmail.com>
Date: Thu, 2 Oct 2014 12:56:32 -0400
Subject: [PATCH] forms

---
 project-x/assets/images/check.svg            |  1 +
 project-x/assets/images/select-arrow.svg     |  1 +
 project-x/assets/styles/dist/main.css        | 53 ++++++++++++--
 project-x/assets/styles/src/base/_forms.scss | 73 ++++++++++++++++++--
 project-x/index.html                         | 20 ++++--
 5 files changed, 130 insertions(+), 18 deletions(-)
 create mode 100644 project-x/assets/images/check.svg
 create mode 100644 project-x/assets/images/select-arrow.svg

diff --git a/project-x/assets/images/check.svg b/project-x/assets/images/check.svg
new file mode 100644
index 0000000..2004625
--- /dev/null
+++ b/project-x/assets/images/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13"><path fill="#222" d="M13 1.4l-1.5-1.4-5 5.1-5.1-5.1-1.4 1.4 5.1 5.2-5.1 5 1.5 1.4 5-5 5 5 1.4-1.4-5-5z"/></svg>
\ No newline at end of file
diff --git a/project-x/assets/images/select-arrow.svg b/project-x/assets/images/select-arrow.svg
new file mode 100644
index 0000000..9f48c18
--- /dev/null
+++ b/project-x/assets/images/select-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="7.3" viewBox="0 0 13 7.3"><path fill="#3C3C3B" d="M6.5 7.3l3.3-3.7 3.2-3.6h-13l3.3 3.6z"/></svg>
\ No newline at end of file
diff --git a/project-x/assets/styles/dist/main.css b/project-x/assets/styles/dist/main.css
index ba6037a..71404f0 100644
--- a/project-x/assets/styles/dist/main.css
+++ b/project-x/assets/styles/dist/main.css
@@ -601,8 +601,11 @@ h6, .h6, .zeta {
 /* ==========================================================================
    Forms
    ========================================================================== */
-.input, .select, .checkbox {
-  background-color: #cccccc;
+/* Input
+   ========================================================================== */
+.input, .select__input, .checkbox__check {
+  background-color: #ccc;
+  width: 100%;
   display: block;
   border: none;
   outline: none;
@@ -612,10 +615,50 @@ h6, .h6, .zeta {
   -moz-appearance: none;
   appearance: none; }
 
+/* Select
+   ========================================================================== */
 .select {
-  min-width: 300px; }
+  display: block;
+  position: relative; }
+  .select:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30px;
+    height: 100%;
+    display: block;
+    background-color: #ccc;
+    background-image: url("../../images/select-arrow.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: none; }
 
+.select__input {
+  padding-right: 30px; }
+  .select__input::-ms-expand {
+    display: none; }
+
+/* Checkbox
+   ========================================================================== */
 .checkbox {
+  display: inline-block; }
+
+.checkbox__input {
+  display: none; }
+  .checkbox__input:checked + .checkbox__check:after {
+    visibility: visible; }
+
+.checkbox__check {
   display: inline-block;
-  width: 30px;
-  height: 30px; }
+  width: 25px;
+  height: 25px; }
+  .checkbox__check:after {
+    content: "";
+    display: block;
+    background-image: url("../../images/check.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 25px;
+    height: 25px;
+    visibility: hidden; }
diff --git a/project-x/assets/styles/src/base/_forms.scss b/project-x/assets/styles/src/base/_forms.scss
index caa2376..8f57fe6 100644
--- a/project-x/assets/styles/src/base/_forms.scss
+++ b/project-x/assets/styles/src/base/_forms.scss
@@ -1,9 +1,12 @@
 /* ==========================================================================
-   Forms
+   Forms | http://codepen.io/AntoineBoulanger/pen/uBJmi
+   ========================================================================== */
+
+/* Input
    ========================================================================== */
 .input {
-	background-color: #cccccc;
-	//width: 100%;
+	background-color: #ccc;
+	width: 100%;
 	display: block;
 	border: none;
 	outline: none;
@@ -14,14 +17,72 @@
 	        appearance: none;
 }
 
+/* Select
+   ========================================================================== */
+// Wrapper
 .select {
+	display: block;
+	position: relative;
+	// Select arrow
+	&:after	{
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 30px;
+		height: 100%;
+		display: block;
+		background-color: #ccc;
+		background-image: url('../../images/select-arrow.svg');
+		background-repeat: no-repeat;
+		background-position: center;
+		pointer-events: none;
+	}
+}
+// Select
+.select__input {
 	@extend .input;
-	min-width: 300px;
+	padding-right: 30px;
+
+	&::-ms-expand {
+		display: none;
+	}
 }
 
+
+/* Checkbox
+   ========================================================================== */
+// Wrapper
 .checkbox {
+	display: inline-block;
+}
+// Real input hidden
+.checkbox__input {
+	display: none;
+
+	&:checked {
+		+ .checkbox__check {
+			&:after {
+				visibility: visible;
+			}
+		}
+	}
+}
+// Fake input visible
+.checkbox__check {
 	@extend .input;
 	display: inline-block;
-	width: 30px;
-	height: 30px;
+	width: 25px;
+	height: 25px;
+
+	&:after {
+		content: "";
+		display: block;
+		background-image: url('../../images/check.svg');
+		background-repeat: no-repeat;
+		background-position: center;
+		width: 25px;
+		height: 25px;
+		visibility: hidden;
+	}
 }
diff --git a/project-x/index.html b/project-x/index.html
index ac8302e..13935ef 100644
--- a/project-x/index.html
+++ b/project-x/index.html
@@ -15,14 +15,20 @@
 
         <input class="input" type="text">
         <br><br>
-        <input class="checkbox" type="checkbox">
-        <input class="checkbox" type="checkbox">
+        <label class="checkbox">
+            <input class="checkbox__input" type="checkbox">
+            <span class="checkbox__check"></span>
+        </label>
+
         <br><br>
-        <select class="select" name="" id="">
-            <option value="">sdfds</option>
-            <option value="">sdf</option>
-            <option value="">sdfds</option>
-        </select>
+        <label class="select">
+            <select class="select__input" name="" id="">
+                <option value="">sdfds</option>
+                <option value="">sdf</option>
+                <option value="">sdfds</option>
+            </select>
+        </label>
+
 
         <script src="assets/scripts/dist/main.js"></script>
     </body>