From 9f165e69cfe2c17af4735663250f072808bca203 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 14 Jul 2020 14:09:16 -0700 Subject: [PATCH 01/11] Updates form controls to use the Amsterdam border radius. --- .../global_styling/mixins/_form.scss | 335 ++++++++++++++++++ .../global_styling/mixins/_index.scss | 1 + .../global_styling/variables/_form.scss | 63 ++++ .../global_styling/variables/_index.scss | 1 + .../overrides/_form_control_layout.scss | 3 + .../_form_control_layout_delimited.scss | 8 + .../eui-amsterdam/overrides/_index.scss | 3 +- 7 files changed, 413 insertions(+), 1 deletion(-) create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_form.scss create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_form.scss create mode 100644 src/themes/eui-amsterdam/overrides/_form_control_layout.scss create mode 100644 src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss new file mode 100644 index 00000000000..776e7bc3a03 --- /dev/null +++ b/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; +} + diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index bb41ca763e8..984aba6e774 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -4,3 +4,4 @@ @import 'button'; @import 'panel'; @import 'shadow'; +@import 'form'; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss new file mode 100644 index 00000000000..92fe4fb6358 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_form.scss @@ -0,0 +1,63 @@ +// Sizing +$euiFormMaxWidth: $euiSizeXXL * 10 !default; +$euiFormControlHeight: $euiSizeXXL !default; +$euiFormControlCompressedHeight: $euiSizeXL !default; +$euiFormControlPadding: $euiSizeM !default; +$euiFormControlCompressedPadding: $euiSizeS !default; +$euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default; + +$euiRadioSize: $euiSize !default; +$euiCheckBoxSize: $euiSize !default; + +// Switch +$euiSwitchHeight: $euiSize * 1.25 !default; +$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default; +$euiSwitchThumbSize: $euiSwitchHeight !default; +$euiSwitchIconHeight: $euiSize !default; + +$euiSwitchHeightCompressed: $euiSize !default; +$euiSwitchWidthCompressed: $euiSize * 1.75 !default; +$euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; + +$euiSwitchHeightMini: $euiSwitchHeight * .5 !default; +$euiSwitchWidthMini: $euiSwitchWidth * .5 !default; +$euiSwitchThumbSizeMini: $euiSwitchHeightMini !default; + +// Coloring +$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; +$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; +$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .95) !default; +$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; +$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; +$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; +$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade +$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; +$euiFormControlDisabledColor: $euiColorMediumShade !default; +$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default; +$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default; +$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default; +$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default; + +// Control Layout +$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default; +$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default; +$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default; + +// Range +$euiRangeTrackColor: $euiColorDarkShade !default; + +$euiRangeThumbRadius: 50% !default; +$euiRangeThumbHeight: $euiSize !default; +$euiRangeThumbWidth: $euiSize !default; +$euiRangeThumbBorderColor: $euiRangeTrackColor !default; + +$euiRangeTrackWidth: 100% !default; +$euiRangeTrackHeight: 2px !default; +$euiRangeTrackBorderWidth: 0 !default; +$euiRangeTrackBorderColor: $euiRangeTrackColor !default; +$euiRangeTrackRadius: $euiBorderRadius !default; + +$euiRangeDisabledOpacity: .25 !default; + +$euiRangeHighlightHeight: $euiSizeXS !default; + diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index 077e1e9aa0f..8785b7636d6 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -7,3 +7,4 @@ @import 'header'; @import 'typography'; @import 'shadows'; +@import 'form'; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss new file mode 100644 index 00000000000..22499c57107 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss @@ -0,0 +1,3 @@ +.euiFormControlLayout--group { + border-radius: $euiBorderRadius; +} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss new file mode 100644 index 00000000000..e8071e7b5c0 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss @@ -0,0 +1,8 @@ +.euiFormControlLayoutDelimited { + border-radius: $euiBorderRadius; + + .euiFormControlLayout__childrenWrapper { + border-radius: $euiBorderRadius; + overflow: hidden; + } +} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index 186f696e750..e63a90fd19e 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -12,4 +12,5 @@ @import 'popover'; @import 'progress'; @import 'text'; - +@import 'form_control_layout'; +@import 'form_control_layout_delimited'; \ No newline at end of file From b7f321b833f5cd5123c7b756fd1d1d5528d75c3a Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 14 Jul 2020 14:19:54 -0700 Subject: [PATCH 02/11] Removing variable file. It wasn't needed. --- .../global_styling/variables/_form.scss | 63 ------------------- .../global_styling/variables/_index.scss | 3 +- 2 files changed, 1 insertion(+), 65 deletions(-) delete mode 100644 src/themes/eui-amsterdam/global_styling/variables/_form.scss diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss deleted file mode 100644 index 92fe4fb6358..00000000000 --- a/src/themes/eui-amsterdam/global_styling/variables/_form.scss +++ /dev/null @@ -1,63 +0,0 @@ -// Sizing -$euiFormMaxWidth: $euiSizeXXL * 10 !default; -$euiFormControlHeight: $euiSizeXXL !default; -$euiFormControlCompressedHeight: $euiSizeXL !default; -$euiFormControlPadding: $euiSizeM !default; -$euiFormControlCompressedPadding: $euiSizeS !default; -$euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default; - -$euiRadioSize: $euiSize !default; -$euiCheckBoxSize: $euiSize !default; - -// Switch -$euiSwitchHeight: $euiSize * 1.25 !default; -$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default; -$euiSwitchThumbSize: $euiSwitchHeight !default; -$euiSwitchIconHeight: $euiSize !default; - -$euiSwitchHeightCompressed: $euiSize !default; -$euiSwitchWidthCompressed: $euiSize * 1.75 !default; -$euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default; - -$euiSwitchHeightMini: $euiSwitchHeight * .5 !default; -$euiSwitchWidthMini: $euiSwitchWidth * .5 !default; -$euiSwitchThumbSizeMini: $euiSwitchHeightMini !default; - -// Coloring -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; -$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; -$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .95) !default; -$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; -$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; -$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; -$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade -$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default; -$euiFormControlDisabledColor: $euiColorMediumShade !default; -$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default; -$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default; -$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default; -$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default; - -// Control Layout -$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default; -$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default; -$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default; - -// Range -$euiRangeTrackColor: $euiColorDarkShade !default; - -$euiRangeThumbRadius: 50% !default; -$euiRangeThumbHeight: $euiSize !default; -$euiRangeThumbWidth: $euiSize !default; -$euiRangeThumbBorderColor: $euiRangeTrackColor !default; - -$euiRangeTrackWidth: 100% !default; -$euiRangeTrackHeight: 2px !default; -$euiRangeTrackBorderWidth: 0 !default; -$euiRangeTrackBorderColor: $euiRangeTrackColor !default; -$euiRangeTrackRadius: $euiBorderRadius !default; - -$euiRangeDisabledOpacity: .25 !default; - -$euiRangeHighlightHeight: $euiSizeXS !default; - diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index 8785b7636d6..61ced978feb 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -6,5 +6,4 @@ @import 'flyout'; @import 'header'; @import 'typography'; -@import 'shadows'; -@import 'form'; \ No newline at end of file +@import 'shadows'; \ No newline at end of file From 18003f97e4550e5ee9a4a196465c67f8c93f296d Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 28 Jul 2020 12:37:58 -0700 Subject: [PATCH 03/11] Remove unused mixins from overrides --- .../global_styling/mixins/_form.scss | 259 +----------------- 1 file changed, 1 insertion(+), 258 deletions(-) diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss index 776e7bc3a03..950f9cf1a64 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss @@ -1,140 +1,3 @@ -// 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; @@ -162,46 +25,6 @@ } } -@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) { @@ -252,84 +75,4 @@ 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; -} - +} \ No newline at end of file From 304ea02fc395878965183a3fe861ceaaddf1b23a Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 28 Jul 2020 15:45:33 -0700 Subject: [PATCH 04/11] Bunch more conditions for complex controls. --- .../overrides/_form_control_layout.scss | 30 ++++++++++++++++ .../_form_control_layout_delimited.scss | 35 ++++++++++++++++++- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss index 22499c57107..f79e12599d2 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss @@ -1,3 +1,33 @@ .euiFormControlLayout--group { border-radius: $euiBorderRadius; + + .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'], + .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] { + border-radius: 0; + } + + .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] { + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + } + + .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] { + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + } + + &.euiFormControlLayout--compressed { + border-radius: $euiBorderRadiusSmall; + + .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'], + .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] { + border-radius: 0; + } + + .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] { + border-radius: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; + } + + .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] { + border-radius: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; + } + } } \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss index e8071e7b5c0..4e0f04e764b 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss @@ -1,8 +1,41 @@ .euiFormControlLayoutDelimited { border-radius: $euiBorderRadius; - .euiFormControlLayout__childrenWrapper { + &.euiFormControlLayout--group { + .euiFormControlLayout__childrenWrapper:first-child { + border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + } + } + + .euiFormControlLayout__childrenWrapper:only-child { border-radius: $euiBorderRadius; overflow: hidden; } + + .euiFormControlLayout__prepend + + .euiFormControlLayout__childrenWrapper { + &:last-child { + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + } + } + + &.euiFormControlLayout--compressed { + &.euiFormControlLayout--group { + .euiFormControlLayout__childrenWrapper:first-child { + border-radius: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; + } + } + + .euiFormControlLayout__childrenWrapper:only-child { + border-radius: $euiBorderRadiusSmall; + overflow: hidden; + } + + .euiFormControlLayout__prepend + + .euiFormControlLayout__childrenWrapper { + &:last-child { + border-radius: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; + } + } + } } \ No newline at end of file From 5ec6a199b4e898c00352d7422a0d8ffcab4e23d7 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 4 Aug 2020 16:58:52 -0700 Subject: [PATCH 05/11] Addressing some pre/append cases. --- .../overrides/_form_control_layout.scss | 38 +++++++++++++++++-- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss index f79e12599d2..bc318773108 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss @@ -1,17 +1,47 @@ +$leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius; +$rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0; +$leftSideRadiusSmall: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; +$rightSideRadiusSmall: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; + + .euiFormControlLayout--group { border-radius: $euiBorderRadius; + .euiFormControlLayout__prepend:first-child { + border-radius: $leftSideRadius; + + [class*='euiButton'] { + border-radius: $leftSideRadius; + } + } + + .euiFormControlLayout__append:last-child { + border-radius: $rightSideRadius; + + [class*='euiButton'] { + border-radius: $rightSideRadius; + } + } + + .euiToolTipAnchor:first-child [class*='euiButton'] { + border-radius: $leftSideRadius; + } + + .euiToolTipAnchor:last-child [class*='euiButton'] { + border-radius: $rightSideRadius; + } + .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'], .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] { border-radius: 0; } .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + border-radius: $leftSideRadius; } .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] { - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + border-radius: $rightSideRadius; } &.euiFormControlLayout--compressed { @@ -23,11 +53,11 @@ } .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] { - border-radius: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; + border-radius: $leftSideRadiusSmall; } .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] { - border-radius: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; + border-radius: $rightSideRadiusSmall; } } } \ No newline at end of file From 31d5fc850767efa8a44e65d04be4173d2d82d13a Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 4 Aug 2020 17:08:56 -0700 Subject: [PATCH 06/11] Addressing checkboxes and filepickers. --- src/themes/eui-amsterdam/overrides/_checkbox.scss | 3 +++ src/themes/eui-amsterdam/overrides/_file_picker.scss | 3 +++ src/themes/eui-amsterdam/overrides/_index.scss | 2 ++ 3 files changed, 8 insertions(+) create mode 100644 src/themes/eui-amsterdam/overrides/_checkbox.scss create mode 100644 src/themes/eui-amsterdam/overrides/_file_picker.scss diff --git a/src/themes/eui-amsterdam/overrides/_checkbox.scss b/src/themes/eui-amsterdam/overrides/_checkbox.scss new file mode 100644 index 00000000000..dcb854ea2f6 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_checkbox.scss @@ -0,0 +1,3 @@ +.euiCheckbox .euiCheckbox__input + .euiCheckbox__square { + border-radius: $euiBorderRadiusSmall; +} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_file_picker.scss b/src/themes/eui-amsterdam/overrides/_file_picker.scss new file mode 100644 index 00000000000..a1a26484fb0 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_file_picker.scss @@ -0,0 +1,3 @@ +.euiFilePicker__prompt { + border-radius: $euiBorderRadius; +} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index e63a90fd19e..54f06f0f64f 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -2,7 +2,9 @@ @import 'button_empty'; @import 'button_group'; @import 'call_out'; +@import 'checkbox'; @import 'code'; +@import 'file_picker'; @import 'filter_group'; @import 'header'; @import 'image'; From ef67acab0f61ad57db430aad9480a6c76497ed44 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 6 Aug 2020 09:55:05 -0700 Subject: [PATCH 07/11] Fixes for compressed forms. --- .../global_styling/variables/_form.scss | 1 + .../global_styling/variables/_index.scss | 1 + .../overrides/_form_control_layout.scss | 20 +++++++++++++++++-- 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_form.scss diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss new file mode 100644 index 00000000000..a5b7429d21a --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_form.scss @@ -0,0 +1 @@ +$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss index 61ced978feb..984743a3afb 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -4,6 +4,7 @@ @import 'buttons'; @import 'borders'; @import 'flyout'; +@import 'form'; @import 'header'; @import 'typography'; @import 'shadows'; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss index bc318773108..97690febf1c 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss @@ -1,7 +1,7 @@ $leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius; $rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0; -$leftSideRadiusSmall: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; -$rightSideRadiusSmall: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; +$leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius; +$rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0; .euiFormControlLayout--group { @@ -47,6 +47,22 @@ $rightSideRadiusSmall: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; &.euiFormControlLayout--compressed { border-radius: $euiBorderRadiusSmall; + .euiFormControlLayout__prepend:first-child { + border-radius: $leftSideRadiusSmall; + + [class*='euiButton'] { + border-radius: $leftSideRadiusSmall; + } + } + + .euiFormControlLayout__append:last-child { + border-radius: $rightSideRadiusSmall; + + [class*='euiButton'] { + border-radius: $rightSideRadiusSmall; + } + } + .euiFormControlLayout__childrenWrapper:nth-child(2) [class*='euiField'], .euiFormControlLayout__childrenWrapper:nth-child(3) [class*='euiField'] { border-radius: 0; From d410b7f68e9dc76f04235e246351b9d710a2f449 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Thu, 6 Aug 2020 11:31:52 -0700 Subject: [PATCH 08/11] Replaces some border radius variables with the right ones. --- .../overrides/_form_control_layout_delimited.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss index 4e0f04e764b..1d21597f61e 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss @@ -22,19 +22,19 @@ &.euiFormControlLayout--compressed { &.euiFormControlLayout--group { .euiFormControlLayout__childrenWrapper:first-child { - border-radius: $euiBorderRadiusSmall 0 0 $euiBorderRadiusSmall; + border-radius: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius; } } .euiFormControlLayout__childrenWrapper:only-child { - border-radius: $euiBorderRadiusSmall; + border-radius: $euiFormControlCompressedBorderRadius; overflow: hidden; } .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper { &:last-child { - border-radius: 0 $euiBorderRadiusSmall $euiBorderRadiusSmall 0; + border-radius: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0; } } } From 0dc7d7abe86795726ed45601fba7a43c723582ee Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 25 Aug 2020 13:50:05 -0700 Subject: [PATCH 09/11] Addressing review comments. --- src/global_styling/mixins/_form.scss | 2 +- src/global_styling/variables/_form.scss | 1 + .../global_styling/mixins/_form.scss | 60 ++++--------------- .../global_styling/variables/_form.scss | 3 +- .../overrides/_form_control_layout.scss | 13 ++-- 5 files changed, 22 insertions(+), 57 deletions(-) diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 4a9cc4cf0d3..50eef2064ac 100644 --- 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 index 92fe4fb6358..9dca17898e1 100644 --- 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 index 950f9cf1a64..cd43229b675 100644 --- 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; } -} \ No newline at end of file +} diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss index a5b7429d21a..3084f001bf9 100644 --- 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; \ No newline at end of file +$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 index 97690febf1c..e8fd6429d94 100644 --- 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; } } -} \ No newline at end of file +} From 44e8e18e455e477aa110141fa719e3ff02da7928 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 5 Sep 2020 15:05:29 -0400 Subject: [PATCH 10/11] Fixing a few more inputs and creating a few more variables --- .../super_date_picker/_super_date_picker.scss | 1 + .../form/file_picker/_file_picker.scss | 8 +++ .../__snapshots__/suggest.test.tsx.snap | 32 ++++++------ .../__snapshots__/suggest_input.test.tsx.snap | 50 +++++++++---------- src/components/suggest/_suggest_input.scss | 11 ++-- src/components/suggest/suggest_input.tsx | 21 ++++---- src/global_styling/mixins/_form.scss | 2 +- src/global_styling/variables/_form.scss | 3 +- .../global_styling/mixins/_form.scss | 48 ++++++++---------- .../global_styling/variables/_form.scss | 4 ++ .../eui-amsterdam/overrides/_checkbox.scss | 3 -- .../eui-amsterdam/overrides/_file_picker.scss | 3 -- .../overrides/_form_control_layout.scss | 10 ++-- .../_form_control_layout_delimited.scss | 10 ++-- .../eui-amsterdam/overrides/_index.scss | 4 +- 15 files changed, 97 insertions(+), 113 deletions(-) delete mode 100644 src/themes/eui-amsterdam/overrides/_checkbox.scss delete mode 100644 src/themes/eui-amsterdam/overrides/_file_picker.scss diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index 726e0650901..a04a97b4177 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -26,6 +26,7 @@ > .euiDatePickerRange { max-width: none; width: auto; + border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0; } } } diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss index d3e1d5d3df8..0dc0fff3d78 100644 --- a/src/components/form/file_picker/_file_picker.scss +++ b/src/components/form/file_picker/_file_picker.scss @@ -7,8 +7,14 @@ position: relative; &.euiFilePicker--large { + border-radius: $euiFormControlBorderRadius; + overflow: hidden; height: auto; } + + &.euiFilePicker--large.euiFilePicker--compressed { + border-radius: $euiFormControlCompressedBorderRadius; + } } // The input is an invisiable dropzone / button @@ -65,6 +71,7 @@ padding-right: $euiFormControlPadding; padding-bottom: $euiFormControlPadding; pointer-events: none; /* 1 */ + border-radius: $euiFormControlBorderRadius; // sass-lint:disable-block indentation transition: @@ -77,6 +84,7 @@ @include euiFormControlStyleCompressed($includeStates: false); @include euiFormControlWithIcon($compressed: true); /* 2 */ height: $euiFormControlCompressedHeight; + border-radius: $euiFormControlCompressedBorderRadius; } .euiFilePicker--large & { diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap index 61186965b79..18c66bb4159 100644 --- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest.test.tsx.snap @@ -3,29 +3,25 @@ exports[`EuiSuggest is rendered 1`] = `
-
-
+
+
-
- -
+
diff --git a/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap index ed75272e0ea..ffe31cb271b 100644 --- a/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap +++ b/src/components/suggest/__snapshots__/suggest_input.test.tsx.snap @@ -2,39 +2,35 @@ exports[`EuiSuggestInput is rendered 1`] = `
-
-
+
+
-
- -
- -
- +
+ +
+
diff --git a/src/components/suggest/_suggest_input.scss b/src/components/suggest/_suggest_input.scss index cf1e7b5da1e..d71c7399cad 100644 --- a/src/components/suggest/_suggest_input.scss +++ b/src/components/suggest/_suggest_input.scss @@ -1,9 +1,4 @@ -.euiSuggestInput { - font-size: $euiFontSizeS; - color: $euiColorPrimary; - - .euiSuggestInput__statusIcon { - // sass-lint:disable-block no-important - background-color: transparent !important; // Override typical append coloring - } +.euiSuggestInput__statusIcon { + // sass-lint:disable-block no-important + background-color: transparent !important; // Override typical append coloring } diff --git a/src/components/suggest/suggest_input.tsx b/src/components/suggest/suggest_input.tsx index b92c3d7989f..dfb9f3ae757 100644 --- a/src/components/suggest/suggest_input.tsx +++ b/src/components/suggest/suggest_input.tsx @@ -137,7 +137,7 @@ export const EuiSuggestInput: FunctionComponent = props => = props => ); return ( -
- -
{suggestions}
- -
+ + {suggestions} + ); }; diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 50eef2064ac..6864b5f4894 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -301,7 +301,7 @@ @if $type == 'round' { border-radius: $size; } @else if $type == 'square' { - border-radius: $euiBorderRadius; + border-radius: $euiCheckboxBorderRadius; } // sass-lint:disable-block indentation transition: background-color $euiAnimSpeedFast ease-in, diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index 9dca17898e1..555533d9eab 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -4,11 +4,12 @@ $euiFormControlHeight: $euiSizeXXL !default; $euiFormControlCompressedHeight: $euiSizeXL !default; $euiFormControlPadding: $euiSizeM !default; $euiFormControlCompressedPadding: $euiSizeS !default; -$euiFormControlBorderRadius: 0; +$euiFormControlBorderRadius: 0 !default; $euiFormControlCompressedBorderRadius: $euiBorderRadius / 2 !default; $euiRadioSize: $euiSize !default; $euiCheckBoxSize: $euiSize !default; +$euiCheckboxBorderRadius: $euiBorderRadius !default; // Switch $euiSwitchHeight: $euiSize * 1.25 !default; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss index cd43229b675..4a587171abd 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_form.scss @@ -1,30 +1,4 @@ -@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; - } -} - +// Removes some box-shadows @mixin euiFormControlFocusStyle($borderOnly: false) { // sass-lint:disable-block indentation, empty-args background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); @@ -38,3 +12,23 @@ inset 0 0 0 1px $euiFormBorderColor; } } + +// Removes euiSlightShadow +@mixin euiCustomControl($type: null, $size: $euiSize) { + @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: $euiCheckboxBorderRadius; + } + // sass-lint:disable-block indentation + transition: background-color $euiAnimSpeedFast ease-in, + border-color $euiAnimSpeedFast ease-in; +} diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/eui-amsterdam/global_styling/variables/_form.scss index 3084f001bf9..e9236784885 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_form.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_form.scss @@ -1,2 +1,6 @@ $euiFormControlBorderRadius: $euiBorderRadius; $euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall; + +$euiFormControlBoxShadow: 0 0; + +$euiCheckboxBorderRadius: $euiBorderRadiusSmall; diff --git a/src/themes/eui-amsterdam/overrides/_checkbox.scss b/src/themes/eui-amsterdam/overrides/_checkbox.scss deleted file mode 100644 index dcb854ea2f6..00000000000 --- a/src/themes/eui-amsterdam/overrides/_checkbox.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiCheckbox .euiCheckbox__input + .euiCheckbox__square { - border-radius: $euiBorderRadiusSmall; -} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_file_picker.scss b/src/themes/eui-amsterdam/overrides/_file_picker.scss deleted file mode 100644 index a1a26484fb0..00000000000 --- a/src/themes/eui-amsterdam/overrides/_file_picker.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiFilePicker__prompt { - border-radius: $euiBorderRadius; -} \ No newline at end of file diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss index e8fd6429d94..06437bf3f67 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout.scss @@ -1,12 +1,10 @@ -.euiFormControlLayout { - $leftSideRadius: $euiBorderRadius 0 0 $euiBorderRadius; - $rightSideRadius: 0 $euiBorderRadius $euiBorderRadius 0; +.euiFormControlLayout--group { + $leftSideRadius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius; + $rightSideRadius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0; $leftSideRadiusSmall: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius; $rightSideRadiusSmall: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0; -} -.euiFormControlLayout--group { - border-radius: $euiBorderRadius; + border-radius: $euiFormControlBorderRadius; .euiFormControlLayout__prepend:first-child { border-radius: $leftSideRadius; diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss index 1d21597f61e..784cb4ee46f 100644 --- a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss +++ b/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss @@ -1,21 +1,21 @@ .euiFormControlLayoutDelimited { - border-radius: $euiBorderRadius; + border-radius: $euiFormControlBorderRadius; &.euiFormControlLayout--group { .euiFormControlLayout__childrenWrapper:first-child { - border-radius: $euiBorderRadius 0 0 $euiBorderRadius; + border-radius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius; } } .euiFormControlLayout__childrenWrapper:only-child { - border-radius: $euiBorderRadius; + border-radius: $euiFormControlBorderRadius; overflow: hidden; } .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper { &:last-child { - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0; } } @@ -38,4 +38,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index 54f06f0f64f..ac72add8b20 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -2,9 +2,7 @@ @import 'button_empty'; @import 'button_group'; @import 'call_out'; -@import 'checkbox'; @import 'code'; -@import 'file_picker'; @import 'filter_group'; @import 'header'; @import 'image'; @@ -15,4 +13,4 @@ @import 'progress'; @import 'text'; @import 'form_control_layout'; -@import 'form_control_layout_delimited'; \ No newline at end of file +@import 'form_control_layout_delimited'; From 8d9cf59f919512dd00b8479198e1f317a4f31e3c Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Tue, 8 Sep 2020 10:43:44 -0700 Subject: [PATCH 11/11] CL --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 472c468766f..16fb24b963d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ - Changed `value` prop in `EuiExpression` to not required ([#4014](https://github.com/elastic/eui/pull/4014)) - Added `fold` and `unfold` glyphs to `EuiIcon` ([#3994](https://github.com/elastic/eui/pull/3994)) +**Theme: Amsterdam** + +- Updated `EuiFormControl` styles for Amsterdam. Elements now use a uniform border-radius. ([#3741](https://github.com/elastic/eui/pull/3741)) + **Bug fixes** - Fix incorrect `euiCodeBlockNameColor` variable usage for `.hljs-name` in SCSS ([#3991](https://github.com/elastic/eui/pull/3991))