feat: .button

.github/workflows/npm-publish.yml

@@ -1,23 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: Publish to NPM
-
-on:
-  workflow_dispatch:
-  release:
-    types: [published]
-
-jobs:
-  publish-npm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run release
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "98.css",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "98.css",
-      "version": "0.1.20",
+      "version": "0.1.21",
       "license": "MIT",
       "devDependencies": {
         "chokidar": "^3.3.1",

style.css

@@ -105,6 +105,7 @@ body {
 }
 
 button,
+.button,
 label,
 input,
 legend,
@@ -143,6 +144,7 @@ u {
 }
 
 button,
+.button,
 input[type="submit"],
 input[type="reset"] {
   box-sizing: border-box;
@@ -159,6 +161,7 @@ input[type="reset"] {
 }
 
 button.default,
+.button.default,
 input[type="submit"].default,
 input[type="reset"].default {
   box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
@@ -172,27 +175,30 @@ input[type="reset"].default {
 }
 
 button:not(:disabled):active,
+button:not(:disabled).active,
+.button:not(:disabled):active,
+.button:not(:disabled).active,
 input[type="submit"]:not(:disabled):active,
-input[type="reset"]:not(:disabled):active {
+input[type="submit"]:not(:disabled).active,
+input[type="reset"]:not(:disabled):active,
+input[type="reset"]:not(:disabled).active {
   box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
   text-shadow: 1px 1px var(--text-color);
 }
 
 button.default:not(:disabled):active,
+.button.default:not(:disabled):active,
 input[type="submit"].default:not(:disabled):active,
-input[type="reset"].default:not(:disabled):active {
+input[type="reset"].default:not(:disabled):active,
+button.default:not(:disabled).active,
+.button.default:not(:disabled).active,
+input[type="submit"].default:not(:disabled).active,
+input[type="reset"].default:not(:disabled).active {
   box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
 }
 
-@media (not(hover)) {
-  button:not(:disabled):hover,
-  input[type="submit"]:not(:disabled):hover,
-  input[type="reset"]:not(:disabled):hover {
-    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
-  }
-}
-
 button:focus,
+.button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus {
   outline: 1px dotted #000000;
@@ -200,6 +206,7 @@ input[type="reset"]:focus {
 }
 
 button::-moz-focus-inner,
+.button::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner,
 input[type="reset"]::-moz-focus-inner {
   border: 0;
@@ -213,6 +220,7 @@ input[readonly] + label {
 }
 
 button:disabled,
+.button:disabled,
 input[type="submit"]:disabled,
 input[type="reset"]:disabled,
 :disabled + label {