Merge pull request #59 from nicknickel/add-input-suffix

add support for text input suffix icons
materializecss · Dec 30, 2020 · e6f4c23 · e6f4c23
2 parents 57bfcdf + 3e516e5
commit e6f4c23
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 5 deletions.
diff --git a/jade/page-contents/text_inputs_content.html b/jade/page-contents/text_inputs_content.html
@@ -161,6 +161,45 @@ <h5>Icon Prefixes</h5>
         </code></pre>
         <br>
 
+        <h5>Icon Suffixes</h5>
+        <p>You can also add an icon suffix. Just add an icon with the class <code class="language-markup">suffix</code> before the input and label.</p><br>
+        <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>
+
+        <pre><code class="language-markup">
+  &lt;div class="row">
+    &lt;form class="col s12">
+      &lt;div class="row">
+        &lt;div class="input-field col s6">
+          &lt;i class="material-icons suffix">account_circle</i>&lt;/i>
+          &lt;input id="icon_suffix" type="text" class="validate">
+          &lt;label for="icon_suffix">First Name&lt;/label>
+        &lt;/div>
+        &lt;div class="input-field col s6">
+          &lt;i class="material-icons suffix">phone</i>&lt;/i>
+          &lt;input id="icon_telephone_suffix" type="tel" class="validate">
+          &lt;label for="icon_telephone_suffix">Telephone&lt;/label>
+        &lt;/div>
+      &lt;/div>
+    &lt;/form>
+  &lt;/div>
+        </code></pre>
+        <br>
+
         <h5>Custom Error or Success Messages</h5>
         <p>You can add custom validation messages by adding either <code class="language-markup">data-error</code> or <code class="language-markup">data-success</code> attributes to your helper text element.</p><br>
         <div class="row">

diff --git 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
@@ -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
@@ -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 {