GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-26 01:36:37 -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 /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * 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 { :root {
--focus-color: #0078d7; --focus-color: color(button-focus);
.isMac { .isMac {
--focus-color: rgba(0 103 244 / 0.247); --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 /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
@use "fusion-vars"; @use "fusion-vars";
@import "bootstrap/scss/functions"; @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: color(shadow-focus, default);
$focus-color: rgba(21 97 174);
@function down-arrow($color) { @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"); @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 /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
$tooltip-padding-y: 0.45rem; $tooltip-padding-y: 0.45rem;
$tooltip-padding-x: 0.65rem; $tooltip-padding-x: 0.65rem;
$tooltip-max-width: 300px; $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 // the default code color in tooltips is difficult to read; we'll probably
// want to add more of our own styling in the future // want to add more of our own styling in the future
code { code {
color: #ffaaaa; color: palette(red, 0);
direction: inherit; direction: inherit;
} }
} }

3
sass/buttons.scss
View file

@ -1,7 +1,8 @@
@use "vars" as *;
@use "fusion-vars"; @use "fusion-vars";
:root { :root {
--focus-color: #0078d7; --focus-color: color(button-focus);
.isMac { .isMac {
--focus-color: rgba(0 103 244 / 0.247); --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 /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@use "vars" as *;
hr { hr {
background-color: #ccc; background-color: palette(gray, 4);
} }
body { 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> </button>
<style lang="scss"> <style lang="scss">
@use "sass/vars" as *;
@use "sass/button-mixins" as button; @use "sass/button-mixins" as button;
.autocomplete-item { .autocomplete-item {
@ -74,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
color: black; color: black;
&.selected { &.selected {
background-color: #e9ecef; background-color: palette(gray, 1);
border-color: #e9ecef; border-color: palette(gray, 1);
} }
} }