mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-30 09:09:56 +02: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
parent 1f2e3db94e bc9ccf5490
commit ffa29f4cd9
2 changed files with 25 additions and 0 deletions
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="submit" />
<input type="reset" /> `)%> <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> <p>
When buttons are clicked, the raised borders become sunken. When buttons are clicked, the raised borders become sunken.
The following button is simulated to be in the pressed (active) state. 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); inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face), --border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow); 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 */ /* Window borders flip button-face and button-highlight */
--border-window-outer: inset -1px -1px var(--window-frame), --border-window-outer: inset -1px -1px var(--window-frame),
@@ -152,6 +157,12 @@ input[type="reset"] {
padding: 0 12px; 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 { .vertical-bar {
width: 4px; width: 4px;
height: 20px; height: 20px;
@@ -166,6 +177,12 @@ input[type="reset"]:not(:disabled):active {
text-shadow: 1px 1px var(--text-color); 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)) { @media (not(hover)) {
button:not(:disabled):hover, button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover,