mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-03-14 15:49:57 +01:00
Code Issues Releases Wiki Activity

Merge pull request #192 from vtlanglois/add-default-button-outline-styling

Browse Source 
Add `default` button outline styling
This commit is contained in:
Juani Garay 2024-02-10 13:40:44 -03:00 committed by GitHub
commit ffa29f4cd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/index.html.ejs
View File

@ -145,6 +145,14 @@
<input type="submit" />
<input type="reset" /> `)%>
<p>
You can add the class <code>default</code> to any button to apply additional styling,
useful when communicating to the user what default action would happen in the active window if
the <kbd>Enter</kbd> key was pressed on Windows 98.
</p>
<%- example(`<button class="default">OK</button>`)%>
<p>
When buttons are clicked, the raised borders become sunken.
The following button is simulated to be in the pressed (active) state.

17
style.css
View File

@ -57,6 +57,11 @@
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
--default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
--default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
--default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
--default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
/* Window borders flip button-face and button-highlight */
--border-window-outer: inset -1px -1px var(--window-frame),
@ -152,6 +157,12 @@ input[type="reset"] {
padding: 0 12px;
}
button.default,
input[type="submit"].default,
input[type="reset"].default {
box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
}
.vertical-bar {
width: 4px;
height: 20px;
@ -166,6 +177,12 @@ input[type="reset"]:not(:disabled):active {
text-shadow: 1px 1px var(--text-color);
}
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,