1
Fork 0

Factor out checkbox styling and use it.

This commit is contained in:
Bauke 2023-09-13 14:33:00 +02:00
parent 7f97fa0ecc
commit d69283f8a8
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
5 changed files with 21 additions and 15 deletions

View File

@ -48,7 +48,7 @@ export class HideVotesSetting extends Component<SettingProps, State> {
const checkboxes = checkboxesData.map(({label, target}) => (
<li>
<label>
<label class="styled-checkbox">
<input
type="checkbox"
checked={hideVotes.value[target]}

View File

@ -100,7 +100,7 @@ export class MiscellaneousSetting extends Component<SettingProps, State> {
return (
<li class={enabled ? "enabled" : ""}>
<label for={feature}>
<label class="styled-checkbox" for={feature}>
<input
type="checkbox"
id={feature}

View File

@ -205,7 +205,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
<ul class="checkbox-list">
<li>
<label>
<label class="styled-checkbox">
<input
type="checkbox"
checked={randomizeChecked.value}

View File

@ -139,6 +139,19 @@
}
}
.styled-checkbox {
align-items: center;
background-color: var(--background-primary);
border: 1px solid var(--blue);
cursor: pointer;
display: flex;
padding: 8px;
input[type="checkbox"] {
margin-right: 1rem;
}
}
.styled-select {
background-color: var(--background-primary);
border: 1px solid var(--save-status-color, var(--blue));

View File

@ -13,21 +13,14 @@
&.enabled {
--border-color: var(--green);
}
.styled-checkbox {
border: none;
border-bottom: 1px solid var(--border-color);
}
}
.description {
margin: 8px;
}
label {
align-items: center;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
display: flex;
padding: 8px;
}
input[type="checkbox"] {
margin-right: 1rem;
}
}