summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_icon-nav.scss48
-rw-r--r--tpl/objects/icon-nav.pug3
2 files changed, 3 insertions, 48 deletions
diff --git a/src/objects/_icon-nav.scss b/src/objects/_icon-nav.scss
index 25f4a57..afea9b9 100644
--- a/src/objects/_icon-nav.scss
+++ b/src/objects/_icon-nav.scss
@@ -5,62 +5,14 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --spacing: fn.global-dim(--size --100), 7 --spacing: fn.global-dim(--size --100),
8 --item: (
9 --pad: fn.global-dim(--size --125),
10 )
11 ) 8 )
12 ), 'dims'); 9 ), 'dims');
13 10
14 @include iro.props-store((
15 --colors: (
16 --item: (
17 --hover: (
18 --bg: fn.global-color(--obj-hi),
19 --label: fn.global-color(--fg-lo),
20 ),
21 --disabled: (
22 --label: fn.global-color(--fg-hi3),
23 ),
24 --key-focus: (
25 --border: fn.global-color(--focus --fill),
26 --shadow: fn.global-color(--focus --shadow),
27 ),
28 ),
29 ),
30 ), 'colors');
31
32 @include iro.bem-object(iro.props-namespace()) { 11 @include iro.bem-object(iro.props-namespace()) {
33 display: flex; 12 display: flex;
34 align-items: center; 13 align-items: center;
35 gap: fn.dim(--spacing); 14 gap: fn.dim(--spacing);
36 15
37 @include iro.bem-elem('item') {
38 padding: fn.dim(--item --pad);
39 border: 2px solid transparent;
40 border-radius: 10em;
41 color: fn.color(--item --disabled --label);
42
43 &:link,
44 &:visited,
45 &:enabled {
46 color: currentColor;
47
48 @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
49 background-color: fn.color(--item --hover --bg);
50 color: fn.color(--item --hover --label);
51 }
52
53 @include iro.bem-at-theme('keyboard') {
54 &:focus {
55 border-color: fn.color(--item --key-focus --border);
56 background-color: fn.color(--item --hover --bg);
57 box-shadow: fn.color(--item --key-focus --shadow);
58 color: fn.color(--item --hover --label);
59 }
60 }
61 }
62 }
63
64 @include iro.bem-modifier('vertical') { 16 @include iro.bem-modifier('vertical') {
65 flex-direction: column; 17 flex-direction: column;
66 } 18 }
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index 6f45bf6..f1c7d8a 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -19,6 +19,9 @@ mixin icon-nav-item(icon)
19 - 19 -
20 let classes = { 20 let classes = {
21 'o-icon-nav__item': true, 21 'o-icon-nav__item': true,
22 'o-action-button': true,
23 'o-action-button--round': true,
24 'o-action-button--quiet': true,
22 'is-selected': attributes.selected, 25 'is-selected': attributes.selected,
23 } 26 }
24 if (attributes.class) { 27 if (attributes.class) {