misc/passmate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to fake radio button and checklist styling for lists.

Browse Source 
Fixes #11
This commit is contained in:
Ian Gulliver
2018-12-07 08:29:41 +00:00
parent bd06a46b5e
commit 812a1ab529
2 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
passmate.css
View File

@@ -152,10 +152,41 @@ overview,product {
font-weight: normal; font-weight: normal;
} }
button.selectable::before {
display: inline-block;
height: 0.75em;
width: 1.15em;
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6Ny4wMXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTA1PC90aXRsZT48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjkuNjciIHk9IjkuNjciIHdpZHRoPSI4MC42NyIgaGVpZ2h0PSI4MC42NyIgcng9IjQwLjMzIiByeT0iNDAuMzMiPjwvcmVjdD48L3N2Zz4=");
background-size: contain;
background-repeat: no-repeat;
background-position: left 0.05em;
content: "";
}
button.selected { button.selected {
font-weight: bold; font-weight: bold;
} }
button.selected::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6Ny4wMXB4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTAzPC90aXRsZT48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjkuNjciIHk9IjkuNjciIHdpZHRoPSI4MC42NyIgaGVpZ2h0PSI4MC42NyIgcng9IjQwLjMzIiByeT0iNDAuMzMiPjwvcmVjdD48cmVjdCB4PSIyNC4zMyIgeT0iMjQuMzMiIHdpZHRoPSI1MS4zNCIgaGVpZ2h0PSI1MS4zNCIgcng9IjI1LjY3IiByeT0iMjUuNjciPjwvcmVjdD48L3N2Zz4=");
}
ul {
list-style-type: none;
padding-inline-start: 25px;
}
ul.checklist li::before {
display: inline-block;
height: 0.75em;
width: 1.15em;
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzAwMDAwMDt9LmNscy0ye2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6My40N3B4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgOTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjMsNTEuMjNDMjkuNjksNTgsMzkuMjEsNzAuNjYsNDQuMTUsODAuNTRBMjU2LDI1NiwwLDAsMSw4My40OCwxOS42bC0zLjYxLTQuMDhjLTEwLjc0LDEwLjYzLTI3LjQ1LDMwLjc4LTM2LjExLDQ3QTk5LDk5LDAsMCwwLDI5LjQxLDQ0TDIzLDUxLjIzWiI+PC9wYXRoPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTc0LjI2LDQ3LjgzbDAsMzcuODdhMS42NywxLjY3LDAsMCwxLTEuNjcsMS42N0gxOC4xOWExLjY3LDEuNjcsMCwwLDEtMS42Ny0xLjY3VjMxLjMxYTEuNjcsMS42NywwLDAsMSwxLjY3LTEuNjdINTAuNzYiPjwvcGF0aD48L3N2Zz4=");
background-size: contain;
background-repeat: no-repeat;
background-position: left 0.05em;
content: "";
}
ol { ol {
box-sizing: border-box; box-sizing: border-box;
max-width: 40em; max-width: 40em;

14
passmate.js
View File

@@ -56,7 +56,7 @@ class PassMate {
}); });
let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):'); let formatStep = this.addElement('li', instr, 'Choose your preferred password format (both provide approximately the same security):');
let formats = this.addElement('ul', formatStep); let formats = this.addElement('ul', formatStep, null, ['select']);
let format = new Select((key) => { let format = new Select((key) => {
this.product.classList.remove('passwords-short'); this.product.classList.remove('passwords-short');
this.product.classList.remove('passwords-pronounceable'); this.product.classList.remove('passwords-pronounceable');
@@ -71,7 +71,7 @@ class PassMate {
format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565 (too long for some websites)')); format.add('readable', this.addElement('button', readableItem, 'Readable: LeasedBarneyPlays565 (too long for some websites)'));
let indexStep = this.addElement('li', instr, 'Choose your preferred index format:'); let indexStep = this.addElement('li', instr, 'Choose your preferred index format:');
let indexes = this.addElement('ul', indexStep); let indexes = this.addElement('ul', indexStep, null, ['select']);
let index = new Select((key) => { let index = new Select((key) => {
this.product.classList.remove('index-letters'); this.product.classList.remove('index-letters');
this.product.classList.remove('index-none'); this.product.classList.remove('index-none');
@@ -83,7 +83,7 @@ class PassMate {
index.add('none', this.addElement('button', indexNoneItem, 'None: Use passwords from the beginning')); index.add('none', this.addElement('button', indexNoneItem, 'None: Use passwords from the beginning'));
let sidedStep = this.addElement('li', instr, 'Choose your preferred printing format:'); let sidedStep = this.addElement('li', instr, 'Choose your preferred printing format:');
let sides = this.addElement('ul', sidedStep); let sides = this.addElement('ul', sidedStep, null, ['select']);
let side = new Select((key) => { let side = new Select((key) => {
this.overview.classList.remove('side-one'); this.overview.classList.remove('side-one');
this.overview.classList.remove('side-two'); this.overview.classList.remove('side-two');
@@ -100,10 +100,10 @@ class PassMate {
let twoSideStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing.', ['side-two']); let twoSideStep = this.addElement('li', instr, 'Check that your printer supports two-sided printing.', ['side-two']);
let printReqStep = this.addElement('li', instr, 'You\'ll need to print with the following settings:'); let printReqStep = this.addElement('li', instr, 'You\'ll need to print with the following settings:');
let printreqs = this.addElement('ul', printReqStep); let printReqs = this.addElement('ul', printReqStep, null, ['checklist']);
this.addElement('li', printreqs, 'Paper size: Letter'); this.addElement('li', printReqs, 'Paper size: Letter');
this.addElement('li', printreqs, 'Layout/Orientation: Landscape'); this.addElement('li', printReqs, 'Layout/Orientation: Landscape');
this.addElement('li', printreqs, 'Two-sided: Long edge (or just enabled)', ['side-two']); this.addElement('li', printReqs, 'Two-sided: Long edge (or just enabled)', ['side-two']);
let printStep = this.addElement('li', instr); let printStep = this.addElement('li', instr);
let print = this.addElement('button', printStep, 'Click here to print the book!'); let print = this.addElement('button', printStep, 'Click here to print the book!');