From 09637502e8374ba5a1f408a9a231a0ec1eb96ee4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 18 Apr 2021 20:40:38 +0200 Subject: Update --- assets/css/components/_outer-button.scss | 34 +++++++++++++++++--------------- 1 file changed, 18 insertions(+), 16 deletions(-) (limited to 'assets/css/components/_outer-button.scss') diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index 774281d..d636f7d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -11,6 +11,9 @@ --fg: prop(--colors --fg-lo, $global: true), --bg: prop(--colors --bg-hi, $global: true), ) + ), + --dims: ( + --pad-x: 1.7rem, ) )); @@ -31,6 +34,11 @@ bottom: 0; } + @include modifier('inverted') { + background-color: prop(--colors --inverted --bg); + color: prop(--colors --inverted --fg); + } + @include element('icon') { display: flex; position: relative; @@ -39,20 +47,6 @@ justify-content: center; width: prop(--dims --outer, $global: true); height: 100%; - transition: background-color .2s, color .2s; - } - - @include modifier('inverted') { - background-color: prop(--colors --inverted --bg); - color: prop(--colors --inverted --fg); - } - - &:link, - &:visited { - &:hover { - background-color: prop(--colors --hover --bg); - color: prop(--colors --hover --fg); - } } @include element('icon-symbol') { @@ -63,10 +57,18 @@ @include element('content') { height: 100%; - padding-right: prop(--dims --outer-spacing, $global: true); - padding-left: prop(--dims --outer-spacing, $global: true); + padding-right: prop(--dims --pad-x); + padding-left: prop(--dims --pad-x); line-height: prop(--dims --outer, $global: true); white-space: nowrap; } + + &:link, + &:visited { + &:hover { + background-color: prop(--colors --hover --bg); + color: prop(--colors --hover --fg); + } + } } } -- cgit v1.2.3-54-g00ecf