Addressing review comments.

elastic · Aug 25, 2020 · d9a2483 · d9a2483
1 parent 4950f1b
commit d9a2483
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 57 deletions.
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
@@ -216,7 +216,7 @@
   @include euiFormControlText;
 
   border: none;
-  border-radius: 0;
+  border-radius: $euiFormControlBorderRadius;
   padding: $euiFormControlPadding;
 
   @if ($includeStates) {

diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
@@ -4,6 +4,7 @@ $euiFormControlHeight: $euiSizeXXL !default;
 $euiFormControlCompressedHeight: $euiSizeXL !default;
 $euiFormControlPadding: $euiSizeM !default;
 $euiFormControlCompressedPadding: $euiSizeS !default;
+$euiFormControlBorderRadius: 0;
 $euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default;
 
 $euiRadioSize: $euiSize !default;

diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss
@@ -25,54 +25,16 @@
   }
 }
 
-// 2. Override invalid state with focus state.
+@mixin euiFormControlFocusStyle($borderOnly: false) {
+  // sass-lint:disable-block indentation, empty-args
+  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  background-image: euiFormControlGradient();
+  background-size: 100% 100%; // 1
 
-@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
-  @include euiFormControlSize($includeAlternates: $includeSizes);
-  @include euiFormControlDefaultShadow;
-  @include euiFormControlText;
-
-  border: none;
-  border-radius: $euiBorderRadius;
-  padding: $euiFormControlPadding;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle;
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-
-    // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
-    &:-webkit-autofill {
-      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-
-      ~ .euiFormControlLayoutIcons {
-        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-      }
-    }
-
-  }
-
-  @if ($includeSizes) {
-    &--compressed {
-      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
-    }
-
-    &--inGroup {
-      // sass-lint:disable-block no-important
-      box-shadow: none !important;
-    }
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      inset 0 0 0 1px $euiFormBorderColor;
   }
-}
+}
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss
@@ -1 +1,2 @@
-$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
+$euiFormControlBorderRadius: $euiBorderRadius;
+$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall;
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss
@@ -1,8 +1,9 @@
-$leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius;
-$rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0;
-$leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
-$rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
-
+.euiFormControlLayout {
+  $leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius;
+  $rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0;
+  $leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
+  $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
+}
 
 .euiFormControlLayout--group {
   border-radius: $euiBorderRadius;
@@ -76,4 +77,4 @@ $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCo
       border-radius: $rightSideRadiusSmall;
     }
   }
-}
+}