From bba8dba27fa8ffb6090c5cdc44e11e52297e59c7 Mon Sep 17 00:00:00 2001 From: Davey Holler Date: Wed, 19 Feb 2020 10:04:07 -0800 Subject: [PATCH] Updating button styles. --- .../eui-amsterdam/global_styling/index.scss | 7 + .../global_styling/mixins/_button.scss | 69 +++++++++ .../global_styling/mixins/_index.scss | 1 + .../global_styling/overrides/_button.scss | 133 ++++++++++++++++++ .../global_styling/overrides/_index.scss | 1 + .../global_styling/variables/_buttons.scss | 16 +++ .../global_styling/variables/_index.scss | 1 + 7 files changed, 228 insertions(+) create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_button.scss create mode 100644 src/themes/eui-amsterdam/global_styling/overrides/_button.scss create mode 100644 src/themes/eui-amsterdam/global_styling/overrides/_index.scss create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_buttons.scss create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_index.scss diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index 0c105e468620..60ab65d5ba40 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/src/themes/eui-amsterdam/global_styling/index.scss @@ -5,6 +5,7 @@ // Variables come next, and are used in some mixins @import '../../../global_styling/variables/index'; +@import 'variables/index'; // Mixins provide generic code expansion through helpers @import '../../../global_styling/mixins/index'; @@ -15,3 +16,9 @@ // 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 new file mode 100644 index 000000000000..e6043e3eb3e4 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -0,0 +1,69 @@ +@mixin euiButton { + @include euiFont; + @include euiFontSize; + + display: inline-block; + appearance: none; + cursor: pointer; + height: $euiButtonHeight; + line-height: $euiButtonHeight; // prevents descenders from getting cut off + 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); + } + + &: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/mixins/_index.scss b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss index 2690358ce99c..5af0e29296ad 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_index.scss @@ -1,2 +1,3 @@ @import 'panel'; @import 'typography'; +@import 'button'; diff --git a/src/themes/eui-amsterdam/global_styling/overrides/_button.scss b/src/themes/eui-amsterdam/global_styling/overrides/_button.scss new file mode 100644 index 000000000000..d7535637d44c --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/overrides/_button.scss @@ -0,0 +1,133 @@ +// 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/global_styling/overrides/_index.scss b/src/themes/eui-amsterdam/global_styling/overrides/_index.scss new file mode 100644 index 000000000000..2d4322481826 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/overrides/_index.scss @@ -0,0 +1 @@ +@import 'button'; diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss new file mode 100644 index 000000000000..804d7566f074 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss @@ -0,0 +1,16 @@ +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; + +$euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default; +$euiButtonToggleBorderColor: $euiColorLightShade !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorPrimary, + secondary: $euiColorSecondary, + warning: $euiColorWarning, + danger: $euiColorDanger, + disabled: $euiColorDarkShade, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorDarkShade, // Reserved for special use cases +); diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/eui-amsterdam/global_styling/variables/_index.scss new file mode 100644 index 000000000000..46e81fc09317 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/variables/_index.scss @@ -0,0 +1 @@ +@import 'buttons';