fix: Convert stylesheet from nested to "classic" CSS (#2)

Author: nfreear

.github/workflows/node.js.yml

@@ -1,6 +1,6 @@
 # https://github.com/actions/starter-workflows/blob/main/ci/node.js.yml
 
-name: Lint
+name: Node.js CI
 
 on: [push, pull_request]
 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
@@ -9,6 +9,7 @@ env:
 
 jobs:
   lint:
+    name: CSS Lint
     runs-on: ubuntu-latest
 
     steps:

README.md

@@ -1,4 +1,6 @@
 
+[![Node.js CI][ci-img]][ci]
+
 # Native HTML #
 
 Examples and resources for using newer native HTML5 elements, including `<dialog>`, `<details>`, and `<output>`.
@@ -11,3 +13,5 @@ A stylesheet to easily position a native HTML `<dialog>` element on the page, to
 
 [gh]: https://github.com/nfreear/native-html
 [pos]: https://github.com/nfreear/native-html/tree/main/dialog/position#readme
+[ci]: https://github.com/nfreear/native-html/actions/workflows/node.js.yml
+[ci-img]: https://github.com/nfreear/native-html/actions/workflows/node.js.yml/badge.svg

csslint.json

@@ -1,7 +1,8 @@
 {
   "format": "compact",
+  "exclude-list": "node_modules",
   "ignore": [
-    "adjoining-classes"
+    "empty-rules"
   ],
   "warnings": [],
   "errors": []

dialog/position/index.css

@@ -1,53 +1,52 @@
 /*
   Easily position the native HTML <dialog> element, using a 'data' attribute.
 
+  License: MIT.
   Copyright © Nick Freear, 05-April-2025.
 */
 
-dialog {
-  &[ data-position ] {
-    margin: 0;
-  }
-
-  &[ data-position = top-left ] {
-    /* Empty on purpose! */
-  }
-
-  &[ data-position = top ] {
-    width: 100%;
-  }
-
-  &[ data-position = left ] {
-    height: 100%;
-  }
-
-  &[ data-position = right ] {
-    transform: translateX(-100%);
-    left: 100%;
-    height: 100%;
-  }
-
-  &[ data-position = bottom ] {
-    transform: translateY(-100%);
-    top: 100%;
-    width: 100%;
-  }
-
-  &[ data-position = bottom-left ] {
-    transform: translateY(-100%);
-    top: 100%;
-  }
-
-  &[ data-position = bottom-right ] {
-    transform: translate(-100%, -100%);
-    left: 100%;
-    top: 100%;
-  }
-
-  &[ data-position = top-right ] {
-    transform: translateX(-100%);
-    left: 100%;
-  }
+dialog[ data-position ] {
+  margin: 0;
+}
+
+dialog[ data-position = top-left ] {
+  /* Empty on purpose! */
+}
+
+dialog[ data-position = top ] {
+  width: 100%;
+}
+
+dialog[ data-position = left ] {
+  height: 100%;
+}
+
+dialog[ data-position = right ] {
+  height: 100%;
+  left: 100%;
+  transform: translateX(-100%);
+}
+
+dialog[ data-position = bottom ] {
+  top: 100%;
+  transform: translateY(-100%);
+  width: 100%;
+}
+
+dialog[ data-position = bottom-left ] {
+  top: 100%;
+  transform: translateY(-100%);
+}
+
+dialog[ data-position = bottom-right ] {
+  left: 100%;
+  top: 100%;
+  transform: translate(-100%, -100%);
+}
+
+dialog[ data-position = top-right ] {
+  left: 100%;
+  transform: translateX(-100%);
 }
 
 /* End. */