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

Showcase use of access functions in several locations

Browse source 
@hgiesel in buttons.scss I access the color palette directly. Is this what you meant by "... keep it local to the component, and possibly make it global at a later time ..."?
This commit is contained in:
Matthias Metelka 2022-08-30 17:17:15 +02:00
parent e9f75e1756
commit 644ff49966
6 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
qt/aqt/data/web/css/reviewer-bottom.scss
View file

@ -1,10 +1,11 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "sass/card-counts";
@use "vars" as *;
@use "sass/card-counts";
:root {
--focus-color: #0078d7;
--focus-color: color(button-focus);
.isMac {
--focus-color: rgba(0 103 244 / 0.247);

4
sass/_button-mixins.scss
View file

@ -1,5 +1,6 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
@use "fusion-vars";
@import "bootstrap/scss/functions";
@ -131,8 +132,7 @@ $btn-base-color-night: fusion-vars.$button-border;
}
}
// should be similar to -webkit-focus-ring-color
$focus-color: rgba(21 97 174);
$focus-color: color(shadow-focus, default);
@function down-arrow($color) {
@return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

4
sass/bootstrap-tooltip.scss vendored
View file

@ -1,6 +1,8 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
$tooltip-padding-y: 0.45rem;
$tooltip-padding-x: 0.65rem;
$tooltip-max-width: 300px;
@ -19,7 +21,7 @@ $tooltip-max-width: 300px;
// the default code color in tooltips is difficult to read; we'll probably
// want to add more of our own styling in the future
code {
color: #ffaaaa;
color: palette(red, 0);
direction: inherit;
}
}

3
sass/buttons.scss
View file

@ -1,7 +1,8 @@
@use "vars" as *;
@use "fusion-vars";
:root {
--focus-color: #0078d7;
--focus-color: color(button-focus);
.isMac {
--focus-color: rgba(0 103 244 / 0.247);

3
ts/reviewer/reviewer.scss
View file

@ -1,8 +1,9 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
hr {
background-color: #ccc;
background-color: palette(gray, 4);
}
body {

5
ts/tag-editor/AutocompleteItem.svelte
View file

@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</button>
<style lang="scss">
@use "sass/vars" as *;
@use "sass/button-mixins" as button;
.autocomplete-item {
@ -74,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
color: black;
&.selected {
background-color: #e9ecef;
border-color: #e9ecef;
background-color: palette(gray, 1);
border-color: palette(gray, 1);
}
}