From 049b12eb34be6b0be6d4bebc8211ae9df533fabe Mon Sep 17 00:00:00 2001 From: sakofchit Date: Wed, 10 Aug 2022 14:50:26 -0400 Subject: [PATCH] add checkbox + dialogs --- .DS_Store | Bin 10244 -> 10244 bytes README.md | 30 ++++++++- docs/docs.css | 13 ++-- docs/index.html.ejs | 161 ++++++++++++++++++++++++++++---------------- icon/checkmark.svg | 22 ++++++ package.json | 2 +- style.css | 35 ++++------ 7 files changed, 174 insertions(+), 89 deletions(-) create mode 100644 icon/checkmark.svg diff --git a/.DS_Store b/.DS_Store index 87f896ea46ce69302635503d13d8add0e753a754..2e4fb52b463215682ca483e54db2d3cd26462335 100644 GIT binary patch delta 145 zcmZn(XbIS$DiFtPT*JV?z`~%%kj{|FP?DSP;*yk;p9B=+IHdCdzGLw%==P@qWn0T3a JGrPiHb^zJODmefE delta 145 zcmZn(XbIS$DiFu`KZ${XfrUYjA)O(Up(Hoo#U&{xA0)=H`3uj<8-7O|QRP$c$`@o9 z1}Ep|76A1yFtBcz+$`{#>D;8v1%h#mOo_iXUl6*+!Mxx{_2gP
-
@@ -42,13 +55,11 @@

System.css

A design system for building retro inspired interfaces

-

Intro

+

Intro

System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.

-

Usage

-

Components

@@ -59,7 +70,7 @@
— Apple HI Guidelines, p. 204
-

A standard button measures 59px wide and 20px tall. We use the btn class for these buttons

+

A standard button measures 59px wide and 20px tall. We use the .btn class for these buttons

<%- example(` @@ -106,7 +117,7 @@
-

Radio Buttons

+

Radio Buttons

A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time. @@ -134,6 +145,37 @@
+ +
+

Checkboxes

+
+
+ Checkboxes, like radio buttons, provide alternative choices for users. A + checkbox is a square with label text next to it +
— Apple HI Guidelines, p. 211
+
+ +

Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.

+ + <%- example(` +
+ + +
+
+ + +
+
+ + +
+ + `)%> + + +
+

Dialogs

@@ -145,12 +187,12 @@

- A basic dialog is just a box with text in it. + A basic dialog is just a box with text in it. We use the .standard-dialog class here.

<%- example(` -
+

The Macintosh Finder, Version 1.0 (18 Jan 84)

© 1984 Apple Computer

@@ -158,44 +200,6 @@ `)%> -

- We can also have a modal dialog box, which typically has some interactive component within it. -

- - <%- example(` -
-
- -
-

Modal Dialog

-
-
- - -
-
- - -
-
- - -
- -
- -
- - -
- -
- - -
-
- `)%> -

A modeless dialog box looks like a window without a size box, zoom box, or scroll bars. @@ -223,6 +227,44 @@

`)%> + +

+ We can also have a modal dialog box, which typically has some interactive component within it. It has a double-outline border. We achieve this by using a nested div. The outer div uses the .outer-border class and the .inner-border +

+ + <%- example(` +
+
+ +
+

Modal Dialog

+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ + +
+ +
+ + +
+
+ `)%>
@@ -233,16 +275,17 @@
— Apple HI Guidelines, p. 176
-

Alert boxes also have a double-outline frame. T

+

Like modal dialogs, alert boxes also have a double-outline frame. The empty square is where you'd place an icon.

<%- example(`
-
+
-

This is a standard alert box. The text would be placed here. This is where more text appears

+

This is a standard alert box. The text would be placed here. + This is where more text appears

@@ -354,7 +397,7 @@
-

Text Box

+

Text Box

The place or places in a dialog box where information can be typed. Also called text entry field. @@ -460,7 +503,7 @@
-

Window Contents

+

Window Contents

@@ -468,7 +511,7 @@
— Apple HI Guidelines, p. 134
-

This is a window (without stuff in it)

+

This is a window (without stuff in it). To create a basic window, we simply use the .window class.

<%- example(` @@ -554,14 +597,14 @@
-

Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css.

+

Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css. The Chicago 12pt and Geneva 9pt fonts are recreations by @blogmywiki

-

It's also still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.

+

System.css is still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.

If you find a bug, consider opening an issue here. If there's something that you'd like to add, please feel free to create a PR!

-

If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)

+

If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)

diff --git a/icon/checkmark.svg b/icon/checkmark.svg new file mode 100644 index 0000000..c682cd4 --- /dev/null +++ b/icon/checkmark.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index ed3fecb..2e0e26f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sakun/system.css", - "version": "0.1.0", + "version": "0.1.1", "description": "A design system for building retro Apple interfaces", "main": "dist/system.css", "directories": { diff --git a/style.css b/style.css index 560ef7c..72c7d26 100644 --- a/style.css +++ b/style.css @@ -32,9 +32,9 @@ var(--radio-label-spacing); --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); - --checkmark-width: 7px; - --checkmark-top: 3px; - --checkmark-left: 3px; + --checkmark-width: 13px; + --checkmark-top: 1.5px; + --checkmark-left: 1.5px; } @font-face { @@ -417,6 +417,12 @@ input[type="radio"] + label::before { height: 20px; } +input[type="checkbox"] + label::before { + border: 1.5px solid black; + width: 20px; + height: 20px; +} + input[type="radio"], input[type="checkbox"] { appearance: none; @@ -432,6 +438,7 @@ input[type="checkbox"] { input[type="radio"] + label, input[type="checkbox"] + label { line-height: 13px; + padding-left: 5px; } input[type="radio"] + label { @@ -451,9 +458,6 @@ input[type="radio"] + label::before { background: svg-load("./icon/radio-border.svg"); } -input[type="radio"]:active + label::before { - background: svg-load("./icon/radio-border-disabled.svg"); -} input[type="radio"]:checked + label::after { content: ""; @@ -466,19 +470,6 @@ input[type="radio"]:checked + label::after { background: svg-load("./icon/radio-dot.svg"); } -input[type="radio"]:focus + label, -input[type="checkbox"]:focus + label { - outline: 1px dotted #000000; -} - -input[type="radio"][disabled] + label::before { - background: svg-load("./icon/radio-border-disabled.svg"); -} - -input[type="radio"][disabled]:checked + label::after { - background: svg-load("./icon/radio-dot-disabled.svg"); -} - input[type="checkbox"] + label { position: relative; margin-left: var(--checkbox-total-width); @@ -496,10 +487,6 @@ input[type="checkbox"] + label::before { margin-right: var(--radio-label-spacing); } -input[type="checkbox"]:active + label::before { - background: var(--surface); -} - input[type="checkbox"]:checked + label::after { content: ""; display: block; @@ -511,8 +498,10 @@ input[type="checkbox"]:checked + label::after { -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) ); background: svg-load("./icon/checkmark.svg"); + background-repeat: no-repeat; } + input[type="checkbox"][disabled] + label::before { background: var(--surface); }