GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-21 15:32: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

31
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> </script>
<style lang="scss"> <style lang="scss">
@import "ts/sass/bootstrap/functions"; @use 'ts/sass/button_mixins' as button;
@import "ts/sass/bootstrap/variables";
button { button {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
color: black; &:active {
background-color: button.$focus-color;
&.nightMode {
color: white; color: white;
&:hover,
&:focus {
color: black;
}
&:active {
color: white;
}
} }
}
.btn-day {
color: black;
}
.btn-night {
color: white;
&:hover,
&:focus { &: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 <button
{id} {id}
class={`btn dropdown-item ${className}`} class={`btn dropdown-item ${className}`}
class:nightMode class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip} title={tooltip}
on:click={onClick} on:click={onClick}
on:mousedown|preventDefault> 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> </script>
<style lang="scss"> <style lang="scss">
@import "ts/sass/bootstrap/functions"; @use 'ts/sass/button_mixins' as button;
@import "ts/sass/bootstrap/variables";
ul { ul {
background-color: $light; background-color: white;
border-color: var(--medium-border);
}
&.nightMode { .night-mode {
background-color: $secondary; background-color: var(--bg-color);
}
} }
</style> </style>
<ul {id} class="dropdown-menu" class:nightMode> <ul {id} class="dropdown-menu" class:night-mode={nightMode}>
{#each menuItems as menuItem} {#each menuItems as menuItem}
<li class:nightMode> <li>
<svelte:component this={menuItem.component} {...menuItem} /> <svelte:component this={menuItem.component} {...menuItem} />
</li> </li>
{/each} {/each}

56
ts/sass/button_mixins.scss
View file

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