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}) => ( const checkboxes = checkboxesData.map(({label, target}) => (
<li> <li>
<label> <label class="styled-checkbox">
<input <input
type="checkbox" type="checkbox"
checked={hideVotes.value[target]} checked={hideVotes.value[target]}

View File

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

View File

@ -205,7 +205,7 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
<ul class="checkbox-list"> <ul class="checkbox-list">
<li> <li>
<label> <label class="styled-checkbox">
<input <input
type="checkbox" type="checkbox"
checked={randomizeChecked.value} 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 { .styled-select {
background-color: var(--background-primary); background-color: var(--background-primary);
border: 1px solid var(--save-status-color, var(--blue)); border: 1px solid var(--save-status-color, var(--blue));

View File

@ -13,21 +13,14 @@
&.enabled { &.enabled {
--border-color: var(--green); --border-color: var(--green);
} }
.styled-checkbox {
border: none;
border-bottom: 1px solid var(--border-color);
}
} }
.description { .description {
margin: 8px; 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;
}
} }