diff options
author | Volpeon <git@volpeon.ink> | 2023-01-21 23:23:56 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-01-21 23:23:56 +0100 |
commit | 45904ff28ef9c849f5100e9c03f0577470eefb4c (patch) | |
tree | bfa643c8eb39519fde5b6631d98724ece26d1bfa /src | |
parent | Add emoji object (diff) | |
download | iro-design-45904ff28ef9c849f5100e9c03f0577470eefb4c.tar.gz iro-design-45904ff28ef9c849f5100e9c03f0577470eefb4c.tar.bz2 iro-design-45904ff28ef9c849f5100e9c03f0577470eefb4c.zip |
Icon nav: Re-use action button for item
Diffstat (limited to 'src')
-rw-r--r-- | src/objects/_icon-nav.scss | 48 |
1 files changed, 0 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 | } |