From f0be7ba6f8875631dc9d7ba8d748feda361bc69a Mon Sep 17 00:00:00 2001
From: Anthony Koerber <akoerber@mediamath.com>
Date: Tue, 1 Dec 2015 09:41:25 -0600
Subject: [PATCH] add 'small' setting

---
 src/mm-button/doc.json         |  2 +-
 src/mm-dropdown/doc.json       |  9 +++++++++
 src/mm-dropdown/index.html     |  2 +-
 src/mm-dropdown/mm-dropdown.js |  4 ++++
 src/mm-input/doc.json          |  2 +-
 src/mm-input/mm-input.scss     |  9 +++++++++
 src/shared/sass/_button.scss   | 23 +++++++++++++++++++--
 src/shared/sass/_dropdown.scss | 37 ++++++++++++++++++++++++++++++++++
 src/shared/sass/_mixins.scss   |  2 +-
 9 files changed, 84 insertions(+), 6 deletions(-)

diff --git a/src/mm-button/doc.json b/src/mm-button/doc.json
index e2aae644..789cb70f 100644
--- a/src/mm-button/doc.json
+++ b/src/mm-button/doc.json
@@ -50,7 +50,7 @@
 			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
 			"optional":true,
 			"default":"none",
-			"options":["normal","large"],
+			"options":["normal","large","small"],
 			"reflect":true
 		}
 	]
diff --git a/src/mm-dropdown/doc.json b/src/mm-dropdown/doc.json
index 633c61db..3b61a300 100644
--- a/src/mm-dropdown/doc.json
+++ b/src/mm-dropdown/doc.json
@@ -83,6 +83,15 @@
 			"default":"none",
 			"attribute": "N/A",
 			"readOnly": true
+		},
+		{
+			"name":"size",
+			"type":"String",
+			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
+			"optional":true,
+			"default":"none",
+			"options":["normal","large", "small"],
+			"reflect":true
 		}
 	],
 	"methods": [
diff --git a/src/mm-dropdown/index.html b/src/mm-dropdown/index.html
index e2a77d2f..616f53bc 100644
--- a/src/mm-dropdown/index.html
+++ b/src/mm-dropdown/index.html
@@ -237,7 +237,7 @@
 			<hr/>
 			
 			<p><span class="bold">Dropdown:</span> List with overflow: overflowWidth set</p>
-			<mm-dropdown placeholder="Select One Please" overflow="visible">
+			<mm-dropdown placeholder="Select One Please" overflow="visible" size="small">
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 00</mm-list-item>
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 01</mm-list-item>
 				<mm-list-item unresolved>mm-list-item with an exremely long label or name in here 02</mm-list-item>
diff --git a/src/mm-dropdown/mm-dropdown.js b/src/mm-dropdown/mm-dropdown.js
index 9e519915..424e12e8 100644
--- a/src/mm-dropdown/mm-dropdown.js
+++ b/src/mm-dropdown/mm-dropdown.js
@@ -70,6 +70,10 @@
 				notify: true,
 				observer: '_dataChanged'
 			},
+			size: {
+				type: String,
+				reflectToAttribute: true
+			},
 			_layout: String
 		},
 
diff --git a/src/mm-input/doc.json b/src/mm-input/doc.json
index b8e3c4c6..73a5a33a 100644
--- a/src/mm-input/doc.json
+++ b/src/mm-input/doc.json
@@ -94,7 +94,7 @@
 			"description":"instructs the component to be displayed at a predetermined size (i.e. - 'normal' or 'large')",
 			"optional":true,
 			"default":"none",
-			"options":["normal","large"],
+			"options":["normal","large", "small"],
 			"reflect":true
 		}
 	],
diff --git a/src/mm-input/mm-input.scss b/src/mm-input/mm-input.scss
index e29557ca..e4022270 100644
--- a/src/mm-input/mm-input.scss
+++ b/src/mm-input/mm-input.scss
@@ -134,4 +134,13 @@
 		line-height: 2.231em !important;
 		padding: 0 10px;
 	}
+}
+
+:host([size='small']){
+	.text-input {
+		height: 20px !important;
+		font-size: 11px !important;
+		line-height: 1.250em !important;
+		padding: 0 7px;
+	}
 }
\ No newline at end of file
diff --git a/src/shared/sass/_button.scss b/src/shared/sass/_button.scss
index 0637281b..076fac42 100644
--- a/src/shared/sass/_button.scss
+++ b/src/shared/sass/_button.scss
@@ -171,15 +171,34 @@
 :host([size='large']){
 	.button {
 		height: 46px !important;
-		font-size: 15px !important;
 		padding: 0 15px;
+
+		& > ::content label {
+			font-size: 15px !important;
+			line-height: 45px !important;
+		}
 	}
 }
 
 :host([size='normal']){
 	.button {
 		height: 29px !important;
-		font-size: 13px !important;
 		padding: 0 10px;
+
+		& > ::content label {
+			@include buttonFont();
+		}
+	}
+}
+
+:host([size='small']){
+	.button {
+		height: 20px !important;
+		padding: 0 7px;
+
+		& > ::content label {
+			font-size: 11px!important;
+			line-height: 19px !important;
+		}
 	}
 }
diff --git a/src/shared/sass/_dropdown.scss b/src/shared/sass/_dropdown.scss
index c6561c36..46dfaa7a 100644
--- a/src/shared/sass/_dropdown.scss
+++ b/src/shared/sass/_dropdown.scss
@@ -94,3 +94,40 @@ $border-color: $color-A18 !default;
 	    overflow-y: auto;
 	}
 }
+
+// support multiple size configurations
+:host([size='large']){
+	.button {
+		height: 46px !important;
+		padding: 0 32px 0 15px;
+
+		label {
+			font-size: 15px !important;
+			line-height: 45px !important;
+		}
+	}
+}
+
+:host([size='normal']){
+	.button {
+		height: 29px !important;
+		padding: 0 32px 0 10px;
+
+		label {
+			font-size: 13px!important;
+			line-height: 28px !important;
+		}
+	}
+}
+
+:host([size='small']){
+	.button {
+		height: 20px !important;
+		padding: 0 32px 0 7px;
+
+		label {
+			font-size: 11px!important;
+			line-height: 19px !important;
+		}
+	}
+}
diff --git a/src/shared/sass/_mixins.scss b/src/shared/sass/_mixins.scss
index 621d5d11..dd0bad91 100644
--- a/src/shared/sass/_mixins.scss
+++ b/src/shared/sass/_mixins.scss
@@ -9,10 +9,10 @@
 
 @mixin buttonFont() {
 	font-family: "Arimo", sans-serif;
-	@include fontSmoothing();
 	font-weight: 700;
 	font-size: 13px!important;
 	line-height: 28px !important;
+	@include fontSmoothing();
 }
 
 // fix for google's fit behavior