summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--package.json2
-rw-r--r--src/objects/_badge.scss50
-rw-r--r--tpl/objects/badge.pug12
-rw-r--r--tpl/views/badge.pug27
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 @@
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 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 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 06261b8..8a9fb58 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -55,29 +55,33 @@ $static-themes: 'black' 'white' !default;
55@include iro.props-namespace('badge') { 55@include iro.props-namespace('badge') {
56 @include iro.props-store(( 56 @include iro.props-store((
57 --dims: ( 57 --dims: (
58 --pad-b: fn.global-dim(--size --50), 58 --pad-b: fn.global-dim(--size --50),
59 --pad-i: fn.global-dim(--size --150), 59 --pad-i: fn.global-dim(--size --100),
60 --pad-i-pill: fn.global-dim(--size --200), 60 --pad-i-pill: fn.global-dim(--size --150),
61 --rounding: fn.global-dim(--rounding), 61 --pad-i-label: fn.global-dim(--size --50),
62 --font-size: fn.global-dim(--font-size --75), 62 --rounding: fn.global-dim(--rounding),
63 --font-size: fn.global-dim(--font-size --75),
63 64
64 --sm: ( 65 --sm: (
65 --pad-b: fn.global-dim(--size --25), 66 --pad-b: fn.global-dim(--size --25),
66 --pad-i: fn.global-dim(--size --115), 67 --pad-i: fn.global-dim(--size --75),
67 --pad-i-pill: fn.global-dim(--size --150), 68 --pad-i-pill: fn.global-dim(--size --125),
68 --font-size: fn.global-dim(--font-size --50), 69 --pad-i-label: fn.global-dim(--size --25),
70 --font-size: fn.global-dim(--font-size --50),
69 ), 71 ),
70 --lg: ( 72 --lg: (
71 --pad-b: fn.global-dim(--size --75), 73 --pad-b: fn.global-dim(--size --75),
72 --pad-i: fn.global-dim(--size --175), 74 --pad-i: fn.global-dim(--size --125),
73 --pad-i-pill: fn.global-dim(--size --225), 75 --pad-i-pill: fn.global-dim(--size --175),
74 --font-size: fn.global-dim(--font-size --100), 76 --pad-i-label: fn.global-dim(--size --50),
75 ), 77 --font-size: fn.global-dim(--font-size --100),
76 --xl: ( 78 ),
77 --pad-b: fn.global-dim(--size --100), 79 --xl: (
78 --pad-i: fn.global-dim(--size --225), 80 --pad-b: fn.global-dim(--size --100),
79 --pad-i-pill: fn.global-dim(--size --300), 81 --pad-i: fn.global-dim(--size --150),
80 --font-size: fn.global-dim(--font-size --150), 82 --pad-i-pill: fn.global-dim(--size --225),
83 --pad-i-label: fn.global-dim(--size --75),
84 --font-size: fn.global-dim(--font-size --150),
81 ), 85 ),
82 86
83 --key-focus: ( 87 --key-focus: (
@@ -223,6 +227,10 @@ $static-themes: 'black' 'white' !default;
223 } 227 }
224 } 228 }
225 229
230 @include iro.bem-elem('label') {
231 margin-inline: fn.dim(--pad-i-label);
232 }
233
226 @include iro.bem-modifier('quiet') { 234 @include iro.bem-modifier('quiet') {
227 background-color: fn.color(--quiet --bg); 235 background-color: fn.color(--quiet --bg);
228 color: fn.color(--quiet --label); 236 color: fn.color(--quiet --label);
@@ -277,6 +285,10 @@ $static-themes: 'black' 'white' !default;
277 padding-block: fn.dim(--#{$size} --pad-b); 285 padding-block: fn.dim(--#{$size} --pad-b);
278 padding-inline: fn.dim(--#{$size} --pad-i); 286 padding-inline: fn.dim(--#{$size} --pad-i);
279 font-size: fn.dim(--#{$size} --font-size); 287 font-size: fn.dim(--#{$size} --font-size);
288
289 @include iro.bem-elem('label') {
290 margin-inline: fn.dim(--#{$size} --pad-i-label);
291 }
280 292
281 @include iro.bem-modifier('pill') { 293 @include iro.bem-modifier('pill') {
282 padding-inline: fn.dim(--#{$size} --pad-i-pill); 294 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)
15 15
16 if attributes.href 16 if attributes.href
17 a(href=attributes.href class=classes) 17 a(href=attributes.href class=classes)
18 block 18 if attributes.icon
19 +icon(attributes.icon)
20 = ' '
21 span.o-badge__label
22 block
19 else 23 else
20 span(class=classes) 24 span(class=classes)
21 block 25 if attributes.icon
26 +icon(attributes.icon)
27 = ' '
28 span.o-badge__label
29 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
@@ -10,6 +10,33 @@ mixin view-badge
10 +badge(size='xl' href='#')= '300' 10 +badge(size='xl' href='#')= '300'
11 11
12 .c-box 12 .c-box
13 +badge(pill=true size='sm' href='#')= '50'
14 = ' '
15 +badge(pill=true href='#')= '100'
16 = ' '
17 +badge(pill=true size='lg' href='#')= '200'
18 = ' '
19 +badge(pill=true size='xl' href='#')= '300'
20
21 .c-box
22 +badge(icon='image' size='sm' href='#')= '50'
23 = ' '
24 +badge(icon='image' href='#')= '100'
25 = ' '
26 +badge(icon='image' size='lg' href='#')= '200'
27 = ' '
28 +badge(icon='image' size='xl' href='#')= '300'
29
30 .c-box
31 +badge(pill=true icon='image' size='sm' href='#')= '50'
32 = ' '
33 +badge(pill=true icon='image' href='#')= '100'
34 = ' '
35 +badge(pill=true icon='image' size='lg' href='#')= '200'
36 = ' '
37 +badge(pill=true icon='image' size='xl' href='#')= '300'
38
39 .c-box
13 +badge(href='#')= '100' 40 +badge(href='#')= '100'
14 = ' ' 41 = ' '
15 +badge(quiet=true href='#')= '100' 42 +badge(quiet=true href='#')= '100'