chore: lint style rules

carbon-design-system · Apr 20, 2021 · 8646dd7 · 8646dd7
1 parent 70c4214
commit 8646dd7
Show file tree

Hide file tree

Showing 76 changed files with 1,098 additions and 1,108 deletions.
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -38,13 +38,13 @@
 
     position: relative;
     display: flex;
+    width: 100%;
+    min-height: rem(40px);
     flex-direction: $accordion-flex-direction;
     align-items: flex-start;
     justify-content: $accordion-justify-content;
-    width: 100%;
-    min-height: rem(40px);
-    margin: 0;
     padding: rem(10px) 0;
+    margin: 0;
     color: $text-01;
     cursor: pointer;
     transition: background-color motion(standard, productive) $duration--fast-02;
@@ -109,15 +109,16 @@
 
   .#{$prefix}--accordion__arrow {
     @include focus-outline('reset');
+
+    width: 1rem;
+    height: 1rem;
     // Without flex basis and flex shrink being set here, our icon width can go
     // <16px and cause the icon to render in the incorrect artboard size
     flex: 0 0 1rem;
-    width: 1rem;
-    height: 1rem;
     margin: $accordion-arrow-margin;
+    fill: $ui-05;
     transform: rotate(90deg) #{'/*rtl:ignore*/'};
     transition: all $duration--fast-02 motion(standard, productive);
-    fill: $ui-05;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -198,8 +199,8 @@
     }
 
     .#{$prefix}--accordion__arrow {
-      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
       fill: $ui-05;
+      transform: rotate(-90deg) #{'/*rtl:ignore*/'};
 
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
@@ -218,15 +219,15 @@
 
   .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
     cursor: default;
-    pointer-events: none;
     fill: $ui-05;
+    pointer-events: none;
 
     &:hover,
     &:focus,
     &:active {
       border: none;
-      outline: none;
       cursor: default;
+      outline: none;
     }
   }
 
@@ -244,8 +245,8 @@
     .#{$prefix}--accordion__heading:focus
     .#{$prefix}--accordion__arrow {
     border: none;
-    outline: none;
     cursor: default;
+    outline: none;
   }
 
   .#{$prefix}--accordion__title.#{$prefix}--skeleton__text {

diff --git a/packages/components/src/components/accordion/_keyframes.scss b/packages/components/src/components/accordion/_keyframes.scss
@@ -1,13 +1,13 @@
 @mixin content-visible {
   height: 100%;
-  visibility: inherit;
   opacity: 1;
+  visibility: inherit;
 }
 
 @mixin content-hidden {
   height: 0;
-  visibility: hidden;
   opacity: 0;
+  visibility: hidden;
 }
 
 @keyframes collapse-accordion {

diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -95,9 +95,9 @@
       width: rem(12px);
       height: 1px;
       background: $hover-primary-text;
+      content: '';
       opacity: 0;
       transition: opacity $duration--fast-01 motion(standard, productive);
-      content: '';
     }
   }
 
@@ -113,8 +113,8 @@
 
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
     position: relative;
-    transform: translateY(4px);
     fill: $link-01;
+    transform: translateY(4px);
   }
 
   .#{$prefix}--breadcrumb-item
@@ -133,11 +133,11 @@
     left: $caret-size * 2;
     width: 0;
     height: 0;
-    margin: 0 auto;
-    background: transparent;
     border-right: $caret-size solid transparent;
     border-bottom: $caret-size solid $field-01;
     border-left: $caret-size solid transparent;
+    margin: 0 auto;
+    background: transparent;
   }
 
   // Skeleton State

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -74,14 +74,14 @@
     }
 
     &:focus {
-      color: $inverse-01;
       background-color: $interactive-03;
+      color: $inverse-01;
     }
 
     &:active {
-      color: $inverse-01;
-      background-color: $active-tertiary;
       border-color: transparent;
+      background-color: $active-tertiary;
+      color: $inverse-01;
     }
 
     &:disabled,
@@ -90,8 +90,8 @@
     &.#{$prefix}--btn--disabled,
     &.#{$prefix}--btn--disabled:hover,
     &.#{$prefix}--btn--disabled:focus {
-      color: $disabled-03;
       background: transparent;
+      color: $disabled-03;
       outline: none;
     }
   }
@@ -128,9 +128,9 @@
     &.#{$prefix}--btn--disabled,
     &.#{$prefix}--btn--disabled:hover,
     &.#{$prefix}--btn--disabled:focus {
-      color: $disabled-03;
-      background: transparent;
       border-color: transparent;
