consistent style for checkboxes

This commit is contained in:
Olivier Gagnon 2019-03-22 22:20:07 -04:00 committed by danielyxie
parent 2754a644ae
commit 31e703d126
2 changed files with 76 additions and 14 deletions

@ -336,3 +336,43 @@ a:visited {
.smallfont { .smallfont {
font-size: $defaultFontSize * 0.8125; font-size: $defaultFontSize * 0.8125;
} }
.bbcheckbox {
position: relative;
display: inline;
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: black;
border-width: 1px;
border-color: white;
border-style: solid;
&:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid white;
border-top: none;
border-right: none;
opacity: 0;
transform: rotate(-45deg);
}
}
input[type=checkbox] {
visibility: hidden;
&:checked + label:after {
opacity: 1;
}
}
}

@ -2527,16 +2527,31 @@ Bladeburner.prototype.updateContractsUIElement = function(el, action) {
for:autolevelCheckboxId, innerText:"Autolevel",color:"white", for:autolevelCheckboxId, innerText:"Autolevel",color:"white",
tooltip:"Automatically increase contract level when possible" tooltip:"Automatically increase contract level when possible"
})); }));
var autolevelCheckbox = createElement("input", {
type:"checkbox", id:autolevelCheckboxId, margin:"4px", const checkboxDiv = createElement("div", { class: "bbcheckbox" });
const checkboxInput = createElement("input", {
type:"checkbox",
id: autolevelCheckboxId,
checked: action.autoLevel, checked: action.autoLevel,
changeListener: () => { changeListener: () => {
action.autoLevel = autolevelCheckbox.checked; action.autoLevel = checkboxInput.checked;
} },
}); });
el.appendChild(autolevelCheckbox); const checkmarkLabel = createElement("label", { for: autolevelCheckboxId });
checkboxDiv.appendChild(checkboxInput);
checkboxDiv.appendChild(checkmarkLabel);
el.appendChild(checkboxDiv);
} }
/*
<div class="bbcheckbox">
<input type="checkbox" value="None" id="bbcheckbox" name="check" checked />
<label for="bbcheckbox"></label>
</div>
*/
Bladeburner.prototype.updateOperationsUIElement = function(el, action) { Bladeburner.prototype.updateOperationsUIElement = function(el, action) {
removeChildrenFromElement(el); removeChildrenFromElement(el);
var isActive = el.classList.contains(ActiveActionCssClass); var isActive = el.classList.contains(ActiveActionCssClass);
@ -2663,14 +2678,21 @@ Bladeburner.prototype.updateOperationsUIElement = function(el, action) {
for:autolevelCheckboxId, innerText:"Autolevel",color:"white", for:autolevelCheckboxId, innerText:"Autolevel",color:"white",
tooltip:"Automatically increase operation level when possible" tooltip:"Automatically increase operation level when possible"
})); }));
var autolevelCheckbox = createElement("input", {
type:"checkbox", id:autolevelCheckboxId, margin:"4px", const checkboxDiv = createElement("div", { class: "bbcheckbox" });
const checkboxInput = createElement("input", {
type:"checkbox",
id: autolevelCheckboxId,
checked: action.autoLevel, checked: action.autoLevel,
changeListener: () => { changeListener: () => {
action.autoLevel = autolevelCheckbox.checked; action.autoLevel = checkboxInput.checked;
} },
}); });
el.appendChild(autolevelCheckbox); const checkmarkLabel = createElement("label", { for: autolevelCheckboxId });
checkboxDiv.appendChild(checkboxInput);
checkboxDiv.appendChild(checkmarkLabel);
el.appendChild(checkboxDiv);
} }
Bladeburner.prototype.updateBlackOpsUIElement = function(el, action) { Bladeburner.prototype.updateBlackOpsUIElement = function(el, action) {