summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
committerVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
commit57e28f7fe929f275a0c516d0a702ec8a8739a810 (patch)
treefd84e604e0d19dba9c18d93097837a6b1d58199e
parentUpdate (diff)
downloadiro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.gz
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.bz2
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.zip
Add card
Diffstat
-rw-r--r--src/_utils.scss8
-rw-r--r--src/layouts/_media.scss51
-rw-r--r--src/objects/_card.scss24
-rw-r--r--static/Drawing_Half.pngbin0 -> 535700 bytes
-rwxr-xr-xstatic/avatar.pngbin61956 -> 164866 bytes
-rw-r--r--tpl/index.pug8
-rw-r--r--tpl/objects/avatar.pug26
-rw-r--r--tpl/objects/card.pug43
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/message.pug2
-rw-r--r--tpl/objects/side-nav.pug2
-rw-r--r--tpl/objects/text-field.pug1
-rw-r--r--tpl/views/card.pug24
-rw-r--r--tpl/views/menu.pug2
-rw-r--r--tpl/views/message-group.pug2
-rw-r--r--tpl/views/message.pug2
16 files changed, 109 insertions, 88 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index 8ba2581..a99d7ec 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -11,7 +11,9 @@ $dirs: (
11 'is': '-inline-start', 11 'is': '-inline-start',
12 'ie': '-inline-end', 12 'ie': '-inline-end',
13 'i': '-inline', 13 'i': '-inline',
14); 14) !default;
15
16$sizes: 0 10 50 75 100 125 200 400 700 800 !default;
15 17
16@include iro.bem-utility('d-block') { 18@include iro.bem-utility('d-block') {
17 display: block; 19 display: block;
@@ -177,7 +179,7 @@ $dirs: (
177 padding#{$suffix}: auto; 179 padding#{$suffix}: auto;
178 } 180 }
179 181
180 @each $size in (0 10 50 75 100 125 200 400 700 800) { 182 @each $size in $sizes {
181 @include iro.bem-utility('m#{$dir}-#{$size}') { 183 @include iro.bem-utility('m#{$dir}-#{$size}') {
182 margin#{$suffix}: fn.global-dim(--size --#{$size}); 184 margin#{$suffix}: fn.global-dim(--size --#{$size});
183 } 185 }
@@ -192,6 +194,6 @@ $dirs: (
192 } 194 }
193 195
194 @include iro.bem-utility('b#{$dir}-1') { 196 @include iro.bem-utility('b#{$dir}-1') {
195 border#{$suffix}: 1px solid fn.global-color(--border); 197 border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
196 } 198 }
197} 199}
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 953c8c0..1227486 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,57 +1,30 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$sizes: 'gapless' 'sm' 'lg' 'xl' !default;
5
4@include iro.props-namespace('media') { 6@include iro.props-namespace('media') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
7 --pad-x: fn.global-dim(--size --150), 9 --gap: fn.global-dim(--size --150),
8 --pad-y: fn.global-dim(--size --85),
9
10 --75: (
11 --pad-x: fn.global-dim(--size --100),
12 --pad-y: fn.global-dim(--size --50),
13 ),
14 10
15 --200: ( 11 --gapless: 0,
16 --pad-x: fn.global-dim(--size --300), 12 --sm: fn.global-dim(--size --100),
17 --pad-y: fn.global-dim(--size --150), 13 --lg: fn.global-dim(--size --300),
18 ), 14 --xl: fn.global-dim(--size --450),
19
20 --300: (
21 --pad-x: fn.global-dim(--size --450),
22 --pad-y: fn.global-dim(--size --225),
23 )
24 ) 15 )
25 )); 16 ));
26 17
27 @include iro.bem-layout(iro.props-namespace()) { 18 @include iro.bem-layout(iro.props-namespace()) {
28 display: flex; 19 display: flex;
29 align-items: center; 20 align-items: center;
30 padding: fn.dim(--pad-y) fn.dim(--pad-x); 21 gap: fn.dim(--gap);
31 gap: fn.dim(--pad-x);
32 line-height: 1.4; 22 line-height: 1.4;
33 23
34 @include iro.bem-modifier('75') { 24 @each $size in $sizes {
35 padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); 25 @include iro.bem-modifier($size) {
36 gap: fn.dim(--75 --pad-x); 26 gap: fn.dim(--#{$size});
37 } 27 }
38
39 @include iro.bem-modifier('200') {
40 padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
41 gap: fn.dim(--200 --pad-x);
42 }
43
44 @include iro.bem-modifier('300') {
45 padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x);
46 gap: fn.dim(--300 --pad-x);
47 }
48
49 @include iro.bem-modifier('flush') {
50 padding: 0;
51 }
52
53 @include iro.bem-modifier('gapless') {
54 gap: 0;
55 } 28 }
56 29
57 @include iro.bem-modifier('wrap') { 30 @include iro.bem-modifier('wrap') {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 07256cb..5783ac1 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -53,13 +53,21 @@
53 } 53 }
54 } 54 }
55 55
56 @include iro.bem-elem('thumbnail') { 56 @include iro.bem-elem('avatar') {
57 margin-block-start: fn.dim(--pad-b);
58 margin-inline-start: fn.dim(--pad-i);
59 }
60
61 @include iro.bem-elem('image') {
57 position: relative; 62 position: relative;
58 width: 100%; 63 width: 100%;
59 height: 100%; 64
65 @include iro.bem-next-elem('avatar') {
66 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
67 }
60 } 68 }
61 69
62 @include iro.bem-elem('thumbnail-img') { 70 @include iro.bem-elem('image-img') {
63 display: block; 71 display: block;
64 object-fit: cover; 72 object-fit: cover;
65 width: 100%; 73 width: 100%;
@@ -69,6 +77,16 @@
69 @include iro.bem-elem('body') { 77 @include iro.bem-elem('body') {
70 padding-block: fn.dim(--pad-b); 78 padding-block: fn.dim(--pad-b);
71 padding-inline: fn.dim(--pad-i); 79 padding-inline: fn.dim(--pad-i);
80
81 &::before {
82 content: '';
83 display: block;
84 margin-block: -100em 100em;
85 }
86 }
87
88 @include iro.bem-elem('content') {
89 margin-block-start: fn.dim(--spacing);
72 } 90 }
73 91
74 @include iro.bem-elem('footer') { 92 @include iro.bem-elem('footer') {
diff --git a/static/Drawing_Half.png b/static/Drawing_Half.png
new file mode 100644
index 0000000..09f3814
--- /dev/null
+++ b/static/Drawing_Half.png
Binary files differ
diff --git a/static/avatar.png b/static/avatar.png
index aa4345f..596ccb4 100755
--- a/static/avatar.png
+++ b/static/avatar.png
Binary files differ
diff --git a/tpl/index.pug b/tpl/index.pug
index b6af02b..a6e99dd 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -49,7 +49,7 @@ mixin user-card(name, hue)
49 - 49 -
50 const avaName = name.slice(0, 1) 50 const avaName = name.slice(0, 1)
51 51
52 .l-media.l-media--flush.l-media--75 52 .l-media.l-media--sm
53 +avatar(block=true size='xs' class='l-media__block' hue=hue) 53 +avatar(block=true size='xs' class='l-media__block' hue=hue)
54 = avaName 54 = avaName
55 = name 55 = name
@@ -134,7 +134,7 @@ html
134 +view-message 134 +view-message
135 +view-message-group 135 +view-message-group
136 136
137 .c-sidebar.l-overflow.t-base.u-p-75 137 .c-sidebar.l-overflow.u-bie-1.u-p-100
138 +menu 138 +side-nav
139 each view in views 139 each view in views
140 +menu-item(tag='a' href='#' + view.id)= view.title 140 +side-nav-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 19439bb..ca3de07 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -20,11 +20,21 @@ mixin avatar
20 styles['--avatar--colors--h'] = attributes.hue; 20 styles['--avatar--colors--h'] = attributes.hue;
21 } 21 }
22 22
23 a(class=classes style=styles href=attributes.href) 23 if attributes.href
24 if attributes.status 24 a(class=classes style=styles href=attributes.href)
25 +status-indicator(attributes.status)(class='o-avatar__status') 25 if attributes.status
26 if attributes.src 26 +status-indicator(attributes.status)(class='o-avatar__status')
27 img.o-avatar__content(src=attributes.src) 27 if attributes.src
28 else 28 img.o-avatar__content(src=attributes.src)
29 .o-avatar__content 29 else
30 block 30 .o-avatar__content
31 block
32 else
33 div(class=classes style=styles)
34 if attributes.status
35 +status-indicator(attributes.status)(class='o-avatar__status')
36 if attributes.src
37 img.o-avatar__content(src=attributes.src)
38 else
39 .o-avatar__content
40 block
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d6516be..d61393d 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,29 +1,34 @@
1mixin card 1mixin card
2 - const slots = {}
3
4 mixin slot(key)
5 - slots[key] = block
6
7 - 2 -
8 block ? block() : undefined
9
10 let classes = { 3 let classes = {
11 'o-card': true, 4 'o-card': true,
12 } 5 }
13 6
14 if attributes.href 7 if attributes.href
15 a(href=attributes.href class=classes) 8 a(href=attributes.href class=classes)
16 if slots.body 9 block
17 .o-card__body
18 - slots.body()
19 if slots.footer
20 .o-card__footer
21 - slots.footer()
22 else 10 else
23 div(class=classes) 11 div(class=classes)
24 if slots.body 12 block
25 .o-card__body 13
26 - slots.body() 14mixin card-image
27 if slots.footer 15 .o-card__image
28 .o-card__footer 16 img.o-card__image-img(src=attributes.src)
29 - slots.footer() 17
18mixin card-body
19 .o-card__body
20 block
21
22mixin card-title
23 h1.o-card__title
24 block
25
26mixin card-avatar
27 +avatar(class='o-card__avatar' src=attributes.src size='xl')
28
29mixin card-content
30 .o-card__content
31 block
32mixin card-footer
33 footer.o-card__footer
34 block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index a8b20d7..578f9bc 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -19,7 +19,7 @@ mixin menu-item
19 let classes = { 19 let classes = {
20 'o-menu__item': true, 20 'o-menu__item': true,
21 'l-media': true, 21 'l-media': true,
22 'l-media--75': true, 22 'l-media--sm': true,
23 'o-menu__header': attributes.header, 23 'o-menu__header': attributes.header,
24 'is-selected': attributes.selected, 24 'is-selected': attributes.selected,
25 } 25 }
diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug
index d644347..6b64a40 100644
--- a/tpl/objects/message.pug
+++ b/tpl/objects/message.pug
@@ -45,7 +45,7 @@ mixin message(user)
45 45
46 article(class=classes) 46 article(class=classes)
47 if user && attributes.avatar 47 if user && attributes.avatar
48 .l-media.l-media--flush.l-flex--align-start 48 .l-media.l-flex--align-start
49 .l-media__block.u-mt-50.u-p-sticky-top 49 .l-media__block.u-mt-50.u-p-sticky-top
50 +avatar= user.slice(0, 2) 50 +avatar= user.slice(0, 2)
51 .l-media__block.l-media__block--main 51 .l-media__block.l-media__block--main
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index 511f298..ccd24e4 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -19,7 +19,7 @@ mixin side-nav-item
19 let classes = { 19 let classes = {
20 'o-side-nav__item': true, 20 'o-side-nav__item': true,
21 'l-media': true, 21 'l-media': true,
22 'l-media--75': true, 22 'l-media--sm': true,
23 'o-side-nav__header': attributes.header, 23 'o-side-nav__header': attributes.header,
24 'is-selected': attributes.selected, 24 'is-selected': attributes.selected,
25 } 25 }
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index f8e5263..0342f01 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -15,7 +15,6 @@ mixin text-field
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-media': !!block, 17 'l-media': !!block,
18 'l-media--flush': !!block,
19 'l-media--gapless': !!block, 18 'l-media--gapless': !!block,
20 } 19 }
21 if (attributes.class) { 20 if (attributes.class) {
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 0b88b0e..6858867 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,9 +1,23 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')
3 .c-box 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
4 +card(href='#') 4 +card(href='#')
5 +slot('body') 5 +card-image(src='Drawing_Half.png')
6 h1= 'XS Heading' 6 +card-avatar(src='avatar.png')
7 p= loremIpsum 7 +card-body
8 +slot('footer') 8 +card-title= 'XS Heading'
9 +card-content= loremIpsum
10 +card-footer
11 = 'Footer'
12
13 +card(href='#')
14 +card-body
15 .l-media
16 +avatar(class='l-media__block' src='avatar.png')
17 .l-media__block.l-media__block--main
18 strong.u-d-block= 'Volpeon'
19 small.u-d-block= '@volpeon@is-a.wyvern.rip'
20 +card-content= loremIpsum
21 +card-image(src='Drawing_Half.png')
22 +card-body
9 = 'Footer' 23 = 'Footer'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 34a15ce..7c5df03 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -5,7 +5,7 @@ mixin view-menu
5 +action-button(quiet=true selected=true)= 'Menu' 5 +action-button(quiet=true selected=true)= 'Menu'
6 +popover 6 +popover
7 +menu 7 +menu
8 +menu-slot(class='l-media l-media--flush') 8 +menu-slot(class='l-media')
9 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') 9 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
10 .l-media__block.l-media__block--main 10 .l-media__block.l-media__block--main
11 strong.u-d-block= 'Volpeon' 11 strong.u-d-block= 'Volpeon'
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index 3d1166f..dc744d9 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -68,7 +68,7 @@ mixin view-message-group
68 +message-group('Volpeon') 68 +message-group('Volpeon')
69 +message()(theme='t-up' group=true) 69 +message()(theme='t-up' group=true)
70 +slot('header') 70 +slot('header')
71 .l-media.l-media--flush 71 .l-media
72 .l-media__block.l-media__block--main 72 .l-media__block.l-media__block--main
73 strong= 'Volpeon' 73 strong= 'Volpeon'
74 small.u-ml-100= '@volpeon@mk.vulpes.one' 74 small.u-ml-100= '@volpeon@mk.vulpes.one'
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index f256e41..9130537 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -18,7 +18,7 @@ mixin view-message
18 .c-box.l-overflow(style='resize: vertical') 18 .c-box.l-overflow(style='resize: vertical')
19 +message('Volpeon')(avatar=true theme='t-up') 19 +message('Volpeon')(avatar=true theme='t-up')
20 +slot('header') 20 +slot('header')
21 .l-media.l-media--flush 21 .l-media
22 .l-media__block.l-media__block--main 22 .l-media__block.l-media__block--main
23 strong= 'Volpeon' 23 strong= 'Volpeon'
24 small.u-ml-100= '@volpeon@mk.vulpes.one' 24 small.u-ml-100= '@volpeon@mk.vulpes.one'
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-17 10:59:23 +0000