Merge pull request #28 from oddbird/consistent-sass-formatting

[consistent-sass-formatting] Make sure properties are written consistently (remove nesting)
sass · Mar 28, 2023 · ceebd42 · ceebd42
2 parents 85c992d + 8c0a930
commit ceebd42
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 87 deletions.
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -18,6 +18,8 @@ rules:
   color-function-notation: null
   color-named: always-where-possible
   custom-property-pattern: null
+  # https://github.com/stylelint/stylelint/issues/6741
+  function-url-quotes: null
   function-url-no-scheme-relative: true
   number-max-precision: null
   selector-class-pattern: null

diff --git a/source/assets/sass/components/_alerts.scss b/source/assets/sass/components/_alerts.scss
@@ -7,12 +7,8 @@
   background: var(--alert-bg, var(--sl-color--highlight));
   color: var(--sl-color--white);
   font-size: var(--sl-font-size--small);
-
-  padding: {
-    top: var(--alert-padding-block, var(--sl-gutter--minus));
-    bottom: var(--alert-padding-block, var(--sl-gutter--minus));
-  }
-
+  padding-bottom: var(--alert-padding-block, var(--sl-gutter--minus));
+  padding-top: var(--alert-padding-block, var(--sl-gutter--minus));
   text-align: var(--alert-align, center);
 
   p,

diff --git a/source/assets/sass/components/_lists.scss b/source/assets/sass/components/_lists.scss
@@ -21,17 +21,13 @@
     @include breakpoints.sl-breakpoint--large {
       ul {
         display: flex;
-        margin: {
-          right: var(--sl-gutter--half-negative);
-          left: var(--sl-gutter--half-negative);
-        }
+        margin-left: var(--sl-gutter--half-negative);
+        margin-right: var(--sl-gutter--half-negative);
       }
 
       li {
-        padding: {
-          right: var(--sl-gutter--half);
-          left: var(--sl-gutter--half);
-        }
+        padding-left: var(--sl-gutter--half);
+        padding-right: var(--sl-gutter--half);
       }
     }
   }
@@ -118,10 +114,8 @@
 }
 
 .sl-c-description-list--horizontal {
-  margin: {
-    right: var(--sl-gutter--negative);
-    left: var(--sl-gutter--negative);
-  }
+  margin-left: var(--sl-gutter--negative);
+  margin-right: var(--sl-gutter--negative);
 
   &,
   > div {

diff --git a/source/assets/sass/components/_tables.scss b/source/assets/sass/components/_tables.scss
@@ -22,10 +22,7 @@
     &-responsive {
       margin-bottom: var(--sl-gutter--sesqui);
       width: 100%;
-      overflow: {
-        x: auto;
-        y: hidden;
-      }
+      overflow: auto hidden;
 
       table {
         margin-bottom: 0;

diff --git a/source/assets/sass/layout/_containers.scss b/source/assets/sass/layout/_containers.scss
@@ -2,22 +2,15 @@
 @use '../functions';
 
 .sl-l-container {
-  margin: {
-    right: auto;
-    left: auto;
-  }
-  padding: {
-    right: var(--sl-gutter);
-    left: var(--sl-gutter);
-  }
-
+  margin-left: auto;
+  margin-right: auto;
   max-width: functions.sl-px-to-rem(1920px);
+  padding-left: var(--sl-gutter);
+  padding-right: var(--sl-gutter);
 
   @include breakpoints.sl-breakpoint--small {
-    padding: {
-      right: var(--sl-gutter--double);
-      left: var(--sl-gutter--double);
-    }
+    padding-left: var(--sl-gutter--double);
+    padding-right: var(--sl-gutter--double);
   }
 
   &--small {

diff --git a/source/assets/sass/layout/_grid-system.scss b/source/assets/sass/layout/_grid-system.scss
@@ -122,43 +122,31 @@
       }
 
       &--gutters {
-        margin: {
-          right: var(--sl-gutter--negative);
-          left: var(--sl-gutter--negative);
-        }
+        margin-left: var(--sl-gutter--negative);
+        margin-right: var(--sl-gutter--negative);
 
         > .sl-l-grid__column {
-          padding: {
-            right: var(--sl-gutter);
-            left: var(--sl-gutter);
-          }
+          padding-left: var(--sl-gutter);
+          padding-right: var(--sl-gutter);
         }
 
         &-large {
-          margin: {
-            right: var(--sl-gutter--double-negative);
-            left: var(--sl-gutter--double-negative);
-          }
+          margin-left: var(--sl-gutter--double-negative);
+          margin-right: var(--sl-gutter--double-negative);
 
           > .sl-l-grid__column {
-            padding: {
-              right: var(--sl-gutter--double);
-              left: var(--sl-gutter--double);
-            }
+            padding-left: var(--sl-gutter--double);
+            padding-right: var(--sl-gutter--double);
           }
         }
 
         &-small {
-          margin: {
-            right: var(--sl-gutter--half-negative);
-            left: var(--sl-gutter--half-negative);
-          }
+          margin-left: var(--sl-gutter--half-negative);
+          margin-right: var(--sl-gutter--half-negative);
 
           > .sl-l-grid__column {
-            padding: {
-              right: var(--sl-gutter--half);
-              left: var(--sl-gutter--half);
-            }
+            padding-left: var(--sl-gutter--half);
+            padding-right: var(--sl-gutter--half);
           }
         }
       }

diff --git a/source/assets/sass/layout/_holy-grail.scss b/source/assets/sass/layout/_holy-grail.scss
@@ -21,19 +21,15 @@
       &__body {
         flex: 1 0 auto;
         flex-direction: row;
-        margin: {
-          right: var(--sl-gutter--double-negative);
-          left: var(--sl-gutter--double-negative);
-        }
+        margin-left: var(--sl-gutter--double-negative);
+        margin-right: var(--sl-gutter--double-negative);
       }
 
       &__main,
       &__navigation,
       &__complementary {
-        padding: {
-          right: var(--sl-gutter--double);
-          left: var(--sl-gutter--double);
-        }
+        padding-left: var(--sl-gutter--double);
+        padding-right: var(--sl-gutter--double);
       }
 
       &__main {

diff --git a/source/assets/sass/layout/_sections.scss b/source/assets/sass/layout/_sections.scss
@@ -1,18 +1,14 @@
 .sl-l-section {
-  margin: {
-    top: var(--sl-gutter--triple);
-    bottom: var(--sl-gutter--triple);
-  }
-  padding: {
-    top: var(--sl-gutter--triple);
-    bottom: var(--sl-gutter--triple);
-  }
+  margin-bottom: var(--section-bottom-margin, var(--sl-gutter--triple));
+  margin-top: var(--section-top-margin, var(--sl-gutter--triple));
+  padding-bottom: var(--sl-gutter--triple);
+  padding-top: var(--sl-gutter--triple);
 
   &:first-child {
-    margin-top: 0;
+    --section-top-margin: 0;
   }
 
   &:last-child {
-    margin-bottom: 0;
+    --section-bottom-margin: 0;
   }
 }
diff --git a/source/assets/sass/visual-design/_typography.scss b/source/assets/sass/visual-design/_typography.scss
@@ -213,20 +213,15 @@ pre {
 
 img {
   display: block;
-  margin: {
-    right: auto;
-    left: auto;
-  }
-
-  max-width: 100%;
   height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
 }
 
 hr {
-  margin: {
-    top: var(--sl-gutter--triple);
-    bottom: var(--sl-gutter--triple);
-  }
+  margin-bottom: var(--sl-gutter--triple);
+  margin-top: var(--sl-gutter--triple);
 }
 
 dd {