diff options
| author | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-10-27 04:38:03 +0300 |
|---|---|---|
| committer | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-10-27 04:38:03 +0300 |
| commit | f63ba8306b34e12a075e220a3f5a4c9588d8b8f5 (patch) | |
| tree | dcbb9c9c6070b3895594de9efb84ec501bdad47f | |
| parent | f3af169a8ee188d1716335d055410b69589978e0 (diff) | |
| download | missing-f63ba8306b34e12a075e220a3f5a4c9588d8b8f5.tar.gz missing-f63ba8306b34e12a075e220a3f5a4c9588d8b8f5.zip | |
icon button improvement
| -rw-r--r-- | src/components.css | 12 | ||||
| -rw-r--r-- | src/missing.css | 18 | ||||
| -rw-r--r-- | src/variables.css | 2 |
3 files changed, 21 insertions, 11 deletions
diff --git a/src/components.css b/src/components.css index ea53e78..82fe285 100644 --- a/src/components.css +++ b/src/components.css @@ -232,9 +232,19 @@ button.iconbutton { height: 24px; display: inline-block; text-align: center; - border-radius: var(--border-radius); + border-radius: 50%; transition: font-weight .2s ease-in-out; + &:hover, &:focus-visible { + outline: 1px solid var(--accent); + outline-offset: 6px; + } + + &:active { + outline-offset: 3px; + background: none; + } + &[aria-pressed=true] { box-shadow: none; transform: none; diff --git a/src/missing.css b/src/missing.css index 68e6df7..1364ae2 100644 --- a/src/missing.css +++ b/src/missing.css @@ -2,12 +2,12 @@ @import "./core/sanitize.css"; @import "./core/colors.css"; -@import "./10-main.css"; -@import "./30-components.css"; -@import "./40-aria.css"; -@import "./50-colorways.css"; -@import "./60-variables.css"; -@import "./70-layout.css"; -@import "./80-utils.css"; -@import "./90-flex.css"; -@import "./A0-grid.css"; +@import "./main.css"; +@import "./components.css"; +@import "./aria.css"; +@import "./colorways.css"; +@import "./variables.css"; +@import "./layout.css"; +@import "./utils.css"; +@import "./flex.css"; +@import "./grid.css"; diff --git a/src/variables.css b/src/variables.css index 70c30bf..49b0c6a 100644 --- a/src/variables.css +++ b/src/variables.css @@ -21,7 +21,7 @@ --bg: var(--gray-0); /* Page background. */ --box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */ - --interactive-bg: var(--gray-3); /* Background for interactive elements */ + --interactive-bg: var(--gray-4); /* Background for interactive elements */ --plain-bg: var(--gray-1); --info-bg: var(--blue-1); |