From 518c7337572c0b7ba01b595aeb94fd36f8e59fdf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 29 Apr 2021 17:53:38 +0200 Subject: Update --- assets/css/components/_outer-button.scss | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) (limited to 'assets/css/components') diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index 00c4ccb..d1da93c 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -1,8 +1,9 @@ @include namespace('outer-button') { @include store(( --colors: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --fg-lo, $global: true), + --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --fg-lo, $global: true), + --border: rgba(#000, .1), --hover: ( --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), @@ -23,6 +24,7 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); + font-family: $font-fam--large; font-size: 1rem; font-weight: 500; text-decoration: none; @@ -40,18 +42,25 @@ justify-content: center; width: prop(--dims --outer, $global: true); height: 100%; + + @include next-element('content') { + margin-left: -1px; + border-left: 1px solid prop(--colors --border); + } } @include element('icon-symbol') { display: block; - width: 1.5em; - height: 1.5em; + width: 1.35em; + height: 1.35em; } @include element('content') { height: 100%; padding-right: prop(--dims --pad-x); padding-left: prop(--dims --pad-x); + transition: border-color .2s; + font-size: 1 / 16 * 15em; line-height: prop(--dims --outer, $global: true); white-space: nowrap; } @@ -61,6 +70,12 @@ &:hover { background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); + + @include element('icon') { + @include next-element('content') { + border-left-color: transparent; + } + } } } } -- cgit v1.2.3-54-g00ecf