@elastic/eui 70.4.0 → 71.1.0

package/src/global_styling/mixins/_form.scss

@@ -55,7 +55,7 @@
 }
 
 @mixin euiPlaceholderPerBrowser {
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   // Each prefix must be its own content block
   &::-webkit-input-placeholder { @content; opacity: 1; }
   &::-moz-placeholder { @content; opacity: 1; }
@@ -78,7 +78,6 @@
   font-size: $euiFontSizeS;
   color: $euiTextColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include euiPlaceholderPerBrowser {
     color: $euiFormControlPlaceholderText;
   }
@@ -143,7 +142,6 @@
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
-  // sass-lint:disable-block indentation
   background-color: $euiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
@@ -164,14 +162,13 @@
 
   // Fixes bug in Firefox where adding a transition to the background-color
   // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+  @supports (-moz-appearance: none) {
     // List *must* be in the same order as the above.
     transition-property: box-shadow, background-image, background-size;
   }
 }
 
 @mixin euiFormControlFocusStyle($borderOnly: false) {
-  // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
   background-size: 100% 100%; // 1
@@ -180,8 +177,7 @@
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
-    box-shadow:
-      inset 0 0 0 1px $euiFormBorderColor;
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   }
 }
 
@@ -191,7 +187,6 @@
 }
 
 @mixin euiFormControlDisabledTextStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   color: $euiFormControlDisabledColor;
   -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
 }
@@ -202,14 +197,12 @@
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include euiPlaceholderPerBrowser {
     color: $euiFormControlDisabledColor;
   }
 }
 
 @mixin euiFormControlReadOnlyStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   cursor: default;
   color: $euiTextColor;
   -webkit-text-fill-color: $euiTextColor; // Required for Safari
@@ -219,7 +212,6 @@
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 }
 
-
 // 2. Override invalid state with focus state.
 
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
@@ -249,7 +241,6 @@
     }
 
     // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
     &:-webkit-autofill {
       -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
 
@@ -257,7 +248,6 @@
         color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
       }
     }
-
   }
 
   @if ($includeSizes) {
@@ -266,7 +256,7 @@
     }
 
     &--inGroup {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       box-shadow: none !important;
       border-radius: 0;
     }
@@ -313,12 +303,11 @@
   } @else if $type == 'square' {
     border-radius: $euiCheckboxBorderRadius;
   }
-  // sass-lint:disable-block indentation
+
   transition: background-color $euiAnimSpeedFast ease-in,
-              border-color $euiAnimSpeedFast ease-in;
+              border-color $euiAnimSpeedFast ease-in; // stylelint-disable-line indentation
 }
 
