fix: resolve SCSS linting errors

nl-design-system · Aug 14, 2021 · 2fe5e1e · 2fe5e1e
1 parent e2bba79
commit 2fe5e1e
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 46 deletions.
diff --git a/components/breadcrumb/bem.scss b/components/breadcrumb/bem.scss
@@ -39,10 +39,6 @@ ol.utrecht-breadcrumb__list {
   block-size: 100%;
 }
 
-.utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
-  margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
-}
-
 .utrecht-breadcrumb__link {
   background-color: var(--utrecht-breadcrumb-link-background-color);
   padding-block-start: var(--utrecht-breadcrumb-item-padding-block-start, 8px);
@@ -61,11 +57,6 @@ ol.utrecht-breadcrumb__list {
   --utrecht-breadcrumb-arrow-size: 24px;
   overflow: hidden;
 
-  .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
-    padding-inline-start: calc(
-      var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size)
-    );
-  }
   .utrecht-breadcrumb__link {
     position: relative;
     padding-inline-end: 0;
@@ -105,4 +96,14 @@ ol.utrecht-breadcrumb__list {
   .utrecht-breadcrumb__link:focus::after {
     border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
   }
+
+  .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
+    padding-inline-start: calc(
+      var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size)
+    );
+  }
+}
+
+.utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
+  margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
 }
diff --git a/components/form-fieldset/html.scss b/components/form-fieldset/html.scss
@@ -7,7 +7,8 @@
 
 @mixin reset-fieldset {
   border: 0;
-  margin: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   min-width: 0;
   padding-block-end: 0;
   padding-block-start: 0.01em;

diff --git a/components/link-social/bem.scss b/components/link-social/bem.scss
@@ -15,5 +15,5 @@
 }
 
 .utrecht-link-social--distanced {
-  margin-right: 0.6em;
+  margin-inline-end: 0.6em;
 }
diff --git a/components/navigatie sidenav/bem.scss b/components/navigatie sidenav/bem.scss
@@ -53,7 +53,7 @@
 
 /*draw the li item box bottom line*/
 
-.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type ),
+.utrecht-sidenav__item span:not(.utrecht-sidenav__item:last-child span, .utrecht-sidenav__item--has-children span:first-of-type),
 /* .utrecht-sidenav__item--has-children span */ {
   display: block;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
@@ -81,10 +81,6 @@
   text-decoration: none;
 }
 
-/*How to select the parent of the nestsed UL to remove the bottom padding of te link item*/
-ul.utrecht-sidenav__list:has {
-}
-
 .utrecht-sidenav__link--child,
 .utrecht-sidenav__link--child--current {
   display: block;
@@ -98,6 +94,18 @@ ul.utrecht-sidenav__list:has {
   margin-block-end: 0;
 }
 
+.utrecht-sidenav__link::before,
+.utrecht-sidenav__link--sibling::before {
+  background-color: var(--utrecht-sidenav-item-marker-color);
+  left: 26px;
+}
+
+/*Little fix to move the dot to the right*/
+.utrecht-sidenav__link--current::before {
+  background-color: var(--utrecht-sidenav-link-hover-color);
+  left: 27px;
+}
+
 /*Dot for link with siblings */
 .utrecht-sidenav__link::before,
 .utrecht-sidenav__link--sibling::before,
@@ -114,21 +122,6 @@ ul.utrecht-sidenav__list:has {
   box-shadow: 0 0 2px 2px #fff; /*Make var*/
 }
 
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  background-color: var(--utrecht-sidenav-item-marker-color);
-}
-
-.utrecht-sidenav__link::before,
-.utrecht-sidenav__link--sibling::before {
-  left: 26px;
-}
-
-/*Little fix to move the dot to the right*/
-.utrecht-sidenav__link--current::before {
-  left: 27px;
-}
-
 /* Hover layout for mousover on sidenav__link */
 .utrecht-sidenav__link:hover::before,
 .utrecht-sidenav__link--sibling:hover::before {
@@ -208,6 +201,7 @@ ul.utrecht-sidenav__list:has {
   position: absolute;
   top: 16px;
   left: 1.2rem;
+  background-color: transparent;
   transform: translateY(-50%) translateX(-19.5px);
   content: "";
   width: 4px;
@@ -217,12 +211,7 @@ ul.utrecht-sidenav__list:has {
   z-index: 10;
 }
 
-.utrecht-sidenav__link--child::before {
-  background-color: transparent;
-}
-
 /* Make current marker dots bold */
-.utrecht-sidenav__link--current::before,
 .utrecht-sidenav__link--child--current::before {
   background-color: var(--utrecht-sidenav-link-hover-color);
 }

diff --git a/components/paragraph/html.scss b/components/paragraph/html.scss
@@ -5,6 +5,8 @@
 
 @import "bem";
 
+/* stylelint-disable selector-class-pattern */
+
 .utrecht-html p {
   @extend .utrecht-paragraph;
 }

diff --git a/components/table/html.scss b/components/table/html.scss
@@ -5,6 +5,8 @@
 
 @import "./bem";
 
+/* stylelint-disable selector-class-pattern */
+
 .utrecht-html table {
   @extend .utrecht-table;
   @extend .utrecht-table--distanced;
@@ -51,17 +53,23 @@
 }
 
 .utrecht-html table.alternate-row-color {
+  & > tr:nth-child(even) > td,
+  & > tr:nth-child(even) > th {
+    @extend .utrecht-table__row--alternate-even;
+  }
+
   & > tr:nth-child(odd) > td,
-  & > tr:nth-child(odd) > th,
-  & > tbody > tr:nth-child(odd) > td,
-  & > tbody > tr:nth-child(odd) > th {
+  & > tr:nth-child(odd) > th {
     @extend .utrecht-table__row--alternate-odd;
   }
 
-  & > tr:nth-child(even) > td,
-  & > tr:nth-child(even) > th,
   & > tbody > tr:nth-child(even) > td,
   & > tbody > tr:nth-child(even) > th {
     @extend .utrecht-table__row--alternate-even;
   }
+
+  & > tbody > tr:nth-child(odd) > td,
+  & > tbody > tr:nth-child(odd) > th {
+    @extend .utrecht-table__row--alternate-odd;
+  }
 }
diff --git a/components/textbox/html.scss b/components/textbox/html.scss
@@ -6,15 +6,13 @@
 @import "./bem";
 
 .utrecht-html {
-  input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="search"],
   input[type="tel"],
+  input[type="text"],
   input[type="url"] {
-    & {
-      @extend .utrecht-textbox;
-      @extend .utrecht-textbox--html-input;
-    }
+    @extend .utrecht-textbox;
+    @extend .utrecht-textbox--html-input;
   }
 }