diff options
| author | Deniz Akşimşek <deniz@denizaksimsek.com> | 2023-01-10 17:57:26 +0300 |
|---|---|---|
| committer | Deniz Akşimşek <deniz@denizaksimsek.com> | 2023-01-10 17:57:26 +0300 |
| commit | a75d8bb3896449e71ebbfbd2eb10bbbb1ad7a9ee (patch) | |
| tree | 95bd44e1d9d99f19ad31ae69a976def086ebc65f | |
| parent | ce02fbf498662ab31156dd7971c6f9c193e35b30 (diff) | |
| download | missing-a75d8bb3896449e71ebbfbd2eb10bbbb1ad7a9ee.tar.gz missing-a75d8bb3896449e71ebbfbd2eb10bbbb1ad7a9ee.zip | |
button shadows
| -rw-r--r-- | releases/1.0.6.md | 3 | ||||
| -rw-r--r-- | src/main.css | 11 |
2 files changed, 9 insertions, 5 deletions
diff --git a/releases/1.0.6.md b/releases/1.0.6.md index bf25efd..58a9e54 100644 --- a/releases/1.0.6.md +++ b/releases/1.0.6.md @@ -19,7 +19,8 @@ artifacts: - Missing.css is now available on npm: [`missing.css@1.0.6`][]. Thanks to esmiralha#6639@discord.com for implementing this! - Changes to button states - - Change link styling, removing the outline that appears on hover and making the underline more subtle + - Added box shadows to buttons to better indicate button states. + - Changed link styling, removing the outline that appears on hover and making the underline more subtle - Use `--secondary-font` for `<dt>` element - Fixed an issue the first tab in a tablist would be focused on load diff --git a/src/main.css b/src/main.css index 446be2a..faa9163 100644 --- a/src/main.css +++ b/src/main.css @@ -479,7 +479,8 @@ input::file-selector-button, display: inline-block; padding: 0 calc(var(--rhythm) / 4); vertical-align: middle; - + box-sizing: border-box; + font-size: .8rem; line-height: 1.125em; font-family: var(--secondary-font); @@ -488,7 +489,7 @@ input::file-selector-button, background: var(--interactive-bg); color: var(--fg); border: 1px solid var(--muted-fg); - box-sizing: border-box; + box-shadow: 0 2px 4px -2px var(--fg); border-radius: var(--border-radius); /* a-specific resets */ @@ -499,22 +500,24 @@ input::file-selector-button, &:hover, &:focus-visible { filter: brightness(1.1); + box-shadow: 0 3px 6px -2px var(--fg); /* a-specific resets */ text-decoration: none; } &:active { - box-shadow: 0 .15em .5em var(--muted-fg) inset; + box-shadow: none; } &:where([aria-pressed="true"], [aria-expanded="true"]) { - box-shadow: 0 .1em .5em var(--muted-fg) inset; + box-shadow: 0 2px 4px -1px var(--fg) inset; background: var(--pressed-interactive-bg); } &[disabled] { color: var(--muted-fg); + box-shadow: none; } @nest strong > & { |