Correct some gotchas

- mm-input size settings
- mm-input attr styling
- fix FF bug mm-input-mask
- don't overwrite color on span mm-icon

Author: anthonykoerber

src/mm-icon/index.html

@@ -37,6 +37,10 @@
 				padding: 0;
 			}
 
+			li span {
+				color:#00ff00;
+			}
+
 			.actions {
 				color: #FF0000;
 			}

src/mm-icon/mm-icon.scss

@@ -18,7 +18,7 @@
 
 ._mm_icon {
 	display: block;
-	color: inherit;
+	color: inherit !important;
 }
 
 [class^="icon-"], [class*=" icon-"] {

src/mm-input-mask/mm-input-mask.html

@@ -31,7 +31,7 @@
 						on-paste="_handlePaste"
 						placeholder="{{item.placeholder}}"></input></template><template is="dom-if" if="{{!item.type}}"><span class$="{{ _sepClass(value) }}">{{item.value}}</span></template></template>
 		</div>
-		<mm-input icon="{{icon}}" id="input"></mm-input>
+		<mm-input icon$="{{icon}}" id="input"></mm-input>
 		<content id="content" select="group,sep"></content>
 	</template>
 </dom-module>

src/mm-input-mask/mm-input-mask.js

@@ -171,8 +171,7 @@
 				observer: '_placeholderChanged'
 			},
 			icon: {
-				type: String,
-				value: ""
+				type: String
 			},
 			_arimoLoaded: {
 				type: Boolean,
@@ -446,11 +445,10 @@
 		},
 
 		_validateGroup: function(e,target) {
-			var val;
-			if(e instanceof KeyboardEvent) val = String.fromCharCode(e.keyCode);
-			else if(e instanceof ClipboardEvent) val = e.clipboardData.getData('text/plain');
-
+			var val = (e instanceof ClipboardEvent) ? e.clipboardData.getData('text/plain') : 
+				String.fromCharCode(e.keyCode);
 			var group = this._getGroup(target);
+
 			// If alphanumeric throw out all modifiers except capital letters
 			if(group.restrict !== _restrict.all) {
 				if(e.altKey) return false;
@@ -504,8 +502,11 @@
 			if(this._isKeyboardShortcut(e)) return;
 			var max = this._getGroup(e.target).max,
 				selLength = e.target.selectionEnd - e.target.selectionStart;
-			if(!this._validateGroup(e,e.target)) e.preventDefault();
-			else if(e.target.value.length === max && selLength === 0) this._validateGroup(e,this._focusRight(e.target));
+			if(!this._validateGroup(e,e.target)) { 
+				e.preventDefault();
+			} else if(e.target.value.length === max && selLength === 0) { 
+				this._validateGroup(e,this._focusRight(e.target));
+			}
 		},
 		_onNum: function(e) {
 			this._onAlpha(e);

src/mm-input-mask/mm-input-mask.scss

@@ -43,9 +43,10 @@
 	input {
 		font-family: Arimo, sans-serif !important;
 		font-size: 13px !important;
-		line-height: 2.231em !important;
+		line-height: 29px !important;
 		&::placeholder {
 			font-size: 13px !important;
+			line-height: 29px !important;
 			font-style: italic;
 		}
 	}

src/mm-input/index.html

@@ -96,8 +96,8 @@
 			<p><span class="bold">Input:</span> with clear</p>
 			<mm-input id="ci" placeholder="Clear" clear="true" unresolved></mm-input>
 			<hr/>
-			<p><span class="bold">Input:</span> with search</p>
-			<mm-input placeholder="Search" search="true" unresolved></mm-input>
+			<p><span class="bold">Input:</span> with search and small</p>
+			<mm-input placeholder="Search" search="true" size="small" unresolved></mm-input>
 			<hr/>
 			<p><span class="bold">Input:</span>  with clear and search and fit to parent</p>
 			<mm-input id="ic" placeholder="Icon and Clear" icon="calendar" clear="true" fitparent unresolved></mm-input>
@@ -123,8 +123,8 @@
 			<p><span class="bold">Input:</span> validate not empty spaces</p>
 			<mm-input placeholder="decimal" validation="blank" fitparent="true" unresolved></mm-input>
 			<hr/>
-			<p><span class="bold">Input:</span>  with clear, search, fit to parent</p>
-			<mm-input id="searchInput" placeholder="Search, Clear &amp; Fit" search="true" clear="true" fitparent unresolved></mm-input>
+			<p><span class="bold">Input:</span>  with clear, search, fit to parent, large</p>
+			<mm-input id="searchInput" placeholder="Search, Clear &amp; Fit" search="true" clear="true" size="large" fitparent unresolved></mm-input>
 			<hr/>
 		</div>
 		<div class="vr"></div>

src/mm-input/mm-input.html

@@ -25,12 +25,12 @@
 			maxlength$="{{maxlength}}" 
 			disabled="{{disabled}}"
 			readonly$="{{readonly}}" 
-			style$="{{ _updateStyle(icon, width, fitparent, clear) }}" />
+			style$="{{ _updateStyle(width, fitparent) }}" />
 		<div id="icon" class="icon-holder" style$="{{ _updateIcon(icon, _clearVisible) }}">
-			<mm-icon type="{{icon}}" width="14" height="14"></mm-icon>
+			<mm-icon type="{{icon}}" width="{{_iconSize(size)}}" height="{{_iconSize(size)}}"></mm-icon>
 		</div>
 		<div id="clearBtn" class="clear-btn" on-tap="clearInput" style$="{{ _updateClear(_clearVisible) }}">
-			<mm-icon type="fail" width="14" height="14"></mm-icon>
+			<mm-icon type="fail" width="{{_iconSize(size)}}" height="{{_iconSize(size)}}"></mm-icon>
 		</div>
 	</template>
 </dom-module>

src/mm-input/mm-input.js

@@ -23,7 +23,9 @@
 			},
 			size: {
 				type: String,
-				reflectToAttribute: true
+				value: 'normal',
+				reflectToAttribute: true,
+				notify: true
 			},
 			placeholder: {
 				type: String,
@@ -59,7 +61,8 @@
 			width: {
 				type: Number,
 				value: false,
-				reflectToAttribute: true
+				reflectToAttribute: true,
+				// notify: true
 			},
 			maxlength: { 
 				type: Number,
@@ -80,7 +83,8 @@
 			fitparent: { 
 				type: Boolean,
 				value: false, 
-				reflectToAttribute: true
+				reflectToAttribute: true,
+				// notify: true
 			},
 			_layout: { 
 				type: String,
@@ -94,8 +98,6 @@
 
 		DIRECTION_TOP:  "top",
 		DIRECTION_BOTTOM: "bottom",
-		PADDING_RIGHT_ICON: 25,
-		PADDING_RIGHT_DEFAULT: 10,
 
 		_typeChanged: function(newVal, oldVal) {
 			var types = /(text|password|email|number|tel|search|url)/ig;
@@ -139,16 +141,12 @@
 			this._clearVisible = false;
 		},
 
-		_updateStyle: function(icon, width, fitparent, clear) {
-			var p = icon || clear ? this.PADDING_RIGHT_ICON + 'px' : this.PADDING_RIGHT_DEFAULT + 'px',
-				f = fitparent ? '100%' : false,
+		_updateStyle: function(width, fitparent) {
+			var f = fitparent ? '100%' : false,
 				w = width ? width + 'px' : null,
 				style = {};
 
-			style.paddingRight = p;
-			// sometimes, we do not want to add width
 			if(w) style.width = f ? f : w;
-
 			return this.styleBlock(style);
 		},
 
@@ -159,6 +157,17 @@
 			o.top = (direction === this.DIRECTION_TOP);
 			o.bottom = (direction === this.DIRECTION_BOTTOM);
 			return this.classBlock(o);
+		},
+
+		_iconSize: function(size) {
+			switch(size) {
+				case 'large':
+					return 16;
+				case 'small':
+					return 11;
+				default:
+					return 14;
+			}
 		}
 
 	});

src/mm-input/mm-input.scss

@@ -27,15 +27,11 @@
 
 .icon-holder,
 .clear-btn {
-	width: 14px;
-	height: 14px;
 	position: absolute;
 	right: 0;
-	top: 50%;
-	margin: -7px 8px 0 0;
 
 	mm-icon {
-		color: $color-A18;
+		color: $color-A18 !important;
 	}
 }
 
@@ -47,8 +43,6 @@
 .text-input {
 	box-sizing: border-box;
 	height: 29px !important;
-	line-height: 2.231em !important; // line-height equal to height, in em (don't remember the specifics around this choice but there was a case for this)
-	padding: 0 10px;
 }
 
 // layout modes for input
@@ -122,25 +116,88 @@
 	.text-input {
 		height: 46px !important;
 		font-size: 15px !important;
-		line-height: 2.875em !important;
-		padding: 0 15px;
+		line-height: 46px !important;
+		padding: 0 15px !important;
+
+		&::placeholder {
+			font-size: 15px !important;
+			line-height: 46px !important;
+		}
+	}
+}
+
+:host([size='large'][search]),
+:host([size='large'][clear]),
+:host([size='normal'][icon]){
+	.text-input {
+		padding: 0 30px 0 15px !important;
+	}
+
+	.icon-holder,
+	.clear-btn {
+		width: 16px;
+		height: 16px;
+		top: 15px;
+		right: 10px;
 	}
 }
 
 :host([size='normal']){
 	.text-input {
 		height: 29px !important;
 		font-size: 13px !important;
-		line-height: 2.231em !important;
-		padding: 0 10px;
+		line-height: 29px !important;
+		padding: 0 10px !important;
+
+		&::placeholder {
+			font-size: 13px !important;
+			line-height: 29px !important;
+		}
+	}
+}
+
+:host([size='normal'][search]),
+:host([size='normal'][clear]),
+:host([size='normal'][icon]){
+	.text-input {
+		padding: 0 25px 0 10px !important;
+	}
+
+	.icon-holder,
+	.clear-btn {
+		width: 14px;
+		height: 14px;
+		top: 7.5px;
+		right: 8px;
 	}
 }
 
 :host([size='small']){
 	.text-input {
-		height: 20px !important;
+		height: 26px !important;
 		font-size: 11px !important;
-		line-height: 1.250em !important;
-		padding: 0 7px;
+		line-height: 26px !important;
+		padding: 0 8px !important;
+
+		&::placeholder {
+			font-size: 11px !important;
+			line-height: 26px !important;
+		}
+	}
+}
+
+:host([size='small'][search]),
+:host([size='small'][clear]),
+:host([size='normal'][icon]){
+	.text-input {
+		padding: 0 22px 0 8px !important;
+	}
+
+	.icon-holder,
+	.clear-btn {
+		width: 11px;
+		height: 11px;
+		top: 7.5px;
+		right: 8px;
 	}
 }