diff --git a/src-docs/src/views/icon/icon_types.js b/src-docs/src/views/icon/icon_types.js
index afb531afd67..9b457de1c52 100644
--- a/src-docs/src/views/icon/icon_types.js
+++ b/src-docs/src/views/icon/icon_types.js
@@ -12,7 +12,8 @@ import {
EuiButton,
} from '../../../../src/components';
-import reactSvg from '../../images/custom.svg';
+// import reactSvg from '../../images/custom.svg';
+import reactSvg from '../../../../src/components/icon/assets/alert.svg';
export default () => (
diff --git a/src/global_styling/mixins/_beta_badge.scss b/src/global_styling/mixins/_beta_badge.scss
index 355fb7359b1..538bbf24047 100644
--- a/src/global_styling/mixins/_beta_badge.scss
+++ b/src/global_styling/mixins/_beta_badge.scss
@@ -1,13 +1,11 @@
-/**
- * 1. Extend beta badges to at least 40% of the container's width
- * 2. Fix for IE to ensure badges are visible outside of a tag
- */
+// 1. Extend beta badges to at least 40% of the container's width
+// 2. Fix for IE to ensure badges are visible outside of a tag
@mixin euiHasBetaBadge($selector, $spacing: $euiSize) {
#{$selector}--hasBetaBadge {
position: relative;
- overflow: visible; /* 2 */
+ overflow: visible; // 2
#{$selector}__betaBadgeWrapper {
position: absolute;
@@ -15,12 +13,12 @@
left: 50%;
transform: translateX(-50%);
z-index: 3; // get above abs positioned image
- min-width: 40%; /* 1 */
+ min-width: 40%; // 1
max-width: calc(100% - #{($spacing * 2)});
.euiToolTipAnchor,
#{$selector}__betaBadge {
- width: 100%; /* 1 */
+ width: 100%; // 1
}
#{$selector}__betaBadge {
diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
index d1613bee342..41593f84177 100644
--- a/src/global_styling/mixins/_button.scss
+++ b/src/global_styling/mixins/_button.scss
@@ -33,10 +33,9 @@
}
}
-/**
- * 1. Apply margin to all but last item in the flex.
- * 2. Margin gets flipped because of the row-reverse.
- */
+// 1. Apply margin to all but last item in the flex.
+// 2. Margin gets flipped because of the row-reverse.
+
@mixin euiButtonContent($isReverse: false) {
height: 100%;
width: 100%;
@@ -51,8 +50,8 @@
flex-direction: row-reverse;
> * + * {
- margin-left: 0; /* 1 */
- margin-right: $euiSizeS; /* 1 */
+ margin-left: 0; // 1, 2
+ margin-right: $euiSizeS; // 1, 2
}
} @else {
display: flex;
@@ -60,7 +59,7 @@
align-items: center;
> * + * {
- margin-left: $euiSizeS; /* 1 */
+ margin-left: $euiSizeS; // 1
}
}
}
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index 56b0e87bab1..f0beb6b2012 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/src/global_styling/mixins/_form.scss
@@ -65,10 +65,6 @@
);
}
-/**
- * 3. Must supply both values to background-size or some browsers apply the single value to both directions
- */
-
@mixin euiFormControlText {
@include euiFont;
font-size: $euiFontSizeS;
@@ -129,11 +125,13 @@
}
}
+// 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%; /* 3 */
+ background-size: 0% 100%; // 1
@if ($borderOnly) {
box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -161,7 +159,7 @@
// sass-lint:disable-block indentation, empty-args
background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
background-image: euiFormControlGradient();
- background-size: 100% 100%; /* 3 */
+ background-size: 100% 100%; // 1
@if ($borderOnly) {
box-shadow: inset 0 0 0 1px $euiFormBorderColor;
@@ -198,9 +196,8 @@
box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
}
-/**
- * 4. Override invalid state with focus state.
- */
+
+// 2. Override invalid state with focus state.
@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
@include euiFormControlSize($includeAlternates: $includeSizes);
@@ -248,11 +245,11 @@
border-radius: $euiFormControlCompressedBorderRadius;
@if ($includeStates) {
- &:invalid { /* 4 */
+ &:invalid { // 2
@include euiFormControlInvalidStyle;
}
- &:focus { /* 4 */
+ &:focus { // 2
@include euiFormControlFocusStyle($borderOnly: true);
}
diff --git a/src/global_styling/mixins/_panel.scss b/src/global_styling/mixins/_panel.scss
index 0382d1dae15..9ba878ed4ab 100644
--- a/src/global_styling/mixins/_panel.scss
+++ b/src/global_styling/mixins/_panel.scss
@@ -1,8 +1,3 @@
-/**
- * Mixin for use in:
- * - EuiCard
- * - EuiPageContent
-*/
@mixin euiPanel($selector) {
@if variable-exists(selector) == false {
@error 'A $selector must be provided to @mixin euiPanel().';