diff options
author | Volpeon <git@volpeon.ink> | 2022-02-07 21:17:53 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-07 21:17:53 +0100 |
commit | 7213f51c4d982a2eaf988574f109d13f55dbc285 (patch) | |
tree | ca795995a04a2845324804d87bd4409d6dadc6b5 /src/objects/_action-menu.scss | |
parent | Improved action menu example (diff) | |
download | iro-design-7213f51c4d982a2eaf988574f109d13f55dbc285.tar.gz iro-design-7213f51c4d982a2eaf988574f109d13f55dbc285.tar.bz2 iro-design-7213f51c4d982a2eaf988574f109d13f55dbc285.zip |
Update
Diffstat (limited to 'src/objects/_action-menu.scss')
-rw-r--r-- | src/objects/_action-menu.scss | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 69fb9b0..cd35d47 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -24,8 +24,11 @@ | |||
24 | --icon: fn.global-color(--fg-hi), | 24 | --icon: fn.global-color(--fg-hi), |
25 | --item: ( | 25 | --item: ( |
26 | --hover: ( | 26 | --hover: ( |
27 | --bg: fn.global-color(--obj-hi), | 27 | --bg: fn.global-color(--obj-hi), |
28 | --fg: fn.global-color(--fg-lo), | 28 | --label: fn.global-color(--fg-lo), |
29 | ), | ||
30 | --disabled: ( | ||
31 | --label: fn.global-color(--fg-hi3), | ||
29 | ), | 32 | ), |
30 | ), | 33 | ), |
31 | ), | 34 | ), |
@@ -71,12 +74,21 @@ | |||
71 | box-sizing: border-box; | 74 | box-sizing: border-box; |
72 | width: 100%; | 75 | width: 100%; |
73 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | 76 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); |
77 | color: fn.color(--item --disabled --label); | ||
78 | |||
79 | &:link, | ||
80 | &:visited, | ||
81 | &:enabled { | ||
82 | color: currentColor; | ||
83 | |||
84 | @include iro.bem-elem('icon') { | ||
85 | color: fn.color(--icon); | ||
86 | } | ||
74 | 87 | ||
75 | @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { | ||
76 | &:hover, | 88 | &:hover, |
77 | &:active { | 89 | &:active { |
78 | background-color: fn.color(--item --hover --bg); | 90 | background-color: fn.color(--item --hover --bg); |
79 | color: fn.color(--item --hover --fg); | 91 | color: fn.color(--item --hover --label); |
80 | 92 | ||
81 | @include iro.bem-elem('icon') { | 93 | @include iro.bem-elem('icon') { |
82 | color: currentColor; | 94 | color: currentColor; |
@@ -92,7 +104,7 @@ | |||
92 | } | 104 | } |
93 | 105 | ||
94 | @include iro.bem-elem('icon') { | 106 | @include iro.bem-elem('icon') { |
95 | color: fn.color(--icon); | 107 | color: fn.color(--item --disabled --label); |
96 | } | 108 | } |
97 | } | 109 | } |
98 | } | 110 | } |