Correct alignment of button icons

chriswilty · Apr 8, 2024 · e5115ea · e5115ea
1 parent ec5d14e
commit e5115ea
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Simple Counter</title>
+ <title>Counter Demo</title>
  </head>
  <body>
  <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -81,7 +81,8 @@ main button[aria-disabled='true']:hover ~ .tooltip {
 }
 main button .icon {
  font-size: 2rem;
- line-height: 1;
+ line-height: 1.75rem;
+ padding-bottom: 0.25rem;
 }
 
 @media (prefers-color-scheme: light) {
@@ -97,10 +98,6 @@ main button .icon {
  background-color: var(--bg-dark-disabled);
  color: var(--text-light);
  }
- main button[aria-disabled='true']:focus-visible::after,
- main button[aria-disabled='true']:hover::after {
- color: var(--text-dark);
- }
  main .tooltip {
  color: var(--text-dark);
  }