-
 @mixin euiCustomControlSelected($type: null) {
   border-color: $euiColorPrimary;
   background-color: $euiColorPrimary;
@@ -363,7 +352,7 @@
 
 @mixin euiHiddenSelectableInput {
   position: absolute;
-  // sass-lint:disable no-important
+  // stylelint-disable-next-line declaration-no-important
   opacity: 0 !important; // Make sure it's still hidden when :disabled
   width: 100%;
   height: 100%;

package/src/global_styling/mixins/_header.scss

@@ -1,9 +1,9 @@
 @import '../variables/header';
 
 @mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
-  // The `&` allows for grouping inside another specific body class.
+  // The `@at-root #{&}` allows for grouping alongside another specific body class.
   // When not applied inside of another selector, it simply renders with the single class
-  &.euiBody--headerIsFixed {
+  @at-root #{&}.euiBody--headerIsFixed {
     padding-top: $headerHeight;
 
     // When the EuiHeader is fixed, we need to account for it in the position of the flyout

package/src/global_styling/mixins/_helpers.scss

@@ -4,14 +4,13 @@
 @mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support
 
   @if ($size == 'thin') {
     scrollbar-width: thin;
   }
 
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   &::-webkit-scrollbar {
     width: $euiScrollBar;
     height: $euiScrollBar;

package/src/global_styling/mixins/_icons.scss

@@ -1,6 +1,6 @@
 // For using icons as background images (data-uri)
 @mixin euiIconBackground($type, $color: $euiColorEmptyShade) {
-  // sass-lint:disable-block quotes
+  // stylelint-disable string-quotes
   @if variable-exists(type) == false {
     @error 'A $type:string must be provided to @mixin euiIconBackground().';
   } @else if type-of($color) != color {

package/src/global_styling/mixins/_range.scss

@@ -1,10 +1,19 @@
-// Prefixes are unique in this file
-// sass-lint:disable no-vendor-prefixes
+/*
+The CSS in JS version of this file lives in:
+  - src/components/form/range/range.styles.ts
 
-@mixin euiRangeTrackSize {
+The following files still use the Sass version:
+  - src/themes/amsterdam/overrides/_color_stops.scss
+  - src/themes/amsterdam/overrides/_hue.scss
+*/
+
+@mixin euiRangeTrackSize($compressed: false) {
   height: $euiRangeTrackHeight;
-  transition: all $euiAnimSpeedNormal ease-in;
   width: $euiRangeTrackWidth;
+
+  @if ($compressed) {
+    height: $euiRangeTrackCompressedHeight;
+  }
 }
 
 @mixin euiRangeTrackPerBrowser {
@@ -14,16 +23,40 @@
   &::-ms-fill-upper { @content; }
 }
 
+@mixin euiRangeThumbBorder {
+  border: 2px solid $euiRangeThumbBorderColor;
+}
+
+@mixin euiRangeThumbBoxShadow {
+  box-shadow:
+    0 0 0 1px $euiRangeThumbBorderColor,
+    0 2px 2px -1px rgba($euiShadowColor, .2),
+    0 1px 5px -2px rgba($euiShadowColor, .2);
+}
+
+@mixin euiRangeThumbFocusBoxShadow {
+  box-shadow: 0 0 0 2px $euiFocusRingColor;
+}
+
 @mixin euiRangeThumbStyle {
+  @include euiRangeThumbBoxShadow;
+  @include euiRangeThumbBorder;
   cursor: pointer;
-  border-color: $euiRangeThumbBorderColor;
+  background-color: $euiRangeThumbBackgroundColor;
   padding: 0;
   height: $euiRangeThumbHeight;
   width: $euiRangeThumbWidth;
+  box-sizing: border-box;  // required for firefox or the border makes the width and height to increase
 }
 
 @mixin euiRangeThumbPerBrowser {
   &::-webkit-slider-thumb { @content; }
   &::-moz-range-thumb { @content; }
   &::-ms-thumb { @content; }
-}
+}
+
+@mixin euiRangeThumbFocus {
+  @include euiRangeThumbBorder;
+  @include euiRangeThumbFocusBoxShadow;
+  background-color: $euiColorPrimary;
+}

package/src/global_styling/mixins/_responsive.scss

@@ -1,8 +1,3 @@
-// This file makes use of double quotes to format errors with nested single quotes
-// The indentation linting freaks out on comments above else statements and is disabled.
-
-// sass-lint:disable quotes, no-warn, indentation
-
 // A sem-complicated mixin for breakpoints, that takes any number of
 // named breakpoints that exists in $euiBreakpoints.
 
@@ -23,7 +18,7 @@
         @media only screen and (min-width: $minSize) {
           @content;
         }
-      // If it's not the last item, add a max-width
+        // If it's not the last item, add a max-width
       } @else {
 
         // Set the max size to the value of the next size (-1px as to not overlap)
@@ -34,14 +29,14 @@
           @media only screen and (max-width: $maxSize) {
             @content;
           }
-        // Otherwise it should have a min and max width
+          // Otherwise it should have a min and max width
         } @else {
           @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
             @content;
           }
         }
       }
-    // If it's not a known breakpoint, throw a warning
+      // If it's not a known breakpoint, throw a warning
     } @else {
       @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'";
     }

package/src/global_styling/mixins/_shadow.scss

@@ -1,8 +1,3 @@
-// This file uses RGBA literal values responsibly
-// This file uses off-pattern indentation to be more readable
-
-// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
-
 @function shadowOpacity($opacity) {
   @if (lightness($euiTextColor) < 50) {
     @return $opacity * 1;
@@ -76,15 +71,16 @@
     0 23px 35px rgba($color, shadowOpacity(.05));
 }
 
+// stylelint-disable color-named
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $euiScrollBarCornerThin * 1.25;
   $gradient: null;
   $gradientStart:
-  transparentize(red, .9) 0%,
-  transparentize(red, 0) $hideHeight;
+    transparentize(red, .9) 0%,
+    transparentize(red, 0) $hideHeight;
   $gradientEnd:
-  transparentize(red, 0) calc(100% - #{$hideHeight}),
-  transparentize(red, .9) 100%;
+    transparentize(red, 0) calc(100% - #{$hideHeight}),
+    transparentize(red, .9) 100%;
   @if ($side == 'both' or $side == 'start' or $side == 'end') {
     @if ($side == 'both') {
       $gradient: $gradientStart, $gradientEnd;

package/src/global_styling/mixins/_states.scss

@@ -1,10 +1,10 @@
 @mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important;
   } @else {
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important;
   }
 }

package/src/global_styling/mixins/_typography.scss

@@ -1,5 +1,5 @@
-// sass-lint:disable no-vendor-prefixes
-// sass-lint:disable no-important
+// stylelint-disable property-no-vendor-prefix
+// stylelint-disable declaration-no-important
 
 @function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
   @if ($sizingMethod == 'rem') {
@@ -130,16 +130,14 @@
   word-break: break-word;
 }
 
-// Text truncation
-//
-// Prevent text from wrapping onto multiple lines, and truncate with an
-// ellipsis.
-//
-// 1. Ensure that the node has a maximum width after which truncation can
-//    occur.
-
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can occur.
+ */
 @mixin euiTextTruncate {
-  // sass-lint:disable-block no-important
   max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -150,13 +148,13 @@
   font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data
 }
 
-
-// Text weight shifting
-//
-// When changing the font-weight based the state of the component
-// this mixin will ensure that the sizing is dependent on the boldest
-// weight so it doesn't shifter sibling content.
-
+/**
+ * Text weight shifting
+ *
+ * When changing the font-weight based the state of the component
+ * this mixin will ensure that the sizing is dependent on the boldest
+ * weight so it doesn't shifter sibling content.
+ */
 @mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') {
   &::after {
     display: block;
@@ -167,4 +165,3 @@
     visibility: hidden;
   }
 }
-

package/src/global_styling/variables/_colors_vis.scss

@@ -1,4 +1,5 @@
 // Visualization colors
+// stylelint-disable color-no-hex
 
 // Maps allow for easier JSON usage
 // Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
@@ -59,7 +60,6 @@ $euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic'
 $euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
 $euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
 
-// sass-lint:disable-block variable-name-format
 $euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
 $euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
 $euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;

package/src/global_styling/variables/_form.scss

@@ -59,15 +59,13 @@ $euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressed
 $euiRangeTrackColor: $euiColorLightShade !default;
 $euiRangeHighlightColor: $euiColorDarkShade !default;
 
-$euiRangeThumbRadius: 50% !default;
 $euiRangeThumbHeight: $euiSize !default;
 $euiRangeThumbWidth: $euiSize !default;
-
 $euiRangeThumbBorderColor: $euiColorEmptyShade !default;
-$euiRangeThumbBackgroundColor: $euiRangeHighlightColor !default;
+$euiRangeThumbBackgroundColor: $euiRangeHighlightColor;
 
 $euiRangeTrackWidth: 100% !default;
-$euiRangeTrackHeight: $euiSizeM / 2;
+$euiRangeTrackHeight: $euiSizeM / 2 !default;
 $euiRangeTrackCompressedHeight: $euiSizeXS;
 $euiRangeTrackBorderWidth: 0 !default;
 $euiRangeTrackBorderColor: $euiRangeTrackColor !default;

package/src/global_styling/variables/_typography.scss

@@ -20,7 +20,6 @@ $euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
 $euiLineHeight:     1.5 !default;
 $euiBodyLineHeight: 1 !default;
 
-
 // Normally functions are imported before variables in `_index.scss` files
 // But because they need to consume some typography variables they need to live here
 @function convertToRem($size) {
@@ -32,10 +31,9 @@ $euiBodyLineHeight: 1 !default;
 //     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
 //     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
+  @return convertToRem(($euiFontSize / 2) * $multiplier);
 }
 
-
 // Titles map
 // Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
 // The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves

package/src/themes/amsterdam/_colors_dark.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 
@@ -45,4 +47,3 @@ $euiLinkColor: $euiColorPrimaryText !default;
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;
-

package/src/themes/amsterdam/_colors_light.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -14,5 +14,5 @@
 @import '../../../../global_styling/mixins/loading';
 @import 'link';
 @import '../../../../global_styling/mixins/panel';
-@import 'range';
+@import '../../../../global_styling/mixins/range';
 @import '../../../../global_styling/mixins/tool_tip';

package/src/themes/amsterdam/global_styling/mixins/_link.scss

@@ -18,6 +18,6 @@
 
 @mixin euiLinkFocus {
   text-decoration: underline;
-  // sass-lint:disable-block no-misspelled-properties no-important
+  // stylelint-disable-next-line declaration-no-important
   text-decoration-thickness: $euiBorderWidthThick !important;
 }

package/src/themes/amsterdam/global_styling/mixins/_states.scss

@@ -63,4 +63,3 @@
     @include euiDisabledState($disabledColor);
   }
 }
-

package/src/themes/amsterdam/global_styling/mixins/_typography.scss

@@ -1,7 +1,6 @@
 // Font sizing extends, using rem mixin
 // All line-heights are aligned to baseline grid
-// sass-lint:disable no-vendor-prefixes
-
+// stylelint-disable property-no-vendor-prefix
 
 @function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
   @if ($sizingMethod == 'rem') {

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_days.scss

@@ -82,7 +82,6 @@
   &--in-range#{&}--disabled:not(.react-datepicker__day--selected):hover {
     $backgroundColor: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
 
-    // sass-lint:disable-block indentation
     box-shadow: -2px 0 $backgroundColor,
                  2px 0 $backgroundColor;
     border-radius: 0;

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss

@@ -23,7 +23,6 @@
 .react-datepicker__header__dropdown {
   padding: $euiDatePickerGap * 2;
   display: flex;
-  // sass-lint:disable-block no-misspelled-properties
   gap: $euiDatePickerGap;
   position: absolute;
   top: 0;

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_times.scss

@@ -43,7 +43,7 @@
   @include euiYScroll;
   padding: $euiSizeXS $euiSizeM;
   // Set the min-height with the following, but it should stretch to fit if the container is larger
-  height: 100px !important; // sass-lint:disable-line no-important
+  height: 100px !important;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -54,7 +54,6 @@
 // Mainly a copy/paste of .euiEmptyButton
 .react-datepicker__time-list-item {
   @include euiButton;
-  // sass-lint:disable-block no-important
   transform: none !important; /* 1 */
   animation: none !important; /* 1 */
   transition-timing-function: ease-in; /* 2 */
@@ -93,7 +92,7 @@
 
 // When in time only mode we make the dropdown look more like the combo box styling.
 .react-datepicker--time-only {
-  padding: 0 !important; // sass-lint:disable-line no-important
+  padding: 0 !important;
 
   .react-datepicker__time-container {
     background-color: transparent;
@@ -101,7 +100,7 @@
   }
 
   .react-datepicker__time-list {
-    height: 204px !important; // sass-lint:disable-line no-important
+    height: 204px !important;
   }
 
   .react-datepicker__time-list-item {

package/src/themes/amsterdam/global_styling/react_date_picker/_mixins.scss

@@ -1,6 +1,5 @@
 // Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows.
 // There is one for light and dark.
-// sass-lint:disable-block url-quotes
 @mixin datePickerCaret {
   background-position: center;
   @if (lightness($euiColorEmptyShade) > 50) {

package/src/themes/amsterdam/global_styling/variables/_typography.scss

@@ -19,7 +19,6 @@ $euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it
 $euiCodeFontWeightRegular: 400;
 $euiCodeFontWeightBold: 700;
 
-
 // Normally functions are imported before variables in `_index.scss` files
 // But because they need to consume some typography variables they need to live here
 @function convertToRem($size) {
@@ -28,7 +27,7 @@ $euiCodeFontWeightBold: 700;
 
 // Use 8px increments for base gridline
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiSize/2)*$multiplier);
+  @return convertToRem(($euiSize / 2) * $multiplier);
 }
 
 $euiTitles: (

package/src/themes/amsterdam/overrides/_color_stops.scss

@@ -1,6 +1,6 @@
 .euiColorStops__addTarget,
 .euiColorStops__addContainer {
-  z-index: 1;
+  z-index: 3; // same z-index as .euiRangeThumb
 }
 
 .euiColorStops__addTarget {
@@ -9,7 +9,6 @@
 }
 
 .euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  // sass-lint:disable-block no-important no-color-literals 
   @include euiRangeThumbBorder;
   @include euiRangeThumbBoxShadow;;
 
@@ -19,7 +18,7 @@
   }
 
   // in Chrome/FF/Edge we don't want to focus on click
-  &:focus:not(:focus-visible)  {
+  &:focus:not(:focus-visible) {
     @include euiRangeThumbBoxShadow;
     outline: none;
   }
@@ -37,9 +36,9 @@
     outline: none;
 
     .euiRangeTrack::after {
-      // sass-lint:disable-block no-color-literals
-      box-shadow: 0 0 0 1px rgba($euiColorEmptyShade, .8),
-      0 0 0 3px $euiFocusRingColor;
+      box-shadow:
+        0 0 0 1px rgba($euiColorEmptyShade, .8),
+        0 0 0 3px $euiFocusRingColor;
     }
   }
 

package/src/themes/amsterdam/overrides/_combo_box.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiComboBox {
   // Round the left border when we append a label
   &--appended {

package/src/themes/amsterdam/overrides/_form_control_layout.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiFormControlLayout--group {
   border-radius: $euiFormControlBorderRadius;
   background-color: $euiFormInputGroupLabelBackground;

package/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiFormControlLayoutDelimited {
   border-radius: $euiFormControlBorderRadius;
 
@@ -12,8 +15,7 @@
     overflow: hidden;
   }
 
-  .euiFormControlLayout__prepend +
-  .euiFormControlLayout__childrenWrapper {
+  .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
     &:last-child {
       border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
@@ -31,8 +33,7 @@
       overflow: hidden;
     }
 
-    .euiFormControlLayout__prepend +
-    .euiFormControlLayout__childrenWrapper {
+    .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
       &:last-child {
         border-radius: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
       }

package/src/themes/amsterdam/overrides/_header.scss

@@ -5,8 +5,8 @@
 }
 
 // Remove borders without deleting the prop just yet
-.euiHeaderSectionItem:after {
-  display: none !important; // sass-lint:disable-line no-important
+.euiHeaderSectionItem::after {
+  display: none !important; // stylelint-disable-line declaration-no-important
 }
 
 .euiHeaderLogo {