Merge pull request #11227 from DanielRuf/style/fix-sasslint-warnings

style: fix sasslint warnings
foundation · May 2, 2018 · 02d0523 · 02d0523
2 parents 5539f2b + 92b2f18
commit 02d0523
Show file tree

Hide file tree

Showing 19 changed files with 96 additions and 81 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -45,11 +45,11 @@ rules:
     - 1
     - include: true
 
-  force-attribute-nesting: 1
+  force-attribute-nesting: 0
 
-  force-element-nesting: 1
+  force-element-nesting: 0
 
-  force-pseudo-nesting: 1
+  force-pseudo-nesting: 0
 
   function-name-format:
     - 1

diff --git a/scss/_global.scss b/scss/_global.scss
@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
+// sass-lint:disable no-color-literals, no-qualifying-elements
 
 ////
 /// @group global
@@ -166,8 +166,8 @@ $global-color-pick-contrast-tolerance: 0 !default;
     color: $body-font-color;
 
     @if ($body-antialiased) {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+      -moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
     }
   }
 

diff --git a/scss/components/_accordion-menu.scss b/scss/components/_accordion-menu.scss
@@ -51,7 +51,7 @@ $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !defau
 $accordionmenu-arrow-size: 6px !default;
 
 @mixin zf-accordion-menu-left-right-arrows {
-  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {  // sass-lint:disable-line force-element-nesting force-pseudo-nesting
     position: relative;
 
     &::after {
@@ -62,11 +62,13 @@ $accordionmenu-arrow-size: 6px !default;
       #{$global-right}: 1rem;
     }
   }
-  &.align-left .is-accordion-submenu-parent > a::after {
-    left: auto;
+
+  &.align-left .is-accordion-submenu-parent > a::after { // sass-lint:disable-line force-element-nesting force-pseudo-nesting
     right: 1rem;
+    left: auto;
   }
-  &.align-right .is-accordion-submenu-parent > a::after {
+
+  &.align-right .is-accordion-submenu-parent > a::after { // sass-lint:disable-line force-element-nesting force-pseudo-nesting
     right: auto;
     left: 1rem;
   }
@@ -93,32 +95,32 @@ $accordionmenu-arrow-size: 6px !default;
       }
       padding: $accordionmenu-padding;
     }
-    
-    .is-accordion-submenu a {
+
+    .is-accordion-submenu a { // sass-lint:disable-line force-element-nesting
       padding: $accordionmenu-submenu-padding;
     }
 
-    .nested.is-accordion-submenu {
+    .nested.is-accordion-submenu { // sass-lint:disable-line force-element-nesting
       @include menu-nested($accordionmenu-nested-margin);
     }
 
     &.align-#{$global-right} {
-      .nested.is-accordion-submenu {
+      .nested.is-accordion-submenu { // sass-lint:disable-line force-element-nesting
         @include menu-nested($accordionmenu-nested-margin, right);
       }
     }
 
     @if $accordionmenu-arrows {
       @include zf-accordion-menu-left-right-arrows;
 
-      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after { // sass-lint:disable-line force-element-nesting force-pseudo-nesting force-attribute-nesting
         transform: rotate(180deg);
         transform-origin: 50% 50%;
       }
     }
   }
 
-  .is-accordion-submenu li {
+  .is-accordion-submenu li { // sass-lint:disable-line force-element-nesting force-attribute-nesting
     @if $accordionmenu-border {
       border-right: 0;
       border-left: 0;
@@ -138,11 +140,12 @@ $accordionmenu-arrow-size: 6px !default;
     position: absolute;
     top: 0;
     #{$global-right}: 0;
-    cursor: pointer;
 
     width: $accordionmenu-submenu-toggle-width;
     height: $accordionmenu-submenu-toggle-height;
 
+    cursor: pointer;
+
     border-#{$global-left}: $accordion-submenu-toggle-border;
 
     @if $accordionmenu-submenu-toggle-background {
@@ -160,7 +163,7 @@ $accordionmenu-arrow-size: 6px !default;
   }
 
   // Rotate the arrow when menu is open
-  .submenu-toggle[aria-expanded='true']::after {
+  .submenu-toggle[aria-expanded='true']::after { // sass-lint:disable-line force-element-nesting force-pseudo-nesting force-attribute-nesting
     transform: scaleY(-1);
     transform-origin: 50% 50%;
   }

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
@@ -61,6 +61,7 @@ $accordion-content-padding: 1rem !default;
   margin-#{$global-left}: 0;
   background: $background;
   list-style-type: none;
+
   &[disabled] {
     .accordion-title {
       cursor: not-allowed;
@@ -98,9 +99,11 @@ $accordion-content-padding: 1rem !default;
   line-height: 1;
   color: $color;
 
-  :last-child:not(.is-active) > & {
-    border-bottom: $border;
-    border-radius: 0 0 $global-radius $global-radius;
+  :last-child {
+    &:not(.is-active) > & {
+      border-bottom: $border;
+      border-radius: 0 0 $global-radius $global-radius;
+    }
   }
 
   &:hover,

diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
@@ -82,12 +82,14 @@ $breadcrumbs-item-separator-color: $medium-gray !default;
       // Need to escape the backslash
       $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
 
-      &:not(:last-child)::after {
-        position: relative;
-        margin: 0 $breadcrumbs-item-margin;
-        opacity: 1;
-        content: $separator;
-        color: $breadcrumbs-item-separator-color;
+      &:not(:last-child) {
+        &::after {
+          position: relative;
+          margin: 0 $breadcrumbs-item-margin;
+          opacity: 1;
+          content: $separator;
+          color: $breadcrumbs-item-separator-color;
+        }
       }
     }
     @else {

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
@@ -113,14 +113,16 @@ $buttongroup-radius-on-each: true !default;
     }
     @else {
       // One child
-      &:first-child:last-child {
-        width: calc(100% - #{$spacing});
+      &:first-child {
+        &:last-child {
+          width: calc(100% - #{$spacing});
+        }
       }
 
       // Two or more childreen
       @for $i from 2 through $buttongroup-expand-max {
-        &:first-child:nth-last-child(#{$i}) {
-          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+        &:first-child:nth-last-child(#{$i}) { // sass-lint:disable-line force-pseudo-nesting
+          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} { // sass-lint:disable-line force-pseudo-nesting
             display: inline-block;
             width: calc(#{percentage(1 / $i)} - #{$spacing});
             margin-#{$global-right}: $spacing;
@@ -160,7 +162,7 @@ $buttongroup-radius-on-each: true !default;
     @if not $buttongroup-radius-on-each {
       border-radius: 0;
 
-      &:first-child{
+      &:first-child {
         border-top-#{$global-left}-radius: $global-radius;
         border-top-#{$global-right}-radius: $global-radius;
       }
@@ -212,7 +214,7 @@ $buttongroup-radius-on-each: true !default;
 
     // Sizes
     @each $size, $value in map-remove($button-sizes, default) {
-      &.#{$size} #{$buttongroup-child-selector} {
+      &.#{$size} #{$buttongroup-child-selector} { // sass-lint:disable-line force-element-nesting
         font-size: $value;
       }
     }
@@ -238,7 +240,7 @@ $buttongroup-radius-on-each: true !default;
         @each $name, $color in $button-palette {
           $individual-selector: if($button-fill == $filling, null, ' #{$buttongroup-child-selector}.#{$name}');
 
-          &.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} {
+          &.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} { // sass-lint:disable-line force-element-nesting
             @include button-fill-style($filling, $color, auto, auto);
           }
         }
@@ -272,7 +274,7 @@ $buttongroup-radius-on-each: true !default;
       }
     }
 
-    &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
+    &.stacked-for-small.expanded {
       @include breakpoint(small only) {
         display: block;
 
@@ -283,7 +285,7 @@ $buttongroup-radius-on-each: true !default;
       }
     }
 
-    &.stacked-for-medium.expanded { // sass-lint:disable-line force-element-nesting
+    &.stacked-for-medium.expanded {
       @include breakpoint(medium down) {
         display: block;
 

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -99,8 +99,6 @@ $button-responsive-expanded: false !default;
   display: inline-block;
   vertical-align: middle;
   margin: $button-margin;
-  font-family: $button-font-family;
-  font-weight: $button-font-weight;
 
   @if (type-of($button-padding) == 'map') {
     @each $size, $padding in $button-padding {
@@ -113,11 +111,13 @@ $button-responsive-expanded: false !default;
     padding: $button-padding;
   }
 
-  -webkit-appearance: none;
   border: $button-border;
   border-radius: $button-radius;
   transition: $button-transition;
+  font-family: $button-font-family;
   font-size: map-get($button-sizes, default);
+  font-weight: $button-font-weight;
+  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
   line-height: 1;
   text-align: center;
   cursor: pointer;
@@ -145,10 +145,7 @@ $button-responsive-expanded: false !default;
 @mixin button-fill(
   $fill: $button-fill
 ) {
-  @if $fill == solid {
-    // No base style is required for solid buttons, do nothing
-  }
-  @else if $fill == hollow {
+  @if $fill == hollow {
     @include button-hollow;
   }
   @else if $fill == clear {
@@ -421,7 +418,8 @@ $button-responsive-expanded: false !default;
       margin-#{$global-left}: 0;
     }
   }
-  a.button {
+
+  a.button { // sass-lint:disable-line no-qualifying-elements
     &:hover,
     &:focus {
       text-decoration: none;

diff --git a/scss/components/_card.scss b/scss/components/_card.scss
@@ -81,8 +81,8 @@ $card-margin-bottom: $global-margin !default;
   $padding: $card-padding
 ) {
   @if $global-flexbox {
-    flex: 0 1 auto;
     display: flex;
+    flex: 0 1 auto;
   }
 
   padding: $padding;

diff --git a/scss/components/_drilldown.scss b/scss/components/_drilldown.scss
@@ -45,25 +45,26 @@ $drilldown-arrow-size: 6px !default;
 @mixin zf-drilldown-left-right-arrows {
   .is-drilldown-submenu-parent > a {
     position: relative;
+
     &::after {
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
       position: absolute;
       top: 50%;
       margin-top: -1 * $drilldown-arrow-size;
       #{$global-right}: 1rem;
-      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
     }
   }
 
   &.align-left .is-drilldown-submenu-parent > a::after {
-    left: auto;
-    right: 1rem;
     @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+    right: 1rem;
+    left: auto;
   }
 
   &.align-right .is-drilldown-submenu-parent > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
     right: auto;
     left: 1rem;
-    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
 }
@@ -134,8 +135,6 @@ $drilldown-arrow-size: 6px !default;
         display: inline-block;
         vertical-align: middle;
         margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
-
-        border-#{$global-left}-width: 0;
       }
     }
   }

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
@@ -69,9 +69,9 @@ $dropdown-menu-item-background-active: transparent !default;
   }
 
   &.opens-left > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
     right: auto;
     left: 5px;
-    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
   &.opens-right > a::after {
@@ -81,15 +81,15 @@ $dropdown-menu-item-background-active: transparent !default;
 
 @mixin dropdown-menu-direction($dir: horizontal) {
   @if $dir == horizontal {
-    > li.opens-left {
+    > li.opens-left { // sass-lint:disable-line no-qualifying-elements
       > .is-dropdown-submenu {
         top: 100%;
         right: 0;
         left: auto;
       }
     }
 
-    > li.opens-right {
+    > li.opens-right { // sass-lint:disable-line no-qualifying-elements
       > .is-dropdown-submenu {
         top: 100%;
         right: auto;
@@ -98,12 +98,12 @@ $dropdown-menu-item-background-active: transparent !default;
     }
 
     @if $dropdownmenu-arrows {
-      > li.is-dropdown-submenu-parent > a {
+      > li.is-dropdown-submenu-parent > a { // sass-lint:disable-line no-qualifying-elements
         position: relative;
         padding-#{$global-right}: $dropdownmenu-arrow-padding;
       }
 
-      > li.is-dropdown-submenu-parent > a::after {
+      > li.is-dropdown-submenu-parent > a::after { // sass-lint:disable-line no-qualifying-elements
         @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
         #{$global-left}: auto;
@@ -119,9 +119,9 @@ $dropdown-menu-item-background-active: transparent !default;
 
       &.opens-left {
         > .is-dropdown-submenu {
+          top: 0;
           right: 100%;
           left: auto;
-          top: 0;
         }
       }