From 416436b6a757479de8ce58fd87c4927cb52b541d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Jan 2023 12:42:16 +0100 Subject: Improved list page header --- assets/css/objects/_emoji.scss | 33 +++++++++++++++++++++++++++++++++ assets/css/objects/emoji.scss | 33 --------------------------------- 2 files changed, 33 insertions(+), 33 deletions(-) create mode 100644 assets/css/objects/_emoji.scss delete mode 100644 assets/css/objects/emoji.scss (limited to 'assets/css/objects') diff --git a/assets/css/objects/_emoji.scss b/assets/css/objects/_emoji.scss new file mode 100644 index 0000000..8387e1d --- /dev/null +++ b/assets/css/objects/_emoji.scss @@ -0,0 +1,33 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('emoji') { + @include iro.props-store(( + --dims: ( + --size: 1em, + --rounding: 3px, + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline; + width: fn.dim(--size); + height: fn.dim(--size); + margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); + padding: fn.dim(--rounding); + transform: scale(1.5); + transition: transform .2s ease, background-color .2s ease; + border-radius: calc(fn.dim(--rounding) / 3); + + &:hover { + transform: scale(3); + background-color: fn.color(--bg); + } + } +} diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/emoji.scss deleted file mode 100644 index 8387e1d..0000000 --- a/assets/css/objects/emoji.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use 'iro-design/src/functions' as fn; - -@include iro.props-namespace('emoji') { - @include iro.props-store(( - --dims: ( - --size: 1em, - --rounding: 3px, - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--obj-hi), - ) - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline; - width: fn.dim(--size); - height: fn.dim(--size); - margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); - padding: fn.dim(--rounding); - transform: scale(1.5); - transition: transform .2s ease, background-color .2s ease; - border-radius: calc(fn.dim(--rounding) / 3); - - &:hover { - transform: scale(3); - background-color: fn.color(--bg); - } - } -} -- cgit v1.2.3-70-g09d2