From 9e5f08e31b4d228da011fa7cd92240433116997f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 31 Mar 2022 09:51:12 +0200 Subject: Added icon nav component --- src/objects/_action-button.scss | 38 ++++++++++++++++++----- src/objects/_icon-nav.scss | 68 +++++++++++++++++++++++++++++++++++++++++ src/objects/_menu.scss | 16 +++++----- 3 files changed, 107 insertions(+), 15 deletions(-) create mode 100644 src/objects/_icon-nav.scss (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 2dcbb12..1cce94f 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -103,6 +103,13 @@ background-color: fn.color(--active --bg); color: fn.color(--active --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--hover --bg); + color: fn.color(--hover --label); + } + } } @include iro.bem-is('selected') { @@ -119,6 +126,13 @@ background-color: fn.color(--selected --bg); color: fn.color(--selected --hover --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--selected --bg); + color: fn.color(--selected --hover --label); + } + } } } @@ -149,6 +163,13 @@ box-shadow: none; color: fn.color(--quiet --active --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--quiet --hover --bg); + color: fn.color(--quiet --hover --label); + } + } } @include iro.bem-is('selected') { @@ -170,18 +191,21 @@ box-shadow: none; color: fn.color(--quiet --selected --hover --label); } + + @include iro.bem-at-theme('keyboard') { + &:focus { + background-color: fn.color(--quiet --selected --bg); + color: fn.color(--quiet --selected --hover --label); + } + } } } } @include iro.bem-at-theme('keyboard') { - &:link, - &:visited, - &:enabled { - &:focus { - border-color: fn.color(--key-focus --border); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); - } + &:focus { + border-color: fn.color(--key-focus --border); + box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); } } diff --git a/src/objects/_icon-nav.scss b/src/objects/_icon-nav.scss new file mode 100644 index 0000000..25f4a57 --- /dev/null +++ b/src/objects/_icon-nav.scss @@ -0,0 +1,68 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('icon-nav') { + @include iro.props-store(( + --dims: ( + --spacing: fn.global-dim(--size --100), + --item: ( + --pad: fn.global-dim(--size --125), + ) + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --item: ( + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), + ), + --key-focus: ( + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: flex; + align-items: center; + gap: fn.dim(--spacing); + + @include iro.bem-elem('item') { + padding: fn.dim(--item --pad); + border: 2px solid transparent; + border-radius: 10em; + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-color: fn.color(--item --key-focus --border); + background-color: fn.color(--item --hover --bg); + box-shadow: fn.color(--item --key-focus --shadow); + color: fn.color(--item --hover --label); + } + } + } + } + + @include iro.bem-modifier('vertical') { + flex-direction: column; + } + } +} 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 @@ @include iro.props-namespace('menu') { @include iro.props-store(( --dims: ( + --spacing: fn.global-dim(--size --25), --header: ( --font-size: fn.global-dim(--font-size --50), ), @@ -30,8 +31,6 @@ --label: fn.global-color(--fg-hi3), ), --key-focus: ( - --bg: fn.global-color(--obj-hi), - --label: fn.global-color(--fg-lo), --border: fn.global-color(--focus --fill), --shadow: fn.global-color(--focus --shadow), ), @@ -40,6 +39,10 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { + display: flex; + flex-direction: column; + gap: fn.dim(--spacing); + @include iro.bem-elem('header') { padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); color: fn.color(--header --label); @@ -50,9 +53,6 @@ } @include iro.bem-elem('item') { - display: block; - box-sizing: border-box; - width: 100%; padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); border: 2px solid transparent; border-radius: fn.dim(--item --rounding); @@ -70,11 +70,11 @@ @include iro.bem-at-theme('keyboard') { &:focus { - border-radius: 2px; + border-radius: calc(fn.dim(--item --rounding) - 1px); border-color: fn.color(--item --key-focus --border); - background-color: fn.color(--item --key-focus --bg); + background-color: fn.color(--item --hover --bg); box-shadow: fn.color(--item --key-focus --shadow); - color: fn.color(--item --key-focus --label); + color: fn.color(--item --hover --label); } } } -- cgit v1.2.3-70-g09d2