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.
This commit is contained in:
Seth Cottle 2023-05-01 12:13:53 -04:00
parent 709987c637
commit ae5e73d51e
2 changed files with 27 additions and 6 deletions

View File

@ -33,23 +33,26 @@
button { button {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
height: 48px; height: 100%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 18px; font-size: 18px;
width: 300px; width: 300px;
font-weight: 700; font-weight: 700;
line-height: 48px; line-height: 20px;
padding: 14px 12px 12px 12px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
white-space: wrap; white-space: wrap;
outline: none;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
} }
button:hover, button:hover,
.button:focus { .button:focus {
color: #333; color: #212121;
border-color: #888; border-color: #888;
outline: 0; outline: #7AB8FF solid 3px
} }
.button.button-primary { .button.button-primary {
color: #fff; color: #fff;

View File

@ -125,11 +125,29 @@ p {
/* Links /* Links
*/ */
a { a {
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; color: #4899F7;
} }
a:hover { a:hover {
color: #7AB8FF; color: #7AB8FF;
} }
a:focus {
outline: #7AB8FF solid 2px;
border-radius: 2px;
}
}
/* Code /* Code
*/ */