summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_config.defaults.scss4
-rw-r--r--src/_iro-design.scss1
-rw-r--r--src/objects/_action-button.scss12
-rw-r--r--src/objects/_action-button.vars.scss42
-rw-r--r--src/objects/_badge.vars.scss4
-rw-r--r--src/objects/_button.vars.scss16
-rw-r--r--src/objects/_divider.scss25
-rw-r--r--src/objects/_tabs.scss90
-rw-r--r--src/objects/_tabs.vars.scss22
-rw-r--r--src/scopes/_implicit.scss10
-rw-r--r--src/scopes/_links.scss24
-rw-r--r--src_demo/index.scss1
-rw-r--r--tpl/objects/action-button.pug7
13 files changed, 207 insertions, 51 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index f2dd420..e58f2eb 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -135,7 +135,7 @@ $theme-dark: (
135 --levels: ( 135 --levels: (
136 --grays: ( 136 --grays: (
137 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), 137 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
138 --75: (2.2) (.3 + .7 * easing.ease(math.div(9, 12))), 138 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
139 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), 139 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
140 140
141 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), 141 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
@@ -167,7 +167,7 @@ $theme-dark: (
167 ), 167 ),
168 168
169 --palettes: ( 169 --palettes: (
170 --base: hsl(257, 7%, 19%) --grays, 170 --base: hsl(257, 7%, 20%) --grays,
171 --blue: oklch(56% .16 275.25) --colors, 171 --blue: oklch(56% .16 275.25) --colors,
172 --purple: oklch(56% .16 305.58) --colors, 172 --purple: oklch(56% .16 305.58) --colors,
173 --red: oklch(56% .16 14.69) --colors, 173 --red: oklch(56% .16 14.69) --colors,
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 3132199..ac07846 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -63,6 +63,7 @@ $breakpoints: (
63@forward 'objects/status-indicator' as o-status-indicator--*; 63@forward 'objects/status-indicator' as o-status-indicator--*;
64@forward 'objects/switch' as o-switch--*; 64@forward 'objects/switch' as o-switch--*;
65@forward 'objects/table' as o-table--*; 65@forward 'objects/table' as o-table--*;
66@forward 'objects/tabs' as o-tabs--*;
66@forward 'objects/text-field' as o-text-field--*; 67@forward 'objects/text-field' as o-text-field--*;
67@forward 'objects/thumbnail' as o-thumbnail--*; 68@forward 'objects/thumbnail' as o-thumbnail--*;
68 69
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ca047bc..dcabb57 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,6 +137,10 @@
137 } 137 }
138 } 138 }
139 139
140 @include bem.elem('label') {
141 margin-inline: props.get(vars.$pad-i-label);
142 }
143
140 @include -apply-theme(vars.$default-theme); 144 @include -apply-theme(vars.$default-theme);
141 145
142 @each $theme in map.keys(props.get(vars.$themes)) { 146 @each $theme in map.keys(props.get(vars.$themes)) {
@@ -154,12 +158,16 @@
154 } 158 }
155 } 159 }
156 160
157 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 161 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
158 @include bem.modifier($mod) { 162 @include bem.modifier($mod) {
159 padding-block: props.get($pad-b); 163 padding-block: props.get($pad-b);
160 padding-inline: props.get($pad-i); 164 padding-inline: props.get($pad-i);
161 font-size: props.get($font-size); 165 font-size: props.get($font-size);
162 166
167 @include bem.elem('label') {
168 margin-inline: props.get($pad-i-label);
169 }
170
163 @include bem.modifier('pill') { 171 @include bem.modifier('pill') {
164 padding-inline: props.get($pad-i-pill); 172 padding-inline: props.get($pad-i-pill);
165 } 173 }
@@ -170,7 +178,7 @@
170 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 178 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
171 padding-inline: 0; 179 padding-inline: 0;
172 180
173 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 181 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
174 @include bem.modifier($mod) { 182 @include bem.modifier($mod) {
175 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 183 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
176 padding-inline: 0; 184 padding-inline: 0;
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9afd5d7..9de985a 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,35 +5,39 @@
5 5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default; 6$line-height: props.def(--o-action-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; 7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
8$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; 9$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
9$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; 10$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
10$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; 11$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
11$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 12$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
12$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; 13$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
13 14
14$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; 15$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
15$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; 16$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; 17$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
17$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; 18$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
19$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 20
19$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; 21$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
20$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default; 22$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
21$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; 23$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
22$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; 24$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
25$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 26
24$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; 27$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
25$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; 28$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
26$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; 29$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
27$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; 30$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
31$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 32
29$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 33$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 34$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 35$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 36
33$fixed-sizes: ( 37$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, 38 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, 39 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, 40 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 41) !default;
38 42
39$themes: props.def(--o-action-button, (), 'color'); 43$themes: props.def(--o-action-button, (), 'color');
@@ -68,9 +72,9 @@ $default-theme: map.deep-merge((
68 ), 72 ),
69 73
70 --selected: ( 74 --selected: (
71 --bg-color: props.get(core.$theme, --text-mute), 75 --bg-color: props.get(core.$theme, --heading),
72 --label-color: props.get(core.$theme, --base, --50), 76 --label-color: props.get(core.$theme, --base, --50),
73 --border-color: props.get(core.$theme, --text-mute), 77 --border-color: props.get(core.$theme, --heading),
74 78
75 --hover: ( 79 --hover: (
76 --bg-color: props.get(core.$theme, --text), 80 --bg-color: props.get(core.$theme, --text),
@@ -79,9 +83,9 @@ $default-theme: map.deep-merge((
79 ), 83 ),
80 84
81 --active: ( 85 --active: (
82 --bg-color: props.get(core.$theme, --heading), 86 --bg-color: props.get(core.$theme, --text-mute),
83 --label-color: props.get(core.$theme, --base, --50), 87 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --heading), 88 --border-color: props.get(core.$theme, --text-mute),
85 ), 89 ),
86 90
87 --disabled: ( 91 --disabled: (
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index d96d6c4..6327e7b 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -40,7 +40,7 @@ $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-mute), 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: (
@@ -49,7 +49,7 @@ $default-theme: props.def(--o-badge, (
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 65993ad..f70bde7 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -11,7 +11,7 @@ $border-width: props.def(--o-button--border-width, props.get(core.$border-width-
11$rounding: props.def(--o-button--rounding, 10em) !default; 11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; 12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 13
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--125)) !default; 14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; 16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
@@ -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/_divider.scss b/src/objects/_divider.scss
index b746551..65f1718 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -13,18 +13,19 @@
13 @include materialize-at-root(meta.module-variables('vars')); 13 @include materialize-at-root(meta.module-variables('vars'));
14 14
15 @include bem.object('divider') { 15 @include bem.object('divider') {
16 display: flex; 16 display: flex;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 flex-direction: row; 18 flex-direction: row;
19 align-items: center; 19 align-items: center;
20 block-size: 1em; 20 block-size: 1em;
21 margin-block: props.get(vars.$margin-b); 21 margin-block: props.get(vars.$margin-b);
22 font-size: props.get(vars.$strong--label-font-size); 22 font-size: props.get(vars.$strong--label-font-size);
23 font-weight: 700; 23 font-weight: 700;
24 line-height: 1; 24 line-height: 1;
25 color: props.get(vars.$strong--label-color); 25 color: props.get(vars.$strong--label-color);
26 text-transform: uppercase; 26 text-transform: uppercase;
27 letter-spacing: .5px; 27 letter-spacing: .5px;
28 background-color: transparent;
28 29
29 &::before, 30 &::before,
30 &::after { 31 &::after {
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;
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 18791a8..020e311 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -17,11 +17,6 @@
17 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 17 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
18 } 18 }
19 19
20 html,
21 body {
22 block-size: 100%;
23 }
24
25 body { 20 body {
26 padding: 0; 21 padding: 0;
27 margin: 0; 22 margin: 0;
@@ -155,5 +150,10 @@
155 background-color: props.get(core.$theme, --border); 150 background-color: props.get(core.$theme, --border);
156 border: 0; 151 border: 0;
157 } 152 }
153
154 figure {
155 padding: 0;
156 margin: 0;
157 }
158 } 158 }
159} 159}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index cff4cc9..4092633 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -91,5 +91,29 @@
91 } 91 }
92 } 92 }
93 } 93 }
94
95 @include bem.elem('image') {
96 img {
97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
98 border: props.get(vars.$key-focus--border-offset) solid transparent;
99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
100 }
101
102 &:link,
103 &:visited {
104 &:focus-visible {
105 outline: none;
106 box-shadow: none;
107
108 img {
109 outline: props.get(vars.$key-focus--border-color) solid
110 props.get(vars.$key-focus--border-width);
111 box-shadow: 0 0 0
112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
113 props.get(vars.$key-focus--outline-color);
114 }
115 }
116 }
117 }
94 } 118 }
95} 119}
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 1fdf290..4b345dd 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -41,6 +41,7 @@
41@include iro.o-status-indicator--styles; 41@include iro.o-status-indicator--styles;
42@include iro.o-switch--styles; 42@include iro.o-switch--styles;
43@include iro.o-table--styles; 43@include iro.o-table--styles;
44@include iro.o-tabs--styles;
44@include iro.o-text-field--styles; 45@include iro.o-text-field--styles;
45@include iro.o-thumbnail--styles; 46@include iro.o-thumbnail--styles;
46 47
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c3a9b53..e9b6fe3 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -26,4 +26,9 @@ mixin action-button
26 if attributes.icon 26 if attributes.icon
27 +icon(attributes.icon) 27 +icon(attributes.icon)
28 = ' ' 28 = ' '
29 block 29 if block
30 span.o-action-button__label
31 block
32 if attributes.postIcon
33 = ' '
34 +icon(attributes.postIcon)
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-14 18:02:49 +0000