diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue index 9c061dd..1fddaa2 100644 --- a/docs/src/pages/components/Input.vue +++ b/docs/src/pages/components/Input.vue @@ -258,6 +258,62 @@ + +
+
+ + + warning + Be careful. You're almost broken! + + + + attach_money + + + + phone + + + + + + speaker_notes + + + +
+
+ +
+ + <form novalidate @submit.stop.prevent="submit"> + <md-input-container> + <md-icon class="md-warn"> + warning + <md-tooltip>Be careful. You're almost broken!</md-tooltip> + </md-icon> + <label>Money</label> + <md-input type="text"></md-input> + <md-icon>attach_money</md-icon> + </md-input-container> + + <md-input-container> + <md-icon>phone</md-icon> + <label>Phone</label> + <md-input type="tel"></md-input> + </md-input-container> + + <md-input-container> + <md-icon>speaker_notes</md-icon> + <label>Notes</label> + <md-textarea></md-textarea> + </md-input-container> + </form> + +
+
+
diff --git a/src/components/mdInputContainer/mdInputContainer.scss b/src/components/mdInputContainer/mdInputContainer.scss index 7727557..713ea58 100644 --- a/src/components/mdInputContainer/mdInputContainer.scss +++ b/src/components/mdInputContainer/mdInputContainer.scss @@ -98,6 +98,7 @@ $input-size: 32px; } .md-icon { + margin: 4px auto; color: rgba(#000, .54); transition: $swift-ease-out;