GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -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">
import type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey } from "./contextKeys";
import { disabledKey, nightModeKey } from "./contextKeys";
export let id: string | undefined = undefined;
let className = "";
@ -15,16 +15,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let disables = true;
const nightMode = getContext<boolean>(nightModeKey);
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
let buttonRef: HTMLSelectElement;
const dispatch = createEventDispatcher();
onMount(() => dispatch("mount", { button: buttonRef }));
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
</script>
<style lang="scss">
@use "ts/sass/button_mixins" as button;
select {
display: inline-block;
vertical-align: middle;
@ -37,14 +40,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
box-shadow: none;
border-radius: 0;
&:hover {
background-color: #eee;
}
&:focus {
outline: none;
}
}
@include button.btn-day($with-hover: false);
@include button.btn-night($with-hover: false);
</style>
<!-- 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}
disabled={_disabled}
{id}
class={` ${className}`}
class={className}
class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip}
on:change>
<slot />

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

@ -5,29 +5,6 @@
@use 'fusion_vars';
@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 {
background-color: var(--window-bg);
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;
}
@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 {
@include btn-day-base;
@content ($btn-base-color-day);
&:hover {
background-color: darken($btn-base-color-day, 8%);
@if ($with-hover) {
&:hover {
background-color: darken($btn-base-color-day, 8%);
}
}
&:active,
&.active {
@include impressed-shadow(0.25);
}
@if ($with-active) {
&:active,
&.active {
@include impressed-shadow(0.25);
}
&:active.active {
box-shadow: none;
&:active.active {
box-shadow: none;
}
}
@if ($with-disabled) {
@ -56,25 +60,30 @@ $btn-base-color-night: #666;
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 {
@include btn-night-base;
@content ($btn-base-color-night);
&:hover {
background-color: lighten($btn-base-color-night, 8%);
border-color: lighten($btn-base-color-night, 8%);
@if ($with-hover) {
&:hover {
background-color: lighten($btn-base-color-night, 8%);
border-color: lighten($btn-base-color-night, 8%);
}
}
&:active,
&.active {
@include impressed-shadow(0.35);
border-color: darken($btn-base-color-night, 8%);
}
@if ($with-disabled) {
&:active,
&.active {
@include impressed-shadow(0.35);
border-color: darken($btn-base-color-night, 8%);
}
&:active.active {
box-shadow: none;
border-color: $btn-base-color-night;
&:active.active {
box-shadow: none;
border-color: $btn-base-color-night;
}
}
@if ($with-disabled) {