diff --git a/jade/page-contents/text_inputs_content.html b/jade/page-contents/text_inputs_content.html index c94b923157..5e3f8d670a 100644 --- a/jade/page-contents/text_inputs_content.html +++ b/jade/page-contents/text_inputs_content.html @@ -161,6 +161,45 @@
Icon Prefixes

+
Icon Suffixes
+

You can also add an icon suffix. Just add an icon with the class suffix before the input and label.


+
+
+
+
+ account_circle + + +
+
+ phone + + +
+
+
+
+ +

+  <div class="row">
+    <form class="col s12">
+      <div class="row">
+        <div class="input-field col s6">
+          <i class="material-icons suffix">account_circle</i>
+          <input id="icon_suffix" type="text" class="validate">
+          <label for="icon_suffix">First Name</label>
+        </div>
+        <div class="input-field col s6">
+          <i class="material-icons suffix">phone</i>
+          <input id="icon_telephone_suffix" type="tel" class="validate">
+          <label for="icon_telephone_suffix">Telephone</label>
+        </div>
+      </div>
+    </form>
+  </div>
+        
+
+
Custom Error or Success Messages

You can add custom validation messages by adding either data-error or data-success attributes to your helper text element.


diff --git a/sass/components/_chips.scss b/sass/components/_chips.scss index bad257e550..330519bd7f 100644 --- a/sass/components/_chips.scss +++ b/sass/components/_chips.scss @@ -84,6 +84,12 @@ width: 92%; width: calc(100% - 3rem); } +// Form suffix +.suffix ~ .chips { + margin-right: 3rem; + width: 92%; + width: calc(100% - 3rem); +} .chips:empty ~ label { font-size: 0.8rem; transform: translateY(-140%); diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss index b44c7b7f01..9f9bcc5bbd 100644 --- a/sass/components/forms/_input-fields.scss +++ b/sass/components/forms/_input-fields.scss @@ -166,7 +166,9 @@ textarea.materialize-textarea { } .prefix ~ label, - .prefix ~ .validate ~ label { + .prefix ~ .validate ~ label, + .suffix ~ label, + .suffix ~ .validate ~ label { width: calc(100% - 3rem - #{$gutter-width}); } } @@ -217,7 +219,7 @@ textarea.materialize-textarea { } // Prefix Icons - .prefix { + .prefix, .suffix { position: absolute; width: $input-height; font-size: $input-icon-size; @@ -229,6 +231,7 @@ textarea.materialize-textarea { .prefix ~ input, .prefix ~ textarea, + .prefix ~ .select-wrapper, .prefix ~ label, .prefix ~ .validate ~ label, .prefix ~ .helper-text, @@ -241,21 +244,43 @@ textarea.materialize-textarea { .prefix ~ label { margin-left: 3rem; } @media #{$medium-and-down} { - .prefix ~ input { + .prefix ~ input, + .suffix ~ input { width: 86%; width: calc(100% - 3rem); } } @media #{$small-and-down} { - .prefix ~ input { + .prefix ~ input, + .suffix ~ input { width: 80%; width: calc(100% - 3rem); } } -} + // Suffix Icons + .suffix { + right: 0; + } + + .suffix ~ input, + .suffix ~ textarea, + .suffix ~ .select-wrapper, + .suffix ~ label, + .suffix ~ .validate ~ label, + .suffix ~ .helper-text, + .suffix ~ .autocomplete-content { + margin-right: 3rem; + width: 92%; + width: calc(100% - 3rem); + } + + .suffix ~ label { margin-right: 3rem; } + +} + /* Search Field */ .input-field input[type=search] { diff --git a/sass/components/forms/_select.scss b/sass/components/forms/_select.scss index c3ab15c7e7..9fb72db026 100644 --- a/sass/components/forms/_select.scss +++ b/sass/components/forms/_select.scss @@ -162,6 +162,15 @@ body.keyboard-focused { .prefix ~ label { margin-left: 3rem; } +// Suffix Icons +.suffix ~ .select-wrapper { + margin-right: 3rem; + width: 92%; + width: calc(100% - 3rem); +} + +.suffix ~ label { margin-right: 3rem; } + // Icons .select-dropdown li { img {