From b830e70b16c258e3688e325fdaee4dfc2b407e94 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Wed, 20 Nov 2019 13:42:22 -0600 Subject: [PATCH 01/22] Move euiPanel mixin to global_styling for easier overriding --- src/components/card/_card.scss | 2 -- src/components/drag_and_drop/_droppable.scss | 2 -- src/components/panel/_index.scss | 1 - src/components/table/_responsive.scss | 2 -- src/global_styling/mixins/_index.scss | 1 + .../panel/_mixins.scss => global_styling/mixins/_panel.scss} | 0 6 files changed, 1 insertion(+), 7 deletions(-) rename src/{components/panel/_mixins.scss => global_styling/mixins/_panel.scss} (100%) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index f663baf4259..c86488fa9d5 100644 --- a/src/components/card/_card.scss +++ b/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; } - diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss index 48db048d5d6..7dc5f861cd5 100644 --- a/src/components/drag_and_drop/_droppable.scss +++ b/src/components/drag_and_drop/_droppable.scss @@ -1,5 +1,3 @@ -@import '../panel/mixins'; - .euiDroppable { $euiDroppableColor: $euiColorSecondary; transition: background-color $euiAnimSpeedExtraSlow ease; diff --git a/src/components/panel/_index.scss b/src/components/panel/_index.scss index 4721672682b..113245f7469 100644 --- a/src/components/panel/_index.scss +++ b/src/components/panel/_index.scss @@ -1,3 +1,2 @@ @import 'variables'; -@import 'mixins'; @import 'panel'; diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index 524ef6a1ba6..7a49fa18f8b 100644 --- a/src/components/table/_responsive.scss +++ b/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; diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 4b4d689fa2f..692e6d1b438 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -5,3 +5,4 @@ @import 'helpers'; @import 'states'; @import 'icons'; +@import 'panel'; diff --git a/src/components/panel/_mixins.scss b/src/global_styling/mixins/_panel.scss similarity index 100% rename from src/components/panel/_mixins.scss rename to src/global_styling/mixins/_panel.scss From 557923ca48b5a970548fc084428b47ef9514c567 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Fri, 22 Nov 2019 15:20:42 -0600 Subject: [PATCH 02/22] Move button mixin to global_styling --- src/components/button/_button.scss | 3 --- src/components/button/_index.scss | 1 - src/components/facet/_index.scss | 1 - .../button/_mixins.scss => global_styling/mixins/_button.scss} | 0 src/global_styling/mixins/_index.scss | 1 + 5 files changed, 1 insertion(+), 5 deletions(-) rename src/{components/button/_mixins.scss => global_styling/mixins/_button.scss} (100%) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 1f410deda18..1d562b8b179 100644 --- a/src/components/button/_button.scss +++ b/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; diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index ed5bdc25801..61cc486a508 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -1,5 +1,4 @@ @import 'variables'; -@import 'mixins'; @import 'button'; @import 'button_empty/index'; diff --git a/src/components/facet/_index.scss b/src/components/facet/_index.scss index 11053ba4694..79513e3b216 100644 --- a/src/components/facet/_index.scss +++ b/src/components/facet/_index.scss @@ -1,5 +1,4 @@ @import '../button/variables'; -@import '../button/mixins'; @import 'facet_button'; @import 'facet_group'; diff --git a/src/components/button/_mixins.scss b/src/global_styling/mixins/_button.scss similarity index 100% rename from src/components/button/_mixins.scss rename to src/global_styling/mixins/_button.scss diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 692e6d1b438..22397c444e8 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -5,4 +5,5 @@ @import 'helpers'; @import 'states'; @import 'icons'; +@import 'button'; @import 'panel'; From 54fce1a5147162e3d6608adc0f02bac9358cd297 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Mon, 25 Nov 2019 11:41:11 -0600 Subject: [PATCH 03/22] Move loading mixin to global_styling --- src/components/loading/_index.scss | 1 - .../loading/_mixins.scss => global_styling/mixins/_loading.scss} | 0 2 files changed, 1 deletion(-) rename src/{components/loading/_mixins.scss => global_styling/mixins/_loading.scss} (100%) diff --git a/src/components/loading/_index.scss b/src/components/loading/_index.scss index 5b92ffeb378..c34857f75c8 100644 --- a/src/components/loading/_index.scss +++ b/src/components/loading/_index.scss @@ -1,5 +1,4 @@ @import 'variables'; -@import 'mixins'; @import 'loading_kibana'; @import 'loading_chart'; @import 'loading_content'; diff --git a/src/components/loading/_mixins.scss b/src/global_styling/mixins/_loading.scss similarity index 100% rename from src/components/loading/_mixins.scss rename to src/global_styling/mixins/_loading.scss From f2bae9e419dfd0d92de3a1da2671bed5c1a4b7c4 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Mon, 25 Nov 2019 11:43:25 -0600 Subject: [PATCH 04/22] Move popover mixin to global_styling --- src/components/context_menu/_context_menu_panel.scss | 2 -- src/components/popover/_index.scss | 1 - src/global_styling/mixins/_index.scss | 2 ++ .../_mixins.scss => global_styling/mixins/_popover.scss} | 0 4 files changed, 2 insertions(+), 3 deletions(-) rename src/{components/popover/_mixins.scss => global_styling/mixins/_popover.scss} (100%) diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss index 4440a403a1f..402cda07035 100644 --- a/src/components/context_menu/_context_menu_panel.scss +++ b/src/components/context_menu/_context_menu_panel.scss @@ -1,5 +1,3 @@ -@import '../popover/mixins'; - .euiContextMenuPanel { width: 100%; visibility: visible; diff --git a/src/components/popover/_index.scss b/src/components/popover/_index.scss index 0e2fd80cb05..d0eec06039f 100644 --- a/src/components/popover/_index.scss +++ b/src/components/popover/_index.scss @@ -1,5 +1,4 @@ @import 'variables'; -@import 'mixins'; @import 'popover'; @import 'popover_title'; @import 'popover_footer'; diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 22397c444e8..a9391de6865 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -6,4 +6,6 @@ @import 'states'; @import 'icons'; @import 'button'; +@import 'loading'; @import 'panel'; +@import 'popover'; diff --git a/src/components/popover/_mixins.scss b/src/global_styling/mixins/_popover.scss similarity index 100% rename from src/components/popover/_mixins.scss rename to src/global_styling/mixins/_popover.scss From d0a59b70569b479843c6cfaa89762537e614c528 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Mon, 25 Nov 2019 13:31:28 -0600 Subject: [PATCH 05/22] Move form, switch, and range mixins and variables to global_styling --- src/components/button/button_group/_button_group.scss | 2 -- src/components/color_picker/_color_picker.scss | 2 -- src/components/color_picker/_hue.scss | 4 ---- src/components/color_picker/color_stops/_color_stops.scss | 2 -- src/components/combo_box/_combo_box.scss | 2 -- src/components/combo_box/_index.scss | 4 ---- src/components/date_picker/_date_picker_range.scss | 4 ---- src/components/date_picker/super_date_picker/_mixins.scss | 2 -- src/components/filter_group/_filter_button.scss | 2 -- src/components/filter_group/_filter_group.scss | 2 -- src/components/filter_group/_index.scss | 3 --- src/components/flyout/_flyout.scss | 2 -- src/components/form/_index.scss | 3 --- src/components/form/checkbox/_index.scss | 1 - src/components/form/file_picker/_file_picker.scss | 2 -- .../form/form_control_layout/_form_control_layout.scss | 3 --- .../form_control_layout/_form_control_layout_delimited.scss | 3 --- src/components/form/form_control_layout/_index.scss | 2 -- src/components/form/radio/_index.scss | 1 - src/components/form/range/_index.scss | 3 --- src/components/form/switch/_index.scss | 1 - src/components/modal/_index.scss | 2 -- src/components/search_bar/_search_bar.scss | 2 -- src/components/toggle/_toggle.scss | 2 -- .../form/_mixins.scss => global_styling/mixins/_form.scss} | 6 +++--- .../mixins/_form_control_layout.scss} | 4 +--- src/global_styling/mixins/_index.scss | 5 +++++ .../_mixins.scss => global_styling/mixins/_range.scss} | 0 .../_mixins.scss => global_styling/mixins/_switch.scss} | 0 .../_variables.scss => global_styling/variables/_form.scss} | 0 .../variables/_form_control_layout.scss} | 2 +- src/global_styling/variables/_index.scss | 4 ++++ .../variables/_range.scss} | 0 33 files changed, 14 insertions(+), 63 deletions(-) rename src/{components/form/_mixins.scss => global_styling/mixins/_form.scss} (98%) rename src/{components/form/form_control_layout/_mixins.scss => global_styling/mixins/_form_control_layout.scss} (98%) rename src/{components/form/range/_mixins.scss => global_styling/mixins/_range.scss} (100%) rename src/{components/form/switch/_mixins.scss => global_styling/mixins/_switch.scss} (100%) rename src/{components/form/_variables.scss => global_styling/variables/_form.scss} (100%) rename src/{components/form/form_control_layout/_variables.scss => global_styling/variables/_form_control_layout.scss} (93%) rename src/{components/form/range/_variables.scss => global_styling/variables/_range.scss} (100%) diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index a19d9698ef3..c851e677280 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -1,5 +1,3 @@ -@import '../../form/variables'; - .euiButtonGroup { max-width: 100%; display: flex; diff --git a/src/components/color_picker/_color_picker.scss b/src/components/color_picker/_color_picker.scss index b2521831ac1..84f7a537ec0 100644 --- a/src/components/color_picker/_color_picker.scss +++ b/src/components/color_picker/_color_picker.scss @@ -1,5 +1,3 @@ -@import '../form/mixins'; - .euiColorPicker { position: relative; width: $euiColorPickerWidth; diff --git a/src/components/color_picker/_hue.scss b/src/components/color_picker/_hue.scss index b9cddf4fa1c..e8c5eccb45f 100644 --- a/src/components/color_picker/_hue.scss +++ b/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 diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss index 7a2cbafbc83..55ea1dc7bf8 100644 --- a/src/components/color_picker/color_stops/_color_stops.scss +++ b/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; diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index ee87b156af0..dca34e6a13a 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/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; diff --git a/src/components/combo_box/_index.scss b/src/components/combo_box/_index.scss index 1c893bc84fb..29040a0addd 100644 --- a/src/components/combo_box/_index.scss +++ b/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'; diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index 6d169eb0744..4d75335b3bf 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/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 */ diff --git a/src/components/date_picker/super_date_picker/_mixins.scss b/src/components/date_picker/super_date_picker/_mixins.scss index 4f5a7a5e23a..880219b72dd 100644 --- a/src/components/date_picker/super_date_picker/_mixins.scss +++ b/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; diff --git a/src/components/filter_group/_filter_button.scss b/src/components/filter_group/_filter_button.scss index 67c5493d936..048779df9cf 100644 --- a/src/components/filter_group/_filter_button.scss +++ b/src/components/filter_group/_filter_button.scss @@ -1,5 +1,3 @@ -@import '../form/variables'; - .euiFilterButton { background-color: $euiFormBackgroundColor; height: $euiFormControlHeight; diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss index 9dcfd881147..d3276480919 100644 --- a/src/components/filter_group/_filter_group.scss +++ b/src/components/filter_group/_filter_group.scss @@ -1,5 +1,3 @@ -@import '../form/variables'; - .euiFilterGroup { display: inline-flex; max-width: 100%; diff --git a/src/components/filter_group/_index.scss b/src/components/filter_group/_index.scss index e1dfb179ffc..0b04e4b76d2 100644 --- a/src/components/filter_group/_index.scss +++ b/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'; diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss index cda11c8a26b..def8aec630b 100644 --- a/src/components/flyout/_flyout.scss +++ b/src/components/flyout/_flyout.scss @@ -1,5 +1,3 @@ -@import '../form/variables'; - .euiFlyout { border-left: $euiBorderThin; // The mixin augments the above diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index e8f451f6b3f..ae9fcb9d333 100644 --- a/src/components/form/_index.scss +++ b/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'; diff --git a/src/components/form/checkbox/_index.scss b/src/components/form/checkbox/_index.scss index fabdbeba957..295196b2459 100644 --- a/src/components/form/checkbox/_index.scss +++ b/src/components/form/checkbox/_index.scss @@ -1,3 +1,2 @@ -@import '../variables'; @import 'checkbox'; @import 'checkbox_group'; diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss index 3f109a57fcb..b81096ac73a 100644 --- a/src/components/form/file_picker/_file_picker.scss +++ b/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 */ diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index 8e05136350a..0cfb6abd0dc 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/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); diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 266c5567259..6f2430b6590 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/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; diff --git a/src/components/form/form_control_layout/_index.scss b/src/components/form/form_control_layout/_index.scss index a3a22b9f3a7..338d1559451 100644 --- a/src/components/form/form_control_layout/_index.scss +++ b/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'; diff --git a/src/components/form/radio/_index.scss b/src/components/form/radio/_index.scss index 451c24d2413..4222afbd56a 100644 --- a/src/components/form/radio/_index.scss +++ b/src/components/form/radio/_index.scss @@ -1,3 +1,2 @@ -@import '../variables'; @import 'radio'; @import 'radio_group'; diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss index b8d4204e060..646884ae223 100644 --- a/src/components/form/range/_index.scss +++ b/src/components/form/range/_index.scss @@ -1,6 +1,3 @@ -@import 'variables'; -@import 'mixins'; - @import 'range'; @import 'range_highlight'; @import 'range_input'; diff --git a/src/components/form/switch/_index.scss b/src/components/form/switch/_index.scss index 1eeda2c8b2a..64305c98ad7 100644 --- a/src/components/form/switch/_index.scss +++ b/src/components/form/switch/_index.scss @@ -1,2 +1 @@ -@import '../variables'; @import 'switch'; diff --git a/src/components/modal/_index.scss b/src/components/modal/_index.scss index dcb70b1a9bd..0da80648382 100644 --- a/src/components/modal/_index.scss +++ b/src/components/modal/_index.scss @@ -1,3 +1 @@ -@import '../form/variables'; - @import 'modal'; diff --git a/src/components/search_bar/_search_bar.scss b/src/components/search_bar/_search_bar.scss index b6edbbbbd2f..81d1f919b14 100644 --- a/src/components/search_bar/_search_bar.scss +++ b/src/components/search_bar/_search_bar.scss @@ -1,5 +1,3 @@ -@import '../form/variables'; - .euiSearchBar__searchHolder { min-width: $euiFormMaxWidth / 2; } diff --git a/src/components/toggle/_toggle.scss b/src/components/toggle/_toggle.scss index c8a6fdcbc36..ae37badaa33 100644 --- a/src/components/toggle/_toggle.scss +++ b/src/components/toggle/_toggle.scss @@ -1,5 +1,3 @@ -@import '../form/switch/mixins'; - .euiToggle { position: relative; diff --git a/src/components/form/_mixins.scss b/src/global_styling/mixins/_form.scss similarity index 98% rename from src/components/form/_mixins.scss rename to src/global_styling/mixins/_form.scss index cb8be957403..b1050c0c50f 100644 --- a/src/components/form/_mixins.scss +++ b/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 diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/global_styling/mixins/_form_control_layout.scss similarity index 98% rename from src/components/form/form_control_layout/_mixins.scss rename to src/global_styling/mixins/_form_control_layout.scss index bd4ab8c56e5..d12249c5129 100644 --- a/src/components/form/form_control_layout/_mixins.scss +++ b/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 } -} \ No newline at end of file +} diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index a9391de6865..8708b47d8ec 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -5,7 +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'; diff --git a/src/components/form/range/_mixins.scss b/src/global_styling/mixins/_range.scss similarity index 100% rename from src/components/form/range/_mixins.scss rename to src/global_styling/mixins/_range.scss diff --git a/src/components/form/switch/_mixins.scss b/src/global_styling/mixins/_switch.scss similarity index 100% rename from src/components/form/switch/_mixins.scss rename to src/global_styling/mixins/_switch.scss diff --git a/src/components/form/_variables.scss b/src/global_styling/variables/_form.scss similarity index 100% rename from src/components/form/_variables.scss rename to src/global_styling/variables/_form.scss diff --git a/src/components/form/form_control_layout/_variables.scss b/src/global_styling/variables/_form_control_layout.scss similarity index 93% rename from src/components/form/form_control_layout/_variables.scss rename to src/global_styling/variables/_form_control_layout.scss index 75232099a40..c251586e5fe 100644 --- a/src/components/form/form_control_layout/_variables.scss +++ b/src/global_styling/variables/_form_control_layout.scss @@ -1,4 +1,4 @@ -@import '../variables'; +@import 'form'; /** * 1. Account for inner box-shadow style border diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index 7db0557def1..1fddc6f7cd3 100644 --- a/src/global_styling/variables/_index.scss +++ b/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'; diff --git a/src/components/form/range/_variables.scss b/src/global_styling/variables/_range.scss similarity index 100% rename from src/components/form/range/_variables.scss rename to src/global_styling/variables/_range.scss From b122095bdcc41be863606f41e5e76ebb00c199fa Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 26 Nov 2019 16:15:01 -0600 Subject: [PATCH 06/22] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ab64898482..04177da39de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506)) - Added `disabled` prop to the `EuiCheckboxGroup` definition ([#2545](https://github.com/elastic/eui/pull/2545)) +- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551)) ## [`16.0.1`](https://github.com/elastic/eui/tree/v16.0.1) From 6de15c54d7b8920e819a407fd98a1dafe2740e7b Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 13:44:46 -0600 Subject: [PATCH 07/22] Move changelog item to "breaking changes" heading --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 44d329f54e6..7b9ef74fd80 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ - Fixed `EuiSwitch` clicking on disabled label ([#2575](https://github.com/elastic/eui/pull/2575)) +**Breaking Changes** + +- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551)) + ## [`16.1.0`](https://github.com/elastic/eui/tree/v16.1.0) - Updated compressed styles for `EuiButtonGroup` to include a background color ([#2568](https://github.com/elastic/eui/pull/2568)) @@ -18,7 +22,6 @@ - Added `EuiAspectRatio` component that allows for responsively resizing embeds ([#2535](https://github.com/elastic/eui/pull/2535)) - Added `display` and `titleSize` props to `EuiCard` ([#2566](https://github.com/elastic/eui/pull/2566)) - Added `accessibility` glyph to `EuiIcon` ([#2566](https://github.com/elastic/eui/pull/2566)) -- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551)) **Bug fixes** From 7d33eb0eccf90ca51d3834010a55fed4a761403b Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 13:48:17 -0600 Subject: [PATCH 08/22] Move buttons variables to global_styling --- src/components/button/_index.scss | 2 -- .../_variables.scss => global_styling/variables/_buttons.scss} | 0 src/global_styling/variables/_index.scss | 1 + 3 files changed, 1 insertion(+), 2 deletions(-) rename src/{components/button/_variables.scss => global_styling/variables/_buttons.scss} (100%) diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index 61cc486a508..2815f912feb 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -1,5 +1,3 @@ -@import 'variables'; - @import 'button'; @import 'button_empty/index'; @import 'button_icon/index'; diff --git a/src/components/button/_variables.scss b/src/global_styling/variables/_buttons.scss similarity index 100% rename from src/components/button/_variables.scss rename to src/global_styling/variables/_buttons.scss diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index 1fddc6f7cd3..a903bcbbfe8 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -15,6 +15,7 @@ @import 'shadows'; @import 'z_index'; +@import 'buttons'; @import 'form'; @import 'form_control_layout'; @import 'range'; From f019ba1317e95d2c5de5639701342a267bbb3bb9 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 13:48:17 -0600 Subject: [PATCH 09/22] Move buttons variables to global_styling --- src/components/badge/_badge.scss | 2 -- src/components/button/_index.scss | 2 -- src/components/card/checkable_card/_checkable_card.scss | 2 -- src/components/control_bar/_index.scss | 1 - src/components/facet/_index.scss | 2 -- .../_variables.scss => global_styling/variables/_buttons.scss} | 0 src/global_styling/variables/_index.scss | 1 + 7 files changed, 1 insertion(+), 9 deletions(-) rename src/{components/button/_variables.scss => global_styling/variables/_buttons.scss} (100%) diff --git a/src/components/badge/_badge.scss b/src/components/badge/_badge.scss index fdcf3087485..e6f8694bf77 100644 --- a/src/components/badge/_badge.scss +++ b/src/components/badge/_badge.scss @@ -1,5 +1,3 @@ -@import '../button/variables'; - /** * 1. Accounts for the border */ diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss index 61cc486a508..2815f912feb 100644 --- a/src/components/button/_index.scss +++ b/src/components/button/_index.scss @@ -1,5 +1,3 @@ -@import 'variables'; - @import 'button'; @import 'button_empty/index'; @import 'button_icon/index'; diff --git a/src/components/card/checkable_card/_checkable_card.scss b/src/components/card/checkable_card/_checkable_card.scss index 92b77c49e63..e733c71b6de 100644 --- a/src/components/card/checkable_card/_checkable_card.scss +++ b/src/components/card/checkable_card/_checkable_card.scss @@ -1,5 +1,3 @@ -@import '../../panel/mixins'; - @include euiPanel('euiCheckableCard'); .euiCheckableCard { diff --git a/src/components/control_bar/_index.scss b/src/components/control_bar/_index.scss index 0bb54db60a0..645546e59af 100644 --- a/src/components/control_bar/_index.scss +++ b/src/components/control_bar/_index.scss @@ -1,5 +1,4 @@ @import '../header/variables'; -@import '../button/variables'; @import '../nav_drawer/variables'; @import 'variables'; @import 'control_bar'; diff --git a/src/components/facet/_index.scss b/src/components/facet/_index.scss index 79513e3b216..549cc7cc3db 100644 --- a/src/components/facet/_index.scss +++ b/src/components/facet/_index.scss @@ -1,4 +1,2 @@ -@import '../button/variables'; - @import 'facet_button'; @import 'facet_group'; diff --git a/src/components/button/_variables.scss b/src/global_styling/variables/_buttons.scss similarity index 100% rename from src/components/button/_variables.scss rename to src/global_styling/variables/_buttons.scss diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index 1fddc6f7cd3..a903bcbbfe8 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -15,6 +15,7 @@ @import 'shadows'; @import 'z_index'; +@import 'buttons'; @import 'form'; @import 'form_control_layout'; @import 'range'; From bd7784845df85cb0eda99a53fd27193655bf52cd Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 13:52:42 -0600 Subject: [PATCH 10/22] Consolidate form variables files --- src/global_styling/mixins/_form.scss | 1 - src/global_styling/variables/_form.scss | 5 +++++ src/global_styling/variables/_form_control_layout.scss | 9 --------- src/global_styling/variables/_index.scss | 1 - 4 files changed, 5 insertions(+), 11 deletions(-) delete mode 100644 src/global_styling/variables/_form_control_layout.scss diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index b1050c0c50f..3390874338a 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -1,5 +1,4 @@ @import '../variables/form'; -@import '../variables/form_control_layout'; @import 'form_control_layout'; @mixin euiPlaceholderPerBrowser { diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss index f71551ee16d..670b63f8e2a 100644 --- a/src/global_styling/variables/_form.scss +++ b/src/global_styling/variables/_form.scss @@ -36,3 +36,8 @@ $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default; $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default; $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default; + +// Control Layout +$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px; /* 1 */ +$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px; /* 1 */ +$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2; diff --git a/src/global_styling/variables/_form_control_layout.scss b/src/global_styling/variables/_form_control_layout.scss deleted file mode 100644 index c251586e5fe..00000000000 --- a/src/global_styling/variables/_form_control_layout.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'form'; - -/** - * 1. Account for inner box-shadow style border - */ - -$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px; /* 1 */ -$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px; /* 1 */ -$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2; diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index a903bcbbfe8..539e3720cbf 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -17,5 +17,4 @@ @import 'buttons'; @import 'form'; -@import 'form_control_layout'; @import 'range'; From d86676d5d56823edd5c4c84bb358d1c70e6c2a7d Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 13:56:36 -0600 Subject: [PATCH 11/22] Remove form variable imports in form mixin file --- src/global_styling/mixins/_form.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 3390874338a..33d6724bacd 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -1,4 +1,3 @@ -@import '../variables/form'; @import 'form_control_layout'; @mixin euiPlaceholderPerBrowser { From 6fe5da0a1e4e968ba4b0299b9028730d0c57873f Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 14:35:06 -0600 Subject: [PATCH 12/22] Move beta_badge mixins to global_styling --- src/components/badge/beta_badge/_index.scss | 1 - src/components/card/_card.scss | 2 -- src/components/panel/_panel.scss | 2 -- .../_mixins.scss => global_styling/mixins/_beta_badge.scss} | 0 src/global_styling/mixins/_index.scss | 1 + 5 files changed, 1 insertion(+), 5 deletions(-) rename src/{components/badge/beta_badge/_mixins.scss => global_styling/mixins/_beta_badge.scss} (100%) diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss index 166e3b0878c..10c53901b29 100644 --- a/src/components/badge/beta_badge/_index.scss +++ b/src/components/badge/beta_badge/_index.scss @@ -1,2 +1 @@ -@import 'mixins'; @import 'beta_badge'; diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 151a5402c8d..7da29a191d9 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -1,5 +1,3 @@ -@import '../badge/beta_badge/mixins'; - // Start with a base of EuiPanel styles @include euiPanel($selector: 'euiCard'); diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index 1de70adbd80..12f4dfaf056 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -1,5 +1,3 @@ -@import '../badge/beta_badge/mixins'; - // Export basic class & modifiers @include euiPanel($selector: 'euiPanel'); diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/global_styling/mixins/_beta_badge.scss similarity index 100% rename from src/components/badge/beta_badge/_mixins.scss rename to src/global_styling/mixins/_beta_badge.scss diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 8708b47d8ec..7c173e8d947 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -6,6 +6,7 @@ @import 'states'; @import 'icons'; +@import 'beta_badge'; @import 'button'; @import 'form'; @import 'form_control_layout'; From 3eaf91aaa255850eeeec87e0ad14aa214cc4f307 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 14:41:42 -0600 Subject: [PATCH 13/22] Move tooltip variables and mixins to global_styling --- src/components/form/range/_range_tooltip.scss | 2 -- src/components/tool_tip/_index.scss | 3 --- src/global_styling/mixins/_index.scss | 1 + .../_mixins.scss => global_styling/mixins/_tool_tip.scss} | 0 src/global_styling/variables/_index.scss | 1 + .../variables/_tool_tip.scss} | 0 6 files changed, 2 insertions(+), 5 deletions(-) rename src/{components/tool_tip/_mixins.scss => global_styling/mixins/_tool_tip.scss} (100%) rename src/{components/tool_tip/_variables.scss => global_styling/variables/_tool_tip.scss} (100%) diff --git a/src/components/form/range/_range_tooltip.scss b/src/components/form/range/_range_tooltip.scss index 77cab4b0ea3..5c9059bc319 100644 --- a/src/components/form/range/_range_tooltip.scss +++ b/src/components/form/range/_range_tooltip.scss @@ -1,5 +1,3 @@ -@import '../../tool_tip/variables'; - .euiRangeTooltip { // Keeps tooltip (value) aligned to percentage of actual slider display: block; diff --git a/src/components/tool_tip/_index.scss b/src/components/tool_tip/_index.scss index 006fba1667d..3e998fcbf09 100644 --- a/src/components/tool_tip/_index.scss +++ b/src/components/tool_tip/_index.scss @@ -1,4 +1 @@ -@import 'variables'; -@import 'mixins'; - @import 'tool_tip'; diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 7c173e8d947..c7df7901360 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -15,3 +15,4 @@ @import 'popover'; @import 'range'; @import 'switch'; +@import 'tool_tip'; diff --git a/src/components/tool_tip/_mixins.scss b/src/global_styling/mixins/_tool_tip.scss similarity index 100% rename from src/components/tool_tip/_mixins.scss rename to src/global_styling/mixins/_tool_tip.scss diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss index 539e3720cbf..44dcfa52231 100644 --- a/src/global_styling/variables/_index.scss +++ b/src/global_styling/variables/_index.scss @@ -18,3 +18,4 @@ @import 'buttons'; @import 'form'; @import 'range'; +@import 'tool_tip'; diff --git a/src/components/tool_tip/_variables.scss b/src/global_styling/variables/_tool_tip.scss similarity index 100% rename from src/components/tool_tip/_variables.scss rename to src/global_styling/variables/_tool_tip.scss From 7c29ff6037913ac8dd3720d0a4b85ea91cd4c542 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 14:58:24 -0600 Subject: [PATCH 14/22] Refactor panel mixin to require entire selector --- src/components/card/_card.scss | 2 +- .../card/checkable_card/_checkable_card.scss | 2 +- src/components/drag_and_drop/_droppable.scss | 2 +- src/components/panel/_panel.scss | 2 +- src/components/table/_responsive.scss | 2 +- src/global_styling/mixins/_panel.scss | 12 ++++++------ 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 7da29a191d9..3987ed03d60 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -1,5 +1,5 @@ // Start with a base of EuiPanel styles -@include euiPanel($selector: 'euiCard'); +@include euiPanel($selector: '.euiCard'); /** * 1. Footer is always at the bottom. diff --git a/src/components/card/checkable_card/_checkable_card.scss b/src/components/card/checkable_card/_checkable_card.scss index e733c71b6de..e970c9a7320 100644 --- a/src/components/card/checkable_card/_checkable_card.scss +++ b/src/components/card/checkable_card/_checkable_card.scss @@ -1,4 +1,4 @@ -@include euiPanel('euiCheckableCard'); +@include euiPanel($selector: '.euiCheckableCard'); .euiCheckableCard { transition: border-color $euiAnimSpeedNormal ease-in; diff --git a/src/components/drag_and_drop/_droppable.scss b/src/components/drag_and_drop/_droppable.scss index 7dc5f861cd5..604e23a0144 100644 --- a/src/components/drag_and_drop/_droppable.scss +++ b/src/components/drag_and_drop/_droppable.scss @@ -18,7 +18,7 @@ } } -@include euiPanel('euiDroppable--withPanel'); +@include euiPanel($selector: '.euiDroppable--withPanel'); .euiDroppable--noGrow { flex-grow: 0; diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index 12f4dfaf056..80f9c3aec97 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -1,5 +1,5 @@ // Export basic class & modifiers -@include euiPanel($selector: 'euiPanel'); +@include euiPanel($selector: '.euiPanel'); .euiPanel { @include hasBetaBadge($selector: 'euiPanel'); diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index 7a49fa18f8b..864627523fc 100644 --- a/src/components/table/_responsive.scss +++ b/src/components/table/_responsive.scss @@ -31,7 +31,7 @@ } // Make each row a Panel - @include euiPanel($selector: 'euiTableRow'); + @include euiPanel($selector: '.euiTableRow'); .euiTableRowCell__mobileHeader { // Always truncate diff --git a/src/global_styling/mixins/_panel.scss b/src/global_styling/mixins/_panel.scss index 011b3574e36..0382d1dae15 100644 --- a/src/global_styling/mixins/_panel.scss +++ b/src/global_styling/mixins/_panel.scss @@ -7,7 +7,7 @@ @if variable-exists(selector) == false { @error 'A $selector must be provided to @mixin euiPanel().'; } @else { - .#{$selector} { + #{$selector} { @include euiBottomShadowSmall; background-color: $euiColorEmptyShade; @@ -15,11 +15,11 @@ border-radius: $euiBorderRadius; flex-grow: 1; - &.#{$selector}--flexGrowZero { + &#{$selector}--flexGrowZero { flex-grow: 0; } - &.#{$selector}--isClickable { + &#{$selector}--isClickable { // in case of button wrapper which inherently is inline-block and no width display: block; width: 100%; @@ -36,7 +36,7 @@ } } - &.#{$selector}--shadow { + &#{$selector}--shadow { @include euiBottomShadowMedium; @if (lightness($euiTextColor) < 50) { @@ -46,8 +46,8 @@ border-bottom-color: $euiBorderColor; } - &.#{$selector}--isClickable:hover, - &.#{$selector}--isClickable:focus { + &#{$selector}--isClickable:hover, + &#{$selector}--isClickable:focus { @include euiBottomShadow($color: $euiShadowColor, $opacity: .2); } } From 84e0c7ea58e67df15ed7a02b326d2f3f95a72dd8 Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 14:59:33 -0600 Subject: [PATCH 15/22] Add note to changelog about panel mixin selector --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b9ef74fd80..dcdb5a26215 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ **Breaking Changes** - Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551)) +- Rework panel mixin to require the entirety of a selector (i.e. require the '.' in addition to the string) ([#2551](https://github.com/elastic/eui/pull/2551)) ## [`16.1.0`](https://github.com/elastic/eui/tree/v16.1.0) From 6c75e790b2771accebdcc080d89331f048bd44bd Mon Sep 17 00:00:00 2001 From: John Barrier Wilson Date: Tue, 3 Dec 2019 15:01:47 -0600 Subject: [PATCH 16/22] Remove $euiPanelBorderColor as it was not used --- src/components/panel/_variables.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/panel/_variables.scss b/src/components/panel/_variables.scss index e03fdca2f5c..d31b8b8a473 100644 --- a/src/components/panel/_variables.scss +++ b/src/components/panel/_variables.scss @@ -9,5 +9,3 @@ $euiPanelPaddingModifiers: ( 'paddingMedium': $euiSize, 'paddingLarge': $euiSizeL ) !default; - -$euiPanelBorderColor: tintOrShade($euiShadowColor, 40%, 0%) !default; // match shadow From 4c79b40b0bf70681bd7e6ed12a58d7fc8113c646 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 3 Dec 2019 18:50:36 -0500 Subject: [PATCH 17/22] Renaming mixin `fasBetaBadge` to `euiHasBetaBadge` and removing the `.` portion of the selector --- src/components/card/_card.scss | 8 ++++---- src/components/panel/_panel.scss | 7 ++----- src/global_styling/mixins/_beta_badge.scss | 10 +++++----- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 3987ed03d60..07f6b916ec4 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -13,10 +13,7 @@ display: flex; flex-direction: column; padding: $euiCardSpacing; - min-height: 1px; /* 2 */ - - // This creates a bunch of sub selectors for the beta badge - @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations + min-height: 1px; /* 2 */// sass-lint:disable-line mixins-before-declarations &.euiCard-isDisabled { cursor: not-allowed; // duplicate property due to Chrome bug @@ -104,6 +101,9 @@ } } +// This creates a bunch of sub selectors for the beta badge +@include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing); + // Selectable cards don't work well without a border .euiCard--plain:not(.euiCard--isSelectable) { border: none; diff --git a/src/components/panel/_panel.scss b/src/components/panel/_panel.scss index 80f9c3aec97..4abb811f9bb 100644 --- a/src/components/panel/_panel.scss +++ b/src/components/panel/_panel.scss @@ -1,13 +1,10 @@ // Export basic class & modifiers @include euiPanel($selector: '.euiPanel'); - -.euiPanel { - @include hasBetaBadge($selector: 'euiPanel'); -} +@include euiHasBetaBadge($selector: '.euiPanel'); // Specific @each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPanel.euiPanel--#{$modifier} { + .euiPanel--#{$modifier} { padding: $amount; // Overwrite @hasBetaBadge max-width depending upon padding diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss index 18d4891f08c..355fb7359b1 100644 --- a/src/global_styling/mixins/_beta_badge.scss +++ b/src/global_styling/mixins/_beta_badge.scss @@ -4,12 +4,12 @@ * 2. Fix for IE to ensure badges are visible outside of a