Compare commits
No commits in common. "592eb87c9eb1fe0812cac722434415789da457fd" and "ffa29f4cd976543a2151c3868cecf07e1e074989" have entirely different histories.
592eb87c9e
...
ffa29f4cd9
6 changed files with 72 additions and 116 deletions
23
.github/workflows/npm-publish.yml
vendored
Normal file
23
.github/workflows/npm-publish.yml
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# 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}}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
## 98.css
|
||||
|
||||
<a href="https://npm.im/98.css"><img height="29" alt="npm" src="https://98badges.now.sh/api/version" /></a>
|
||||
<a href="https://unpkg.com/98.css"><img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" /></a>
|
||||
[](http://npm.im/98.css)
|
||||
[](https://unpkg.com/98.css)
|
||||
|
||||
A design system for building faithful recreations of old UIs.
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ You can run a build manually with `npm run build`. This will write to the `dist/
|
|||
|
||||
Refer to [the GitHub issues page](https://github.com/jdan/98.css/issues) to see bugs in my CSS or report new ones. I'd really like to see your pull requests (especially those new to open-source!) and will happily provide code review. 98.css is a fun, silly project and I'd like to make it a fun place to build your open-source muscle.
|
||||
|
||||
Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe reading my posts on [Bluesky](https://bsky.app/profile/jdan.me). 👋
|
||||
Thank you for checking my little project out, I hope it brought you some joy today. Consider [starring/following along on GitHub](https://github.com/jdan/98.css/stargazers) and maybe subscribing to more fun things on [my twitter](https://twitter.com/jdan). 👋
|
||||
|
||||
### Publishing
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@
|
|||
<li><a href="#tabs">Tabs</a></li>
|
||||
<li><a href="#table-view">TableView</a></li>
|
||||
<li><a href="#progress-indicator">Progress Indicator</a></li>
|
||||
<li><a href="#field-borders">Field borders</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
|
||||
|
|
@ -58,10 +57,10 @@
|
|||
|
||||
<p>
|
||||
<a href="http://npm.im/98.css" rel="nofollow" style="text-decoration: none">
|
||||
<img height="29" alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
|
||||
<img alt="npm" src="https://98badges.now.sh/api/version" style="max-width:100%;">
|
||||
</a>
|
||||
<a href="https://unpkg.com/98.css" rel="nofollow" style="text-decoration: none">
|
||||
<img height="29" alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
|
||||
<img alt="gzip size" src="https://98badges.now.sh/api/size" style="max-width:100%;">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -414,6 +413,34 @@
|
|||
<input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
Other types of HTML5 text inputs are also supported.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Email</label>
|
||||
<input id="text${getCurrentId()}" type="email" value="admin@contoso.com"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Phone</label>
|
||||
<input id="text${getCurrentId()}" type="tel" value="636-555-3226"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Password</label>
|
||||
<input id="text${getCurrentId()}" type="password" value="hunter2"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Favorite Number</label>
|
||||
<input id="text${getCurrentId()}" type="number" value="98"/>
|
||||
</div>
|
||||
<div class="field-row-stacked" style="width: 200px">
|
||||
<label for="text${getNewId()}">Search</label>
|
||||
<input id="text${getCurrentId()}" type="search" value="98 css"/>
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -1046,66 +1073,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h3 id="field-borders">Field borders</a></li></h3>
|
||||
<div>
|
||||
<blockquote>
|
||||
Text boxes, check boxes, drop-down list boxes, spin boxes and list
|
||||
boxes use the <em>field border style</em>. You can also use the style
|
||||
for define the work area within a window. It uses the sunken outer and
|
||||
sunken inner basic border styles.
|
||||
|
||||
For most controls, the interior of the field uses the button highlight
|
||||
color. For text fields, such as text boxes and combo boxes, the
|
||||
interior uses the button face color when the field is read-only or
|
||||
disabled.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 421
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>
|
||||
Status fields use the <em>status field border style</em>. This style
|
||||
uses only the sunken outer basic border style. You use the status
|
||||
field style in status bars and other read-only fields where the
|
||||
content of the file can change dynamically.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 422
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
As mentioned in these guidelines, these styles are used in other
|
||||
contexts than just form elements and status fields such as to indicate
|
||||
work areas and dynamic content. For that reason, we provide three
|
||||
classes for these generic usages, <code>field-border</code>,
|
||||
<code>field-border-disabled</code>, and
|
||||
<code>status-field-border</code>. These classes only define the border
|
||||
and background color and minimal padding, so you will typically need to
|
||||
at least provide some extra padding yourself.
|
||||
|
||||
<%- example(`
|
||||
<div class="field-border" style="padding: 8px">
|
||||
Work area
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
|
||||
<%- example(`
|
||||
<div class="field-border-disabled" style="padding: 8px">
|
||||
Disabled work area
|
||||
</div>
|
||||
`) %>
|
||||
|
||||
<%- example(`
|
||||
<div class="status-field-border" style="padding: 8px">
|
||||
Dynamic content
|
||||
</div>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
|
||||
|
||||
<p>
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "98.css",
|
||||
"version": "0.1.21",
|
||||
"version": "0.1.20",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "98.css",
|
||||
"version": "0.1.21",
|
||||
"version": "0.1.20",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"chokidar": "^3.3.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "98.css",
|
||||
"version": "0.1.21",
|
||||
"version": "0.1.20",
|
||||
"description": "A design system for building faithful recreations of old UIs",
|
||||
"main": "dist/98.css",
|
||||
"directories": {
|
||||
|
|
|
|||
56
style.css
56
style.css
|
|
@ -73,7 +73,6 @@
|
|||
--border-field: inset -1px -1px var(--button-highlight),
|
||||
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
|
||||
inset 2px 2px var(--window-frame);
|
||||
--border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
|
||||
|
||||
/* Tabs */
|
||||
--border-tab: inset -1px 0 var(--window-frame),
|
||||
|
|
@ -105,7 +104,6 @@ body {
|
|||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
label,
|
||||
input,
|
||||
legend,
|
||||
|
|
@ -144,7 +142,6 @@ u {
|
|||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -161,7 +158,6 @@ 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);
|
||||
|
|
@ -175,30 +171,27 @@ 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="submit"]:not(:disabled).active,
|
||||
input[type="reset"]: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,
|
||||
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 {
|
||||
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;
|
||||
|
|
@ -206,7 +199,6 @@ 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;
|
||||
|
|
@ -220,7 +212,6 @@ input[readonly] + label {
|
|||
}
|
||||
|
||||
button:disabled,
|
||||
.button:disabled,
|
||||
input[type="submit"]:disabled,
|
||||
input[type="reset"]:disabled,
|
||||
:disabled + label {
|
||||
|
|
@ -329,7 +320,7 @@ input[type="reset"]:disabled,
|
|||
}
|
||||
|
||||
.status-bar-field {
|
||||
box-shadow: var(--border-status-field);
|
||||
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
|
||||
flex-grow: 1;
|
||||
padding: 2px 3px;
|
||||
margin: 0;
|
||||
|
|
@ -375,7 +366,6 @@ legend {
|
|||
label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
|
|
@ -484,7 +474,6 @@ input[type="checkbox"][disabled]:checked + label::after {
|
|||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
|
|
@ -504,7 +493,6 @@ textarea {
|
|||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="search"],
|
||||
select {
|
||||
|
|
@ -526,7 +514,6 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
|
|||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
input[type="number"],
|
||||
input[type="search"] {
|
||||
|
|
@ -535,14 +522,12 @@ input[type="search"] {
|
|||
}
|
||||
|
||||
input[type="email"]:disabled,
|
||||
input[type="url"]:disabled,
|
||||
input[type="tel"]:disabled,
|
||||
input[type="password"]:disabled,
|
||||
input[type="text"]:disabled,
|
||||
input[type="number"]:disabled,
|
||||
input[type="search"]:disabled,
|
||||
input[type="email"]:read-only,
|
||||
input[type="url"]:read-only,
|
||||
input[type="tel"]:read-only,
|
||||
input[type="password"]:read-only,
|
||||
input[type="text"]:read-only,
|
||||
|
|
@ -568,7 +553,6 @@ select:focus,
|
|||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
|
|
@ -982,21 +966,3 @@ table > tbody > tr > * {
|
|||
background-repeat: repeat;
|
||||
background-size: 18px 100%;
|
||||
}
|
||||
|
||||
.field-border {
|
||||
background: var(--button-highlight);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.field-border-disabled {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-field);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.status-field-border {
|
||||
background: var(--surface);
|
||||
box-shadow: var(--border-status-field);
|
||||
padding: 1px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue