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 726e06509014..a04a97b4177d 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 d3e1d5d3df89..0dc0fff3d787 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 61186965b792..18c66bb41591 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 ed75272e0eac..ffe31cb271bf 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 cf1e7b5da1e3..d71c7399cad2 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 b92c3d7989f0..dfb9f3ae7572 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 50eef2064aca..6864b5f48947 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 9dca17898e13..555533d9eab5 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 cd43229b6757..4a587171abd3 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 3084f001bf92..e9236784885a 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 dcb854ea2f60..000000000000 --- 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 a1a26484fb01..000000000000 --- 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 e8fd6429d94e..06437bf3f674 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 1d21597f61e8..784cb4ee46fc 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 54f06f0f64f6..ac72add8b20b 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';