GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-12-10 13:26:56 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Use custom down arrow for both SelectButton and EnumSelector

Browse source
This commit is contained in:
Henrik Giesel 2021-05-30 19:46:39 +02:00
parent 8d32528e8d
commit 65f0e7a4ea
2 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ts/components/SelectButton.svelte
View file

@ -35,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class="{className} form-select"
class:btn-day={!nightMode}
class:btn-night={nightMode}
class:visible-down-arrow={nightMode}
title={tooltip}
on:change
>
@ -50,9 +51,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
overflow-x: hidden;
}
.btn-night {
.visible-down-arrow {
/* override the default down arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
@include button.select-night-mode;
}
@include button.btn-day($with-hover: false);

16
ts/deckoptions/EnumSelector.svelte
View file

@ -3,12 +3,26 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
export let choices: string[];
export let value: number = 0;
const nightMode = getContext<boolean>(nightModeKey);
</script>
<select bind:value class="form-select">
<select bind:value class:visible-down-arrow={nightMode} class="form-select">
{#each choices as choice, idx}
<option value={idx}>{choice}</option>
{/each}
</select>
<style lang="scss">
@use "ts/sass/button_mixins" as button;
.visible-down-arrow {
/* override the default down arrow */
@include button.select-night-mode;
}
</style>