From 7213f51c4d982a2eaf988574f109d13f55dbc285 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 7 Feb 2022 21:17:53 +0100 Subject: Update --- package.json | 2 +- src/objects/_action-button.scss | 24 ++++++++++++++++++------ src/objects/_action-menu.scss | 22 +++++++++++++++++----- src/objects/_button.scss | 8 ++++++-- src/objects/_status-indicator.scss | 6 +++--- tpl/index.pug | 2 +- tpl/objects/action-menu.pug | 2 +- 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 @@ }, "dependencies": { "include-media": "^1.4.9", - "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git", "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git" }, "devDependencies": { + "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git", "postcss-scss": "^4.0.3", "pug": "^3.0.0", "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 @@ text-overflow: ellipsis; white-space: nowrap; - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover { border-color: fn.color(--hover --border); background-color: fn.color(--hover --bg); @@ -137,7 +139,9 @@ box-shadow: fn.color(--selected --shadow); color: fn.color(--selected --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover, &:active { border-color: fn.color(--selected --hover --border); @@ -163,7 +167,9 @@ box-shadow: none; color: fn.color(--quiet --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover { border-color: transparent; background-color: fn.color(--quiet --hover --bg); @@ -194,7 +200,9 @@ box-shadow: none; color: fn.color(--quiet --selected --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover, &:active { border-color: transparent; @@ -221,7 +229,9 @@ box-shadow: fn.color(--disabled --shadow); color: fn.color(--disabled --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover, &:active { border-color: fn.color(--disabled --border); @@ -237,7 +247,9 @@ box-shadow: none; color: fn.color(--quiet --disabled --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover, &:active { 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 @@ --icon: fn.global-color(--fg-hi), --item: ( --hover: ( - --bg: fn.global-color(--obj-hi), - --fg: fn.global-color(--fg-lo), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), ), ), ), @@ -71,12 +74,21 @@ box-sizing: border-box; width: 100%; padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @include iro.bem-elem('icon') { + color: fn.color(--icon); + } - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, &:active { background-color: fn.color(--item --hover --bg); - color: fn.color(--item --hover --fg); + color: fn.color(--item --hover --label); @include iro.bem-elem('icon') { color: currentColor; @@ -92,7 +104,7 @@ } @include iro.bem-elem('icon') { - color: fn.color(--icon); + color: fn.color(--item --disabled --label); } } } 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 @@ box-shadow: fn.color(--#{$variant} --shadow); color: fn.color(--#{$variant} --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover { border-color: fn.color(--#{$variant} --hover --bg); background-color: fn.color(--#{$variant} --hover --bg); @@ -152,7 +154,9 @@ box-shadow: fn.color(--any --disabled --shadow); color: fn.color(--any --disabled --label); - @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { + &:link, + &:visited, + &:enabled { &:hover, &:active { 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 @@ @include iro.props-store(( --colors: ( --default: fn.global-color(--obj-lo), - --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 15%), - --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 15%), - --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 15%), + --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 10%), + --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 10%), + --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 10%), ), ), 'colors'); 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 +action-menu-item(icon='user')= 'View profile' +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' +action-menu-separator - +action-menu-item(icon='trash')= 'Delete' + +action-menu-item(icon='trash' disabled=true)= 'Delete' +action-menu-item(icon='bookmark')= 'Bookmark' +action-menu-item(icon='tags')= 'Tags' +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 block mixin action-menu-item - button.o-action-menu__item.o-action-menu__item--native + button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled) .l-card.l-card--flush .l-card__block.o-action-menu__icon-slot if attributes.icon -- cgit v1.2.3-54-g00ecf