Factor out checkbox styling and use it.
This commit is contained in:
parent
7f97fa0ecc
commit
d69283f8a8
|
@ -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]}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue