style: fix stylelint errors

vtex · Nov 30, 2023 · 4918640 · 4918640
1 parent 589e603
commit 4918640
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 86 deletions.
diff --git a/packages/components/src/checkbox/checkbox.css b/packages/components/src/checkbox/checkbox.css
@@ -7,7 +7,6 @@
 @layer sl-components {
   [data-sl-checkbox] {
     color: var(--sl-fg);
-    width: var(--sl-checkbox-size);
     height: var(--sl-checkbox-size);
     display: flex;
     width: fit-content;

diff --git a/packages/components/src/grid/grid-cell.css b/packages/components/src/grid/grid-cell.css
@@ -1,11 +1,11 @@
 @layer sl-components {
   [data-sl-grid-cell] {
+    grid-area: var(--sl-grid-cell-area);
+    grid-column: var(--sl-grid-cell-column);
+    grid-row: var(--sl-grid-cell-row);
     grid-column-start: var(--sl-grid-cell-columnStart);
     grid-column-end: var(--sl-grid-cell-columnEnd);
     grid-row-start: var(--sl-grid-cell-rowStart);
     grid-row-end: var(--sl-grid-cell-rowEnd);
-    grid-column: var(--sl-grid-cell-column);
-    grid-row: var(--sl-grid-cell-row);
-    grid-area: var(--sl-grid-cell-area);
   }
 }
diff --git a/packages/components/src/radio/radio.css b/packages/components/src/radio/radio.css
@@ -16,41 +16,6 @@
       align-items: center;
       justify-content: center;
 
-      &:focus {
-        box-shadow: var(--sl-element-focus-ring);
-      }
-
-      &:hover {
-        border: var(--sl-element-border-hover);
-      }
-
-      &:checked {
-        background-color: var(--sl-element-bg-checked);
-        border: var(--sl-element-border-checked);
-
-        &:hover {
-          border: var(--sl-element-border-checked);
-        }
-
-        &:after {
-          background-color: var(--sl-element-check-bg);
-        }
-
-        &:focus {
-          box-shadow: var(--sl-element-focus-ring-checked);
-        }
-      }
-
-      &:after {
-        content: '';
-        width: 0.5rem;
-        height: 0.5rem;
-        display: block;
-        border-radius: var(--sl-border-radius-full);
-        background-color: transparent;
-        position: absolute;
-      }
-
       &[data-error='false'] {
         --sl-element-border: var(--sl-border-strong);
         --sl-element-border-hover: var(--sl-border-strong-hover);
@@ -73,6 +38,24 @@
         --sl-element-focus-ring-checked: var(--sl-focus-ring-accent);
       }
 
+      &:focus {
+        box-shadow: var(--sl-element-focus-ring);
+      }
+
+      &:hover {
+        border: var(--sl-element-border-hover);
+      }
+
+      &:after {
+        content: '';
+        width: 0.5rem;
+        height: 0.5rem;
+        display: block;
+        border-radius: var(--sl-border-radius-full);
+        background-color: transparent;
+        position: absolute;
+      }
+
       &:disabled {
         --sl-element-border: var(--sl-border-disabled);
         --sl-element-border-hover: var(--sl-border-disabled);
@@ -83,6 +66,34 @@
         --sl-element-focus-ring: none;
         --sl-element-focus-ring-checked: none;
       }
+
+      &:checked {
+        background-color: var(--sl-element-bg-checked);
+        border: var(--sl-element-border-checked);
+
+        &:disabled {
+          --sl-element-border: var(--sl-border-disabled);
+          --sl-element-border-hover: var(--sl-border-disabled);
+          --sl-element-bg: var(--sl-bg-disabled);
+          --sl-element-border-checked: var(--sl-border-disabled);
+          --sl-element-bg-checked: var(--sl-bg-disabled);
+          --sl-element-check-bg: var(--sl-fg-disabled);
+          --sl-element-focus-ring: none;
+          --sl-element-focus-ring-checked: none;
+        }
+
+        &:hover {
+          border: var(--sl-element-border-checked);
+        }
+
+        &:after {
+          background-color: var(--sl-element-check-bg);
+        }
+
+        &:focus {
+          box-shadow: var(--sl-element-focus-ring-checked);
+        }
+      }
     }
   }
 }
