Updates form controls to use the Amsterdam border radius.

src/themes/eui-amsterdam/global_styling/mixins/_form.scss

@@ -0,0 +1,335 @@
+// Labels
+@mixin euiFormLabel {
+  @include euiFontSizeXS;
+  color: $euiTitleColor;
+  font-weight: $euiFontWeightSemiBold;
+}
+
+@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
+  $iconSize: $euiSize;
+  $iconPadding: $euiFormControlPadding;
+  $marginBetweenIcons: $euiFormControlPadding / 2;
+
+  @if ($compressed) {
+    $iconPadding: $euiFormControlCompressedPadding;
+  }
+
+  @if variable-exists(numOfIcons) == false {
+    @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
+  } @else if $numOfIcons == 1 {
+    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
+  } @else if $numOfIcons == 2 {
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
+  } @else if $numOfIcons == 3 {
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
+  }
+}
+
+@mixin euiFormControlLayoutClearIcon($iconClass) {
+  $clearSize: $euiSize;
+  @include size($clearSize);
+
+  pointer-events: all;
+  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
+  border-radius: $clearSize;
+  line-height: 0; // ensures the icon stays vertically centered
+
+  &:focus {
+    @include euiFocusRing;
+  }
+
+  #{$iconClass} {
+    @include size($euiSizeS);
+    fill: $euiColorEmptyShade;
+    stroke: $euiColorEmptyShade;
+    stroke-width: 2px; // increase thickness of icon at such a small size
+  }
+}
+
+@mixin euiPlaceholderPerBrowser {
+  // sass-lint:disable-block no-vendor-prefixes
+  // Each prefix must be its own content block
+  &::-webkit-input-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::placeholder { @content; }
+}
+
+@function euiFormControlGradient($color: $euiColorPrimary) {
+  @return linear-gradient(to top,
+    $color,
+    $color 2px,
+    transparent 2px,
+    transparent 100%
+  );
+}
+
+@mixin euiFormControlText {
+  @include euiFont;
+  font-size: $euiFontSizeS;
+  line-height: 1em; // fixes text alignment in IE
+  color: $euiTextColor;
+
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
+    color: $euiColorDarkShade;
+  }
+}
+
+@mixin euiFormControlSize(
+  $height: $euiFormControlHeight,
+  $includeAlternates: false
+) {
+  // Default
+  max-width: $euiFormMaxWidth;
+  width: 100%;
+  height: $height;
+
+  @if ($includeAlternates) {
+    &--fullWidth {
+      max-width: 100%;
+    }
+
+    &--compressed {
+      height: $euiFormControlCompressedHeight;
+    }
+
+    &--inGroup {
+      height: 100%;
+    }
+  }
+}
+
+@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
+  @if ($isIconOptional) {
+    @at-root {
+      #{&}--withIcon {
+        @include euiFormControlLayoutPadding(1, $side, $compressed);
+      }
+    }
+  } @else {
+    @include euiFormControlLayoutPadding(1, $side, $compressed);
+  }
+}
+
+@mixin euiFormControlIsLoading($isNextToIcon: false) {
+  @at-root {
+    #{&}-isLoading {
+      @if ($isNextToIcon) {
+        @include euiFormControlLayoutPadding(2);
+      } @else {
+        @include euiFormControlLayoutPadding(1);
+      }
+    }
+
+    #{&}-isLoading#{&}--compressed {
+      @if ($isNextToIcon) {
+        @include euiFormControlLayoutPadding(2, $compressed: true);
+      } @else {
+        @include euiFormControlLayoutPadding(1, $compressed: true);
+      }
+    }
+  }
+}
+
+// 1. Must supply both values to background-size or some browsers apply the single value to both directions
+
+@mixin euiFormControlDefaultShadow($borderOnly: false) {
+  // sass-lint:disable-block indentation
+  background-color: $euiFormBackgroundColor;
+  background-repeat: no-repeat;
+  background-size: 0% 100%; // 1
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      inset 0 0 0 1px $euiFormBorderColor;
+  }
+
+  transition:
+    box-shadow $euiAnimSpeedFast ease-in,
+    background-image $euiAnimSpeedFast ease-in,
+    background-size $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
+
+  // Fixes bug in Firefox where adding a transition to the background-color
+  // caused a flash of differently styled dropdown.
+  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+    // List *must* be in the same order as the above.
+    transition-property: box-shadow, background-image, background-size;
+  }
+}
+
+@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
+
+  @if ($borderOnly) {
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
+  } @else {
+    box-shadow:
+      inset 0 0 0 1px $euiFormBorderColor;
+  }
+}
+
+@mixin euiFormControlInvalidStyle {
+  background-image: euiFormControlGradient($euiColorDanger);
+  background-size: 100%;
+}
+
+@mixin euiFormControlDisabledStyle {
+  cursor: not-allowed;
+  color: $euiFormControlDisabledColor;
+  background: $euiFormBackgroundDisabledColor;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
+
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
+    color: $euiFormControlDisabledColor;
+  }
+}
+
+@mixin euiFormControlReadOnlyStyle {
+  cursor: default;
+  // Use transparency since there is no border and in case form is on a non-white background
+  background: $euiFormBackgroundReadOnlyColor;
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
+}
+
+
+// 2. Override invalid state with focus state.
+
+@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;
+    }
+  }
+}
+
+@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
+  @include euiFormControlDefaultShadow($borderOnly: true);
+  padding: $euiFormControlCompressedPadding;
+  border-radius: $euiFormControlCompressedBorderRadius;
+
+  @if ($includeStates) {
+    &:invalid { // 2
+      @include euiFormControlInvalidStyle;
+    }
+
+    &:focus { // 2
+      @include euiFormControlFocusStyle($borderOnly: true);
+    }
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    &[readOnly] {
+      @include euiFormControlReadOnlyStyle;
+    }
+  }
+}
+
+// Custom styles and states for checkboxes and radios
+
+@mixin euiCustomControl($type: null, $size: $euiSize) {
+  @include euiSlightShadow;
+
+  @if $size {
+    $size: $size - 2px; // subtract 2px from size to account for border size
+    padding: $size / 2;
+  }
+
+  border: 1px solid $euiFormCustomControlBorderColor;
+  background: $euiColorEmptyShade no-repeat center;
+
+  @if $type == 'round' {
+    border-radius: $size;
+  } @else if $type == 'square' {
+    border-radius: $euiBorderRadius;
+  }
+  // sass-lint:disable-block indentation
+  transition: background-color $euiAnimSpeedFast ease-in,
+              border-color $euiAnimSpeedFast ease-in;
+}
+
+@mixin euiCustomControlSelected($type: null) {
+  border-color: $euiColorPrimary;
+  background-color: $euiColorPrimary;
+
+  @if $type != null {
+    @include euiIconBackground($type, $euiColorEmptyShade);
+  }
+}
+
+@mixin euiCustomControlDisabled($type: null) {
+  border-color: $euiColorLightShade;
+  background-color: $euiColorLightShade;
+  box-shadow: none;
+  @if $type != null {
+    @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);
+  }
+}
+
+@mixin euiCustomControlFocused {
+  @include euiFocusRing;
+  border-color: $euiColorPrimary;
+}
+
+@mixin euiHiddenSelectableInput {
+  position: absolute;
+  // sass-lint:disable no-important
+  opacity: 0 !important; // Make sure it's still hidden when :disabled
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+

src/themes/eui-amsterdam/global_styling/mixins/_index.scss

@@ -4,3 +4,4 @@
 @import 'button';
 @import 'panel';
 @import 'shadow';
+@import 'form';