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

Abandon btn-secondary and btn-light in favor our own definitions btn-night and btn-day

Browse source
This commit is contained in:
Henrik Giesel 2021-04-15 18:35:46 +02:00
parent 304a7f2f77
commit ccc48bd1d7
4 changed files with 93 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
ts/editor-toolbar/ColorPicker.svelte
View file

@ -41,26 +41,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
overflow: hidden;
}
.btn-light {
@include button.light-hover-active;
background: content-box
linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box $light;
@include button.btn-day($with-disabled: false) using ($base) {
@include button.rainbow($base);
}
.btn-secondary {
background: content-box
linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box $secondary;
@include button.btn-night($with-disabled: false) using ($base) {
@include button.rainbow($base);
}
input {
@ -74,8 +60,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tabindex="-1"
{id}
class={extendClassName(className)}
class:btn-light={!nightMode}
class:btn-secondary={nightMode}
class:btn-day={!nightMode}
class:btn-night={nightMode}
title={tooltip}
on:click={delegateToInput}
on:mousedown|preventDefault>

9
ts/editor-toolbar/LabelButton.svelte
View file

@ -48,9 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
height: var(--toolbar-size);
}
.btn-light {
@include button.light-hover-active;
}
@include button.btn-day;
@include button.btn-night;
</style>
<button
@ -58,8 +57,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{id}
class={extendClassName(className)}
class:dropdown-toggle={dropdownToggle}
class:btn-light={!nightMode}
class:btn-secondary={nightMode}
class:btn-day={!nightMode}
class:btn-night={nightMode}
tabindex="-1"
disabled={_disabled}
title={tooltip}

9
ts/editor-toolbar/SquareButton.svelte
View file

@ -45,9 +45,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
padding: 0;
}
.btn-light {
@include button.light-hover-active;
}
@include button.btn-day;
@include button.btn-night;
span {
display: inline-block;
@ -77,8 +76,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class={extendClassName(className)}
class:active
class:dropdown-toggle={dropdownToggle}
class:btn-light={!nightMode}
class:btn-secondary={nightMode}
class:btn-day={!nightMode}
class:btn-night={nightMode}
tabindex="-1"
title={tooltip}
disabled={_disabled}

86
ts/sass/button_mixins.scss
View file

@ -1,10 +1,82 @@
@mixin light-hover-active {
border-color: var(--faint-border) !important;
@mixin btn-day($with-disabled: true) {
$base-color: white;
&:hover,
&:focus,
&:active,
&.active {
background-color: #e3e3e8;
.btn-day {
color: var(--text-fg);
background-color: $base-color;
border-color: var(--medium-border) !important;
@content ($base-color);
&:hover {
background-color: darken($base-color, 8%);
}
&:active,
&.active {
@include impressed-shadow(0.25);
}
&:active.active {
box-shadow: none;
}
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
box-shadow: none !important;
}
}
}
}
@mixin btn-night($with-disabled: true) {
$base-color: #666;
.btn-night {
color: var(--text-fg);
background-color: $base-color;
border-color: $base-color;
@content ($base-color);
&:hover {
background-color: lighten($base-color, 8%);
border-color: lighten($base-color, 8%);
}
&:active,
&.active {
@include impressed-shadow(0.35);
border-color: darken($base-color, 8%);
}
&:active.active {
box-shadow: none;
border-color: $base-color;
}
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
box-shadow: none !important;
border-color: $base-color !important;
}
}
}
}
@mixin impressed-shadow($intensity) {
box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
rgba(black, $intensity);
}
@mixin rainbow($base) {
background: content-box
linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box $base;
}