From 9fb3237247f637b55a7da6bbf2847c17c2fb2ad0 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 8 Feb 2022 18:05:15 +0100 Subject: Added menu --- src/_functions.scss | 1 + src/index.scss | 1 + src/objects/_action-menu.scss | 30 +++----------- src/objects/_heading.scss | 23 ++++++----- src/objects/_menu.scss | 92 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 114 insertions(+), 33 deletions(-) create mode 100644 src/objects/_menu.scss (limited to 'src') diff --git a/src/_functions.scss b/src/_functions.scss index f15ed0c..9425413 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -43,6 +43,7 @@ font-style: font-prop($font, $overrides, $key, --style), line-height: font-prop($font, $overrides, $key, --line-height), text-transform: font-prop($font, $overrides, $key, --transform), + letter-spacing: font-prop($font, $overrides, $key, --spacing), font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), ); diff --git a/src/index.scss b/src/index.scss index b4c437e..44fba76 100644 --- a/src/index.scss +++ b/src/index.scss @@ -20,6 +20,7 @@ @use 'objects/status-indicator'; @use 'objects/avatar'; @use 'objects/action-menu'; +@use 'objects/menu'; @use 'layouts/form'; diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 2c922f8..ff88774 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -43,8 +43,6 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - @include iro.bem-composed-of('action-button' 'object'); - position: absolute; z-index: 10000; top: fn.dim(--y); @@ -72,12 +70,6 @@ transform: translate(-100%, 0); } - @include iro.bem-elem('separator') { - height: 1px; - margin: fn.dim(--separator) 0; - background-color: fn.color(--separator); - } - @include iro.bem-elem('item') { display: block; box-sizing: border-box; @@ -91,18 +83,10 @@ &:enabled { color: currentColor; - @include iro.bem-elem('icon') { - color: fn.color(--icon); - } - &:hover, &:active { background-color: fn.color(--item --hover --bg); color: fn.color(--item --hover --label); - - @include iro.bem-elem('icon') { - color: currentColor; - } } @include iro.bem-at-theme('keyboard') { @@ -112,15 +96,17 @@ background-color: fn.color(--item --key-focus --bg); box-shadow: fn.color(--item --key-focus --shadow); color: fn.color(--item --key-focus --label); - - @include iro.bem-elem('icon') { - color: currentColor; - } } } } } + @include iro.bem-elem('separator') { + height: 1px; + margin: fn.dim(--separator) 0; + background-color: fn.color(--separator); + } + @include iro.bem-elem('slot') { padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); } @@ -130,9 +116,5 @@ justify-content: center; width: 1em; } - - @include iro.bem-elem('icon') { - color: fn.color(--item --disabled --label); - } } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index cd91c61..c1feb5e 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -51,20 +51,25 @@ } @include iro.bem-modifier('sm') { - @include fn.set-font(--standard, (--line-height: null)); + @include fn.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --md), + --weight: 500 + )); - color: fn.color(--strong); - font-size: fn.global-dim(--font-size --md); - font-weight: 500; + color: fn.color(--strong); } @include iro.bem-modifier('xs') { - @include fn.set-font(--standard, (--line-height: null)); + @include fn.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --xs), + --weight: 500, + --transform: uppercase, + --spacing: .5px + )); - color: fn.color(--light); - font-size: fn.global-dim(--font-size --xs); - font-weight: 500; - text-transform: uppercase; + color: fn.color(--light); } } } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss new file mode 100644 index 0000000..91ef0a5 --- /dev/null +++ b/src/objects/_menu.scss @@ -0,0 +1,92 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('menu') { + @include iro.props-store(( + --dims: ( + --separator: .6rem, + --item: ( + --pad-x: .8rem, + --pad-y: .4rem, + ), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --header: ( + --label: fn.global-color(--fg-hi2), + ), + --item: ( + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --disabled: ( + --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), + ), + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-elem('header') { + padding: + calc(1.5 * fn.dim(--item --pad-y)) + fn.dim(--item --pad-x) + calc(.5 * fn.dim(--item --pad-y)); + color: fn.color(--header --label); + font-size: fn.global-dim(--font-size --xs); + font-weight: 500; + letter-spacing: .5px; + text-transform: uppercase; + } + + @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; + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + &:hover, + &:active { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-radius: 2px; + border-color: fn.color(--item --key-focus --border); + background-color: fn.color(--item --key-focus --bg); + box-shadow: fn.color(--item --key-focus --shadow); + color: fn.color(--item --key-focus --label); + } + } + } + } + + @include iro.bem-elem('separator') { + height: fn.dim(--separator); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + width: 1em; + } + } +} -- cgit v1.2.3-70-g09d2