Move shared component mixins to global_styles

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545))
 - Added `disabled` option to the `option` attribute of the `options` object that is passed to the `EuiCheckboxGroup` so that checkboxes in a group can be individually disabled ([#2548](https://github.com/elastic/eui/pull/2548))
 - Added `EuiAspectRatio` component that allows for responsively resizing embeds ([#2535](https://github.com/elastic/eui/pull/2535))
+- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551))
 
 **Bug fixes**
 

src/components/button/_button.scss

@@ -1,5 +1,3 @@
-@import '../loading/mixins';
-
 // This file has lots of modifiers and is somewhat nesty by nature
 //sass-lint:disable nesting-depth
 
@@ -79,7 +77,6 @@
 // Create button modifiers based upon the map.
 @each $name, $color in $euiButtonTypes {
   .euiButton--#{$name} {
-
     @if ($name == 'ghost') {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;

src/components/button/_index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 
 @import 'button';
 @import 'button_empty/index';

src/components/button/button_group/_button_group.scss

@@ -1,5 +1,3 @@
-@import '../../form/variables';
-
 .euiButtonGroup {
   max-width: 100%;
   display: flex;

src/components/card/_card.scss

@@ -1,4 +1,3 @@
-@import '../panel/mixins';
 @import '../badge/beta_badge/mixins';
 
 // Start with a base of EuiPanel styles
@@ -197,4 +196,3 @@
 .euiCard--hasChildren .euiCard__description {
   margin-bottom: $euiCardSpacing;
 }
-

src/components/color_picker/_color_picker.scss

@@ -1,5 +1,3 @@
-@import '../form/mixins';
-
 .euiColorPicker {
   position: relative;
   width: $euiColorPickerWidth;

src/components/color_picker/_hue.scss

@@ -1,7 +1,3 @@
-@import '../form/_mixins';
-@import '../form/range/_variables';
-@import '../form/range/_mixins';
-
 // This wraps the range. It is needed because there is no way to do a linear gradeint in ie11 for the track
 .euiHue {
   // sass-lint:disable-block no-color-literals

src/components/color_picker/color_stops/_color_stops.scss

@@ -1,5 +1,3 @@
-@import '../../form/range/_variables';
-
 .euiColorStops:not(.euiColorStops-isDisabled) {
   &:focus {
     outline: 2px solid $euiFocusRingColor;

src/components/combo_box/_combo_box.scss

@@ -1,5 +1,3 @@
-@import '../form/form_control_layout/mixins';
-
 .euiComboBox {
   @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;

src/components/combo_box/_index.scss

@@ -1,7 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-@import '../form/form_control_layout/mixins';
-
 @import 'combo_box';
 @import 'combo_box_input/index';
 @import 'combo_box_options_list/index';

src/components/context_menu/_context_menu_panel.scss

@@ -1,5 +1,3 @@
-@import '../popover/mixins';
-
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;

src/components/date_picker/_date_picker_range.scss

@@ -1,7 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-@import '../form/form_control_layout/variables';
-
 /**
  * 1. Account for inner box-shadow style border
  */

src/components/date_picker/super_date_picker/_mixins.scss

@@ -1,5 +1,3 @@
-@import '../../form/form_control_layout/variables';
-
 @mixin euiSuperDatePickerText {
   @include euiFormControlText;
   display: block;

src/components/drag_and_drop/_droppable.scss

@@ -1,5 +1,3 @@
-@import '../panel/mixins';
-
 .euiDroppable {
   $euiDroppableColor: $euiColorSecondary;
   transition: background-color $euiAnimSpeedExtraSlow ease;

src/components/facet/_index.scss

@@ -1,5 +1,4 @@
 @import '../button/variables';
-@import '../button/mixins';
 
 @import 'facet_button';
 @import 'facet_group';

src/components/filter_group/_filter_button.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFilterButton {
   background-color: $euiFormBackgroundColor;
   height: $euiFormControlHeight;

src/components/filter_group/_filter_group.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFilterGroup {
   display: inline-flex;
   max-width: 100%;

src/components/filter_group/_index.scss

@@ -1,6 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-
 @import 'filter_group';
 @import 'filter_button';
 @import 'filter_select_item';

src/components/flyout/_flyout.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFlyout {
   border-left: $euiBorderThin;
   // The mixin augments the above

src/components/form/_index.scss

@@ -1,6 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'checkbox/index';
 @import 'described_form_group/index';
 @import 'field_number/index';

src/components/form/checkbox/_index.scss

@@ -1,3 +1,2 @@
-@import '../variables';
 @import 'checkbox';
 @import 'checkbox_group';

src/components/form/file_picker/_file_picker.scss

@@ -1,5 +1,3 @@
-@import '../form_control_layout/mixins';
-
 /**
   * REMEMBER: --large modifiers must come last to override --compressed
   */

src/components/form/form_control_layout/_form_control_layout.scss

@@ -1,6 +1,3 @@
-@import '../variables';
-@import '../mixins';
-
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);

src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -1,6 +1,3 @@
-@import '../variables';
-@import '../mixins';
-
 .euiFormControlLayoutDelimited {
   // Match just the regular drop shadow of inputs
   @include euiFormControlDefaultShadow;

src/components/form/form_control_layout/_index.scss

@@ -1,5 +1,3 @@
-@import 'variables';
-@import 'mixins';
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';
 @import 'form_control_layout_icons';

src/components/form/radio/_index.scss

@@ -1,3 +1,2 @@
-@import '../variables';
 @import 'radio';
 @import 'radio_group';

src/components/form/range/_index.scss

@@ -1,6 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'range';
 @import 'range_highlight';
 @import 'range_input';

src/components/form/switch/_index.scss

@@ -1,2 +1 @@
-@import '../variables';
 @import 'switch';

src/components/loading/_index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';
 @import 'loading_content';

src/components/modal/_index.scss

@@ -1,3 +1 @@
-@import '../form/variables';
-
 @import 'modal';

src/components/panel/_index.scss

@@ -1,3 +1,2 @@
 @import 'variables';
-@import 'mixins';
 @import 'panel';

src/components/popover/_index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 @import 'popover';
 @import 'popover_title';
 @import 'popover_footer';

src/components/search_bar/_search_bar.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiSearchBar__searchHolder {
   min-width: $euiFormMaxWidth / 2;
 }

src/components/table/_responsive.scss

@@ -1,5 +1,3 @@
-@import '../panel/mixins';
-
 .euiTableRowCell__mobileHeader {
   // Don't display by default unless table is responsive
   display: none;

src/components/toggle/_toggle.scss

@@ -1,5 +1,3 @@
-@import '../form/switch/mixins';
-
 .euiToggle {
   position: relative;
 

src/components/form/_mixins.scss → src/global_styling/mixins/_form.scss

@@ -1,6 +1,6 @@
-@import 'variables';
-@import 'form_control_layout/variables';
-@import 'form_control_layout/mixins';
+@import '../variables/form';
+@import '../variables/form_control_layout';
+@import 'form_control_layout';
 
 @mixin euiPlaceholderPerBrowser {
   // sass-lint:disable-block no-vendor-prefixes

src/components/form/form_control_layout/_mixins.scss → src/global_styling/mixins/_form_control_layout.scss

@@ -1,5 +1,3 @@
-@import '../variables';
-
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
   $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
   $secondIconSize: $euiFormControlPadding + $euiSize;
@@ -39,4 +37,4 @@
     stroke: $euiColorEmptyShade;
     stroke-width: 2px; // increase thickness of icon at such a small size
   }
-}
+}

src/global_styling/mixins/_index.scss

@@ -5,3 +5,12 @@
 @import 'helpers';
 @import 'states';
 @import 'icons';
+
+@import 'button';
+@import 'form';
+@import 'form_control_layout';
+@import 'loading';
+@import 'panel';
+@import 'popover';
+@import 'range';
+@import 'switch';

src/components/form/form_control_layout/_variables.scss → src/global_styling/variables/_form_control_layout.scss

@@ -1,4 +1,4 @@
-@import '../variables';
+@import 'form';
 
 /**
  * 1. Account for inner box-shadow style border

src/global_styling/variables/_index.scss

@@ -14,3 +14,7 @@
 @import 'borders';
 @import 'shadows';
 @import 'z_index';
+
+@import 'form';
+@import 'form_control_layout';
+@import 'range';