You've already forked system.css
mirror of
https://github.com/sakofchit/system.css.git
synced 2026-05-05 06:01:22 +09:00
Merge branch 'patrickhlauke-patrickhlauke-a11y-improvements'
This commit is contained in:
sakofchit
11
README.md
11
README.md
@@ -30,9 +30,9 @@ Here's some starter code to help you get started:
|
||||
<body>
|
||||
<div class="window" style="width:30rem;">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">System.css</h1>
|
||||
<button class="resize"></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
|
||||
@@ -43,9 +43,9 @@ Here's some starter code to help you get started:
|
||||
|
||||
<div class="window" style="width:30rem;">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Search</h1>
|
||||
<button class="hidden"></button>
|
||||
<button aria-label="Resize" disabled class="hidden"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
|
||||
@@ -89,5 +89,4 @@ If you'd like to see what else I'm up to, consider following me on [Twitter](htt
|
||||
|
||||
## Sponsors
|
||||
|
||||
[](https://getcssscan.com/?ref=systemcss)
|
||||
[CSS Scan](https://getcssscan.com/?ref=systemcss): The fastest and easiest way to check, copy and edit CSS
|
||||
[CSS Scan](https://getcssscan.com/?ref=systemcss): The fastest and easiest way to check, copy and edit CSS
|
||||
|
||||
@@ -73,26 +73,23 @@ h3 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.dialog-text {
|
||||
font-family: Chicago_12;
|
||||
font-size: 1em;
|
||||
margin-top: 20px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.modal-text, .alert-text {
|
||||
font-family: Chicago_12;
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.alert-text,
|
||||
.dialog-text,
|
||||
.modal-text,
|
||||
.modeless-text {
|
||||
font-family: Chicago_12;
|
||||
font-size: 1em;
|
||||
vertical-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dialog-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-text, .alert-text {
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Geneva;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>system.css | A design system for building retro Apple-inspired interfaces</title>
|
||||
<link rel="Shortcut Icon" type="image/x-icon" href="icon.png" />
|
||||
@@ -17,38 +17,36 @@
|
||||
<aside>
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"><span class="hidden">Close</span></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Docs</h1>
|
||||
<button class="resize"><span class="hidden">Resize</span></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="window-pane">
|
||||
<ul class="menu-items">
|
||||
<a href="#intro"><li>Intro</li></a>
|
||||
<li>Components</li>
|
||||
<li><a href="#intro">Intro</a></li>
|
||||
<li>Components
|
||||
<ul>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#radio-buttons">Radio Buttons</a></li>
|
||||
<li><a href="#checkboxes">Checkboxes</a></li>
|
||||
<li><a href="#dropdown">Dropdown</a></li>
|
||||
<li><a href="#text-box">Text Box</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Windows
|
||||
<ul>
|
||||
<a href="#buttons"><li>Buttons</li></a>
|
||||
<a href="#radio-buttons"><li>Radio Buttons</li></a>
|
||||
<a href="#checkboxes"><li>Checkboxes</li></a>
|
||||
<a href="#dropdown"><li>Dropdown</li></a>
|
||||
<a href="#text-box"><li>Text Box</li></a>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#window-contents">Window Contents</a></li>
|
||||
<li><a href="#dialogs">Dialogs</a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<li>Windows</li>
|
||||
<ul>
|
||||
<a href="#title-bar"><li>Title Bar</li></a>
|
||||
<a href="#window-contents"><li>Window Contents</li></a>
|
||||
<a href="#dialogs"><li>Dialogs</li></a>
|
||||
</ul>
|
||||
<br>
|
||||
<a href="#contributing"><li>Contributing, Credits, etc.</li></a>
|
||||
|
||||
<br>
|
||||
<li>Sponsors</li>
|
||||
</li>
|
||||
<li><a href="#contributing">Contributing, Credits, etc.</a></li>
|
||||
<li>Sponsors
|
||||
<ul>
|
||||
<a href="https://getcssscan.com/?ref=systemcss" target="_blank"><li>Get CSS Scan browser extension</li></a>
|
||||
<li><a href="https://getcssscan.com/?ref=systemcss" target="_blank">Get CSS Scan browser extension</a></li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,7 +57,7 @@
|
||||
<div class="container">
|
||||
<div class="standard-dialog">
|
||||
<p class="heading center">System.css</p>
|
||||
<p class="desc center">A design system for building retro <img class="apple">-inspired interfaces</p>
|
||||
<p class="desc center">A design system for building retro <span role="img" class="apple" aria-label="Apple"></span>-inspired interfaces</p>
|
||||
|
||||
<h2 class="subheading" id="intro">Intro</h2>
|
||||
<p>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.</p>
|
||||
@@ -89,7 +87,7 @@
|
||||
|
||||
<%- example(`
|
||||
|
||||
<button [[class="btn active"]] class="btn">Active</button>
|
||||
<button [[class="btn active"]]>Active</button>
|
||||
|
||||
`)%>
|
||||
|
||||
@@ -196,14 +194,12 @@
|
||||
<%- example(`
|
||||
|
||||
|
||||
<label class="dropdown">
|
||||
<details class="dropdown">
|
||||
|
||||
<div class="dd-toggle">
|
||||
<summary class="dd-toggle">
|
||||
File
|
||||
</div>
|
||||
|
||||
<input type="checkbox" class="dd-input" id="test">
|
||||
|
||||
</summary>
|
||||
|
||||
<ul class="dd-menu">
|
||||
<li>Action</li>
|
||||
<li>Another action</li>
|
||||
@@ -214,15 +210,13 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<label class="dropdown">
|
||||
<details class="dropdown">
|
||||
|
||||
<div class="dd-toggle">
|
||||
<summary class="dd-toggle">
|
||||
Edit
|
||||
</div>
|
||||
|
||||
<input type="checkbox" class="dd-input" id="test">
|
||||
</summary>
|
||||
|
||||
<ul class="dd-menu">
|
||||
<li>Woah</li>
|
||||
@@ -235,15 +229,13 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<label class="dropdown">
|
||||
<details class="dropdown">
|
||||
|
||||
<div class="dd-toggle">
|
||||
<summary class="dd-toggle">
|
||||
View
|
||||
</div>
|
||||
|
||||
<input type="checkbox" class="dd-input" id="test">
|
||||
</summary>
|
||||
|
||||
<ul class="dd-menu">
|
||||
<li>Action</li>
|
||||
@@ -255,15 +247,13 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</label>
|
||||
</details>
|
||||
|
||||
<label class="dropdown">
|
||||
<details class="dropdown">
|
||||
|
||||
<div class="dd-toggle">
|
||||
<summary class="dd-toggle">
|
||||
Special
|
||||
</div>
|
||||
|
||||
<input type="checkbox" class="dd-input" id="test">
|
||||
</summary>
|
||||
|
||||
<ul class="dd-menu">
|
||||
<li>You probably</li>
|
||||
@@ -272,7 +262,7 @@
|
||||
<li>Idea</li>
|
||||
</ul>
|
||||
|
||||
</label>
|
||||
</details>
|
||||
`)%>
|
||||
|
||||
</div>
|
||||
@@ -290,17 +280,17 @@
|
||||
|
||||
<%- example(`
|
||||
|
||||
<input type="text" placeholder="some cool text"/>
|
||||
<input aria-label="Example text box" type="text" placeholder="some cool text"/>
|
||||
`)%>
|
||||
|
||||
<p>Other types of text are also supported</p>
|
||||
|
||||
<%- example(`
|
||||
<form>
|
||||
<label for="email">Email</label><br>
|
||||
<input type="email" placeholder="panic@thedis.co"/><br>
|
||||
<label for="password">Password</label><br>
|
||||
<input type="password" placeholder="password"/><br><br>
|
||||
<label for="text_email">Email</label><br>
|
||||
<input id="text_email" type="email" placeholder="panic@thedis.co"/><br>
|
||||
<label for="text_pwd">Password</label><br>
|
||||
<input id="text_pwd" type="password" placeholder="password"/><br><br>
|
||||
</form>
|
||||
`)%>
|
||||
|
||||
@@ -337,9 +327,9 @@
|
||||
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">A Title Bar</h1>
|
||||
<button class="hidden"></button>
|
||||
<button aria-label="Resize" disabled class="hidden"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -351,9 +341,9 @@
|
||||
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Also a Title Bar</h1>
|
||||
<button class="resize"></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -399,9 +389,9 @@
|
||||
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Window Without Stuff</h1>
|
||||
<button class="resize"></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -414,9 +404,9 @@
|
||||
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Window With Stuff</h1>
|
||||
<button class="resize"></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
|
||||
@@ -435,9 +425,9 @@
|
||||
|
||||
<div class="window">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Window With Details</h1>
|
||||
<button class="resize"></button>
|
||||
<button aria-label="Resize" class="resize"></button>
|
||||
</div>
|
||||
<div class="details-bar">
|
||||
<span>some</span>
|
||||
@@ -491,7 +481,7 @@
|
||||
<%- example(`
|
||||
|
||||
<div class="standard-dialog center" style="width:50%;">
|
||||
<p class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</p>
|
||||
<h1 class="dialog-text">The Macintosh Finder, Version 1.0 (18 Jan 84)</h1>
|
||||
<p class="dialog-text">© 1984 Apple Computer</p>
|
||||
</div>
|
||||
|
||||
@@ -506,16 +496,16 @@
|
||||
<%- example(`
|
||||
<div class="window" style="width:30rem;">
|
||||
<div class="title-bar">
|
||||
<button class="close"></button>
|
||||
<button aria-label="Close" class="close"></button>
|
||||
<h1 class="title">Modeless Dialog</h1>
|
||||
<button class="hidden"></button>
|
||||
<button aria-label="Resize" disabled class="hidden"></button>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="modeless-dialog">
|
||||
<section class="field-row" style="justify-content: flex-start">
|
||||
<p class="modeless-text">Find:</p>
|
||||
<input type="text" style="width:100%;" placeholder=""/>
|
||||
<label for="text_find" class="modeless-text">Find:</label>
|
||||
<input id="text_find" type="text" style="width:100%;" placeholder=""/>
|
||||
|
||||
</section>
|
||||
<section class="field-row" style="justify-content: flex-end">
|
||||
@@ -535,7 +525,7 @@
|
||||
<div class="inner-border center">
|
||||
|
||||
<div class="modal-contents">
|
||||
<p class="modal-text">Modal Dialog</p>
|
||||
<h1 class="modal-text">Modal Dialog</h1>
|
||||
<div style="padding-left: 20px;">
|
||||
<div class="field-row">
|
||||
<input id="radio${getNewId()}" type="radio" name="second-example">
|
||||
@@ -616,6 +606,10 @@
|
||||
<p>If you'd like to see what else I'm up to, consider following me on <a href="https://twitter.com/sakofchit" target="_blank">Twitter</a> or checking out my <a href="https://sakun.co" target="_blank">personal site</a> :)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 class="subheading">Sponsors</h2>
|
||||
|
||||
<p><a href="https://getcssscan.com/?ref=systemcss" target="_blank">CSS Scan</a>: The fastest and easiest way to check, copy and edit CSS</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
BIN
icon/apple.png
BIN
icon/apple.png
Binary file not shown.
|
Before Width: | Height: | Size: 380 B |
@@ -1,19 +1,13 @@
|
||||
<svg width="17" height="21" viewBox="0 0 17 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="9.6087" y="0.26088" width="3.69565" height="0.73913" fill="black"/>
|
||||
<rect x="9.6087" y="1" width="2.21739" height="0.73913" fill="black"/>
|
||||
<rect x="9.6087" y="1" width="2.21739" height="2.95652" fill="black"/>
|
||||
<rect x="2.21741" y="5.43478" width="5.91304" height="1.47826" fill="black"/>
|
||||
<rect width="5.91304" height="0.73913" transform="matrix(1 0 0 -1 2.21741 7.65218)" fill="black"/>
|
||||
<rect width="5.17391" height="0.73913" transform="matrix(1 0 0 -1 9.6087 7.65218)" fill="black"/>
|
||||
<rect x="9.6087" y="5.43478" width="5.17391" height="1.47826" fill="black"/>
|
||||
<rect width="7.3913" height="0.73913" transform="matrix(1 0 0 -1 9.6087 9.13043)" fill="black"/>
|
||||
<rect width="6.65217" height="0.73913" transform="matrix(1 0 0 -1 9.6087 8.39131)" fill="black"/>
|
||||
<rect x="1.47827" y="7.65218" width="11.087" height="9.6087" fill="black"/>
|
||||
<rect x="1.47827" y="13.5652" width="15.5217" height="3.69565" fill="black"/>
|
||||
<rect x="2.21741" y="14.3044" width="13.3043" height="5.17391" fill="black"/>
|
||||
<rect x="4.43481" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
|
||||
<rect x="9.6087" y="19.4783" width="3.69565" height="1.47826" fill="black"/>
|
||||
<rect x="8.13043" y="1.73914" width="1.47826" height="3.69565" fill="black"/>
|
||||
<rect x="0.739136" y="7.65218" width="1.47826" height="9.6087" fill="black"/>
|
||||
<rect y="8.39131" width="1.47826" height="8.86957" fill="black"/>
|
||||
<svg width="18" height="22" viewBox="0 0 09 11" fill="black" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="5" width="2" height="1"/>
|
||||
<rect x="4" y="1" width="2" height="1"/>
|
||||
<rect x="4" y="2" width="1" height="1"/>
|
||||
<rect x="1" y="3" width="3" height="1"/>
|
||||
<rect x="5" y="3" width="3" height="1"/>
|
||||
<rect x="0" y="4" width="9" height="1"/>
|
||||
<rect x="0" y="5" width="7" height="2"/>
|
||||
<rect x="0" y="7" width="9" height="2"/>
|
||||
<rect x="1" y="9" width="7" height="1"/>
|
||||
<rect x="2" y="10" width="2" height="1"/>
|
||||
<rect x="5" y="10" width="2" height="1"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 551 B |
@@ -1,27 +1,26 @@
|
||||
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H1V1H0V0Z" fill="black"/>
|
||||
<path d="M12 0H13V1H12V0Z" fill="black"/>
|
||||
<path d="M1 1H2V2H1V1Z" fill="black"/>
|
||||
<path d="M2 2H3V3H2V2Z" fill="black"/>
|
||||
<path d="M3 3H4V4H3V3Z" fill="black"/>
|
||||
<path d="M4 4H5V5H4V4Z" fill="black"/>
|
||||
<path d="M5 5H6V6H5V5Z" fill="black"/>
|
||||
<path d="M11 1H12V2H11V1Z" fill="black"/>
|
||||
<path d="M10 2H11V3H10V2Z" fill="black"/>
|
||||
<path d="M9 3H10V4H9V3Z" fill="black"/>
|
||||
<path d="M8 4H9V5H8V4Z" fill="black"/>
|
||||
<path d="M7 5H8V6H7V5Z" fill="black"/>
|
||||
<path d="M0 13H1V12H0V13Z" fill="black"/>
|
||||
<path d="M12 13H13V12H12V13Z" fill="black"/>
|
||||
<path d="M1 12H2V11H1V12Z" fill="black"/>
|
||||
<path d="M2 11H3V10H2V11Z" fill="black"/>
|
||||
<path d="M3 10H4V9H3V10Z" fill="black"/>
|
||||
<path d="M4 9H5V8H4V9Z" fill="black"/>
|
||||
<path d="M5 8H6V7H5V8Z" fill="black"/>
|
||||
<path d="M11 12H12V11H11V12Z" fill="black"/>
|
||||
<path d="M10 11H11V10H10V11Z" fill="black"/>
|
||||
<path d="M9 10H10V9H9V10Z" fill="black"/>
|
||||
<path d="M8 9H9V8H8V9Z" fill="black"/>
|
||||
<path d="M7 8H8V7H7V8Z" fill="black"/>
|
||||
<path d="M6 7H7V6H6V7Z" fill="black"/>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="1" height="1"/>
|
||||
<rect x="1" y="1" width="1" height="1"/>
|
||||
<rect x="2" y="2" width="1" height="1"/>
|
||||
<rect x="3" y="3" width="1" height="1"/>
|
||||
<rect x="4" y="4" width="1" height="1"/>
|
||||
<rect x="5" y="5" width="1" height="1"/>
|
||||
<rect x="6" y="6" width="1" height="1"/>
|
||||
<rect x="7" y="7" width="1" height="1"/>
|
||||
<rect x="8" y="8" width="1" height="1"/>
|
||||
<rect x="9" y="9" width="1" height="1"/>
|
||||
<rect x="10" y="10" width="1" height="1"/>
|
||||
<rect x="11" y="11" width="1" height="1"/>
|
||||
<rect x="11" y="0" width="1" height="1"/>
|
||||
<rect x="10" y="1" width="1" height="1"/>
|
||||
<rect x="9" y="2" width="1" height="1"/>
|
||||
<rect x="8" y="3" width="1" height="1"/>
|
||||
<rect x="7" y="4" width="1" height="1"/>
|
||||
<rect x="6" y="5" width="1" height="1"/>
|
||||
<rect x="5" y="6" width="1" height="1"/>
|
||||
<rect x="4" y="7" width="1" height="1"/>
|
||||
<rect x="3" y="8" width="1" height="1"/>
|
||||
<rect x="2" y="9" width="1" height="1"/>
|
||||
<rect x="1" y="10" width="1" height="1"/>
|
||||
<rect x="0" y="11" width="1" height="1"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 634 B |
14
icon/radio-border-focused.svg
Normal file
14
icon/radio-border-focused.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" width="4" height="2"/>
|
||||
<rect y="4" width="2" height="4"/>
|
||||
<rect x="10" y="4" width="2" height="4"/>
|
||||
<rect x="2" y="1" width="2" height="2"/>
|
||||
<rect x="8" y="1" width="2" height="2"/>
|
||||
<rect x="9" y="2" width="2" height="2"/>
|
||||
<rect x="1" y="2" width="2" height="2" />
|
||||
<rect x="4" y="10" width="4" height="2"/>
|
||||
<rect x="2" y="9" width="2" height="2"/>
|
||||
<rect x="8" y="9" width="2" height="2"/>
|
||||
<rect x="9" y="8" width="2" height="2"/>
|
||||
<rect x="1" y="8" width="2" height="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 587 B |
@@ -1,14 +1,14 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0H4V1H8V0Z" fill="black"/>
|
||||
<path d="M8 12H4V11H8V12Z" fill="black"/>
|
||||
<path d="M0 4L0 8H1L1 4H0Z" fill="black"/>
|
||||
<path d="M11 4V8H12V4H11Z" fill="black"/>
|
||||
<path d="M4 1H2V2H4V1Z" fill="black"/>
|
||||
<path d="M4 11H2V10H4V11Z" fill="black"/>
|
||||
<path d="M10 1H8V2H10V1Z" fill="black"/>
|
||||
<path d="M10 11H8V10H10V11Z" fill="black"/>
|
||||
<path d="M10 2V4H11V2H10Z" fill="black"/>
|
||||
<path d="M10 10V8H11V10H10Z" fill="black"/>
|
||||
<path d="M1 2L1 4H2V2H1Z" fill="black"/>
|
||||
<path d="M1 10L1 8H2V10H1Z" fill="black"/>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="black" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" width="4" height="1"/>
|
||||
<rect y="4" width="1" height="4"/>
|
||||
<rect x="11" y="4" width="1" height="4"/>
|
||||
<rect x="2" y="1" width="2" height="1"/>
|
||||
<rect x="8" y="1" width="2" height="1"/>
|
||||
<rect x="10" y="2" width="1" height="2"/>
|
||||
<rect x="1" y="2" width="1" height="2" />
|
||||
<rect x="4" y="11" width="4" height="1"/>
|
||||
<rect x="2" y="10" width="2" height="1"/>
|
||||
<rect x="8" y="10" width="2" height="1"/>
|
||||
<rect x="10" y="8" width="1" height="2"/>
|
||||
<rect x="1" y="8" width="1" height="2" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 605 B After Width: | Height: | Size: 592 B |
@@ -1,5 +1,5 @@
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.99783 0H1V1H4.99783V0Z" fill="black"/>
|
||||
<path d="M4.99783 5H1V6H4.99783V5Z" fill="black"/>
|
||||
<path d="M6 1H0V4.99783H6V1Z" fill="black"/>
|
||||
<svg width="7" height="7" viewBox="0 0 7 7" fill="black" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" width="4" height="1"/>
|
||||
<rect x="1" y="5" width="4" height="1"/>
|
||||
<rect y="1" width="6" height="4"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 246 B After Width: | Height: | Size: 211 B |
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@sakun/system.css",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@sakun/system.css",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"description": "A design system for building retro Apple interfaces",
|
||||
"main": "dist/system.css",
|
||||
"directories": {
|
||||
|
||||
43
style.css
43
style.css
@@ -29,9 +29,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: 13px;
|
||||
--checkmark-top: 1.5px;
|
||||
--checkmark-left: 1.5px;
|
||||
--checkmark-width: 12px;
|
||||
--checkmark-top: 2px;
|
||||
--checkmark-left: 2px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -179,7 +179,7 @@ h2 {
|
||||
|
||||
.modeless-dialog {
|
||||
height: 100%;
|
||||
padding: 0.5rem 0.5rem;
|
||||
padding: 1.5rem 0.5rem 0.5rem 0.5rem;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
@@ -454,6 +454,9 @@ input[type="radio"] + label::before {
|
||||
background: svg-load("./icon/radio-border.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:focus-visible + label::before {
|
||||
background-image: svg-load("./icon/radio-border-focused.svg");
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label::after {
|
||||
content: "";
|
||||
@@ -483,6 +486,10 @@ input[type="checkbox"] + label::before {
|
||||
margin-right: var(--radio-label-spacing);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus-visible + label::before {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + label::after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -523,11 +530,12 @@ input[type="checkbox"][disabled]:checked + label::after {
|
||||
|
||||
.apple {
|
||||
background: svg-load("./icon/apple.svg");
|
||||
height: 20.7px;
|
||||
width: 17px;
|
||||
height: 22px;
|
||||
width: 18px;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
@@ -563,13 +571,11 @@ form {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.dd-toggle:focus,
|
||||
.dd-toggle:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dd-input {
|
||||
display: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dd-menu {
|
||||
@@ -585,14 +591,6 @@ form {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.dd-input + .dd-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dd-input:checked + .dd-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dd-menu li {
|
||||
padding: 5px 20px;
|
||||
cursor: pointer;
|
||||
@@ -612,4 +610,9 @@ form {
|
||||
.dd-menu li.divider{
|
||||
padding: 0;
|
||||
border-bottom: 1.5px dotted #000;
|
||||
}
|
||||
}
|
||||
|
||||
/* styles specific to demo page */
|
||||
.menu-items > li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user