README.MD

README.MD

@@ -2,3 +2,8 @@
 Transforms your standard boring HTML <select> into a minimalistic beauty. 
 Inspired by the animations of the actual dropdown in Material Design. 
 
+| Options       | Values       |
+| ------------- |:-------------:| 
+| background      | Sets the inital background of the dropdown | 
+| col 2 is      | centered      |  
+| zebra stripes | are neat      |    

dropdown.js

@@ -18,6 +18,7 @@ dropdown_count = 0;
 		var opts = $.extend({}, $.fn.dropdown.defaults, options)
 		
 		element.each(function(){
+			dropdown_count += 1
 			build($(this), opts);
 		})
 		
@@ -47,7 +48,7 @@ dropdown_count = 0;
 		active_background: "#fff",
 		placeholder_color: "#000",
 		placeholder_active_color: "#000",
-		link_color: "#000",
+		option_color: "#000",
 		vertical_padding: "20px",
 		horizontal_padding: "40px"
 	}
@@ -69,7 +70,7 @@ dropdown_count = 0;
 		var active_background = opts["active_background"]
 		var placeholder_color = opts["placeholder_color"]
 		var placeholder_active_color = opts["placeholder_active_color"]
-		var link_color = opts["link_color"]
+		var option_color = opts["option_color"]
 		var vertical_padding = opts["vertical_padding"]
 		var horizontal_padding = opts["horizontal_padding"]
 
@@ -104,7 +105,7 @@ dropdown_count = 0;
 					dropdown_html += '<i class = "icon">'+ icon(placeholder_color) +'</i>'
 				dropdown_html += '</div>'
 			dropdown_html += '</div>';
-			dropdown_html += '<div style="padding:'+ vertical_padding +' '+ horizontal_padding +'" class = "back_face"><ul style="color:'+ link_color +'">'
+			dropdown_html += '<div style="padding:'+ vertical_padding +' '+ horizontal_padding +'" class = "back_face"><ul style="color:'+ option_color +'">'
 				dropdown_html += options_html
 			dropdown_html += '</ul></div>';
 		dropdown_html += '</div>';
@@ -226,6 +227,7 @@ function hello(value){
 	console.log("hello world! the selected value is " + value)
 }
 
+
 $(document).ready(function(){
 	$('body').on('click', '.dropdown', function(){
 		if ( $(this).hasClass('animate') == false )  {

foundation.css

@@ -376,7 +376,7 @@ html {
 body {
   padding: 0;
   margin: 0;
-  font-family: Avenir, Brandon, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  font-family: Inconsolata, Roboto, Arial, sans-serif;
   font-weight: normal;
   line-height: 1.5;
   color: #0a0a0a;

index.html

@@ -16,7 +16,7 @@
 				active_background:"rgb(149, 211, 255)",
 				placeholder_color: "#97bce0",
 				placeholder_active_color: "#0f37a9",
-				link_color:"#405463",
+				option_color:"#405463",
 				vertical_padding: "15px",
 				horizontal_padding: "20px"
 			})
@@ -56,6 +56,141 @@
 			<option value="2">Option 2</option>
 			<option value="3">Option 3</option>
 		</select>
+		<select class = "dark" data-callback="make" data-placeholder="Make an option">
+			<option value="1">Hello</option>
+			<option value="2">Option 2</option>
+			<option value="3">Option 3</option>
+		</select>
+		</div>
+		<div id = "documentation">
+			<div class = "sections" id = "init">
+				<h2>Installation</h2>
+				<div class = "steps">
+					<ol>
+						<li>
+							<span class = "step_name">Include the Jquery Framework</span>
+							<code>
+								&lt;script type="text/javascript" src="/path/to/jquery.js"&gt;&lt;/script&gt;
+							</code>
+						</li>
+						<li>
+							<span class = "step_name">Include awdropdown.js</span>
+							<code>
+								&lt;script type="text/javascript" src="/path/to/awdropdown.js"&gt;&lt;/script&gt;
+							</code>
+						</li>
+						<li>
+							<span class = "step_name">Include awdropdown.css</span>
+							<code>
+								&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;
+							</code>
+						</li>
+					</ol>
+				</div>
+			</div>	
+			<div class = "sections" id = "init">
+				<h2>Usage</h2>
+				<div class = "steps">
+					<ol>
+						<li>
+							<span class = "step_name">Create a standard HTML select as you would</span>
+							<code>
+								&lt;select id = "my_dropdown"&gt; <br />
+									&lt;option value = "option_1"&gt;Option 1&lt;/select&gt; <br />
+									...<br />
+								&lt;/select&gt;
+							</code>
+						</li>
+						<li>
+							<span class = "step_name">Include awdropdown.js</span>
+							<code>
+								&lt;script type="text/javascript" src="/path/to/awdropdown.js"&gt;&lt;/script&gt;
+							</code>
+						</li>
+						<li>
+							<span class = "step_name">Include awdropdown.css</span>
+							<code>
+								&lt;link href="/path/to/awdropdown.css" rel="stylesheet" /&gt;
+							</code>
+						</li>
+					</ol>
+				</div>
+			</div>	
+			<div class = "sections"id = "options">
+			<table>
+				<thead>
+					<tr>
+					<th style="width:180px;">Option</th>
+					<th>Value</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>background</td>
+						<td>
+							Sets the initial background of the dropdown
+							<div class = "code">
+								<span>Default: #e5e5e5</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>active_background</td>
+						<td>
+							Sets the active background color when the dropdown is clicked
+							<div class = "code">
+								<span>Default: #fff</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>placeholder_color</td>
+						<td>
+							The initial color of the placeholder text
+							<div class = "code">
+								<span>Default: #000</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>placeholder_active_color</td>
+						<td>
+							The active color of the placeholder text when the dropdown is clicked
+							<div class = "code">
+								<span>Default: #000</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>option_color</td>
+						<td>
+							Color of the option values
+							<div class = "code">
+								<span>Default: #000</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>vertical_padding</td>
+						<td>
+							Vertical padding of the dropdown
+							<div class = "code">
+								<span>Default: 20px</span>
+							</div>
+						</td>
+					</tr>
+					<tr>
+						<td>horizontal_padding</td>
+						<td>
+							Horizontal padding of the dropdown
+							<div class = "code">
+								<span>Default: 40px</span>
+							</div>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+			</div>
 		</div>
 	</div>
 	</div>

scss/app.css

@@ -1,2 +1,2 @@
-#content{padding:100px 0}.divider{float:left;width:100%;margin:20px 0}.title{font-size:29px}.title .version{font-size:16px}
+#content{padding:100px 0}.divider{float:left;width:100%;margin:20px 0}.title{font-size:29px;color:#606b6a}.title .version{font-size:16px}#documentation{float:left;width:100%;margin-top:20px;font-family:Inconsolata}#documentation .sections{float:left;width:100%;margin-top:30px}#documentation table thead,#documentation table tbody,#documentation table tbody tr,#documentation table tfoot{border:1px solid #ddd}#documentation tbody tr td:first-child{font-size:14px;padding:0 10px}#documentation tbody tr td:last-child{font-size:14px}#documentation tbody tr td:last-child .code{float:left;width:100%;margin-top:2px;margin-left:-2px}#documentation tbody tr td:last-child .code span{background:#e5e5e5;padding:2px 5px;border-radius:2px;font-size:12px}.steps ol li{float:left;width:100%;margin-bottom:30px}.steps ol li code{float:left;width:100%}
 /*# sourceMappingURL=app.css.map */

scss/app.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,QAAS,CACR,OAAO,CAAC,OAAO,CAGhB,QAAS,CACR,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,MAAM,CAAC,MAAM,CAGd,MAAO,CACN,SAAS,CAAC,IAAI,CACd,eAAS,CACR,SAAS,CAAC,IAAI",
+"mappings": "AAAA,QAAS,CACR,OAAO,CAAC,OAAO,CAGhB,QAAS,CACR,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,MAAM,CAAC,MAAM,CAId,MAAO,CACN,SAAS,CAAC,IAAI,CACd,KAAK,CAAC,OAAO,CACb,eAAS,CACR,SAAS,CAAC,IAAI,CAIhB,cAAe,CACd,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,UAAU,CAAC,IAAI,CACf,WAAW,CAAC,WAAW,CACvB,wBAAU,CACT,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,UAAU,CAAC,IAAI,CAEhB,8GAAsD,CACrD,MAAM,CAAC,cAAc,CAKnB,sCAAc,CACb,SAAS,CAAC,IAAI,CACd,OAAO,CAAC,MAAM,CAEf,qCAAa,CACZ,SAAS,CAAC,IAAI,CACd,2CAAM,CACL,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,UAAU,CAAC,GAAG,CACd,WAAW,CAAC,IAAI,CAChB,gDAAK,CACJ,UAAU,CAAG,OAAO,CACpB,OAAO,CAAC,OAAO,CACf,aAAa,CAAC,GAAG,CACjB,SAAS,CAAC,IAAI,CAWnB,YAAG,CACF,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI,CACV,aAAa,CAAC,IAAI,CAIlB,iBAAK,CACJ,KAAK,CAAC,IAAI,CACV,KAAK,CAAC,IAAI",
 "sources": ["app.scss"],
 "names": [],
 "file": "app.css"

scss/app.scss

@@ -11,7 +11,65 @@
 
 .title {
 	font-size:29px;
+	color:#606b6a;
 	.version {
 		font-size:16px;
 	}
+}
+
+#documentation {
+	float:left;
+	width:100%;
+	margin-top:20px;
+	font-family:Inconsolata;
+	.sections {
+		float:left;
+		width:100%;
+		margin-top:30px;
+	}
+	table thead, table tbody, table tbody tr, table tfoot {
+		border:1px solid #ddd;
+	}
+	tbody {
+		tr {
+			td {
+				&:first-child {
+					font-size:14px;
+					padding:0 10px;
+				}
+				&:last-child {
+					font-size:14px;
+					.code {
+						float:left;
+						width:100%;
+						margin-top:2px;
+						margin-left:-2px;
+						span {
+							background : #e5e5e5;
+							padding:2px 5px;
+							border-radius:2px;
+							font-size:12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.steps {
+	ol {
+		li {
+			float:left;
+			width:100%;
+			margin-bottom:30px;
+			.step_name {
+
+			}
+			code {
+				float:left;
+				width:100%;
+			}
+		}
+	}
 }