summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 07:54:12 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 07:54:12 +0200
commit9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f (patch)
treeca289d02ec274170411e5899c4569c3b8904be1c
parentDervice code font size from 100 (diff)
downloadiro-design-9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f.tar.gz
iro-design-9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f.tar.bz2
iro-design-9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f.zip
card -> media
Diffstat
-rw-r--r--src/_layouts.scss2
-rw-r--r--src/layouts/_media.scss (renamed from src/layouts/_card.scss)2
-rw-r--r--src/objects/_heading.scss7
-rw-r--r--src/scopes/_headings.scss7
-rw-r--r--tpl/index.pug4
-rw-r--r--tpl/objects/action-menu.pug8
-rw-r--r--tpl/objects/bubble.pug6
-rw-r--r--tpl/objects/dialog.pug8
-rw-r--r--tpl/objects/menu.pug10
-rw-r--r--tpl/objects/text-field.pug8
-rw-r--r--tpl/views/action-menu.pug6
-rw-r--r--tpl/views/bubble-group.pug6
-rw-r--r--tpl/views/bubble.pug6
-rw-r--r--tpl/views/dialog.pug4
-rw-r--r--tpl/views/text-field.pug6
15 files changed, 48 insertions, 42 deletions
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 331eb7e..cc8b1c5 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -1,4 +1,4 @@
1@use 'layouts/card'; 1@use 'layouts/media';
2@use 'layouts/container'; 2@use 'layouts/container';
3@use 'layouts/button-group'; 3@use 'layouts/button-group';
4@use 'layouts/form'; 4@use 'layouts/form';
diff --git a/src/layouts/_card.scss b/src/layouts/_media.scss
index 176df06..61f3cda 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_media.scss
@@ -1,7 +1,7 @@
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@include iro.props-namespace('card') { 4@include iro.props-namespace('media') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --150), 7 --pad-x: fn.global-dim(--size --150),
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index e73b074..d1f37e0 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -17,6 +17,7 @@
17 17
18 display: block; 18 display: block;
19 margin-top: fn.global-dim(--heading --margin-top); 19 margin-top: fn.global-dim(--heading --margin-top);
20 transform: translateX(-.06em);
20 letter-spacing: normal; 21 letter-spacing: normal;
21 text-transform: none; 22 text-transform: none;
22 23
@@ -53,7 +54,8 @@
53 --spacing: 1px 54 --spacing: 1px
54 )); 55 ));
55 56
56 color: fn.color(--strong); 57 transform: none;
58 color: fn.color(--strong);
57 } 59 }
58 60
59 @include iro.bem-modifier('xs') { 61 @include iro.bem-modifier('xs') {
@@ -65,7 +67,8 @@
65 --spacing: 1px 67 --spacing: 1px
66 )); 68 ));
67 69
68 color: fn.color(--light); 70 transform: none;
71 color: fn.color(--light);
69 } 72 }
70 73
71 @include iro.bem-elem('primary') { 74 @include iro.bem-elem('primary') {
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 2e7d88f..58bac7f 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -13,6 +13,7 @@
13 @include mx.set-font(--headline); 13 @include mx.set-font(--headline);
14 14
15 display: block; 15 display: block;
16 transform: translateX(-.06em);
16 letter-spacing: normal; 17 letter-spacing: normal;
17 text-transform: none; 18 text-transform: none;
18 } 19 }
@@ -47,7 +48,8 @@
47 --spacing: 1px 48 --spacing: 1px
48 )); 49 ));
49 50
50 color: fn.foreign-color(--heading, --strong); 51 transform: none;
52 color: fn.foreign-color(--heading, --strong);
51 } 53 }
52 54
53 h6 { 55 h6 {
@@ -59,7 +61,8 @@
59 --spacing: 1px 61 --spacing: 1px
60 )); 62 ));
61 63
62 color: fn.foreign-color(--heading, --light); 64 transform: none;
65 color: fn.foreign-color(--heading, --light);
63 } 66 }
64 67
65 @include iro.bem-elem('primary') { 68 @include iro.bem-elem('primary') {
diff --git a/tpl/index.pug b/tpl/index.pug
index 7bb59a0..f5d2f25 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -44,8 +44,8 @@ mixin user-card(name, hue)
44 - 44 -
45 const avaName = name.slice(0, 1) 45 const avaName = name.slice(0, 1)
46 46
47 .l-card.l-card--flush.l-card--75 47 .l-media.l-media--flush.l-media--75
48 +avatar(block=true size='50' class='l-card__block' hue=hue) 48 +avatar(block=true size='50' class='l-media__block' hue=hue)
49 = avaName 49 = avaName
50 = name 50 = name
51 51
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 751e29d..bb21d9e 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -7,16 +7,16 @@ mixin action-menu
7 7
8mixin action-menu-item 8mixin action-menu-item
9 button.o-action-menu__item(disabled=attributes.disabled) 9 button.o-action-menu__item(disabled=attributes.disabled)
10 .l-card.l-card--flush 10 .l-media.l-media--flush
11 .l-card__block.o-action-menu__icon-slot 11 .l-media__block.o-action-menu__icon-slot
12 if attributes.icon 12 if attributes.icon
13 if attributes.iconIsStatus 13 if attributes.iconIsStatus
14 +status-indicator(attributes.icon)(class='o-action-menu__icon') 14 +status-indicator(attributes.icon)(class='o-action-menu__icon')
15 else 15 else
16 +icon(attributes.icon)(class='o-action-menu__icon') 16 +icon(attributes.icon)(class='o-action-menu__icon')
17 .l-card__block.l-card__block--main 17 .l-media__block.l-media__block--main
18 block 18 block
19 .l-card__block.o-action-menu__icon-slot 19 .l-media__block.o-action-menu__icon-slot
20 if attributes.postIcon 20 if attributes.postIcon
21 +icon(attributes.postIcon)(class='o-action-menu__icon') 21 +icon(attributes.postIcon)(class='o-action-menu__icon')
22 22
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index fad7242..bec6e9e 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -42,10 +42,10 @@ mixin bubble(user)
42 42
43 article(class=classes) 43 article(class=classes)
44 if user && attributes.avatar 44 if user && attributes.avatar
45 .l-card.l-card--flush.l-flex--align-start 45 .l-media.l-media--flush.l-flex--align-start
46 .l-card__block.u-mt-50.u-sticky-top 46 .l-media__block.u-mt-50.u-sticky-top
47 +avatar= user.slice(0, 2) 47 +avatar= user.slice(0, 2)
48 .l-card__block.l-card__block--main 48 .l-media__block.l-media__block--main
49 +content 49 +content
50 else 50 else
51 +content 51 +content
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 91b99d9..95aa41c 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -18,7 +18,7 @@ mixin dialog(title)
18 'o-dialog__header': true, 18 'o-dialog__header': true,
19 'u-themed': !attributes.flat, 19 'u-themed': !attributes.flat,
20 't-lowered': !attributes.flat, 20 't-lowered': !attributes.flat,
21 'l-card': true, 21 'l-media': true,
22 } 22 }
23 23
24 let sidebarHeaderClass = { 24 let sidebarHeaderClass = {
@@ -40,7 +40,7 @@ mixin dialog(title)
40 if slots['sidebar-header'] 40 if slots['sidebar-header']
41 - slots['sidebar-header']() 41 - slots['sidebar-header']()
42 else 42 else
43 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle 43 +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle
44 44
45 if slots.sidebar 45 if slots.sidebar
46 .o-dialog__sidebar.l-overflow 46 .o-dialog__sidebar.l-overflow
@@ -51,8 +51,8 @@ mixin dialog(title)
51 - slots.header() 51 - slots.header()
52 else 52 else
53 if title 53 if title
54 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title 54 +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title
55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block') 55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
56 56
57 section(class=bodyClass) 57 section(class=bodyClass)
58 if slots.body 58 if slots.body
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 3cc092a..52cbe5e 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -18,8 +18,8 @@ mixin menu-item
18 - 18 -
19 let classes = { 19 let classes = {
20 'o-menu__item': true, 20 'o-menu__item': true,
21 'l-card': true, 21 'l-media': true,
22 'l-card--75': true, 22 'l-media--75': true,
23 'is-selected': attributes.selected, 23 'is-selected': attributes.selected,
24 } 24 }
25 if (attributes.class) { 25 if (attributes.class) {
@@ -28,15 +28,15 @@ mixin menu-item
28 28
29 #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) 29 #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
30 if attributes.icon 30 if attributes.icon
31 .l-card__block.o-menu__icon-slot 31 .l-media__block.o-menu__icon-slot
32 if attributes.iconIsStatus 32 if attributes.iconIsStatus
33 +status-indicator(attributes.icon)(class='o-menu__icon') 33 +status-indicator(attributes.icon)(class='o-menu__icon')
34 else 34 else
35 +icon(attributes.icon)(class='o-menu__icon') 35 +icon(attributes.icon)(class='o-menu__icon')
36 .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) 36 .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass })
37 block 37 block
38 if attributes.postIcon 38 if attributes.postIcon
39 .l-card__block.o-menu__icon-slot 39 .l-media__block.o-menu__icon-slot
40 +icon(attributes.postIcon)(class='o-menu__icon') 40 +icon(attributes.postIcon)(class='o-menu__icon')
41 41
42mixin menu-header 42mixin menu-header
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 53d1362..d5c4444 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -14,9 +14,9 @@ mixin text-field
14 'o-text-field--extended': !!block, 14 'o-text-field--extended': !!block,
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-card': !!block, 17 'l-media': !!block,
18 'l-card--flush': !!block, 18 'l-media--flush': !!block,
19 'l-card--gapless': !!block, 19 'l-media--gapless': !!block,
20 } 20 }
21 if (attributes.class) { 21 if (attributes.class) {
22 classes[attributes.class] = true; 22 classes[attributes.class] = true;
@@ -32,7 +32,7 @@ mixin text-field
32 if slots.pre 32 if slots.pre
33 .u-d-contents.t-hi 33 .u-d-contents.t-hi
34 - slots.pre() 34 - slots.pre()
35 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) 35 input.o-text-field__native.l-media__block.l-media__block--main&attributes(attr)
36 if slots.post 36 if slots.post
37 .u-d-contents.t-hi 37 .u-d-contents.t-hi
38 - slots.post() 38 - slots.post()
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug
index 4f96934..3357caa 100644
--- a/tpl/views/action-menu.pug
+++ b/tpl/views/action-menu.pug
@@ -4,9 +4,9 @@ mixin view-action-menu
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu' 5 +action-button(quiet=true selected=true)= 'Menu'
6 +action-menu 6 +action-menu
7 +action-menu-slot(class='l-card l-card--flush') 7 +action-menu-slot(class='l-media l-media--flush')
8 +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') 8 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
9 .l-card__block.l-card__block--main 9 .l-media__block.l-media__block--main
10 strong.u-d-block= 'Volpeon' 10 strong.u-d-block= 'Volpeon'
11 small.u-d-block= '@volpeon@mk.vulpes.one' 11 small.u-d-block= '@volpeon@mk.vulpes.one'
12 +action-menu-separator 12 +action-menu-separator
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 19b06c4..8464bc7 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -22,11 +22,11 @@ mixin view-bubble-group
22 +bubble-group('Volpeon') 22 +bubble-group('Volpeon')
23 +bubble()(class='l-bubble-group__bubble') 23 +bubble()(class='l-bubble-group__bubble')
24 +slot('header') 24 +slot('header')
25 .l-card.l-card--flush 25 .l-media.l-media--flush
26 .l-card__block.l-card__block--main 26 .l-media__block.l-media__block--main
27 strong= 'Volpeon' 27 strong= 'Volpeon'
28 small.u-ml-100= '@volpeon@mk.vulpes.one' 28 small.u-ml-100= '@volpeon@mk.vulpes.one'
29 small.l-card__block 29 small.l-media__block
30 = '5 minutes ago' 30 = '5 minutes ago'
31 +icon('lock')(class='u-ml-100') 31 +icon('lock')(class='u-ml-100')
32 +slot('body')= 'Full width bubbles test' 32 +slot('body')= 'Full width bubbles test'
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index 0e65635..be9cf38 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -14,11 +14,11 @@ mixin view-bubble
14 .c-box.l-overflow(style='resize: vertical') 14 .c-box.l-overflow(style='resize: vertical')
15 +bubble('Volpeon')(avatar=true) 15 +bubble('Volpeon')(avatar=true)
16 +slot('header') 16 +slot('header')
17 .l-card.l-card--flush 17 .l-media.l-media--flush
18 .l-card__block.l-card__block--main 18 .l-media__block.l-media__block--main
19 strong= 'Volpeon' 19 strong= 'Volpeon'
20 small.u-ml-100= '@volpeon@mk.vulpes.one' 20 small.u-ml-100= '@volpeon@mk.vulpes.one'
21 small.l-card__block 21 small.l-media__block
22 = '5 minutes ago' 22 = '5 minutes ago'
23 +icon('lock')(class='u-ml-100') 23 +icon('lock')(class='u-ml-100')
24 +slot('body') 24 +slot('body')
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index f90ef21..9d6061d 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -42,10 +42,10 @@ mixin view-dialog
42 +backdrop 42 +backdrop
43 +dialog 43 +dialog
44 +slot('header') 44 +slot('header')
45 .l-card__block.l-flex 45 .l-media__block.l-flex
46 +action-button(quiet=true icon='chevron-left') 46 +action-button(quiet=true icon='chevron-left')
47 +action-button(quiet=true icon='chevron-right') 47 +action-button(quiet=true icon='chevron-right')
48 .l-card__block.l-card__block--main 48 .l-media__block.l-media__block--main
49 +div-heading('sm')= 'Tags' 49 +div-heading('sm')= 'Tags'
50 +slot('sidebar') 50 +slot('sidebar')
51 +menu(style={ 'min-width': '10em' }) 51 +menu(style={ 'min-width': '10em' })
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 262195d..9a60741 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -16,8 +16,8 @@ mixin view-text-field
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-card__block')= 'Volpeon' 19 +action-button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-ml-50') 20 +divider('vertical')(class='u-ml-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-card__block') 22 +action-button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-card__block') 23 +action-button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 01:10:30 +0000