Auto Resize Button Height + Focus States

Button height will now auto adjust when there is a line break to help account for localization. Link colors will now properly change when using `skeleton-auto.css` to be more accessible colors when in dark or light theme. Focus states will now appear for `pressed` and keyboard navigation for accessibility improvements.
rt3norio · May 1, 2023 · ae5e73d · ae5e73d
1 parent 709987c
commit ae5e73d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/css/brands.css b/css/brands.css
@@ -33,23 +33,26 @@
 button {
  display: inline-block;
  text-decoration: none;
- height: 48px;
+ height: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  width: 300px;
  font-weight: 700;
- line-height: 48px;
+ line-height: 20px;
+ padding: 14px 12px 12px 12px;
  letter-spacing: 0.1px;
  white-space: wrap;
+ outline: none;
  border-radius: 8px;
  cursor: pointer;
-}
+
+} 
 button:hover,
 .button:focus {
- color: #333;
+ color: #212121;
  border-color: #888;
- outline: 0;
+ outline: #7AB8FF solid 3px
 }
 .button.button-primary {
  color: #fff;

diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
@@ -125,11 +125,29 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
- color: #4899F7;
+ color: #2457F5;
+}
+a:hover {
+ color: #083BDA; 
+}
+a:focus {
+ outline: #7AB8FF solid 2px;
+ border-radius: 2px;
+} 
+
+/* Link Color Dark Theme */
+@media (prefers-color-scheme: dark) {
+ a {
+ color: #4899F7;
 }
 a:hover {
  color: #7AB8FF;
 }
+a:focus {
+ outline: #7AB8FF solid 2px;
+ border-radius: 2px;
+}
+}
 
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */