diff options
-rw-r--r-- | src/_iro-design.scss | 2 | ||||
-rw-r--r-- | src/objects/_tabbar.scss (renamed from src/objects/_tabs.scss) | 0 | ||||
-rw-r--r-- | src/objects/_tabbar.vars.scss | 25 | ||||
-rw-r--r-- | src/objects/_tabs.vars.scss | 25 | ||||
-rw-r--r-- | src_demo/index.scss | 2 |
5 files changed, 27 insertions, 27 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 204e889..2010a2d 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
@@ -66,7 +66,7 @@ $breakpoints: ( | |||
66 | @forward 'objects/status-indicator' as o-status-indicator--*; | 66 | @forward 'objects/status-indicator' as o-status-indicator--*; |
67 | @forward 'objects/switch' as o-switch--*; | 67 | @forward 'objects/switch' as o-switch--*; |
68 | @forward 'objects/table' as o-table--*; | 68 | @forward 'objects/table' as o-table--*; |
69 | @forward 'objects/tabs' as o-tabs--*; | 69 | @forward 'objects/tabbar' as o-tabbar--*; |
70 | @forward 'objects/text-field' as o-text-field--*; | 70 | @forward 'objects/text-field' as o-text-field--*; |
71 | @forward 'objects/thumbnail' as o-thumbnail--*; | 71 | @forward 'objects/thumbnail' as o-thumbnail--*; |
72 | 72 | ||
diff --git a/src/objects/_tabs.scss b/src/objects/_tabbar.scss index 80fac0b..80fac0b 100644 --- a/src/objects/_tabs.scss +++ b/src/objects/_tabbar.scss | |||
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss new file mode 100644 index 0000000..f4486d6 --- /dev/null +++ b/src/objects/_tabbar.vars.scss | |||
@@ -0,0 +1,25 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; | ||
7 | $rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default; | ||
8 | $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; | ||
9 | $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; | ||
10 | |||
11 | $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
18 | $tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
19 | $tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
20 | |||
21 | $railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
22 | |||
23 | $key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
24 | $key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
25 | $key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss deleted file mode 100644 index 08b24cb..0000000 --- a/src/objects/_tabs.vars.scss +++ /dev/null | |||
@@ -1,25 +0,0 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $block-size: props.def(--o-tabs--block-size, props.get(core.$size--700)) !default; | ||
7 | $rounding: props.def(--o-tabs--rounding, props.get(core.$rounding)) !default; | ||
8 | $spacing: props.def(--o-tabs--spacing, props.get(core.$size--400)) !default; | ||
9 | $tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default; | ||
10 | |||
11 | $indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $tab--text-color: props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
18 | $tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
19 | $tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
20 | |||
21 | $railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
22 | |||
23 | $key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
24 | $key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
25 | $key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src_demo/index.scss b/src_demo/index.scss index c5d1eef..701f638 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss | |||
@@ -44,7 +44,7 @@ | |||
44 | @include iro.o-status-indicator--styles; | 44 | @include iro.o-status-indicator--styles; |
45 | @include iro.o-switch--styles; | 45 | @include iro.o-switch--styles; |
46 | @include iro.o-table--styles; | 46 | @include iro.o-table--styles; |
47 | @include iro.o-tabs--styles; | 47 | @include iro.o-tabbar--styles; |
48 | @include iro.o-text-field--styles; | 48 | @include iro.o-text-field--styles; |
49 | @include iro.o-thumbnail--styles; | 49 | @include iro.o-thumbnail--styles; |
50 | 50 | ||