From 3e2b42ee926aafcdf1d77e63b0f86565f4ec51b2 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 5 Jul 2024 07:21:31 +0200 Subject: Update button --- package.json | 2 +- src/objects/_badge.scss | 3 ++- src/objects/_button.scss | 32 ++++++++++++++++++++++---------- tpl/objects/badge.pug | 16 ++++++++++++---- tpl/objects/button.pug | 7 ++++++- tpl/views/button.pug | 9 +++++++++ 6 files changed, 52 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f4b0792..a0d782a 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 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:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right 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 8a9fb58..4e1662f 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -2,6 +2,7 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +$sizes: 'sm' 'lg' 'xl' !default; $themes: 'accent' 'positive' 'negative' 'warning' !default; $static-themes: 'black' 'white' !default; @@ -280,7 +281,7 @@ $static-themes: 'black' 'white' !default; } } - @each $size in sm lg xl { + @each $size in $sizes { @include iro.bem-modifier($size) { padding-block: fn.dim(--#{$size} --pad-b); padding-inline: fn.dim(--#{$size} --pad-i); diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 98ac8ef..8f1b533 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -69,26 +69,30 @@ $static-themes: 'black' 'white' !default; @include iro.props-store(( --dims: ( --line-height: 1.4, - --pad-i: fn.global-dim(--size --225), + --pad-i: fn.global-dim(--size --150), + --pad-i-label: fn.global-dim(--size --75), --pad-b: fn.global-dim(--size --65), --border: fn.global-dim(--border --medium), --rounding: 10em, --font-size: fn.global-dim(--font-size --100), --sm: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --25), - --font-size: fn.global-dim(--font-size --75), + --pad-i: fn.global-dim(--size --100), + --pad-i-label: fn.global-dim(--size --50), + --pad-b: fn.global-dim(--size --25), + --font-size: fn.global-dim(--font-size --75), ), --lg: ( - --pad-i: fn.global-dim(--size --300), - --pad-b: fn.global-dim(--size --100), - --font-size: fn.global-dim(--font-size --150), + --pad-i: fn.global-dim(--size --200), + --pad-i-label: fn.global-dim(--size --100), + --pad-b: fn.global-dim(--size --100), + --font-size: fn.global-dim(--font-size --150), ), --xl: ( - --pad-i: fn.global-dim(--size --400), - --pad-b: fn.global-dim(--size --150), - --font-size: fn.global-dim(--font-size --200), + --pad-i: fn.global-dim(--size --250), + --pad-i-label: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --150), + --font-size: fn.global-dim(--font-size --200), ), --key-focus: ( @@ -248,6 +252,10 @@ $static-themes: 'black' 'white' !default; } } } + + @include iro.bem-elem('label') { + margin-inline: fn.dim(--pad-i-label); + } @include iro.bem-modifier('block') { display: block; @@ -263,6 +271,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); + } } } diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug index c91e74f..48e4029 100644 --- a/tpl/objects/badge.pug +++ b/tpl/objects/badge.pug @@ -18,12 +18,20 @@ mixin badge(variant) if attributes.icon +icon(attributes.icon) = ' ' - span.o-badge__label - block + if block + span.o-badge__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) else span(class=classes) if attributes.icon +icon(attributes.icon) = ' ' - span.o-badge__label - block + if block + span.o-badge__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 1fa3347..0884c8d 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -20,4 +20,9 @@ mixin a-button if attributes.icon +icon(attributes.icon) = ' ' - block + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/views/button.pug b/tpl/views/button.pug index eacf302..edd8ef6 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -18,6 +18,15 @@ mixin view-button = ' ' +a-button(size='xl' outline=true)= 'Button' + .c-box + +a-button(postIcon='arrow-right' size='sm')= 'Button' + = ' ' + +a-button(postIcon='arrow-right')= 'Button' + = ' ' + +a-button(postIcon='arrow-right' size='lg')= 'Button' + = ' ' + +a-button(postIcon='arrow-right' size='xl')= 'Button' + .c-box .l-button-group +a-button= 'Button' -- cgit v1.2.3-70-g09d2