From 0a6b406b8e9655d43d2b5779127ae3622c3aa171 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 20 Feb 2020 09:31:25 -0500 Subject: [PATCH 1/2] Figuring out a better way to override - Broke `euiButton()` mixin down to smaller mixins for easier reuse of base styles - Moved `overrides/` folder out of `global_styling` and importing __after__ component imports - Only overriding what __needs__ to/what is __different__ --- src-docs/src/views/button/button.js | 36 +++++ src/global_styling/mixins/_button.scss | 35 +++-- src/theme_amsterdam_dark.scss | 4 + src/theme_amsterdam_light.scss | 4 + .../eui-amsterdam/global_styling/index.scss | 6 - .../global_styling/mixins/_button.scss | 61 +------- .../global_styling/overrides/_button.scss | 133 ------------------ .../eui-amsterdam/overrides/_button.scss | 47 +++++++ .../overrides/_index.scss | 0 9 files changed, 119 insertions(+), 207 deletions(-) delete mode 100644 src/themes/eui-amsterdam/global_styling/overrides/_button.scss create mode 100644 src/themes/eui-amsterdam/overrides/_button.scss rename src/themes/eui-amsterdam/{global_styling => }/overrides/_index.scss (100%) diff --git a/src-docs/src/views/button/button.js b/src-docs/src/views/button/button.js index 2ff0e46c5b59..11c5cf43c212 100644 --- a/src-docs/src/views/button/button.js +++ b/src-docs/src/views/button/button.js @@ -148,6 +148,42 @@ export default () => ( + + + window.alert('Button clicked')}> + Text + + + + + window.alert('Button clicked')}> + Filled + + + + + window.alert('Button clicked')}> + Small + + + + + window.alert('Button clicked')}> + Small and filled + + + + window.alert('Button clicked')}> diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss index 41593f841770..7164c541c75b 100644 --- a/src/global_styling/mixins/_button.scss +++ b/src/global_styling/mixins/_button.scss @@ -1,29 +1,22 @@ -@mixin euiButton { - @include euiFont; - @include euiFontSize; - +@mixin euiButtonBase { display: inline-block; appearance: none; cursor: pointer; height: $euiButtonHeight; line-height: $euiButtonHeight; // prevents descenders from getting cut off - text-decoration: none; - border: solid 1px transparent; text-align: center; - transition: all $euiAnimSpeedNormal $euiAnimSlightBounce; white-space: nowrap; max-width: 100%; vertical-align: middle; +} + +@mixin euiButtonFocus { + transition: all $euiAnimSpeedNormal ease-in-out; &:hover:not(:disabled) { transform: translateY(-1px); } - &:hover:not(:disabled), - &:focus { - text-decoration: underline; - } - &:focus { animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce; } @@ -33,6 +26,24 @@ } } +@mixin euiButton { + @include euiButtonBase; + @include euiFont; + @include euiFontSize; + + text-decoration: none; + border: solid 1px transparent; + + // sass-lint:disable mixins-before-declarations + // focus states should come after all default styles + @include euiButtonFocus; + + &:hover:not(:disabled), + &:focus { + text-decoration: underline; + } +} + // 1. Apply margin to all but last item in the flex. // 2. Margin gets flipped because of the row-reverse. diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss index 47c18df4ea0a..96dbf4a80edb 100644 --- a/src/theme_amsterdam_dark.scss +++ b/src/theme_amsterdam_dark.scss @@ -9,3 +9,7 @@ // Packages @import '../packages/index'; + +// Component overrides +// Comes after the component import and overrides via cascade +@import 'themes/eui-amsterdam/overrides/index'; diff --git a/src/theme_amsterdam_light.scss b/src/theme_amsterdam_light.scss index 48b987006b38..15f1bb055ce4 100644 --- a/src/theme_amsterdam_light.scss +++ b/src/theme_amsterdam_light.scss @@ -9,3 +9,7 @@ // Packages @import '../packages/index'; + +// Component overrides +// Comes after the component import and overrides via cascade +@import 'themes/eui-amsterdam/overrides/index'; diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index 60ab65d5ba40..cb9a09de94d3 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/src/themes/eui-amsterdam/global_styling/index.scss @@ -16,9 +16,3 @@ // The reset file makes use of variables and mixins @import '../../../global_styling/reset/index'; - -// TEMP OPVERRIDES FOR COMPONENT STYLES -// THESE FILES SHOULD REPLACE COMPONENT -// STYLES ONCE AMSTERDAM IS THE DEFAULT THEME - -@import 'overrides/index'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss index e6043e3eb3e4..b6a42fdd6d67 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -1,69 +1,18 @@ @mixin euiButton { + @include euiButtonBase; @include euiFont; @include euiFontSize; - display: inline-block; - appearance: none; - cursor: pointer; - height: $euiButtonHeight; - line-height: $euiButtonHeight; // prevents descenders from getting cut off + font-weight: $euiFontWeightMedium; text-decoration: none; - border: none; - text-align: center; transition: all $euiAnimSpeedNormal $euiAnimSlightBounce; - white-space: nowrap; - max-width: 100%; - vertical-align: middle; - font-weight: $euiFontWeightMedium; - &:hover:not(:disabled) { - transform: translateY(-1px); - } + // sass-lint:disable mixins-before-declarations + // focus states should come after all default styles + @include euiButtonFocus; &:hover:not(:disabled), &:focus { text-decoration: underline; } - - &:focus { - animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce; - } - - &:active:not(:disabled) { - transform: translateY(1px); - } -} - -// 1. Apply margin to all but last item in the flex. -// 2. Margin gets flipped because of the row-reverse. - -@mixin euiButtonContent($isReverse: false) { - height: 100%; - width: 100%; - vertical-align: middle; - - .euiButton__icon, - .euiButton__spinner { - flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size - } - - @if ($isReverse) { - flex-direction: row-reverse; - - > * + * { - margin-left: 0; // 1, 2 - margin-right: $euiSizeS; // 1, 2 - } - } @else { - display: flex; - justify-content: center; - align-items: center; - - > * + * { - margin-left: $euiSizeS; // 1 - } - } } - -// Keyframe animation declarations can be found in -// utility/animations.scss diff --git a/src/themes/eui-amsterdam/global_styling/overrides/_button.scss b/src/themes/eui-amsterdam/global_styling/overrides/_button.scss deleted file mode 100644 index d7535637d44c..000000000000 --- a/src/themes/eui-amsterdam/global_styling/overrides/_button.scss +++ /dev/null @@ -1,133 +0,0 @@ -// THIS IS A TEMP FILE UNTIL AMSTERDAM IS THE DEFAULT THEME -// THIS FILE SHOULD EVENTUALLY MOVE INTO components/button/_button.scss - -// This file has lots of modifiers and is somewhat nesty by nature -//sass-lint:disable nesting-depth - -// Our base button -.euiButton { - @include euiButton; - // sass-lint:disable no-important - box-shadow: none !important; - border-radius: $euiBorderRadius + 2; - min-width: $euiButtonMinWidth; - - .euiButton__content { - @include euiButtonContent; - - padding: 0 ($euiSize - $euiSizeXS); - } - - .euiButton__text { - text-overflow: ellipsis; - overflow: hidden; - } - - &.euiButton--small { - height: $euiButtonHeightSmall; - line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off - - &:not(.euiButtonToggle) { - border-radius: $euiBorderRadius; - } - } - - &.euiButton--iconRight { - .euiButton__content { - @include euiButtonContent($isReverse: true); - } - } - - &:enabled { - &:hover, - &:focus { - background-color: transparentize($euiColorPrimary, .9); - } - } - - &:disabled { - color: $euiColorMediumShade; - background-color: transparentize($euiColorDarkShade, .9); - border-color: transparent; - pointer-events: none; - - .euiButton__content { - pointer-events: auto; - cursor: not-allowed; - } - - &.euiButton--fill { - color: $euiColorGhost; - background-color: $euiButtonColorDisabled; - border-color: $euiButtonColorDisabled; - - &:hover, - &:focus { - background-color: $euiButtonColorDisabled; - border-color: $euiButtonColorDisabled; - } - } - - &:hover, - &:focus { - text-decoration: none; - } - } -} - -// Create button modifiers based upon the map. -@each $name, $color in $euiButtonTypes { - .euiButton--#{$name} { - @if ($name == 'ghost') { - // Ghost is unique and ALWAYS sits against a dark background. - color: $color; - } @else if ($name == 'text') { - // The default color is lighter than the normal text color, make the it the text color - color: $euiTextColor; - } @else { - // Other colors need to check their contrast against the page background color. - color: darken($color, 10%); - } - - background-color: transparentize($color, .8); - - &.euiButton--fill { - // The function makes that hexes safe for theming - $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk); - - color: $fillTextColor; - background-color: $color; - - - &:enabled { - &:hover, - &:focus { - background-color: darken($color, 5%); - border-color: darken($color, 5%); - } - } - - &:disabled .euiButton__spinner { - border-color: euiLoadingSpinnerBorderColors(transparentize($fillTextColor, .3)); - } - } - - &:enabled { - - &:hover, - &:focus { - - background-color: transparentize($color, .9); - - @if ($name == 'disabled') { - cursor: not-allowed; - } - } - } - } -} - -.euiButton--fullWidth { - display: block; - width: 100%; -} diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss new file mode 100644 index 000000000000..505c49eca776 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_button.scss @@ -0,0 +1,47 @@ +.euiButton { + // sass-lint:disable no-important + // remove for all states + box-shadow: none !important; + + // I wouldn't alter the base radius here only. + // Instead, consider the greater goal and determine if you + // will be wanting to change the default radius for the whole theme + // border-radius: $euiBorderRadius + 2; + + &:disabled { + // Make sure to continue to use the variables used for these specific purposes + // and just change the value of them, not the style + // color: $euiColorMediumShade; + background-color: transparentize($euiButtonColorDisabled, .8); + } +} + +// Change the hollow (bordered) buttons to have a transparent background +// and no border +@each $name, $color in $euiButtonTypes { + .euiButton--#{$name} { + // This variable simulates the possibly darkest background the button could be on + // Simulates the 20% opaque color on top of the page background color + $backgroundColorSimulated: mix($euiPageBackgroundColor, $color, 80%); + + @if ($name == 'ghost') { + // Ghost is unique and ALWAYS sits against a dark background. + $backgroundColorSimulated: mix($euiColorDarkestShade, $color, 80%); + color: makeHighContrastColor($color, $backgroundColorSimulated); + } @else { + // Then we can calculate the darkest text color needed + color: makeHighContrastColor($color, $backgroundColorSimulated); + } + + // But still use transparency + background-color: transparentize($color, .8); + + &:enabled { + &:hover, + &:focus { + // Makes the background lighter? + background-color: transparentize($color, .9); + } + } + } +} diff --git a/src/themes/eui-amsterdam/global_styling/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss similarity index 100% rename from src/themes/eui-amsterdam/global_styling/overrides/_index.scss rename to src/themes/eui-amsterdam/overrides/_index.scss From d4d215aef24ca5ffbf36716990f03211bf986978 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 20 Feb 2020 17:09:32 -0500 Subject: [PATCH 2/2] Fixing the ghost colored disabled buttons --- src-docs/src/views/button/button_ghost.js | 2 +- src/components/button/_button.scss | 34 ++++++++++++++----- src/global_styling/variables/_buttons.scss | 1 + .../global_styling/variables/_buttons.scss | 1 + .../eui-amsterdam/overrides/_button.scss | 4 +-- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js index e60e3d94cb8f..1eba4b993621 100644 --- a/src-docs/src/views/button/button_ghost.js +++ b/src-docs/src/views/button/button_ghost.js @@ -33,7 +33,7 @@ export default class extends Component { window.alert('Button clicked')}> - Primary + Ghost diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 1d562b8b179d..6594d708d7f4 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -54,7 +54,7 @@ } &.euiButton--fill { - color: $euiColorGhost; + color: lightOrDarkTheme($euiColorGhost, $euiColorLightShade); background-color: $euiButtonColorDisabled; border-color: $euiButtonColorDisabled; @@ -85,7 +85,7 @@ color: $euiTextColor; } @else { // Other colors need to check their contrast against the page background color. - color: makeHighContrastColor($color, $euiColorEmptyShade); + color: makeHighContrastColor($color, $euiPageBackgroundColor); } border-color: $color; @@ -133,13 +133,31 @@ } } } + } +} - &:disabled, - &:disabled:hover, - &:disabled:focus { - @if ($name == 'ghost') { - @include euiSlightShadow($euiColorInk); - } +// Fix ghost/disabled look specifically +.euiButton:disabled.euiButton--ghost { + @include euiSlightShadow($euiColorInk); + + &, + &:hover, + &:focus { + @include euiSlightShadow($euiColorInk); + color: $euiButtonColorGhostDisabled; + border-color: $euiButtonColorGhostDisabled; + } + + .euiButton__spinner { + border-color: euiLoadingSpinnerBorderColors(transparentize($euiButtonColorGhostDisabled, .3)); + } + + &.euiButton--fill { + background-color: $euiButtonColorGhostDisabled; + color: $euiColorInk; + + .euiButton__spinner { + border-color: euiLoadingSpinnerBorderColors(transparentize($euiColorInk, .3)); } } } diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss index 887a85cbc3e2..1ea2aeb86416 100644 --- a/src/global_styling/variables/_buttons.scss +++ b/src/global_styling/variables/_buttons.scss @@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default; $euiButtonHeightSmall: $euiSizeXL !default; $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default; +$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade); $euiButtonToggleBorderColor: $euiColorLightShade !default; // Modifier naming and colors. diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss index 804d7566f074..3d2f110f57f0 100644 --- a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss +++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss @@ -2,6 +2,7 @@ $euiButtonHeight: $euiSizeXXL !default; $euiButtonHeightSmall: $euiSizeXL !default; $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default; +$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade); $euiButtonToggleBorderColor: $euiColorLightShade !default; // Modifier naming and colors. diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss index 505c49eca776..d121b4b59945 100644 --- a/src/themes/eui-amsterdam/overrides/_button.scss +++ b/src/themes/eui-amsterdam/overrides/_button.scss @@ -12,7 +12,7 @@ // Make sure to continue to use the variables used for these specific purposes // and just change the value of them, not the style // color: $euiColorMediumShade; - background-color: transparentize($euiButtonColorDisabled, .8); + background-color: transparentize($euiButtonColorDisabled, .9); } } @@ -26,7 +26,7 @@ @if ($name == 'ghost') { // Ghost is unique and ALWAYS sits against a dark background. - $backgroundColorSimulated: mix($euiColorDarkestShade, $color, 80%); + $backgroundColorSimulated: mix($euiColorInk, $color, 70%); color: makeHighContrastColor($color, $backgroundColorSimulated); } @else { // Then we can calculate the darkest text color needed