summaryrefslogtreecommitdiffstats
path: root/src/objects/_navbar.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-11 21:27:14 +0100
committerVolpeon <git@volpeon.ink>2025-11-11 21:27:14 +0100
commit5650fe9589ed6043f461b6b60e1303045a4ec6c4 (patch)
treece0b4b2871f78fdf09569580869fc4616bb5ca25 /src/objects/_navbar.vars.scss
parentFixed and improved nav bar to support labels (diff)
downloadiro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.tar.gz
iro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.tar.bz2
iro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.zip
Navbar
Diffstat (limited to 'src/objects/_navbar.vars.scss')
-rw-r--r--src/objects/_navbar.vars.scss50
1 files changed, 30 insertions, 20 deletions
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 4f5cde3..1cf460e 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -3,14 +3,16 @@
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; 6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default; 7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default;
8 8
9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; 10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
11$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; 11$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
12$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; 12$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
13$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
13$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; 14$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
15$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
14$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; 16$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
15 17
16$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 18$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
@@ -19,20 +21,24 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
19 21
20$default-theme-override: () !default; 22$default-theme-override: () !default;
21$default-theme: map.deep-merge(( 23$default-theme: map.deep-merge((
22 --label-color: props.get(core.$theme, --text), 24 --text-color: props.get(core.$theme, --text),
25 --label-color: props.get(core.$theme, --text-mute),
23 26
24 --hover: ( 27 --hover: (
25 --bg-color: props.get(core.$theme, --border-mute), 28 --bg-color: props.get(core.$theme, --border-mute),
26 --label-color: props.get(core.$theme, --heading), 29 --text-color: props.get(core.$theme, --heading),
30 --label-color: props.get(core.$theme, --text),
27 ), 31 ),
28 32
29 --active: ( 33 --active: (
30 --bg-color: props.get(core.$theme, --border), 34 --bg-color: props.get(core.$theme, --border),
35 --text-color: props.get(core.$theme, --heading),
31 --label-color: props.get(core.$theme, --heading), 36 --label-color: props.get(core.$theme, --heading),
32 ), 37 ),
33 38
34 --disabled: ( 39 --disabled: (
35 --label-color: props.get(core.$theme, --border-strong), 40 --text-color: props.get(core.$theme, --border-strong),
41 --label-color: props.get(core.$theme, --text-disabled),
36 ), 42 ),
37 43
38 --key-focus: ( 44 --key-focus: (
@@ -42,43 +48,47 @@ $default-theme: map.deep-merge((
42 ), 48 ),
43 49
44 --selected: ( 50 --selected: (
45 --bg-color: props.get(core.$theme, --heading), 51 --bg-color: props.get(core.$theme, --heading),
46 --label-color: props.get(core.$theme, --base, --50), 52 --text-color: props.get(core.$theme, --base, --50),
53 --label-color: props.get(core.$theme, --heading),
47 54
48 --hover: ( 55 --hover: (
49 --bg-color: props.get(core.$theme, --text), 56 --bg-color: props.get(core.$theme, --text),
50 --label-color: props.get(core.$theme, --base, --50), 57 --text-color: props.get(core.$theme, --base, --50),
58 --label-color: props.get(core.$theme, --heading),
51 ), 59 ),
52 60
53 --active: ( 61 --active: (
54 --bg-color: props.get(core.$theme, --text-mute), 62 --bg-color: props.get(core.$theme, --text-mute),
55 --label-color: props.get(core.$theme, --base, --50), 63 --text-color: props.get(core.$theme, --base, --50),
64 --label-color: props.get(core.$theme, --heading),
56 ), 65 ),
57 66
58 --disabled: ( 67 --disabled: (
59 --bg-color: props.get(core.$theme, --border-mute), 68 --bg-color: props.get(core.$theme, --border-mute),
60 --label-color: props.get(core.$theme, --border-strong), 69 --text-color: props.get(core.$theme, --border-strong),
70 --label-color: props.get(core.$theme, --text-disabled),
61 ), 71 ),
62 ), 72 ),
63 73
64 --quiet: ( 74 --quiet: (
65 --selected: ( 75 --selected: (
66 --bg-color: props.get(core.$theme, --accent, --200), 76 --bg-color: props.get(core.$theme, --border-mute),
67 --label-color: props.get(core.$theme, --accent, --1100), 77 --text-color: props.get(core.$theme, --heading),
68 78
69 --hover: ( 79 --hover: (
70 --bg-color: props.get(core.$theme, --accent, --300), 80 --bg-color: props.get(core.$theme, --border-mute),
71 --label-color: props.get(core.$theme, --accent, --1200), 81 --text-color: props.get(core.$theme, --heading),
72 ), 82 ),
73 83
74 --active: ( 84 --active: (
75 --bg-color: props.get(core.$theme, --accent, --400), 85 --bg-color: props.get(core.$theme, --border-mute),
76 --label-color: props.get(core.$theme, --accent, --1300), 86 --text-color: props.get(core.$theme, --heading),
77 ), 87 ),
78 88
79 --disabled: ( 89 --disabled: (
80 --bg-color: props.get(core.$theme, --accent, --200), 90 --bg-color: props.get(core.$theme, --border-mute),
81 --label-color: props.get(core.$theme, --accent, --800), 91 --text-color: props.get(core.$theme, --border-strong),
82 ), 92 ),
83 ) 93 )
84 ) 94 )
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-12 11:42:59 +0000