add 'small' setting

Author: anthonykoerber

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
 		}
 	]

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": [

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>

src/mm-dropdown/mm-dropdown.js

@@ -70,6 +70,10 @@
 				notify: true,
 				observer: '_dataChanged'
 			},
+			size: {
+				type: String,
+				reflectToAttribute: true
+			},
 			_layout: String
 		},
 

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
 		}
 	],

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;
+	}
 }

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;
+		}
 	}
 }

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;
+		}
+	}
+}

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