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

Change style for Dropdown{Menu,Item} to match Button{Group,Dropdown}

Browse source
This commit is contained in:
Henrik Giesel 2021-04-16 18:14:09 +02:00
parent f2e313664c
commit b60f9cd05d
3 changed files with 57 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
ts/editor-toolbar/DropdownItem.svelte
View file

@ -18,30 +18,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<style lang="scss">
@import "ts/sass/bootstrap/functions";
@import "ts/sass/bootstrap/variables";
@use 'ts/sass/button_mixins' as button;
button {
display: flex;
justify-content: space-between;
color: black;
&:active {
background-color: button.$focus-color;
color: white;
}
}
&.nightMode {
.btn-day {
color: black;
}
.btn-night {
color: white;
&:hover,
&:focus {
color: black;
}
&:active {
color: white;
}
}
&:focus {
box-shadow: none;
@include button.btn-night-base;
}
}
@ -58,7 +56,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<button
{id}
class={`btn dropdown-item ${className}`}
class:nightMode
class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip}
on:click={onClick}
on:mousedown|preventDefault>

16
ts/editor-toolbar/DropdownMenu.svelte
View file

@ -14,21 +14,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<style lang="scss">
@import "ts/sass/bootstrap/functions";
@import "ts/sass/bootstrap/variables";
@use 'ts/sass/button_mixins' as button;
ul {
background-color: $light;
&.nightMode {
background-color: $secondary;
background-color: white;
border-color: var(--medium-border);
}
.night-mode {
background-color: var(--bg-color);
}
</style>
<ul {id} class="dropdown-menu" class:nightMode>
<ul {id} class="dropdown-menu" class:night-mode={nightMode}>
{#each menuItems as menuItem}
<li class:nightMode>
<li>
<svelte:component this={menuItem.component} {...menuItem} />
</li>
{/each}

50
ts/sass/button_mixins.scss
View file

@ -1,15 +1,21 @@
@mixin btn-day($with-disabled: true) {
$base-color: white;
@import "ts/bootstrap/functions";
@import "ts/bootstrap/variables";
.btn-day {
$btn-base-color-day: white;
@mixin btn-day-base {
color: var(--text-fg);
background-color: $base-color;
background-color: $btn-base-color-day;
border-color: var(--medium-border) !important;
}
@content ($base-color);
@mixin btn-day($with-disabled: true) {
.btn-day {
@include btn-day-base;
@content ($btn-base-color-day);
&:hover {
background-color: darken($base-color, 8%);
background-color: darken($btn-base-color-day, 8%);
}
&:active,
@ -23,49 +29,55 @@
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
background-color: $btn-base-color-day !important;
box-shadow: none !important;
}
}
}
}
@mixin btn-night($with-disabled: true) {
$base-color: #666;
$btn-base-color-night: #666;
.btn-night {
@mixin btn-night-base {
color: var(--text-fg);
background-color: $base-color;
border-color: $base-color;
background-color: $btn-base-color-night;
border-color: $btn-base-color-night;
}
@content ($base-color);
@mixin btn-night($with-disabled: true) {
.btn-night {
@include btn-night-base;
@content ($btn-base-color-night);
&:hover {
background-color: lighten($base-color, 8%);
border-color: lighten($base-color, 8%);
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($base-color, 8%);
border-color: darken($btn-base-color-night, 8%);
}
&:active.active {
box-shadow: none;
border-color: $base-color;
border-color: $btn-base-color-night;
}
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
background-color: $btn-base-color-night !important;
box-shadow: none !important;
border-color: $base-color !important;
border-color: $btn-base-color-night !important;
}
}
}
}
// should be similar to -webkit-focus-ring-color
$focus-color: $blue;
@mixin impressed-shadow($intensity) {
box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
rgba(black, $intensity);