baalajimaestro/littlelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Auto Resize Button Height + Focus States

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
css/brands.css
View file

@ -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;

18
css/skeleton-auto.css
View file

@ -124,12 +124,30 @@ p {
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
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;
}
a:hover {
color: #7AB8FF;
}
a:focus {
outline: #7AB8FF solid 2px;
border-radius: 2px;
}
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */