mirror of
https://github.com/ankitects/anki.git
synced 2025-12-10 21:36:55 -05:00
Use custom down arrow for both SelectButton and EnumSelector
This commit is contained in:
parent
8d32528e8d
commit
65f0e7a4ea
2 changed files with 18 additions and 3 deletions
|
|
@ -35,6 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
class="{className} form-select"
|
class="{className} form-select"
|
||||||
class:btn-day={!nightMode}
|
class:btn-day={!nightMode}
|
||||||
class:btn-night={nightMode}
|
class:btn-night={nightMode}
|
||||||
|
class:visible-down-arrow={nightMode}
|
||||||
title={tooltip}
|
title={tooltip}
|
||||||
on:change
|
on:change
|
||||||
>
|
>
|
||||||
|
|
@ -50,9 +51,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-night {
|
.visible-down-arrow {
|
||||||
/* override the default 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);
|
@include button.btn-day($with-hover: false);
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,26 @@ Copyright: Ankitects Pty Ltd and contributors
|
||||||
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { getContext } from "svelte";
|
||||||
|
import { nightModeKey } from "components/contextKeys";
|
||||||
|
|
||||||
export let choices: string[];
|
export let choices: string[];
|
||||||
export let value: number = 0;
|
export let value: number = 0;
|
||||||
|
|
||||||
|
const nightMode = getContext<boolean>(nightModeKey);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<select bind:value class="form-select">
|
<select bind:value class:visible-down-arrow={nightMode} class="form-select">
|
||||||
{#each choices as choice, idx}
|
{#each choices as choice, idx}
|
||||||
<option value={idx}>{choice}</option>
|
<option value={idx}>{choice}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue