mtrl 0.2.8 → 0.3.0

package/src/styles/components/_textfield.scss

@@ -28,7 +28,8 @@ $component: '#{base.$prefix}-textfield';
     border-radius: 2px;
     color: t.color('on-surface-variant');
     transition: transform v.motion('duration-short4') v.motion('easing-emphasized'),
-                color v.motion('duration-short2') v.motion('easing-standard');
+                color v.motion('duration-short2') v.motion('easing-standard'),
+                left v.motion('duration-short4') v.motion('easing-emphasized');
   }
   
   // Input element
@@ -68,6 +69,65 @@ $component: '#{base.$prefix}-textfield';
       }
     }
   }
+  
+  // Leading icon
+  &-leading-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    pointer-events: none;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Trailing icon
+  &-trailing-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    cursor: pointer;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Adjustments when icons are present
+  &--with-leading-icon {
+    .#{$component}-label {
+      left: 44px;
+    }
+    
+    .#{$component}-input {
+      padding-left: 44px;
+    }
+  }
+  
+  &--with-trailing-icon {
+    .#{$component}-input {
+      padding-right: 44px;
+    }
+  }
 
   // Error state
   &--error {
@@ -76,6 +136,11 @@ $component: '#{base.$prefix}-textfield';
     .#{$component}-label {
       color: t.color('error');
     }
+    
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon {
+      color: t.color('error');
+    }
   }
   
   // Disabled state
@@ -85,15 +150,20 @@ $component: '#{base.$prefix}-textfield';
     background-color: t.alpha('on-surface', 0.04);
     pointer-events: none;
     
-    & ~ .#{$component}-label {
+    & ~ .#{$component}-label,
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
       color: t.color('on-surface');
       opacity: 0.38;
     }
   }
   
-  // Helper text
+  // Helper text / Supporting text
   &-helper {
     @include m.typography('body-small');
+    position: absolute;
+    bottom: -18px;
+    left: 16px;
     margin-top: 4px;
     color: t.color('on-surface-variant');
     
@@ -127,6 +197,35 @@ $component: '#{base.$prefix}-textfield';
       margin-left: 0;
       margin-right: 4px;
     }
+    
+    &-leading-icon {
+      left: auto;
+      right: 12px;
+    }
+    
+    &-trailing-icon {
+      right: auto;
+      left: 12px;
+    }
+    
+    &--with-leading-icon {
+      .#{$component}-label {
+        left: auto;
+        right: 44px;
+      }
+      
+      .#{$component}-input {
+        padding-left: 16px;
+        padding-right: 44px;
+      }
+    }
+    
+    &--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 16px;
+        padding-left: 44px;
+      }
+    }
   }
   
   // ===== FILLED VARIANT =====
@@ -139,10 +238,6 @@ $component: '#{base.$prefix}-textfield';
       @include m.motion-transition(background-color, border-color);
 
 
-      &:focus {
-        padding-bottom: 6px;
-      }
-
       // Autofill styles for filled variant
       &:-webkit-autofill {
         border-radius: f.get-shape('extra-small') f.get-shape('extra-small') 0 0;
@@ -171,7 +266,7 @@ $component: '#{base.$prefix}-textfield';
       background-color: t.color('primary');
       border-radius: 0;
       pointer-events: none;
-      transition: 0.3s opacity ease;
+      transition: 0.2s opacity ease;
     }
 
     // Populated field (not empty) or focused field label position
@@ -191,12 +286,12 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
-    // Hover state
-    &:hover {    
-      .#{$component}-label {
-        color: t.color('primary');
-      }
-    }
+    // // Hover state
+    // &:hover {    
+    //   .#{$component}-label {
+    //     color: t.color('primary');
+    //   }
+    // }
     
     // Error state
     &.#{$component}--error {    
@@ -220,17 +315,74 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Icon adjustments for filled variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding: 20px 16px 7px 44px;
+      }
+      
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+        // Keep the label aligned with input text when focused/filled
+        left: 44px;
+      }
+      
+      .#{$component}-leading-icon {
+        top: 28px;
+      }
+    }
+    
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+      
+      .#{$component}-trailing-icon {
+        top: 28px;
+      }
+    }
+    
     // RTL support
     @include m.rtl {
       .#{$component}-label {
         left: auto;
         right: 16px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding: 20px 44px 7px 16px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // Keep the label aligned with input text when focused/filled in RTL
+          right: 44px;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
     }
   }
   
   // ===== OUTLINED VARIANT =====
   &--outlined {
+    background-color: inherit;
     border-radius: f.get-shape('extra-small');
     @include m.motion-transition(border-color);
     
@@ -259,6 +411,7 @@ $component: '#{base.$prefix}-textfield';
     }
 
     .#{$component}-label {
+      background-color: inherit;
       padding: 0 4px;
       left: 12px;
       top: 49%;
@@ -270,19 +423,17 @@ $component: '#{base.$prefix}-textfield';
       opacity: 0;
       width: 100%;
       height: 100%;
-      border: 2px solid t.color('primary');
+      border: 1.5px solid t.color('primary');
       border-radius: f.get-shape('extra-small');
       pointer-events: none;
-      transition: 0.2s opacity ease;
+      transition: 0.1s opacity ease;
     }
 
     // Populated field (not empty) or focused field label position
     &:not(.#{$component}--empty) .#{$component}-label,
     &.#{$component}--focused .#{$component}-label {
       padding: 0 4px;
-      background-color: t.color('surface');
       transform: translateY(-147%) scale(0.75);
-      
     }
 
     // Focus state
@@ -295,18 +446,10 @@ $component: '#{base.$prefix}-textfield';
           border-width: 2px;
         }
       }
-    }
-    
-    // Hover state
-    &:hover {    
+
       .#{$component}-label {
         color: t.color('primary');
       }
-
-      &::before {
-        opacity: 1;
-        border: 1px solid t.color('primary');
-      }
     }
     
     // Error state
@@ -330,6 +473,29 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Icon adjustments for outlined variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding-left: 44px;
+      }
+      
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        // For outlined variant, move label to default position
+        left: 13px;
+      }
+    }
+    
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+    }
+    
     // RTL support
     @include m.rtl {
       &:not(.#{$component}--empty) .#{$component}-label,
@@ -345,6 +511,72 @@ $component: '#{base.$prefix}-textfield';
       &.#{$component}--error .#{$component}-label {
         right: 12px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding-left: 16px;
+          padding-right: 44px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // For outlined variant in RTL, move label to default position
+          right: 13px;
+          left: auto;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
+    }
+  }
+  
+   // Multiline styles
+  &--multiline {
+    .#{$component}-input {
+      min-height: 100px;
+      height: auto;
+      resize: vertical;
+      padding-top: 12px;
+    }
+    
+    &--filled {
+      .#{$component}-input {
+
+      }
+    }
+
+    &--outlined {
+      .#{$component}-input {
+
+      }
+    }
+
+
+    .#{$component}-label {
+      top: 24px;
+    }
+  }
+
+
+  // Support for multiline inputs
+  &-input[type="multiline"] {
+    min-height: 100px;
+    resize: vertical;
+    
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
+      top: 20px;
+      transform: none;
     }
   }
 }