fix(core/styles): lint

siemens · Nov 3, 2022 · aaa034c · aaa034c
1 parent 5f4b802
commit aaa034c
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 113 deletions.
diff --git a/packages/core/scss/components/_buttons.scss b/packages/core/scss/components/_buttons.scss
@@ -37,10 +37,7 @@
   }
 }
 
-$button-categories: (
-  primary,
-  secondary
-);
+$button-categories: (primary, secondary);
 
 @mixin btn($name, $enable-border: true) {
   .btn-#{$name} {
@@ -81,7 +78,6 @@ $button-categories: (
     }
 
     &.selected {
-
       &.hover,
       &:hover {
         background-color: var(--theme-btn-#{$name}--background--selected-hover);
@@ -91,21 +87,26 @@ $button-categories: (
 
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active,
-    .show>&.dropdown-toggle {
+    .show > &.dropdown-toggle {
       @if $enable-border {
-        border-color: var(--theme-btn-#{$name}--border-color--active) !important;
+        border-color: var(
+          --theme-btn-#{$name}--border-color--active
+        ) !important;
       }
 
-      background-color: var(--theme-btn-#{$name}--background--active) !important;
+      background-color: var(
+        --theme-btn-#{$name}--background--active
+      ) !important;
       color: var(--theme-btn-#{$name}--color--active) !important;
     }
 
     &.selected {
-
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active,
-      .show>&.dropdown-toggle {
-        background-color: var(--theme-btn-#{$name}--background--selected-active);
+      .show > &.dropdown-toggle {
+        background-color: var(
+          --theme-btn-#{$name}--background--selected-active
+        );
         color: var(--theme-btn-#{$name}--color--selected-active);
       }
     }

diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
@@ -18,28 +18,27 @@
   }
 
   .ag-checkbox-input-wrapper {
-
     [type='checkbox']:not(:checked),
     [type='checkbox']:checked {
       position: absolute;
       visibility: unset;
     }
   }
 
-  [type='checkbox']:not(:checked)+label,
-  [type='checkbox']:checked+label {
+  [type='checkbox']:not(:checked) + label,
+  [type='checkbox']:checked + label {
     position: relative;
     line-height: $size;
     user-select: none;
 
     color: var(--theme-checkbox-label--color);
   }
 
-  [type='checkbox']:not(:disabled)+label {
+  [type='checkbox']:not(:disabled) + label {
     cursor: pointer;
   }
 
-  [type='checkbox']+label:before {
+  [type='checkbox'] + label:before {
     content: '';
     width: $size;
     height: $size;
@@ -51,49 +50,54 @@
     background-size: contain;
   }
 
-  [type='checkbox']+label:focus-visible {
+  [type='checkbox'] + label:focus-visible {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
-  [type='checkbox']:focus-visible+label {
+  [type='checkbox']:focus-visible + label {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
   [type='checkbox']:not(:checked) {
-    &+label:before {
+    & + label:before {
       background-color: var(--theme-checkbox-unchecked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color);
     }
 
-    &:hover+label:before {
+    &:hover + label:before {
       background-color: var(--theme-checkbox-unchecked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--hover);
     }
 
-    &:active+label:before {
+    &:active + label:before {
       background-color: var(--theme-checkbox-unchecked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--active);
     }
 
-    &:disabled+label::before {
+    &:disabled + label::before {
       background-color: var(--theme-checkbox-unchecked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--disabled);
     }
   }
 
   [type='checkbox']:checked {
-    &+label:before {
+    & + label:before {
       background-color: var(--theme-checkbox-checked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color);
     }
 
-    &+label:after {
+    & + label:after {
       content: '';
       width: 9px;
       height: 4px;
@@ -108,33 +112,36 @@
       transform: rotate(-45deg) scale(2);
     }
 
-    &:hover+label:before {
+    &:hover + label:before {
       background-color: var(--theme-checkbox-checked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--hover);
     }
 
-    &:active+label:before {
+    &:active + label:before {
       background-color: var(--theme-checkbox-checked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--active);
     }
 
-    &:disabled+label:before {
+    &:disabled + label:before {
       background-color: var(--theme-checkbox-checked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--disabled);
     }
 
-    &:disabled+label::after {
+    &:disabled + label::after {
       border-color: var(--theme-checkbox-checked--color--disabled);
     }
   }
 
-  [type='checkbox']:disabled+label:before {
+  [type='checkbox']:disabled + label:before {
     pointer-events: none;
     opacity: 0.5;
   }
 
   [type='checkbox']:indeterminate {
-    &+label:after {
+    & + label:after {
       content: '';
       display: block;
       width: 14px;
@@ -145,32 +152,36 @@
       left: 5px;
     }
 
-    &+label:before {
+    & + label:before {
       background-color: var(--theme-checkbox-mixed--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color);
     }
 
-    &:hover+label:before {
+    &:hover + label:before {
       background-color: var(--theme-checkbox-mixed--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--hover);
     }
 
-    &:active+label:before {
+    &:active + label:before {
       background-color: var(--theme-checkbox-mixed--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--active);
     }
 
-    &:disabled+label::before {
+    &:disabled + label::before {
       background-color: var(--theme-checkbox-mixed--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--disabled);
     }
 
-    &:disabled+label::after {
+    &:disabled + label::after {
       border-color: var(--theme-checkbox-mixed--color--disabled);
     }
   }
 
-  [type='checkbox']:disabled+label {
+  [type='checkbox']:disabled + label {
     color: var(--theme-checkbox-label--color--disabled);
   }
 }

diff --git a/packages/core/scss/components/_dropdown.scss b/packages/core/scss/components/_dropdown.scss
@@ -47,7 +47,7 @@
     height: 11.562rem;
     margin: 0.937rem 0 0.937rem 0.937rem;
 
-    >* {
+    > * {
       margin-bottom: 1rem;
     }
   }
@@ -62,14 +62,15 @@
 .dropdown-menu {
   background-color: var(--theme-menu--background);
   @include text-default-single;
-  border: var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);
+  border: var(--theme-menu--border-thickness) solid
+    var(--theme-menu--border--color);
   border-radius: var(--theme-menu--border-radius);
   max-width: 100vw;
   padding: $tiny-space 0;
   transition: background-color $default-time;
   box-shadow: var(--theme-menu--box-shadow);
 
-  &.xl>.dropdown-item {
+  &.xl > .dropdown-item {
     height: 2.5rem;
     line-height: 2.187rem;
   }
@@ -87,7 +88,7 @@
   display: flex;
   padding: $tiny-space $small-space;
 
-  ix-icon-button+ix-icon-button {
+  ix-icon-button + ix-icon-button {
     margin-inline-start: $small-space;
   }
 }
@@ -130,13 +131,13 @@
     background-color: var(--theme-menu-item--background--disabled);
   }
 
-  >a,
+  > a,
   a:hover,
   a:active {
     color: var(--theme-color-std-text);
   }
 
-  >.glyph {
+  > .glyph {
     color: var(--theme-menu-item-icon--color);
 
     &.glyph-single-check {
@@ -148,7 +149,7 @@
 }
 
 .dropdown-item {
-  >input[type='checkbox']+label {
+  > input[type='checkbox'] + label {
     margin-bottom: 0px;
 
     &::before {

diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -106,14 +106,14 @@
   align-items: center;
   flex-wrap: nowrap;
 
-  >.glyph {
+  > .glyph {
     display: block;
     position: absolute;
     margin-inline-start: 0.312rem;
     color: var(--theme-color-std-text);
   }
 
-  >input {
+  > input {
     padding-inline-start: 2.2rem;
   }
 }
@@ -140,7 +140,6 @@ textarea {
 }
 
 input {
-
   &.disabled,
   &:disabled {
     color: var(--theme-input--color--disabled);