summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_declare-vars.scss4
-rw-r--r--src/objects/_action-menu.scss2
-rw-r--r--src/objects/_avatar.scss17
-rw-r--r--tpl/views/avatar.pug64
4 files changed, 79 insertions, 8 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index d95c7fc..8597398 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -40,8 +40,8 @@
40 --900: iro.fn-px-to-rem(72px), 40 --900: iro.fn-px-to-rem(72px),
41 --1000: iro.fn-px-to-rem(80px), 41 --1000: iro.fn-px-to-rem(80px),
42 --1200: iro.fn-px-to-rem(96px), 42 --1200: iro.fn-px-to-rem(96px),
43 --1700: iro.fn-px-to-rem(136px), 43 --1600: iro.fn-px-to-rem(128px),
44 --2300: iro.fn-px-to-rem(184px), 44 --2000: iro.fn-px-to-rem(160px),
45 --2400: iro.fn-px-to-rem(192px), 45 --2400: iro.fn-px-to-rem(192px),
46 --2500: iro.fn-px-to-rem(200px), 46 --2500: iro.fn-px-to-rem(200px),
47 --2600: iro.fn-px-to-rem(208px), 47 --2600: iro.fn-px-to-rem(208px),
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 5675ac4..3061293 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -116,7 +116,7 @@
116 @include iro.bem-elem('icon-slot') { 116 @include iro.bem-elem('icon-slot') {
117 display: flex; 117 display: flex;
118 justify-content: center; 118 justify-content: center;
119 width: 1.2em; 119 width: fn.foreign-dim(--icon, --size);
120 } 120 }
121 } 121 }
122} 122}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 51b144a..958d939 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -21,6 +21,21 @@
21@include iro.props-namespace('avatar') { 21@include iro.props-namespace('avatar') {
22 @include iro.props-store(( 22 @include iro.props-store((
23 --dims: ( 23 --dims: (
24 --400: (
25 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400),
28 ),
29 --300: (
30 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300),
33 ),
34 --200: (
35 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225),
38 ),
24 --150: ( 39 --150: (
25 --size: fn.global-dim(--size --650), 40 --size: fn.global-dim(--size --650),
26 --font-size: fn.global-dim(--font-size --200), 41 --font-size: fn.global-dim(--font-size --200),
@@ -124,7 +139,7 @@
124 } 139 }
125 } 140 }
126 141
127 @each $size in 50 75 150 { 142 @each $size in 50 75 150 200 300 400 {
128 @include iro.bem-modifier($size) { 143 @include iro.bem-modifier($size) {
129 font-size: fn.dim(--#{$size} --font-size); 144 font-size: fn.dim(--#{$size} --font-size);
130 145
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index fcde68d..b08f5d7 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,11 +2,39 @@ mixin view-avatar
2 +view('avatar', 'Avatar') 2 +view('avatar', 'Avatar')
3 .c-box 3 .c-box
4 div(style={ display: 'flex', gap: '.3em' }) 4 div(style={ display: 'flex', gap: '.3em' })
5 +avatar(size='150' hue=180 href='#') 5 +avatar(size='400' href='#')
6 = 'Vo' 6 = 'Vo'
7 +avatar(size='150' hue=225) 7 +avatar(size='400' status='green' hue=45)
8 = 'lp'
9 +avatar(size='400' src='avatar.png')
10 +avatar(size='400' src='avatar.png' status='red')
11 br
12 br
13 div(style={ display: 'flex', gap: '.3em' })
14 +avatar(size='300' href='#')
15 = 'Vo'
16 +avatar(size='300' status='green' hue=45)
17 = 'lp'
18 +avatar(size='300' src='avatar.png')
19 +avatar(size='300' src='avatar.png' status='red')
20 br
21 br
22 div(style={ display: 'flex', gap: '.3em' })
23 +avatar(size='200' href='#')
24 = 'Vo'
25 +avatar(size='200' status='green' hue=45)
26 = 'lp'
27 +avatar(size='200' src='avatar.png')
28 +avatar(size='200' src='avatar.png' status='red')
29 br
30 br
31 div(style={ display: 'flex', gap: '.3em' })
32 +avatar(size='150' href='#')
33 = 'Vo'
34 +avatar(size='150' status='green' hue=45)
8 = 'lp' 35 = 'lp'
9 +avatar(size='150' src='avatar.png') 36 +avatar(size='150' src='avatar.png')
37 +avatar(size='150' src='avatar.png' status='red')
10 br 38 br
11 br 39 br
12 div(style={ display: 'flex', gap: '.3em' }) 40 div(style={ display: 'flex', gap: '.3em' })
@@ -36,11 +64,39 @@ mixin view-avatar
36 64
37 .c-box 65 .c-box
38 div(style={ display: 'flex', gap: '.3em' }) 66 div(style={ display: 'flex', gap: '.3em' })
39 +avatar(circle=true size='150' hue=180 href='#') 67 +avatar(circle=true size='400' href='#')
68 = 'Vo'
69 +avatar(circle=true size='400' status='green' hue=45)
70 = 'lp'
71 +avatar(circle=true size='400' src='avatar.png')
72 +avatar(circle=true size='400' src='avatar.png' status='red')
73 br
74 br
75 div(style={ display: 'flex', gap: '.3em' })
76 +avatar(circle=true size='300' href='#')
77 = 'Vo'
78 +avatar(circle=true size='300' status='green' hue=45)
79 = 'lp'
80 +avatar(circle=true size='300' src='avatar.png')
81 +avatar(circle=true size='300' src='avatar.png' status='red')
82 br
83 br
84 div(style={ display: 'flex', gap: '.3em' })
85 +avatar(circle=true size='200' href='#')
86 = 'Vo'
87 +avatar(circle=true size='200' status='green' hue=45)
88 = 'lp'
89 +avatar(circle=true size='200' src='avatar.png')
90 +avatar(circle=true size='200' src='avatar.png' status='red')
91 br
92 br
93 div(style={ display: 'flex', gap: '.3em' })
94 +avatar(circle=true size='150' href='#')
40 = 'Vo' 95 = 'Vo'
41 +avatar(circle=true size='150' hue=225) 96 +avatar(circle=true size='150' status='green' hue=45)
42 = 'lp' 97 = 'lp'
43 +avatar(circle=true size='150' src='avatar.png') 98 +avatar(circle=true size='150' src='avatar.png')
99 +avatar(circle=true size='150' src='avatar.png' status='red')
44 br 100 br
45 br 101 br
46 div(style={ display: 'flex', gap: '.3em' }) 102 div(style={ display: 'flex', gap: '.3em' })
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:09:09 +0000