Files
storyteller-bevy/studio-web/src/lib/transform-toolbar.element.scss
T

61 lines
967 B
SCSS

.btn-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 16px;
padding: 10px 12px;
pointer-events: auto;
// TODO: Copypasta
background: var(--color-toolbar-background);
color: #FFFC;
backdrop-filter: blur(16px);
transition: {
property: background, color;
duration: 0.1s;
timing-function: linear;
}
border-radius: var(--corner-radius);
&:hover {
background: #0008;
color: #FFF;
}
&:has(:focus-visible) {
z-index: 1;
outline: 4px solid #2F83FFBF;
}
&:has(:checked) {
border-color: var(--color-accent);
border-width: 2px;
border-style: solid;
color: #FFF;
&:hover {
background: #90363F;
}
}
&:has(:disabled) {
background: #0003 !important;
color: #FFF6 !important;
}
input {
display: block;
appearance: none;
border: 0;
margin: 0;
padding: 0;
opacity: 0;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
}