From cd5a43967188244a3fd04f36a84af80fc138c550 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 13 Feb 2023 09:14:57 +0100 Subject: Update --- src/objects/_emoji.scss | 6 +----- src/objects/_icon.scss | 3 ++- src/objects/_overflow-button.scss | 31 ++++++++++++++++--------------- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 303430c..ca7a4ca 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -11,10 +11,6 @@ --zoom: 3, --valign: -.25em, - --icon: ( - --valign: -.17em, - ), - --150: ( --size: calc(1 / 14 * 28em), --valign: -.65em, @@ -45,7 +41,7 @@ @include iro.bem-modifier('icon') { margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); - vertical-align: fn.dim(--icon --valign); + vertical-align: fn.foreign-dim(--icon, --valign); } @each $size in '150' '200' { diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 5a543ab..170dca5 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -6,6 +6,7 @@ --dims: ( --stroke: 1.5px, --size: calc(1 / 14 * 16em), + --valign: -.18em ) ), 'dims'); @@ -16,7 +17,7 @@ stroke-width: fn.dim(--stroke); stroke-linecap: round; stroke-linejoin: round; - vertical-align: -.18em; + vertical-align: fn.dim(--valign); @include iro.bem-modifier('block') { display: block; diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss index d768492..4a794a7 100644 --- a/src/objects/_overflow-button.scss +++ b/src/objects/_overflow-button.scss @@ -4,9 +4,9 @@ @include iro.props-namespace('overflow-button') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --125), - --pad-y: fn.global-dim(--size --125), - --spacing: fn.global-dim(--size --50), + --pad-x: calc(fn.global-dim(--size --125) - 1px), + --pad-y: calc(fn.global-dim(--size --125) - 1px), + --spacing: fn.global-dim(--size --50) ), ), 'dims'); @@ -109,7 +109,7 @@ @include iro.bem-elem('inside') { display: inline-block; padding: fn.dim(--pad-y) fn.dim(--pad-x); - border: 1px solid transparent; + border: 2px solid transparent; border-radius: 100em; line-height: 1; text-align: center; @@ -153,17 +153,18 @@ } @include iro.bem-is('selected') { + @include iro.bem-elem('inside') { + border-color: fn.color(--selected --bg); + color: fn.color(--selected --label); + } + &:link, &:visited, &:enabled { - @include iro.bem-elem('inside') { - background-color: fn.color(--selected --bg); - color: fn.color(--selected --label); - } - &:hover, &:active { @include iro.bem-elem('inside') { + border-color: transparent; background-color: fn.color(--selected --bg); color: fn.color(--selected --hover --label); } @@ -201,14 +202,14 @@ } @include iro.bem-is('selected') { + @include iro.bem-elem('inside') { + border-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --label); + } + &:link, &:visited, &:enabled { - @include iro.bem-elem('inside') { - background-color: fn.color(--#{$color} --selected --bg); - color: fn.color(--#{$color} --selected --label); - } - &:hover, &:active { @include iro.bem-elem('inside') { @@ -225,7 +226,7 @@ &:focus { @include iro.bem-elem('inside') { border-color: fn.color(--key-focus --border); - box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + box-shadow: fn.color(--key-focus --shadow); } } } -- cgit v1.2.3-70-g09d2