mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-24 20:51:26 +02:00
Code Issues Releases Wiki Activity

Apply button styles to submit and reset inputs (#136)

Browse Source 
* Apply button styles to submit and reset inputs
This commit is contained in:
Isiah Lloyd
2022-05-21 21:14:06 -04:00
committed by GitHub
parent 7412a98815
commit 0093c72f2d
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/index.html.ejs
View File

@@ -138,7 +138,9 @@
They are given 12px of horizontal padding by default.
</p>
<%- example(`<button>Click me</button>`) %>
<%- example(`<button>Click me</button>
<input type="submit" />
<input type="reset" /> `)%>
<p>
When buttons are clicked, the raised borders become sunken.

25
style.css
View File

@@ -127,7 +127,9 @@ u {
border-bottom: 0.5px solid #222222;
}
button {
button,
input[type="submit"],
input[type="reset"] {
box-sizing: border-box;
border: none;
background: var(--surface);
@@ -146,23 +148,31 @@ button {
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}
button:not(:disabled):active {
button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
padding: 2px 11px 0 13px;
}
@media (not(hover)) {
button:not(:disabled):hover {
button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover {
box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}
}
button:focus {
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
outline: 1px dotted #000000;
outline-offset: -4px;
}
button::-moz-focus-inner {
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
border: 0;
}
@@ -172,6 +182,8 @@ button::-moz-focus-inner {
}
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
:disabled + label {
text-shadow: 1px 1px 0 var(--button-highlight);
}
@@ -266,8 +278,7 @@ button:disabled,
}
.status-bar-field {
box-shadow: inset -1px -1px #dfdfdf,
inset 1px 1px #808080;
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
flex-grow: 1;
padding: 2px 3px;
margin: 0;