mirror of
https://github.com/ankitects/anki.git
synced 2025-09-25 17:26:36 -04:00
Showcase use of access functions in several locations
@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:
parent
e9f75e1756
commit
644ff49966
6 changed files with 15 additions and 9 deletions
|
@ -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);
|
||||||
|
|
|
@ -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
4
sass/bootstrap-tooltip.scss
vendored
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue