chore: lint fixes for stylelint

nl-design-system · Oct 31, 2021 · f349a06 · f349a06
1 parent d2cd062
commit f349a06
Show file tree

Hide file tree

Showing 26 changed files with 79 additions and 62 deletions.
diff --git a/components/badge-data/bem.scss b/components/badge-data/bem.scss
@@ -7,6 +7,7 @@
 
 .utrecht-badge-data {
   @extend .utrecht-badge;
+
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }
diff --git a/components/badge-status/bem.scss b/components/badge-status/bem.scss
@@ -7,6 +7,7 @@
 
 .utrecht-badge-status {
   @extend .utrecht-badge;
+
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }

diff --git a/components/breadcrumb/bem.scss b/components/breadcrumb/bem.scss
@@ -20,8 +20,8 @@
   --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
   --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
   --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
-  font-family: var(--utrecht-document-font-family, inherit);
 
+  font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-breadcrumb-font-size);
   text-transform: var(--utrecht-document-text-transform, inherit);
 }
@@ -55,6 +55,7 @@ ol.utrecht-breadcrumb__list {
 .utrecht-breadcrumb--arrows {
   /* https://css-tricks.com/triangle-breadcrumbs/ */
   --utrecht-breadcrumb-arrow-size: 24px;
+
   overflow: hidden;
 
   .utrecht-breadcrumb__link {

diff --git a/components/button/bem.scss b/components/button/bem.scss
@@ -68,7 +68,7 @@
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-button:focus:not(:disabled):not([aria-disabled="true"]):not(.utrecht-button--disabled) {
     @extend .utrecht-button--focus;
     @extend .utrecht-button--focus-visible;
@@ -77,7 +77,7 @@
   /* override the `:focus` selector above */
   /* stylelint-disable-next-line no-descending-specificity */
   .utrecht-button:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-button:focus-visible {

diff --git a/components/checkbox/bem.scss b/components/checkbox/bem.scss
@@ -41,5 +41,5 @@
     @extend .utrecht-checkbox--disabled;
   }
 
-  @include utrecht-focus-pseudo-classes-backwards-compatible();
+  @include utrecht-focus-pseudo-classes-backwards-compatible;
 }
diff --git a/components/common/focus/_bem.scss b/components/common/focus/_bem.scss
@@ -25,7 +25,7 @@ $utrecht-focus-visible-fallback: true !default;
 }
 
 @mixin utrecht-focus-visible {
-  @include utrecht-focus-ring();
+  @include utrecht-focus-ring;
 }
 
 @mixin utrecht-focus-pseudo-classes {
@@ -41,9 +41,9 @@ $utrecht-focus-visible-fallback: true !default;
 // use this mixin instead of the `utrecht-focus-pseudo-classes` mixin.
 @mixin utrecht-focus-pseudo-classes-backwards-compatible {
   &:focus {
-    @include utrecht-focus-ring();
+    @include utrecht-focus-ring;
   }
   &:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 }
diff --git a/components/custom-checkbox/bem.scss b/components/custom-checkbox/bem.scss
@@ -8,6 +8,7 @@
 
 .utrecht-custom-checkbox {
   --utrecht-icon-size: var(--utrecht-custom-checkbox-icon-size, calc(0.75 * var(--utrecht-custom-checkbox-size)));
+
   display: inline-block;
   height: var(--utrecht-custom-checkbox-size);
   position: relative;
@@ -23,6 +24,7 @@
 
 .utrecht-custom-checkbox__input {
   @include reset-input-checkbox;
+
   height: var(--utrecht-custom-checkbox-size);
   opacity: 0%;
   width: var(--utrecht-custom-checkbox-size);
@@ -92,7 +94,7 @@
 }
 
 .utrecht-custom-checkbox__box--focus {
-  @include utrecht-focus();
+  @include utrecht-focus;
 
   background-color: var(
     --utrecht-custom-checkbox-focus-background-color,
@@ -104,7 +106,7 @@
 }
 
 .utrecht-custom-checkbox__box--focus-visible {
-  @include utrecht-focus-visible();
+  @include utrecht-focus-visible;
 }
 
 .utrecht-custom-checkbox__input:indeterminate ~ .utrecht-custom-checkbox__box {
@@ -113,11 +115,11 @@
 
 .utrecht-custom-checkbox__input:focus ~ .utrecht-custom-checkbox__box {
   @extend .utrecht-custom-checkbox__box--focus;
-  @include utrecht-focus-ring();
+  @include utrecht-focus-ring;
 }
 
 .utrecht-custom-checkbox__input:focus:not(:focus-visible) ~ .utrecht-custom-checkbox__box {
-  @include utrecht-focus-ring-reset();
+  @include utrecht-focus-ring-reset;
 }
 
 .utrecht-custom-checkbox__icon--checked,

diff --git a/components/digid-button/bem.scss b/components/digid-button/bem.scss
@@ -7,6 +7,7 @@
   --utrecht-button-min-block-size: var(--utrecht-digid-button-block-size, 50px);
   --utrecht-logo-max-height: var(--utrecht-digid-button-block-size, 50px);
   --utrecht-logo-max-width: var(--utrecht-digid-button-block-size, 50px);
+
   block-size: var(--utrecht-digid-button-block-size, 50px);
   display: inline-flex;
   gap: var(--utrecht-space-inline-sm);

diff --git a/components/icon/stencil.scss b/components/icon/stencil.scss
@@ -5,6 +5,7 @@
 
 :host {
   display: inline-block;
+
   /* prevent custom element dimensions to be larger than icon size because of line-height */
   height: var(--utrecht-icon-size);
   width: var(--utrecht-icon-size);

diff --git a/components/link-list/bem.scss b/components/link-list/bem.scss
@@ -19,10 +19,10 @@
 /* reset before other stylesheets */
 .utrecht-link-list,
 .utrecht-link-list--html-ul {
-  @include reset-ul();
+  @include reset-ul;
 
   & > li {
-    @include reset-li();
+    @include reset-li;
   }
 }
 

diff --git a/components/link-social/bem.scss b/components/link-social/bem.scss
@@ -5,6 +5,7 @@
 
 .utrecht-link-social {
   --utrecht-icon-color: var(--utrecht-color-white);
+
   background-color: var(--utrecht-color-red-40);
   border: 2px solid var(--utrecht-color-white);
   border-radius: 50%;

diff --git a/components/link/bem.scss b/components/link/bem.scss
@@ -30,26 +30,27 @@
 }
 
 .utrecht-link--focus {
-  @include utrecht-focus();
+  @include utrecht-focus;
+
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
 }
 
 .utrecht-link--focus-visible {
-  @include utrecht-focus-visible();
+  @include utrecht-focus-visible;
 }
 
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-link:focus {
     @extend .utrecht-link--focus;
     @extend .utrecht-link--focus-visible;
   }
 
   .utrecht-link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-link:focus {

diff --git a/components/link/html.scss b/components/link/html.scss
@@ -24,14 +24,14 @@
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-html a:focus {
     @extend .utrecht-link--focus;
     @extend .utrecht-link--focus-visible;
   }
 
   .utrecht-html a:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-html a:focus {

diff --git a/components/mapcontrolbutton/bem.scss b/components/mapcontrolbutton/bem.scss
@@ -8,6 +8,7 @@
 .utrecht-mapcontrolbutton {
   --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
+
   align-items: center;
   background-color: var(--utrecht-mapcontrolbutton-background-color);
   border-color: var(--utrecht-mapcontrolbutton-border-color);
@@ -29,6 +30,7 @@
 .utrecht-mapcontrolbutton:disabled,
 .utrecht-mapcontrolbutton--disabled {
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
+
   background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
   border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
   color: var(--utrecht-mapcontrolbutton-disabled-color);
@@ -40,13 +42,14 @@
 
 .utrecht-mapcontrolbutton--focus {
   @include utrecht-focus;
+
   --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
 }
 
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled="true"]):not(.utrecht-mapcontrolbutton--disabled) {
     @extend .utrecht-mapcontrolbutton--focus;
     @extend .utrecht-mapcontrolbutton--focus-visible;
@@ -55,7 +58,7 @@
   /* override the `:focus` selector above */
   /* stylelint-disable-next-line no-descending-specificity */
   .utrecht-mapcontrolbutton:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-mapcontrolbutton:focus:not(:disabled):not([aria-disabled="true"]):not(.utrecht-mapcontrolbutton--disabled) {

diff --git a/components/menulijst/bem.scss b/components/menulijst/bem.scss
@@ -46,14 +46,14 @@
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-menulijst__link:focus {
     @extend .utrecht-menulijst__link--focus;
     @extend .utrecht-menulijst__link--focus-visible;
   }
 
   .utrecht-menulijst__link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-menulijst__link:focus {

diff --git a/components/nav-top/bem.scss b/components/nav-top/bem.scss
@@ -57,7 +57,8 @@
 
 .utrecht-topnav__link--focus {
   @include utrecht-focus;
-  background-color: var(--utrecht-topnav-link-focus-background-color); /*#ffd633*/
+
+  background-color: var(--utrecht-topnav-link-focus-background-color); /* #ffd633 */
   color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color));
   text-decoration: var(
     --utrecht-topnav-link-focus-text-decoration,
@@ -72,14 +73,14 @@
 // The workaround for missing `:focus-visible` support makes the code quite complex,
 // keep the ideal version around to restore it easily when browser support improves.
 
-@if ($utrecht-focus-visible-fallback) {
+@if $utrecht-focus-visible-fallback {
   .utrecht-topnav__link:focus {
     @extend .utrecht-topnav__link--focus;
     @extend .utrecht-topnav__link--focus-visible;
   }
 
   .utrecht-topnav__link:focus:not(:focus-visible) {
-    @include utrecht-focus-ring-reset();
+    @include utrecht-focus-ring-reset;
   }
 } @else {
   .utrecht-topnav__link:focus {