[Maps] Design/SASS cleanup

x-pack/plugins/gis/public/_main.scss

@@ -1,10 +1,3 @@
-// Makes sure the listing page is full height with proper background
-map-listing, .gisListingPage {
-  display: flex;
-  flex-grow: 1;
-}
-
-
 #gis-plugin {
   display: flex;
   flex-direction: column;
@@ -19,284 +12,25 @@ map-listing, .gisListingPage {
   flex-direction: column;
 }
 
-.gisMapWrapper {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
 
-.layerToast {
-  margin-top: -150px !important;
-  pointer-events: none;
-}
+// MapBox
 
 .mapContainer {
   flex-grow: 1;
 }
 
-/**
- * 1. The overlay captures mouse events even if it's empty space. To counter-act this,
- *    we remove all pointer events from the overlay then add them back on the
- *    individual widgets.
- */
-
-.gisWidgetOverlay {
-  position: absolute;
-  z-index: $euiZLevel1;
-  top: $euiSizeM;
-  right: $euiSizeM;
-  bottom: $euiSizeM;
-  // left: $euiSizeM;
-  pointer-events: none; /* 1 */
-}
-
-.gisWidgetOverlay__rightSide {
-  min-width: 17rem;
-  max-width: 24rem;
-}
-
-.gisWidgetControl {
-  max-height: 100%;
-  overflow: hidden;
-  padding-bottom: $euiSizeS; // ensures the scrollbar doesn't appear unnecessarily because of flex group negative margins
-  border-color: transparent !important;
-  flex-direction: column;
-  display: flex;
-  pointer-events: all; /* 1 */
-
-  &.euiPanel--shadow {
-    @include euiBottomShadowLarge;
-  }
-
-  .gisWidgetControl__header {
-    padding: $euiSizeS $euiSize;
-    flex-shrink: 0;
-  }
-}
-
-.gisAttributionControl {
-  padding: 0 $euiSizeXS;
-}
-
-.gisViewControl__coordinates {
-  padding: $euiSizeXS $euiSizeS;
-  justify-content: center;
-  pointer-events: none;
-}
-
-.gisViewControl__gotoButton {
-  min-width: 0;
-  pointer-events: all; /* 1 */
-}
-
-.gisWidgetControl__tocHolder {
-  @include euiScrollBar;
-  overflow-y: auto;
-}
-
-.layerEntry {
-  padding: $euiSizeS $euiSize;
-  position: relative;
-}
-
-.alphaRange {
-  .euiFieldNumber {
-    max-width: 5.5em !important;
-  }
-}
-
-.colorPicker {
-  .euiColorPickerPopUp {
-    z-index: 3000;
-  }
-}
-
-.colorGradient {
-  width: 100%;
-  height: 20px;
-  position: relative;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
-.layerEntry > .visible {
-  opacity: 1;
-}
-
-.layerEntry > .notvisible { //ugh, already global classname named `invisible`
-    opacity: 0.5;
-}
-
-.layerEntry .grab:hover {
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-
-.layerSettings__type {
-  .euiIcon {
-    margin-top: -2px;
-  }
-}
-
-.hidden {
-  display: none
-}
-
-// HOTFIX coming from EUI
-.sourceSelectItem {
-  width: 374px;
-}
-
 .mapboxgl-popup {
   z-index: 100;
 }
 
-.gisLayerPanel {
-  background-color: $euiColorLightestShade;
-  width: 0;
-  overflow: hidden;
-
-  > * {
-    width: $euiSizeXXL * 11;
-  }
-
-  &-isVisible {
-    width: $euiSizeXXL * 11;
-    transition: width $euiAnimSpeedNormal $euiAnimSlightResistance;
-  }
-}
-
-.gisViewPanel__header,
-.gisViewPanel__body,
-.gisViewPanel__footer {
-  padding: $euiSize;
-}
-
-.gisViewPanel__header {
-  padding-bottom: 0;
-  flex-shrink: 0;
-  z-index: 2;
-  box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorLightestShade;
-}
-
-.gisViewPanel__title {
-  svg {
-    margin: -.1em .5em 0 0;
-  }
-}
-
-.gisViewPanel__body {
-  overflow: hidden;
-  overflow-y: auto;
-  @include euiScrollBar;
-
-  > * {
-    flex: 0 0 auto;
-  }
-
-  > *:not(:last-child) {
-    margin-bottom: $euiSize;
-  }
-}
-
-.gisViewPanel__footer {
-  padding-top: 0;
-  flex-shrink: 0;
-  z-index: 2;
-  box-shadow: 0 ($euiSize *-1) $euiSize (-$euiSize / 2) $euiColorLightestShade;
-}
+// This is not good practice to create such a generic class.
+// I can't seem to find it being applied anywhere in GIS
+// .hidden {
+//   display: none
+// }
 
 // EUIFIXTODO:
 
 .euiColorPicker__emptySwatch {
   position: relative;
 }
-
-.visibilityToggle {
-  position: relative;
-  display: inline-block;
-  min-height: 20px;
-  color: $euiColorMediumShade;
-
-  .visibilityToggle__body {
-    line-height: 19px;
-
-    > * {
-      vertical-align: baseline;
-    }
-  }
-
-  .visibilityToggle__content {
-    svg {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .filter {
-      display: none;
-    }
-  }
-
-  .visibilityToggle__eye,
-  .visibilityToggle__eyeClosed,
-  .visibilityToggle__content {
-    transition: opacity .2s ease-in-out;
-  }
-
-  .visibilityToggle__eye,
-  .visibilityToggle__eyeClosed {
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0;
-    z-index: 1;
-  }
-
-  .euiSwitch__input {
-    z-index: 2;
-    position: absolute;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  .visibilityToggle__body {
-    display: block;
-    display: block;
-    height: 16px;
-    width: 16px;
-  }
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    color: $euiColorPrimary;
-
-    .visibilityToggle__content {
-      opacity: 0;
-    }
-
-    .euiSwitch__input:checked {
-      + .visibilityToggle__body > .visibilityToggle__eye {
-        opacity: 1;
-      }
-    }
-
-    .euiSwitch__input:not(:checked) {
-      + .visibilityToggle__body > .visibilityToggle__content {
-        opacity: 0;
-      }
-      + .visibilityToggle__body > .visibilityToggle__eyeClosed {
-        opacity: 1;
-      }
-    }
-  }
-}
-.euiComboBox {
-  .euiComboBox__inputWrap {
-    display: flex;
-  }
-}

x-pack/plugins/gis/public/components/_index.scss

@@ -1 +1,5 @@
-@import './layer_panel/join_editor/resources/join';
+@import './gis_map/gis_map';
+@import './layer_addpanel/layer_addpanel';
+@import './layer_panel/index';
+@import './toasts/toasts';
+@import './widget_overlay/index';

x-pack/plugins/gis/public/components/gis_map/_gis_map.scss

@@ -0,0 +1,18 @@
+.gisMapWrapper {
+  position: relative;
+}
+
+.gisMapLayerPanel {
+  background-color: $euiColorLightestShade;
+  width: 0;
+  overflow: hidden;
+
+  > * {
+    width: $euiSizeXXL * 11;
+  }
+
+  &-isVisible {
+    width: $euiSizeXXL * 11;
+    transition: width $euiAnimSpeedNormal $euiAnimSlightResistance;
+  }
+}

x-pack/plugins/gis/public/components/gis_map/view.js

@@ -66,10 +66,10 @@ export class GisMap extends Component {
     if (noFlyoutVisible) {
       currentPanel = null;
     } else if (addLayerVisible) {
-      currentPanelClassName = "gisLayerPanel-isVisible";
+      currentPanelClassName = "gisMapLayerPanel-isVisible";
       currentPanel = <AddLayerPanel/>;
     } else if (layerDetailsVisible) {
-      currentPanelClassName = "gisLayerPanel-isVisible";
+      currentPanelClassName = "gisMapLayerPanel-isVisible";
       currentPanel = (
         <LayerPanel/>
       );
@@ -81,7 +81,7 @@ export class GisMap extends Component {
           <WidgetOverlay/>
         </EuiFlexItem>
 
-        <EuiFlexItem className={`gisLayerPanel ${currentPanelClassName}`} grow={false}>
+        <EuiFlexItem className={`gisMapLayerPanel ${currentPanelClassName}`} grow={false}>
           {currentPanel}
         </EuiFlexItem>
 

x-pack/plugins/gis/public/components/layer_addpanel/_layer_addpanel.scss

@@ -0,0 +1,10 @@
+.gisLayerAddpanel__card {
+  // EUITODO: Fix horizontal layout so it works with any size icon
+  .euiCard__content {
+    padding-top: 0 !important;
+  }
+
+  .euiCard__top + .euiCard__content {
+    padding-top: 2px !important;
+  }
+}