summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_iro-design.scss3
-rw-r--r--src/_layers.scss3
-rw-r--r--src/_utils.scss4
-rw-r--r--src/objects/_card.scss19
-rw-r--r--src/objects/_card.vars.scss12
-rw-r--r--src/objects/_tabbar.scss113
-rw-r--r--src/objects/_tabbar.vars.scss25
-rw-r--r--src/objects/_tabs.scss127
-rw-r--r--src/objects/_tabs.vars.scss25
-rw-r--r--src/scopes/_figures.vars.scss4
10 files changed, 174 insertions, 161 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 204e889..04857e3 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -23,6 +23,7 @@ $breakpoints: (
23@forward 'config' as config--*; 23@forward 'config' as config--*;
24@forward 'props' as props--*; 24@forward 'props' as props--*;
25@forward 'core' as core--*; 25@forward 'core' as core--*;
26@forward 'layers' as layers--*;
26 27
27@forward 'layouts/button-group' as l-button-group--*; 28@forward 'layouts/button-group' as l-button-group--*;
28@forward 'layouts/card-list' as l-card-list--*; 29@forward 'layouts/card-list' as l-card-list--*;
@@ -66,7 +67,7 @@ $breakpoints: (
66@forward 'objects/status-indicator' as o-status-indicator--*; 67@forward 'objects/status-indicator' as o-status-indicator--*;
67@forward 'objects/switch' as o-switch--*; 68@forward 'objects/switch' as o-switch--*;
68@forward 'objects/table' as o-table--*; 69@forward 'objects/table' as o-table--*;
69@forward 'objects/tabs' as o-tabs--*; 70@forward 'objects/tabbar' as o-tabbar--*;
70@forward 'objects/text-field' as o-text-field--*; 71@forward 'objects/text-field' as o-text-field--*;
71@forward 'objects/thumbnail' as o-thumbnail--*; 72@forward 'objects/thumbnail' as o-thumbnail--*;
72 73
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..cc3bb50
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
1@mixin styles {
2 @layer scope, theme, object, layout, component, utility;
3}
diff --git a/src/_utils.scss b/src/_utils.scss
index bd92454..e90aa57 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -200,6 +200,10 @@ $-sizes: (
200 white-space: nowrap; 200 white-space: nowrap;
201 } 201 }
202 202
203 @include bem.utility('o-auto') {
204 overflow: auto;
205 }
206
203 @include bem.utility('o-hidden') { 207 @include bem.utility('o-hidden') {
204 overflow: hidden; 208 overflow: hidden;
205 } 209 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..ff95526 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -55,9 +55,11 @@
55 } 55 }
56 56
57 @include bem.elem('image') { 57 @include bem.elem('image') {
58 position: relative;
58 display: block; 59 display: block;
59 flex: 0 0 auto; 60 flex: 0 0 auto;
60 inline-size: 100%; 61 inline-size: 100%;
62 overflow: hidden;
61 object-fit: cover; 63 object-fit: cover;
62 transition: transform .2s, opacity .2s; 64 transition: transform .2s, opacity .2s;
63 65
@@ -76,6 +78,21 @@
76 } 78 }
77 } 79 }
78 80
81 @include bem.elem('image-img') {
82 display: block;
83 inline-size: 100%;
84 object-fit: cover;
85 }
86
87 @include bem.elem('image-overlay') {
88 position: absolute;
89 inset-block-end: 0;
90 inset-inline: 0;
91 z-index: 5;
92 padding-block: props.get(vars.$image-overlay--pad-b);
93 padding-inline: props.get(vars.$image-overlay--pad-i);
94 }
95
79 @include bem.elem('body') { 96 @include bem.elem('body') {
80 flex: 1 0 auto; 97 flex: 1 0 auto;
81 padding-block: props.get(vars.$pad-b); 98 padding-block: props.get(vars.$pad-b);
@@ -129,7 +146,7 @@
129 146
130 @include bem.modifier('quiet') { 147 @include bem.modifier('quiet') {
131 position: relative; 148 position: relative;
132 margin: 0; 149 margin-inline: 0;
133 background-color: transparent; 150 background-color: transparent;
134 border: 0; 151 border: 0;
135 152
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..8adbcde 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,11 +2,13 @@
2@use 'iro-sass/src/props'; 2@use 'iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
10$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
11$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
10 12
11$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; 13$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
12 14
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..131c832
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,113 @@
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 'tabbar.vars';
9@use 'tabbar.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('tabbar') {
15 min-inline-size: 0;
16 block-size: props.get(vars.$block-size);
17 overflow: hidden;
18
19 &::after {
20 display: block;
21 block-size: props.get(vars.$indicator--width);
22 margin-block-start: calc(-1 * props.get(vars.$indicator--width));
23 content: '';
24 background-color: props.get(vars.$railing--bg-color);
25 }
26
27 @include bem.elem('tabs') {
28 display: flex;
29 block-size: 100%;
30 margin-inline: calc(-.5 * props.get(vars.$spacing));
31 overflow-inline: auto;
32 }
33
34 @include bem.modifier('quiet') {
35 box-shadow: none;
36 }
37
38 @include bem.modifier('adapt') {
39 block-size: 100%;
40 }
41
42 @include bem.elem('tab') {
43 position: relative;
44 display: flex;
45 align-items: center;
46 padding-inline: calc(.5 * props.get(vars.$spacing));
47 color: props.get(vars.$tab--text-color);
48 white-space: nowrap;
49
50 &::before {
51 position: absolute;
52 inset-block-start: 50%;
53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
54 z-index: -10;
55 block-size: 1.5em;
56 content: '';
57 border-radius: props.get(vars.$rounding);
58 transform: translateY(-50%);
59 }
60
61 &::after {
62 position: absolute;
63 inset-block-end: 0;
64 inset-inline: calc(.5 * props.get(vars.$spacing));
65 z-index: 10;
66 display: none;
67 block-size: props.get(vars.$indicator--width);
68 content: '';
69 background-color: props.get(vars.$tab--selected--text-color);
70 }
71
72 &:link,
73 &:visited {
74 &:hover,
75 &:active,
76 &:focus-visible {
77 color: props.get(vars.$tab--selected--text-color);
78 }
79
80 &:focus-visible {
81 &::before {
82 color: props.get(vars.$key-focus--text-color);
83 text-decoration: none;
84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
85 box-shadow: 0 0 0
86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
87 props.get(vars.$key-focus--outline-color);
88 }
89 }
90 }
91
92 @include bem.is('selected') {
93 color: props.get(vars.$tab--selected--text-color);
94
95 &::after {
96 display: block;
97 }
98 }
99 }
100
101 @include bem.modifier('accent') {
102 @include bem.elem('tab') {
103 &::after {
104 background-color: props.get(vars.$tab--accent--text-color);
105 }
106
107 @include bem.is('selected') {
108 color: props.get(vars.$tab--accent--text-color);
109 }
110 }
111 }
112 }
113}
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.scss b/src/objects/_tabs.scss
deleted file mode 100644
index 61085c2..0000000
--- a/src/objects/_tabs.scss
+++ /dev/null
@@ -1,127 +0,0 @@
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 position: relative;
16 display: flex;
17 gap: props.get(vars.$spacing);
18 min-inline-size: 0;
19 block-size: props.get(vars.$block-size);
20 padding-inline: calc(.5 * props.get(vars.$spacing));
21 margin-inline: calc(-.5 * props.get(vars.$spacing));
22 overflow-inline: auto;
23
24 &::after {
25 position: absolute;
26 inset-block-end: 0;
27 inset-inline: calc(.5 * props.get(vars.$spacing));
28 z-index: -10;
29 block-size: props.get(vars.$indicator--width);
30 content: '';
31 background-color: props.get(vars.$railing--bg-color);
32 }
33
34 @include bem.modifier('quiet') {
35 &::after {
36 display: none;
37 }
38 }
39
40 @include bem.modifier('adapt') {
41 block-size: 100%;
42 }
43
44 @include bem.elem('tab') {
45 position: relative;
46 display: flex;
47 align-items: center;
48 color: props.get(vars.$tab--text-color);
49 white-space: nowrap;
50 border-block: props.get(vars.$indicator--width) solid transparent;
51
52 &::before {
53 position: absolute;
54 inset-block-start: 50%;
55 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
56 z-index: -10;
57 block-size: 1.5em;
58 content: '';
59 border-radius: props.get(vars.$rounding);
60 transform: translateY(-50%);
61 }
62
63 &:link,
64 &:visited {
65 &:hover,
66 &:active,
67 &:focus-visible {
68 color: props.get(vars.$tab--selected--text-color);
69 }
70
71 &:focus-visible {
72 &::before {
73 color: props.get(vars.$key-focus--text-color);
74 text-decoration: none;
75 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
76 box-shadow: 0 0 0
77 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
78 props.get(vars.$key-focus--outline-color);
79 }
80 }
81 }
82
83 @include bem.is('selected') {
84 color: props.get(vars.$tab--selected--text-color);
85 border-block-end-color: props.get(vars.$tab--selected--text-color);
86 }
87 }
88
89 @include bem.elem('caret') {
90 display: none;
91 }
92
93 @include bem.modifier('accent') {
94 @include bem.elem('tab') {
95 @include bem.is('selected') {
96 color: props.get(vars.$tab--accent--text-color);
97 border-block-end-color: props.get(vars.$tab--accent--text-color);
98 }
99 }
100 }
101
102 @include bem.is('collapsed') {
103 @include bem.elem('tab') {
104 display: none;
105
106 @include bem.is('selected') {
107 display: flex;
108 color: props.get(vars.$tab--text-color);
109 border-block-end-color: transparent;
110
111 &:link,
112 &:visited {
113 &:hover,
114 &:active,
115 &:focus-visible {
116 color: props.get(vars.$tab--selected--text-color);
117 }
118 }
119 }
120 }
121
122 @include bem.elem('caret') {
123 display: block;
124 }
125 }
126 }
127}
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/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss
index 67c8cd5..1737078 100644
--- a/src/scopes/_figures.vars.scss
+++ b/src/scopes/_figures.vars.scss
@@ -6,5 +6,5 @@ $pad-b: props.def(--s-figures--pad-b, props.get(core.$size--100)) !defaul
6$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default; 6$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
7$font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default; 7$font-size: props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
8 8
9$text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute), 'color') !default; 9$text-color: props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
10$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default; 10$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-23 20:58:05 +0000