monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-24 23:04:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

changed checkboxes to use check icons instead of changing background color

Browse source 
closes #2776
This commit is contained in:
Miodec 2022-03-27 20:22:19 +02:00
parent 95f3414a27
commit 9d3a2d630b
2 changed files with 40 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/styles/core.scss
View file

@ -97,20 +97,26 @@ label.checkbox {
width: 0;
height: 0;
display: none;
user-select: none;
& ~ .customTextCheckbox {
width: 12px;
height: 12px;
width: 1.25rem;
height: 1.25rem;
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
display: inline-block;
margin: 0 0.5rem 0 0.25rem;
transition: 0.25s;
border-radius: calc(var(--roundness) / 2);
display: inline-grid;
// margin: 0 0.5rem 0 0;
user-select: none;
cursor: pointer;
& .check {
opacity: 0;
color: var(--main-color);
transition: 0.125s;
}
}
&:checked ~ .customTextCheckbox {
background: var(--main-color);
&:checked ~ .customTextCheckbox .check {
opacity: 1;
}
}
}

30
frontend/static/index.html
View file

@ -391,7 +391,11 @@
<div class="inputs">
<label class="checkbox">
<input type="checkbox" />
<div class="customTextCheckbox"></div>
<div class="customTextCheckbox">
<div class="check">
<i class="fas fa-fw fa-check"></i>
</div>
</div>
Random
<span>
Randomize the above words, and control how many words are
@ -411,7 +415,11 @@
</div>
<label class="checkbox typographyCheck">
<input type="checkbox" checked />
<div class="customTextCheckbox customTextTypographyCheckbox"></div>
<div class="customTextCheckbox customTextTypographyCheckbox">
<div class="check">
<i class="fas fa-fw fa-check"></i>
</div>
</div>
Remove Fancy Typography
<span>
Standardises typography symbols (for example “ and ” become ")
@ -419,7 +427,11 @@
</label>
<label class="checkbox delimiterCheck">
<input type="checkbox" />
<div class="customTextCheckbox customTextDelimiterCheckbox"></div>
<div class="customTextCheckbox customTextDelimiterCheckbox">
<div class="check">
<i class="fas fa-fw fa-check"></i>
</div>
</div>
Pipe Delimiter
<span>
Change how words are separated. Using the pipe delimiter allows
@ -661,7 +673,11 @@
<input type="text" class="text" />
<label class="checkbox">
<input type="checkbox" />
<div class="customTextCheckbox"></div>
<div class="customTextCheckbox">
<div class="check">
<i class="fas fa-fw fa-check"></i>
</div>
</div>
Change preset to current settings
</label>
<div class="button"><i class="fas fa-plus"></i></div>
@ -4405,7 +4421,11 @@
<div>
<label id="rememberMe" class="checkbox">
<input type="checkbox" checked />
<div class="customTextCheckbox"></div>
<div class="customTextCheckbox">
<div class="check">
<i class="fas fa-fw fa-check"></i>
</div>
</div>
Remember me
</label>
</div>