style: Set max-line-length in stylelintrc (#4307)

material-components · Mar 13, 2019 · 44abbed · 44abbed
1 parent b9c5fc6
commit 44abbed
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 50 deletions.
diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml
@@ -4,6 +4,8 @@ plugins:
   - stylelint-scss
   - stylelint-order
 rules:
+  # Wrap lines greater than 120 characters
+  max-line-length: 120
   # Override stylelint-config-standard - we only use CSS comments for annotations that don't warrant an empty line
   comment-empty-line-before: null
   # Follow best practices

diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
@@ -253,7 +253,8 @@
 
   .mdc-card__action--icon {
     @include mdc-feature-targets($feat-structure) {
-      // Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from expanding.
+      // Icon buttons are taller than buttons, so we need to adjust their margins to prevent the action row from
+      // expanding.
       margin: -6px 0;
 
       // Same padding as mdc-icon-button.

diff --git a/packages/mdc-chips/_variables.scss b/packages/mdc-chips/_variables.scss
@@ -35,7 +35,8 @@ $mdc-chip-trailing-icon-hover-opacity: .62 !default;
 $mdc-chip-trailing-icon-focus-opacity: .87 !default;
 $mdc-chip-leading-icon-size: 20px !default;
 $mdc-chip-trailing-icon-size: 18px !default;
-$mdc-chip-leading-icon-delay: -50ms !default; // Speed up delay to bridge gap between leading icon and checkmark transition.
+// Speed up delay to bridge gap between leading icon and checkmark transition.
+$mdc-chip-leading-icon-delay: -50ms !default;
 $mdc-chip-checkmark-with-leading-icon-delay: 80ms !default;
 
 $mdc-chip-checkmark-animation-delay: 50ms !default;

diff --git a/packages/mdc-grid-list/mdc-grid-list.scss b/packages/mdc-grid-list/mdc-grid-list.scss
@@ -171,7 +171,12 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 
 .mdc-grid-list--with-icon-align-start {
   .mdc-grid-tile__secondary {
-    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, $mdc-grid-list-tile-secondary-padding-narrow, ".mdc-grid-list");
+    @include mdc-rtl-reflexive-property(
+      padding,
+      $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size,
+      $mdc-grid-list-tile-secondary-padding-narrow,
+      ".mdc-grid-list"
+    );
   }
 
   .mdc-grid-tile__icon {
@@ -183,7 +188,12 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;
 
 .mdc-grid-list--with-icon-align-end {
   .mdc-grid-tile__secondary {
-    @include mdc-rtl-reflexive-property(padding, $mdc-grid-list-tile-secondary-padding, $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size, ".mdc-grid-list");
+    @include mdc-rtl-reflexive-property(
+      padding,
+      $mdc-grid-list-tile-secondary-padding,
+      $mdc-grid-list-tile-secondary-padding * 2 + $mdc-grid-list-tile-secondary-icon-size,
+      ".mdc-grid-list"
+    );
   }
 
   .mdc-grid-tile__icon {

diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -122,11 +122,19 @@
 
   @if ($radius-pixels > $mdc-notched-outline-leading-width) {
     .mdc-select__native-control {
-      @include mdc-rtl-reflexive-property(padding, $radius-pixels + $mdc-notched-outline-padding, $mdc-select-arrow-padding);
+      @include mdc-rtl-reflexive-property(
+        padding,
+        $radius-pixels + $mdc-notched-outline-padding,
+        $mdc-select-arrow-padding
+      );
     }
 
     + .mdc-select-helper-text {
-      @include mdc-rtl-reflexive-property(margin, $radius-pixels + $mdc-notched-outline-padding, $mdc-select-outline-label-offset);
+      @include mdc-rtl-reflexive-property(
+        margin,
+        $radius-pixels + $mdc-notched-outline-padding,
+        $mdc-select-outline-label-offset
+      );
     }
   }
 }
@@ -184,7 +192,10 @@
   $fill-hex-number: mdc-theme-prop-value($fill-hex-number);
   $fill-hex-number: str-slice(unquote("#{$fill-hex-number}"), 2);
 
-  background: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E") no-repeat center;
+  background:
+    url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E")
+    no-repeat
+    center;
 }
 
 @mixin mdc-select-outline-color_($color) {
@@ -244,7 +255,10 @@
   @include mdc-select-icon-horizontal-position_(16px, $mdc-select-icon-padding);
 
   &.mdc-select--outlined {
-    @include mdc-notched-outline-floating-label-float-position($mdc-select-outlined-label-position-y, $mdc-select-outlined-with-leading-icon-label-position-x);
+    @include mdc-notched-outline-floating-label-float-position(
+      $mdc-select-outlined-label-position-y,
+      $mdc-select-outlined-with-leading-icon-label-position-x
+    );
     @include mdc-floating-label-shake-animation(select-outlined-leading-icon);
 
     @include mdc-rtl {

diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -150,5 +150,13 @@
   @include mdc-states(on-surface);
 }
 
-@include mdc-floating-label-shake-keyframes(select-outlined-leading-icon, $mdc-select-outlined-label-position-y, $mdc-select-outlined-with-leading-icon-label-position-x);
-@include mdc-floating-label-shake-keyframes(select-outlined-leading-icon-rtl, $mdc-select-outlined-label-position-y, -$mdc-select-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-shake-keyframes(
+  select-outlined-leading-icon,
+  $mdc-select-outlined-label-position-y,
+  $mdc-select-outlined-with-leading-icon-label-position-x
+);
+@include mdc-floating-label-shake-keyframes(
+  select-outlined-leading-icon-rtl,
+  $mdc-select-outlined-label-position-y,
+  -$mdc-select-outlined-with-leading-icon-label-position-x
+);
diff --git a/packages/mdc-switch/_variables.scss b/packages/mdc-switch/_variables.scss
@@ -41,7 +41,8 @@ $mdc-switch-native-control-width:
   ($mdc-switch-tap-target-size - $mdc-switch-thumb-diameter) +
   $mdc-switch-thumb-offset * 2 !default;
 
-$mdc-switch-thumb-active-margin: $mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2 !default;
+$mdc-switch-thumb-active-margin:
+  $mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2 !default;
 
 $mdc-switch-toggled-off-thumb-color: mdc-theme-prop-value(surface) !default;
 $mdc-switch-toggled-off-track-color: mdc-theme-prop-value(on-surface) !default;

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -41,7 +41,10 @@
 
   $masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);
 
-  @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-text-field-height, $masked-radius), $rtl-reflexive);
+  @include mdc-shape-radius(
+    mdc-shape-resolve-percentage-radius($mdc-text-field-height, $masked-radius),
+    $rtl-reflexive
+  );
 }
 
 @mixin mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive: false) {
@@ -184,7 +187,11 @@
 }
 
 @mixin mdc-text-field-dense_ {
-  @include mdc-floating-label-float-position($mdc-text-field-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-float-position(
+    $mdc-text-field-dense-label-position-y,
+    0%,
+    $mdc-text-field-dense-label-scale
+  );
   @include mdc-floating-label-shake-animation(text-field-dense);
 
   .mdc-text-field__input {
@@ -255,7 +262,10 @@
         @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width));
 
         &--float-above {
-          @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding);
+          @include mdc-rtl-reflexive-position(
+            left,
+            ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding
+          );
         }
       }
     }