+      background: transparent;
+      color: $disabled-03;
       outline: none;
     }
 
@@ -155,10 +155,10 @@
     &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before,
     &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after,
     &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text {
-      margin: -1px;
       overflow: hidden;
-      opacity: 0;
+      margin: -1px;
       clip: rect(0, 0, 0, 0);
+      opacity: 0;
     }
   }
 
@@ -307,18 +307,18 @@
       );
 
       &:hover {
-        color: $text-04;
         border-color: $hover-danger;
+        color: $text-04;
       }
 
       &:focus {
-        color: $text-04;
         background-color: $danger-01;
+        color: $text-04;
       }
 
       &:active {
-        color: $text-04;
         border-color: $active-danger;
+        color: $text-04;
       }
 
       &:disabled,
@@ -327,8 +327,8 @@
       &.#{$prefix}--btn--disabled,
       &.#{$prefix}--btn--disabled:hover,
       &.#{$prefix}--btn--disabled:focus {
-        color: $disabled-03;
         background: transparent;
+        color: $disabled-03;
         outline: none;
       }
     }
@@ -363,9 +363,9 @@
       &.#{$prefix}--btn--disabled,
       &.#{$prefix}--btn--disabled:hover,
       &.#{$prefix}--btn--disabled:focus {
-        color: $disabled;
-        background: transparent;
         border-color: transparent;
+        background: transparent;
+        color: $disabled;
         outline: none;
       }
 

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -16,44 +16,44 @@
 
   position: relative;
   display: inline-flex;
+  max-width: rem(320px);
+  min-height: $button-height;
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
-  max-width: rem(320px);
-  min-height: $button-height;
+  padding: $button-padding;
   // Fix to remove added margins on buttons in safari (see #5155)
   margin: 0;
-  padding: $button-padding;
-  text-align: left;
-  text-decoration: none;
-  vertical-align: top;
   border-radius: $button-border-radius;
-  outline: none;
   cursor: pointer;
+  outline: none;
+  text-align: left;
+  text-decoration: none;
   transition: background $duration--fast-01 motion(entrance, productive),
     box-shadow $duration--fast-01 motion(entrance, productive),
     border-color $duration--fast-01 motion(entrance, productive),
     outline $duration--fast-01 motion(entrance, productive);
+  vertical-align: top;
 
   &:disabled,
   &:hover:disabled,
   &:focus:disabled,
   &.#{$prefix}--btn--disabled,
   &.#{$prefix}--btn--disabled:hover,
   &.#{$prefix}--btn--disabled:focus {
-    color: $disabled-03;
-    background: $disabled-02;
     border-color: $disabled-02;
+    background: $disabled-02;
     box-shadow: none;
+    color: $disabled-03;
     cursor: not-allowed;
   }
 
   .#{$prefix}--btn__icon {
     position: absolute;
     right: rem(16px);
-    flex-shrink: 0;
     width: rem(16px);
     height: rem(16px);
+    flex-shrink: 0;
   }
 }
 
@@ -68,11 +68,11 @@
   $icon-color,
   $active-color
 ) {
-  color: $font-color;
-  background-color: $bg-color;
-  border-color: $border-color;
-  border-style: solid;
   border-width: $button-outline-width;
+  border-style: solid;
+  border-color: $border-color;
+  background-color: $bg-color;
+  color: $font-color;
 
   &:hover {
     background-color: $hover-bg-color;

diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -85,12 +85,13 @@
     // different checkbox states.
     width: rem(16px);
     height: rem(16px);
+    border: 1px solid $icon-01;
+
     // increase left margin for #6480
     margin: rem(2px) rem(2px) rem(2px) rem(3px);
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
-    border: 1px solid $icon-01;
     border-radius: 1px;
     content: '';
   }
@@ -102,13 +103,13 @@
     left: rem(7px);
     width: rem(9px);
     height: rem(5px);
-    margin-top: rem(-3px) #{'/*rtl:0rem*/'};
-    background: none;
     border-bottom: 2px solid $inverse-01;
     border-left: 2px solid $inverse-01;
+    margin-top: rem(-3px) #{'/*rtl:0rem*/'};
+    background: none;
+    content: '';
     transform: scale(0) rotate(-45deg);
     transform-origin: bottom right #{'/*rtl:center*/'};
-    content: '';
   }
 
   //----------------------------------------------
@@ -120,9 +121,9 @@
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before {
-    background-color: $icon-01;
-    border-color: $icon-01;
     border-width: 1px;
+    border-color: $icon-01;
+    background-color: $icon-01;
   }
 
   // Display the check