From 977446e39cdbb5af3f5829330d5a9c91c9d5d877 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 4 Jul 2024 15:49:10 +0200 Subject: Better badge --- package.json | 2 +- src/objects/_badge.scss | 50 ++++++++++++++++++++++++++++++------------------- tpl/objects/badge.pug | 12 ++++++++++-- tpl/views/badge.pug | 27 ++++++++++++++++++++++++++ 4 files changed, 69 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 81ec80a..f4b0792 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 06261b8..8a9fb58 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -55,29 +55,33 @@ $static-themes: 'black' 'white' !default; @include iro.props-namespace('badge') { @include iro.props-store(( --dims: ( - --pad-b: fn.global-dim(--size --50), - --pad-i: fn.global-dim(--size --150), - --pad-i-pill: fn.global-dim(--size --200), - --rounding: fn.global-dim(--rounding), - --font-size: fn.global-dim(--font-size --75), + --pad-b: fn.global-dim(--size --50), + --pad-i: fn.global-dim(--size --100), + --pad-i-pill: fn.global-dim(--size --150), + --pad-i-label: fn.global-dim(--size --50), + --rounding: fn.global-dim(--rounding), + --font-size: fn.global-dim(--font-size --75), --sm: ( - --pad-b: fn.global-dim(--size --25), - --pad-i: fn.global-dim(--size --115), - --pad-i-pill: fn.global-dim(--size --150), - --font-size: fn.global-dim(--font-size --50), + --pad-b: fn.global-dim(--size --25), + --pad-i: fn.global-dim(--size --75), + --pad-i-pill: fn.global-dim(--size --125), + --pad-i-label: fn.global-dim(--size --25), + --font-size: fn.global-dim(--font-size --50), ), --lg: ( - --pad-b: fn.global-dim(--size --75), - --pad-i: fn.global-dim(--size --175), - --pad-i-pill: fn.global-dim(--size --225), - --font-size: fn.global-dim(--font-size --100), - ), - --xl: ( - --pad-b: fn.global-dim(--size --100), - --pad-i: fn.global-dim(--size --225), - --pad-i-pill: fn.global-dim(--size --300), - --font-size: fn.global-dim(--font-size --150), + --pad-b: fn.global-dim(--size --75), + --pad-i: fn.global-dim(--size --125), + --pad-i-pill: fn.global-dim(--size --175), + --pad-i-label: fn.global-dim(--size --50), + --font-size: fn.global-dim(--font-size --100), + ), + --xl: ( + --pad-b: fn.global-dim(--size --100), + --pad-i: fn.global-dim(--size --150), + --pad-i-pill: fn.global-dim(--size --225), + --pad-i-label: fn.global-dim(--size --75), + --font-size: fn.global-dim(--font-size --150), ), --key-focus: ( @@ -223,6 +227,10 @@ $static-themes: 'black' 'white' !default; } } + @include iro.bem-elem('label') { + margin-inline: fn.dim(--pad-i-label); + } + @include iro.bem-modifier('quiet') { background-color: fn.color(--quiet --bg); color: fn.color(--quiet --label); @@ -277,6 +285,10 @@ $static-themes: 'black' 'white' !default; padding-block: fn.dim(--#{$size} --pad-b); padding-inline: fn.dim(--#{$size} --pad-i); font-size: fn.dim(--#{$size} --font-size); + + @include iro.bem-elem('label') { + margin-inline: fn.dim(--#{$size} --pad-i-label); + } @include iro.bem-modifier('pill') { padding-inline: fn.dim(--#{$size} --pad-i-pill); diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index 500f062..c91e74f 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug @@ -15,7 +15,15 @@ mixin badge(variant) if attributes.href a(href=attributes.href class=classes) - block + if attributes.icon + +icon(attributes.icon) + = ' ' + span.o-badge__label + block else span(class=classes) - block + if attributes.icon + +icon(attributes.icon) + = ' ' + span.o-badge__label + block diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index e1aa9e2..cc1f346 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug @@ -9,6 +9,33 @@ mixin view-badge = ' ' +badge(size='xl' href='#')= '300' + .c-box + +badge(pill=true size='sm' href='#')= '50' + = ' ' + +badge(pill=true href='#')= '100' + = ' ' + +badge(pill=true size='lg' href='#')= '200' + = ' ' + +badge(pill=true size='xl' href='#')= '300' + + .c-box + +badge(icon='image' size='sm' href='#')= '50' + = ' ' + +badge(icon='image' href='#')= '100' + = ' ' + +badge(icon='image' size='lg' href='#')= '200' + = ' ' + +badge(icon='image' size='xl' href='#')= '300' + + .c-box + +badge(pill=true icon='image' size='sm' href='#')= '50' + = ' ' + +badge(pill=true icon='image' href='#')= '100' + = ' ' + +badge(pill=true icon='image' size='lg' href='#')= '200' + = ' ' + +badge(pill=true icon='image' size='xl' href='#')= '300' + .c-box +badge(href='#')= '100' = ' ' -- cgit v1.2.3-54-g00ecf