Adding mixin for button group border radius

elastic · Apr 12, 2021 · 10b80a3 · 10b80a3
1 parent 3d55464
commit 10b80a3
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 50 deletions.
diff --git a/x-pack/plugins/maps/public/index.scss → x-pack/plugins/maps/public/_index.scss b/x-pack/plugins/maps/public/index.scss → x-pack/plugins/maps/public/_index.scss
@@ -7,6 +7,7 @@
 //   mapChart__legend--small
 //   mapChart__legend-isLoading
 
+@import 'mixins';
 @import 'main';
 @import 'mapbox_hacks';
 @import 'connected_components/index';

diff --git a/x-pack/plugins/maps/public/_mapbox_hacks.scss b/x-pack/plugins/maps/public/_mapbox_hacks.scss
@@ -10,15 +10,7 @@
 
   .mapboxgl-ctrl-group:not(:empty) {
     @include euiBottomShadowLarge;
-
-    @include kbnThemeStyle($theme: 'v7') {
-      border-radius: $euiBorderRadius;
-    }
-
-    @include kbnThemeStyle($theme: 'v8') {
-      border-radius: $euiBorderRadius * (2 / 3);
-    }
-
+    @include mapToolbarButtonGroupBorderRadius;
     background-color: $euiColorEmptyShade;
     transition: transform $euiAnimSpeedNormal ease-in-out;
 
@@ -29,26 +21,6 @@
     > button {
       @include size($euiSizeXL);
 
-      @include kbnThemeStyle($theme: 'v7') {
-        &:first-child {
-          border-radius: $euiBorderRadius $euiBorderRadius 0 0;
-        }
-
-        &:last-child {
-          border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-        }
-      }
-
-      @include kbnThemeStyle($theme: 'v8') {
-        &:first-child {
-          border-radius: ($euiBorderRadius * (2 / 3)) ($euiBorderRadius * (2 / 3)) 0 0;
-        }
-
-        &:last-child {
-          border-radius: 0 0 ($euiBorderRadius * (2 / 3)) ($euiBorderRadius * (2 / 3));
-        }
-      }
-
       + button {
         border: none;
       }

diff --git a/x-pack/plugins/maps/public/_mixins.scss b/x-pack/plugins/maps/public/_mixins.scss
@@ -0,0 +1,11 @@
+@mixin mapToolbarButtonGroupBorderRadius {
+  @include kbnThemeStyle($theme: 'v7') {
+    border-radius: $euiBorderRadius;
+  }
+
+  @include kbnThemeStyle($theme: 'v8') {
+    border-radius: $euiBorderRadiusSmall;
+  }
+
+  overflow: hidden;
+}
diff --git a/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss b/x-pack/plugins/maps/public/connected_components/toolbar_overlay/_toolbar_overlay.scss
@@ -39,30 +39,11 @@
 }
 
 .mapToolbarOverlay__buttonGroup {
+  @include mapToolbarButtonGroupBorderRadius;
   display: flex;
   flex-direction: column;
 
   .euiButtonIcon {
     border-radius: 0;
-
-    @include kbnThemeStyle($theme: 'v7') {
-      &:first-child {
-        border-radius: $euiBorderRadius $euiBorderRadius 0 0;
-      }
-
-      &:last-child {
-        border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-      }
-    }
-
-    @include kbnThemeStyle($theme: 'v8') {
-      &:first-child {
-        border-radius: ($euiBorderRadius * (2 / 3)) ($euiBorderRadius * (2 / 3)) 0 0;
-      }
-
-      &:last-child {
-        border-radius: 0 0 ($euiBorderRadius * (2 / 3)) ($euiBorderRadius * (2 / 3));
-      }
-    }
   }
 }
diff --git a/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts b/x-pack/plugins/maps/public/lazy_load_bundle/lazy/index.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import '../../index.scss';
+import '../../_index.scss';
 export * from '../../embeddable/map_embeddable';
 export * from '../../kibana_services';
 export { renderApp } from '../../render_app';