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/objects | |
| 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/objects')
| -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 | } |
