diff --git a/CHANGELOG.md b/CHANGELOG.md index 1fe74dce711..d309ce824dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ **Bug fixes** - Fixed some IE11 flex box bugs and documented others (modal overflowing, image shrinking, and flex group wrapping) ([#973](https://github.com/elastic/eui/pull/973)) +- Fixed white square that show in double scollbar via `euiScrollBar()` ([989](https://github.com/elastic/eui/pull/989)) ## [`1.1.0`](https://github.com/elastic/eui/tree/v1.1.0) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 4443aa1366f..201a02fc61b 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -1,35 +1,8 @@ +@import '../../src/global_styling/mixins/_helpers.scss'; + $guideSideNavWidth: 240px; $guideZLevelHighest: $euiZLevel9 + 1000; -@mixin whenNarrowerThan($browserWidth) { - @media only screen and (max-width: #{$browserWidth}) { - @content; - } -} - -@mixin whenWiderThan($browserWidth) { - @media only screen and (min-width: #{$browserWidth}) { - @content; - } -} - -@mixin scrollbar($color: rgba(#454D58, 0.4)) { - &::-webkit-scrollbar { - width: 16px; - height: 16px; - } - - &::-webkit-scrollbar-thumb { - background-color: $color; - border: 6px solid transparent; - background-clip: content-box; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } -} - .guideBody { background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%); } @@ -60,7 +33,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000; position: absolute; bottom: 0; top: 132px; - @include scrollbar; + @include euiScrollBar; overflow-y: auto; } } diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss index 98902ab3340..16ec053e458 100644 --- a/src/global_styling/mixins/_helpers.scss +++ b/src/global_styling/mixins/_helpers.scss @@ -44,6 +44,7 @@ background-clip: content-box; } + &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { background-color: transparent; }