From cd5a43967188244a3fd04f36a84af80fc138c550 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 13 Feb 2023 09:14:57 +0100 Subject: Update --- src/objects/_overflow-button.scss | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) (limited to 'src/objects/_overflow-button.scss') 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