diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js index 3abf1e712bb..e6772ee33fe 100644 --- a/src-docs/src/views/button/button_toggle.js +++ b/src-docs/src/views/button/button_toggle.js @@ -38,6 +38,7 @@ export default class extends Component { label="Toggle Me" iconType={this.state.toggle0On ? 'check' : 'cross'} onChange={this.onToggle0Change} + isSelected={this.state.toggle0On} />   @@ -46,6 +47,7 @@ export default class extends Component { label={this.state.toggle1On ? 'I\'m a filled toggle' : 'I\'m a primary toggle'} fill={this.state.toggle1On} onChange={this.onToggle1Change} + isSelected={this.state.toggle1On} />   @@ -54,6 +56,7 @@ export default class extends Component { label="Toggle Me" iconType={this.state.toggle4On ? 'eye' : 'eyeClosed'} onChange={this.onToggle4Change} + isSelected={this.state.toggle4On} isEmpty isIconOnly /> @@ -68,6 +71,7 @@ export default class extends Component { isDisabled label="Can't toggle this" fill={this.state.toggle2On} + isSelected={this.state.toggle2On} />   @@ -76,6 +80,7 @@ export default class extends Component { isDisabled label="Can't toggle this either" fill={this.state.toggle3On} + isSelected={this.state.toggle3On} /> ); diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index fcaf602f5df..72b34e768d6 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -1,12 +1,10 @@ -$euiFlyoutBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow - .euiFlyout { - @include euiBottomShadowLarge; + border-left: $euiBorderThin; + @include euiBottomShadowLarge($adjustBorders: true); position: fixed; top: 0; bottom: 0; right: 0; - border-left: 1px solid $euiFlyoutBorderColor; z-index: $euiZModal; background: $euiColorEmptyShade; animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index 7ff2b8c405a..bd29166258c 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -308,7 +308,7 @@ $euiRange__levelColors: ( } ~ .euiRange__valueWrapper .euiRange__value { - @include euiBottomShadow; + @include euiBottomShadowMedium; &.euiRange__value--right { transform: translateX(0) translateY(-50%) scale(1.1); diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 7c82bb9dae8..543516fd203 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -1,18 +1,15 @@ -$euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // match shadow - /** * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the * flex display. https://github.com/philipwalton/flexbugs#flexbug-3 */ .euiModal { - @include euiBottomShadowLarge; + border: $euiBorderThin; + @include euiBottomShadowLarge($adjustBorders: true); display: flex; /* 1 */ position: relative; background-color: $euiColorEmptyShade; - border: 1px solid $euiModalBorderColor; - border-top-color: tintOrShade($euiModalBorderColor, 50%, 0%); border-radius: $euiBorderRadius; z-index: $euiZModal; min-width: 50%; diff --git a/src/components/panel/_mixins.scss b/src/components/panel/_mixins.scss index ac5cafcf2e1..ea405741774 100644 --- a/src/components/panel/_mixins.scss +++ b/src/components/panel/_mixins.scss @@ -37,14 +37,18 @@ } &.#{$selector}--shadow { + @include euiBottomShadowMedium; + @if (lightness($euiTextColor) < 50) { - border-bottom-color: rgba($euiShadowColor, .6); + border-bottom-color: rgba($euiShadowColor, .5); + } @else { + // Applied again here in case dark theme overrides light + border-bottom-color: $euiBorderColor; } - @include euiBottomShadowMedium; &.#{$selector}--isClickable:hover, &.#{$selector}--isClickable:focus { - @include euiBottomShadow; + @include euiBottomShadow($color: $euiShadowColor, $opacity: .2); } } } diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap index ce4b6885b54..029bfc1bca9 100644 --- a/src/components/popover/__snapshots__/popover.test.js.snap +++ b/src/components/popover/__snapshots__/popover.test.js.snap @@ -94,7 +94,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
@@ -182,7 +182,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss index e1f615c4787..dd2d01f464b 100644 --- a/src/components/toast/_toast.scss +++ b/src/components/toast/_toast.scss @@ -1,13 +1,10 @@ .euiToast { - @include euiBottomShadowLarge; + border: $euiBorderThin; + @include euiBottomShadowLarge($adjustBorders: true); position: relative; padding: $euiSize; background-color: $euiColorEmptyShade; - border: $euiBorderThin; - @if (lightness($euiTextColor) < 50) { - border-bottom-color: rgba($euiShadowColor, .6); - } width: 100%; &:hover .euiToast__closeButton, diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index c05a2a17be1..e1f192edf19 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -3,7 +3,7 @@ */ .euiToolTip { - @include euiBottomShadow; + @include euiBottomShadow($color: $euiShadowColor); @include euiFontSizeS(); position: absolute; /* 1 */ diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss index 59bb18f9ba8..64ead13ab77 100644 --- a/src/global_styling/mixins/_shadow.scss +++ b/src/global_styling/mixins/_shadow.scss @@ -1,6 +1,3 @@ -$euiShadowColor: $euiColorMediumShade !default; -$euiShadowColorLarge: $euiColorSlightHue !default; - @mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) { box-shadow: 0 2px 2px -1px rgba($color, $opacity); } @@ -27,22 +24,38 @@ $euiShadowColorLarge: $euiColorSlightHue !default; 0 0px 2px 0 rgba($color, $opacity); } -@mixin euiBottomShadow($color: $euiShadowColor, $opacity: .2) { +// adjustBorder allows the border color to match the drop shadow better so that there's better +// distinction between element bounds and the shadow (crisper borders) +@mixin euiBottomShadow($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) { box-shadow: 0 12px 24px 0 rgba($color, $opacity), 0 6px 12px 0 rgba($color, $opacity), 0 4px 4px 0 rgba($color, $opacity), 0 2px 2px 0 rgba($color, $opacity); + + // Never adjust borders if the border color is already on the dark side (dark theme) + @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) { + border-color: tint($color, 75%); + border-top-color: tint($color, 80%); + border-bottom-color: tint($color, 55%); + } } -@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .2) { +@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) { box-shadow: - 0 64px 64px 0 rgba($color, $opacity), - 0 32px 32px 0 rgba($color, $opacity), + 0 40px 64px 0 rgba($color, $opacity), + 0 24px 32px 0 rgba($color, $opacity), 0 16px 16px 0 rgba($color, $opacity), 0 8px 8px 0 rgba($color, $opacity), 0 4px 4px 0 rgba($color, $opacity), 0 2px 2px 0 rgba($color, $opacity); + + // Never adjust borders if the border color is already on the dark side (dark theme) + @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) { + border-color: tint($color, 70%); + border-top-color: tint($color, 85%); + border-bottom-color: tint($color, 55%); + } } @mixin euiSlightShadowHover($color: $euiShadowColor, $opacity: .3) { @@ -55,6 +68,8 @@ $euiShadowColorLarge: $euiColorSlightHue !default; @include euiSlightShadowHover($color, $opacity); } +// Overflow shadows are useful when a middle element scrolls independently from +// any top and/or bottom elements @mixin euiOverflowShadowTop { box-shadow: 0 ($euiSize *-1) $euiSize (-$euiSize / 2) $euiColorEmptyShade; z-index: 2; diff --git a/src/global_styling/variables/_animations.scss b/src/global_styling/variables/_animations.scss index c7476e929c1..389c90f74ce 100644 --- a/src/global_styling/variables/_animations.scss +++ b/src/global_styling/variables/_animations.scss @@ -1,13 +1,13 @@ // Animations -$euiAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1); -$euiAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1); +$euiAnimSlightBounce: cubic-bezier(0.34,1.61,0.7,1) !default; +$euiAnimSlightResistance: cubic-bezier(0.694, 0.0482, 0.335, 1) !default; -$euiAnimSpeedExtraFast: 90ms; -$euiAnimSpeedFast: 150ms; -$euiAnimSpeedNormal: 250ms; -$euiAnimSpeedSlow: 350ms; -$euiAnimSpeedExtraSlow: 500ms; +$euiAnimSpeedExtraFast: 90ms !default; +$euiAnimSpeedFast: 150ms !default; +$euiAnimSpeedNormal: 250ms !default; +$euiAnimSpeedSlow: 350ms !default; +$euiAnimSpeedExtraSlow: 500ms !default; @keyframes euiAnimFadeIn { 0% { diff --git a/src/global_styling/variables/_borders.scss b/src/global_styling/variables/_borders.scss index 8fa92f0137f..cb6da502553 100644 --- a/src/global_styling/variables/_borders.scss +++ b/src/global_styling/variables/_borders.scss @@ -1,10 +1,10 @@ // Borders -$euiBorderWidthThin: 1px; -$euiBorderWidthThick: 2px; +$euiBorderWidthThin: 1px !default; +$euiBorderWidthThick: 2px !default; -$euiBorderColor: $euiColorLightShade; -$euiBorderRadius: 4px; -$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor; -$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor; -$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor; +$euiBorderColor: $euiColorLightShade !default; +$euiBorderRadius: 4px !default; +$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; +$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; +$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; diff --git a/src/global_styling/variables/_shadows.scss b/src/global_styling/variables/_shadows.scss index 0c011bec789..75813f955c4 100644 --- a/src/global_styling/variables/_shadows.scss +++ b/src/global_styling/variables/_shadows.scss @@ -1 +1,4 @@ // Shadows +// Transparency only affects the use of variable this outside of the shadow mixins (borders) +$euiShadowColor: $euiColorMediumShade !default; +$euiShadowColorLarge: shade(saturate($euiColorSlightHue, 25%), 50%) !default;