From 3e5cabc4b7749db843f8ff20bd720a9dd3c4abf8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 17:23:02 -0400 Subject: [PATCH 1/9] Better text as overlay --- .../public/components/widget_overlay/_index.scss | 2 ++ .../public/components/widget_overlay/_mixins.scss | 3 +++ .../attribution_control/_attribution_control.scss | 3 ++- .../widget_overlay/attribution_control/view.js | 11 +++++------ .../widget_overlay/view_control/_view_control.scss | 2 +- .../widget_overlay/view_control/view_control.js | 14 +++++++------- 6 files changed, 20 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_index.scss b/x-pack/plugins/maps/public/components/widget_overlay/_index.scss index b4e97724cda82..cc1ab35039dac 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_index.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_index.scss @@ -1,3 +1,5 @@ +@import './mixins'; + @import './widget_overlay'; @import './attribution_control/attribution_control'; @import './layer_control/index'; diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss new file mode 100644 index 0000000000000..c5096b15a80e2 --- /dev/null +++ b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss @@ -0,0 +1,3 @@ +@mixin mapOverlayIsTextOnly() { + text-shadow: 0 0 2px $euiColorEmptyShade, 0 0 1px $euiColorFullShade; +} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss index 4654055705b2c..1edb45c97de25 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss @@ -1,3 +1,4 @@ .mapAttributionControl { - padding: 0 $euiSizeXS; + @include mapOverlayIsTextOnly; + pointer-events: all; } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js index c0f8087f6f214..0fe10f47633c6 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js @@ -8,7 +8,6 @@ import React, { Fragment } from 'react'; import _ from 'lodash'; import { EuiText, - EuiPanel, EuiLink, } from '@elastic/eui'; @@ -68,7 +67,7 @@ export class AttributionControl extends React.Component { } return ( - {label} + {label} ); } @@ -88,11 +87,11 @@ export class AttributionControl extends React.Component { return null; } return ( - - - {this._renderAttributions()} +
+ + {this._renderAttributions()} - +
); } } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss index 47d7c58e1c047..d77bc7ba20d21 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/view_control/_view_control.scss @@ -5,7 +5,7 @@ */ .mapViewControl__coordinates { - padding: $euiSizeXS $euiSizeS; + @include mapOverlayIsTextOnly; justify-content: center; pointer-events: none; } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js index cf113d071c5cc..1b0d2dc55a922 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js @@ -9,7 +9,6 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiPanel, EuiButton, EuiPopover, EuiText, @@ -58,9 +57,9 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo ? _.round(mouseCoordinates.lon, DECIMAL_DEGREES_PRECISION) : ''; return ( - +
-

+ {lon} -

+ - +
); } return ( - + {mouseCoordinates && renderMouseCoordinates()} From 2a55d02f31aec0130019c60e643c243b6ce91507 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 17:47:16 -0400 Subject: [PATCH 2/9] =?UTF-8?q?Make=20=E2=80=9CGo=20to=E2=80=9D=20button?= =?UTF-8?q?=20an=20icon=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../maps/public/components/_index.scss | 16 +++++++++++++ .../layer_control/_layer_control.scss | 6 +++-- .../view_control/view_control.js | 23 +++++++++++-------- 3 files changed, 33 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/maps/public/components/_index.scss b/x-pack/plugins/maps/public/components/_index.scss index 3979c1b66fcb3..71975de23de46 100644 --- a/x-pack/plugins/maps/public/components/_index.scss +++ b/x-pack/plugins/maps/public/components/_index.scss @@ -3,3 +3,19 @@ @import './layer_panel/index'; @import './widget_overlay/index'; @import './toolbar_overlay/index'; + +// The following code will only get compiled from this file + +// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled +// Also fixes dark mode +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E"); + background-position: center; +} + +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E"); + background-position: center; +} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss index c87342aaf31ff..7778a17a60411 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss @@ -7,7 +7,8 @@ } .mapLayerControl__addLayerButton, -.mapLayerControl__openLayerTOCButton { +.mapLayerControl__openLayerTOCButton, +.mapViewControl__gotoButton { pointer-events: all; &:enabled, @@ -18,7 +19,8 @@ } .mapLayerControl__openLayerTOCButton, -.mapLayerControl__closeLayerTOCButton { +.mapLayerControl__closeLayerTOCButton, +.mapViewControl__gotoButton { @include size($euiSizeXL); background-color: $euiColorEmptyShade !important; // During all states } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js index 1b0d2dc55a922..836520a9ae2a5 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js @@ -9,13 +9,14 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, - EuiButton, + EuiButtonIcon, EuiPopover, EuiText, } from '@elastic/eui'; import { SetView } from './set_view'; import { DECIMAL_DEGREES_PRECISION } from '../../../../common/constants'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoordinates }) { const toggleSetViewVisibility = () => { @@ -30,18 +31,20 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo - - )} + iconType="crosshairs" + color="text" + aria-label={i18n.translate('xpack.maps.viewControl.goToButtonLabel', { + defaultMessage: 'Go to' + })} + title={i18n.translate('xpack.maps.viewControl.goToButtonLabel', { + defaultMessage: 'Go to' + })} + /> + )} isOpen={isSetViewOpen} closePopover={closeSetView} > From 721c6049a5c10de8fbbd97a37c76b84b61fbb519 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 17:55:51 -0400 Subject: [PATCH 3/9] Fix layout with scrolling and overflow shadow of right side --- .../widget_overlay/_widget_overlay.scss | 10 +--------- .../_attribution_control.scss | 1 + .../layer_control/_layer_control.scss | 4 ++++ .../widget_overlay/widget_overlay.js | 19 +++++-------------- 4 files changed, 11 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss index c2ff67ac818d2..cbe2559513ac1 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss @@ -12,17 +12,9 @@ bottom: $euiSizeM; pointer-events: none; /* 1 */ } - -.mapWidgetOverlay__rightSideWrapper { - overflow: hidden; // Fixes Chrome overflow -} - -.mapWidgetOverlay__rightSide { - width: $euiSize * 20; -} - .mapWidgetOverlay__layerWrapper { align-items: flex-end; + width: $euiSize * 20; } .mapWidgetControl { diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss index 1edb45c97de25..a11822605ac53 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/_attribution_control.scss @@ -1,4 +1,5 @@ .mapAttributionControl { @include mapOverlayIsTextOnly; pointer-events: all; + padding-left: $euiSizeM; } diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss index 7778a17a60411..2d63cd62ed528 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss @@ -6,6 +6,10 @@ border-top: 1px solid $euiColorLightestShade; } +.mapLayerControl__addLayerButton { + flex-shrink: 0; +} + .mapLayerControl__addLayerButton, .mapLayerControl__openLayerTOCButton, .mapViewControl__gotoButton { diff --git a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js index bd59361cc61b2..712bffa86030f 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js @@ -16,20 +16,11 @@ import { AttributionControl } from './attribution_control'; export function WidgetOverlay() { return ( - - - - - - - - - + + + + + From 5af470177dc1549ad71fccc36babd3828ff0689d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 18:00:48 -0400 Subject: [PATCH 4/9] cleanup --- .../maps/public/components/widget_overlay/_widget_overlay.scss | 3 +-- .../components/widget_overlay/attribution_control/view.js | 2 +- .../components/widget_overlay/view_control/view_control.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss index cbe2559513ac1..df6dfc9efd9b7 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss @@ -12,6 +12,7 @@ bottom: $euiSizeM; pointer-events: none; /* 1 */ } + .mapWidgetOverlay__layerWrapper { align-items: flex-end; width: $euiSize * 20; @@ -37,5 +38,3 @@ flex-shrink: 0; text-transform: uppercase; } - - diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js index 0fe10f47633c6..4a8a4a5a440a1 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/view.js @@ -87,7 +87,7 @@ export class AttributionControl extends React.Component { return null; } return ( -
+
{this._renderAttributions()} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js index 836520a9ae2a5..225beb282e5af 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/view_control/view_control.js @@ -84,7 +84,7 @@ export function ViewControl({ isSetViewOpen, closeSetView, openSetView, mouseCoo return ( From 53735ce06e39532d28d2dbadba4daff13340bcb7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 18:15:27 -0400 Subject: [PATCH 5/9] aww snap! --- .../__snapshots__/view.test.js.snap | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap index 25f8232012645..d61f08152f0c8 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/components/widget_overlay/attribution_control/__snapshots__/view.test.js.snap @@ -1,28 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AttributionControl is rendered 1`] = ` - - attribution with no link - , - - attribution with link - + + attribution with no link + , + + attribution with link + + - +
`; From 955ae6b6125d9308eb0ed1cb4783a07d375d9a83 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 21 May 2019 18:39:01 -0400 Subject: [PATCH 6/9] FF fixes --- .../public/components/widget_overlay/_widget_overlay.scss | 5 +++++ .../public/components/widget_overlay/layer_control/view.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss index df6dfc9efd9b7..6000e188155e1 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss @@ -16,6 +16,11 @@ .mapWidgetOverlay__layerWrapper { align-items: flex-end; width: $euiSize * 20; + min-height: 0; // Fixes scroll in Firefox +} + +.mapWidgetControl__headerFlexItem { + flex-shrink: 0; } .mapWidgetControl { diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js index 8dd7e1ac29870..6bd55da059985 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js +++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js @@ -66,7 +66,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c return ( - + Date: Tue, 21 May 2019 18:48:47 -0400 Subject: [PATCH 7/9] Show full stroke of fillable circle --- x-pack/plugins/maps/public/shared/icons/_color_gradient.scss | 4 ++++ .../maps/public/shared/icons/additional_layer_icons.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss b/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss index 960a8dc1aa3ce..dbe9575ce5698 100644 --- a/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss +++ b/x-pack/plugins/maps/public/shared/icons/_color_gradient.scss @@ -7,3 +7,7 @@ bottom: 0; left: 0; } + +.mapFillableCircle { + overflow: visible; +} diff --git a/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js b/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js index 671b94fb4fbc8..accc6eb13ef16 100644 --- a/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js +++ b/x-pack/plugins/maps/public/shared/icons/additional_layer_icons.js @@ -9,7 +9,7 @@ import React from 'react'; export const FillableCircle = ({ style }) => ( Date: Tue, 21 May 2019 19:22:15 -0400 Subject: [PATCH 8/9] One more snap --- .../layer_control/__snapshots__/view.test.js.snap | 2 ++ 1 file changed, 2 insertions(+) diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap index 73041b29b290b..ddc1f53ba5ee0 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap +++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/__snapshots__/view.test.js.snap @@ -9,6 +9,7 @@ exports[`LayerControl is rendered 1`] = ` paddingSize="none" > Date: Tue, 21 May 2019 20:04:48 -0400 Subject: [PATCH 9/9] Moved mapbox styles to a hack file, increased text shadow for better visibility --- x-pack/plugins/maps/public/_main.scss | 38 -------------- x-pack/plugins/maps/public/_mapbox_hacks.scss | 51 +++++++++++++++++++ .../maps/public/components/_index.scss | 16 ------ .../components/widget_overlay/_mixins.scss | 11 +++- x-pack/plugins/maps/public/index.scss | 1 + 5 files changed, 62 insertions(+), 55 deletions(-) create mode 100644 x-pack/plugins/maps/public/_mapbox_hacks.scss diff --git a/x-pack/plugins/maps/public/_main.scss b/x-pack/plugins/maps/public/_main.scss index 74f670641574c..8f361a6287eb7 100644 --- a/x-pack/plugins/maps/public/_main.scss +++ b/x-pack/plugins/maps/public/_main.scss @@ -18,44 +18,6 @@ flex-direction: column; } - -// MapBox - -.mapContainer { - flex-grow: 1; - - .mapboxgl-popup { - z-index: 100; - border-color: $euiColorEmptyShade; - } - - .mapboxgl-popup-content { - background-color: $euiColorEmptyShade; - } - - .mapboxgl-popup-tip { - border-top-color: $euiColorEmptyShade !important; - } - - .mapboxgl-ctrl-top-left .mapboxgl-ctrl { - margin-left: $euiSizeM; - margin-top: $euiSizeM; - } - - .mapboxgl-ctrl-group:not(:empty) { - @include euiBottomShadowLarge; - background-color: $euiColorEmptyShade; - border-radius: $euiBorderRadius; - - > button { - @include size($euiSizeXL); - - + button { - border: none; - } - } - } -} .euiColorPicker__emptySwatch { position: relative; } diff --git a/x-pack/plugins/maps/public/_mapbox_hacks.scss b/x-pack/plugins/maps/public/_mapbox_hacks.scss new file mode 100644 index 0000000000000..1a1207667f37d --- /dev/null +++ b/x-pack/plugins/maps/public/_mapbox_hacks.scss @@ -0,0 +1,51 @@ +// MapBox + +.mapContainer { + flex-grow: 1; + + .mapboxgl-popup { + z-index: 100; + border-color: $euiColorEmptyShade; + } + + .mapboxgl-popup-content { + background-color: $euiColorEmptyShade; + } + + .mapboxgl-popup-tip { + border-top-color: $euiColorEmptyShade !important; + } + + .mapboxgl-ctrl-top-left .mapboxgl-ctrl { + margin-left: $euiSizeM; + margin-top: $euiSizeM; + } + + .mapboxgl-ctrl-group:not(:empty) { + @include euiBottomShadowLarge; + background-color: $euiColorEmptyShade; + border-radius: $euiBorderRadius; + + > button { + @include size($euiSizeXL); + + + button { + border: none; + } + } + } +} + +// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled +// Also fixes dark mode +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E"); + background-position: center; +} + +.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out { + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E"); + background-position: center; +} diff --git a/x-pack/plugins/maps/public/components/_index.scss b/x-pack/plugins/maps/public/components/_index.scss index 71975de23de46..3979c1b66fcb3 100644 --- a/x-pack/plugins/maps/public/components/_index.scss +++ b/x-pack/plugins/maps/public/components/_index.scss @@ -3,19 +3,3 @@ @import './layer_panel/index'; @import './widget_overlay/index'; @import './toolbar_overlay/index'; - -// The following code will only get compiled from this file - -// Custom SVG as background for zoom controls based off of EUI glyphs plusInCircleFilled and minusInCircleFilled -// Also fixes dark mode -.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in { - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M8,7 L8,3.5 C8,3.22385763 7.77614237,3 7.5,3 C7.22385763,3 7,3.22385763 7,3.5 L7,7 L3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L7,8 L7,11.5 C7,11.7761424 7.22385763,12 7.5,12 C7.77614237,12 8,11.7761424 8,11.5 L8,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L8,7 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z' /%3E%3C/svg%3E"); - background-position: center; -} - -.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out { - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M7.5,0 C11.6355882,0 15,3.36441176 15,7.5 C15,11.6355882 11.6355882,15 7.5,15 C3.36441176,15 0,11.6355882 0,7.5 C0,3.36441176 3.36441176,0 7.5,0 Z M3.5,7 C3.22385763,7 3,7.22385763 3,7.5 C3,7.77614237 3.22385763,8 3.5,8 L11.5,8 C11.7761424,8 12,7.77614237 12,7.5 C12,7.22385763 11.7761424,7 11.5,7 L3.5,7 Z' /%3E%3C/svg%3E"); - background-position: center; -} diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss index c5096b15a80e2..09548813a4576 100644 --- a/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss +++ b/x-pack/plugins/maps/public/components/widget_overlay/_mixins.scss @@ -1,3 +1,12 @@ @mixin mapOverlayIsTextOnly() { - text-shadow: 0 0 2px $euiColorEmptyShade, 0 0 1px $euiColorFullShade; + text-shadow: + 0 0 2px $euiColorEmptyShade, + // Multiple shadows helps turn it into an outline since + // text shadows have no spread value + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade, + 0 0 1px $euiColorEmptyShade; } diff --git a/x-pack/plugins/maps/public/index.scss b/x-pack/plugins/maps/public/index.scss index 7549877b46861..a55d7a8c875d3 100644 --- a/x-pack/plugins/maps/public/index.scss +++ b/x-pack/plugins/maps/public/index.scss @@ -11,5 +11,6 @@ // mapChart__legend-isLoading @import './main'; +@import './mapbox_hacks'; @import './components/index'; @import './shared/index';