Fix Loopback Styling

This commit is contained in:
blessedcoolant 2022-11-03 03:38:15 +13:00 committed by Lincoln Stein
parent c6118e8898
commit a1971f6830
2 changed files with 32 additions and 0 deletions

View File

@ -17,6 +17,7 @@ const LoopbackButton = () => {
<IAIIconButton
aria-label="Toggle Loopback"
tooltip="Toggle Loopback"
styleClass="loopback-btn"
asCheckbox={true}
isChecked={shouldLoopback}
icon={<FaRecycle />}

View File

@ -26,3 +26,34 @@
// $btn-width: 3rem
);
}
.loopback-btn {
&[data-as-checkbox='true'] {
background-color: var(--btn-grey);
border: 3px solid var(--btn-grey);
svg {
fill: var(--text-color);
}
&:hover {
background-color: var(--btn-grey);
border-color: var(--btn-checkbox-border-hover);
svg {
fill: var(--text-color);
}
}
&[data-selected='true'] {
border-color: var(--accent-color);
background-color: var(--btn-grey);
svg {
fill: var(--text-color);
}
&:hover {
border-color: var(--accent-color);
background-color: var(--btn-grey);
svg {
fill: var(--text-color);
}
}
}
}
}