fix text-field leading and trailing styles

actifyjs · Nov 1, 2024 · b0b2fbb · b0b2fbb
1 parent 9049a9e
commit b0b2fbb
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/packages/actify/src/components/Field/styles/field.module.css b/packages/actify/src/components/Field/styles/field.module.css
@@ -663,6 +663,15 @@
 }
 
 .field {
+  --_with-leading-content-leading-space: var(
+    --md-filled-field-with-leading-content-leading-space,
+    12px
+  );
+  --_content-space: var(--md-filled-field-content-space, 16px);
+  --_with-trailing-content-trailing-space: var(
+    --md-filled-field-with-trailing-content-trailing-space,
+    12px
+  );
   width: 100%;
   cursor: text;
   display: flex;
@@ -703,11 +712,29 @@
 .start {
   height: 100%;
   display: flex;
-  min-width: 40px;
   position: relative;
   align-items: center;
   box-sizing: border-box;
   justify-content: center;
+  color: var(--_leading-content-color);
+}
+.end {
+  height: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  color: var(--_trailing-content-color);
+}
+
+.with-start .start {
+  margin-inline: var(--_with-leading-content-leading-space)
+    var(--_content-space);
+}
+.with-end .end {
+  margin-inline: var(--_content-space)
+    var(--_with-trailing-content-trailing-space);
 }
 
 .middle {
@@ -720,16 +747,6 @@
   flex: 1;
 }
 
-.end {
-  height: 100%;
-  display: flex;
-  min-width: 40px;
-  position: relative;
-  align-items: center;
-  box-sizing: border-box;
-  justify-content: center;
-  color: var(--_trailing-content-color);
-}
 .focused .end {
   color: var(--_focus-trailing-content-color);
 }