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}) => (
|
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]}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue