diff --git a/demos/text-field.scss b/demos/text-field.scss
index 221d48a20fd..ea72916389e 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -129,3 +129,6 @@
margin-bottom: 8px;
}
+.demo-tf-add-space {
+ margin: 10px 0;
+}
\ No newline at end of file
diff --git a/packages/mdc-notched-outline/foundation.js b/packages/mdc-notched-outline/foundation.js
index 710db8c0a61..b81aed98275 100644
--- a/packages/mdc-notched-outline/foundation.js
+++ b/packages/mdc-notched-outline/foundation.js
@@ -98,7 +98,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
const width = this.adapter_.getWidth();
const height = this.adapter_.getHeight();
const cornerWidth = radius + 1.2;
- const leadingStrokeLength = Math.abs(11 - cornerWidth);
+ const leadingStrokeLength = Math.abs(12 - cornerWidth);
const paddedNotchWidth = notchWidth + 8;
// The right, bottom, and left sides of the outline follow the same SVG path.
diff --git a/packages/mdc-notched-outline/mdc-notched-outline.scss b/packages/mdc-notched-outline/mdc-notched-outline.scss
index 065a79f9b18..dd6c20fcaf5 100644
--- a/packages/mdc-notched-outline/mdc-notched-outline.scss
+++ b/packages/mdc-notched-outline/mdc-notched-outline.scss
@@ -32,8 +32,9 @@
position: absolute;
top: 0;
left: 0;
- width: calc(100% - 1px);
- height: calc(100% - 2px);
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
transition: opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
opacity: 0;
text-align: left;
@@ -56,8 +57,9 @@
position: absolute;
top: 0;
left: 0;
- width: calc(100% - 4px);
- height: calc(100% - 4px);
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
transition:
opacity $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function,
border-color $mdc-notched-outline-transition-duration $mdc-animation-standard-curve-timing-function;
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 5541648d5b7..561272f6fac 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -190,9 +190,6 @@
@include mdc-floating-label-float-position($mdc-text-field-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
@include mdc-floating-label-shake-animation(text-field-dense);
- margin-top: 12px;
- margin-bottom: 4px;
-
.mdc-text-field__input {
padding: 12px 12px 0;
}
@@ -293,7 +290,7 @@
.mdc-text-field__input {
display: flex;
- padding: 12px;
+ padding: 12px 16px 14px;
border: none !important; // FF adds unwanted border in HC mode on windows.
background-color: transparent;
z-index: 1;
@@ -304,6 +301,8 @@
}
.mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, 16px);
+
width: auto;
}
}
@@ -371,7 +370,13 @@
}
@mixin mdc-text-field-with-trailing-icon_ {
- @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+ @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding);
+
+ // Outlined uses 16px for text alignment when using a trailing icon.
+ &.mdc-text-field--outlined {
+ @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
+
+ }
}
@mixin mdc-text-field-dense-with-trailing-icon_ {
diff --git a/packages/mdc-textfield/icon/_variables.scss b/packages/mdc-textfield/icon/_variables.scss
index 90c010a8a90..4bda4f8d96d 100644
--- a/packages/mdc-textfield/icon/_variables.scss
+++ b/packages/mdc-textfield/icon/_variables.scss
@@ -20,7 +20,8 @@
// THE SOFTWARE.
//
-$mdc-text-field-icon-position: 15px;
+$mdc-text-field-icon-position: 16px;
+$mdc-text-field-trailing-icon-position: 12px;
$mdc-text-field-icon-padding: 48px;
$mdc-text-field-dense-icon-position: 12px;
$mdc-text-field-dense-icon-padding: 38px;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 9079f202371..61bd63fbcb9 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -72,9 +72,12 @@
position: relative;
box-sizing: border-box;
height: 56px;
- margin-top: 16px;
overflow: hidden;
will-change: opacity, transform, color;
+
+ .mdc-floating-label {
+ @include mdc-rtl-reflexive-position(left, 12px);
+ }
}
.mdc-text-field__input {
@@ -84,7 +87,7 @@
box-sizing: border-box;
width: 100%;
height: 100%;
- padding: 20px 16px 0;
+ padding: 20px 12px 6px;
transition: mdc-text-field-transition(opacity);
border: none;
border-bottom: 1px solid;
@@ -198,6 +201,11 @@
}
.mdc-text-field + & {
+ margin-right: 12px;
+ margin-left: 12px;
+ }
+
+ .mdc-text-field--outlined + & {
margin-right: 16px;
margin-left: 16px;
}