summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-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.scss112
-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
-rw-r--r--src_demo/index.scss2
-rw-r--r--tpl/objects/card.pug11
-rw-r--r--tpl/views/card.pug3
12 files changed, 183 insertions, 165 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/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..aaa6f07
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,112 @@
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
18 &::after {
19 display: block;
20 block-size: props.get(vars.$indicator--width);
21 margin-block-start: calc(-1 * props.get(vars.$indicator--width));
22 content: '';
23 background-color: props.get(vars.$railing--bg-color);
24 }
25
26 @include bem.elem('tabs') {
27 display: flex;
28 block-size: 100%;
29 margin-inline: calc(-.5 * props.get(vars.$spacing));
30 overflow-inline: auto;
31 }
32
33 @include bem.modifier('quiet') {
34 box-shadow: none;
35 }
36
37 @include bem.modifier('adapt') {
38 block-size: 100%;
39 }
40
41 @include bem.elem('tab') {
42 position: relative;
43 display: flex;
44 align-items: center;
45 padding-inline: calc(.5 * props.get(vars.$spacing));
46 color: props.get(vars.$tab--text-color);
47 white-space: nowrap;
48
49 &::before {
50 position: absolute;
51 inset-block-start: 50%;
52 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
53 z-index: -10;
54 block-size: 1.5em;
55 content: '';
56 border-radius: props.get(vars.$rounding);
57 transform: translateY(-50%);
58 }
59
60 &::after {
61 position: absolute;
62 inset-block-end: 0;
63 inset-inline: calc(.5 * props.get(vars.$spacing));
64 z-index: 10;
65 display: none;
66 block-size: props.get(vars.$indicator--width);
67 content: '';
68 background-color: props.get(vars.$tab--selected--text-color);
69 }
70
71 &:link,
72 &:visited {
73 &:hover,
74 &:active,
75 &:focus-visible {
76 color: props.get(vars.$tab--selected--text-color);
77 }
78
79 &:focus-visible {
80 &::before {
81 color: props.get(vars.$key-focus--text-color);
82 text-decoration: none;
83 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
84 box-shadow: 0 0 0
85 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
86 props.get(vars.$key-focus--outline-color);
87 }
88 }
89 }
90
91 @include bem.is('selected') {
92 color: props.get(vars.$tab--selected--text-color);
93
94 &::after {
95 display: block;
96 }
97 }
98 }
99
100 @include bem.modifier('accent') {
101 @include bem.elem('tab') {
102 &::after {
103 background-color: props.get(vars.$tab--accent--text-color);
104 }
105
106 @include bem.is('selected') {
107 color: props.get(vars.$tab--accent--text-color);
108 }
109 }
110 }
111 }
112}
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;
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
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..e0f6a15 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,7 +26,16 @@ mixin card-image
26 classes[attributes.class] = true; 26 classes[attributes.class] = true;
27 } 27 }
28 28
29 img(class=classes src=attributes.src style=attributes.style) 29 let imgClasses = {
30 'o-card__image-img': true,
31 'l-card-list__card-image': attributes.list
32 }
33
34 div(class=classes)
35 img(class=imgClasses src=attributes.src style=attributes.style)
36 if block
37 .o-card__image-overlay
38 block
30 39
31mixin card-body 40mixin card-body
32 .o-card__body(style=attributes.style) 41 .o-card__body(style=attributes.style)
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 633cf01..61081a9 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -36,6 +36,7 @@ mixin view-card
36 36
37 +card(quiet=true href='#' class='l-card-list__card') 37 +card(quiet=true href='#' class='l-card-list__card')
38 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 38 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
39 +badge= 'Drawings'
39 +card-body 40 +card-body
40 +card-title= 'XS Heading' 41 +card-title= 'XS Heading'
41 +card-content 42 +card-content
@@ -59,7 +60,7 @@ mixin view-card
59 div(class=classes) 60 div(class=classes)
60 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] 61 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
61 +card(quiet=quiet href='#' class='l-card-list__card') 62 +card(quiet=quiet href='#' class='l-card-list__card')
62 +card-image(src=img class='l-card-list__card-image') 63 +card-image(src=img list=true)
63 +card-body 64 +card-body
64 .l-media 65 .l-media
65 .l-media__block.l-media__block--main 66 .l-media__block.l-media__block--main
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-23 16:18:32 +0000