LibWeb: Support CSS Transition for Material UI buttons
$125 funded
Material UI's Button styling involves transitioning some of its CSS properties, like background-color, box-shadow, etc. on hover. It requires the transition shorthand property, accepting a list of multiple transitions, the cubic-bezier transition function, and probably some other bits and bobs to be functionally complete.
Relevant CSS Spec: https://www.w3.org/TR/css-transitions-1/
Static example:
<!DOCTYPE html><style>
button {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
background-color: transparent;
outline: 0;
cursor: pointer;
vertical-align: middle;
text-decoration: none;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.75;
letter-spacing: 0.02857em;
text-transform: uppercase;
min-width: 64px;
padding: 5px 15px;
border-radius: 4px;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border: 1px solid rgba(25, 118, 210, 0.5);
color: #1976d2;
margin: 0;
}
button:hover {
text-decoration: none;
background-color: rgba(25, 118, 210, 0.04);
border: 1px solid #1976d2;
}
</style><button>Text</button>
SerenityOS / serenity
The Serenity Operating System 🐞
30.6k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too