From c2e8a73e8c780818840b57b4e9de37a71b42ae13 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 28 Jun 2018 12:00:54 -0400 Subject: [PATCH] Simplifying form control styles - Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes --- src/components/combo_box/_combo_box.scss | 2 +- .../filter_group/_filter_button.scss | 88 +++++++-------- src/components/form/_mixins.scss | 106 +++++++++++------- src/components/form/_variables.scss | 51 ++++++--- .../form/file_picker/_file_picker.scss | 21 ++-- src/components/form/select/_select.scss | 2 +- 6 files changed, 162 insertions(+), 108 deletions(-) diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 5d63fa934a8..12d59569efb 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -8,7 +8,7 @@ * 3. The height on combo can be larger than normal text inputs. */ .euiComboBox__inputWrap { - @include euiFormControlStyle; + @include euiFormControlStyle($includeStates: false); @include euiFormControlWithIcon($isIconOptional: true); @include euiFormControlSize(auto); /* 3 */ diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss index c0c73b4733c..983f66e97ea 100644 --- a/src/components/filter_group/_filter_button.scss +++ b/src/components/filter_group/_filter_button.scss @@ -1,27 +1,30 @@ +@import '../form/variables'; +@import '../form/mixins'; +@import '../form/form_control_layout/mixins'; + /** - * 1. We don't want any of the animations that come inherited from the mixin. - * These should act like normal links instead. + * 1. Only add the border style drop shadow */ -.euiFilterButton { - @include euiButton; - line-height: 40px; - border-color: transparent; - background-color: transparent; - box-shadow: none; - transform: none !important; // 1 - animation: none !important; // 1 +.euiFilterButton { + flex-grow: 0; // Shrink by default .euiFilterButton__content { - @include euiButtonContent; - - padding: 0 $euiSizeS; + @include euiFormControlStyle($borderOnly: true, $includeStates: false); + width: auto; + max-width: none; + white-space: nowrap; + } + &:disabled .euiFilterButton__content { + @include euiFormControlDisabledStyle; + font-style: italic; } .euiFilterButton__textShift { - text-align: center; display: inline-block; + text-align: center; + vertical-align: middle; &::after { display: block; @@ -33,35 +36,29 @@ } } - &.euiFilterButton--iconRight { - .euiFilterButton__content { - @include euiButtonContent($isReverse: true); - } + .euiFilterButton__notification { + margin-left: $euiSizeS; + vertical-align: text-bottom; } - &:disabled { - color: $euiButtonColorDisabled; - pointer-events: none; - - .euiFilterButton__content { - pointer-events: auto; - cursor: not-allowed; + &.euiFilterButton-isSelected, + &:hover:not(:disabled), + &:focus:not(:disabled) { + .euiFilterButton__textShift { + text-decoration: underline; } + } - .euiFilterButton__icon { - fill: $euiButtonColorDisabled; - } + &.euiFilterButton-grow { + flex-grow: 1; + width: 100%; - &:hover, &:focus { - background-color: $euiColorEmptyShade; - text-decoration: none; + .euiFilterButton__content { + width: 100%; + text-align: left; } } - &.euiFilterButton-isSelected { - text-decoration: underline; - } - &.euiFilterButton-hasActiveFilters { font-weight: $euiFontWeightBold; } @@ -80,17 +77,18 @@ $buttonTypes: ( @each $name, $color in $buttonTypes { .euiFilterButton--#{$name} { color: $color; + } +} - .euiFilterButton__icon { - fill: $color; - } - - &:hover { - background-color: transparent; +// Icon padding +.euiFilterButton--iconLeft { + .euiFilterButton__content { + @include euiFormControlLayout__padding(1, "left"); + } +} - @if ($name == 'disabled') { - cursor: not-allowed; - } - } +.euiFilterButton--iconRight { + .euiFilterButton__content { + @include euiFormControlLayout__padding(1); } } diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index 4d76dc6bc89..bb06bb87483 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -1,3 +1,13 @@ + +@function euiFormControlGradient($color: $euiColorPrimary) { + @return linear-gradient(to top, + $color, + $color ($euiSizeXS / 2), + transparent ($euiSizeXS / 2), + transparent 100% + ); +} + /* * 1. Ensure the icon padding remains when in readOnly mode */ @@ -36,35 +46,52 @@ } } -@mixin euiFormControlDefaultShadow { - box-shadow: - 0 3px 2px -2px rgba($euiShadowColor, 0.2), - inset 0 0 0 1px transparentize($euiColorFullShade, .9), - inset #{-$euiFormMaxWidth} 0 0 0 $euiFormBackgroundColor; +@mixin euiFormControlDefaultShadow($borderOnly: false) { + background-color: $euiFormBackgroundColor; + background-repeat: no-repeat; + background-size: 0%; + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: + 0 1px 1px -1px rgba($euiShadowColor, 0.2), + 0 3px 2px -2px rgba($euiShadowColor, 0.2), + inset 0 0 0 1px $euiFormBorderColor; + } + + transition: + box-shadow $euiAnimSpeedFast ease-in, + background-color $euiAnimSpeedFast ease-in, + background-image $euiAnimSpeedFast ease-in, + background-size $euiAnimSpeedFast ease-in; } -@mixin euiFormControlInvalidStyle { - box-shadow: - 0 $euiSizeXS $euiSizeXS (-$euiSizeXS / 2) rgba($euiShadowColor, 0.2), - inset 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 $euiColorEmptyShade, - inset 0 (-$euiSizeXS / 2) 0 0 $euiColorDanger; +@mixin euiFormControlFocusStyle($borderOnly: false) { + background-color: tintOrShade($euiColorEmptyShade, 0%, 50%); + background-image: euiFormControlGradient(); + background-size: 100%; + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .84); + } @else { + box-shadow: + 0 1px 1px -1px rgba($euiShadowColor, 0.2), + 0 4px 4px -2px rgba($euiShadowColor, 0.2), + inset 0 0 0 1px transparentize($euiColorFullShade, .84); + } } -@mixin euiFormControlFocusStyle { - background: tintOrShade($euiColorEmptyShade, 0%, 20%); - box-shadow: - 0 4px 4px -2px rgba($euiShadowColor, 0.2), - inset 0 0 0 1px transparentize($euiColorFullShade, .84), - inset 0 0 0 0 tintOrShade($euiColorEmptyShade, 0%, 20%), - inset 0 -2px 0 0 $euiColorPrimary; +@mixin euiFormControlInvalidStyle() { + background-image: euiFormControlGradient($euiColorDanger); + background-size: 100%; } -@mixin euiFormControlDisabledStyle { +@mixin euiFormControlDisabledStyle() { cursor: not-allowed; - background: darken($euiColorLightestShade, 2%); - box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .92); color: $euiFormControlDisabledColor; + background: $euiFormBackgroundDisabledColor; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; &::placeholder { color: $euiFormControlDisabledColor; @@ -82,9 +109,9 @@ /** * 1. Override invalid state with focus state. */ -@mixin euiFormControlStyle { +@mixin euiFormControlStyle($borderOnly: false, $includeStates: true) { @include euiFormControlSize; - @include euiFormControlDefaultShadow; + @include euiFormControlDefaultShadow($borderOnly); border: none; font-size: $euiFontSizeS; @@ -92,8 +119,6 @@ padding: $euiFormControlPadding; line-height: 1em; // fixes text alignment in IE color: $euiTextColor; - background: $euiFormBackgroundColor; - transition: box-shadow $euiAnimSpeedNormal ease-in, background $euiAnimSpeedNormal ease-in; border-radius: 0; &--fullWidth { @@ -101,26 +126,29 @@ } &--compressed { - padding-top: $euiFormControlPadding--compressed; - padding-bottom: $euiFormControlPadding--compressed; - height: $euiFormControlHeight--compressed; + padding-top: $euiFormControlCompressedPadding; + padding-bottom: $euiFormControlCompressedPadding; + height: $euiFormControlCompressedHeight; } - &:invalid { /* 1 */ - @include euiFormControlInvalidStyle; - } + @if ($includeStates) { + &:invalid { /* 1 */ + @include euiFormControlInvalidStyle; + } - &:focus { /* 1 */ - @include euiFormControlFocusStyle; - } + &:focus { /* 1 */ + @include euiFormControlFocusStyle($borderOnly); + } - &:disabled { - @include euiFormControlDisabledStyle; - } + &:disabled { + @include euiFormControlDisabledStyle; + } - &[readOnly] { - @include euiFormControlReadOnlyStyle; + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } } + } // diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 86c5fbf6714..a29168ffb07 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -1,19 +1,42 @@ -$euiFormMaxWidth: 400px; -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%); -$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%); // exact 508c foreground for $euiColorLightShade +// Sizing +$euiFormMaxWidth: $euiSizeXXL * 10 !default; +$euiFormControlHeight: $euiSizeXXL !default; +$euiFormControlCompressedHeight: $euiSizeXL !default; +$euiFormControlPadding: $euiSizeM !default; +$euiFormControlCompressedPadding: $euiSizeS !default; -$euiRadioSize: $euiSize; -$euiCheckBoxSize: $euiSize; +$euiRadioSize: $euiSize !default; +$euiCheckBoxSize: $euiSize !default; -$euiSwitchHeight: $euiSize * 1.25; -$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS; -$euiSwitchThumbSize: $euiSwitchHeight; -$euiSwitchIconHeight: $euiSize; +$euiSwitchHeight: $euiSize * 1.25 !default; +$euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default; +$euiSwitchThumbSize: $euiSwitchHeight !default; +$euiSwitchIconHeight: $euiSize !default; -$euiFormControlHeight: $euiSizeXXL; -$euiFormControlHeight--compressed: $euiSizeXL; +// Coloring +$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%) !default; +$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; +$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default; +$euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default; +$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade +$euiFormControlDisabledColor: $euiColorMediumShade !default; -$euiFormControlPadding: $euiSizeM; -$euiFormControlPadding--compressed: $euiSizeS; +//** DEPRECATED **// +//** DEPRECATED **// +//** DEPRECATED **// +//** DEPRECATED **// -$euiFormControlDisabledColor: $euiColorMediumShade; +@if variable-exists(euiFormControlHeight--compressed) { + $euiFormControlCompressedHeight: $euiFormControlHeight--compressed !global; + @warn '`$euiFormControlHeight--compressed` is deprecated. Please use `$euiFormControlCompressedHeight` instead'; +} + +@if variable-exists(euiFormControlPadding--compressed) { + $euiFormControlCompressedPadding: $euiFormControlPadding--compressed !global; + @warn '`$euiFormControlPadding--compressed` is deprecated. Please use `$euiFormControlCompressedPadding` instead'; +} + +@if variable-exists(euiFormBorderColor--disabled) { + $euiFormBorderDisabledColor: $euiFormBorderColor--disabled !global; + @warn '`$euiFormBorderColor--disabled` is deprecated. Please use `$euiFormBorderDisabledColor` instead'; +} diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss index ebdb69e8a7c..ec356c1c029 100644 --- a/src/components/form/file_picker/_file_picker.scss +++ b/src/components/form/file_picker/_file_picker.scss @@ -55,6 +55,7 @@ * 1. Don't block the user from dropping files onto the filepicker. * 2. Put prompt on top of input, so the clear button can intercept the click. * 3. Ensure space for import icon and clear button (only if it has files) + * 4. Delay focus gradient or else it will only partially transition while file chooser opens */ .euiFilePicker__prompt { @include euiFormControlDefaultShadow; @@ -63,19 +64,19 @@ position: relative; /* 2 */ z-index: 1; /* 2 */ display: block; - background: $euiColorLightestShade; padding: $euiSizeL; - background: $euiFormBackgroundColor; text-align: center; + transition: - box-shadow $euiAnimSpeedNormal ease-in, - background $euiAnimSpeedNormal ease-in, - color $euiAnimSpeedNormal ease-in; + box-shadow $euiAnimSpeedFast ease-in, + background-color $euiAnimSpeedFast ease-in, + background-image $euiAnimSpeedFast ease-in, + background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 4 */ @at-root { .euiFilePicker--compressed#{&} { - height: $euiFormControlHeight--compressed; - padding: $euiFormControlPadding--compressed; + height: $euiFormControlCompressedHeight; + padding: $euiFormControlCompressedPadding; @include euiFormControlWithIcon(); /* 3 */ text-align: left; } @@ -117,7 +118,11 @@ // Hover and focus .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt, .euiFilePicker__input:focus + .euiFilePicker__prompt { - text-decoration: underline; + .euiFilePicker__promptText { + // Adding the underline to the prompt text ensures the underline + // color is the same as the current text color + text-decoration: underline; + } .euiFilePicker__icon { transform: scale(1.1); diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss index 7f8c68b47c1..7ae8163c689 100644 --- a/src/components/form/select/_select.scss +++ b/src/components/form/select/_select.scss @@ -14,7 +14,7 @@ padding-bottom: 0; /* 2 */ &--compressed { - line-height: $euiFormControlHeight--compressed; /* 2 */ + line-height: $euiFormControlCompressedHeight; /* 2 */ padding-top: 0; /* 2 */ padding-bottom: 0; /* 2 */ }