diff --git a/packages/components/src/search/search.css b/packages/components/src/search/search.css
@@ -26,26 +26,6 @@
       border: var(--sl-border-strong-hover);
     }
 
-    &[data-disabled='true'] {
-      border: var(--sl-border-disabled);
-      background-color: var(--sl-bg-disabled);
-      color: var(--sl-fg-disabled);
-
-      &:not([data-loading='true']) {
-        & > [data-sl-pre-icon] {
-          color: inherit;
-        }
-      }
-
-      & > [data-sl-search-input] {
-        color: inherit;
-
-        &::placeholder {
-          color: inherit;
-        }
-      }
-    }
-
     & > [data-sl-pre-icon] {
       color: var(--sl-fg-soft);
       flex-shrink: 0;
@@ -59,17 +39,37 @@
       font: var(--sl-text-emphasis-font);
       letter-spacing: var(--sl-text-emphasis-letter-spacing);
 
+      &::placeholder {
+        font: var(--sl-text-body-font);
+        letter-spacing: var(--sl-text-body-letter-spacing);
+      }
+
       &:focus {
         outline: none;
 
         &::placeholder {
           color: transparent;
         }
       }
+    }
 
-      &::placeholder {
-        font: var(--sl-text-body-font);
-        letter-spacing: var(--sl-text-body-letter-spacing);
+    &[data-disabled='true'] {
+      border: var(--sl-border-disabled);
+      background-color: var(--sl-bg-disabled);
+      color: var(--sl-fg-disabled);
+
+      &:not([data-loading='true']) {
+        & > [data-sl-pre-icon] {
+          color: inherit;
+        }
+      }
+
+      & > [data-sl-search-input] {
+        color: inherit;
+
+        &::placeholder {
+          color: inherit;
+        }
       }
     }
 

diff --git a/packages/components/src/table/table.css b/packages/components/src/table/table.css
@@ -25,6 +25,27 @@
       }
     }
 
+    &[data-sl-table-density='default'] {
+      [data-sl-table-header-cell],
+      [data-sl-table-cell] {
+        padding: var(--sl-space-2);
+      }
+    }
+
+    &[data-sl-table-density='comfortable'] {
+      [data-sl-table-header-cell],
+      [data-sl-table-cell] {
+        padding: var(--sl-space-1);
+      }
+    }
+
+    &[data-sl-table-density='compact'] {
+      [data-sl-table-header-cell],
+      [data-sl-table-cell] {
+        padding: var(--sl-space-0);
+      }
+    }
+
     &[data-sl-table-sticky-column='true'] {
       > [data-sl-table-header] {
         > [data-sl-table-row] {
@@ -46,26 +67,5 @@
         }
       }
     }
-
-    &[data-sl-table-density='default'] {
-      [data-sl-table-header-cell],
-      [data-sl-table-cell] {
-        padding: var(--sl-space-2);
-      }
-    }
-
-    &[data-sl-table-density='comfortable'] {
-      [data-sl-table-header-cell],
-      [data-sl-table-cell] {
-        padding: var(--sl-space-1);
-      }
-    }
-
-    &[data-sl-table-density='compact'] {
-      [data-sl-table-header-cell],
-      [data-sl-table-cell] {
-        padding: var(--sl-space-0);
-      }
-    }
   }
 }
diff --git a/packages/components/src/virtual/virtual.css b/packages/components/src/virtual/virtual.css
@@ -1,7 +1,4 @@
 @layer sl-components {
-  :where([data-sl-virtual-item]) {
-  }
-
   [data-sl-virtual-item][data-sl-virtual-dynamic='false'] {
     position: absolute;
     top: 0;