Added default styling
This commit is contained in:
parent
09f403c086
commit
cb247db8d3
2 changed files with 14 additions and 1 deletions
|
|
@ -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" /> `)%>
|
||||||
|
|
||||||
|
|
|
||||||
13
style.css
13
style.css
|
|
@ -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),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue