From 34745a16a6c73c836a8153ff8b4eacd5e2292612 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Mar 2018 17:06:44 -0400 Subject: [PATCH 1/4] Moving form variables and mixins to their own file --- src/components/form/_index.scss | 154 +--------------------------- src/components/form/_mixins.scss | 147 ++++++++++++++++++++++++++ src/components/form/_variables.scss | 3 + 3 files changed, 152 insertions(+), 152 deletions(-) create mode 100644 src/components/form/_mixins.scss create mode 100644 src/components/form/_variables.scss 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..37fa44cb078 --- /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(0, 0, 0, 0.1), + 0 0 0 1px transparentize($euiColorFullShade, .92), + inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; +} + +@mixin euiFormControlInvalidStyle { + 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 euiFormControlFocusStyle { + background: tintOrShade($euiColorEmptyShade, 0%, 20%); + 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 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; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + + @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 From 8dc2eccc948baeebacd258fe8b0d3440d9280431 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Mar 2018 17:49:02 -0400 Subject: [PATCH 2/4] Removing extraneous global_styling/mixins/forms file and importing the correct files in the filter_group and combo_box files --- src/components/combo_box/_index.scss | 3 + src/components/filter_group/_index.scss | 3 + src/global_styling/mixins/_forms.scss | 94 ------------------------- src/global_styling/mixins/_index.scss | 1 - 4 files changed, 6 insertions(+), 95 deletions(-) delete mode 100644 src/global_styling/mixins/_forms.scss 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/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'; From 5c0a16f1eccb775c3691b83ce13127b96eb0bdff Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 2 Apr 2018 14:06:02 -0400 Subject: [PATCH 3/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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** From c6c34b2265cde9ae4feeb445c1e190b1e2cf90a4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 2 Apr 2018 14:14:11 -0400 Subject: [PATCH 4/4] Fixing shadow merge --- src/components/form/_mixins.scss | 8 ++++---- src/components/key_pad_menu/_key_pad_menu.scss | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 37fa44cb078..777f097ce65 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -32,14 +32,14 @@ @mixin euiFormControlDefaultShadow { box-shadow: - 0 2px 2px -1px rgba(0, 0, 0, 0.1), + 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(0, 0, 0, 0.1), + 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; @@ -48,7 +48,7 @@ @mixin euiFormControlFocusStyle { background: tintOrShade($euiColorEmptyShade, 0%, 20%); box-shadow: - 0 4px 4px -2px rgba(0, 0, 0, 0.1), + 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; @@ -110,7 +110,7 @@ border: 1px solid shadeOrTint($euiColorLightestShade, 18%, 30%); background: $euiColorEmptyShade no-repeat center; - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); + @include euiSlightShadow; @if $type == 'round' { border-radius: $size; 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);