From e4931a8403354300dcfc3e88de770de1e1b52137 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 30 Jan 2020 15:21:22 -0500
Subject: [PATCH] [SASS] Change output style comments to non-rendered comments
 in invisibles files

---
 src-docs/src/views/icon/icon_types.js      |  3 ++-
 src/global_styling/mixins/_beta_badge.scss | 12 +++++-------
 src/global_styling/mixins/_button.scss     | 13 ++++++-------
 src/global_styling/mixins/_form.scss       | 19 ++++++++-----------
 src/global_styling/mixins/_panel.scss      |  5 -----
 5 files changed, 21 insertions(+), 31 deletions(-)

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 () => (
   <div>
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 <button> 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 <button> 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().';