diff --git a/CHANGELOG.md b/CHANGELOG.md index 745ed965593..328f3c25016 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) - Modifying drop shadow intensities and color. ([607](https://github.com/elastic/eui/pull/607)) +- Removed extraneous `global_styling/mixins/_forms.scss` file and importing the correct files in the `filter_group.scss` and `combo_box.scss` files. ([609](https://github.com/elastic/eui/pull/609)) **Bug fixes** diff --git a/src/components/combo_box/_index.scss b/src/components/combo_box/_index.scss index 29040a0addd..cd8d5523be1 100644 --- a/src/components/combo_box/_index.scss +++ b/src/components/combo_box/_index.scss @@ -1,3 +1,6 @@ +@import '../form/variables'; +@import '../form/mixins'; + @import 'combo_box'; @import 'combo_box_input/index'; @import 'combo_box_options_list/index'; diff --git a/src/components/filter_group/_index.scss b/src/components/filter_group/_index.scss index 0b04e4b76d2..e1dfb179ffc 100644 --- a/src/components/filter_group/_index.scss +++ b/src/components/filter_group/_index.scss @@ -1,3 +1,6 @@ +@import '../form/variables'; +@import '../form/mixins'; + @import 'filter_group'; @import 'filter_button'; @import 'filter_select_item'; diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index 5238f0514b3..a91002c506d 100644 --- a/src/components/form/_index.scss +++ b/src/components/form/_index.scss @@ -1,155 +1,5 @@ -$euiFormMaxWidth: 400px; -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); -$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade - -@mixin euiFormControlSize { - max-width: $euiFormMaxWidth; - width: 100%; -} - -@mixin euiFormControlWithIcon($isIconOptional: false) { - $iconPadding: $euiSizeXXL; - - @if ($isIconOptional) { - @at-root { - #{&}--withIcon { - padding-left: $iconPadding; - } - } - } @else { - padding-left: $iconPadding; - } -} - -@mixin euiFormControlIsLoading($isNextToIcon: false) { - - @at-root { - #{&}-isLoading { - @if ($isNextToIcon) { - padding-right: $euiSizeXXL + $euiSize; - } @else { - padding-right: $euiSizeXXL; - } - } - } -} - -@mixin euiFormControlDefaultShadow { - box-shadow: - 0 2px 2px -1px rgba($euiShadowColor, 0.2), - 0 0 0 1px transparentize($euiColorFullShade, .92), - inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; -} - -@mixin euiFormControlInvalidStyle { - box-shadow: - 0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2), - 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 $euiColorEmptyShade, - inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger; -} - -@mixin euiFormControlFocusStyle { - background: tintOrShade($euiColorEmptyShade, 0%, 20%); - box-shadow: - 0 4px 4px -2px rgba($euiShadowColor, 0.2), - 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%), - inset 0 -2px 0 0 $euiColorPrimary; -} - -@mixin euiFormControlDisabledStyle { - cursor: not-allowed; - background: darken($euiColorLightestShade, 2%); - box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92); -} - -/** - * 1. Override invalid state with focus state. - */ -@mixin euiFormControlStyle { - @include euiFormControlSize; - @include euiFormControlDefaultShadow; - - border: none; - font-size: $euiFontSizeS; - font-family: $euiFontFamily; - padding: $euiSizeM; - color: $euiTextColor; - background: $euiFormBackgroundColor; - transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in; - border-radius: 0; - - &--fullWidth { - max-width: 100%; - } - - &:invalid { /* 1 */ - @include euiFormControlInvalidStyle; - } - - &:focus { /* 1 */ - @include euiFormControlFocusStyle; - } - - &:disabled { - @include euiFormControlDisabledStyle; - } - - &[readOnly] { - cursor: default; - background: transparent; - border-color: transparent; - box-shadow: none; - } -} - -// CUSTOM STYLES & STATES -@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 shadeOrTint($euiColorLightestShade, 18%, 30%); - background: $euiColorEmptyShade no-repeat center; - @include euiSlightShadow; - - @if $type == 'round' { - border-radius: $size; - } @else if $type == 'square' { - border-radius: $euiBorderRadius; - } - - transition: background-color $euiAnimSpeedFast ease-in, - border-color $euiAnimSpeedFast ease-in, - background-image 0s ease-out $euiAnimSpeedFast; -} - -@mixin euiCustomControl--selected($type: null){ - border-color: $euiColorPrimary; - background-color: $euiColorPrimary; - - @if $type != null { - @include euiIconBackground($type, $euiColorEmptyShade); - } -} - -@mixin euiCustomControl--disabled($type: null){ - border-color: $euiColorLightShade; - background-color: $euiColorLightShade; - box-shadow: none; - @if $type != null { - @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor); - } -} - -@mixin euiCustomControl--focused(){ - border-color: $euiColorPrimary; - @include euiFocusRing; -} - +@import 'variables'; +@import 'mixins'; @import 'checkbox/index'; @import 'field_number/index'; diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss new file mode 100644 index 00000000000..777f097ce65 --- /dev/null +++ b/src/components/form/_mixins.scss @@ -0,0 +1,147 @@ +@mixin euiFormControlSize { + max-width: $euiFormMaxWidth; + width: 100%; +} + +@mixin euiFormControlWithIcon($isIconOptional: false) { + $iconPadding: $euiSizeXXL; + + @if ($isIconOptional) { + @at-root { + #{&}--withIcon { + padding-left: $iconPadding; + } + } + } @else { + padding-left: $iconPadding; + } +} + +@mixin euiFormControlIsLoading($isNextToIcon: false) { + + @at-root { + #{&}-isLoading { + @if ($isNextToIcon) { + padding-right: $euiSizeXXL + $euiSize; + } @else { + padding-right: $euiSizeXXL; + } + } + } +} + +@mixin euiFormControlDefaultShadow { + box-shadow: + 0 2px 2px -1px rgba($euiShadowColor, 0.2), + 0 0 0 1px transparentize($euiColorFullShade, .92), + inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; +} + +@mixin euiFormControlInvalidStyle { + box-shadow: + 0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2), + 0 0 0 1px transparentize($euiColorFullShade, .84), + inset 0 0 0 0 $euiColorEmptyShade, + inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger; +} + +@mixin euiFormControlFocusStyle { + background: tintOrShade($euiColorEmptyShade, 0%, 20%); + box-shadow: + 0 4px 4px -2px rgba($euiShadowColor, 0.2), + 0 0 0 1px transparentize($euiColorFullShade, .84), + inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%), + inset 0 -2px 0 0 $euiColorPrimary; +} + +@mixin euiFormControlDisabledStyle { + cursor: not-allowed; + background: darken($euiColorLightestShade, 2%); + box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92); +} + +/** + * 1. Override invalid state with focus state. + */ +@mixin euiFormControlStyle { + @include euiFormControlSize; + @include euiFormControlDefaultShadow; + + border: none; + font-size: $euiFontSizeS; + font-family: $euiFontFamily; + padding: $euiSizeM; + color: $euiTextColor; + background: $euiFormBackgroundColor; + transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in; + border-radius: 0; + + &--fullWidth { + max-width: 100%; + } + + &:invalid { /* 1 */ + @include euiFormControlInvalidStyle; + } + + &:focus { /* 1 */ + @include euiFormControlFocusStyle; + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + cursor: default; + background: transparent; + border-color: transparent; + box-shadow: none; + } +} + +// CUSTOM STYLES & STATES +@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 shadeOrTint($euiColorLightestShade, 18%, 30%); + background: $euiColorEmptyShade no-repeat center; + @include euiSlightShadow; + + @if $type == 'round' { + border-radius: $size; + } @else if $type == 'square' { + border-radius: $euiBorderRadius; + } + + transition: background-color $euiAnimSpeedFast ease-in, + border-color $euiAnimSpeedFast ease-in, + background-image 0s ease-out $euiAnimSpeedFast; +} + +@mixin euiCustomControl--selected($type: null){ + border-color: $euiColorPrimary; + background-color: $euiColorPrimary; + + @if $type != null { + @include euiIconBackground($type, $euiColorEmptyShade); + } +} + +@mixin euiCustomControl--disabled($type: null){ + border-color: $euiColorLightShade; + background-color: $euiColorLightShade; + box-shadow: none; + @if $type != null { + @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor); + } +} + +@mixin euiCustomControl--focused(){ + border-color: $euiColorPrimary; + @include euiFocusRing; +} diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss new file mode 100644 index 00000000000..5cba5927425 --- /dev/null +++ b/src/components/form/_variables.scss @@ -0,0 +1,3 @@ +$euiFormMaxWidth: 400px; +$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); +$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade \ No newline at end of file diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss index d1fb1d094fa..ec5a9d3194a 100644 --- a/src/components/key_pad_menu/_key_pad_menu.scss +++ b/src/components/key_pad_menu/_key_pad_menu.scss @@ -28,7 +28,7 @@ &:hover, &:focus { border-color: $euiBorderColor; - @include euiSlightShadowHover; + @include euiSlightShadow; .euiKeyPadMenuItem__icon { transform: translateY(0); diff --git a/src/global_styling/mixins/_forms.scss b/src/global_styling/mixins/_forms.scss deleted file mode 100644 index e0a7bff585c..00000000000 --- a/src/global_styling/mixins/_forms.scss +++ /dev/null @@ -1,94 +0,0 @@ - -$euiFormMaxWidth: 400px; -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); - -@mixin euiFormDefaultBoxShadow { - box-shadow: - 0 2px 2px -1px rgba(0, 0, 0, 0.1), - 0 0 0 1px transparentize($euiColorFullShade, .92), - inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; -} - -@mixin euiFormActiveBoxShadow { - box-shadow: - 0 4px 4px -2px rgba(0, 0, 0, 0.1), - 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%), - inset 0 -2px 0 0 $euiColorPrimary; -} - -@mixin euiFormInvalidBoxShadow { - box-shadow: - 0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba(0, 0, 0, 0.1), - 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 $euiColorEmptyShade, - inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger; -} - -@mixin euiFormControlSize { - max-width: $euiFormMaxWidth; - width: 100%; -} - -@mixin euiFormControlWithIcon($isIconOptional: false) { - $iconPadding: $euiSizeXXL; - - @if ($isIconOptional) { - @at-root { - #{&}--withIcon { - padding-left: $iconPadding; - } - } - } @else { - padding-left: $iconPadding; - } -} - -@mixin euiFormControlIsLoading($isNextToIcon: false) { - - @at-root { - #{&}-isLoading { - @if ($isNextToIcon) { - padding-right: $euiSizeXXL + $euiSize; - } @else { - padding-right: $euiSizeXXL; - } - } - } -} - -/** - * 1. Override invalid state with focus state. - */ -@mixin euiFormControlStyle { - @include euiFormControlSize; - @include euiFormDefaultBoxShadow; - - border: none; - font-size: $euiFontSizeS; - font-family: $euiFontFamily; - padding: $euiSizeM; - color: $euiTextColor; - background: $euiFormBackgroundColor; - transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in; - border-radius: 0; - - &--fullWidth { - max-width: 100%; - } - - &:invalid { /* 1 */ - @include euiFormInvalidBoxShadow; - } - - &:focus { /* 1 */ - @include euiFormActiveBoxShadow; - background: tintOrShade($euiColorEmptyShade, 0%, 20%); - } - - &:disabled { - cursor: not-allowed; - background: darken($euiColorLightestShade, 2%); - box-shadow: 0 0 0 1px transparentize($euiColorFullShade, .92); - } -} diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 6694dcfce42..4e0ebde8c5c 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -1,5 +1,4 @@ @import 'naming'; -@import 'forms'; @import 'responsive'; @import 'shadow'; @import 'size';