summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_iro-design.scss2
-rw-r--r--src/_utils.scss4
-rw-r--r--src/objects/_card.scss21
-rw-r--r--src/objects/_card.vars.scss12
-rw-r--r--src/objects/_tabbar.scss (renamed from src/objects/_tabs.scss)78
-rw-r--r--src/objects/_tabbar.vars.scss25
-rw-r--r--src/objects/_tabs.vars.scss25
-rw-r--r--src/scopes/_body.vars.scss2
-rw-r--r--src/scopes/_figures.vars.scss4
9 files changed, 82 insertions, 91 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/_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..6628eab 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 17 margin-inline: calc(-1 * props.get(vars.$key-focus--border-width));
18 background-color: props.get(vars.$bg-color); 18 background-color: props.get(vars.$bg-color);
19 background-clip: content-box; 19 background-clip: content-box;
20 border: props.get(vars.$key-focus--border-offset) solid transparent; 20 border: props.get(vars.$key-focus--border-offset) solid transparent;
@@ -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/_tabs.scss b/src/objects/_tabbar.scss
index 61085c2..e0dbcb0 100644
--- a/src/objects/_tabs.scss
+++ b/src/objects/_tabbar.scss
@@ -5,49 +5,46 @@
5@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
6@use '../props' as *; 6@use '../props' as *;
7 7
8@forward 'tabs.vars'; 8@forward 'tabbar.vars';
9@use 'tabs.vars' as vars; 9@use 'tabbar.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('tabs') { 14 @include bem.object('tabbar') {
15 position: relative;
16 display: flex;
17 gap: props.get(vars.$spacing);
18 min-inline-size: 0; 15 min-inline-size: 0;
19 block-size: props.get(vars.$block-size); 16 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; 17 overflow-inline: auto;
18 box-shadow: 0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
23 19
24 &::after { 20 @include bem.elem('tabs') {
25 position: absolute; 21 display: flex;
26 inset-block-end: 0; 22 block-size: 100%;
27 inset-inline: calc(.5 * props.get(vars.$spacing)); 23 margin-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 24
34 @include bem.modifier('quiet') {
35 &::after { 25 &::after {
36 display: none; 26 display: block;
27 inline-size: props.get(vars.$spacing);
28 content: '';
37 } 29 }
38 } 30 }
39 31
32 @include bem.modifier('quiet') {
33 box-shadow: none;
34 }
35
40 @include bem.modifier('adapt') { 36 @include bem.modifier('adapt') {
41 block-size: 100%; 37 block-size: 100%;
42 } 38 }
43 39
44 @include bem.elem('tab') { 40 @include bem.elem('tab') {
45 position: relative; 41 position: relative;
46 display: flex; 42 display: flex;
47 align-items: center; 43 align-items: center;
48 color: props.get(vars.$tab--text-color); 44 padding-inline: calc(.5 * props.get(vars.$spacing));
49 white-space: nowrap; 45 color: props.get(vars.$tab--text-color);
50 border-block: props.get(vars.$indicator--width) solid transparent; 46 white-space: nowrap;
47 border-block: props.get(vars.$indicator--width) solid transparent;
51 48
52 &::before { 49 &::before {
53 position: absolute; 50 position: absolute;
@@ -86,10 +83,6 @@
86 } 83 }
87 } 84 }
88 85
89 @include bem.elem('caret') {
90 display: none;
91 }
92
93 @include bem.modifier('accent') { 86 @include bem.modifier('accent') {
94 @include bem.elem('tab') { 87 @include bem.elem('tab') {
95 @include bem.is('selected') { 88 @include bem.is('selected') {
@@ -98,30 +91,5 @@
98 } 91 }
99 } 92 }
100 } 93 }
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 } 94 }
127} 95}
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/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 6c38c3f..8e77a17 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -6,6 +6,6 @@
6$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; 6$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
7$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; 7$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
8$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; 8$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
9$img--max-block-size: props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default; 9$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
10 10
11$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; 11$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), '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 14:52:28 +0000