stylelint fix (opensearch-project#119)

Signed-off-by: Danila Gulderov <[email protected]>
gulderov · Aug 3, 2023 · d06bbaa · d06bbaa
1 parent 417dda4
commit d06bbaa
Showing 1 changed file with 56 additions and 18 deletions.
diff --git a/src/themes/oui-next/global_styling/mixins/_form.scss b/src/themes/oui-next/global_styling/mixins/_form.scss
@@ -12,6 +12,7 @@
 // Labels
 @mixin ouiFormLabel {
   @include ouiFontSizeXS;
+
   color: $ouiTitleColor;
   font-weight: $ouiFontWeightSemiBold;
 }
@@ -20,7 +21,8 @@
   $iconSize: $ouiSize;
   $iconPadding: $ouiFormControlPadding;
   $marginBetweenIcons: $ouiFormControlPadding / 2;
-  @if ($compressed) {
+
+  @if  $compressed {
     $iconPadding: $ouiFormControlCompressedPadding;
   }
 
@@ -39,12 +41,13 @@
   $clearSize: $ouiSize;
   $clearIconStroke: 2px;
 
-  @if ($size == 's') {
+  @if  $size == 's' {
     $clearSize: $ouiSizeM;
     $clearIconStroke: $ouiSizeXS;
   }
 
   @include size($clearSize);
+
   pointer-events: all;
   background-color: lightOrDarkTheme($ouiColorMediumShade, $ouiColorDarkShade);
   border-radius: $clearSize;
@@ -56,21 +59,24 @@
 
   #{$iconClass} {
     @include size($clearSize / 2);
+
     fill: $ouiColorEmptyShade;
+
     // increase thickness of icon at such a small size
     stroke: $ouiColorEmptyShade;
     stroke-width: $clearIconStroke;
   }
 }
 
 @mixin ouiPlaceholderPerBrowser {
-  // sass-lint:disable-block no-vendor-prefixes
+  /* stylelint-disable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
   // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; opacity: 1; }
-  &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
-  &:-moz-placeholder { @content; opacity: 1; }
+  &::input-placeholder { @content; opacity: 1; }
+  &::placeholder { @content; opacity: 1; }
+  &:input-placeholder { @content; opacity: 1; }
+  &:placeholder { @content; opacity: 1; }
   &::placeholder { @content; opacity: 1; }
+  /* stylelint-enable selector-pseudo-element-no-unknown, selector-pseudo-class-no-unknown, no-duplicate-selectors */
 }
 
 @function ouiFormControlGradient($color: $ouiColorPrimary) {
@@ -84,6 +90,7 @@
 
 @mixin ouiFormControlText {
   @include ouiFont;
+
   font-size: $ouiFontSizeS;
   color: $ouiTextColor;
 
@@ -106,7 +113,7 @@
   width: 100%;
   height: $height;
 
-  @if ($includeAlternates) {
+  @if  $includeAlternates {
     &--fullWidth {
       max-width: 100%;
     }
@@ -122,7 +129,7 @@
 }
 
 @mixin ouiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
-  @if ($isIconOptional) {
+  @if  $isIconOptional {
     @at-root {
       #{&}--withIcon {
         @include ouiFormControlLayoutPadding(1, $side, $compressed);
@@ -136,15 +143,15 @@
 @mixin ouiFormControlIsLoading($isNextToIcon: false) {
   @at-root {
     #{&}-isLoading {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2);
       } @else {
         @include ouiFormControlLayoutPadding(1);
       }
     }
 
     #{&}-isLoading#{&}--compressed {
-      @if ($isNextToIcon) {
+      @if  $isNextToIcon {
         @include ouiFormControlLayoutPadding(2, $compressed: true);
       } @else {
         @include ouiFormControlLayoutPadding(1, $compressed: true);
@@ -161,7 +168,7 @@
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -189,7 +196,7 @@
   background-image: ouiFormControlGradient();
   background-size: 100% 100%; // 1
 
-  @if ($borderOnly) {
+  @if  $borderOnly {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
   } @else {
     box-shadow:
@@ -212,6 +219,7 @@
 
 @mixin ouiFormControlDisabledStyle {
   @include ouiFormControlDisabledTextStyle;
+
   cursor: not-allowed;
   background: $ouiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $ouiFormBorderDisabledColor;
@@ -224,6 +232,7 @@
 
 @mixin ouiFormControlReadOnlyStyle {
   cursor: default;
+
   // Use transparency since there is no border and in case form is on a non-white background
   background: $ouiFormBackgroundReadOnlyColor;
   border-color: transparent;
@@ -242,7 +251,7 @@
   border-radius: $ouiFormControlBorderRadius;
   padding: $ouiFormControlPadding;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -277,12 +286,13 @@
       ~ .euiFormControlLayoutIcons {
         color: $ouiTextColor;
       }
+
       /* End of Aliases */
     }
 
   }
 
-  @if ($includeSizes) {
+  @if  $includeSizes {
     &--compressed {
       @include ouiFormControlStyleCompressed($borderOnly, $includeStates);
     }
@@ -297,10 +307,11 @@
 
 @mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
   @include ouiFormControlDefaultShadow($borderOnly: true);
+
   padding: $ouiFormControlCompressedPadding;
   border-radius: $ouiFormControlCompressedBorderRadius;
 
-  @if ($includeStates) {
+  @if  $includeStates {
     &:invalid { // 2
       @include ouiFormControlInvalidStyle;
     }
@@ -326,6 +337,7 @@
 
   @if $size {
     $size: $size - 2px; // subtract 2px from size to account for border size
+
     padding: $size / 2;
   }
 
@@ -337,6 +349,7 @@
   } @else if $type == 'square' {
     border-radius: $ouiCheckboxBorderRadius;
   }
+
   // sass-lint:disable-block indentation
   transition: background-color $ouiAnimSpeedFast ease-in,
               border-color $ouiAnimSpeedFast ease-in;
@@ -346,7 +359,7 @@
   border-color: $ouiColorPrimary;
   background-color: $ouiColorPrimary;
 
-  @if $type != null {
+  @if $type != null { /* stylelint-disable-line scss/at-if-no-null */
     @include ouiIconBackground($type, $ouiColorEmptyShade);
   }
 }
@@ -355,18 +368,21 @@
   border-color: $ouiColorLightShade;
   background-color: $ouiColorLightShade;
   box-shadow: none;
-  @if $type != null {
+
+  @if $type != null { /* stylelint-disable-line scss/at-if-no-null */
     @include ouiIconBackground($type, $ouiFormCustomControlDisabledIconColor);
   }
 }
 
 @mixin ouiCustomControlFocused {
   @include ouiFocusRing('small');
+
   border-color: $ouiColorPrimary;
 }
 
 @mixin ouiHiddenSelectableInput {
   position: absolute;
+
   // sass-lint:disable no-important
   opacity: 0 !important; // Make sure it's still hidden when :disabled
   width: 100%;
@@ -378,15 +394,21 @@
 
 /* OUI -> EUI Aliases */
 @mixin euiFormLabel { @include ouiFormLabel; }
+
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { @include ouiFormControlLayoutPadding($numOfIcons, $side, $compressed); }
+
 @mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') { @include ouiFormControlLayoutClearIcon($iconClass, $size); }
+
 @mixin euiPlaceholderPerBrowser {
   @include ouiPlaceholderPerBrowser {
     @content;
   }
 }
+
 @function euiFormControlGradient($color: $ouiColorPrimary) { @return ouiFormControlGradient($color); }
+
 @mixin euiFormControlText { @include ouiFormControlText; }
+
 @mixin euiFormControlSize(
   $height: $ouiFormControlHeight,
   $includeAlternates: false
@@ -396,19 +418,35 @@
     $includeAlternates
   );
 }
+
 @mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { @include ouiFormControlWithIcon($isIconOptional, $side, $compressed); }
+
 @mixin euiFormControlIsLoading($isNextToIcon: false) { @include ouiFormControlIsLoading($isNextToIcon); }
+
 @mixin euiFormControlDefaultShadow($borderOnly: false) { @include ouiFormControlDefaultShadow($borderOnly); }
+
 @mixin euiFormControlFocusStyle($borderOnly: false) { @include ouiFormControlFocusStyle($borderOnly); }
+
 @mixin euiFormControlInvalidStyle { @include ouiFormControlInvalidStyle; }
+
 @mixin euiFormControlDisabledTextStyle { @include ouiFormControlDisabledTextStyle; }
+
 @mixin euiFormControlDisabledStyle { @include ouiFormControlDisabledStyle; }
+
 @mixin euiFormControlReadOnlyStyle { @include ouiFormControlReadOnlyStyle; }
+
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { @include ouiFormControlStyle($borderOnly, $includeStates, $includeSizes); }
+
 @mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { @include ouiFormControlStyleCompressed($borderOnly, $includeStates); }
+
 @mixin euiCustomControl($type: null, $size: $ouiSize) { @include ouiCustomControl($type, $size); }
+
 @mixin euiCustomControlSelected($type: null) { @include ouiCustomControlSelected($type); }
+
 @mixin euiCustomControlDisabled($type: null) { @include ouiCustomControlDisabled($type); }
+
 @mixin euiCustomControlFocused { @include ouiCustomControlFocused; }
+
 @mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; }
+
 /* End of Aliases */