data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: improve a11y, move preview box inside label (#997)

Browse source
This commit is contained in:
Nolan Lawson 2019-02-15 19:03:24 -08:00 committed by GitHub
parent 25aea9f30a
commit 59544d2cf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/routes/_components/settings/instance/ThemeSettings.html
View file

@ -10,11 +10,13 @@
<input type="radio" id="choice-theme-{theme.name}" <input type="radio" id="choice-theme-{theme.name}"
value={theme.name} checked="$currentTheme === theme.name" value={theme.name} checked="$currentTheme === theme.name"
bind:group="selectedTheme" on:change="onThemeChange()"> bind:group="selectedTheme" on:change="onThemeChange()">
<label class="theme-picker-label" for="choice-theme-{theme.name}">
<div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}" <div class="theme-preview theme-preview-{themeGroup.dark ? 'dark' : 'light'}"
style="background-color: {theme.color};" > style="background-color: {theme.color};" >
</div> </div>
<label class="theme-picker-label" for="choice-theme-{theme.name}"> <span class="theme-picker-label-span">
{theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''} {theme.label} {theme.name === DEFAULT_THEME ? '(default)' : ''}
</span>
</label> </label>
</div> </div>
{/each} {/each}
@ -43,15 +45,18 @@
} }
.theme-picker { .theme-picker {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
} }
.theme-picker-label { .theme-picker-label {
display: flex;
align-items: center;
}
.theme-picker-label-span {
margin: 2px 10px 0; margin: 2px 10px 0;
} }
.theme-preview { .theme-preview {
width: 1.5em; width: 21px;
height: 1.5em; height: 21px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 2px; border-radius: 2px;
margin: 0 2px 0 10px; margin: 0 2px 0 10px;