summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-07-05 07:21:31 +0200
committerVolpeon <git@volpeon.ink>2024-07-05 07:21:31 +0200
commit3e2b42ee926aafcdf1d77e63b0f86565f4ec51b2 (patch)
treec1f7ae78734280e5ae5740ce948f961f1cf08ce5
parentBetter badge (diff)
downloadiro-design-3e2b42ee926aafcdf1d77e63b0f86565f4ec51b2.tar.gz
iro-design-3e2b42ee926aafcdf1d77e63b0f86565f4ec51b2.tar.bz2
iro-design-3e2b42ee926aafcdf1d77e63b0f86565f4ec51b2.zip
Update button
-rw-r--r--package.json2
-rw-r--r--src/objects/_badge.scss3
-rw-r--r--src/objects/_button.scss32
-rw-r--r--tpl/objects/badge.pug16
-rw-r--r--tpl/objects/button.pug7
-rw-r--r--tpl/views/button.pug9
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 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "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", 14 "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",
15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "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 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn; 3@use '../functions' as fn;
4 4
5$sizes: 'sm' 'lg' 'xl' !default;
5$themes: 'accent' 'positive' 'negative' 'warning' !default; 6$themes: 'accent' 'positive' 'negative' 'warning' !default;
6$static-themes: 'black' 'white' !default; 7$static-themes: 'black' 'white' !default;
7 8
@@ -280,7 +281,7 @@ $static-themes: 'black' 'white' !default;
280 } 281 }
281 } 282 }
282 283
283 @each $size in sm lg xl { 284 @each $size in $sizes {
284 @include iro.bem-modifier($size) { 285 @include iro.bem-modifier($size) {
285 padding-block: fn.dim(--#{$size} --pad-b); 286 padding-block: fn.dim(--#{$size} --pad-b);
286 padding-inline: fn.dim(--#{$size} --pad-i); 287 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;
69 @include iro.props-store(( 69 @include iro.props-store((
70 --dims: ( 70 --dims: (
71 --line-height: 1.4, 71 --line-height: 1.4,
72 --pad-i: fn.global-dim(--size --225), 72 --pad-i: fn.global-dim(--size --150),
73 --pad-i-label: fn.global-dim(--size --75),
73 --pad-b: fn.global-dim(--size --65), 74 --pad-b: fn.global-dim(--size --65),
74 --border: fn.global-dim(--border --medium), 75 --border: fn.global-dim(--border --medium),
75 --rounding: 10em, 76 --rounding: 10em,
76 --font-size: fn.global-dim(--font-size --100), 77 --font-size: fn.global-dim(--font-size --100),
77 78
78 --sm: ( 79 --sm: (
79 --pad-i: fn.global-dim(--size --150), 80 --pad-i: fn.global-dim(--size --100),
80 --pad-b: fn.global-dim(--size --25), 81 --pad-i-label: fn.global-dim(--size --50),
81 --font-size: fn.global-dim(--font-size --75), 82 --pad-b: fn.global-dim(--size --25),
83 --font-size: fn.global-dim(--font-size --75),
82 ), 84 ),
83 --lg: ( 85 --lg: (
84 --pad-i: fn.global-dim(--size --300), 86 --pad-i: fn.global-dim(--size --200),
85 --pad-b: fn.global-dim(--size --100), 87 --pad-i-label: fn.global-dim(--size --100),
86 --font-size: fn.global-dim(--font-size --150), 88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
87 ), 90 ),
88 --xl: ( 91 --xl: (
89 --pad-i: fn.global-dim(--size --400), 92 --pad-i: fn.global-dim(--size --250),
90 --pad-b: fn.global-dim(--size --150), 93 --pad-i-label: fn.global-dim(--size --150),
91 --font-size: fn.global-dim(--font-size --200), 94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
92 ), 96 ),
93 97
94 --key-focus: ( 98 --key-focus: (
@@ -248,6 +252,10 @@ $static-themes: 'black' 'white' !default;
248 } 252 }
249 } 253 }
250 } 254 }
255
256 @include iro.bem-elem('label') {
257 margin-inline: fn.dim(--pad-i-label);
258 }
251 259
252 @include iro.bem-modifier('block') { 260 @include iro.bem-modifier('block') {
253 display: block; 261 display: block;
@@ -263,6 +271,10 @@ $static-themes: 'black' 'white' !default;
263 padding-block: fn.dim(--#{$size} --pad-b); 271 padding-block: fn.dim(--#{$size} --pad-b);
264 padding-inline: fn.dim(--#{$size} --pad-i); 272 padding-inline: fn.dim(--#{$size} --pad-i);
265 font-size: fn.dim(--#{$size} --font-size); 273 font-size: fn.dim(--#{$size} --font-size);
274
275 @include iro.bem-elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label);
277 }
266 } 278 }
267 } 279 }
268 280
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)
18 if attributes.icon 18 if attributes.icon
19 +icon(attributes.icon) 19 +icon(attributes.icon)
20 = ' ' 20 = ' '
21 span.o-badge__label 21 if block
22 block 22 span.o-badge__label
23 block
24 if attributes.postIcon
25 = ' '
26 +icon(attributes.postIcon)
23 else 27 else
24 span(class=classes) 28 span(class=classes)
25 if attributes.icon 29 if attributes.icon
26 +icon(attributes.icon) 30 +icon(attributes.icon)
27 = ' ' 31 = ' '
28 span.o-badge__label 32 if block
29 block 33 span.o-badge__label
34 block
35 if attributes.postIcon
36 = ' '
37 +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
20 if attributes.icon 20 if attributes.icon
21 +icon(attributes.icon) 21 +icon(attributes.icon)
22 = ' ' 22 = ' '
23 block 23 if block
24 span.o-button__label
25 block
26 if attributes.postIcon
27 = ' '
28 +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
@@ -19,6 +19,15 @@ mixin view-button
19 +a-button(size='xl' outline=true)= 'Button' 19 +a-button(size='xl' outline=true)= 'Button'
20 20
21 .c-box 21 .c-box
22 +a-button(postIcon='arrow-right' size='sm')= 'Button'
23 = ' '
24 +a-button(postIcon='arrow-right')= 'Button'
25 = ' '
26 +a-button(postIcon='arrow-right' size='lg')= 'Button'
27 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button'
29
30 .c-box
22 .l-button-group 31 .l-button-group
23 +a-button= 'Button' 32 +a-button= 'Button'
24 +a-button(disabled=true)= 'Button' 33 +a-button(disabled=true)= 'Button'