diff options
author | Volpeon <git@volpeon.ink> | 2022-03-31 09:51:12 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-03-31 09:51:12 +0200 |
commit | 9e5f08e31b4d228da011fa7cd92240433116997f (patch) | |
tree | a36e7f0a4ec407924260da24d86446235387941e /src/objects/_menu.scss | |
parent | Remove t-lo (diff) | |
download | iro-design-9e5f08e31b4d228da011fa7cd92240433116997f.tar.gz iro-design-9e5f08e31b4d228da011fa7cd92240433116997f.tar.bz2 iro-design-9e5f08e31b4d228da011fa7cd92240433116997f.zip |
Added icon nav component
Diffstat (limited to 'src/objects/_menu.scss')
-rw-r--r-- | src/objects/_menu.scss | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index f732ab7..fae3207 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -4,6 +4,7 @@ | |||
4 | @include iro.props-namespace('menu') { | 4 | @include iro.props-namespace('menu') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --spacing: fn.global-dim(--size --25), | ||
7 | --header: ( | 8 | --header: ( |
8 | --font-size: fn.global-dim(--font-size --50), | 9 | --font-size: fn.global-dim(--font-size --50), |
9 | ), | 10 | ), |
@@ -30,8 +31,6 @@ | |||
30 | --label: fn.global-color(--fg-hi3), | 31 | --label: fn.global-color(--fg-hi3), |
31 | ), | 32 | ), |
32 | --key-focus: ( | 33 | --key-focus: ( |
33 | --bg: fn.global-color(--obj-hi), | ||
34 | --label: fn.global-color(--fg-lo), | ||
35 | --border: fn.global-color(--focus --fill), | 34 | --border: fn.global-color(--focus --fill), |
36 | --shadow: fn.global-color(--focus --shadow), | 35 | --shadow: fn.global-color(--focus --shadow), |
37 | ), | 36 | ), |
@@ -40,6 +39,10 @@ | |||
40 | ), 'colors'); | 39 | ), 'colors'); |
41 | 40 | ||
42 | @include iro.bem-object(iro.props-namespace()) { | 41 | @include iro.bem-object(iro.props-namespace()) { |
42 | display: flex; | ||
43 | flex-direction: column; | ||
44 | gap: fn.dim(--spacing); | ||
45 | |||
43 | @include iro.bem-elem('header') { | 46 | @include iro.bem-elem('header') { |
44 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | 47 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); |
45 | color: fn.color(--header --label); | 48 | color: fn.color(--header --label); |
@@ -50,9 +53,6 @@ | |||
50 | } | 53 | } |
51 | 54 | ||
52 | @include iro.bem-elem('item') { | 55 | @include iro.bem-elem('item') { |
53 | display: block; | ||
54 | box-sizing: border-box; | ||
55 | width: 100%; | ||
56 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); | 56 | padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); |
57 | border: 2px solid transparent; | 57 | border: 2px solid transparent; |
58 | border-radius: fn.dim(--item --rounding); | 58 | border-radius: fn.dim(--item --rounding); |
@@ -70,11 +70,11 @@ | |||
70 | 70 | ||
71 | @include iro.bem-at-theme('keyboard') { | 71 | @include iro.bem-at-theme('keyboard') { |
72 | &:focus { | 72 | &:focus { |
73 | border-radius: 2px; | 73 | border-radius: calc(fn.dim(--item --rounding) - 1px); |
74 | border-color: fn.color(--item --key-focus --border); | 74 | border-color: fn.color(--item --key-focus --border); |
75 | background-color: fn.color(--item --key-focus --bg); | 75 | background-color: fn.color(--item --hover --bg); |
76 | box-shadow: fn.color(--item --key-focus --shadow); | 76 | box-shadow: fn.color(--item --key-focus --shadow); |
77 | color: fn.color(--item --key-focus --label); | 77 | color: fn.color(--item --hover --label); |
78 | } | 78 | } |
79 | } | 79 | } |
80 | } | 80 | } |