Added default styling

This commit is contained in:
Vincent Langlois 2024-01-22 17:52:10 -05:00
parent 09f403c086
commit cb247db8d3
2 changed files with 14 additions and 1 deletions

View file

@ -141,7 +141,7 @@
They are given 12px of horizontal padding by default. They are given 12px of horizontal padding by default.
</p> </p>
<%- example(`<button>Click me</button> <%- example(`<button class="default">Click me</button>
<input type="submit" /> <input type="submit" />
<input type="reset" /> `)%> <input type="reset" /> `)%>

View file

@ -58,6 +58,19 @@
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);
.default {
box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
}
.default:active {
box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
}
/* 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),