summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/objects/_action-button.scss24
-rw-r--r--src/objects/_action-menu.scss22
-rw-r--r--src/objects/_button.scss8
-rw-r--r--src/objects/_status-indicator.scss6
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/objects/action-menu.pug2
7 files changed, 47 insertions, 19 deletions
diff --git a/package.json b/package.json
index 6751812..7454c11 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,10 @@
19 }, 19 },
20 "dependencies": { 20 "dependencies": {
21 "include-media": "^1.4.9", 21 "include-media": "^1.4.9",
22 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git",
23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git" 22 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git"
24 }, 23 },
25 "devDependencies": { 24 "devDependencies": {
25 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git",
26 "postcss-scss": "^4.0.3", 26 "postcss-scss": "^4.0.3",
27 "pug": "^3.0.0", 27 "pug": "^3.0.0",
28 "pug-cli": "^1.0.0-alpha6", 28 "pug-cli": "^1.0.0-alpha6",
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 19cf37b..47e2c93 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -106,7 +106,9 @@
106 text-overflow: ellipsis; 106 text-overflow: ellipsis;
107 white-space: nowrap; 107 white-space: nowrap;
108 108
109 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 109 &:link,
110 &:visited,
111 &:enabled {
110 &:hover { 112 &:hover {
111 border-color: fn.color(--hover --border); 113 border-color: fn.color(--hover --border);
112 background-color: fn.color(--hover --bg); 114 background-color: fn.color(--hover --bg);
@@ -137,7 +139,9 @@
137 box-shadow: fn.color(--selected --shadow); 139 box-shadow: fn.color(--selected --shadow);
138 color: fn.color(--selected --label); 140 color: fn.color(--selected --label);
139 141
140 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 142 &:link,
143 &:visited,
144 &:enabled {
141 &:hover, 145 &:hover,
142 &:active { 146 &:active {
143 border-color: fn.color(--selected --hover --border); 147 border-color: fn.color(--selected --hover --border);
@@ -163,7 +167,9 @@
163 box-shadow: none; 167 box-shadow: none;
164 color: fn.color(--quiet --label); 168 color: fn.color(--quiet --label);
165 169
166 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 170 &:link,
171 &:visited,
172 &:enabled {
167 &:hover { 173 &:hover {
168 border-color: transparent; 174 border-color: transparent;
169 background-color: fn.color(--quiet --hover --bg); 175 background-color: fn.color(--quiet --hover --bg);
@@ -194,7 +200,9 @@
194 box-shadow: none; 200 box-shadow: none;
195 color: fn.color(--quiet --selected --label); 201 color: fn.color(--quiet --selected --label);
196 202
197 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 203 &:link,
204 &:visited,
205 &:enabled {
198 &:hover, 206 &:hover,
199 &:active { 207 &:active {
200 border-color: transparent; 208 border-color: transparent;
@@ -221,7 +229,9 @@
221 box-shadow: fn.color(--disabled --shadow); 229 box-shadow: fn.color(--disabled --shadow);
222 color: fn.color(--disabled --label); 230 color: fn.color(--disabled --label);
223 231
224 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 232 &:link,
233 &:visited,
234 &:enabled {
225 &:hover, 235 &:hover,
226 &:active { 236 &:active {
227 border-color: fn.color(--disabled --border); 237 border-color: fn.color(--disabled --border);
@@ -237,7 +247,9 @@
237 box-shadow: none; 247 box-shadow: none;
238 color: fn.color(--quiet --disabled --label); 248 color: fn.color(--quiet --disabled --label);
239 249
240 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 250 &:link,
251 &:visited,
252 &:enabled {
241 &:hover, 253 &:hover,
242 &:active { 254 &:active {
243 border-color: transparent; 255 border-color: transparent;
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}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 6f69ee8..32d1193 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -7,7 +7,9 @@
7 box-shadow: fn.color(--#{$variant} --shadow); 7 box-shadow: fn.color(--#{$variant} --shadow);
8 color: fn.color(--#{$variant} --label); 8 color: fn.color(--#{$variant} --label);
9 9
10 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 10 &:link,
11 &:visited,
12 &:enabled {
11 &:hover { 13 &:hover {
12 border-color: fn.color(--#{$variant} --hover --bg); 14 border-color: fn.color(--#{$variant} --hover --bg);
13 background-color: fn.color(--#{$variant} --hover --bg); 15 background-color: fn.color(--#{$variant} --hover --bg);
@@ -152,7 +154,9 @@
152 box-shadow: fn.color(--any --disabled --shadow); 154 box-shadow: fn.color(--any --disabled --shadow);
153 color: fn.color(--any --disabled --label); 155 color: fn.color(--any --disabled --label);
154 156
155 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 157 &:link,
158 &:visited,
159 &:enabled {
156 &:hover, 160 &:hover,
157 &:active { 161 &:active {
158 border-color: fn.color(--any --disabled --bg); 162 border-color: fn.color(--any --disabled --bg);
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 18d6f81..c688cbc 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -11,9 +11,9 @@
11 @include iro.props-store(( 11 @include iro.props-store((
12 --colors: ( 12 --colors: (
13 --default: fn.global-color(--obj-lo), 13 --default: fn.global-color(--obj-lo),
14 --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 15%), 14 --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 10%),
15 --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 15%), 15 --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 10%),
16 --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 15%), 16 --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 10%),
17 ), 17 ),
18 ), 'colors'); 18 ), 'colors');
19 19
diff --git a/tpl/index.pug b/tpl/index.pug
index 5112f87..b878944 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -449,7 +449,7 @@ html
449 +action-menu-item(icon='user')= 'View profile' 449 +action-menu-item(icon='user')= 'View profile'
450 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' 450 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
451 +action-menu-separator 451 +action-menu-separator
452 +action-menu-item(icon='trash')= 'Delete' 452 +action-menu-item(icon='trash' disabled=true)= 'Delete'
453 +action-menu-item(icon='bookmark')= 'Bookmark' 453 +action-menu-item(icon='bookmark')= 'Bookmark'
454 +action-menu-item(icon='tags')= 'Tags' 454 +action-menu-item(icon='tags')= 'Tags'
455 +action-menu-item(postIcon='chevron-right')= 'More' 455 +action-menu-item(postIcon='chevron-right')= 'More'
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index e236b7c..0f690ce 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -14,7 +14,7 @@ mixin action-menu
14 block 14 block
15 15
16mixin action-menu-item 16mixin action-menu-item
17 button.o-action-menu__item.o-action-menu__item--native 17 button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled)
18 .l-card.l-card--flush 18 .l-card.l-card--flush
19 .l-card__block.o-action-menu__icon-slot 19 .l-card__block.o-action-menu__icon-slot
20 if attributes.icon 20 if attributes.icon