[SASS] Change output style comments to non-rendered comments in invis…

…ibles files

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>

src/global_styling/mixins/_beta_badge.scss

@@ -1,26 +1,24 @@
 
-/**
- * 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;
       top: ($euiSizeL / -2);
       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 {

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,16 +50,16 @@
     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;
     justify-content: center;
     align-items: center;
 
     > * + * {
-      margin-left: $euiSizeS; /* 1 */
+      margin-left: $euiSizeS; // 1
     }
   }
 }

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);
     }
 

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