open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix checked icon size

Browse Source
This commit is contained in:
Rob Garrison 2019-01-02 23:24:10 -06:00
parent 0d87689078
commit 9b408aaad4
2 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
manage.html
View File

@ -33,9 +33,10 @@
<div class="entry-col entry-filter"> <div class="entry-col entry-filter">
<label class="checkmate" tabindex="0"> <label class="checkmate" tabindex="0">
<input class="entry-filter-toggle" type="checkbox"> <input class="entry-filter-toggle" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
</label> </label>
</div> </div>
@ -43,9 +44,10 @@
<div class="entry-col entry-state"> <div class="entry-col entry-state">
<label class="checkmate" tabindex="0"> <label class="checkmate" tabindex="0">
<input class="entry-state-toggle" type="checkbox"> <input class="entry-state-toggle" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
</label> </label>
</div> </div>
@ -325,9 +327,10 @@
<input id="manage.onlyEnabled" type="checkbox" <input id="manage.onlyEnabled" type="checkbox"
data-filter=".enabled" data-filter=".enabled"
data-filter-hide=".disabled"> data-filter-hide=".disabled">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
</label> </label>
<span class="select-resizer"> <span class="select-resizer">
@ -344,9 +347,10 @@
<input id="manage.onlyLocal" type="checkbox" <input id="manage.onlyLocal" type="checkbox"
data-filter=":not(.updatable):not(.update-done)" data-filter=":not(.updatable):not(.update-done)"
data-filter-hide=".updatable, .update-done"> data-filter-hide=".updatable, .update-done">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
</label> </label>
<span class="select-resizer"> <span class="select-resizer">
@ -363,9 +367,10 @@
<input id="manage.onlyUsercss" type="checkbox" <input id="manage.onlyUsercss" type="checkbox"
data-filter=".usercss" data-filter=".usercss"
data-filter-hide=":not(.usercss)"> data-filter-hide=":not(.usercss)">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
</label> </label>
<span class="select-resizer"> <span class="select-resizer">
@ -384,9 +389,10 @@
data-filter-hide=":not(.updatable):not(.update-done), data-filter-hide=":not(.updatable):not(.update-done),
.no-update:not(.update-problem), .no-update:not(.update-problem),
.updatable:not(.can-update):not(.update-problem):not(.update-done)"> .updatable:not(.can-update):not(.update-problem):not(.update-done)">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
<span i18n-text="manageOnlyUpdates"></span> <span i18n-text="manageOnlyUpdates"></span>
</label> </label>
@ -399,11 +405,11 @@
<div> <div>
<label class="checkmate toggle-all" tabindex="0"> <label class="checkmate toggle-all" tabindex="0">
<input id="toggle-all-filters" type="checkbox"> <input id="toggle-all-filters" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 14 14"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/> <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
<path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/> <path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
</svg> </svg>
</label> </label>
<span id="bulk-filter-count"></span> <span id="bulk-filter-count"></span>
@ -446,7 +452,6 @@
</span> </span>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24"> <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
@ -509,10 +514,10 @@
<div id="appliesToConfig"> <div id="appliesToConfig">
<label class="checkmate" tabindex="0"> <label class="checkmate" tabindex="0">
<input id="manage.newUI.favicons" type="checkbox"> <input id="manage.newUI.favicons" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
8.01 8.01 0 0 1 0 16z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
<span i18n-text="manageFavicons"></span> <span i18n-text="manageFavicons"></span>
</label> </label>
@ -520,10 +525,10 @@
<p></p> <p></p>
<label class="checkmate" tabindex="0"> <label class="checkmate" tabindex="0">
<input id="manage.newUI.faviconsGray" type="checkbox"> <input id="manage.newUI.faviconsGray" type="checkbox">
<svg class="svg-icon checkbox" viewBox="0 0 24 24"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
8.01 8.01 0 0 1 0 16z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/> <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
</svg> </svg>
<span i18n-text="manageFaviconsGray"></span> <span i18n-text="manageFaviconsGray"></span>
</label> </label>

26
manage/manage.css
View File

@ -12,13 +12,16 @@
--header-icon-color: #888; --header-icon-color: #888;
--header-icon-hover-color: hsla(180, 99%, 58%, 1); --header-icon-hover-color: hsla(180, 99%, 58%, 1);
--tools-bg-color: #ccc;
--entry-header-bg-color: #ddd; --entry-header-bg-color: #ddd;
--entry-header-text-color: #111; --entry-header-text-color: #111;
--checked-bg-color: hsla(180, 38%, 25%, 1); --checked-count-bg-color: hsla(180, 100%, 20%, 1);
--checked-bg-color: hsla(180, 100%, 20%, 1);
--checked-mark-color: #fff; --checked-mark-color: #fff;
--entry-icon-color: #666; --entry-icon-color: #666;
--entry-icon-hover-color: hsla(180, 38%, 25%, 1); --entry-icon-hover-color: hsla(180, 100%, 20%, 1);
--delete-icon-hover-color: #d40000; --delete-icon-hover-color: #d40000;
} }
@ -425,14 +428,15 @@ a svg, .svg-icon.sort {
} }
/* Checkbox */ /* Checkbox */
.checkmate input:checked + svg.checkbox { .checkmate input:checked + svg.checkbox .filled-circle {
background: var(--checked-bg-color); fill: var(--checked-bg-color);
border-radius: var(--entry-icon-size); display: block;
} }
.checkmate input[type="checkbox"], .checkmate input[type="checkbox"],
.checkmate input:checked + svg.checkbox .circle, .checkmate input:checked + svg.checkbox .circle,
.checkmate input:not(:checked) + svg .checkmark, .checkmate input:not(:checked) + svg .checkmark,
.checkmate input:not(:checked) + svg.checkbox .filled-circle,
.checkmate input:not(:indeterminate) + svg .indeterminate { .checkmate input:not(:indeterminate) + svg .indeterminate {
display: none; display: none;
} }
@ -642,7 +646,7 @@ details.applies-to-extra[open] {
/* bulk actions */ /* bulk actions */
#tools-wrapper { #tools-wrapper {
background: #ddd; background: var(--tools-bg-color);
width: 100vw; width: 100vw;
position: fixed; position: fixed;
top: var(--header-height); top: var(--header-height);
@ -708,16 +712,10 @@ details.applies-to-extra[open] {
display: none !important; display: none !important;
} }
#filters-wrapper filter-selection {
display: flex;
align-items: center;
}
.active #filters-stats, .active #filters-stats,
#bulk-filter-count:not(:empty) { #bulk-filter-count:not(:empty) {
background-color: darkcyan; background-color: var(--checked-count-bg-color);
border-color: darkcyan; border-color: var(--checked-count-bg-color);
border-radius: 2px; border-radius: 2px;
color: white; color: white;
font-size: 0.7rem; font-size: 0.7rem;