summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.vars.scss10
-rw-r--r--src/objects/_badge.vars.scss6
-rw-r--r--src/objects/_button.vars.scss14
-rw-r--r--src/objects/_card.scss1
-rw-r--r--src/objects/_tabs.scss90
-rw-r--r--src/objects/_tabs.vars.scss22
6 files changed, 128 insertions, 15 deletions
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 5ba6885..9de985a 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -72,20 +72,20 @@ $default-theme: map.deep-merge((
72 ), 72 ),
73 73
74 --selected: ( 74 --selected: (
75 --bg-color: props.get(core.$theme, --text), 75 --bg-color: props.get(core.$theme, --heading),
76 --label-color: props.get(core.$theme, --base, --50), 76 --label-color: props.get(core.$theme, --base, --50),
77 --border-color: props.get(core.$theme, --text-mute), 77 --border-color: props.get(core.$theme, --heading),
78 78
79 --hover: ( 79 --hover: (
80 --bg-color: props.get(core.$theme, --heading), 80 --bg-color: props.get(core.$theme, --text),
81 --label-color: props.get(core.$theme, --base, --50), 81 --label-color: props.get(core.$theme, --base, --50),
82 --border-color: props.get(core.$theme, --text), 82 --border-color: props.get(core.$theme, --text),
83 ), 83 ),
84 84
85 --active: ( 85 --active: (
86 --bg-color: props.get(core.$theme, --heading), 86 --bg-color: props.get(core.$theme, --text-mute),
87 --label-color: props.get(core.$theme, --base, --50), 87 --label-color: props.get(core.$theme, --base, --50),
88 --border-color: props.get(core.$theme, --heading), 88 --border-color: props.get(core.$theme, --text-mute),
89 ), 89 ),
90 90
91 --disabled: ( 91 --disabled: (
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index f33c662..6327e7b 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -40,16 +40,16 @@ $sizes: (
40 40
41$default-theme-override: () !default; 41$default-theme-override: () !default;
42$default-theme: props.def(--o-badge, ( 42$default-theme: props.def(--o-badge, (
43 --bg: props.get(core.$theme, --text), 43 --bg: props.get(core.$theme, --heading),
44 --label: props.get(core.$theme, --bg-l2), 44 --label: props.get(core.$theme, --bg-l2),
45 45
46 --hover: ( 46 --hover: (
47 --bg: props.get(core.$theme, --heading), 47 --bg: props.get(core.$theme, --text),
48 --label: props.get(core.$theme, --bg-l2), 48 --label: props.get(core.$theme, --bg-l2),
49 ), 49 ),
50 50
51 --active: ( 51 --active: (
52 --bg: props.get(core.$theme, --heading), 52 --bg: props.get(core.$theme, --text-mute),
53 --label: props.get(core.$theme, --bg-l2), 53 --label: props.get(core.$theme, --bg-l2),
54 ), 54 ),
55 55
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 36400a2..f70bde7 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -66,19 +66,19 @@ $default-theme: props.def(--o-button, (
66 ), 66 ),
67 67
68 --primary: ( 68 --primary: (
69 --bg: props.get(core.$theme, --base, --800), 69 --bg: props.get(core.$theme, --base, --900),
70 --label: props.get(core.$theme, --base, --800-text), 70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --800), 71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text), 72 --outline-label: props.get(core.$theme, --text),
73 73
74 --hover: ( 74 --hover: (
75 --bg: props.get(core.$theme, --base, --900), 75 --bg: props.get(core.$theme, --base, --800),
76 --label: props.get(core.$theme, --base, --900-text), 76 --label: props.get(core.$theme, --base, --800-text),
77 ), 77 ),
78 78
79 --active: ( 79 --active: (
80 --bg: props.get(core.$theme, --base, --900), 80 --bg: props.get(core.$theme, --base, --700),
81 --label: props.get(core.$theme, --base, --900-text), 81 --label: props.get(core.$theme, --base, --700-text),
82 ), 82 ),
83 ), 83 ),
84), 'color'); 84), 'color');
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 99eb6f4..e6f266d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -129,6 +129,7 @@
129 129
130 @include bem.modifier('quiet') { 130 @include bem.modifier('quiet') {
131 position: relative; 131 position: relative;
132 margin: 0;
132 background-color: transparent; 133 background-color: transparent;
133 border: 0; 134 border: 0;
134 135
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
new file mode 100644
index 0000000..25894d5
--- /dev/null
+++ b/src/objects/_tabs.scss
@@ -0,0 +1,90 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'tabs.vars';
9@use 'tabs.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('tabs') {
15 display: flex;
16 gap: props.get(vars.$spacing);
17
18 @include bem.elem('tab') {
19 position: relative;
20 display: flex;
21 align-items: center;
22 padding-inline: props.get(vars.$tab--pad-i);
23 margin-inline: calc(-1 * props.get(vars.$tab--pad-i));
24 color: props.get(vars.$tab--text-color);
25
26 &::before,
27 &::after {
28 position: absolute;
29 z-index: -10;
30 content: '';
31 }
32
33 &::before {
34 inset-block-start: 50%;
35 inset-inline: 0;
36 block-size: 1.5em;
37 border-radius: props.get(vars.$rounding);
38 transform: translateY(-50%);
39 }
40
41 &::after {
42 inset-block-end: 0;
43 inset-inline: props.get(vars.$tab--pad-i);
44 display: none;
45 block-size: props.get(vars.$indicator--width);
46 background-color: props.get(vars.$tab--selected--text-color);
47 }
48
49 &:link,
50 &:visited {
51 &:hover,
52 &:active,
53 &:focus-visible {
54 color: props.get(vars.$tab--selected--text-color);
55 }
56
57 &:focus-visible {
58 &::before {
59 color: props.get(vars.$key-focus--text-color);
60 text-decoration: none;
61 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
62 box-shadow: 0 0 0
63 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
64 props.get(vars.$key-focus--outline-color);
65 }
66 }
67 }
68
69 @include bem.is('selected') {
70 color: props.get(vars.$tab--selected--text-color);
71
72 &::after {
73 display: block;
74 }
75 }
76 }
77
78 @include bem.modifier('accent') {
79 @include bem.elem('tab') {
80 &::after {
81 background-color: props.get(vars.$tab--accent--text-color);
82 }
83
84 @include bem.is('selected') {
85 color: props.get(vars.$tab--accent--text-color);
86 }
87 }
88 }
89 }
90}
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
new file mode 100644
index 0000000..620228a
--- /dev/null
+++ b/src/objects/_tabs.vars.scss
@@ -0,0 +1,22 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$rounding: props.def(--o-tabs--rounding, props.get(core.$rounding)) !default;
7$spacing: props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
8$tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default;
9
10$indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default;
11
12$key-focus--border-width: props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
13$key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
14$key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
15
16$tab--text-color: props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
17$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
18$tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
19
20$key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
21$key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
22$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-15 04:58:35 +0000