GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Make styling on select button behave correctly

Browse source
This commit is contained in:
Henrik Giesel 2021-05-18 17:50:18 +02:00
parent e5d11ac547
commit 94cdebe59c
3 changed files with 43 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ts/components/SelectButton.svelte
View file

@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="typescript"> <script lang="typescript">
import type { Readable } from "svelte/store"; import type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte"; import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey } from "./contextKeys"; import { disabledKey, nightModeKey } from "./contextKeys";
export let id: string | undefined = undefined; export let id: string | undefined = undefined;
let className = ""; let className = "";
@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let disables = true; export let disables = true;
const nightMode = getContext<boolean>(nightModeKey);
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
let buttonRef: HTMLSelectElement; let buttonRef: HTMLSelectElement;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef })); onMount(() => dispatch("mount", { button: buttonRef }));
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
</script> </script>
<style lang="scss"> <style lang="scss">
@use "ts/sass/button_mixins" as button;
select { select {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -37,14 +40,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
&:hover {
background-color: #eee;
}
&:focus { &:focus {
outline: none; outline: none;
} }
} }
@include button.btn-day($with-hover: false);
@include button.btn-night($with-hover: false);
</style> </style>
<!-- svelte-ignore a11y-no-onchange --> <!-- svelte-ignore a11y-no-onchange -->
@ -54,7 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:this={buttonRef} bind:this={buttonRef}
disabled={_disabled} disabled={_disabled}
{id} {id}
class={` ${className}`} class={className}
class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip} title={tooltip}
on:change> on:change>
<slot /> <slot />

23
ts/sass/bootstrap-dark.scss vendored
View file

@ -5,29 +5,6 @@
@use 'fusion_vars'; @use 'fusion_vars';
@mixin night-mode { @mixin night-mode {
input,
select {
background-color: var(--frame-bg);
border-color: var(--border);
&:focus {
background-color: var(--window-bg);
}
}
.dropdown-menu {
background-color: var(--frame-bg);
.dropdown-item {
color: var(--text-fg);
&:hover,
&:active {
background-color: var(--window-bg);
}
}
}
.modal-content { .modal-content {
background-color: var(--window-bg); background-color: var(--window-bg);
color: var(--text-fg); color: var(--text-fg);

51
ts/sass/button_mixins.scss
View file

@ -17,22 +17,26 @@ $btn-base-color-day: white;
border-color: var(--medium-border) !important; border-color: var(--medium-border) !important;
} }
@mixin btn-day($with-disabled: true, $with-margin: true) { @mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
.btn-day { .btn-day {
@include btn-day-base; @include btn-day-base;
@content ($btn-base-color-day); @content ($btn-base-color-day);
&:hover { @if ($with-hover) {
background-color: darken($btn-base-color-day, 8%); &:hover {
background-color: darken($btn-base-color-day, 8%);
}
} }
&:active, @if ($with-active) {
&.active { &:active,
@include impressed-shadow(0.25); &.active {
} @include impressed-shadow(0.25);
}
&:active.active { &:active.active {
box-shadow: none; box-shadow: none;
}
} }
@if ($with-disabled) { @if ($with-disabled) {
@ -56,25 +60,30 @@ $btn-base-color-night: #666;
border-color: $btn-base-color-night; border-color: $btn-base-color-night;
} }
@mixin btn-night($with-disabled: true, $with-margin: true) { @mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
.btn-night { .btn-night {
@include btn-night-base; @include btn-night-base;
@content ($btn-base-color-night); @content ($btn-base-color-night);
&:hover { @if ($with-hover) {
background-color: lighten($btn-base-color-night, 8%); &:hover {
border-color: lighten($btn-base-color-night, 8%); background-color: lighten($btn-base-color-night, 8%);
border-color: lighten($btn-base-color-night, 8%);
}
} }
&:active, @if ($with-disabled) {
&.active { &:active,
@include impressed-shadow(0.35); &.active {
border-color: darken($btn-base-color-night, 8%); @include impressed-shadow(0.35);
} border-color: darken($btn-base-color-night, 8%);
}
&:active.active { &:active.active {
box-shadow: none; box-shadow: none;
border-color: $btn-base-color-night; border-color: $btn-base-color-night;
}
} }
@if ($with-disabled) { @if ($with-disabled) {