@@ -284,7 +294,11 @@
 }
 
 @mixin mdc-text-field-outlined-dense_ {
-  @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-notched-outline-floating-label-float-position(
+    $mdc-text-field-outlined-dense-label-position-y,
+    0%,
+    $mdc-text-field-dense-label-scale
+  );
   @include mdc-floating-label-shake-animation(text-field-outlined-dense);
 
   height: 48px;
@@ -318,7 +332,7 @@
   .mdc-text-field__input {
     display: flex;
     padding: 12px 16px 14px;
-    border: none !important;  // FF adds unwanted border in HC mode on windows.
+    border: none !important; // FF adds unwanted border in HC mode on windows.
     background-color: transparent;
     z-index: 1;
   }
@@ -349,23 +363,38 @@
 // Icons
 
 @mixin mdc-text-field-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+  @include mdc-text-field-icon-horizontal-position_(
+    left,
+    $mdc-text-field-icon-position,
+    $mdc-text-field-icon-padding,
+    $mdc-text-field-input-padding
+  );
 
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
   }
 }
 
 @mixin mdc-text-field-dense-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+  @include mdc-text-field-icon-horizontal-position_(
+    left,
+    $mdc-text-field-dense-icon-position,
+    $mdc-text-field-dense-icon-padding,
+    $mdc-text-field-input-padding
+  );
 
   .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
   }
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(left, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+  @include mdc-text-field-icon-horizontal-position_(
+    left,
+    $mdc-text-field-icon-position,
+    $mdc-text-field-icon-padding,
+    $mdc-text-field-input-padding
+  );
   @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-label-position-y, 32px);
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 
@@ -379,7 +408,11 @@
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
-  @include mdc-notched-outline-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+  @include mdc-notched-outline-floating-label-float-position(
+    $mdc-text-field-outlined-dense-label-position-y,
+    $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
+    $mdc-text-field-dense-label-scale
+  );
   @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
 
   @include mdc-rtl {
@@ -392,24 +425,49 @@
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+  @include mdc-text-field-icon-horizontal-position_(
+    right,
+    $mdc-text-field-trailing-icon-position,
+    $mdc-text-field-icon-padding,
+    $mdc-text-field-input-padding
+  );
 
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
-    @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+    @include mdc-text-field-icon-horizontal-position_(
+      right,
+      $mdc-text-field-icon-position,
+      $mdc-text-field-icon-padding,
+      $mdc-text-field-input-padding
+    );
   }
 }
 
 @mixin mdc-text-field-dense-with-trailing-icon_ {
-  @include mdc-text-field-icon-horizontal-position_(right, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+  @include mdc-text-field-icon-horizontal-position_(
+    right,
+    $mdc-text-field-dense-icon-position,
+    $mdc-text-field-dense-icon-padding,
+    $mdc-text-field-input-padding
+  );
 }
 
 @mixin mdc-text-field-with-both-icons_ {
-  @include mdc-text-field-icon-horizontal-position-two-icons_($mdc-text-field-icon-position, $mdc-text-field-icon-padding, $mdc-text-field-trailing-icon-position, $mdc-text-field-icon-padding);
+  @include mdc-text-field-icon-horizontal-position-two-icons_(
+    $mdc-text-field-icon-position,
+    $mdc-text-field-icon-padding,
+    $mdc-text-field-trailing-icon-position,
+    $mdc-text-field-icon-padding
+  );
 }
 
 @mixin mdc-text-field-dense-with-both-icons_ {
-  @include mdc-text-field-icon-horizontal-position-two-icons_($mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
+  @include mdc-text-field-icon-horizontal-position-two-icons_(
+    $mdc-text-field-dense-icon-position,
+    $mdc-text-field-dense-icon-padding,
+    $mdc-text-field-dense-icon-position,
+    $mdc-text-field-dense-icon-padding
+  );
 }
 
 // Full Width

diff --git a/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss b/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss
@@ -29,7 +29,8 @@
 .mdc-text-field-character-counter {
   @include mdc-typography(caption);
   @include mdc-typography-baseline-top(16px);
-  @include mdc-rtl-reflexive-box(margin, left, auto); // Keep flex item align to trailing side on absence of helper text.
+  // Keep flex item align to trailing side on absence of helper text.
+  @include mdc-rtl-reflexive-box(margin, left, auto);
   @include mdc-rtl-reflexive-box(padding, left, 16px);
 
   white-space: nowrap;

diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
@@ -38,16 +38,21 @@
   // Move the input's position, to allow room for the icon
   @if ($position-property == left) {
     .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $padding /* left-value */, $input-padding  /* right-value */);
+      @include mdc-rtl-reflexive-property(padding, $padding, $input-padding);
     }
   } @else {
     .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $input-padding /* left-value */, $padding  /* right-value */);
+      @include mdc-rtl-reflexive-property(padding, $input-padding, $padding);
     }
   }
 }
 
-@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $padding-left, $position-right, $padding-right) {
+@mixin mdc-text-field-icon-horizontal-position-two-icons_(
+  $position-left,
+  $padding-left,
+  $position-right,
+  $padding-right
+) {
   .mdc-text-field__icon {
     @include mdc-rtl-reflexive(left, $position-left, right, auto);
 
@@ -65,7 +70,8 @@
 @mixin mdc-text-field-icon-color_($color, $styleSecondIcon: false) {
   .mdc-text-field__icon {
     @if ($styleSecondIcon) {
-      ~ .mdc-text-field__icon { // Selects the second instance of this class regardless of element type.
+      // Select the second instance of this class regardless of element type.
+      ~ .mdc-text-field__icon {
         @include mdc-theme-prop(color, $color);
       }
     } @else {

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -268,11 +268,39 @@
   @include mdc-text-field-textarea-disabled_;
 }
 
-@include mdc-floating-label-shake-keyframes(text-field-dense, $mdc-text-field-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(
+  text-field-dense,
+  $mdc-text-field-dense-label-position-y,
+  0%,
+  $mdc-text-field-dense-label-scale
+);
 @include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-floating-label-shake-keyframes(text-field-outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
-@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-rtl, $mdc-text-field-outlined-label-position-y, -$mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense-rtl, $mdc-text-field-outlined-dense-label-position-y, -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(
+  text-field-outlined-dense,
+  $mdc-text-field-outlined-dense-label-position-y,
+  0%,
+  $mdc-text-field-dense-label-scale
+);
+@include mdc-floating-label-shake-keyframes(
+  text-field-outlined-leading-icon,
+  $mdc-text-field-outlined-label-position-y,
+  $mdc-text-field-outlined-with-leading-icon-label-position-x
+);
+@include mdc-floating-label-shake-keyframes(
+  text-field-outlined-leading-icon-dense,
+  $mdc-text-field-outlined-dense-label-position-y,
+  $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
+  $mdc-text-field-dense-label-scale
+);
+@include mdc-floating-label-shake-keyframes(
+  text-field-outlined-leading-icon-rtl,
+  $mdc-text-field-outlined-label-position-y,
+  -$mdc-text-field-outlined-with-leading-icon-label-position-x
+);
+@include mdc-floating-label-shake-keyframes(
+  text-field-outlined-leading-icon-dense-rtl,
+  $mdc-text-field-outlined-dense-label-position-y,
+  -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
+  $mdc-text-field-dense-label-scale
+);
 @include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%);