summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-14 21:15:37 +0100
committerVolpeon <git@volpeon.ink>2022-02-14 21:15:37 +0100
commit57bd000a6abe9a846ea68ae886a327c12f97cdd2 (patch)
tree245fad95877640eaf16fd48bfe453dd060bfdf63
parentFixed menu (diff)
downloadiro-design-57bd000a6abe9a846ea68ae886a327c12f97cdd2.tar.gz
iro-design-57bd000a6abe9a846ea68ae886a327c12f97cdd2.tar.bz2
iro-design-57bd000a6abe9a846ea68ae886a327c12f97cdd2.zip
Update
Diffstat
-rw-r--r--src/objects/_action-button.scss4
-rw-r--r--src/objects/_avatar.scss43
-rw-r--r--src/objects/_button.scss4
-rw-r--r--src/objects/_checkbox.scss8
-rw-r--r--src/objects/_radio.scss8
-rw-r--r--src/objects/_switch.scss10
-rw-r--r--tpl/index.pug32
7 files changed, 59 insertions, 50 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ab9e38b..83321da 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,8 +4,8 @@
4@include iro.props-namespace('action-button') { 4@include iro.props-namespace('action-button') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: iro.fn-px-to-rem(10px), 7 --pad-x: fn.global-dim(--size --125),
8 --pad-y: iro.fn-px-to-rem(10px), 8 --pad-y: fn.global-dim(--size --125),
9 --rounding: 3px, 9 --rounding: 3px,
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 09bebf0..0d9773f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -4,9 +4,18 @@
4@include iro.props-namespace('avatar') { 4@include iro.props-namespace('avatar') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(40px), 7 --100: (
8 --size-sm: iro.fn-px-to-rem(30px), 8 --size: fn.global-dim(--size --450),
9 --size-xs: iro.fn-px-to-rem(18px), 9 --font-size: fn.global-dim(--font-size --100),
10 ),
11 --75: (
12 --size: fn.global-dim(--size --325),
13 --font-size: fn.global-dim(--font-size --75),
14 ),
15 --50: (
16 --size: fn.global-dim(--size --225),
17 --font-size: fn.global-dim(--font-size --50),
18 ),
10 --indicator-size: fn.foreign-dim(--status-indicator, --size), 19 --indicator-size: fn.foreign-dim(--status-indicator, --size),
11 --indicator-spacing: iro.fn-px-to-rem(3px), 20 --indicator-spacing: iro.fn-px-to-rem(3px),
12 --rounding: 25%, 21 --rounding: 25%,
@@ -24,7 +33,7 @@
24 @include iro.bem-object(iro.props-namespace()) { 33 @include iro.bem-object(iro.props-namespace()) {
25 display: inline-block; 34 display: inline-block;
26 position: relative; 35 position: relative;
27 font-size: 1rem; 36 font-size: fn.dim(--100 --font-size);
28 font-style: normal; 37 font-style: normal;
29 38
30 @include iro.bem-elem('status') { 39 @include iro.bem-elem('status') {
@@ -45,12 +54,12 @@
45 54
46 @include iro.bem-elem('content') { 55 @include iro.bem-elem('content') {
47 display: block; 56 display: block;
48 width: fn.dim(--size); 57 width: fn.dim(--100 --size);
49 height: fn.dim(--size); 58 height: fn.dim(--100 --size);
50 border-radius: fn.dim(--rounding); 59 border-radius: fn.dim(--rounding);
51 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); 60 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
52 color: #fff; 61 color: #fff;
53 line-height: fn.dim(--size); 62 line-height: fn.dim(--100 --size);
54 text-align: center; 63 text-align: center;
55 object-fit: cover; 64 object-fit: cover;
56 object-position: center center; 65 object-position: center center;
@@ -68,23 +77,23 @@
68 } 77 }
69 } 78 }
70 79
71 @include iro.bem-modifier('sm') { 80 @include iro.bem-modifier('75') {
72 font-size: iro.fn-px-to-rem(13px); 81 font-size: fn.dim(--75 --font-size);
73 82
74 @include iro.bem-elem('content') { 83 @include iro.bem-elem('content') {
75 width: fn.dim(--size-sm); 84 width: fn.dim(--75 --size);
76 height: fn.dim(--size-sm); 85 height: fn.dim(--75 --size);
77 line-height: fn.dim(--size-sm); 86 line-height: fn.dim(--75 --size);
78 } 87 }
79 } 88 }
80 89
81 @include iro.bem-modifier('xs') { 90 @include iro.bem-modifier('50') {
82 font-size: iro.fn-px-to-rem(11px); 91 font-size: fn.dim(--50 --font-size);
83 92
84 @include iro.bem-elem('content') { 93 @include iro.bem-elem('content') {
85 width: fn.dim(--size-xs); 94 width: fn.dim(--50 --size);
86 height: fn.dim(--size-xs); 95 height: fn.dim(--50 --size);
87 line-height: fn.dim(--size-xs); 96 line-height: fn.dim(--50 --size);
88 } 97 }
89 } 98 }
90 } 99 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 15804f1..94711b7 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -43,8 +43,8 @@
43@include iro.props-namespace('button') { 43@include iro.props-namespace('button') {
44 @include iro.props-store(( 44 @include iro.props-store((
45 --dims: ( 45 --dims: (
46 --pad-x: iro.fn-px-to-rem(19px), 46 --pad-x: fn.global-dim(--size --225),
47 --pad-y: iro.fn-px-to-rem(8px), 47 --pad-y: fn.global-dim(--size --100),
48 --rounding: 10em, 48 --rounding: 10em,
49 ), 49 ),
50 ), 'dims'); 50 ), 'dims');
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 107d7ad..f5c599b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(14px), 7 --size: fn.global-dim(--size --175),
8 --label-gap: iro.fn-px-to-rem(10px), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: fn.global-dim(--size --65),
12 --margin-right: fn.global-dim(--size --325), 12 --margin-right: fn.global-dim(--size --325),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 96a5174..9482c5b 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('radio') { 4@include iro.props-namespace('radio') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --diameter: iro.fn-px-to-rem(15px), 7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: iro.fn-px-to-rem(10px), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: fn.global-dim(--size --65),
12 --margin-right: fn.global-dim(--size --325), 12 --margin-right: fn.global-dim(--size --325),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index b5aa839..447335e 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
4@include iro.props-namespace('switch') { 4@include iro.props-namespace('switch') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --width: iro.fn-px-to-rem(26px), 7 --width: fn.global-dim(--size --325),
8 --height: iro.fn-px-to-rem(15px), 8 --height: calc(fn.global-dim(--size --175) + 1px),
9 --label-gap: iro.fn-px-to-rem(10px), 9 --label-gap: fn.global-dim(--size --125),
10 --border-width: fn.global-dim(--border-width --medium), 10 --border-width: fn.global-dim(--border-width --medium),
11 --pad-x: iro.fn-px-to-rem(5px), 11 --pad-x: fn.global-dim(--size --65),
12 --pad-y: iro.fn-px-to-rem(5px), 12 --pad-y: fn.global-dim(--size --65),
13 --margin-right: fn.global-dim(--size --325), 13 --margin-right: fn.global-dim(--size --325),
14 ), 14 ),
15 ), 'dims'); 15 ), 'dims');
diff --git a/tpl/index.pug b/tpl/index.pug
index dc037f5..d224c53 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -29,7 +29,7 @@ mixin user-card(name, hue)
29 const avaName = name.slice(0, 1) 29 const avaName = name.slice(0, 1)
30 30
31 .l-card.l-card--flush.l-card--75 31 .l-card.l-card--flush.l-card--75
32 +avatar(block=true size='xs' class='l-card__block' hue=hue) 32 +avatar(block=true size='50' class='l-card__block' hue=hue)
33 = avaName 33 = avaName
34 = name 34 = name
35 35
@@ -397,20 +397,20 @@ html
397 br 397 br
398 br 398 br
399 div(style={ display: 'flex', gap: '.3em' }) 399 div(style={ display: 'flex', gap: '.3em' })
400 +avatar(size='sm' hue=90) 400 +avatar(size='75' hue=90)
401 = 'eo' 401 = 'eo'
402 +avatar(size='sm' status='green' hue=135) 402 +avatar(size='75' status='green' hue=135)
403 = 'n' 403 = 'n'
404 +avatar(size='sm' src='avatar.png') 404 +avatar(size='75' src='avatar.png')
405 +avatar(size='sm' src='avatar.png' status='red') 405 +avatar(size='75' src='avatar.png' status='red')
406 br 406 br
407 br 407 br
408 div(style={ display: 'flex', gap: '.3em' }) 408 div(style={ display: 'flex', gap: '.3em' })
409 +avatar(size='xs' hue=180) 409 +avatar(size='50' hue=180)
410 = 'V' 410 = 'V'
411 +avatar(size='xs' hue=225) 411 +avatar(size='50' hue=225)
412 = 'o' 412 = 'o'
413 +avatar(size='xs' src='avatar.png') 413 +avatar(size='50' src='avatar.png')
414 414
415 +box 415 +box
416 div(style={ display: 'flex', gap: '.3em' }) 416 div(style={ display: 'flex', gap: '.3em' })
@@ -423,20 +423,20 @@ html
423 br 423 br
424 br 424 br
425 div(style={ display: 'flex', gap: '.3em' }) 425 div(style={ display: 'flex', gap: '.3em' })
426 +avatar(circle=true size='sm' hue=90) 426 +avatar(circle=true size='75' hue=90)
427 = 'eo' 427 = 'eo'
428 +avatar(circle=true size='sm' status='green' hue=135) 428 +avatar(circle=true size='75' status='green' hue=135)
429 = 'n' 429 = 'n'
430 +avatar(circle=true size='sm' src='avatar.png') 430 +avatar(circle=true size='75' src='avatar.png')
431 +avatar(circle=true size='sm' src='avatar.png' status='red') 431 +avatar(circle=true size='75' src='avatar.png' status='red')
432 br 432 br
433 br 433 br
434 div(style={ display: 'flex', gap: '.3em' }) 434 div(style={ display: 'flex', gap: '.3em' })
435 +avatar(circle=true size='xs' hue=180) 435 +avatar(circle=true size='50' hue=180)
436 = 'V' 436 = 'V'
437 +avatar(circle=true size='xs' hue=225) 437 +avatar(circle=true size='50' hue=225)
438 = 'o' 438 = 'o'
439 +avatar(circle=true size='xs' src='avatar.png') 439 +avatar(circle=true size='50' src='avatar.png')
440 440
441 //----------------------------------------- 441 //-----------------------------------------
442 442
@@ -448,7 +448,7 @@ html
448 +action-button(quiet=true selected=true)= 'Menu' 448 +action-button(quiet=true selected=true)= 'Menu'
449 +action-menu 449 +action-menu
450 +action-menu-slot(class='l-card l-card--flush') 450 +action-menu-slot(class='l-card l-card--flush')
451 +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block') 451 +avatar(block=true circle=true size='75' src='avatar.png' class='l-card__block')
452 .l-card__block.l-card__block--main 452 .l-card__block.l-card__block--main
453 strong.u-d-block= 'Volpeon' 453 strong.u-d-block= 'Volpeon'
454 small.u-d-block= '@volpeon@mk.vulpes.one' 454 small.u-d-block= '@volpeon@mk.vulpes.one'
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 05:41:54 +0000