From 14bbe30114d2acf123ed917a530f35d3e9d03fae Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 4 Apr 2022 17:55:20 +0200 Subject: Added large badge variant --- src/objects/_badge.scss | 9 +++++++++ tpl/objects/badge.pug | 5 ++++- tpl/views/badge.pug | 4 ++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 2f250d2..ee9d5ac 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -10,6 +10,11 @@ --font-size: fn.global-dim(--font-size --75), --fixed-100: 1em, --fixed-200: 1.5em, + + --200: ( + --pad-x: fn.global-dim(--size --125), + --pad-y: fn.global-dim(--size --50), + ) ), ), 'dims'); @@ -45,5 +50,9 @@ @include iro.bem-modifier('fixed-200') { width: fn.dim(--fixed-200); } + + @include iro.bem-modifier('200') { + padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); + } } } diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index e0d8c44..cc61366 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug @@ -1,7 +1,10 @@ mixin badge(variant) - let classes = { - 'o-badge': true, + 'o-badge': true + } + if (attributes.size) { + classes['o-badge--' + attributes.size] = true } if (variant) { classes['o-badge--' + variant] = true diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index 9b2c3e6..ce41f25 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug @@ -4,3 +4,7 @@ mixin view-badge +badge= '100' = ' ' +badge('accent')= 'new' + = ' ' + +badge(size=200)= '100' + = ' ' + +badge('accent')(size=200)= 'new' -- cgit v1.2.3-54-g00ecf